You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@jspwiki.apache.org by br...@apache.org on 2009/09/26 15:23:59 UTC
svn commit: r819135 [1/4] - in
/incubator/jspwiki/trunk/src/WebContent/scripts: dialog.js
jspwiki-common.js jspwiki-commonstyles.js jspwiki-edit.js jspwiki-prefs.js
mootools-core.js mootools-more.js mootools.js stripes-support.js
Author: brushed
Date: Sat Sep 26 13:23:58 2009
New Revision: 819135
URL: http://svn.apache.org/viewvc?rev=819135&view=rev
Log:
Upgrade of mootools javascript library.
Added:
incubator/jspwiki/trunk/src/WebContent/scripts/mootools-core.js
incubator/jspwiki/trunk/src/WebContent/scripts/mootools-more.js
Removed:
incubator/jspwiki/trunk/src/WebContent/scripts/mootools.js
Modified:
incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js
incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-common.js
incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-commonstyles.js
incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-edit.js
incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-prefs.js
incubator/jspwiki/trunk/src/WebContent/scripts/stripes-support.js
Modified: incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js
URL: http://svn.apache.org/viewvc/incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js?rev=819135&r1=819134&r2=819135&view=diff
==============================================================================
--- incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js (original)
+++ incubator/jspwiki/trunk/src/WebContent/scripts/dialog.js Sat Sep 26 13:23:58 2009
@@ -2,7 +2,7 @@
/*
Class: SelectionDialog
A selection dialog generates a dialog box, with a set
- of selectable/clickable items.
+ of selectable/clickable items.
Arguments:
options - see [Dialog] object
@@ -14,7 +14,7 @@
Inherits from:
[Dialog]
-
+
Example:
(start code)
new SelectionDialog({
@@ -35,17 +35,19 @@
});
(end code)
*/
-var SelectionDialog = Dialog.extend({
+var SelectionDialog = new Class({
- options: {
+ Extends: Dialog,
+ options: {
//onSelect: function(value){},
//autoClose: false
- },
+ },
initialize:function( options ){
this.parent(options);
this.element.addClass('selectionDialog');
+
this.setBody(options.body)
.resetPosition();
},
@@ -63,34 +65,34 @@
var els = [], onselect = this.onSelect.bind(this), i;
for( i in content ){
- els.push( new Element('li',{
- 'title': content[i],
- 'events': {
- 'click': onselect,
- 'mouseout': function(){ this.removeClass('hover') },
- 'mouseover': function(){ this.addClass('hover') }
+ els.push( new Element('li',{
+ title: content[i],
+ events: {
+ click: onselect,
+ mouseout: function(){ this.removeClass('hover') },
+ mouseover: function(){ this.addClass('hover') }
}
- }).setHTML( i/*.trunc(36)*/ ) );
+ }).set('html', i/*.trunc(36)*/ ) );
};
-
+
this.parent( new Element('ul').adopt(els) );
//this.body.empty().adopt( new Element('ul').adopt(els) );
}
-
+
return this;
},
/*
Function: onSelect
- Click event handler for selectable items.
+ Click event handler for selectable items.
When the autoClose option is set, the dialog will be hidden.
Fires the 'onSelect' event.
*/
onSelect: function(event){
- if( event ){ event = new Event(event).stop() };
- if( this.options.autoClose ) this.hide();
-
- this.fireEvent('onSelect', event.target.getProperty('title'));
+ if( event ){ event = new Event(event).stop() };
+ if( this.options.autoClose ) this.hide();
+
+ this.fireEvent('onSelect', event.target.get('title'));
}
});
@@ -109,7 +111,7 @@
Inherits from:
[SelectionDialog]
-
+
Example
(start code)
dialog= new FontDialog({
@@ -119,38 +121,39 @@
});
(end)
*/
-var FontDialog = SelectionDialog.extend({
+var FontDialog = new Class({
- options: {
+ Extends:SelectionDialog,
+ options: {
fonts: {
'Arial':'arial',
'Comic Sans':'comic sans ms',
'Courier New':'courier new',
- 'Georgia':'georgia',
- 'Helvetica':'helvetica',
- 'Impact':'impact',
- 'Times':'times new roman',
- 'Trebuchet':'trebuchet ms',
+ 'Georgia':'georgia',
+ 'Helvetica':'helvetica',
+ 'Impact':'impact',
+ 'Times':'times new roman',
+ 'Trebuchet':'trebuchet ms',
'Verdana':'verdana'
}
- },
+ },
initialize:function(options){
options.body = options.fonts ? options.fonts : this.options.fonts;
this.parent(options);
this.element.addClass('fontDialog');
- $ES('li',this.body).each(function(li){
- li.setStyle('font-family', li.getProperty('title') );
+ this.body.getElements('li').each(function(li){
+ li.setStyle('font-family', li.get('title') );
});
}
-
+
});
/*
Class: CharsDialog
The CharsDialog is a Dialog object, to support selection of special
- character.
+ character.
Arguments:
options - optional, see options below
@@ -161,10 +164,11 @@
Inherits from:
[Dialog]
*/
-var CharsDialog = Dialog.extend({
+var CharsDialog = new Class({
- options: {
- //onChange: Class.empty,
+ Extends: Dialog,
+ options: {
+ //onChange: Class.empty,
//autoClose: false,
chars: [
' ','¡','¢','£','¥','§','¨','©','«','¬','®',
@@ -177,18 +181,18 @@
'‚','ƒ','„','…','†','‡','ˆ','‰','‹','Œ','‘',
'’','“','”','•','–','—','˜','™','›','œ','Ÿ'
]
- },
+ },
initialize:function(options){
this.parent(options);
this.element.addClass('charsDialog');
/* inspired by smarkup */
- var arr = [],
+ var arr = [],
chars = this.options.chars,
rowCount = chars.length / 11, //fixme: fixed width of table !!
onselect = this.onSelect.bind(this);
-
+
for (var i = 0; i < rowCount; i++) {
arr.push( '<tr>' );
for (var j = i * 11; j < (i * 11 + 11); j++) {
@@ -196,20 +200,20 @@
}
arr.push( '</tr>' );
}
-
+
this.body.adopt( new Element('table',{
'class':'charsDialog',
'events':{ 'click': onselect }
- }).setHTML( '<tbody>', arr.join(''), '</tbody>' )
+ }).set('html', '<tbody>', arr.join(''), '</tbody>' )
);
-
+
this.resetPosition();
},
onSelect: function(e){
if( this.options.autoClose ) this.hide();
- this.fireEvent('onSelect', e.target.getProperty('title'));
+ this.fireEvent('onSelect', e.target.get('title'));
}
});
@@ -217,7 +221,7 @@
/*
Class: ColorDialog
- The ColorDialog is a [Dialog] which allow visual entry of hexadecimal color
+ The ColorDialog is a [Dialog] which allow visual entry of hexadecimal color
values.
Inspiration:
@@ -232,7 +236,7 @@
(start code)
<script>
var cd = new ColorDialog( {
- relativeTo: $('colorButton'),
+ relativeTo: $('colorButton'),
wheelImage:'circle.png',
onChange:function(color){ $('mytarget').setStyle('background',color); }
});
@@ -240,25 +244,26 @@
</script>
(end code)
*/
-var ColorDialog = Dialog.extend({
+var ColorDialog = new Class({
+ Extends: Dialog,
options: {
//onChange: function(color){},
colorImage: 'images/circle-256.png',
resize:{x:[96,400],y:[96,400]} //min/max limits for the resizer
- },
+ },
initialize: function(options){
-
+
var self = this;
- self.parent(options);
+ self.parent(options);
self.element.addClass('colorDialog');
self.hsv = [0,0,100];//starting color.
- self.color = new Element('span').setHTML('#ffffff').injectTop(self.caption);
+ self.color = new Element('span').set('html','#ffffff').injectTop(self.caption);
self.cursor = new Element('div',{
'class':'cursor',
'styles':{'top':86,'left':68}
- //funny calc -- checkout the dialog css defs
+ //funny calc -- checkout the dialog css defs
// 86=64+32-8 (-8=offset circle)
// 68=64+10-5-1 (5=half cursor size, -1=offset circle)
});
@@ -268,8 +273,8 @@
);
self.resize( 128 ); //default size of the body/wheel
-
- new Drag.Base(self.cursor,{
+
+ new Drag(self.cursor,{
handle:self.body,
snap:0,
//also update the wheel on mouse-down
@@ -293,34 +298,34 @@
Recalculate the HSV-color based on x/y mouse coordinates.
After recalculation, the color-wheel cursor is repositioned
and the 'onChange' event is fired.
-
+
Arguments:
page - object with {{ {x:.., y:.. } }} coordinates
*/
setHSV: function( page ){
- var body = this.body.getCoordinates(),
+ var body = this.body.getCoordinates(),
v = [page.x - body.left + 5, page.y - body.top +28 ],
W = body.width,
- W2 = W/2,
- W3 = W2/2,
+ W2 = W/2,
+ W3 = W2/2,
- x = v[0]-W2-3,
+ x = v[0]-W2-3,
y = W-v[1]-W2+21,
SV = Math.sqrt(Math.pow(x,2)+Math.pow(y,2)),
hue = Math.atan2(x,y)/(Math.PI*2);
-
+
this.hsv = [
hue>0?(hue*360):((hue*360)+360),
- SV<W3?(SV/W3)*100:100,
+ SV<W3?(SV/W3)*100:100,
SV>=W3?Math.max(0,1-((SV-W3)/(W3)))*100:100
];
- var hexVal = this.hsv.hsv2rgb().rgbToHex();
- this.color.setHTML( hexVal ).setStyles({
+ var hexVal = this.hsv.hsv2rgb().rgbToHex();
+ this.color.set('html', hexVal ).setStyles({
'color': new Color(hexVal).invert().hex,
- 'background-color': hexVal
- });
+ 'background-color': hexVal
+ });
this.moveCursor( W );
this.fireEvent('onChange', hexVal);
@@ -329,7 +334,7 @@
/*
Function: moveCursor
Reposition the cursor based on the width argument
-
+
Argument
width - in px
*/
@@ -343,10 +348,10 @@
this.cursor.setStyles({
left: Math.round(Math.abs(Math.round(Math.sin(rad)*hyp) + W2 + 3)), //+1
top: Math.round(Math.abs(Math.round(Math.cos(rad)*hyp) - W2 - 21)) //-18
- });
+ });
}
-
+
});
ColorDialog.implement(new Options); //mootools v1.1
@@ -354,23 +359,23 @@
Function: hsv2rgb
Convert HSV values into RGB values
*/
-Array.extend({
- hsv2rgb: function(){
+Array.implement({
+ hsv2rgb: function(){
// easyrgb.com/math.php?MATH=M21#text21
var R,G,A,B,C,F,
S=this[1]/100,
V=this[2]/100,
H=this[0]/360;
- if( S>0 ){
-
+ if( S>0 ){
+
if(H>=1) H=0;
- H=6*H;
+ H=6*H;
F=H-Math.floor(H);
A=Math.round(255*V*(1-S));
B=Math.round(255*V*(1-(S*F)));
C=Math.round(255*V*(1-(S*(1-F))));
- V=Math.round(255*V);
+ V=Math.round(255*V);
switch(Math.floor(H)) {
case 0: R=V; G=C; B=A; break;
@@ -389,7 +394,7 @@
/*
Class: FormDialog
- The FormDialog is a dialog
+ The FormDialog is a dialog
Example:
(start code)
@@ -401,8 +406,9 @@
}
(end)
*/
-var FormDialog = Dialog.extend({
+var FormDialog = new Class({
//todo
+ Extends: Dialog
});
@@ -417,9 +423,9 @@
- allow to extend colums
- allow to extend rows
- automatically converts wiki to table and vice-versa
- - FFS: support [{Table plugin syntax to merge cells
+ - FFS: support [{Table plugin syntax to merge cells
This requires to select multiple cells: join/unjoin cells
-
+
Example:
(start code)
WikiTableDialog( wiki-markup ?? textarea,{
@@ -429,6 +435,7 @@
})
(end)
*/
-var TableDialog = Dialog.extend({
+var TableDialog = new Class({
//todo
+ Extends: Dialog
});
Modified: incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-common.js
URL: http://svn.apache.org/viewvc/incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-common.js?rev=819135&r1=819134&r2=819135&view=diff
==============================================================================
--- incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-common.js (original)
+++ incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-common.js Sat Sep 26 13:23:58 2009
@@ -64,7 +64,7 @@
/*
Global: mootools-extensions
*/
-String.extend({
+String.implement({
/*
Function: deCamelize
@@ -89,45 +89,18 @@
> "this is a long string".trunc(7); //returns "this is..."
*/
trunc: function(size, elips){
-
return this.slice(0,size) + ((this.length<size) ? '' : (elips||'...'));
-
- },
-
- /*
- Function: stripScipts
- Strips the String of its <script> tags and anything in between them.
-
- Examples:
- > var myString = "<script>alert('Hello')</script>Hello, World.";
- > myString.stripScripts(); //Returns "Hello, World."
- */
- stripScripts: function(){
- return this.replace(/<script[^>]*>([\s\S]*?)<\/script>/gi, '');
}
-});
-
-/*
-Function: getLast
- Returns the last item from the array.
- (credit: mootools v1.2, bugfix doesn't work when last element is '')
-
-Examples:
-> ['Cow', 'Pig', 'Dog', 'Cat'].getLast(); //returns 'Cat'
-*/
-//Array.extend seems not to overwrite the native getLast function
-Array.prototype.getLast = function(){
- return (this.length) ? this[this.length - 1] : null;
-}
+});
-Element.extend({
+Element.implement({
/*
- Function: wraps
- This method moves this Element around its target.
+ Function: wrapContent
+ This method moves this Element around its content.(child-nodes)
The Element is moved to the position of the passed element and becomes the parent.
- (credit: mootools v1.2)
+ All child-nodes are moved to the new element.
Arguments:
el - (mixed) The id of an element or an Element.
@@ -140,19 +113,20 @@
> <div id="myFirstElement"></div>
JavaScript
> var mySecondElement = new Element('div', {id: 'mySecondElement'});
- > mySecondElement.wraps($('myFirstElement'));
+ > mySecondElement.wrapContent($('myFirstElement'));
Resulting HTML
> <div id="mySecondElement">
> <div id="myFirstElement"></div>
> </div>
*/
- wraps: function(el){
+ wrapContent : function(el){
while( el.firstChild ) this.appendChild( el.firstChild );
el.appendChild( this ) ;
return this;
},
/*
+ FIXME 123!
Function: visible
Check if the current element and all its parents are visible.
@@ -169,11 +143,21 @@
el = el.getParent();
}
return true;
+
+ //isDisplayed: function(){
+ // return this.getStyle('display') != 'none';
+ // },
+ //
+ //isVisible: function(){
+ // var w = this.offsetWidth, h = this.offsetHeight;
+ // return (w == 0 && h == 0) ? false : (w > 0 && h > 0) ? true : this.isDisplayed();
+ // },
},
/*
Function: hide
Hide the element: set 'display' style to 'none'.
+ Ref. mootools.1.2.3
Returns:
(element) - This Element
@@ -182,12 +166,20 @@
> $('thisElement').hide();
*/
hide: function() {
- return this.setStyle('display','none');
+ //return this.setStyle('display','none');
+ var d;
+ try {
+ // IE fails here if the element is not in the dom
+ if ((d = this.getStyle('display')) == 'none') d = null;
+ } catch(e){}
+Â
+ return this.store('originalDisplay', d || 'block').setStyle('display', 'none');
},
/*
Function: show
Show the element: set 'display' style to '' (default display style)
+ Ref. mootools.1.2.3
Returns:
(element) - This Element
@@ -195,8 +187,9 @@
Examples:
> $('thisElement').show();
*/
- show: function() {
- return this.setStyle('display','');
+ show: function(display) {
+ //return this.setStyle('display','');
+ return this.setStyle('display', display || this.retrieve('originalDisplay') || 'block');
},
/*
@@ -211,6 +204,7 @@
*/
toggle: function() {
return this.visible() ? this.hide() : this.show();
+ //return this[this.isDisplayed() ? 'hide' : 'show']();
},
/*
@@ -238,24 +232,45 @@
/*
Function: getDefaultValue
Returns the default value of a form element.
- Inspired by getValue() of mootools, v1.1
+ Inspired by get('value') of mootools, v1.1
+
+ Note:
+ Checkboxes treat default-values in a different way.
+ Compare the {{checked}} property vs the {{defaultChecked}} property.
+ When equal, return the defaultValue (which btw equals to the value).
+ Otherwise, return false. (FFS: or may be better undefined ?)
Returns:
- (element) - This Element
+ (element) - the default value of the element; or false if not applicable.
Examples:
> $('thisElement').getDefaultValue();
*/
getDefaultValue: function(){
- switch(this.getTag()){
+
+ var self = this,
+ type = self.get('type'),
+ values = [];
+
+ switch( self.get('tag') ){
+
case 'select':
- var values = [];
- $each(this.options, function(option){
+
+ $each(self.options, function(option){
if( option.defaultSelected ) values.push($pick(option.value, option.text));
});
- return (this.multiple) ? values : values[0];
- case 'input': if (!(this.defaultChecked && ['checkbox', 'radio'].contains(this.type)) && !['hidden', 'text', 'password'].contains(this.type)) break;
- case 'textarea': return this.defaultValue;
+ return (self.multiple) ? values : values[0];
+
+ case 'input':
+
+ if( ('checkbox'==type) && (self.checked != self.defaultChecked)) break;
+
+ if( !'checkbox|radio|hidden|text|password'.test(type) ) break;
+
+ case 'textarea':
+
+ return self.defaultValue;
+
}
return false;
},
@@ -295,7 +310,12 @@
}
});
-
+/*
+Shortcuts:
+ $E : synonym for document.getElement(css-selector)
+*/
+var $E = document.getElement.bind(document);
+//var $ = document.id;
/*
Class: Observer
@@ -303,11 +323,14 @@
Example:
> $(formInput).observe(function(){
-> alert('my value changed to '+this.getValue() );
+> alert('my value changed to '+this.get('value') );
> });
*/
var Observer = new Class({
+
+ Implements: Options,
+
options: {
event: 'keyup',
delay: 300
@@ -319,7 +342,7 @@
self.callback = fn;
self.timeout = null;
self.listener = self.fired.bind(self);
- self.value = el.getValue();
+ self.value = el.get('value');
el.set({autocomplete:'off'}).addEvent(self.options.event, self.listener);
},
fired: function(){
@@ -340,9 +363,8 @@
this.clear();
}
});
-Observer.implement(new Options);
-Element.extend({
+Element.implement({
observe: function(fn, options){
return new Observer(this, fn, options);
}
@@ -374,16 +396,14 @@
Uses the [LocalideString] global hash.
Examples:
-> "moreInfo".localize() =='More';
-> "imageInfo".localize(2,4); => "Image {0} of {1}" becomes "Image 2 of 4
+> "moreInfo".localize() =="More";
+> "imageInfo".localize(2,4); => "Image {0} of {1}" becomes "Image 2 of 4"
*/
-String.extend({
+String.implement({
localize: function(){
- var s = LocalizedStrings["javascript."+this],
- args = arguments;
-
- if(!s) return("???" + this + "???");
+ var s = LocalizedStrings["javascript."+this] || "???"+this+"???",
+ args = arguments; /* propagate to the closure function */
return s.replace(/\{(\d)\}/g, function(m){
return args[m.charAt(1)] || "???"+m.charAt(1)+"???";
@@ -391,7 +411,6 @@
}
});
-
/*
Class: Wiki
The main javascript class to support basic jspwiki functions.
@@ -430,20 +449,25 @@
if(self.prefs) return; //already initialised
+ /* FIXME: ID on top tabs, should move server side */
+ if( $E('div.tabs') ){
+ $E('div.tabs').id="toptab";
+ $E('div.tabmenu').id="toptabmenu";
+ }
+
// read all meta elements starting with wiki
$$('meta').each( function(el){
- var n = el.getProperty('name') || '';
- if( n.indexOf('wiki') == 0 ) this[n.substr(4)] = el.getProperty('content');
+ var n = el.get('name') || '';
+ if( n.indexOf('wiki') == 0 ) this[n.substr(4)] = el.get('content');
}, self);
self.BasePath = (self.BaseUrl) ?
self.BaseUrl.slice(self.BaseUrl.indexOf(host)+host.length,-1) : '';
-
// if JSPWiki is installed in the root, then we have to make sure that
// the cookie-cutter works properly here.
if(self.BasePath == '') self.BasePath = '/';
- self.prefs = new Hash.Cookie('JSPWikiUserPrefs', {path:Wiki.BasePath, duration:20});
+ self.prefs = new Hash.Cookie('JSPWikiUserPrefs', {path:self.BasePath, duration:20});
self.allowEdit = !!$E('a.edit'); //deduct permission level
self.url = null;
@@ -461,25 +485,30 @@
self.makeMenuFx('morebutton', 'morepopup');
self.addEditLinks();
- self.renderPage( $('page'), Wiki.PageName);
+ self.renderPage( $('page'), self.PageName);
self.renderPage( $('favorites'), "Favorites");
- //self.addCollapsableFavs();
- self.splitbar();
+ self.splitbar(); //add splitbar between favorites and page content
//jump back to the section previously being edited
if( document.referrer.test( /\§ion=(\d+)$/ ) ){
var section = RegExp.$1.toInt(),
- els = this.getSections();
+ els = self.getSections();
if( els && els[section] ){
var el = els[section];
window.scrollTo( el.getLeft(), el.getTop() );
}
}
+ //fixme: new SearchBox($('xxx'));
SearchBox.initialize();
+
+ //fixme;
+ // HighlightWord( $('pagecontent'), self.prefs.get('PrevQuery') )
+ // self.prefs.set('PrevQuery','');
HighlightWord.initialize();
self.setFocus();
+
},
/*
@@ -507,7 +536,7 @@
//return alert(msg); //standard js
this.dialog
- .setBody( new Element('p').setHTML(msg) )
+ .setBody( new Element('p').set('html',msg) )
.setButtons({ Ok:Class.empty })
.show();
},
@@ -526,7 +555,7 @@
//return callback( confirm(msg) ); //standard js
this.dialog
- .setBody( new Element('p').setHTML(msg) )
+ .setBody( new Element('p').set('html',msg) )
.setButtons({
Ok:function(){ callback(true); },
Cancel:function(){ callback(false); }
@@ -554,7 +583,7 @@
var input;
this.dialog.setBody([
- new Element('p').setHTML(msg),
+ new Element('p').set('html',msg),
new Element('form').adopt(
input = new Element('input',{
name:'prompt',
@@ -565,7 +594,7 @@
)
])
.setButtons({
- Ok:function(){ callback( input.getValue() ) },
+ Ok:function(){ callback( input.get('value') ) },
Cancel:Class.empty
})
.show();
@@ -656,12 +685,13 @@
menu = $(menu);
if(!btn || !menu) return;
- var popfx = menu.effect('opacity', {wait:false}).set(0);
+ //var popfx = menu.effect('opacity', {wait:false}).set(0);
+ menu.fade('hide');
btn.adopt(menu).set({
href:'#',
events:{
- 'mouseout': function(){ popfx.start(0) },
- 'mouseover': function(){ Wiki.locatemenu(btn,menu); popfx.start(0.9) }
+ 'mouseout': function(){ menu.fade(0) /*popfx.start(0)*/ },
+ 'mouseover': function(){ Wiki.locatemenu(btn,menu); menu.fade(0.9) /*popfx.start(0.9)*/ }
}
});
},
@@ -772,7 +802,7 @@
self,
["progressTracker.getProgress",[progress],function(result){
result = result.stripScripts(); //xss vulnerability
- if(!result.code) bar.getFirst().setStyle('width',result+'%').setHTML(result+'%');
+ if(!result.code) bar.getFirst().setStyle('width',result+'%').set('html',result+'%');
}]
);
return self.submitOnce(form);
@@ -867,7 +897,7 @@
'position':'relative',
'padding': tabs.getStyle('padding') // take over padding from original .tabs
}
- }).wraps(tabs.setStyle('padding','0'));
+ }).wrapContent(tabs.setStyle('padding','0'));
var pointer = new Element('div', {'id':'collapseFavsPointer'}).hide().inject(body),
movePointer = function(e){
@@ -897,7 +927,7 @@
addEditLinks: function(){
-//fixme: SectionEditing is not properly save when updating userprefs !
+//fixme: SectionEditing is not properly saved when updating userprefs !
//alert(this.prefs.keys()+"\n"+this.prefs.values());
if( $("previewcontent") || !this.allowEdit || this.prefs.get('SectionEditing') != 'on') return;
@@ -905,7 +935,7 @@
var url = this.EditUrl;
url = url + (url.contains('?') ? '&' : '?') + 'section=';
- var aa = new Element('a',{'class':'editsection'}).setHTML('quick.edit'.localize()),
+ var aa = new Element('a',{'class':'editsection'}).set('html','quick.edit'.localize()),
i = 0;
this.getSections().each( function(el){
@@ -942,14 +972,15 @@
//FIXME: under contstruction
var params = options.action+'=&'+options.params.toQueryString();
- new Ajax( url, {
- postBody: params,
+ new Request.HTML({
+ url:url,
+ data: params,
method: 'post',
update: options.update,
onComplete: function( result ){
options.onComplete( result );
}
- }).request();
+ }).send();
},
@@ -988,23 +1019,23 @@
if(this.JsonUrl){
- new Ajax(this.JsonUrl, {
- postBody: Json.toString({
+ new Request({
+ url: this.JsonUrl,
+ data: JSON.encode({
'id':this.$jsonid++,
'method':method,
'params':params
}),
method: 'post',
onComplete: function(result){
- var r = Json.evaluate(result,true);
+ var r = JSON.decode(result,true);
fn(r.result || r.error || null);
/*if( r ){
if(r.result){ fn(r.result) }
else if(r.error){ fn(r.error) }
}*/
}
- }).request();
-
+ }).send();
}
}
@@ -1025,16 +1056,17 @@
*/
Wiki.registerPlugin( function(page,name){
var i = 0,
- lnk = new Element('a',{'class':'slimbox'}).setHTML('»');
+ lnk = new Element('a',{'class':'slimbox'}).set('html','»');
- $ES('*[class^=slimbox]',page).each(function(slim){
+
+ page.getElements('*[class^=slimbox]').each(function(slim){
var group = 'lightbox'+ i++,
parm = slim.className.split('-')[1] || 'img ajax',
filter = [];
if(parm.test('img')) filter.extend(['img.inline', 'a.attachment']);
if(parm.test('ajax')) filter.extend(['a.wikipage', 'a.external']);
- $ES(filter.join(','),slim).each(function(el){
+ slim.getElements(filter.join(',')).each(function(el){
var href = el.src||el.href,
rel = (el.className.test('inline|attachment')) ? 'img' : 'ajax';
@@ -1043,290 +1075,35 @@
lnk.clone().setProperties({
'href':href,
'rel':group+' '+rel,
- 'title':el.alt||el.getText()
+ 'title':el.alt||el.get('text')
}).injectAfter(el);//.injectBefore(el);
- if(el.src) el.replaceWith(new Element('a',{
- 'class':'attachment',
- 'href':el.src
- }).setHTML(el.alt||el.getText()));
- });
- });
- if(i) Lightbox.init();
- //new Asset.javascript(Wiki.TemplateUrl+'scripts/slimbox.js');
-})
-
-
-/*
-Class: Slimbox
- Slimbox v1.31 - The ultimate lightweight Lightbox clone
- by Christophe Beyls (http://www.digitalia.be) - MIT-style license.
- Inspired by the original Lightbox v2 by Lokesh Dhakar.
-
- Updated by Dirk Frederickx to fit JSPWiki needs
- - minimum size of image canvas
- - add maximum size of image w.r.t window size
- - CLOSE icon -> close x text iso icon
- - {{prev, next}} links added in visible part of screen
- - add size of picture to info window
- - spacebar, down arrow, enter : next image
- - up arrow : prev image
- - allow the same picture occuring several times
- - add support for external page links => slimbox_ex
-*/
-var Lightbox = {
+ //if(el.src) el.replaces(new Element('a',{
+ // 'class':'attachment',
+ // 'href':el.src
+ //}).set('html',el.alt||el.get('text')));
- init: function(options){
- this.options = $extend({
- resizeDuration: 400,
- resizeTransition: false, /*Fx.Transitions.sineInOut,*/
- initialWidth: 250,
- initialHeight: 250,
- animateCaption: true,
- errorMessage: "slimbox.error".localize()
- }, options || {});
-
- this.anchors=[];
- $each(document.links, function(el){
- if (el.rel && el.rel.test(/^lightbox/i)){
- el.onclick = this.click.pass(el, this);
- this.anchors.push(el);
- }
- }, this);
- this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
- this.eventPosition = this.position.bind(this);
-
- /* Build float panel
- <div id="lbOverlay"></div>
- <div id="lbCenter">
- <div id="lbImage">
- <!-- img or iframe element is inserted here -->
- </div>
- </div>
- <div id="lbBottomContainer">
- <div id="lbBottom">
- <div id="lbCaption">
- <div id="lbNumber">
- <a id="lbCloseLink"></a>
- <div style="clear:both;"></div>
- </div>
- </div>
- */
- this.overlay = new Element('div', {'id': 'lbOverlay'}).inject(document.body);
-
- this.center = new Element('div', {'id': 'lbCenter', 'styles': {'width': this.options.initialWidth, 'height': this.options.initialHeight, 'marginLeft': -(this.options.initialWidth/2), 'display': 'none'}}).inject(document.body);
- new Element('a', {'id': 'lbCloseLink', 'href':'#', 'title':'slimbox.close.title'.localize()}).inject(this.center).onclick = this.overlay.onclick = this.close.bind(this);
- this.image = new Element('div', {'id': 'lbImage'}).inject(this.center);
-
- this.bottomContainer = new Element('div', {'id': 'lbBottomContainer', 'styles': {'display': 'none'}}).inject(document.body);
- this.bottom = new Element('div', {'id': 'lbBottom'}).inject(this.bottomContainer);
- //new Element('a', {'id': 'lbCloseLink', 'href': '#', 'title':'slimbox.close.title'.localize()}).setHTML('slimbox.close'.localize()).inject(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
- this.caption = new Element('div', {'id': 'lbCaption'}).inject(this.bottom);
-
- var info = new Element('div').inject(this.bottom);
- this.prevLink = new Element('a', {'id': 'lbPrevLink', 'href': '#', 'styles': {'display': 'none'}}).setHTML("slimbox.previous".localize()).inject(info);
- this.number = new Element('span', {'id': 'lbNumber'}).inject(info);
- this.nextLink = this.prevLink.clone().setProperties({'id': 'lbNextLink' }).setHTML("slimbox.next".localize()).inject(info);
- this.prevLink.onclick = this.previous.bind(this);
- this.nextLink.onclick = this.next.bind(this);
-
- this.error = new Element('div').setProperty('id', 'lbError').setHTML(this.options.errorMessage);
- new Element('div', {'styles': {'clear': 'both'}}).inject(this.bottom);
-
- var nextEffect = this.nextEffect.bind(this);
- this.fx = {
- overlay: this.overlay.effect('opacity', {duration: 500}).hide(),
- resize: this.center.effects($extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {})),
- image: this.image.effect('opacity', {duration: 500, onComplete: nextEffect}),
- bottom: this.bottom.effect('margin-top', {duration: 400, onComplete: nextEffect})
- };
-
- this.fxs = new Fx.Elements([this.center, this.image], $extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {}));
-
- this.preloadPrev = new Image();
- this.preloadNext = new Image();
- },
-
- click: function(link){
- var rel = link.rel.split(' ');
- if (rel[0].length == 8) return this.open([[url, title, rel[1]]], 0);
-
- var imageNum=0, images = [];
- this.anchors.each(function(el){
- var elRel = el.rel.split(' ');
- if (elRel[0]!=rel[0]) return;
- if((el.href==link.href) && (el.title==link.title)) imageNum = images.length;
- images.push([el.href, el.title, elRel[1]]);
- });
- return this.open(images, imageNum);
- },
-
- open: function(images, imageNum){
- this.images = images;
- this.position();
- this.setup(true);
- this.top = window.getScrollTop() + (window.getHeight() / 15);
- this.center.setStyles({top: this.top, display: ''});
- this.fx.overlay.start(0.7);
- return this.changeImage(imageNum);
- },
-
- position: function(){
- this.overlay.setStyles({top: window.getScrollTop(), height: window.getHeight()});
- },
+ if(el.src) new Element('a',{
+ 'class':'attachment',
+ href:el.src,
+ html:el.alt||el.get('text')
+ }).replaces(el);
- setup: function(open){
- var elements = $A(document.getElementsByTagName('object'));
- elements.extend(document.getElementsByTagName(window.ie ? 'select' : 'embed'));
- elements.each(function(el){
- if (open) el.lbBackupStyle = el.style.visibility;
- el.style.visibility = open ? 'hidden' : el.lbBackupStyle;
});
- var fn = open ? 'addEvent' : 'removeEvent';
- window[fn]('scroll', this.eventPosition)[fn]('resize', this.eventPosition);
- document[fn]('keydown', this.eventKeyDown);
- this.step = 0;
- },
-
- keyboardListener: function(event){
- switch (event.keyCode){
- case 27: case 88: case 67: this.close(); break;
- case 37: case 38: case 80: this.previous(); break;
- case 13: case 32: case 39: case 40: case 78: this.next(); break;
- default: return;
- }
- new Event(event).stop();
- },
-
- previous: function(){
- return this.changeImage(this.activeImage-1);
- },
-
- next: function(){
- return this.changeImage(this.activeImage+1);
- },
-
- changeImage: function(imageNum){
- if (this.step || (imageNum < 0) || (imageNum >= this.images.length)) return false;
- this.step = 1;
- this.activeImage = imageNum;
-
- this.center.style.backgroundColor = '';
- this.bottomContainer.style.display = this.prevLink.style.display = this.nextLink.style.display = 'none';
- this.fx.image.hide();
- this.center.className = 'lbLoading';
-
- this.preload = new Image();
- this.image.empty().setStyle('overflow','hidden');
- if( this.images[imageNum][2] == 'img' ){
- this.preload.onload = this.nextEffect.bind(this);
- this.preload.src = this.images[imageNum][0];
- } else if( this.images[imageNum][2] == 'element' ){
- /**/
- this.so = this.images[imageNum][0];
- this.so.setProperties({
- width: '120px',
- height: '120px'
- });
- this.so.inject(this.image);
- this.nextEffect();
- } else {
- this.iframeId = "lbFrame_"+new Date().getTime(); // Safari would not update iframe content that has static id.
- this.so = new Element('iframe').setProperties({
- id: this.iframeId,
-// width: this.contentsWidth,
-// height: this.contentsHeight,
- frameBorder:0,
- scrolling:'auto',
- src:this.images[imageNum][0]
- }).inject(this.image);
- this.nextEffect(); //asynchronous loading?
- }
- return false;
- },
-
- ajaxFailure: function (){
- this.ajaxFailed = true;
- this.image.setHTML('').adopt(this.error.clone());
- this.nextEffect();
- },
-
- nextEffect: function(){
- switch (this.step++){
- case 1:
- this.center.className = '';
- this.caption.empty().adopt(new Element('a', {
- 'href':this.images[this.activeImage][0],
- 'title':"slimbox.directLink".localize()
- }).setHTML(this.images[this.activeImage][1] || ''));
-
- var type = (this.images[this.activeImage][2]=='img') ? "slimbox.info" : "slimbox.remoteRequest";
- this.number.setHTML((this.images.length == 1) ? '' : type.localize(this.activeImage+1, this.images.length));
- this.image.style.backgroundImage = 'none';
-
- var w = Math.max(this.options.initialWidth,this.preload.width),
- h = Math.max(this.options.initialHeight,this.preload.height),
- ww = Window.getWidth()-10,
- wh = Window.getHeight()-120;
- //if(this.images[this.activeImage][2]!='img' &&!this.ajaxFailed){ w = 6000; h = 3000; }
- if(w > ww) { h = Math.round(h * ww/w); w = ww; }
- if(h > wh) { w = Math.round(w * wh/h); h = wh; }
-
- this.image.style.width = this.bottom.style.width = w+'px';
- this.image.style.height = /*this.prevLink.style.height = this.nextLink.style.height = */ h+'px';
-
- if( this.images[this.activeImage][2]=='img') {
- this.image.style.backgroundImage = 'url('+this.images[this.activeImage][0]+')';
-
- if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
- if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
-
- this.number.setHTML(this.number.innerHTML+' ['+this.preload.width+'×'+this.preload.height+']');
- } else {
- this.so.style.width=w+'px';
- this.so.style.height=h+'px';
- }
+ });
- if (this.options.animateCaption) this.bottomContainer.setStyles({height: '0px', display: ''});
+return; //FIXME
+ //if(i) Lightbox.init();
+ /* TODO: new slimbox invocation code, based on Slimbox v1.7 */
+ $$(document.links).filter(function(el) {
+ return el.rel && el.rel.test(/^lightbox/i);
+ }).slimbox({/* Put custom options here */}, null, function(el) {
+ return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
+ });
- this.fxs.start({
- '0': { height: [this.image.offsetHeight], width: [this.image.offsetWidth], marginLeft: [-this.image.offsetWidth/2] },
- '1': { opacity: [1] }
- });
- break;
- case 2:
- //this.center.style.backgroundColor = '#000';
- this.image.setStyle('overflow','auto');
- this.bottomContainer.setStyles({ top: (this.top + this.center.clientHeight)+'px', marginLeft: this.center.style.marginLeft });
- if (this.options.animateCaption){
- this.fx.bottom.set(-this.bottom.offsetHeight);
- this.bottomContainer.style.height = '';
- this.fx.bottom.start(0);
- break;
- }
- this.bottomContainer.style.height = '';
- case 3:
- if (this.activeImage) this.prevLink.style.display = '';
- if (this.activeImage != (this.images.length - 1)) this.nextLink.style.display = '';
- this.step = 0;
- }
- },
+})
- close: function(){
- if (this.step < 0) return;
- this.step = -1;
- if (this.preload){
- this.preload.onload = Class.empty;
- this.preload = null;
- }
- for (var f in this.fx) this.fx[f].stop();
- this.center.style.display = this.bottomContainer.style.display = 'none';
- this.fx.overlay.chain(this.setup.pass(false, this)).start(0);
- this.image.empty();
- return false;
- }
-};
/*
@@ -1365,12 +1142,12 @@
render: function(page, name){
// add click handlers to existing tabmenu's, generated by <wiki:tabbedSection>
- $ES('.tabmenu a',page).each(function(el){
+ page.getElements('.tabmenu a').each(function(el){
if(!el.href) el.addEvent('click', this.click);
},this);
// convert tabbedSections into tabmenu's with click handlers
- $ES('.tabbedSection',page).each( function(tt){
+ page.getElements('.tabbedSection').each( function(tt){
if(tt.hasClass('tabs')) return;
tt.addClass('tabs'); //css styling on tabs
@@ -1543,14 +1320,17 @@
this.query = q;
q.observe(this.ajaxQuickSearch.bind(this) );
- this.hover = $('searchboxMenu').setProperty('visibility','visible')
- .effect('opacity', {wait:false}).set(0);
+ //this.hover = $('searchboxMenu').setProperty('visibility','visible')
+ //.effect('opacity', {wait:false}).set(0);
+ var menu = $('searchboxMenu').set('visibility','visible').fade('hide');
$(q.form).addEvent('submit',this.submit.bind(this))
//FIXME .addEvent('blur',function(){ this.hasfocus=false; this.hover.start(0) }.bind(this))
//FIXME .addEvent('focus',function(){ this.hasfocus=true; this.hover.start(0.9) }.bind(this))
- .addEvent('mouseout',function(){ this.hover.start(0) }.bind(this))
- .addEvent('mouseover',function(){ Wiki.locatemenu(this.query, $('searchboxMenu') ); this.hover.start(0.9) }.bind(this));
+ .addEvent('mouseout',function(){ menu.fade(0) /*this.hover.start(0)*/ }.bind(this))
+ .addEvent('mouseover',function(){
+ Wiki.locatemenu(this.query, $('searchboxMenu') );
+ menu.fade(0.9) /*this.hover.start(0.9)*/ }.bind(this));
/* use advanced search-input on safari - experimental */
//if(window.webkit){
@@ -1567,18 +1347,19 @@
new Element('a',{
'href':'#',
'events': {'click':function(){ q.value = el; q.form.submit(); }}
- }).setHTML(el).inject( new Element('li').inject(ul) );
+ }).set('html',el).inject( new Element('li').inject(ul) );
});
//}
},
onPageLoadFullSearch : function(){
+
var q2 = $("query2"); if( !q2 ) return;
this.query2 = q2;
var changescope = function(){
var qq = this.query2.value.replace(/^(?:author:|name:|contents:|attachment:)/,'');
- this.query2.value = $('scope').getValue() + qq;
+ this.query2.value = $('scope').get('value') + qq;
this.runfullsearch();
}.bind(this);
@@ -1605,6 +1386,7 @@
},
runfullsearch: function(e){
+
var q2 = this.query2.value;
if( !q2 || (q2.trim()=='')) {
$('searchResult2').empty();
@@ -1626,8 +1408,11 @@
onComplete: function() {
$('spin').hide();
//FIXME: stripes generates a whole web-page iso of page fragment with searchresults.
- var x = $E('#searchResult2',$('searchResult2'));
- $('searchResult2').replaceWith( x );
+ //var x = $E('#searchResult2',$('searchResult2'));
+ var res = $('searchResult2');
+ console.log(res.innerHTML);
+ res.replaces( res );
+ //res.replaces( res.getElement('#searchResult2') );
GraphBar.render($('searchResult2'));
Wiki.prefs.set('PrevQuery', q2);
}
@@ -1659,7 +1444,7 @@
$('searchOutput').empty();
return;
}
- $('searchTarget').setHTML('('+qv+') :');
+ $('searchTarget').set('html','('+qv+') :');
$('searchSpin').show();
Wiki.jsonrpc('search.findPages', [qv,20], function(result){
@@ -1669,8 +1454,8 @@
result.list.each(function(el){
new Element('li').adopt(
- new Element('a',{'href':Wiki.toUrl(el.map.page) }).setHTML(el.map.page),
- new Element('span',{'class':'small'}).setHTML(" ("+el.map.score+")")
+ new Element('a',{'href':Wiki.toUrl(el.map.page) }).set('html',el.map.page),
+ new Element('span',{'class':'small'}).set('html'," ("+el.map.score+")")
).inject(frag);
});
$('searchOutput').empty().adopt(frag);
@@ -1740,9 +1525,9 @@
Credit:
  mootools 1.11
*/
-var Color = new Class({
+var Color = (function(){
- colors: {
+var htmlColors = {
aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
@@ -1786,20 +1571,34 @@
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]
- },
+};
+return new Class({
initialize: function(color, type){
-
- if(!color) return false;
- type = type || (color.push ? 'rgb' : 'hex');
- var rgb = (type=='rgb') ? color : this.colors[color.trim().toLowerCase()] || color.toString().hexToRgb(true);
- if(!rgb) return false;
- rgb.hex = rgb.rgbToHex();
- return $extend(rgb, Color.prototype);
-
+ if (arguments.length >= 3){
+ type = 'rgb'; color = Array.slice(arguments, 0, 3);
+ } else if (typeof color == 'string'){
+ if (color.match(/rgb/)) color = color.rgbToHex().hexToRgb(true);
+ //else if (color.match(/hsb/)) color = color.hsbToRgb();
+ else color = htmlColors[color.trim().toLowerCase()] || color.hexToRgb(true);
+ }
+ type = type || 'rgb';
+ /*
+ switch (type){
+ case 'hsb':
+ var old = color;
+ color = color.hsbToRgb();
+ color.hsb = old;
+ break;
+ case 'hex': color = color.hexToRgb(true); break;
+ }
+ */
+ color.rgb = color.slice(0, 3);
+ //color.hsb = color.hsb || color.rgbToHsb();
+ color.hex = color.rgbToHex();
+ return $extend(color, this);
},
-
/*
Method: mix
Mixes two or more colors with the Color.
@@ -1824,7 +1623,7 @@
*/
mix: function(){
var colors = $A(arguments),
- rgb = this.copy(),
+ rgb = $A(this),
alpha = (($type(colors.getLast()) == 'number') ? colors.pop() : 50)/100,
alphaI = 1-alpha;
@@ -1858,110 +1657,210 @@
}
});
+})()
+
/*
Class: GraphBar
- Object: also used on the findpage
- ** %%graphBars ... %%
- ** convert numbers inside %%gBar ... %% tags to graphic horizontal bars
- ** no img needed.
-
- ** supported parameters: bar-color and bar-maxsize
+ Generate horizontal or vertical bars, without using any images.
+ Support any color, gradient bars, progress and gauge bars.
+ The length of the bars can be based on numbers or dates.
+ Allow to specify maximum and minimum values.
+
+> %%graphBars
+> %%gBar 25 /%
+> /%
+
+ Graphbar parameters can be passed in class constructor (options)
+ or as call-name parameters.
+
+> %%graphBars-min50-max3000-progress-lime-0f0f0f
+> %%gBar 25 /%
+> /%
-Examples:
+ Other example of wiki-markup
> %%graphBars-e0e0e0 ... %% use color #e0e0e0, default size 120
> %%graphBars-blue-red ... %% blend colors from blue to red
> %%graphBars-red-40 ... %% use color red, maxsize 40 chars
> %%graphBars-vertical ... %% vertical bars
> %%graphBars-progress ... %% progress bars in 2 colors
> %%graphBars-gauge ... %% gauge bars in gradient colors
+
+Options:
+ classPrefix - CSS classname of parent element (default = graphBars)
+ classBar - CSS classname of the bar value elements (default = gBar)
+ lowerbound - lowerbound of bar values (default:20px)
+ upperbound - upperbound of bar values (default:320px)
+ vwidth - vertical bar width in px(default:20px)
+ isHorizontal - horizontal or vertical bars (default:true)
+ isProgress - progress bar show 2 bars, always summing up to 100%
+ isGauge - gauge bars have colour gradient related to the size/value of the bar
+
+
+DOM-structure:
+ Original DOM-structure
+> <span class="gBar">100 </span>
+
+ Is converted to following horizontal bar
+> <span class="graphBar" style="border-left-width: 20px;">x</span>
+> <span class="gBar">100 </span>
+
+ or is converted to following vertical bar
+> <div style="height: 77px; position: relative;">
+> <span class="graphBar"
+> style="border-color: rgb(255, 0, 0);
+> border-bottom-width: 20px;
+> position: absolute;
+> width: 20px;
+> bottom: 0px;"/>
+> <span style="position: relative; top: 40px;"> 20 </span>
+> </div>
+
+ or is converted to following progress bar
+> <span class="graphBar" style="border-color: rgb(0, 128, 0); border-left-width: 20px;">x</span>
+> <span class="graphBar" style="border-color: rgb(0, 255, 0); border-left-width: 300px; margin-left: -1ex;">x</span>
+> <span class="gBar">100 </span>
+
+
+Examples:
+> new GraphBar( dom-element, { options });
+
*/
+Wiki.registerPlugin( function(page,name){
-var GraphBar =
-{
- render: function(page, name){
- $ES('*[class^=graphBars]',page).each( function(g){
- var lbound = 20, //max - lowerbound size of bar
- ubound = 320, //min - upperbound size of bar
- vwidth = 20, //vertical bar width
- color1 = null, // bar color
- color2 = null, // 2nd bar color used depending on bar-type
- isGauge = false, // gauge bar
- isProgress = false, // progress bar
- isHorizontal = true,// horizontal or vertical orientation
- parms = g.className.substr(9).split('-'),
- barName = parms.shift(); //first param is optional barName
-
- parms.each(function(p){
- p = p.toLowerCase();
- if(p == "vertical") { isHorizontal = false; }
- else if(p == "progress") { isProgress = true; }
- else if(p == "gauge") { isGauge = true; }
- else if(p.indexOf("min") == 0) { lbound = p.substr(3).toInt(); }
- else if(p.indexOf("max") == 0) { ubound = p.substr(3).toInt(); }
- else if(p != "") {
- p = new Color(p,'hex'); if(!p.hex) return;
- if(!color1) color1 = p;
- else if(!color2) color2 = p;
- }
- });
- if( !color2 && color1) color2 = (isGauge || isProgress) ? color1.invert() : color1;
+ page.getElements('div[class^=graphBars]').each( function(el){
+ new GraphBar(el);
+ });
- if( lbound > ubound ) { var m = ubound; ubound=lbound; ubound=m; }
- var size = ubound-lbound;
+});
- var bars = $ES('.gBar'+barName, g); //collect all gBar elements
- if( (bars.length==0) && barName && (barName!="")){ // check table data
- bars = this.getTableValues(g, barName);
- }
- if( !bars ) return;
+var GraphBar = new Class({
+
+ Implements: Options,
+
+ options: {
+ classPrefix:"graphBars",
+ classBar:"gBar",
+ lowerbound:20,
+ upperbound:320,
+ vwidth:20, //vertical bar width
+ isHorizontal:true,
+ isProgress:false,
+ isGauge:false
+ },
+
+ initialize: function(el, options){
+
+ this.setOptions(options);
+ this.parseParameters( el );
+
+ var self = this,
+ options = self.options,
+ bars = el.getElements('.'+ options.classBar + options.barName), //collect all gBar elements
+ color1 = self.color1,
+ color2 = self.color2,
+ border = (options.isHorizontal ? 'borderLeft' : 'borderBottom'),
+ isProgress = options.isProgress,
+ isGauge = options.isGauge,
- var barData = this.parseBarData( bars, lbound, size ),
- border = (isHorizontal ? 'borderLeft' : 'borderBottom');
+ tmp = options.upperbound,
+ ubound = Math.max(tmp, options.lowerbound),
+ lbound = (tmp == ubound) ? options.lowerbound : tmp;
- bars.each(function(b,j){
- var bar1 = $H().set(border+'Width',barData[j]),
- bar2 = $H(), // 2nd bar only valid ico 'progress'
+ if( !color2 && color1)
+ color2 = (isGauge || isProgress) ? color1.invert() : color1;
+
+ if( bars.length == 0 ) bars = self.getTableValues(el, options.barName);
+
+ if( bars ){
+
+ var barData = self.parseBarData( bars, lbound, ubound-lbound );
+
+ bars.each( function(el, index){
+
+ var bar = {},
+ progressbar = {},
+ value = barData[index],
barEL = new Element('span',{'class':'graphBar'}),
- pb = b.getParent(); // parent of gBar element
+ pb = el.getParent(); // parent of gBar element
+
+ bar[ border+'Width' ] = value;
+
+ if( options.isHorizontal ){
- if(isHorizontal){
- barEL.setHTML('x');
- if(isProgress){
- bar2.extend(bar1.obj);
- bar1.set(border+'Width',ubound-barData[j]).set('marginLeft','-1ex');
+ barEL.set('html','x');
+
+ if( isProgress ){
+ $extend( progressbar, bar );
+ bar[border+'Width'] = ubound - value;
+ bar.marginLeft='-1ex';
}
+
} else { // isVertical
- if(pb.getTag()=='td') { pb = new Element('div').wraps(pb); }
- pb.setStyles({'height':ubound+b.getStyle('lineHeight').toInt(), 'position':'relative'});
- b.setStyle('position', 'relative'); //needed for inserted spans ;-)) hehe
- if( !isProgress ) { b.setStyle('top', (ubound-barData[j])); }
-
- bar1.extend({'position':'absolute', 'width':vwidth, 'bottom':'0'});
- if(isProgress){
- bar2.extend(bar1.obj).set(border+'Width', ubound);
- }
+ if( pb.get('tag')=='td' ) pb = new Element('div').wrapContent(pb);
+
+ pb.setStyles({
+ height: ubound + el.getStyle('lineHeight').toInt(),
+ position: 'relative'
+ });
+ el.setStyle('position', 'relative'); //needed for inserted spans ;-)) hehe
+ if( !isProgress ) el.setStyle('top', ubound - value );
+
+ $extend( bar, {position:'absolute', width:options.vwidth, bottom:0} );
+
+ if( isProgress ) $extend(progressbar,bar)[border+'Width'] = ubound;
+
}
- if(isProgress){
- if(color1){ bar1.set('borderColor', color1.hex); }
- if(color2){
- bar2.set('borderColor', color2.hex);
- } else {
- bar1.set('borderColor', 'transparent');
- }
- } else if(color1){
- var percent = isGauge ? (barData[j]-lbound)/size : j/(bars.length-1);
- bar1.set('borderColor', color1.mix(color2, 100 * percent).hex);
+
+ if( isProgress ){
+
+ if( color1 ) bar.borderColor = color1.hex;
+
+ if( color2 ){ progressbar.borderColor = color2.hex }
+ else { bar.borderColor = 'transparent' }
+
+ } else if( color1 ){
+
+ var percent = isGauge ? (value-lbound)/(ubound-lbound) : index/(bars.length-1);
+ bar.borderColor = color1.mix(color2, 100 * percent).hex;
+
}
- if(bar2.length > 0){ barEL.clone().setStyles(bar2.obj).injectBefore(b); };
- if(bar1.length > 0){ barEL.setStyles(bar1.obj).injectBefore(b); };
+ if( isProgress ) barEL.clone().setStyles(progressbar).injectBefore(el);
+ barEL.setStyles(bar).injectBefore(el);
- },this);
- },this);
+ });
+ }
+
},
+ parseParameters: function( el ){
+
+ var self = this,
+ options = self.options,
+ parms = el.className.slice( options.classPrefix.length ).split('-');
+
+ options.barName = parms.shift(), //first param is optional barName
+
+ parms.each( function( p ){
+ p = p.toLowerCase();
+ if(p == "vertical") { options.isHorizontal = false; }
+ else if(p == "progress") { options.isProgress = true; }
+ else if(p == "gauge") { options.isGauge = true; }
+ else if(p.indexOf("min") == 0) { options.lowerbound = p.slice(3).toInt(); }
+ else if(p.indexOf("max") == 0) { options.upperbound = p.slice(3).toInt(); }
+
+ else if(p != "") {
+ p = new Color(p,'hex'); if(!p.hex) return;
+ if( !self.color1 ) self.color1 = p;
+ else if( !self.color2 ) self.color2 = p;
+ }
+ });
+
+ },
+
+
/*
Function: parseBarData
Parse bar data types and scale according to lbound and size
@@ -1973,12 +1872,13 @@
num=true,
ddd=num;
- nodes.each(function(n,i){
- var v = n.getText();
+ nodes.each(function( n ){
+ var v = n.get('text');
barData.push(v);
num &= !isNaN(v.toFloat());
ddd &= !isNaN(Date.parse(v));
});
+
barData = barData.map(function(b){
if( ddd ){ b = new Date(Date.parse(b) ).valueOf(); }
else if( num ){ b = b.match(/([+-]?\d+(:?\.\d+)?(:?e[-+]?\d+)?)/)[0].toFloat(); }
@@ -1990,9 +1890,11 @@
if(maxValue==minValue) maxValue=minValue+1; /* avoid div by 0 */
size = size/(maxValue-minValue);
+
return barData.map(function(b){
return ( (size*(b-minValue)) + lbound).toInt();
});
+
},
/*
@@ -2003,16 +1905,18 @@
* insert SPANs as place-holder of the missing gBars
*/
getTableValues: function(node, fieldName){
- var table = $E('table', node); if(!table) return false;
- var tlen = table.rows.length, h, r, result, i;
+
+ var table = node.getElement('table');
+ if(!table) return false;
+ var tlen = table.rows.length, h, l, r, result, i;
if( tlen > 1 ){ /* check for COLUMN based table */
r = table.rows[0];
- for( h=0; h < r.cells.length; h++ ){
+ for( h=0, l=r.cells.length; h<l; h++ ){
if( $getText( r.cells[h] ).trim() == fieldName ){
result = [];
for( i=1; i< tlen; i++)
- result.push( new Element('span').wraps(table.rows[i].cells[h]) );
+ result.push( new Element('span').wrapContent(table.rows[i].cells[h]) );
return result;
}
}
@@ -2021,16 +1925,14 @@
r = table.rows[h];
if( $getText( r.cells[0] ).trim() == fieldName ){
result = [];
- for( i=1; i< r.cells.length; i++)
- result.push( new Element('span').wraps(r.cells[i]) );
+ for( i=1,l=r.cells.length; i<l ; i++)
+ result.push( new Element('span').wrapContent(r.cells[i]) );
return result;
}
}
return false;
}
-}
-Wiki.registerPlugin(GraphBar);
-//FIXME:convert to class
+});
/*
@@ -2049,24 +1951,26 @@
//var cookie = ""; //activate this line if you want to deactivatie cookie handling
if(!this.bullet) {
- this.bullet = new Element('div',{'class':'collapseBullet'}).setHTML('•');
+ this.bullet = new Element('div',{'class':'collapseBullet'}).set('html','•');
}
this.pims.push({
'name':cookie,
'value':'',
- 'initial': (cookie ? Cookie.get(cookie) : "")
+ 'initial': (cookie ? Cookie.read(cookie) : "")
});
- $ES('.collapse', page).each(function(el){
- if(!$E('.collapseBullet',el)) this.collapseNode(el); // no nesting
+ page.getElements('.collapse').each(function(el){
+ //CHECK: if(!$-E('.collapseBullet',el)) this.collapseNode(el); // no nesting
+ if(!el.getElement('.collapseBullet')) this.collapseNode(el); // no nesting
}, this);
- $ES('.collapsebox,.collapsebox-closed', page).each(function(el){
+ page.getElements('.collapsebox,.collapsebox-closed').each(function(el){
this.collapseBox(el);
}, this);
},
collapseBox: function(el){
- if($E('.collapsetitle',el)) return; //been here before
+ //CHECK: if($-E('.collapsetitle',el)) return; //been here before
+ if(el.getElement('.collapsetitle')) return; //been here before
var title = el.getFirst(); if( !title ) return;
var body = new Element('div', {'class':'collapsebody'}),
@@ -2088,8 +1992,10 @@
DOM tree as the first child of the listitem contained by the sublist.
*/
collapseNode: function(node){
- $ES('li',node).each(function(li){
- var ulol = $E('ul',li) || $E('ol',li);
+ node.getElements('li').each(function(li){
+ //CHECK: var ulol = $-E('ul',li) || $-E('ol',li);
+ //var ulol = li.getElement('ul') || li.getElement('ol');
+ var ulol = li.getElement('ul,ol');
//dont insert bullet when LI is 'empty': no text or no non-ul/ol tags
var emptyLI = true;
@@ -2101,9 +2007,9 @@
}
if( emptyLI ) return;
- new Element('div',{'class':'collapsebody'}).wraps(li);
+ new Element('div',{'class':'collapsebody'}).wrapContent(li);
var bullet = this.bullet.clone().injectTop(li);
- if(ulol) this.newBullet(bullet, ulol, (ulol.getTag()=='ul'));
+ if(ulol) this.newBullet(bullet, ulol, (ulol.get('tag')=='ul'));
},this);
},
@@ -2112,39 +2018,50 @@
isopen = this.parseCookie(isopen);
if(!clicktarget) clicktarget = bullet;
+ /*
var bodyfx = body.setStyle('overflow','hidden')
.effect('height', {
wait:false,
onStart:this.renderBullet.bind(bullet),
onComplete:function(){ if(bullet.hasClass('collapseOpen')) body.setStyle('height','auto'); }
});
+ */
+ body.setStyle('overflow','hidden');
+ var bodyfx = new Fx.Tween( body, {
+ //wait:false,
+ onStart:this.renderBullet.bind(bullet),
+ onComplete:function(){
+ if(bullet.hasClass('collapseOpen')) body.setStyle('height','auto');
+ }
+ });
bullet.className = (isopen ? 'collapseClose' : 'collapseOpen'); //ready for rendering
clicktarget.addEvent('click', this.clickBullet.bindWithEvent(bullet, [ck, ck.value.length-1, bodyfx]))
.addHover();
bodyfx.fireEvent('onStart');
- if(!isopen) bodyfx.set(0);
+ if(!isopen) bodyfx.set('height',0);
},
renderBullet: function(){
if(this.hasClass('collapseClose')){
- this.setProperties({'title':'collapse'.localize(), 'class':'collapseOpen'}).setHTML('-'); /* » */
+ this.setProperties({'title':'collapse'.localize(), 'class':'collapseOpen'}).set('html','-'); /* » */
} else {
- this.setProperties({'title':'expand'.localize(), 'class':'collapseClose'}).setHTML('+'); /* « */
+ this.setProperties({'title':'expand'.localize(), 'class':'collapseClose'}).set('html','+'); /* « */
}
},
clickBullet: function(event, ck, bulletidx, bodyfx){
var collapse = this.hasClass('collapseOpen'),
- bodyHeight = bodyfx.element.scrollHeight;
+ bodyHeight = bodyfx.element.scrollHeight; //CHECKME: does this work -- refactor
+ //FIXME: better use the morph style ???
if(event.target==this){ /* don't handle clicks on nested elements */
- if(collapse) bodyfx.start(bodyHeight, 0); else bodyfx.start(bodyHeight);
+ if(collapse) bodyfx.start('height', bodyHeight, 0); else bodyfx.start('height',bodyHeight);
ck.value = ck.value.slice(0,bulletidx) + (collapse ? 'c' : 'o') + ck.value.slice(bulletidx+1);
- if(ck.name) Cookie.set(ck.name, ck.value, {path:Wiki.BasePath, duration:20});
+ if(ck.name) Cookie.write(ck.name, ck.value, {path:Wiki.BasePath, duration:20});
}
},
@@ -2195,15 +2112,17 @@
*/
Wiki.registerPlugin( function(page,name){
- $ES('*[class^=commentbox]',page).each(function(el){
+ page.getElements('div[class^=commentbox]').each(function(el){
var legend = el.className.split('-')[1];
if( legend ){
new Element('fieldset',{'class':'commentbox'}).adopt(
- new Element('legend').setHTML( legend.deCamelize() )
- ).wraps(el).injectBefore(el);
- el.remove();
+ new Element('legend').set('html', legend.deCamelize() )
+ ).wrapContent(el).injectBefore(el);
+ el.dispose();
}
});
+
+
});
@@ -2211,12 +2130,15 @@
Class: TableAdds
Add support for sorting, filtering and zebra-striping of tables.
TODO: add support for row-grouping
+ TODO: add support for check-box filtering (ref excel like)
Credit:
Filters inspired by http://www.codeproject.com/jscript/filter.asp
*/
var TableAdds = new Class({
+ Implements: Options,
+
options: {
//sort: true,
//filter: true,
@@ -2239,7 +2161,7 @@
if( !self) {
this.table = table;
this.head = $A(table.rows[0].cells).filter(function(el){
- return el.getTag()=='th';
+ return el.get('tag')=='th';
});
table.TableAdds = self = this;
}
@@ -2336,8 +2258,9 @@
rows.each( function(r){ frag.appendChild(r); });
this.table.appendChild(frag);
- var zebra = this.zebra;
- if( zebra ) zebra();
+ //var zebra = this.zebra;
+ //if( zebra ) zebra();
+ $try( this.zebra );
},
/*
@@ -2354,7 +2277,7 @@
var rows = this.getRows(),
select = this.head[column].getLast(), //get select element
- value = filtervalue || select.getValue(),
+ value = filtervalue || select.get('value'),
isAll = (value == this.options.title.all),
filters = this.filters;
@@ -2425,7 +2348,7 @@
*/
getRows: function(){
- if( !this.rows ) this.rows = $A(this.table.rows).copy(1);
+ if( !this.rows ) this.rows = $A(this.table.rows).slice(1);
return this.rows;
},
@@ -2500,6 +2423,7 @@
Parse the column and guess its data-type.
Then convert all values according to that data-type.
The result is cached in rows~[n].data.
+ Empty rows will sort based on the title attribute of the cells.
Supported data-types:
numeric - numeric value, with . as decimal separator
@@ -2519,7 +2443,7 @@
//check cached table data
if( rows[0].data && rows[0].data[column] ) return;
- var num=true, ddd=num, ip4=num, euro=num, kmgt=num;
+ var num=true, flt = num, ddd=num, ip4=num, euro=num, kmgt=num, empty=num;
rows.each( function( r,iii ){
@@ -2531,11 +2455,13 @@
if( !r.data ) r.data=[];
r.data[column] = v;
- num &= !isNaN(v.toFloat());
+ num &= v.test(/\d+/);
+ flt &= !isNaN(v.toFloat());
ddd &= !isNaN(Date.parse(v));
ip4 &= v.test(/(?:\d{1,3}\.){3}\d{1,3}/); //169.169.0.1
- euro &= v.test(/^[£$â¬][0-9.,]+/);
- kmgt &= v.test(/(?:[0-9.,]+)\s*(?:[kmgt])b/); //2 MB, 4GB, 1.2kb, 8Tb
+ euro &= v.test(/^[£$â¬][\d.,]+/);
+ kmgt &= v.test(/(?:[\d.,]+)\s*(?:[kmgt])b/); //2 MB, 4GB, 1.2kb, 8Tb
+ empty &= (v=='');
}
});
@@ -2546,13 +2472,13 @@
if( kmgt ){
- val = val.match(/([0-9.,]+)\s*([kmgt])b/) || [0,0,''];
+ val = val.match(/([\d.,]+)\s*([kmgt])b/) || [0,0,''];
z = {m:3, g:6, t:9}[ val[2] ] || 0;
val = val[1].replace(/,/g,'').toFloat() * Math.pow(10, z);
} else if( euro ){
- val = val.replace(/[^0-9.]/g,'').toFloat();
+ val = val.replace(/[^\d.]/g,'').toFloat();
} else if( ip4 ){
@@ -2563,13 +2489,17 @@
val = Date.parse( val );
- } else if( num ){
+ } else if( flt ){
val = val.match(/([+-]?\d+(:?\.\d+)?(:?e[-+]?\d+)?)/)[0].toFloat();
+ } else if( num ){
+
+ val = val.match(/\d+/)[0].toInt();
+
}
- r.data[column] = val;
+ r.data[column] = empty ? r.cells[column].get('title') : val;
});
@@ -2594,7 +2524,6 @@
}
});
-TableAdds.implement(new Options);
/*
Script: TableAdds
@@ -2621,6 +2550,7 @@
*/
Wiki.registerPlugin( function(page, name){
+
var title = {
all: "filter.all".localize(),
sort: "sort.click".localize(),
@@ -2628,17 +2558,17 @@
descending: "sort.descending".localize()
};
- $ES('.sortable table',page).each( function(table){
+ page.getElements('.sortable table').each( function(table){
new TableAdds(table, {sort:true, title: title});
});
- $ES('.table-filter table',page).each( function(table){
+ page.getElements('.table-filter table').each( function(table){
new TableAdds(table, {filter:true, title: title});
});
- $ES('*[class^=zebra]',page).each( function(el){
+ page.getElements('*[class^=zebra]').each( function(el){
var parms = el.className.split('-').splice(1);
- $ES('table',el).each(function(table){
+ el.getElements('table').each(function(table){
new TableAdds(table, {zebra: parms});
});
});
@@ -2654,37 +2584,37 @@
{
render: function(page, name){
- $ES('.category a.wikipage',page).each(function(link){
+ page.getElements('.category a.wikipage').each(function(link){
var page = Wiki.toPageName(link.href);
if(!page) return;
+
var wrap = new Element('span').injectBefore(link).adopt(link),
- popup = new Element('div',{'class':'categoryPopup'}).inject(wrap),
- popfx = popup.effect('opacity',{wait:false}).set(0);
+ popup = new Element('div',{'class':'categoryPopup'}).inject(wrap).fade('hide');
link.addClass('categoryLink')
- .setProperties({ href:'#', title: "category.title".localize(page) })
- .addEvent('click', function(e){
- new Event(e).stop(); //dont jump to top of page ;-)
+ .set({ href:'#', title: "category.title".localize(page) })
+ .addEvent('click', function(event){
- new Ajax( Wiki.TemplateUrl + 'AJAXCategories.jsp', {
- postBody: '&page=' + page,
+ event.stop(); //dont jump to top of page ;-)
+ new Request.HTML({
+ url:Wiki.TemplateUrl + 'AJAXCategories.jsp',
+ data: '&page=' + page,
update: popup,
onComplete: function(){
- link.setProperty('title', '').removeEvent('click');
+ link.set('title', '')
+ .removeEvent('click');
wrap.addEvents({
- 'mouseover': function(e){ popfx.start(0.9); },
- 'mouseout': function(e){ popfx.start(0); }
+ 'mouseover': function(){ popup.fade(0.9) },
+ 'mouseout': function(){ popup.fade(0) }
});
popup.setStyles({
- 'left': link.getPosition().x,
- 'top': link.getPosition().y+16
- });
- popfx.start(0.9);
-
- $ES('li,div.categoryTitle',popup).addHover();
+ left: link.getPosition().x,
+ top: link.getPosition().y+16
+ }).fade(0.9).getElements('li,div.categoryTitle').addHover();
}
- }).request();
+ }).send();
+
});
});
}
@@ -2709,6 +2639,7 @@
initialize: function (){
var q = Wiki.prefs.get('PrevQuery');
Wiki.prefs.set('PrevQuery', '');
+
if( !q && document.referrer.test("(?:\\?|&)(?:q|query)=([^&]*)","g") ) q = RegExp.$1;
if( q ){
@@ -2746,7 +2677,9 @@
s = s.replace(/</g,'<'); // pre text elements may contain <xml> element
if( this.reMatch.test( s ) ){
- var tmp = new Element('span').setHTML(s.replace(this.reMatch,"<span class='searchword'>$1</span>")),
+ var tmp = new Element('span',{
+ 'html': s.replace(this.reMatch,"<span class='searchword'>$1</span>")
+ }),
f = document.createDocumentFragment();
while( tmp.firstChild ) f.appendChild( tmp.firstChild );
@@ -2760,7 +2693,7 @@
Class: Dialog
Simplified implementation of a Dialog box. Acts as a base class
for other dialog classes.
- It is based on mootools v1.11, depending on the Drag.Base class.
+ It is based on mootools v1.2.3, depending on the Drag class.
Arguments:
options - optional, see options below
@@ -2799,6 +2732,8 @@
*/
var Dialog = new Class({
+ Implements: [Events, Options],
+
options:{
className: 'dialog',
//style:{ dialog-box overrule css styles}
@@ -2828,7 +2763,7 @@
new Element('a',{
'class':'closer',
'events':{ 'click': this.hide.bind(this) }
- }).setHTML('×')
+ }).set('html','×')
),
body = new Element('div',{'class':'body'}),
buttons = new Element('div',{'class':'buttons'})
@@ -2843,7 +2778,7 @@
self.setButtons( options.buttons );
if( options.draggable ){
- new Drag.Base(el);
+ new Drag(el);
el.setStyle('cursor','move');
}
@@ -2908,7 +2843,7 @@
content - string or DOM element
Example:
> setBody( "this is a new dialog content");
- > setBody( new Element('span',{'class','error'}).setHTML('Error encountered') );
+ > setBody( new Element('span',{'class','error'}).set('html','Error encountered') );
*/
setBody: function(content){
@@ -2916,7 +2851,7 @@
type = $type(content);
if( type=='string'){
- body.setHTML(content)
+ body.set('html',content)
} else if( type=='element'){
body.adopt(content.show());
};
@@ -2946,7 +2881,7 @@
}
}).adopt(
new Element('span').adopt(
- new Element('span').setHTML(btn.localize())
+ new Element('span').set('html',btn.localize())
)
).inject(buttonDiv);
}
@@ -2973,18 +2908,20 @@
//center dialog box
var w = window.getSize(),
+ ws = window.getScroll(),
pos = this.element.getCoordinates();
+
pos = {
- left: w.scroll.x + w.size.x/2 - pos.width/2,
- top: w.scroll.y + w.size.y/2 - pos.height/2
+ left: ws.x + w.x/2 - pos.width/2,
+ top: ws.y + w.y/2 - pos.height/2
}
}
this.element.setStyles(pos);
//fixme: centering the dialog box does not yet work
- //alert(Json.toString(pos));
- //alert(Json.toString(this.element.getCoordinates()) );
+ //alert(JSON.encode(pos));
+ //alert(JSON.encode(this.element.getCoordinates()) );
},
/*
Function: resize
@@ -3004,7 +2941,6 @@
}
});
-Dialog.implement(new Options, new Events); //mootools v1.1
/*
Modified: incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-commonstyles.js
URL: http://svn.apache.org/viewvc/incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-commonstyles.js?rev=819135&r1=819134&r2=819135&view=diff
==============================================================================
--- incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-commonstyles.js (original)
+++ incubator/jspwiki/trunk/src/WebContent/scripts/jspwiki-commonstyles.js Sat Sep 26 13:23:58 2009
@@ -1,4 +1,4 @@
-/*!
+/*!
JSPWiki - a JSP-based WikiWiki clone.
Licensed to the Apache Software Foundation (ASF) under one
@@ -16,12 +16,12 @@
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
- under the License.
+ under the License.
*/
/*
Script: jspwiki-commonstyles.js
- Contains additional Dynmic Styles
+ Contains additional Dynmic Styles
* [Reflection]: add reflection to images
* [Accordion]: horizontal and vertical accordions
@@ -32,8 +32,13 @@
License:
http://www.apache.org/licenses/LICENSE-2.0
+
+Depends:
+ Depends on mootools-more, v1.2.3.1.
+ Includes Fx.Accordion, Drag, Tips, Hash.Cookie
+
*/
-
+
/*
Script: Reflection
Add reflection effect to images.
@@ -42,9 +47,9 @@
Arguments:
Options:
- height - (optional) 1..100. Height value of the reflection image,
+ height - (optional) 1..100. Height value of the reflection image,
in percent of the height of the reflected image (default = 30%)
- opacity - (optional) 1..100. Opacity or transparency value of the
+ opacity - (optional) 1..100. Opacity or transparency value of the
reflection image (default = 50%, 100 means not transparent)
Example:
@@ -54,9 +59,9 @@
*/
Wiki.registerPlugin( function(page, name){
- $ES('*[class^=reflection]',page).each( function(r){
+ page.getElements('div[class^=reflection]').each( function(r){
var parms = r.className.split('-');
- $ES('img', r).reflect({ height:parms[1]/100, width:parms[2]/100 });
+ r.getElements('img').reflect({ height:parms[1]/100, width:parms[2]/100 });
});
});
@@ -64,68 +69,62 @@
/*
Element: reflect
Extend the base Element class with a reflect and unreflect methods.
-
+
Credits:
-> reflection.js for mootools v1.32
+> reflection.js for mootools v1.42
> (c) 2006-2008 Christophe Beyls, http://www.digitalia.be
> MIT-style license.
*/
-Element.extend({
+Element.implement({
reflect: function(options) {
+
var img = this,
oHeight = options.height || 0.33,
oOpacity = options.opacity || 0.5;
-
- if (img.getTag() == "img") {
+
+ if (img.get("tag") == "img") {
img.unreflect();
function doReflect() {
- var reflection,
- imgW = img.width,
- imgH = img.height,
- reflectionHeight = Math.floor(imgH * oHeight),
- wrapper,
- context,
- gradient;
+ var reflection, reflectionHeight = Math.floor(img.height * oHeight), wrapper, context, gradient;
- if (window.ie) {
+ if (Browser.Engine.trident) {
reflection = new Element("img", {src: img.src, styles: {
- width: imgW,
- height: imgH,
- marginBottom: -imgH + reflectionHeight,
- filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (oOpacity * 100) +
- ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (oHeight * 100) + ")"
+ width: img.width,
+ height: img.height,
+ marginBottom: -img.height + reflectionHeight,
+ filter: "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (oOpacity * 100) + ",style=1,finishOpacity=0,startx=0,starty=0,finishx=0,finishy=" + (oHeight * 100) + ")"
}});
} else {
- reflection = new Element("canvas",{width: imgW, height: reflectionHeight});
+ reflection = new Element("canvas");
if (!reflection.getContext) return;
try {
- context = reflection.getContext("2d");
+ context = reflection.setProperties({width: img.width, height: reflectionHeight}).getContext("2d");
context.save();
- context.translate(0, imgH-1);
+ context.translate(0, img.height-1);
context.scale(1, -1);
- context.drawImage(img, 0, 0, imgW, imgH);
+ context.drawImage(img, 0, 0, img.width, img.height);
context.restore();
context.globalCompositeOperation = "destination-out";
gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
- gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - oOpacity) + ")");
- gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
+ gradient.addColorStop(0, "rgba(255,255,255," + (1 - oOpacity) + ")");
+ gradient.addColorStop(1, "rgba(255,255,255,1.0)");
context.fillStyle = gradient;
- context.rect(0, 0, imgW, reflectionHeight);
+ context.rect(0, 0, img.width, reflectionHeight);
context.fill();
- } catch(e) {
+ } catch (e) {
return;
}
}
reflection.setStyles({display: "block", border: 0});
- wrapper = new Element(($(img.parentNode).getTag() == "a") ? "span" : "div").injectAfter(img).adopt(img, reflection);
+ wrapper = new Element(($(img.parentNode).get("tag") == "a") ? "span" : "div").injectAfter(img).adopt(img, reflection);
wrapper.className = img.className;
- wrapper.style.cssText = img._reflected = img.style.cssText;
- wrapper.setStyles({width: imgW, height: imgH + reflectionHeight, overflow: "hidden"});
- img.style.cssText = "display: block; border: 0px";
+ img.store("reflected", wrapper.style.cssText = img.style.cssText);
+ wrapper.setStyles({width: img.width, height: img.height + reflectionHeight, overflow: "hidden"});
+ img.style.cssText = "display:block;border:0";
img.className = "reflected";
}
@@ -137,14 +136,14 @@
},
unreflect: function() {
- var img = this, wrapper;
- img.onload = Class.empty;
+ var img = this, reflected = this.retrieve("reflected"), wrapper;
+ img.onload = $empty;
- if (img._reflected !== undefined) {
+ if (reflected !== null) {
wrapper = img.parentNode;
img.className = wrapper.className;
- img.style.cssText = img._reflected;
- img._reflected = undefined;
+ img.style.cssText = reflected;
+ img.store("reflected", null);
wrapper.parentNode.replaceChild(img, wrapper);
}
@@ -152,20 +151,6 @@
}
});
-Elements.extend({
- reflect: function(options) {
- return this.forEach(function(el) {
- el.reflect(options);
- });
- },
-
- unreflect: function() {
- return this.forEach(function(el) {
- el.unreflect();
- });
- }
-});
-
/*
Class: Accordion
@@ -196,8 +181,8 @@
var toggle = new Element('div',{'class':'toggle'}),
bullet = new Element('div',{'class':'collapseBullet'});
- $ES('.accordion, .tabbedAccordion, .leftAccordion, .rightAccordion',page).each( function(tt){
-
+ page.getElements('div.accordion, div.tabbedAccordion, div.leftAccordion, div.rightAccordion').each( function(tt){
+
var toggles=[], contents=[], accordion=null, menu=false;
if(tt.hasClass('tabbedAccordion')){
menu = new Element('div',{'class':'menu top'}).injectBefore(tt);
@@ -208,11 +193,11 @@
else if(tt.hasClass('rightAccordion')){
menu = new Element('div',{'class':'menu right'}).injectBefore(tt);
}
-
+
tt.getChildren().each(function(tab) {
if( !tab.className.test('^tab-') ) return;
- //FIXME use class to make tabs visible during printing
+ //FIXME use class to make tabs visible during printing
//(i==0) ? tab.removeClass('hidetab'): tab.addClass('hidetab');
var title = tab.className.substr(4).deCamelize(),
@@ -223,30 +208,30 @@
var i = toggles.length-1;
contents.push(tab
.addClass('tab')
- .addEvent('onShow', function(){ accordion.display(i); })
+ .addEvent('onShow', function(){ accordion.display(i); })
);
});
-
- accordion = new Accordion(toggles, contents, {
+
+ accordion = new Accordion(toggles, contents, {
height: true,
alwaysHide: !menu,
onComplete: function(){
var el = $(this.elements[this.previous]);
- if (el.offsetHeight > 0) el.setStyle('height', 'auto');
+ if (el.offsetHeight > 0) el.setStyle('height', 'auto');
},
- onActive: function(toggle,content){
- toggle.addClass('active');
+ onActive: function(toggle,content){
+ toggle.addClass('active');
var b = toggle.getFirst();/*bullet*/
- if(b) b.setProperties({'title':'collapse'.localize(), 'class':'collapseOpen'}).setHTML('-'); /* » */
- content.addClass('active');//.removeClass('xhidetab');
+ if(b) b.setProperties({'title':'collapse'.localize(), 'class':'collapseOpen'}).set('html','-'); /* » */
+ content.addClass('active');//.removeClass('xhidetab');
},
- onBackground: function(toggle,content){
+ onBackground: function(toggle,content){
content.setStyle('height', content['offsetHeight']);
- toggle.removeClass('active');
+ toggle.removeClass('active');
var b = toggle.getFirst();/*bullet*/
- if(b) b.setProperties({'title':'expand'.localize(), 'class':'collapseClose'}).setHTML('+'); /* « */
+ if(b) b.setProperties({'title':'expand'.localize(), 'class':'collapseClose'}).set('html','+'); /* « */
content.removeClass('active');//.addClass('xhidetab');
- }
+ }
});
});
bullet=toggle=null; //avoid memory leaks
@@ -304,14 +289,14 @@
[ { margin: "2px", height: "1px", borderSide: "0", borderTop: "1px" }
, { margin: "1px", height: "1px", borderSide: "1px" }
] ,
- 'b' : /* big */
+ 'b' : /* big */
[ { margin: "8px", height: "1px", borderSide: "0", borderTop: "1px" }
, { margin: "6px", height: "1px", borderSide: "2px" }
, { margin: "4px", height: "1px", borderSide: "1px" }
, { margin: "3px", height: "1px", borderSide: "1px" }
, { margin: "2px", height: "1px", borderSide: "1px" }
, { margin: "1px", height: "3px", borderSide: "1px" }
- ]
+ ]
},
/**
@@ -333,12 +318,12 @@
}
for(var selector in this.$registry){ // CHECK NEEDED
- var n = $$(selector),
+ var n = $$(selector),
p = this.$registry[selector];
this.exec(n, p[0], p[1], p[2], p[3]);
}
- $ES('*[class^=roundedCorners]',page).each(function(el){
+ page.getElements('div[class^=roundedCorners]').each(function(el){
var p = el.className.split('-');
if(p.length >= 2) this.exec([el], p[1], p[2], p[3], p[4] );
},this);
@@ -355,7 +340,7 @@
nodes.each(function(n){
if( n.$passed ) return;
-
+
var top = this.addCorner(this.$Top, c[0], c[1], color, borderColor, n),
bottom = this.addCorner(this.$Bottom, c[2], c[3], color, borderColor, n);
@@ -398,7 +383,7 @@
corner = this.getTemplate(corner, left+right);
if(!corner) return false;
- var padl = n.getStyle('padding-left').toInt(),
+ var padl = n.getStyle('padding-left').toInt(),
padr = n.getStyle('padding-right').toInt();
var node = new Element('b',{'class':'roundedCorners','styles':{
'display':'block',
@@ -416,9 +401,9 @@
if(border.hex){
el.setStyles({'border-color':border.hex,'border-style':'solid'});
-
- if(line.borderTop){
- el.setStyles({'border-top-width':line.borderTop,'height':'0'});
+
+ if(line.borderTop){
+ el.setStyles({'border-top-width':line.borderTop,'height':'0'});
}
}
if(left != 'n') el.setStyle('margin-left', line.margin);
@@ -439,8 +424,8 @@
addBody: function(n, color, border){
var padl = n.getStyle('padding-left').toInt(),
- padr = n.getStyle('padding-right').toInt();
-
+ padr = n.getStyle('padding-right').toInt();
+
var container = new Element('div',{'styles':{
'overflow':'hidden',
'margin-left':-1*padl,
@@ -448,7 +433,7 @@
'padding-left':(padl==0) ? 4 : padl,
'padding-right':(padr==0) ? 4 : padr,
'background-color':color.hex
- } }).wraps(n);
+ } }).wrapContent(n);
if(border.hex){
//n.setStyles('border','');
@@ -464,10 +449,33 @@
Script: Tips
Add mouse-hover Tips to your pages.
Depends on Mootools Tips plugin.
+ {{ %%tip-<tip-caption> <tip body> /% }}
Argument:
- caption - (optional)
-
+ caption - (optional)
+
+DOM Structure:
+(start code)
+<div class="tip-TipCaption"> ...tip-body... </div>
+
+<span class="tip-anchor">Tip Caption</span>
+<div class="tip" display:none>
+ <span> ... </span>
+</div>
+
+<div class="tip-anchor">Tip Caption</div>
+
+At the bottom of the page:
+<div class="tip" style="...show/hide...">
+ <div class="tip-top">
+ <div class="tip">
+ <div class="tip-title"> Tip Caption </div>
+ <div class="tip-text"> ...tip-body... </div>
+ </div>
+ <div class="tip-bottom">
+</div>
+(end)
+
Example:
> %%tip-ClickHere some tip text /%
@@ -476,26 +484,24 @@
var tips = [];
- $ES('*[class^=tip]',page).each( function(t){
-
- var parms = t.className.split('-');
- if( parms.length>1 || parms[0] == 'tip' ){
+ page.getElements('div[class^=tip],span[class^=tip]').each( function(t){
- t.className = "tip";
+ var parms = t.hide().className.split('-');
+ if( parms.length > 1 || parms[0] == 'tip' ){
- var body = new Element('span').wraps(t).hide(),
- caption = (parms[1]) ? parms[1].deCamelize(): "tip.default.title".localize();
+ var body = new Element('span').wrapContent(t),
+ caption = parms[1] ? parms[1].deCamelize() : "tip.default.title".localize();
- tips.push(
- new Element('span',{
- 'class': 'tip-anchor',
- title: caption + '::' + body.innerHTML
- }).setHTML(caption).inject(t)
+ tips.push(
+ new Element('span',{ 'class': 'tip-anchor', html: caption })
+ .store('tip:title',caption)
+ .store('tip:text',body)
+ .inject(t,'before')
);
}
});
- if( tips.length>0 ) new Tips( tips , {className:'tip', 'Xfixed':true} );
+ new Tips( tips );
});
@@ -504,7 +510,7 @@
Script: Columns
Format the page content side by side, in columns, like in a newspaper.
HR elements (in wiki {{----}} markup) are used to separate the columns.
- Column widths are equal and automatically calculated.
+ Column widths are equal and automatically calculated.
Optionally, you can specify the width in pixel(px) for the columns.
Arguments:
@@ -519,36 +525,37 @@
*/
Wiki.registerPlugin( function(page, name){
- $ES('*[class^=columns]',page).each( function(block){
+ page.getElements('div[class^=columns]').each( function(block){
var parms = block.className.split('-'),
- columnBreaks = $ES('hr', block);
+ columnBreaks = block.getElements('hr');
if( columnBreaks && columnBreaks.length>0 ){
var columnCount = columnBreaks.length + 1,
width = ( parms[1] ) ? parms[1]/columnCount+'px' : 95/columnCount+'%',
- wrapper = new Element('div', { 'class':'col', 'styles':{ 'width':width } }),
+ wrapper = new Element('div', { 'class':'col', styles:{ width:width } }),
col = wrapper.clone().injectTop(block),
n;
-
+
block.className='columns';
-
+
+ //use native DOM to also copy text-elements.
while( n = col.nextSibling ){
if( n.tagName && n.tagName.toLowerCase() == 'hr' ){
- $(n).replaceWith( col = wrapper.clone() );
+ col = wrapper.clone().replaces(n);
} else {
col.appendChild( n );
}
}
- new Element('div',{styles:{clear:'both'}}).inject( block );
+ new Element('div',{ style:'clear:both'}).inject( block );
//wrapper.empty(); //memory leak
}
});
-
+
});
/*
@@ -574,11 +581,11 @@
*/
Wiki.registerPlugin( function(page, name){
- var els = $ES('.prettify pre, .prettify code', page);
+ var els = page.getElements('div.prettify pre, div.prettify code');
if( els && els.length>0 ){
- els.addClass('prettyprint');
+ els.addClass('prettyprint');
prettyPrint(page);
}