CNET javascript update (r90)

I released a lot of code today including a bug fix that was probably pestering any of you with r87.

• product.picker.js now has no picklets; these are in the implementations/picklets directory
• ProductPicker now detects if there is no doctyp and, if not, sets the position of the picker to be fixed (no IE6 support)
• small docs update in element.cnet.js
• added new picklet: CNETProductPicker_PricePath
• added new picklet: NewsStoryPicker_Path
• new file: clipboard.js (allows you to insert text into the OS clipboard)
• new file: html.table.js (automates building html tables)
• new file: element.forms.js (for managing text inputs - get selected text information, insert content around selection, etc.)
• fixed an error in stickyWinHTML (ie reserves "class" for member names)
• converted window.onDomReady references to window.addEvent('domready'..
• updated css for stickyWin.js to avoid namespace conflicts with the css class "clearfix"

docs | svn | tutorials

New functionality includes these new files:

clipboard.js
Let's you copy stuff to the user's OS clipboard:

PLAIN TEXT

JavaScript:

Clipboard.copy('this is now on your clipboard');

Clipboard.copy('this is now on your clipboard');

PLAIN TEXT

JavaScript:

/*
    this example will copy what you select in the input above;
    run this code, then select some text, and it will be on your clipboard */
$('clipboardExample').addEvent('click', function(){
  Clipboard.copyFromElement('clipboardExample');
});

/*
this example will copy what you select in the input above;
run this code, then select some text, and it will be on your clipboard */
$('clipboardExample').addEvent('click', function(){
Clipboard.copyFromElement('clipboardExample');
});

element.forms.js
This library helps manage text area and input manipulation. Functions include:
Element.getTextInRange, getSelectedText, getSelectedRange, selectRange, insertAtCursor, and insertAround.

text in range (click the input to execute):

selected text (select some text to execute):

getSelectedRange: (select some text to execute)

selectRange (click to execute; this example passes in an array [2,5]):

selectRange (click to execute; selectRange also will take two integers; this example passes in '2,5'):

insertAtCursor (click anywhere to insert the example):

insertAround (select some text or click anywhere to insert "<" and ">" around the text):

html.table.js
This just automates creating tables for tabular data.

PLAIN TEXT

JavaScript:

var myTable = new HtmlTable({
  properties: {
    border: 1,
    cellspacing: 3
  },
  rows: [
    ['apple', 'red'],
    ['lemon', 'yellow']
  ]
});
myTable.table.injectInside($('exampleHtmlTable'));
myTable.push(['lime', 'green']);
myTable.push(['grape', 'purple']);

var myTable = new HtmlTable({
properties: {
border: 1,
cellspacing: 3
},
rows: [
['apple', 'red'],
['lemon', 'yellow']
]
});
myTable.table.injectInside($('exampleHtmlTable'));
myTable.push(['lime', 'green']);
myTable.push(['grape', 'purple']);

You can also pass in a more sophisticated row element:

PLAIN TEXT

JavaScript:

var myTable = new HtmlTable({
  properties: {
    border: 1,
    cellspacing: 3
  },
  rows: [
    [{content: 'fruits', properties: {colspan: 2, class: "someCssClass", style: "border: 1px solid blue"}}],
    ['apple', 'red'],
    ['lemon', 'yellow']
  ]
});
myTable.table.injectInside($('exampleHtmlTable2'));

var myTable = new HtmlTable({
properties: {
border: 1,
cellspacing: 3
},
rows: [
[{content: 'fruits', properties: {colspan: 2, class: "someCssClass", style: "border: 1px solid blue"}}],
['apple', 'red'],
['lemon', 'yellow']
]
});
myTable.table.injectInside($('exampleHtmlTable2'));