Core Docs | Additional Modules Docs
@Description: Parses HTML to for sb.widget.editor dataOut and viewSource methods.
@File: widget/editor.js
@Param: boolean basicOnly Removes all non basic html is basicOnly =1
@Example:str = str.parseHTML(1);
@Description: Removes blank HTML tags
@File: widget/editor.js
@Example:var str = 'hello<b></b>world';
str = str.removeBlankHTML();
//str ='helloworld'
@Description: Strips HTML comments from a string
@File: widget/editor.js
@Example:str = str.stripHTMLComments();
@Description: Strips word HTML from a string. The following function is a slight variation of the word cleaner code posted by Weeezl (user
@File: widget/editor.js
@Example:str = str.stripWordHTML();
@Description: All user notifications feedback goes through this function.
@File: widget/notifier.js
@Example:sb.notify('hello world', 'success');
@Description: Loops through a series of images on an interval, each one which open a new site, such as with advertisments
@File: widget/flipBook.js
@Type: constructor
@Param: object params
.interval integer The interval between flips in milliseconds
.images array An array of image objects with src and href properties, see example
.onFlip function A custom function which fires each time during the flip
.onClick function A custom function which fires when the user clicks on the image before the new window loads. If it returns false, the window doesn't open
.onMouseOver
.onMouseOut
@Example:var flipper = new sb.widget.flipBook({
images : [
{ src : 'estrip.jpg', url : 'http://www.estrip.org', alt : 'blog your life'},
{ src : 'yahoo.jpg', url : 'http://www.yahoo.com', alt : 'yahoo'},
{ src : 'cnn.jpg', url : 'http://www.cnn.com', alt : 'watch the new'},
{ src : 'roswellpark.jpg', url : 'http://www.roswellpark.org', alt : 'cure cancer'}]
});
flipper.image.appendTo('#advertisement');
@Description: Used to create floating internal windows
@File: widget/floatWin.js
@Param: Object params
@Description: Used to an accordian interface beta
@File: widget/accordian.js
@Author: Paul Visco v1.01 11/05/07 12/15/08
@Description: Used to create a palette of random color swatches.
@File: widget/colorRandomizer.js
@Author: Paul Visco 07-06-2008
@Param: Object An optional params argument who properties are applied to the instance you are creating
@Example:var y = new sb.widget.colorRandomizer({
numSwatches : 10,
mouseDown : function(e, self){
//do something when the swatch is clicked
if(e.shiftKey){
self.palette.remove();
return;
}
var target = e.target;
document.body.style.backgroundColor = target.style.backgroundColor;
}
});
y.palette.appendTo('#themes');
@Description: Used to hold the reference to window.setInterval instance create by this.cycle();
@File: widget/colorRandomizer.js
@Example:window.clearInterval(yourInstance.cycler);
@Description: The sb.element node used to hold the palette. This is what you would append to to the DOM
@File: widget/colorRandomizer.js
@Example:yourInstance.palette.appendTo('#themes');
@Description: used to create a datepicker widget. Always
returns the current reference to the only instance
@File: widget/datePicker.js
@Author: Greg Dean and Paul Visco
@Example:var dp = new sb.widget.datePicker({
onDateSelect : function(date){
alert(date);
this.hide();
}
});
dp.show({
x: 200,
y : 200,
z : 1000
});
@Description: Sets up global event listeners for click and keydown on .sb_date_picker elements
@File: widget/datePicker.js
@Param: param object Same arguments as sb.widget.datePicker constructor e.g.
.onDateSelect(date) optional function - default fills in target of event
.onClick(e)
.onHeaderClick(e)
@Example:<input class="sb_date_picker" value ="01/22/1977"/>
//listens for any sb_date_picker actions
sb.widget.datePicker.listen();
@Description: Array with month names, could be overridden in other language scenarios
@File: widget/datePicker.js
@Description: gets the date
@File: widget/datePicker.js
@Param: date If passed 1/22/1977 it would change to 01/22/1977, if no arg is given
returns current cal date
@Example:myPicker.getDate();
@Description: fires anytime a date is selected, by default it sets the originating
target's value to the date selected and hides the datepicker, you can override
@File: widget/datePicker.js
@Example:myPicker.onDateSelect = function(e){};
@Description: fires anytime the header is clicked
@File: widget/datePicker.js
@Example:myPicker.onHeaderClick = function(e){};
@Description: refreshes the calendar view
@File: widget/datePicker.js
@Example:myPicker.refreshCalendar();
@Description: sets the date
@File: widget/datePicker.js
@Param: date String e.g. 01/22/1977 or new Date('01/22/1977');
@Example:myPicker.setDate();
@Description: show the datepicker
@File: widget/datePicker.js
@Param: params Object
.x The x position to show it at
.y The y position to show it at
.z The z index to show it at
@Example:myPicker.show({x : 100, y : 100, z : 100});
@Description: switches to the max date view
@File: widget/datePicker.js
@Example:myPicker.switchToMaxDate();
@Description: switches to the min date view
@File: widget/datePicker.js
@Example:myPicker.switchToMinDate();
@Description: switches to the next day
@File: widget/datePicker.js
@Example:myPicker.switchToNextDay();
@Description: switches to the next month
@File: widget/datePicker.js
@Example:myPicker.switchToNextMonth();
@Description: switches to the prev row
@File: widget/datePicker.js
@Example:myPicker.switchToNextRow();
@Description: switches to the next year
@File: widget/datePicker.js
@Example:myPicker.switchToNextYear();
@Description: switches to the prev day
@File: widget/datePicker.js
@Example:myPicker.switchToPrevDay();
@Description: switches to the prev month
@File: widget/datePicker.js
@Example:myPicker.switchToPrevMonth();
@Description: switches to the prev row
@File: widget/datePicker.js
@Example:myPicker.switchToPrevRow();
@Description: switches to the prev year
@File: widget/datePicker.js
@Example:myPicker.switchToPrevYear();
@Description: boolean true if showing, false if not showing a date picker
@File: widget/datePicker.js
@Description: help screen tips, could be changed overridden for other languages
@File: widget/datePicker.js
@Description: Allows for multifile drag drag upload from the desktop. Works only in Firefox 3.6+ and chrome 5+
@File: widget/dropUpload.js
@Author: Paul Visco v1.0 8/27/2010
@Param: object o params that setup uploader, see property notes for more info
@Example:var myUploader = new sb.widget.dropUpload({
url : '/test/upload2',
target : '#pad',
allowedFilePatterns : /\.(jpg|txt|png|pdf|zip|flv)$/i,
lis : [],
onDropFiles : function(e){},
onDropFile : function(file){
this.lis[file.index] = new sb.element({
tag : 'li',
innerHTML : file.name
});
this.lis[file.index].appendTo(this.target);
this.lis[file.index].styles({
backgroundColor : 'rgb(255,0,0)',
color : '#fff',
padding: '5px'
});
this.lis[file.index].percentage = new sb.element({
tag : 'span',
innerHTML : '0%',
styles : {
paddingLeft : '5px'
}
});
this.lis[file.index].percentage.appendTo(this.lis[file.index]);
},
onFileUploaded : function(file){
this.lis[file.index].percentage.innerHTML = 'DONE!';
},
onUploadProgress : function(file, percentage){
this.lis[file.index].percentage.innerHTML = percentage+'%';
this.lis[file.index].styles({
backgroundColor : 'rgb(0,'+percentage*2+',0)'
});
},
onDownloadProgress : function(file, percent){
},
onDragEnter : function(e){
},
onDragOver : function(e){
},
onNonAllowedFilePattern : function(e){
}
});
myUploader.init();
@Description: fires on exceedsMaxFileSizeK
@File: widget/dropUpload.js
Warning: Invalid argument supplied for foreach() in /var/www/html/surebert/private/models/SurebertDocsCodeBlock.php on line 51
@Description: fires on onDownloadProgress
@File: widget/dropUpload.js
Warning: Invalid argument supplied for foreach() in /var/www/html/surebert/private/models/SurebertDocsCodeBlock.php on line 51
@Description: fires on onDragEnter
@File: widget/dropUpload.js
Warning: Invalid argument supplied for foreach() in /var/www/html/surebert/private/models/SurebertDocsCodeBlock.php on line 51
@Description: fires on onDragOver
@File: widget/dropUpload.js
Warning: Invalid argument supplied for foreach() in /var/www/html/surebert/private/models/SurebertDocsCodeBlock.php on line 51
@Description: fires once for each file
@File: widget/dropUpload.js
Warning: Invalid argument supplied for foreach() in /var/www/html/surebert/private/models/SurebertDocsCodeBlock.php on line 51
@Description: fires when files are dropped
@File: widget/dropUpload.js
Warning: Invalid argument supplied for foreach() in /var/www/html/surebert/private/models/SurebertDocsCodeBlock.php on line 51
@Description: fires after the upload is complete and the data returns and is stored in file.data
file {index string, name string, size int, data string}
@File: widget/dropUpload.js
@Description: fires when file name does match allowed pattern. Upload of that file is canceled when this fires
@File: widget/dropUpload.js
@Description: fires on UploadProgress
@File: widget/dropUpload.js
Warning: Invalid argument supplied for foreach() in /var/www/html/surebert/private/models/SurebertDocsCodeBlock.php on line 51
@Description: The surebert widget creates a live text editor. It replaces all iframes passed to the constructor with real text editors. if they cannot be built it replaces them with empty textareas. The textareas have setContent and getContent methods just like real sb.widget.editor instances so that you can set and get the data in the same way.
@File: widget/editor.js
@Author: Paul Visco v1.01 11/03/07 12/15/08
@Param: string id The id of the iframe to replace with an editor
@Param: function onload A function which is run after the editor is created. The 'this' in the function is the editor.
@Example:<div id="info">
<iframe id="myEditor" ></iframe>
</div>
<script type="text/javascript">
sb.dom.onReady({
id : '#myEditor',
onReady : function(){
myEditor1 = new sb.widget.editor('#myEditor', function(){
this.dataIn('hello world');
});
}
});
</script>
@Description: These booleen values toggle the editor buttons on or off on a global scope e.g. all editors on the page
@File: widget/editor.js
@Description: A plugin button maker for sb.editors, any plugins instantiated on the page are applied to every sb.widget.editor instance on the page. Every plugin has three properties.
1. name: The name displayed on the button in the toolbar. Can be html.
2. title: The title text that is displayed when hovering over the button
3. handler: The function to rn when the button is clicked. The this is the editor. Which has the following properties.
a. this document - a reference to the editable document. Can be used with this.document.body.innerHTML
b. this.textarea - the textarea that is shown when the user is in view source mode
c. this.getSelection - the current user text selection just before clicking the button.
d. this.box - a reference to the iframe the document is in
e. this.id - the id of the iframe that houses the editable document
f
4. styles: A style object, whose properties are applied directly to the button after it is created
@File: widget/editor.js
@Example:var myTestPlugin = new sb.widget.editor.plugin({
name : 'plugin',
title : 'This is a demo plugin',
handler : function(){
alert('This does nothing but alerts plugin');
},
styles : {
backgroundColor:'green',
color: 'white'
}
});
@Description: A plugin button maker for sb.editors, any plugins instantiated on the page are applied to every sb.widget.editor instance on the page. Every plugin has three properties.
name: The name displayed on the button in the toolbar. Can be html
title: the popo up title
handler: can either be an inline function that has reference to the editor with this or a richtext area exec command as a string e.g. 'justifyright', see the exmaples below
@File: widget/editor.js
@Example:var myTestPlugin = new sb.widget.editor.plugin({
name : 'plugin',
title : 'This is a demo plugin',
handler : function(){
alert('This does nothing but alerts plugin');
}
});
@Description: A plugins that allows you to strip html to text only
var save = new sb.widget.editor.plugin({
name :'strip all text',
title : 'Clear All Formatting',
handler : function(){
if(confirm('Are you sure you want to clear all HTML formatting')){
this.document.body.innerHTML =this.document.body.innerHTML.stripHTML();
}
}
});
@File: widget/editor/plugin.js
@Description: THese are the properties associated with every sb.widget.editor instance
@File: widget/editor.js
@Description: Loads more rows from the server. It expects the loading page to be in json format and to be an array of arrays which represent the values in the rows. Null values should be represented by null.
@File: widget/magicTable.js
@Param: o String The url to load the data from
@Param: o object
o.url String The url to load the data from
o.onLoad Function The function that runs, once the rows are returned from the server but before they are added. If it returns false they are not added.
@Example:myTable.loadRows('/some/data');
myTable.loadRows({
url : '/some/data',
//if you return false, the rows are not added
onLoad : function(response){
alert('response');
return true;
}
});
@Description: The sort methods avaiable to sb.widget.magicTable. You can add your own too! some compare and guessFormat sort functions adapted from http://www.tagarga.com/blok/post/2
@File: widget/magicTable.js
@Description: Cleans the header data for a th
@File: widget/magicTable.js
@Param: th Element The th that was clicked.
@Example:myTable.getHeaderValue = function(){
};
@Description: Cleans the header data for a th
@File: widget/magicTable.js
@Param: td Element The td element to get the value of
@Param: rowIndex The row index
@Param: cellIndex The cell index
@Example://returns the value of the td node passed to the function
var data = myTable.getCellValue(td);
//returns the value of cell 3 in row 0
var data = myTable.getCellValue(0,3);
@Description: fires after .sortBy is run and after actual sort is done. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The th that was clicked.
@Example:myTable.onAfterSort = function(th){
//renumber the first td in each row after sort
var rows = this.body.$('tr');
var x = 1;
rows.forEach(function(v){
v.firstChild.innerHTML = x;
x++;
});
};
@Description: fires after .sortBy is run but before actual sort begins. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: th Element The th that was clicked.
@Example:myTable.onBeforeSort = function(th){
//do something
};
@Description: fires when a cell is clicked. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The td that was clicked.
@Example:myTable.onCellClick = function(td){
td.style.backgroundColor = 'pink';
if(td.innerHTML == 'delete'){
$(td.parentNode).remove();
}
};
@Description: fires when a table cell is moused out. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The td that was mousedout.
@Example:myTable.onCellMouseOut = function(td){
td.style.backgroundColor = '';
};
@Description: fires when a table cell is moused over. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The td that was mousedover.
@Example:myTable.onCellMouseOver = function(td){
td.style.backgroundColor = 'pink';
};
@Description: fires when a cell in a column is clicked. Because there is no correspionding column node in HTML it returns an sb.nodeList of all the tds in the column. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: column Object An object representing the column clicked and some additional data
column.title String The title of the column
column.values Array An array of the values in the column
column.th Element The TH of the column clicked
column.tds sb.nodeList containing the TDs of the column clicked
column.prevColumn A reference to the last Column clicked if there was one. This allows to reset any changes (e.g. style changes) from the last column.
@Example:myTable.onColClick = function(column){
//change all the columns to yellow
column.tds.styles({
backgroundColor : 'yellow'
});
if(column.prevColumn){
column.prevColumn.tds.styles({
backgroundColor : ''
});
}
column.values = column.values.map(function(v){
return parseInt(v, 10);
});
alert(column.values.sum());
};
@Description: fires when a header TH is clicked. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: th Element The th that was clicked.
@Example:myTable.onHeaderClick = function(th){
th.style.backgroundColor = 'red';
};
@Description: fires when a row is clicked. The "this" is the magicTable instance itself.
@File: widget/magicTable.js
@Param: td Element The td that was clicked.
@Example:myTable.onRowClick = function(tr){
tr.style.backgroundColor = 'red';
};
@Description: Removes rows from a magicTable instance, rows start at 0
@File: widget/magicTable.js
@Example://removes row 1
mymagicTable.removeRows(1);
//all rows in the array
mymagicTable.removeRows([0,1,5,7]);
//remove all rows in range
mymagicTable.removeRows('1-3');
@Description: Loads more rows from the server. It expects the loading page to be in json format and to be an array of arrays which represent the values in the rows. Null values should be represented by null.
@File: widget/magicTable.js
@Param: header string Either the text value of the header to sort by, or a DOM reference to the header itself. Always lowercase.
@Param: reverse boolean Sort DESC
@Example:myTable.sortBy('age');
//or reverse
myTable.sortBy('age', true);
//sort by column 0
myTable.sortBy(0);
//sort by a <th> node DOM reference
myTable.sortBy(th);
@Description: provides growl like messages for user
@File: widget/notifier.js
@Version: 1.0 08-06-2009
@Example://add this css
#sb_notifications{
position:absolute;
right:10px;
top:10px;
z-index:999;
}
.sb_notify{
width:500px;
border:1px solid #ACACAC;
color:#333;
background-color:#DFDFDF;
padding:10px;
margin:5px;
opacity:0.9;
font-size:1.5em;
}
.sb_notify .sb_close{
background-image:url('/surebert/load/_media/x.png');
background-repeat:no-repeat;
font-size:0px;
width:20px;
height:20px;
margin:-15px 0 0 -20px
}
//then
sb.widget.notifier.init();
@Description: Used to clear any open notifcation messages
@File: widget/notifier.js
@Example:sb.widget.notifier.clearAll();
@Description: Looks for sb_notifications box, if not found, creates and appends to the top of body tag
@File: widget/notifier.js
@Description: All user notifications feedback goes through this function.
@File: widget/notifier.js
@Param: message string The message to be displayed, can be plain text or HTML
@Param: className string Optional The CSS className to assign to the message
@Param: stay boolean Optional Determines if box stays or fade by default
@Param: effect object Optional Can override the properties of the effect used to move the boxes
effect.heightTween string The height tween method
effect.opacityTween string The opacity tween method
effect.duration integer The duration of the fade out, roll up
effect.onEnd function A function which fires when the message is done fading out
@Example:sb.widget.notifier.notify('Hello World '+new Date());
@Description: A widget for creating simple sliders
@File: widget/slider.js
@Param: object Has the following properties
min integer The minimum value for the slider, defaults to 0
max integer The maximum value for the slider, defaults to 100
defaultValue integer The default value for the slider
allowFloats boolean Determines if float values are allowed or rounded
displayName boolean Is the name of the slider displayed on it
displayValue boolean Is the value of the slider displayed on it
@Example:var bri = new sb.widget.slider({
name : 'brightness',
min : 0,
max : 255,
id : 'brightness',
defaultValue : 100,
allowFloats : 0,
onChangeValue : function(){
document.body.style.backgroundColor = 'rgb('+this.value+','+this.value+','+this.value+')';
}
});
bri.appendTo('#brightnessDiv');
@Description: used to make sortable lists
@File: widget/sortList.js
@Version: 1.21 11/12/07 12/15/08
@Example:<style type="text/css">
#my_list li{
list-style-type:none;
border:1px solid #ACACAC;
background-color:white;
}
sb_sortlist_handle{
background-image:url('http://webservicesdev.roswellpark.org/webui/icons/ns_arrow.png');
background-repeat:no-repeat;
margin-right:15px;
width:20px;
display:inline-block;
}
</style>
<ul id="my_list">
<li id="a">Element 1</li>
<li id="b">Element 2</li>
<li id="c">Element 3</li>
<li id="d">Element 4</li>
<li id="e">Element 5</li>
</ul>
<script type="text/javascript">
var list = new sb.widget.sortList({
list : '#my_list',
onSwitch : function(){
},
onItemSelect : function(){
this.style.backgroundColor = '#DFDFDF';
//this.style.fontSize = (parseInt(this.getStyle('fontSize'), 10)+10)+'px';
},
onItemDrop :function(){
this.style.backgroundColor = '';
//this.spring();
}
});
</script>
@Description: used to make swappable lists
@File: widget/swapList.js
@Version: 1.21 11/12/07 12/15/08
@Example:myList = new sb.widget.swapList('#myList', '');
@Description: Adds rows to table headers
@File: widget/magicTable.js
@Example:myTable.addHeaders(['Blythe', '50','Wed, November 24, 2004','04/12/03','3.9.05', '$6,89']);
@Description: Adds rows to a table instance
@File: widget/magicTable.js
@Example:myTable.addRows(['Blythe', '50','Wed, November 24, 2004','04/12/03','3.9.05', '$6,89']);
//or
myTable.addRows([
['Julie', 'f', 54, 3456],
['Wendy', 'f', 22, 4562],
['Gina', 'f', 78, 5773],
['Timmy', 'm', 12, 5467],
['Jason', 'm', 45, 3452],
['Tony', 'm', 5, 3456]
]);
@Description: The CSS classnames to use. These are all optional and some have defaults, see below
@File: widget/magicTable.js
@Example:myTable.classes.unsortable String The classname for columns you want to set as unsortable, the default is 'unsortable'
myTable.classes.sortable String The classname added to all sortable columns <th>s by sb.magicTable, default is 'sortable'
myTable.classes.sorted_by String The classname added to the <th> being sorted on, default is 'sorted_by'
myTable.classes.force_sort String The className used for forcing sort type
myTable.classes.asc String The className you want used for ascending sorts, if you don't just want the default arrow
myTable.classes.desc String The className you want used for descending sorts, if you don't just want the default arrow
myTable.classes.even String The className used even rows if you want even/odd CSS
myTable.classes.odd String The className used odd rows if you want even/odd CSS
@Description: The default column to sort by, either by cellIndex or title. See constructor arguments above.
@File: widget/magicTable.js
@Example:var myTable = new sb.widget.magicTable({
table : '#jimmy',
sortable : 1,
defaultSortedBy : 2,
});
var myTable = new sb.widget.magicTable({
table : '#jimmy',
sortable : 1,
defaultSortedBy : 'age',
});
@Description: Allow you to predefine the column sort types, must match column header. Compare types defined in sb.widget.magicTable.prototype.compare
@File: widget/magicTable.js
@Param: headers Array An array that represents the predefined sort type for each column as in
@Example:myTable.setSortTypes(['alpha', 'numeric', 'natural', 'natural', 'usdate', 'usdate', 'alpha']);
@Description: Used to create a websafe color palette table
@File: widget/colorPalette.js
@Author: Paul Visco v1.01 11/05/07 12/15/08
@Example:sb.include('widget.colorPalette');
var table = new sb.widget.colorPalette({
id : 'jimmy',
events : {
click : function(e){
if(td.nodeName =='TD'){
if(table.selectedColor){
table.selectedColor.style.border='';
}
$('body').style.backgroundColor=td.style.backgroundColor;
td.style.border='1px solid white';
table.selectedColor = td;
}
}
}
});
table.appendToTop('body');
@Description: Makes or adds interactivity to an HTML table. All events are attached to the table and delegated from their to keep overhead very low
@File: widget/magicTable.js
@Author: Paul Visco
@Version: 1.31 12-08-2008 12-15-2008
@Example:var myTable = new sb.widget.magicTable({
table : '#jimmy',
sortable : 1,
defaultSortedBy : 2,
onCellClick : function(td){
td.style.backgroundColor = 'pink';
if(td.innerHTML == 'delete'){
$(td.parentNode).remove();
}
},
onRowClick : function(tr){
tr.style.backgroundColor = 'red';
//alert(tr.innerHTML);
}
});
myTable.sortBy('colName');
//or
var myTable = new sb.widget.magicTable({
table : {
headers : ['name', 'age', 'phone'],
rows : [
['Paul', 31, '228-7445'],
['Matthew', 36, '228-7613'],
['Terry', 29, '228-5731']
]
},
sortable : 1,
onCellClick : function(td){
td.style.backgroundColor = 'pink';
if(td.innerHTML == 'delete'){
$(td.parentNode).remove();
}
},
onRowClick : function(tr){
tr.style.backgroundColor = 'red';
//alert(tr.innerHTML);
}
});
myTable.table.appendTo('body');
@Description: makes floating particles that float around the screen
Math for floating pattern from code by Altan d.o.o. (snow
@File: widget/particles.js
@Author: Paul Visco 11-05-04, 12-15-08
@Example:sb.include('widget.particles');
sb.widget.particles.init(5, 'hello');