Primer commit del sistema avantika sin cambios
This commit is contained in:
1197
javascript/scoluos/CHANGELOG
Executable file
1197
javascript/scoluos/CHANGELOG
Executable file
File diff suppressed because it is too large
Load Diff
20
javascript/scoluos/MIT-LICENSE
Executable file
20
javascript/scoluos/MIT-LICENSE
Executable file
@@ -0,0 +1,20 @@
|
||||
Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
59
javascript/scoluos/README.rdoc
Executable file
59
javascript/scoluos/README.rdoc
Executable file
@@ -0,0 +1,59 @@
|
||||
== script.aculo.us web 2.0 javascript
|
||||
|
||||
The Web is changing. The 30-year-old terminal-like technology it was originally
|
||||
is gradually giving way to new ways of doing things. The power of AJAX allows
|
||||
for rich user interaction without the trouble that has bugged traditional
|
||||
web applications.
|
||||
|
||||
Building upon the wonderful Prototype JavaScript library, script.aculo.us
|
||||
provides you with some great additional ingredients to mix in.
|
||||
|
||||
For more information, see http://script.aculo.us/
|
||||
|
||||
== What's new in this release?
|
||||
|
||||
See the CHANGELOG file for information on what's new.
|
||||
|
||||
You can follow http://twitter.com/scriptaculous if you want
|
||||
to be updated as we fix bugs and add new features.
|
||||
|
||||
== Installation/Usage
|
||||
|
||||
script.aculo.us includes the Prototype JavaScript Framework
|
||||
V1.6.0. You can use later versions, as they become available
|
||||
(see http://prototypejs.org/).
|
||||
|
||||
Put prototype.js, and the six files scriptaculous.js,
|
||||
builder.js, effects.js, dragdrop.js, controls.js and slider.js
|
||||
in a directory of your website, e.g. /javascripts.
|
||||
|
||||
(The sound.js and unittest.js files are optional)
|
||||
|
||||
Now, you can include the scripts by adding the following
|
||||
tags to the HEAD section of your HTML pages:
|
||||
|
||||
<script src="/javascripts/prototype.js" type="text/javascript"></script>
|
||||
<script src="/javascripts/scriptaculous.js" type="text/javascript"></script>
|
||||
|
||||
scriptaculous.js will automatically load the other files of the
|
||||
script.aculo.us distribution in, provided they are accessible
|
||||
via the same path.
|
||||
|
||||
See http://wiki.script.aculo.us/scriptaculous/show/Usage for detailed
|
||||
usage instructions.
|
||||
|
||||
== The distribution
|
||||
|
||||
Besides the script.aculo.us files in src, there's a complete
|
||||
test tree included which holds functional and unit tests for
|
||||
script.aculo.us.
|
||||
|
||||
If you need examples on how to implement things, the best place to
|
||||
start is by opening test/run_functional_tests.html or
|
||||
test/run_unit_tests.html in your browser, and looking at
|
||||
the sources of the examples provided.
|
||||
|
||||
== License
|
||||
|
||||
script.aculo.us is licensed under the terms of the MIT License,
|
||||
see the included MIT-LICENSE file.
|
||||
4874
javascript/scoluos/lib/prototype.js
vendored
Executable file
4874
javascript/scoluos/lib/prototype.js
vendored
Executable file
File diff suppressed because it is too large
Load Diff
136
javascript/scoluos/src/builder.js
Executable file
136
javascript/scoluos/src/builder.js
Executable file
@@ -0,0 +1,136 @@
|
||||
// script.aculo.us builder.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
|
||||
|
||||
// Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
//
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
var Builder = {
|
||||
NODEMAP: {
|
||||
AREA: 'map',
|
||||
CAPTION: 'table',
|
||||
COL: 'table',
|
||||
COLGROUP: 'table',
|
||||
LEGEND: 'fieldset',
|
||||
OPTGROUP: 'select',
|
||||
OPTION: 'select',
|
||||
PARAM: 'object',
|
||||
TBODY: 'table',
|
||||
TD: 'table',
|
||||
TFOOT: 'table',
|
||||
TH: 'table',
|
||||
THEAD: 'table',
|
||||
TR: 'table'
|
||||
},
|
||||
// note: For Firefox < 1.5, OPTION and OPTGROUP tags are currently broken,
|
||||
// due to a Firefox bug
|
||||
node: function(elementName) {
|
||||
elementName = elementName.toUpperCase();
|
||||
|
||||
// try innerHTML approach
|
||||
var parentTag = this.NODEMAP[elementName] || 'div';
|
||||
var parentElement = document.createElement(parentTag);
|
||||
try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
|
||||
parentElement.innerHTML = "<" + elementName + "></" + elementName + ">";
|
||||
} catch(e) {}
|
||||
var element = parentElement.firstChild || null;
|
||||
|
||||
// see if browser added wrapping tags
|
||||
if(element && (element.tagName.toUpperCase() != elementName))
|
||||
element = element.getElementsByTagName(elementName)[0];
|
||||
|
||||
// fallback to createElement approach
|
||||
if(!element) element = document.createElement(elementName);
|
||||
|
||||
// abort if nothing could be created
|
||||
if(!element) return;
|
||||
|
||||
// attributes (or text)
|
||||
if(arguments[1])
|
||||
if(this._isStringOrNumber(arguments[1]) ||
|
||||
(arguments[1] instanceof Array) ||
|
||||
arguments[1].tagName) {
|
||||
this._children(element, arguments[1]);
|
||||
} else {
|
||||
var attrs = this._attributes(arguments[1]);
|
||||
if(attrs.length) {
|
||||
try { // prevent IE "feature": http://dev.rubyonrails.org/ticket/2707
|
||||
parentElement.innerHTML = "<" +elementName + " " +
|
||||
attrs + "></" + elementName + ">";
|
||||
} catch(e) {}
|
||||
element = parentElement.firstChild || null;
|
||||
// workaround firefox 1.0.X bug
|
||||
if(!element) {
|
||||
element = document.createElement(elementName);
|
||||
for(attr in arguments[1])
|
||||
element[attr == 'class' ? 'className' : attr] = arguments[1][attr];
|
||||
}
|
||||
if(element.tagName.toUpperCase() != elementName)
|
||||
element = parentElement.getElementsByTagName(elementName)[0];
|
||||
}
|
||||
}
|
||||
|
||||
// text, or array of children
|
||||
if(arguments[2])
|
||||
this._children(element, arguments[2]);
|
||||
|
||||
return $(element);
|
||||
},
|
||||
_text: function(text) {
|
||||
return document.createTextNode(text);
|
||||
},
|
||||
|
||||
ATTR_MAP: {
|
||||
'className': 'class',
|
||||
'htmlFor': 'for'
|
||||
},
|
||||
|
||||
_attributes: function(attributes) {
|
||||
var attrs = [];
|
||||
for(attribute in attributes)
|
||||
attrs.push((attribute in this.ATTR_MAP ? this.ATTR_MAP[attribute] : attribute) +
|
||||
'="' + attributes[attribute].toString().escapeHTML().gsub(/"/,'"') + '"');
|
||||
return attrs.join(" ");
|
||||
},
|
||||
_children: function(element, children) {
|
||||
if(children.tagName) {
|
||||
element.appendChild(children);
|
||||
return;
|
||||
}
|
||||
if(typeof children=='object') { // array can hold nodes and text
|
||||
children.flatten().each( function(e) {
|
||||
if(typeof e=='object')
|
||||
element.appendChild(e);
|
||||
else
|
||||
if(Builder._isStringOrNumber(e))
|
||||
element.appendChild(Builder._text(e));
|
||||
});
|
||||
} else
|
||||
if(Builder._isStringOrNumber(children))
|
||||
element.appendChild(Builder._text(children));
|
||||
},
|
||||
_isStringOrNumber: function(param) {
|
||||
return(typeof param=='string' || typeof param=='number');
|
||||
},
|
||||
build: function(html) {
|
||||
var element = this.node('div');
|
||||
$(element).update(html.strip());
|
||||
return element.down();
|
||||
},
|
||||
dump: function(scope) {
|
||||
if(typeof scope != 'object' && typeof scope != 'function') scope = window; //global scope
|
||||
|
||||
var tags = ("A ABBR ACRONYM ADDRESS APPLET AREA B BASE BASEFONT BDO BIG BLOCKQUOTE BODY " +
|
||||
"BR BUTTON CAPTION CENTER CITE CODE COL COLGROUP DD DEL DFN DIR DIV DL DT EM FIELDSET " +
|
||||
"FONT FORM FRAME FRAMESET H1 H2 H3 H4 H5 H6 HEAD HR HTML I IFRAME IMG INPUT INS ISINDEX "+
|
||||
"KBD LABEL LEGEND LI LINK MAP MENU META NOFRAMES NOSCRIPT OBJECT OL OPTGROUP OPTION P "+
|
||||
"PARAM PRE Q S SAMP SCRIPT SELECT SMALL SPAN STRIKE STRONG STYLE SUB SUP TABLE TBODY TD "+
|
||||
"TEXTAREA TFOOT TH THEAD TITLE TR TT U UL VAR").split(/\s+/);
|
||||
|
||||
tags.each( function(tag){
|
||||
scope[tag] = function() {
|
||||
return Builder.node.apply(Builder, [tag].concat($A(arguments)));
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
965
javascript/scoluos/src/controls.js
vendored
Executable file
965
javascript/scoluos/src/controls.js
vendored
Executable file
@@ -0,0 +1,965 @@
|
||||
// script.aculo.us controls.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
|
||||
|
||||
// Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
// (c) 2005-2009 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
|
||||
// (c) 2005-2009 Jon Tirsen (http://www.tirsen.com)
|
||||
// Contributors:
|
||||
// Richard Livsey
|
||||
// Rahul Bhargava
|
||||
// Rob Wills
|
||||
//
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
// Autocompleter.Base handles all the autocompletion functionality
|
||||
// that's independent of the data source for autocompletion. This
|
||||
// includes drawing the autocompletion menu, observing keyboard
|
||||
// and mouse events, and similar.
|
||||
//
|
||||
// Specific autocompleters need to provide, at the very least,
|
||||
// a getUpdatedChoices function that will be invoked every time
|
||||
// the text inside the monitored textbox changes. This method
|
||||
// should get the text for which to provide autocompletion by
|
||||
// invoking this.getToken(), NOT by directly accessing
|
||||
// this.element.value. This is to allow incremental tokenized
|
||||
// autocompletion. Specific auto-completion logic (AJAX, etc)
|
||||
// belongs in getUpdatedChoices.
|
||||
//
|
||||
// Tokenized incremental autocompletion is enabled automatically
|
||||
// when an autocompleter is instantiated with the 'tokens' option
|
||||
// in the options parameter, e.g.:
|
||||
// new Ajax.Autocompleter('id','upd', '/url/', { tokens: ',' });
|
||||
// will incrementally autocomplete with a comma as the token.
|
||||
// Additionally, ',' in the above example can be replaced with
|
||||
// a token array, e.g. { tokens: [',', '\n'] } which
|
||||
// enables autocompletion on multiple tokens. This is most
|
||||
// useful when one of the tokens is \n (a newline), as it
|
||||
// allows smart autocompletion after linebreaks.
|
||||
|
||||
if(typeof Effect == 'undefined')
|
||||
throw("controls.js requires including script.aculo.us' effects.js library");
|
||||
|
||||
var Autocompleter = { };
|
||||
Autocompleter.Base = Class.create({
|
||||
baseInitialize: function(element, update, options) {
|
||||
element = $(element);
|
||||
this.element = element;
|
||||
this.update = $(update);
|
||||
this.hasFocus = false;
|
||||
this.changed = false;
|
||||
this.active = false;
|
||||
this.index = 0;
|
||||
this.entryCount = 0;
|
||||
this.oldElementValue = this.element.value;
|
||||
|
||||
if(this.setOptions)
|
||||
this.setOptions(options);
|
||||
else
|
||||
this.options = options || { };
|
||||
|
||||
this.options.paramName = this.options.paramName || this.element.name;
|
||||
this.options.tokens = this.options.tokens || [];
|
||||
this.options.frequency = this.options.frequency || 0.4;
|
||||
this.options.minChars = this.options.minChars || 1;
|
||||
this.options.onShow = this.options.onShow ||
|
||||
function(element, update){
|
||||
if(!update.style.position || update.style.position=='absolute') {
|
||||
update.style.position = 'absolute';
|
||||
Position.clone(element, update, {
|
||||
setHeight: false,
|
||||
offsetTop: element.offsetHeight
|
||||
});
|
||||
}
|
||||
Effect.Appear(update,{duration:0.15});
|
||||
};
|
||||
this.options.onHide = this.options.onHide ||
|
||||
function(element, update){ new Effect.Fade(update,{duration:0.15}) };
|
||||
|
||||
if(typeof(this.options.tokens) == 'string')
|
||||
this.options.tokens = new Array(this.options.tokens);
|
||||
// Force carriage returns as token delimiters anyway
|
||||
if (!this.options.tokens.include('\n'))
|
||||
this.options.tokens.push('\n');
|
||||
|
||||
this.observer = null;
|
||||
|
||||
this.element.setAttribute('autocomplete','off');
|
||||
|
||||
Element.hide(this.update);
|
||||
|
||||
Event.observe(this.element, 'blur', this.onBlur.bindAsEventListener(this));
|
||||
Event.observe(this.element, 'keydown', this.onKeyPress.bindAsEventListener(this));
|
||||
},
|
||||
|
||||
show: function() {
|
||||
if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
|
||||
if(!this.iefix &&
|
||||
(Prototype.Browser.IE) &&
|
||||
(Element.getStyle(this.update, 'position')=='absolute')) {
|
||||
new Insertion.After(this.update,
|
||||
'<iframe id="' + this.update.id + '_iefix" '+
|
||||
'style="display:none;position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" ' +
|
||||
'src="javascript:false;" frameborder="0" scrolling="no"></iframe>');
|
||||
this.iefix = $(this.update.id+'_iefix');
|
||||
}
|
||||
if(this.iefix) setTimeout(this.fixIEOverlapping.bind(this), 50);
|
||||
},
|
||||
|
||||
fixIEOverlapping: function() {
|
||||
Position.clone(this.update, this.iefix, {setTop:(!this.update.style.height)});
|
||||
this.iefix.style.zIndex = 1;
|
||||
this.update.style.zIndex = 2;
|
||||
Element.show(this.iefix);
|
||||
},
|
||||
|
||||
hide: function() {
|
||||
this.stopIndicator();
|
||||
if(Element.getStyle(this.update, 'display')!='none') this.options.onHide(this.element, this.update);
|
||||
if(this.iefix) Element.hide(this.iefix);
|
||||
},
|
||||
|
||||
startIndicator: function() {
|
||||
if(this.options.indicator) Element.show(this.options.indicator);
|
||||
},
|
||||
|
||||
stopIndicator: function() {
|
||||
if(this.options.indicator) Element.hide(this.options.indicator);
|
||||
},
|
||||
|
||||
onKeyPress: function(event) {
|
||||
if(this.active)
|
||||
switch(event.keyCode) {
|
||||
case Event.KEY_TAB:
|
||||
case Event.KEY_RETURN:
|
||||
this.selectEntry();
|
||||
Event.stop(event);
|
||||
case Event.KEY_ESC:
|
||||
this.hide();
|
||||
this.active = false;
|
||||
Event.stop(event);
|
||||
return;
|
||||
case Event.KEY_LEFT:
|
||||
case Event.KEY_RIGHT:
|
||||
return;
|
||||
case Event.KEY_UP:
|
||||
this.markPrevious();
|
||||
this.render();
|
||||
Event.stop(event);
|
||||
return;
|
||||
case Event.KEY_DOWN:
|
||||
this.markNext();
|
||||
this.render();
|
||||
Event.stop(event);
|
||||
return;
|
||||
}
|
||||
else
|
||||
if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
|
||||
(Prototype.Browser.WebKit > 0 && event.keyCode == 0)) return;
|
||||
|
||||
this.changed = true;
|
||||
this.hasFocus = true;
|
||||
|
||||
if(this.observer) clearTimeout(this.observer);
|
||||
this.observer =
|
||||
setTimeout(this.onObserverEvent.bind(this), this.options.frequency*1000);
|
||||
},
|
||||
|
||||
activate: function() {
|
||||
this.changed = false;
|
||||
this.hasFocus = true;
|
||||
this.getUpdatedChoices();
|
||||
},
|
||||
|
||||
onHover: function(event) {
|
||||
var element = Event.findElement(event, 'LI');
|
||||
if(this.index != element.autocompleteIndex)
|
||||
{
|
||||
this.index = element.autocompleteIndex;
|
||||
this.render();
|
||||
}
|
||||
Event.stop(event);
|
||||
},
|
||||
|
||||
onClick: function(event) {
|
||||
var element = Event.findElement(event, 'LI');
|
||||
this.index = element.autocompleteIndex;
|
||||
this.selectEntry();
|
||||
this.hide();
|
||||
},
|
||||
|
||||
onBlur: function(event) {
|
||||
// needed to make click events working
|
||||
setTimeout(this.hide.bind(this), 250);
|
||||
this.hasFocus = false;
|
||||
this.active = false;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
if(this.entryCount > 0) {
|
||||
for (var i = 0; i < this.entryCount; i++)
|
||||
this.index==i ?
|
||||
Element.addClassName(this.getEntry(i),"selected") :
|
||||
Element.removeClassName(this.getEntry(i),"selected");
|
||||
if(this.hasFocus) {
|
||||
this.show();
|
||||
this.active = true;
|
||||
}
|
||||
} else {
|
||||
this.active = false;
|
||||
this.hide();
|
||||
}
|
||||
},
|
||||
|
||||
markPrevious: function() {
|
||||
if(this.index > 0) this.index--;
|
||||
else this.index = this.entryCount-1;
|
||||
this.getEntry(this.index).scrollIntoView(true);
|
||||
},
|
||||
|
||||
markNext: function() {
|
||||
if(this.index < this.entryCount-1) this.index++;
|
||||
else this.index = 0;
|
||||
this.getEntry(this.index).scrollIntoView(false);
|
||||
},
|
||||
|
||||
getEntry: function(index) {
|
||||
return this.update.firstChild.childNodes[index];
|
||||
},
|
||||
|
||||
getCurrentEntry: function() {
|
||||
return this.getEntry(this.index);
|
||||
},
|
||||
|
||||
selectEntry: function() {
|
||||
this.active = false;
|
||||
this.updateElement(this.getCurrentEntry());
|
||||
},
|
||||
|
||||
updateElement: function(selectedElement) {
|
||||
if (this.options.updateElement) {
|
||||
this.options.updateElement(selectedElement);
|
||||
return;
|
||||
}
|
||||
var value = '';
|
||||
if (this.options.select) {
|
||||
var nodes = $(selectedElement).select('.' + this.options.select) || [];
|
||||
if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
|
||||
} else
|
||||
value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
|
||||
|
||||
var bounds = this.getTokenBounds();
|
||||
if (bounds[0] != -1) {
|
||||
var newValue = this.element.value.substr(0, bounds[0]);
|
||||
var whitespace = this.element.value.substr(bounds[0]).match(/^\s+/);
|
||||
if (whitespace)
|
||||
newValue += whitespace[0];
|
||||
this.element.value = newValue + value + this.element.value.substr(bounds[1]);
|
||||
} else {
|
||||
this.element.value = value;
|
||||
}
|
||||
this.oldElementValue = this.element.value;
|
||||
this.element.focus();
|
||||
|
||||
if (this.options.afterUpdateElement)
|
||||
this.options.afterUpdateElement(this.element, selectedElement);
|
||||
},
|
||||
|
||||
updateChoices: function(choices) {
|
||||
if(!this.changed && this.hasFocus) {
|
||||
this.update.innerHTML = choices;
|
||||
Element.cleanWhitespace(this.update);
|
||||
Element.cleanWhitespace(this.update.down());
|
||||
|
||||
if(this.update.firstChild && this.update.down().childNodes) {
|
||||
this.entryCount =
|
||||
this.update.down().childNodes.length;
|
||||
for (var i = 0; i < this.entryCount; i++) {
|
||||
var entry = this.getEntry(i);
|
||||
entry.autocompleteIndex = i;
|
||||
this.addObservers(entry);
|
||||
}
|
||||
} else {
|
||||
this.entryCount = 0;
|
||||
}
|
||||
|
||||
this.stopIndicator();
|
||||
this.index = 0;
|
||||
|
||||
if(this.entryCount==1 && this.options.autoSelect) {
|
||||
this.selectEntry();
|
||||
this.hide();
|
||||
} else {
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
addObservers: function(element) {
|
||||
Event.observe(element, "mouseover", this.onHover.bindAsEventListener(this));
|
||||
Event.observe(element, "click", this.onClick.bindAsEventListener(this));
|
||||
},
|
||||
|
||||
onObserverEvent: function() {
|
||||
this.changed = false;
|
||||
this.tokenBounds = null;
|
||||
if(this.getToken().length>=this.options.minChars) {
|
||||
this.getUpdatedChoices();
|
||||
} else {
|
||||
this.active = false;
|
||||
this.hide();
|
||||
}
|
||||
this.oldElementValue = this.element.value;
|
||||
},
|
||||
|
||||
getToken: function() {
|
||||
var bounds = this.getTokenBounds();
|
||||
return this.element.value.substring(bounds[0], bounds[1]).strip();
|
||||
},
|
||||
|
||||
getTokenBounds: function() {
|
||||
if (null != this.tokenBounds) return this.tokenBounds;
|
||||
var value = this.element.value;
|
||||
if (value.strip().empty()) return [-1, 0];
|
||||
var diff = arguments.callee.getFirstDifferencePos(value, this.oldElementValue);
|
||||
var offset = (diff == this.oldElementValue.length ? 1 : 0);
|
||||
var prevTokenPos = -1, nextTokenPos = value.length;
|
||||
var tp;
|
||||
for (var index = 0, l = this.options.tokens.length; index < l; ++index) {
|
||||
tp = value.lastIndexOf(this.options.tokens[index], diff + offset - 1);
|
||||
if (tp > prevTokenPos) prevTokenPos = tp;
|
||||
tp = value.indexOf(this.options.tokens[index], diff + offset);
|
||||
if (-1 != tp && tp < nextTokenPos) nextTokenPos = tp;
|
||||
}
|
||||
return (this.tokenBounds = [prevTokenPos + 1, nextTokenPos]);
|
||||
}
|
||||
});
|
||||
|
||||
Autocompleter.Base.prototype.getTokenBounds.getFirstDifferencePos = function(newS, oldS) {
|
||||
var boundary = Math.min(newS.length, oldS.length);
|
||||
for (var index = 0; index < boundary; ++index)
|
||||
if (newS[index] != oldS[index])
|
||||
return index;
|
||||
return boundary;
|
||||
};
|
||||
|
||||
Ajax.Autocompleter = Class.create(Autocompleter.Base, {
|
||||
initialize: function(element, update, url, options) {
|
||||
this.baseInitialize(element, update, options);
|
||||
this.options.asynchronous = true;
|
||||
this.options.onComplete = this.onComplete.bind(this);
|
||||
this.options.defaultParams = this.options.parameters || null;
|
||||
this.url = url;
|
||||
},
|
||||
|
||||
getUpdatedChoices: function() {
|
||||
this.startIndicator();
|
||||
|
||||
var entry = encodeURIComponent(this.options.paramName) + '=' +
|
||||
encodeURIComponent(this.getToken());
|
||||
|
||||
this.options.parameters = this.options.callback ?
|
||||
this.options.callback(this.element, entry) : entry;
|
||||
|
||||
if(this.options.defaultParams)
|
||||
this.options.parameters += '&' + this.options.defaultParams;
|
||||
|
||||
new Ajax.Request(this.url, this.options);
|
||||
},
|
||||
|
||||
onComplete: function(request) {
|
||||
this.updateChoices(request.responseText);
|
||||
}
|
||||
});
|
||||
|
||||
// The local array autocompleter. Used when you'd prefer to
|
||||
// inject an array of autocompletion options into the page, rather
|
||||
// than sending out Ajax queries, which can be quite slow sometimes.
|
||||
//
|
||||
// The constructor takes four parameters. The first two are, as usual,
|
||||
// the id of the monitored textbox, and id of the autocompletion menu.
|
||||
// The third is the array you want to autocomplete from, and the fourth
|
||||
// is the options block.
|
||||
//
|
||||
// Extra local autocompletion options:
|
||||
// - choices - How many autocompletion choices to offer
|
||||
//
|
||||
// - partialSearch - If false, the autocompleter will match entered
|
||||
// text only at the beginning of strings in the
|
||||
// autocomplete array. Defaults to true, which will
|
||||
// match text at the beginning of any *word* in the
|
||||
// strings in the autocomplete array. If you want to
|
||||
// search anywhere in the string, additionally set
|
||||
// the option fullSearch to true (default: off).
|
||||
//
|
||||
// - fullSsearch - Search anywhere in autocomplete array strings.
|
||||
//
|
||||
// - partialChars - How many characters to enter before triggering
|
||||
// a partial match (unlike minChars, which defines
|
||||
// how many characters are required to do any match
|
||||
// at all). Defaults to 2.
|
||||
//
|
||||
// - ignoreCase - Whether to ignore case when autocompleting.
|
||||
// Defaults to true.
|
||||
//
|
||||
// It's possible to pass in a custom function as the 'selector'
|
||||
// option, if you prefer to write your own autocompletion logic.
|
||||
// In that case, the other options above will not apply unless
|
||||
// you support them.
|
||||
|
||||
Autocompleter.Local = Class.create(Autocompleter.Base, {
|
||||
initialize: function(element, update, array, options) {
|
||||
this.baseInitialize(element, update, options);
|
||||
this.options.array = array;
|
||||
},
|
||||
|
||||
getUpdatedChoices: function() {
|
||||
this.updateChoices(this.options.selector(this));
|
||||
},
|
||||
|
||||
setOptions: function(options) {
|
||||
this.options = Object.extend({
|
||||
choices: 10,
|
||||
partialSearch: true,
|
||||
partialChars: 2,
|
||||
ignoreCase: true,
|
||||
fullSearch: false,
|
||||
selector: function(instance) {
|
||||
var ret = []; // Beginning matches
|
||||
var partial = []; // Inside matches
|
||||
var entry = instance.getToken();
|
||||
var count = 0;
|
||||
|
||||
for (var i = 0; i < instance.options.array.length &&
|
||||
ret.length < instance.options.choices ; i++) {
|
||||
|
||||
var elem = instance.options.array[i];
|
||||
var foundPos = instance.options.ignoreCase ?
|
||||
elem.toLowerCase().indexOf(entry.toLowerCase()) :
|
||||
elem.indexOf(entry);
|
||||
|
||||
while (foundPos != -1) {
|
||||
if (foundPos == 0 && elem.length != entry.length) {
|
||||
ret.push("<li><strong>" + elem.substr(0, entry.length) + "</strong>" +
|
||||
elem.substr(entry.length) + "</li>");
|
||||
break;
|
||||
} else if (entry.length >= instance.options.partialChars &&
|
||||
instance.options.partialSearch && foundPos != -1) {
|
||||
if (instance.options.fullSearch || /\s/.test(elem.substr(foundPos-1,1))) {
|
||||
partial.push("<li>" + elem.substr(0, foundPos) + "<strong>" +
|
||||
elem.substr(foundPos, entry.length) + "</strong>" + elem.substr(
|
||||
foundPos + entry.length) + "</li>");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
foundPos = instance.options.ignoreCase ?
|
||||
elem.toLowerCase().indexOf(entry.toLowerCase(), foundPos + 1) :
|
||||
elem.indexOf(entry, foundPos + 1);
|
||||
|
||||
}
|
||||
}
|
||||
if (partial.length)
|
||||
ret = ret.concat(partial.slice(0, instance.options.choices - ret.length));
|
||||
return "<ul>" + ret.join('') + "</ul>";
|
||||
}
|
||||
}, options || { });
|
||||
}
|
||||
});
|
||||
|
||||
// AJAX in-place editor and collection editor
|
||||
// Full rewrite by Christophe Porteneuve <tdd@tddsworld.com> (April 2007).
|
||||
|
||||
// Use this if you notice weird scrolling problems on some browsers,
|
||||
// the DOM might be a bit confused when this gets called so do this
|
||||
// waits 1 ms (with setTimeout) until it does the activation
|
||||
Field.scrollFreeActivate = function(field) {
|
||||
setTimeout(function() {
|
||||
Field.activate(field);
|
||||
}, 1);
|
||||
};
|
||||
|
||||
Ajax.InPlaceEditor = Class.create({
|
||||
initialize: function(element, url, options) {
|
||||
this.url = url;
|
||||
this.element = element = $(element);
|
||||
this.prepareOptions();
|
||||
this._controls = { };
|
||||
arguments.callee.dealWithDeprecatedOptions(options); // DEPRECATION LAYER!!!
|
||||
Object.extend(this.options, options || { });
|
||||
if (!this.options.formId && this.element.id) {
|
||||
this.options.formId = this.element.id + '-inplaceeditor';
|
||||
if ($(this.options.formId))
|
||||
this.options.formId = '';
|
||||
}
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl = $(this.options.externalControl);
|
||||
if (!this.options.externalControl)
|
||||
this.options.externalControlOnly = false;
|
||||
this._originalBackground = this.element.getStyle('background-color') || 'transparent';
|
||||
this.element.title = this.options.clickToEditText;
|
||||
this._boundCancelHandler = this.handleFormCancellation.bind(this);
|
||||
this._boundComplete = (this.options.onComplete || Prototype.emptyFunction).bind(this);
|
||||
this._boundFailureHandler = this.handleAJAXFailure.bind(this);
|
||||
this._boundSubmitHandler = this.handleFormSubmission.bind(this);
|
||||
this._boundWrapperHandler = this.wrapUp.bind(this);
|
||||
this.registerListeners();
|
||||
},
|
||||
checkForEscapeOrReturn: function(e) {
|
||||
if (!this._editing || e.ctrlKey || e.altKey || e.shiftKey) return;
|
||||
if (Event.KEY_ESC == e.keyCode)
|
||||
this.handleFormCancellation(e);
|
||||
else if (Event.KEY_RETURN == e.keyCode)
|
||||
this.handleFormSubmission(e);
|
||||
},
|
||||
createControl: function(mode, handler, extraClasses) {
|
||||
var control = this.options[mode + 'Control'];
|
||||
var text = this.options[mode + 'Text'];
|
||||
if ('button' == control) {
|
||||
var btn = document.createElement('input');
|
||||
btn.type = 'submit';
|
||||
btn.value = text;
|
||||
btn.className = 'editor_' + mode + '_button';
|
||||
if ('cancel' == mode)
|
||||
btn.onclick = this._boundCancelHandler;
|
||||
this._form.appendChild(btn);
|
||||
this._controls[mode] = btn;
|
||||
} else if ('link' == control) {
|
||||
var link = document.createElement('a');
|
||||
link.href = '#';
|
||||
link.appendChild(document.createTextNode(text));
|
||||
link.onclick = 'cancel' == mode ? this._boundCancelHandler : this._boundSubmitHandler;
|
||||
link.className = 'editor_' + mode + '_link';
|
||||
if (extraClasses)
|
||||
link.className += ' ' + extraClasses;
|
||||
this._form.appendChild(link);
|
||||
this._controls[mode] = link;
|
||||
}
|
||||
},
|
||||
createEditField: function() {
|
||||
var text = (this.options.loadTextURL ? this.options.loadingText : this.getText());
|
||||
var fld;
|
||||
if (1 >= this.options.rows && !/\r|\n/.test(this.getText())) {
|
||||
fld = document.createElement('input');
|
||||
fld.type = 'text';
|
||||
var size = this.options.size || this.options.cols || 0;
|
||||
if (0 < size) fld.size = size;
|
||||
} else {
|
||||
fld = document.createElement('textarea');
|
||||
fld.rows = (1 >= this.options.rows ? this.options.autoRows : this.options.rows);
|
||||
fld.cols = this.options.cols || 40;
|
||||
}
|
||||
fld.name = this.options.paramName;
|
||||
fld.value = text; // No HTML breaks conversion anymore
|
||||
fld.className = 'editor_field';
|
||||
if (this.options.submitOnBlur)
|
||||
fld.onblur = this._boundSubmitHandler;
|
||||
this._controls.editor = fld;
|
||||
if (this.options.loadTextURL)
|
||||
this.loadExternalText();
|
||||
this._form.appendChild(this._controls.editor);
|
||||
},
|
||||
createForm: function() {
|
||||
var ipe = this;
|
||||
function addText(mode, condition) {
|
||||
var text = ipe.options['text' + mode + 'Controls'];
|
||||
if (!text || condition === false) return;
|
||||
ipe._form.appendChild(document.createTextNode(text));
|
||||
};
|
||||
this._form = $(document.createElement('form'));
|
||||
this._form.id = this.options.formId;
|
||||
this._form.addClassName(this.options.formClassName);
|
||||
this._form.onsubmit = this._boundSubmitHandler;
|
||||
this.createEditField();
|
||||
if ('textarea' == this._controls.editor.tagName.toLowerCase())
|
||||
this._form.appendChild(document.createElement('br'));
|
||||
if (this.options.onFormCustomization)
|
||||
this.options.onFormCustomization(this, this._form);
|
||||
addText('Before', this.options.okControl || this.options.cancelControl);
|
||||
this.createControl('ok', this._boundSubmitHandler);
|
||||
addText('Between', this.options.okControl && this.options.cancelControl);
|
||||
this.createControl('cancel', this._boundCancelHandler, 'editor_cancel');
|
||||
addText('After', this.options.okControl || this.options.cancelControl);
|
||||
},
|
||||
destroy: function() {
|
||||
if (this._oldInnerHTML)
|
||||
this.element.innerHTML = this._oldInnerHTML;
|
||||
this.leaveEditMode();
|
||||
this.unregisterListeners();
|
||||
},
|
||||
enterEditMode: function(e) {
|
||||
if (this._saving || this._editing) return;
|
||||
this._editing = true;
|
||||
this.triggerCallback('onEnterEditMode');
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl.hide();
|
||||
this.element.hide();
|
||||
this.createForm();
|
||||
this.element.parentNode.insertBefore(this._form, this.element);
|
||||
if (!this.options.loadTextURL)
|
||||
this.postProcessEditField();
|
||||
if (e) Event.stop(e);
|
||||
},
|
||||
enterHover: function(e) {
|
||||
if (this.options.hoverClassName)
|
||||
this.element.addClassName(this.options.hoverClassName);
|
||||
if (this._saving) return;
|
||||
this.triggerCallback('onEnterHover');
|
||||
},
|
||||
getText: function() {
|
||||
return this.element.innerHTML.unescapeHTML();
|
||||
},
|
||||
handleAJAXFailure: function(transport) {
|
||||
this.triggerCallback('onFailure', transport);
|
||||
if (this._oldInnerHTML) {
|
||||
this.element.innerHTML = this._oldInnerHTML;
|
||||
this._oldInnerHTML = null;
|
||||
}
|
||||
},
|
||||
handleFormCancellation: function(e) {
|
||||
this.wrapUp();
|
||||
if (e) Event.stop(e);
|
||||
},
|
||||
handleFormSubmission: function(e) {
|
||||
var form = this._form;
|
||||
var value = $F(this._controls.editor);
|
||||
this.prepareSubmission();
|
||||
var params = this.options.callback(form, value) || '';
|
||||
if (Object.isString(params))
|
||||
params = params.toQueryParams();
|
||||
params.editorId = this.element.id;
|
||||
if (this.options.htmlResponse) {
|
||||
var options = Object.extend({ evalScripts: true }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: params,
|
||||
onComplete: this._boundWrapperHandler,
|
||||
onFailure: this._boundFailureHandler
|
||||
});
|
||||
new Ajax.Updater({ success: this.element }, this.url, options);
|
||||
} else {
|
||||
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: params,
|
||||
onComplete: this._boundWrapperHandler,
|
||||
onFailure: this._boundFailureHandler
|
||||
});
|
||||
new Ajax.Request(this.url, options);
|
||||
}
|
||||
if (e) Event.stop(e);
|
||||
},
|
||||
leaveEditMode: function() {
|
||||
this.element.removeClassName(this.options.savingClassName);
|
||||
this.removeForm();
|
||||
this.leaveHover();
|
||||
this.element.style.backgroundColor = this._originalBackground;
|
||||
this.element.show();
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl.show();
|
||||
this._saving = false;
|
||||
this._editing = false;
|
||||
this._oldInnerHTML = null;
|
||||
this.triggerCallback('onLeaveEditMode');
|
||||
},
|
||||
leaveHover: function(e) {
|
||||
if (this.options.hoverClassName)
|
||||
this.element.removeClassName(this.options.hoverClassName);
|
||||
if (this._saving) return;
|
||||
this.triggerCallback('onLeaveHover');
|
||||
},
|
||||
loadExternalText: function() {
|
||||
this._form.addClassName(this.options.loadingClassName);
|
||||
this._controls.editor.disabled = true;
|
||||
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||
onComplete: Prototype.emptyFunction,
|
||||
onSuccess: function(transport) {
|
||||
this._form.removeClassName(this.options.loadingClassName);
|
||||
var text = transport.responseText;
|
||||
if (this.options.stripLoadedTextTags)
|
||||
text = text.stripTags();
|
||||
this._controls.editor.value = text;
|
||||
this._controls.editor.disabled = false;
|
||||
this.postProcessEditField();
|
||||
}.bind(this),
|
||||
onFailure: this._boundFailureHandler
|
||||
});
|
||||
new Ajax.Request(this.options.loadTextURL, options);
|
||||
},
|
||||
postProcessEditField: function() {
|
||||
var fpc = this.options.fieldPostCreation;
|
||||
if (fpc)
|
||||
$(this._controls.editor)['focus' == fpc ? 'focus' : 'activate']();
|
||||
},
|
||||
prepareOptions: function() {
|
||||
this.options = Object.clone(Ajax.InPlaceEditor.DefaultOptions);
|
||||
Object.extend(this.options, Ajax.InPlaceEditor.DefaultCallbacks);
|
||||
[this._extraDefaultOptions].flatten().compact().each(function(defs) {
|
||||
Object.extend(this.options, defs);
|
||||
}.bind(this));
|
||||
},
|
||||
prepareSubmission: function() {
|
||||
this._saving = true;
|
||||
this.removeForm();
|
||||
this.leaveHover();
|
||||
this.showSaving();
|
||||
},
|
||||
registerListeners: function() {
|
||||
this._listeners = { };
|
||||
var listener;
|
||||
$H(Ajax.InPlaceEditor.Listeners).each(function(pair) {
|
||||
listener = this[pair.value].bind(this);
|
||||
this._listeners[pair.key] = listener;
|
||||
if (!this.options.externalControlOnly)
|
||||
this.element.observe(pair.key, listener);
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl.observe(pair.key, listener);
|
||||
}.bind(this));
|
||||
},
|
||||
removeForm: function() {
|
||||
if (!this._form) return;
|
||||
this._form.remove();
|
||||
this._form = null;
|
||||
this._controls = { };
|
||||
},
|
||||
showSaving: function() {
|
||||
this._oldInnerHTML = this.element.innerHTML;
|
||||
this.element.innerHTML = this.options.savingText;
|
||||
this.element.addClassName(this.options.savingClassName);
|
||||
this.element.style.backgroundColor = this._originalBackground;
|
||||
this.element.show();
|
||||
},
|
||||
triggerCallback: function(cbName, arg) {
|
||||
if ('function' == typeof this.options[cbName]) {
|
||||
this.options[cbName](this, arg);
|
||||
}
|
||||
},
|
||||
unregisterListeners: function() {
|
||||
$H(this._listeners).each(function(pair) {
|
||||
if (!this.options.externalControlOnly)
|
||||
this.element.stopObserving(pair.key, pair.value);
|
||||
if (this.options.externalControl)
|
||||
this.options.externalControl.stopObserving(pair.key, pair.value);
|
||||
}.bind(this));
|
||||
},
|
||||
wrapUp: function(transport) {
|
||||
this.leaveEditMode();
|
||||
// Can't use triggerCallback due to backward compatibility: requires
|
||||
// binding + direct element
|
||||
this._boundComplete(transport, this.element);
|
||||
}
|
||||
});
|
||||
|
||||
Object.extend(Ajax.InPlaceEditor.prototype, {
|
||||
dispose: Ajax.InPlaceEditor.prototype.destroy
|
||||
});
|
||||
|
||||
Ajax.InPlaceCollectionEditor = Class.create(Ajax.InPlaceEditor, {
|
||||
initialize: function($super, element, url, options) {
|
||||
this._extraDefaultOptions = Ajax.InPlaceCollectionEditor.DefaultOptions;
|
||||
$super(element, url, options);
|
||||
},
|
||||
|
||||
createEditField: function() {
|
||||
var list = document.createElement('select');
|
||||
list.name = this.options.paramName;
|
||||
list.size = 1;
|
||||
this._controls.editor = list;
|
||||
this._collection = this.options.collection || [];
|
||||
if (this.options.loadCollectionURL)
|
||||
this.loadCollection();
|
||||
else
|
||||
this.checkForExternalText();
|
||||
this._form.appendChild(this._controls.editor);
|
||||
},
|
||||
|
||||
loadCollection: function() {
|
||||
this._form.addClassName(this.options.loadingClassName);
|
||||
this.showLoadingText(this.options.loadingCollectionText);
|
||||
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||
onComplete: Prototype.emptyFunction,
|
||||
onSuccess: function(transport) {
|
||||
var js = transport.responseText.strip();
|
||||
if (!/^\[.*\]$/.test(js)) // TODO: improve sanity check
|
||||
throw('Server returned an invalid collection representation.');
|
||||
this._collection = eval(js);
|
||||
this.checkForExternalText();
|
||||
}.bind(this),
|
||||
onFailure: this.onFailure
|
||||
});
|
||||
new Ajax.Request(this.options.loadCollectionURL, options);
|
||||
},
|
||||
|
||||
showLoadingText: function(text) {
|
||||
this._controls.editor.disabled = true;
|
||||
var tempOption = this._controls.editor.firstChild;
|
||||
if (!tempOption) {
|
||||
tempOption = document.createElement('option');
|
||||
tempOption.value = '';
|
||||
this._controls.editor.appendChild(tempOption);
|
||||
tempOption.selected = true;
|
||||
}
|
||||
tempOption.update((text || '').stripScripts().stripTags());
|
||||
},
|
||||
|
||||
checkForExternalText: function() {
|
||||
this._text = this.getText();
|
||||
if (this.options.loadTextURL)
|
||||
this.loadExternalText();
|
||||
else
|
||||
this.buildOptionList();
|
||||
},
|
||||
|
||||
loadExternalText: function() {
|
||||
this.showLoadingText(this.options.loadingText);
|
||||
var options = Object.extend({ method: 'get' }, this.options.ajaxOptions);
|
||||
Object.extend(options, {
|
||||
parameters: 'editorId=' + encodeURIComponent(this.element.id),
|
||||
onComplete: Prototype.emptyFunction,
|
||||
onSuccess: function(transport) {
|
||||
this._text = transport.responseText.strip();
|
||||
this.buildOptionList();
|
||||
}.bind(this),
|
||||
onFailure: this.onFailure
|
||||
});
|
||||
new Ajax.Request(this.options.loadTextURL, options);
|
||||
},
|
||||
|
||||
buildOptionList: function() {
|
||||
this._form.removeClassName(this.options.loadingClassName);
|
||||
this._collection = this._collection.map(function(entry) {
|
||||
return 2 === entry.length ? entry : [entry, entry].flatten();
|
||||
});
|
||||
var marker = ('value' in this.options) ? this.options.value : this._text;
|
||||
var textFound = this._collection.any(function(entry) {
|
||||
return entry[0] == marker;
|
||||
}.bind(this));
|
||||
this._controls.editor.update('');
|
||||
var option;
|
||||
this._collection.each(function(entry, index) {
|
||||
option = document.createElement('option');
|
||||
option.value = entry[0];
|
||||
option.selected = textFound ? entry[0] == marker : 0 == index;
|
||||
option.appendChild(document.createTextNode(entry[1]));
|
||||
this._controls.editor.appendChild(option);
|
||||
}.bind(this));
|
||||
this._controls.editor.disabled = false;
|
||||
Field.scrollFreeActivate(this._controls.editor);
|
||||
}
|
||||
});
|
||||
|
||||
//**** DEPRECATION LAYER FOR InPlace[Collection]Editor! ****
|
||||
//**** This only exists for a while, in order to let ****
|
||||
//**** users adapt to the new API. Read up on the new ****
|
||||
//**** API and convert your code to it ASAP! ****
|
||||
|
||||
Ajax.InPlaceEditor.prototype.initialize.dealWithDeprecatedOptions = function(options) {
|
||||
if (!options) return;
|
||||
function fallback(name, expr) {
|
||||
if (name in options || expr === undefined) return;
|
||||
options[name] = expr;
|
||||
};
|
||||
fallback('cancelControl', (options.cancelLink ? 'link' : (options.cancelButton ? 'button' :
|
||||
options.cancelLink == options.cancelButton == false ? false : undefined)));
|
||||
fallback('okControl', (options.okLink ? 'link' : (options.okButton ? 'button' :
|
||||
options.okLink == options.okButton == false ? false : undefined)));
|
||||
fallback('highlightColor', options.highlightcolor);
|
||||
fallback('highlightEndColor', options.highlightendcolor);
|
||||
};
|
||||
|
||||
Object.extend(Ajax.InPlaceEditor, {
|
||||
DefaultOptions: {
|
||||
ajaxOptions: { },
|
||||
autoRows: 3, // Use when multi-line w/ rows == 1
|
||||
cancelControl: 'link', // 'link'|'button'|false
|
||||
cancelText: 'cancel',
|
||||
clickToEditText: 'Click to edit',
|
||||
externalControl: null, // id|elt
|
||||
externalControlOnly: false,
|
||||
fieldPostCreation: 'activate', // 'activate'|'focus'|false
|
||||
formClassName: 'inplaceeditor-form',
|
||||
formId: null, // id|elt
|
||||
highlightColor: '#ffff99',
|
||||
highlightEndColor: '#ffffff',
|
||||
hoverClassName: '',
|
||||
htmlResponse: true,
|
||||
loadingClassName: 'inplaceeditor-loading',
|
||||
loadingText: 'Loading...',
|
||||
okControl: 'button', // 'link'|'button'|false
|
||||
okText: 'ok',
|
||||
paramName: 'value',
|
||||
rows: 1, // If 1 and multi-line, uses autoRows
|
||||
savingClassName: 'inplaceeditor-saving',
|
||||
savingText: 'Saving...',
|
||||
size: 0,
|
||||
stripLoadedTextTags: false,
|
||||
submitOnBlur: false,
|
||||
textAfterControls: '',
|
||||
textBeforeControls: '',
|
||||
textBetweenControls: ''
|
||||
},
|
||||
DefaultCallbacks: {
|
||||
callback: function(form) {
|
||||
return Form.serialize(form);
|
||||
},
|
||||
onComplete: function(transport, element) {
|
||||
// For backward compatibility, this one is bound to the IPE, and passes
|
||||
// the element directly. It was too often customized, so we don't break it.
|
||||
new Effect.Highlight(element, {
|
||||
startcolor: this.options.highlightColor, keepBackgroundImage: true });
|
||||
},
|
||||
onEnterEditMode: null,
|
||||
onEnterHover: function(ipe) {
|
||||
ipe.element.style.backgroundColor = ipe.options.highlightColor;
|
||||
if (ipe._effect)
|
||||
ipe._effect.cancel();
|
||||
},
|
||||
onFailure: function(transport, ipe) {
|
||||
alert('Error communication with the server: ' + transport.responseText.stripTags());
|
||||
},
|
||||
onFormCustomization: null, // Takes the IPE and its generated form, after editor, before controls.
|
||||
onLeaveEditMode: null,
|
||||
onLeaveHover: function(ipe) {
|
||||
ipe._effect = new Effect.Highlight(ipe.element, {
|
||||
startcolor: ipe.options.highlightColor, endcolor: ipe.options.highlightEndColor,
|
||||
restorecolor: ipe._originalBackground, keepBackgroundImage: true
|
||||
});
|
||||
}
|
||||
},
|
||||
Listeners: {
|
||||
click: 'enterEditMode',
|
||||
keydown: 'checkForEscapeOrReturn',
|
||||
mouseover: 'enterHover',
|
||||
mouseout: 'leaveHover'
|
||||
}
|
||||
});
|
||||
|
||||
Ajax.InPlaceCollectionEditor.DefaultOptions = {
|
||||
loadingCollectionText: 'Loading options...'
|
||||
};
|
||||
|
||||
// Delayed observer, like Form.Element.Observer,
|
||||
// but waits for delay after last key input
|
||||
// Ideal for live-search fields
|
||||
|
||||
Form.Element.DelayedObserver = Class.create({
|
||||
initialize: function(element, delay, callback) {
|
||||
this.delay = delay || 0.5;
|
||||
this.element = $(element);
|
||||
this.callback = callback;
|
||||
this.timer = null;
|
||||
this.lastValue = $F(this.element);
|
||||
Event.observe(this.element,'keyup',this.delayedListener.bindAsEventListener(this));
|
||||
},
|
||||
delayedListener: function(event) {
|
||||
if(this.lastValue == $F(this.element)) return;
|
||||
if(this.timer) clearTimeout(this.timer);
|
||||
this.timer = setTimeout(this.onTimerEvent.bind(this), this.delay * 1000);
|
||||
this.lastValue = $F(this.element);
|
||||
},
|
||||
onTimerEvent: function() {
|
||||
this.timer = null;
|
||||
this.callback(this.element, $F(this.element));
|
||||
}
|
||||
});
|
||||
974
javascript/scoluos/src/dragdrop.js
vendored
Executable file
974
javascript/scoluos/src/dragdrop.js
vendored
Executable file
@@ -0,0 +1,974 @@
|
||||
// script.aculo.us dragdrop.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
|
||||
|
||||
// Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
//
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
if(Object.isUndefined(Effect))
|
||||
throw("dragdrop.js requires including script.aculo.us' effects.js library");
|
||||
|
||||
var Droppables = {
|
||||
drops: [],
|
||||
|
||||
remove: function(element) {
|
||||
this.drops = this.drops.reject(function(d) { return d.element==$(element) });
|
||||
},
|
||||
|
||||
add: function(element) {
|
||||
element = $(element);
|
||||
var options = Object.extend({
|
||||
greedy: true,
|
||||
hoverclass: null,
|
||||
tree: false
|
||||
}, arguments[1] || { });
|
||||
|
||||
// cache containers
|
||||
if(options.containment) {
|
||||
options._containers = [];
|
||||
var containment = options.containment;
|
||||
if(Object.isArray(containment)) {
|
||||
containment.each( function(c) { options._containers.push($(c)) });
|
||||
} else {
|
||||
options._containers.push($(containment));
|
||||
}
|
||||
}
|
||||
|
||||
if(options.accept) options.accept = [options.accept].flatten();
|
||||
|
||||
Element.makePositioned(element); // fix IE
|
||||
options.element = element;
|
||||
|
||||
this.drops.push(options);
|
||||
},
|
||||
|
||||
findDeepestChild: function(drops) {
|
||||
deepest = drops[0];
|
||||
|
||||
for (i = 1; i < drops.length; ++i)
|
||||
if (Element.isParent(drops[i].element, deepest.element))
|
||||
deepest = drops[i];
|
||||
|
||||
return deepest;
|
||||
},
|
||||
|
||||
isContained: function(element, drop) {
|
||||
var containmentNode;
|
||||
if(drop.tree) {
|
||||
containmentNode = element.treeNode;
|
||||
} else {
|
||||
containmentNode = element.parentNode;
|
||||
}
|
||||
return drop._containers.detect(function(c) { return containmentNode == c });
|
||||
},
|
||||
|
||||
isAffected: function(point, element, drop) {
|
||||
return (
|
||||
(drop.element!=element) &&
|
||||
((!drop._containers) ||
|
||||
this.isContained(element, drop)) &&
|
||||
((!drop.accept) ||
|
||||
(Element.classNames(element).detect(
|
||||
function(v) { return drop.accept.include(v) } ) )) &&
|
||||
Position.within(drop.element, point[0], point[1]) );
|
||||
},
|
||||
|
||||
deactivate: function(drop) {
|
||||
if(drop.hoverclass)
|
||||
Element.removeClassName(drop.element, drop.hoverclass);
|
||||
this.last_active = null;
|
||||
},
|
||||
|
||||
activate: function(drop) {
|
||||
if(drop.hoverclass)
|
||||
Element.addClassName(drop.element, drop.hoverclass);
|
||||
this.last_active = drop;
|
||||
},
|
||||
|
||||
show: function(point, element) {
|
||||
if(!this.drops.length) return;
|
||||
var drop, affected = [];
|
||||
|
||||
this.drops.each( function(drop) {
|
||||
if(Droppables.isAffected(point, element, drop))
|
||||
affected.push(drop);
|
||||
});
|
||||
|
||||
if(affected.length>0)
|
||||
drop = Droppables.findDeepestChild(affected);
|
||||
|
||||
if(this.last_active && this.last_active != drop) this.deactivate(this.last_active);
|
||||
if (drop) {
|
||||
Position.within(drop.element, point[0], point[1]);
|
||||
if(drop.onHover)
|
||||
drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
|
||||
|
||||
if (drop != this.last_active) Droppables.activate(drop);
|
||||
}
|
||||
},
|
||||
|
||||
fire: function(event, element) {
|
||||
if(!this.last_active) return;
|
||||
Position.prepare();
|
||||
|
||||
if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
|
||||
if (this.last_active.onDrop) {
|
||||
this.last_active.onDrop(element, this.last_active.element, event);
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
if(this.last_active)
|
||||
this.deactivate(this.last_active);
|
||||
}
|
||||
};
|
||||
|
||||
var Draggables = {
|
||||
drags: [],
|
||||
observers: [],
|
||||
|
||||
register: function(draggable) {
|
||||
if(this.drags.length == 0) {
|
||||
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
|
||||
this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
|
||||
this.eventKeypress = this.keyPress.bindAsEventListener(this);
|
||||
|
||||
Event.observe(document, "mouseup", this.eventMouseUp);
|
||||
Event.observe(document, "mousemove", this.eventMouseMove);
|
||||
Event.observe(document, "keypress", this.eventKeypress);
|
||||
}
|
||||
this.drags.push(draggable);
|
||||
},
|
||||
|
||||
unregister: function(draggable) {
|
||||
this.drags = this.drags.reject(function(d) { return d==draggable });
|
||||
if(this.drags.length == 0) {
|
||||
Event.stopObserving(document, "mouseup", this.eventMouseUp);
|
||||
Event.stopObserving(document, "mousemove", this.eventMouseMove);
|
||||
Event.stopObserving(document, "keypress", this.eventKeypress);
|
||||
}
|
||||
},
|
||||
|
||||
activate: function(draggable) {
|
||||
if(draggable.options.delay) {
|
||||
this._timeout = setTimeout(function() {
|
||||
Draggables._timeout = null;
|
||||
window.focus();
|
||||
Draggables.activeDraggable = draggable;
|
||||
}.bind(this), draggable.options.delay);
|
||||
} else {
|
||||
window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
|
||||
this.activeDraggable = draggable;
|
||||
}
|
||||
},
|
||||
|
||||
deactivate: function() {
|
||||
this.activeDraggable = null;
|
||||
},
|
||||
|
||||
updateDrag: function(event) {
|
||||
if(!this.activeDraggable) return;
|
||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||
// Mozilla-based browsers fire successive mousemove events with
|
||||
// the same coordinates, prevent needless redrawing (moz bug?)
|
||||
if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
|
||||
this._lastPointer = pointer;
|
||||
|
||||
this.activeDraggable.updateDrag(event, pointer);
|
||||
},
|
||||
|
||||
endDrag: function(event) {
|
||||
if(this._timeout) {
|
||||
clearTimeout(this._timeout);
|
||||
this._timeout = null;
|
||||
}
|
||||
if(!this.activeDraggable) return;
|
||||
this._lastPointer = null;
|
||||
this.activeDraggable.endDrag(event);
|
||||
this.activeDraggable = null;
|
||||
},
|
||||
|
||||
keyPress: function(event) {
|
||||
if(this.activeDraggable)
|
||||
this.activeDraggable.keyPress(event);
|
||||
},
|
||||
|
||||
addObserver: function(observer) {
|
||||
this.observers.push(observer);
|
||||
this._cacheObserverCallbacks();
|
||||
},
|
||||
|
||||
removeObserver: function(element) { // element instead of observer fixes mem leaks
|
||||
this.observers = this.observers.reject( function(o) { return o.element==element });
|
||||
this._cacheObserverCallbacks();
|
||||
},
|
||||
|
||||
notify: function(eventName, draggable, event) { // 'onStart', 'onEnd', 'onDrag'
|
||||
if(this[eventName+'Count'] > 0)
|
||||
this.observers.each( function(o) {
|
||||
if(o[eventName]) o[eventName](eventName, draggable, event);
|
||||
});
|
||||
if(draggable.options[eventName]) draggable.options[eventName](draggable, event);
|
||||
},
|
||||
|
||||
_cacheObserverCallbacks: function() {
|
||||
['onStart','onEnd','onDrag'].each( function(eventName) {
|
||||
Draggables[eventName+'Count'] = Draggables.observers.select(
|
||||
function(o) { return o[eventName]; }
|
||||
).length;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
var Draggable = Class.create({
|
||||
initialize: function(element) {
|
||||
var defaults = {
|
||||
handle: false,
|
||||
reverteffect: function(element, top_offset, left_offset) {
|
||||
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
|
||||
new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur,
|
||||
queue: {scope:'_draggable', position:'end'}
|
||||
});
|
||||
},
|
||||
endeffect: function(element) {
|
||||
var toOpacity = Object.isNumber(element._opacity) ? element._opacity : 1.0;
|
||||
new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity,
|
||||
queue: {scope:'_draggable', position:'end'},
|
||||
afterFinish: function(){
|
||||
Draggable._dragging[element] = false
|
||||
}
|
||||
});
|
||||
},
|
||||
zindex: 1000,
|
||||
revert: false,
|
||||
quiet: false,
|
||||
scroll: false,
|
||||
scrollSensitivity: 20,
|
||||
scrollSpeed: 15,
|
||||
snap: false, // false, or xy or [x,y] or function(x,y){ return [x,y] }
|
||||
delay: 0
|
||||
};
|
||||
|
||||
if(!arguments[1] || Object.isUndefined(arguments[1].endeffect))
|
||||
Object.extend(defaults, {
|
||||
starteffect: function(element) {
|
||||
element._opacity = Element.getOpacity(element);
|
||||
Draggable._dragging[element] = true;
|
||||
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
|
||||
}
|
||||
});
|
||||
|
||||
var options = Object.extend(defaults, arguments[1] || { });
|
||||
|
||||
this.element = $(element);
|
||||
|
||||
if(options.handle && Object.isString(options.handle))
|
||||
this.handle = this.element.down('.'+options.handle, 0);
|
||||
|
||||
if(!this.handle) this.handle = $(options.handle);
|
||||
if(!this.handle) this.handle = this.element;
|
||||
|
||||
if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML) {
|
||||
options.scroll = $(options.scroll);
|
||||
this._isScrollChild = Element.childOf(this.element, options.scroll);
|
||||
}
|
||||
|
||||
Element.makePositioned(this.element); // fix IE
|
||||
|
||||
this.options = options;
|
||||
this.dragging = false;
|
||||
|
||||
this.eventMouseDown = this.initDrag.bindAsEventListener(this);
|
||||
Event.observe(this.handle, "mousedown", this.eventMouseDown);
|
||||
|
||||
Draggables.register(this);
|
||||
},
|
||||
|
||||
destroy: function() {
|
||||
Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
|
||||
Draggables.unregister(this);
|
||||
},
|
||||
|
||||
currentDelta: function() {
|
||||
return([
|
||||
parseInt(Element.getStyle(this.element,'left') || '0'),
|
||||
parseInt(Element.getStyle(this.element,'top') || '0')]);
|
||||
},
|
||||
|
||||
initDrag: function(event) {
|
||||
if(!Object.isUndefined(Draggable._dragging[this.element]) &&
|
||||
Draggable._dragging[this.element]) return;
|
||||
if(Event.isLeftClick(event)) {
|
||||
// abort on form elements, fixes a Firefox issue
|
||||
var src = Event.element(event);
|
||||
if((tag_name = src.tagName.toUpperCase()) && (
|
||||
tag_name=='INPUT' ||
|
||||
tag_name=='SELECT' ||
|
||||
tag_name=='OPTION' ||
|
||||
tag_name=='BUTTON' ||
|
||||
tag_name=='TEXTAREA')) return;
|
||||
|
||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||
var pos = this.element.cumulativeOffset();
|
||||
this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) });
|
||||
|
||||
Draggables.activate(this);
|
||||
Event.stop(event);
|
||||
}
|
||||
},
|
||||
|
||||
startDrag: function(event) {
|
||||
this.dragging = true;
|
||||
if(!this.delta)
|
||||
this.delta = this.currentDelta();
|
||||
|
||||
if(this.options.zindex) {
|
||||
this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
|
||||
this.element.style.zIndex = this.options.zindex;
|
||||
}
|
||||
|
||||
if(this.options.ghosting) {
|
||||
this._clone = this.element.cloneNode(true);
|
||||
this._originallyAbsolute = (this.element.getStyle('position') == 'absolute');
|
||||
if (!this._originallyAbsolute)
|
||||
Position.absolutize(this.element);
|
||||
this.element.parentNode.insertBefore(this._clone, this.element);
|
||||
}
|
||||
|
||||
if(this.options.scroll) {
|
||||
if (this.options.scroll == window) {
|
||||
var where = this._getWindowScroll(this.options.scroll);
|
||||
this.originalScrollLeft = where.left;
|
||||
this.originalScrollTop = where.top;
|
||||
} else {
|
||||
this.originalScrollLeft = this.options.scroll.scrollLeft;
|
||||
this.originalScrollTop = this.options.scroll.scrollTop;
|
||||
}
|
||||
}
|
||||
|
||||
Draggables.notify('onStart', this, event);
|
||||
|
||||
if(this.options.starteffect) this.options.starteffect(this.element);
|
||||
},
|
||||
|
||||
updateDrag: function(event, pointer) {
|
||||
if(!this.dragging) this.startDrag(event);
|
||||
|
||||
if(!this.options.quiet){
|
||||
Position.prepare();
|
||||
Droppables.show(pointer, this.element);
|
||||
}
|
||||
|
||||
Draggables.notify('onDrag', this, event);
|
||||
|
||||
this.draw(pointer);
|
||||
if(this.options.change) this.options.change(this);
|
||||
|
||||
if(this.options.scroll) {
|
||||
this.stopScrolling();
|
||||
|
||||
var p;
|
||||
if (this.options.scroll == window) {
|
||||
with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; }
|
||||
} else {
|
||||
p = Position.page(this.options.scroll);
|
||||
p[0] += this.options.scroll.scrollLeft + Position.deltaX;
|
||||
p[1] += this.options.scroll.scrollTop + Position.deltaY;
|
||||
p.push(p[0]+this.options.scroll.offsetWidth);
|
||||
p.push(p[1]+this.options.scroll.offsetHeight);
|
||||
}
|
||||
var speed = [0,0];
|
||||
if(pointer[0] < (p[0]+this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[0]+this.options.scrollSensitivity);
|
||||
if(pointer[1] < (p[1]+this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[1]+this.options.scrollSensitivity);
|
||||
if(pointer[0] > (p[2]-this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[2]-this.options.scrollSensitivity);
|
||||
if(pointer[1] > (p[3]-this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[3]-this.options.scrollSensitivity);
|
||||
this.startScrolling(speed);
|
||||
}
|
||||
|
||||
// fix AppleWebKit rendering
|
||||
if(Prototype.Browser.WebKit) window.scrollBy(0,0);
|
||||
|
||||
Event.stop(event);
|
||||
},
|
||||
|
||||
finishDrag: function(event, success) {
|
||||
this.dragging = false;
|
||||
|
||||
if(this.options.quiet){
|
||||
Position.prepare();
|
||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||
Droppables.show(pointer, this.element);
|
||||
}
|
||||
|
||||
if(this.options.ghosting) {
|
||||
if (!this._originallyAbsolute)
|
||||
Position.relativize(this.element);
|
||||
delete this._originallyAbsolute;
|
||||
Element.remove(this._clone);
|
||||
this._clone = null;
|
||||
}
|
||||
|
||||
var dropped = false;
|
||||
if(success) {
|
||||
dropped = Droppables.fire(event, this.element);
|
||||
if (!dropped) dropped = false;
|
||||
}
|
||||
if(dropped && this.options.onDropped) this.options.onDropped(this.element);
|
||||
Draggables.notify('onEnd', this, event);
|
||||
|
||||
var revert = this.options.revert;
|
||||
if(revert && Object.isFunction(revert)) revert = revert(this.element);
|
||||
|
||||
var d = this.currentDelta();
|
||||
if(revert && this.options.reverteffect) {
|
||||
if (dropped == 0 || revert != 'failure')
|
||||
this.options.reverteffect(this.element,
|
||||
d[1]-this.delta[1], d[0]-this.delta[0]);
|
||||
} else {
|
||||
this.delta = d;
|
||||
}
|
||||
|
||||
if(this.options.zindex)
|
||||
this.element.style.zIndex = this.originalZ;
|
||||
|
||||
if(this.options.endeffect)
|
||||
this.options.endeffect(this.element);
|
||||
|
||||
Draggables.deactivate(this);
|
||||
Droppables.reset();
|
||||
},
|
||||
|
||||
keyPress: function(event) {
|
||||
if(event.keyCode!=Event.KEY_ESC) return;
|
||||
this.finishDrag(event, false);
|
||||
Event.stop(event);
|
||||
},
|
||||
|
||||
endDrag: function(event) {
|
||||
if(!this.dragging) return;
|
||||
this.stopScrolling();
|
||||
this.finishDrag(event, true);
|
||||
Event.stop(event);
|
||||
},
|
||||
|
||||
draw: function(point) {
|
||||
var pos = this.element.cumulativeOffset();
|
||||
if(this.options.ghosting) {
|
||||
var r = Position.realOffset(this.element);
|
||||
pos[0] += r[0] - Position.deltaX; pos[1] += r[1] - Position.deltaY;
|
||||
}
|
||||
|
||||
var d = this.currentDelta();
|
||||
pos[0] -= d[0]; pos[1] -= d[1];
|
||||
|
||||
if(this.options.scroll && (this.options.scroll != window && this._isScrollChild)) {
|
||||
pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft;
|
||||
pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop;
|
||||
}
|
||||
|
||||
var p = [0,1].map(function(i){
|
||||
return (point[i]-pos[i]-this.offset[i])
|
||||
}.bind(this));
|
||||
|
||||
if(this.options.snap) {
|
||||
if(Object.isFunction(this.options.snap)) {
|
||||
p = this.options.snap(p[0],p[1],this);
|
||||
} else {
|
||||
if(Object.isArray(this.options.snap)) {
|
||||
p = p.map( function(v, i) {
|
||||
return (v/this.options.snap[i]).round()*this.options.snap[i] }.bind(this));
|
||||
} else {
|
||||
p = p.map( function(v) {
|
||||
return (v/this.options.snap).round()*this.options.snap }.bind(this));
|
||||
}
|
||||
}}
|
||||
|
||||
var style = this.element.style;
|
||||
if((!this.options.constraint) || (this.options.constraint=='horizontal'))
|
||||
style.left = p[0] + "px";
|
||||
if((!this.options.constraint) || (this.options.constraint=='vertical'))
|
||||
style.top = p[1] + "px";
|
||||
|
||||
if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering
|
||||
},
|
||||
|
||||
stopScrolling: function() {
|
||||
if(this.scrollInterval) {
|
||||
clearInterval(this.scrollInterval);
|
||||
this.scrollInterval = null;
|
||||
Draggables._lastScrollPointer = null;
|
||||
}
|
||||
},
|
||||
|
||||
startScrolling: function(speed) {
|
||||
if(!(speed[0] || speed[1])) return;
|
||||
this.scrollSpeed = [speed[0]*this.options.scrollSpeed,speed[1]*this.options.scrollSpeed];
|
||||
this.lastScrolled = new Date();
|
||||
this.scrollInterval = setInterval(this.scroll.bind(this), 10);
|
||||
},
|
||||
|
||||
scroll: function() {
|
||||
var current = new Date();
|
||||
var delta = current - this.lastScrolled;
|
||||
this.lastScrolled = current;
|
||||
if(this.options.scroll == window) {
|
||||
with (this._getWindowScroll(this.options.scroll)) {
|
||||
if (this.scrollSpeed[0] || this.scrollSpeed[1]) {
|
||||
var d = delta / 1000;
|
||||
this.options.scroll.scrollTo( left + d*this.scrollSpeed[0], top + d*this.scrollSpeed[1] );
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;
|
||||
this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000;
|
||||
}
|
||||
|
||||
Position.prepare();
|
||||
Droppables.show(Draggables._lastPointer, this.element);
|
||||
Draggables.notify('onDrag', this);
|
||||
if (this._isScrollChild) {
|
||||
Draggables._lastScrollPointer = Draggables._lastScrollPointer || $A(Draggables._lastPointer);
|
||||
Draggables._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000;
|
||||
Draggables._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000;
|
||||
if (Draggables._lastScrollPointer[0] < 0)
|
||||
Draggables._lastScrollPointer[0] = 0;
|
||||
if (Draggables._lastScrollPointer[1] < 0)
|
||||
Draggables._lastScrollPointer[1] = 0;
|
||||
this.draw(Draggables._lastScrollPointer);
|
||||
}
|
||||
|
||||
if(this.options.change) this.options.change(this);
|
||||
},
|
||||
|
||||
_getWindowScroll: function(w) {
|
||||
var T, L, W, H;
|
||||
with (w.document) {
|
||||
if (w.document.documentElement && documentElement.scrollTop) {
|
||||
T = documentElement.scrollTop;
|
||||
L = documentElement.scrollLeft;
|
||||
} else if (w.document.body) {
|
||||
T = body.scrollTop;
|
||||
L = body.scrollLeft;
|
||||
}
|
||||
if (w.innerWidth) {
|
||||
W = w.innerWidth;
|
||||
H = w.innerHeight;
|
||||
} else if (w.document.documentElement && documentElement.clientWidth) {
|
||||
W = documentElement.clientWidth;
|
||||
H = documentElement.clientHeight;
|
||||
} else {
|
||||
W = body.offsetWidth;
|
||||
H = body.offsetHeight;
|
||||
}
|
||||
}
|
||||
return { top: T, left: L, width: W, height: H };
|
||||
}
|
||||
});
|
||||
|
||||
Draggable._dragging = { };
|
||||
|
||||
/*--------------------------------------------------------------------------*/
|
||||
|
||||
var SortableObserver = Class.create({
|
||||
initialize: function(element, observer) {
|
||||
this.element = $(element);
|
||||
this.observer = observer;
|
||||
this.lastValue = Sortable.serialize(this.element);
|
||||
},
|
||||
|
||||
onStart: function() {
|
||||
this.lastValue = Sortable.serialize(this.element);
|
||||
},
|
||||
|
||||
onEnd: function() {
|
||||
Sortable.unmark();
|
||||
if(this.lastValue != Sortable.serialize(this.element))
|
||||
this.observer(this.element)
|
||||
}
|
||||
});
|
||||
|
||||
var Sortable = {
|
||||
SERIALIZE_RULE: /^[^_\-](?:[A-Za-z0-9\-\_]*)[_](.*)$/,
|
||||
|
||||
sortables: { },
|
||||
|
||||
_findRootElement: function(element) {
|
||||
while (element.tagName.toUpperCase() != "BODY") {
|
||||
if(element.id && Sortable.sortables[element.id]) return element;
|
||||
element = element.parentNode;
|
||||
}
|
||||
},
|
||||
|
||||
options: function(element) {
|
||||
element = Sortable._findRootElement($(element));
|
||||
if(!element) return;
|
||||
return Sortable.sortables[element.id];
|
||||
},
|
||||
|
||||
destroy: function(element){
|
||||
element = $(element);
|
||||
var s = Sortable.sortables[element.id];
|
||||
|
||||
if(s) {
|
||||
Draggables.removeObserver(s.element);
|
||||
s.droppables.each(function(d){ Droppables.remove(d) });
|
||||
s.draggables.invoke('destroy');
|
||||
|
||||
delete Sortable.sortables[s.element.id];
|
||||
}
|
||||
},
|
||||
|
||||
create: function(element) {
|
||||
element = $(element);
|
||||
var options = Object.extend({
|
||||
element: element,
|
||||
tag: 'li', // assumes li children, override with tag: 'tagname'
|
||||
dropOnEmpty: false,
|
||||
tree: false,
|
||||
treeTag: 'ul',
|
||||
overlap: 'vertical', // one of 'vertical', 'horizontal'
|
||||
constraint: 'vertical', // one of 'vertical', 'horizontal', false
|
||||
containment: element, // also takes array of elements (or id's); or false
|
||||
handle: false, // or a CSS class
|
||||
only: false,
|
||||
delay: 0,
|
||||
hoverclass: null,
|
||||
ghosting: false,
|
||||
quiet: false,
|
||||
scroll: false,
|
||||
scrollSensitivity: 20,
|
||||
scrollSpeed: 15,
|
||||
format: this.SERIALIZE_RULE,
|
||||
|
||||
// these take arrays of elements or ids and can be
|
||||
// used for better initialization performance
|
||||
elements: false,
|
||||
handles: false,
|
||||
|
||||
onChange: Prototype.emptyFunction,
|
||||
onUpdate: Prototype.emptyFunction
|
||||
}, arguments[1] || { });
|
||||
|
||||
// clear any old sortable with same element
|
||||
this.destroy(element);
|
||||
|
||||
// build options for the draggables
|
||||
var options_for_draggable = {
|
||||
revert: true,
|
||||
quiet: options.quiet,
|
||||
scroll: options.scroll,
|
||||
scrollSpeed: options.scrollSpeed,
|
||||
scrollSensitivity: options.scrollSensitivity,
|
||||
delay: options.delay,
|
||||
ghosting: options.ghosting,
|
||||
constraint: options.constraint,
|
||||
handle: options.handle };
|
||||
|
||||
if(options.starteffect)
|
||||
options_for_draggable.starteffect = options.starteffect;
|
||||
|
||||
if(options.reverteffect)
|
||||
options_for_draggable.reverteffect = options.reverteffect;
|
||||
else
|
||||
if(options.ghosting) options_for_draggable.reverteffect = function(element) {
|
||||
element.style.top = 0;
|
||||
element.style.left = 0;
|
||||
};
|
||||
|
||||
if(options.endeffect)
|
||||
options_for_draggable.endeffect = options.endeffect;
|
||||
|
||||
if(options.zindex)
|
||||
options_for_draggable.zindex = options.zindex;
|
||||
|
||||
// build options for the droppables
|
||||
var options_for_droppable = {
|
||||
overlap: options.overlap,
|
||||
containment: options.containment,
|
||||
tree: options.tree,
|
||||
hoverclass: options.hoverclass,
|
||||
onHover: Sortable.onHover
|
||||
};
|
||||
|
||||
var options_for_tree = {
|
||||
onHover: Sortable.onEmptyHover,
|
||||
overlap: options.overlap,
|
||||
containment: options.containment,
|
||||
hoverclass: options.hoverclass
|
||||
};
|
||||
|
||||
// fix for gecko engine
|
||||
Element.cleanWhitespace(element);
|
||||
|
||||
options.draggables = [];
|
||||
options.droppables = [];
|
||||
|
||||
// drop on empty handling
|
||||
if(options.dropOnEmpty || options.tree) {
|
||||
Droppables.add(element, options_for_tree);
|
||||
options.droppables.push(element);
|
||||
}
|
||||
|
||||
(options.elements || this.findElements(element, options) || []).each( function(e,i) {
|
||||
var handle = options.handles ? $(options.handles[i]) :
|
||||
(options.handle ? $(e).select('.' + options.handle)[0] : e);
|
||||
options.draggables.push(
|
||||
new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
|
||||
Droppables.add(e, options_for_droppable);
|
||||
if(options.tree) e.treeNode = element;
|
||||
options.droppables.push(e);
|
||||
});
|
||||
|
||||
if(options.tree) {
|
||||
(Sortable.findTreeElements(element, options) || []).each( function(e) {
|
||||
Droppables.add(e, options_for_tree);
|
||||
e.treeNode = element;
|
||||
options.droppables.push(e);
|
||||
});
|
||||
}
|
||||
|
||||
// keep reference
|
||||
this.sortables[element.identify()] = options;
|
||||
|
||||
// for onupdate
|
||||
Draggables.addObserver(new SortableObserver(element, options.onUpdate));
|
||||
|
||||
},
|
||||
|
||||
// return all suitable-for-sortable elements in a guaranteed order
|
||||
findElements: function(element, options) {
|
||||
return Element.findChildren(
|
||||
element, options.only, options.tree ? true : false, options.tag);
|
||||
},
|
||||
|
||||
findTreeElements: function(element, options) {
|
||||
return Element.findChildren(
|
||||
element, options.only, options.tree ? true : false, options.treeTag);
|
||||
},
|
||||
|
||||
onHover: function(element, dropon, overlap) {
|
||||
if(Element.isParent(dropon, element)) return;
|
||||
|
||||
if(overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) {
|
||||
return;
|
||||
} else if(overlap>0.5) {
|
||||
Sortable.mark(dropon, 'before');
|
||||
if(dropon.previousSibling != element) {
|
||||
var oldParentNode = element.parentNode;
|
||||
element.style.visibility = "hidden"; // fix gecko rendering
|
||||
dropon.parentNode.insertBefore(element, dropon);
|
||||
if(dropon.parentNode!=oldParentNode)
|
||||
Sortable.options(oldParentNode).onChange(element);
|
||||
Sortable.options(dropon.parentNode).onChange(element);
|
||||
}
|
||||
} else {
|
||||
Sortable.mark(dropon, 'after');
|
||||
var nextElement = dropon.nextSibling || null;
|
||||
if(nextElement != element) {
|
||||
var oldParentNode = element.parentNode;
|
||||
element.style.visibility = "hidden"; // fix gecko rendering
|
||||
dropon.parentNode.insertBefore(element, nextElement);
|
||||
if(dropon.parentNode!=oldParentNode)
|
||||
Sortable.options(oldParentNode).onChange(element);
|
||||
Sortable.options(dropon.parentNode).onChange(element);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onEmptyHover: function(element, dropon, overlap) {
|
||||
var oldParentNode = element.parentNode;
|
||||
var droponOptions = Sortable.options(dropon);
|
||||
|
||||
if(!Element.isParent(dropon, element)) {
|
||||
var index;
|
||||
|
||||
var children = Sortable.findElements(dropon, {tag: droponOptions.tag, only: droponOptions.only});
|
||||
var child = null;
|
||||
|
||||
if(children) {
|
||||
var offset = Element.offsetSize(dropon, droponOptions.overlap) * (1.0 - overlap);
|
||||
|
||||
for (index = 0; index < children.length; index += 1) {
|
||||
if (offset - Element.offsetSize (children[index], droponOptions.overlap) >= 0) {
|
||||
offset -= Element.offsetSize (children[index], droponOptions.overlap);
|
||||
} else if (offset - (Element.offsetSize (children[index], droponOptions.overlap) / 2) >= 0) {
|
||||
child = index + 1 < children.length ? children[index + 1] : null;
|
||||
break;
|
||||
} else {
|
||||
child = children[index];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dropon.insertBefore(element, child);
|
||||
|
||||
Sortable.options(oldParentNode).onChange(element);
|
||||
droponOptions.onChange(element);
|
||||
}
|
||||
},
|
||||
|
||||
unmark: function() {
|
||||
if(Sortable._marker) Sortable._marker.hide();
|
||||
},
|
||||
|
||||
mark: function(dropon, position) {
|
||||
// mark on ghosting only
|
||||
var sortable = Sortable.options(dropon.parentNode);
|
||||
if(sortable && !sortable.ghosting) return;
|
||||
|
||||
if(!Sortable._marker) {
|
||||
Sortable._marker =
|
||||
($('dropmarker') || Element.extend(document.createElement('DIV'))).
|
||||
hide().addClassName('dropmarker').setStyle({position:'absolute'});
|
||||
document.getElementsByTagName("body").item(0).appendChild(Sortable._marker);
|
||||
}
|
||||
var offsets = dropon.cumulativeOffset();
|
||||
Sortable._marker.setStyle({left: offsets[0]+'px', top: offsets[1] + 'px'});
|
||||
|
||||
if(position=='after')
|
||||
if(sortable.overlap == 'horizontal')
|
||||
Sortable._marker.setStyle({left: (offsets[0]+dropon.clientWidth) + 'px'});
|
||||
else
|
||||
Sortable._marker.setStyle({top: (offsets[1]+dropon.clientHeight) + 'px'});
|
||||
|
||||
Sortable._marker.show();
|
||||
},
|
||||
|
||||
_tree: function(element, options, parent) {
|
||||
var children = Sortable.findElements(element, options) || [];
|
||||
|
||||
for (var i = 0; i < children.length; ++i) {
|
||||
var match = children[i].id.match(options.format);
|
||||
|
||||
if (!match) continue;
|
||||
|
||||
var child = {
|
||||
id: encodeURIComponent(match ? match[1] : null),
|
||||
element: element,
|
||||
parent: parent,
|
||||
children: [],
|
||||
position: parent.children.length,
|
||||
container: $(children[i]).down(options.treeTag)
|
||||
};
|
||||
|
||||
/* Get the element containing the children and recurse over it */
|
||||
if (child.container)
|
||||
this._tree(child.container, options, child);
|
||||
|
||||
parent.children.push (child);
|
||||
}
|
||||
|
||||
return parent;
|
||||
},
|
||||
|
||||
tree: function(element) {
|
||||
element = $(element);
|
||||
var sortableOptions = this.options(element);
|
||||
var options = Object.extend({
|
||||
tag: sortableOptions.tag,
|
||||
treeTag: sortableOptions.treeTag,
|
||||
only: sortableOptions.only,
|
||||
name: element.id,
|
||||
format: sortableOptions.format
|
||||
}, arguments[1] || { });
|
||||
|
||||
var root = {
|
||||
id: null,
|
||||
parent: null,
|
||||
children: [],
|
||||
container: element,
|
||||
position: 0
|
||||
};
|
||||
|
||||
return Sortable._tree(element, options, root);
|
||||
},
|
||||
|
||||
/* Construct a [i] index for a particular node */
|
||||
_constructIndex: function(node) {
|
||||
var index = '';
|
||||
do {
|
||||
if (node.id) index = '[' + node.position + ']' + index;
|
||||
} while ((node = node.parent) != null);
|
||||
return index;
|
||||
},
|
||||
|
||||
sequence: function(element) {
|
||||
element = $(element);
|
||||
var options = Object.extend(this.options(element), arguments[1] || { });
|
||||
|
||||
return $(this.findElements(element, options) || []).map( function(item) {
|
||||
return item.id.match(options.format) ? item.id.match(options.format)[1] : '';
|
||||
});
|
||||
},
|
||||
|
||||
setSequence: function(element, new_sequence) {
|
||||
element = $(element);
|
||||
var options = Object.extend(this.options(element), arguments[2] || { });
|
||||
|
||||
var nodeMap = { };
|
||||
this.findElements(element, options).each( function(n) {
|
||||
if (n.id.match(options.format))
|
||||
nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
|
||||
n.parentNode.removeChild(n);
|
||||
});
|
||||
|
||||
new_sequence.each(function(ident) {
|
||||
var n = nodeMap[ident];
|
||||
if (n) {
|
||||
n[1].appendChild(n[0]);
|
||||
delete nodeMap[ident];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
serialize: function(element) {
|
||||
element = $(element);
|
||||
var options = Object.extend(Sortable.options(element), arguments[1] || { });
|
||||
var name = encodeURIComponent(
|
||||
(arguments[1] && arguments[1].name) ? arguments[1].name : element.id);
|
||||
|
||||
if (options.tree) {
|
||||
return Sortable.tree(element, arguments[1]).children.map( function (item) {
|
||||
return [name + Sortable._constructIndex(item) + "[id]=" +
|
||||
encodeURIComponent(item.id)].concat(item.children.map(arguments.callee));
|
||||
}).flatten().join('&');
|
||||
} else {
|
||||
return Sortable.sequence(element, arguments[1]).map( function(item) {
|
||||
return name + "[]=" + encodeURIComponent(item);
|
||||
}).join('&');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Returns true if child is contained within element
|
||||
Element.isParent = function(child, element) {
|
||||
if (!child.parentNode || child == element) return false;
|
||||
if (child.parentNode == element) return true;
|
||||
return Element.isParent(child.parentNode, element);
|
||||
};
|
||||
|
||||
Element.findChildren = function(element, only, recursive, tagName) {
|
||||
if(!element.hasChildNodes()) return null;
|
||||
tagName = tagName.toUpperCase();
|
||||
if(only) only = [only].flatten();
|
||||
var elements = [];
|
||||
$A(element.childNodes).each( function(e) {
|
||||
if(e.tagName && e.tagName.toUpperCase()==tagName &&
|
||||
(!only || (Element.classNames(e).detect(function(v) { return only.include(v) }))))
|
||||
elements.push(e);
|
||||
if(recursive) {
|
||||
var grandchildren = Element.findChildren(e, only, recursive, tagName);
|
||||
if(grandchildren) elements.push(grandchildren);
|
||||
}
|
||||
});
|
||||
|
||||
return (elements.length>0 ? elements.flatten() : []);
|
||||
};
|
||||
|
||||
Element.offsetSize = function (element, type) {
|
||||
return element['offset' + ((type=='vertical' || type=='height') ? 'Height' : 'Width')];
|
||||
};
|
||||
1123
javascript/scoluos/src/effects.js
vendored
Executable file
1123
javascript/scoluos/src/effects.js
vendored
Executable file
File diff suppressed because it is too large
Load Diff
68
javascript/scoluos/src/scriptaculous.js
Executable file
68
javascript/scoluos/src/scriptaculous.js
Executable file
@@ -0,0 +1,68 @@
|
||||
// script.aculo.us scriptaculous.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
|
||||
|
||||
// Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
//
|
||||
// Permission is hereby granted, free of charge, to any person obtaining
|
||||
// a copy of this software and associated documentation files (the
|
||||
// "Software"), to deal in the Software without restriction, including
|
||||
// without limitation the rights to use, copy, modify, merge, publish,
|
||||
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||
// permit persons to whom the Software is furnished to do so, subject to
|
||||
// the following conditions:
|
||||
//
|
||||
// The above copyright notice and this permission notice shall be
|
||||
// included in all copies or substantial portions of the Software.
|
||||
//
|
||||
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
//
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
var Scriptaculous = {
|
||||
Version: '1.8.3',
|
||||
require: function(libraryName) {
|
||||
try{
|
||||
// inserting via DOM fails in Safari 2.0, so brute force approach
|
||||
document.write('<script type="text/javascript" src="'+libraryName+'"><\/script>');
|
||||
} catch(e) {
|
||||
// for xhtml+xml served content, fall back to DOM methods
|
||||
var script = document.createElement('script');
|
||||
script.type = 'text/javascript';
|
||||
script.src = libraryName;
|
||||
document.getElementsByTagName('head')[0].appendChild(script);
|
||||
}
|
||||
},
|
||||
REQUIRED_PROTOTYPE: '1.6.0.3',
|
||||
load: function() {
|
||||
function convertVersionString(versionString) {
|
||||
var v = versionString.replace(/_.*|\./g, '');
|
||||
v = parseInt(v + '0'.times(4-v.length));
|
||||
return versionString.indexOf('_') > -1 ? v-1 : v;
|
||||
}
|
||||
|
||||
if((typeof Prototype=='undefined') ||
|
||||
(typeof Element == 'undefined') ||
|
||||
(typeof Element.Methods=='undefined') ||
|
||||
(convertVersionString(Prototype.Version) <
|
||||
convertVersionString(Scriptaculous.REQUIRED_PROTOTYPE)))
|
||||
throw("script.aculo.us requires the Prototype JavaScript framework >= " +
|
||||
Scriptaculous.REQUIRED_PROTOTYPE);
|
||||
|
||||
var js = /scriptaculous\.js(\?.*)?$/;
|
||||
$$('head script[src]').findAll(function(s) {
|
||||
return s.src.match(js);
|
||||
}).each(function(s) {
|
||||
var path = s.src.replace(js, ''),
|
||||
includes = s.src.match(/\?.*load=([a-z,]*)/);
|
||||
(includes ? includes[1] : 'builder,effects,dragdrop,controls,slider,sound').split(',').each(
|
||||
function(include) { Scriptaculous.require(path+include+'.js') });
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Scriptaculous.load();
|
||||
275
javascript/scoluos/src/slider.js
Executable file
275
javascript/scoluos/src/slider.js
Executable file
@@ -0,0 +1,275 @@
|
||||
// script.aculo.us slider.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
|
||||
|
||||
// Copyright (c) 2005-2009 Marty Haught, Thomas Fuchs
|
||||
//
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
if (!Control) var Control = { };
|
||||
|
||||
// options:
|
||||
// axis: 'vertical', or 'horizontal' (default)
|
||||
//
|
||||
// callbacks:
|
||||
// onChange(value)
|
||||
// onSlide(value)
|
||||
Control.Slider = Class.create({
|
||||
initialize: function(handle, track, options) {
|
||||
var slider = this;
|
||||
|
||||
if (Object.isArray(handle)) {
|
||||
this.handles = handle.collect( function(e) { return $(e) });
|
||||
} else {
|
||||
this.handles = [$(handle)];
|
||||
}
|
||||
|
||||
this.track = $(track);
|
||||
this.options = options || { };
|
||||
|
||||
this.axis = this.options.axis || 'horizontal';
|
||||
this.increment = this.options.increment || 1;
|
||||
this.step = parseInt(this.options.step || '1');
|
||||
this.range = this.options.range || $R(0,1);
|
||||
|
||||
this.value = 0; // assure backwards compat
|
||||
this.values = this.handles.map( function() { return 0 });
|
||||
this.spans = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false;
|
||||
this.options.startSpan = $(this.options.startSpan || null);
|
||||
this.options.endSpan = $(this.options.endSpan || null);
|
||||
|
||||
this.restricted = this.options.restricted || false;
|
||||
|
||||
this.maximum = this.options.maximum || this.range.end;
|
||||
this.minimum = this.options.minimum || this.range.start;
|
||||
|
||||
// Will be used to align the handle onto the track, if necessary
|
||||
this.alignX = parseInt(this.options.alignX || '0');
|
||||
this.alignY = parseInt(this.options.alignY || '0');
|
||||
|
||||
this.trackLength = this.maximumOffset() - this.minimumOffset();
|
||||
|
||||
this.handleLength = this.isVertical() ?
|
||||
(this.handles[0].offsetHeight != 0 ?
|
||||
this.handles[0].offsetHeight : this.handles[0].style.height.replace(/px$/,"")) :
|
||||
(this.handles[0].offsetWidth != 0 ? this.handles[0].offsetWidth :
|
||||
this.handles[0].style.width.replace(/px$/,""));
|
||||
|
||||
this.active = false;
|
||||
this.dragging = false;
|
||||
this.disabled = false;
|
||||
|
||||
if (this.options.disabled) this.setDisabled();
|
||||
|
||||
// Allowed values array
|
||||
this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;
|
||||
if (this.allowedValues) {
|
||||
this.minimum = this.allowedValues.min();
|
||||
this.maximum = this.allowedValues.max();
|
||||
}
|
||||
|
||||
this.eventMouseDown = this.startDrag.bindAsEventListener(this);
|
||||
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
|
||||
this.eventMouseMove = this.update.bindAsEventListener(this);
|
||||
|
||||
// Initialize handles in reverse (make sure first handle is active)
|
||||
this.handles.each( function(h,i) {
|
||||
i = slider.handles.length-1-i;
|
||||
slider.setValue(parseFloat(
|
||||
(Object.isArray(slider.options.sliderValue) ?
|
||||
slider.options.sliderValue[i] : slider.options.sliderValue) ||
|
||||
slider.range.start), i);
|
||||
h.makePositioned().observe("mousedown", slider.eventMouseDown);
|
||||
});
|
||||
|
||||
this.track.observe("mousedown", this.eventMouseDown);
|
||||
document.observe("mouseup", this.eventMouseUp);
|
||||
document.observe("mousemove", this.eventMouseMove);
|
||||
|
||||
this.initialized = true;
|
||||
},
|
||||
dispose: function() {
|
||||
var slider = this;
|
||||
Event.stopObserving(this.track, "mousedown", this.eventMouseDown);
|
||||
Event.stopObserving(document, "mouseup", this.eventMouseUp);
|
||||
Event.stopObserving(document, "mousemove", this.eventMouseMove);
|
||||
this.handles.each( function(h) {
|
||||
Event.stopObserving(h, "mousedown", slider.eventMouseDown);
|
||||
});
|
||||
},
|
||||
setDisabled: function(){
|
||||
this.disabled = true;
|
||||
},
|
||||
setEnabled: function(){
|
||||
this.disabled = false;
|
||||
},
|
||||
getNearestValue: function(value){
|
||||
if (this.allowedValues){
|
||||
if (value >= this.allowedValues.max()) return(this.allowedValues.max());
|
||||
if (value <= this.allowedValues.min()) return(this.allowedValues.min());
|
||||
|
||||
var offset = Math.abs(this.allowedValues[0] - value);
|
||||
var newValue = this.allowedValues[0];
|
||||
this.allowedValues.each( function(v) {
|
||||
var currentOffset = Math.abs(v - value);
|
||||
if (currentOffset <= offset){
|
||||
newValue = v;
|
||||
offset = currentOffset;
|
||||
}
|
||||
});
|
||||
return newValue;
|
||||
}
|
||||
if (value > this.range.end) return this.range.end;
|
||||
if (value < this.range.start) return this.range.start;
|
||||
return value;
|
||||
},
|
||||
setValue: function(sliderValue, handleIdx){
|
||||
if (!this.active) {
|
||||
this.activeHandleIdx = handleIdx || 0;
|
||||
this.activeHandle = this.handles[this.activeHandleIdx];
|
||||
this.updateStyles();
|
||||
}
|
||||
handleIdx = handleIdx || this.activeHandleIdx || 0;
|
||||
if (this.initialized && this.restricted) {
|
||||
if ((handleIdx>0) && (sliderValue<this.values[handleIdx-1]))
|
||||
sliderValue = this.values[handleIdx-1];
|
||||
if ((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1]))
|
||||
sliderValue = this.values[handleIdx+1];
|
||||
}
|
||||
sliderValue = this.getNearestValue(sliderValue);
|
||||
this.values[handleIdx] = sliderValue;
|
||||
this.value = this.values[0]; // assure backwards compat
|
||||
|
||||
this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] =
|
||||
this.translateToPx(sliderValue);
|
||||
|
||||
this.drawSpans();
|
||||
if (!this.dragging || !this.event) this.updateFinished();
|
||||
},
|
||||
setValueBy: function(delta, handleIdx) {
|
||||
this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta,
|
||||
handleIdx || this.activeHandleIdx || 0);
|
||||
},
|
||||
translateToPx: function(value) {
|
||||
return Math.round(
|
||||
((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) *
|
||||
(value - this.range.start)) + "px";
|
||||
},
|
||||
translateToValue: function(offset) {
|
||||
return ((offset/(this.trackLength-this.handleLength) *
|
||||
(this.range.end-this.range.start)) + this.range.start);
|
||||
},
|
||||
getRange: function(range) {
|
||||
var v = this.values.sortBy(Prototype.K);
|
||||
range = range || 0;
|
||||
return $R(v[range],v[range+1]);
|
||||
},
|
||||
minimumOffset: function(){
|
||||
return(this.isVertical() ? this.alignY : this.alignX);
|
||||
},
|
||||
maximumOffset: function(){
|
||||
return(this.isVertical() ?
|
||||
(this.track.offsetHeight != 0 ? this.track.offsetHeight :
|
||||
this.track.style.height.replace(/px$/,"")) - this.alignY :
|
||||
(this.track.offsetWidth != 0 ? this.track.offsetWidth :
|
||||
this.track.style.width.replace(/px$/,"")) - this.alignX);
|
||||
},
|
||||
isVertical: function(){
|
||||
return (this.axis == 'vertical');
|
||||
},
|
||||
drawSpans: function() {
|
||||
var slider = this;
|
||||
if (this.spans)
|
||||
$R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) });
|
||||
if (this.options.startSpan)
|
||||
this.setSpan(this.options.startSpan,
|
||||
$R(0, this.values.length>1 ? this.getRange(0).min() : this.value ));
|
||||
if (this.options.endSpan)
|
||||
this.setSpan(this.options.endSpan,
|
||||
$R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum));
|
||||
},
|
||||
setSpan: function(span, range) {
|
||||
if (this.isVertical()) {
|
||||
span.style.top = this.translateToPx(range.start);
|
||||
span.style.height = this.translateToPx(range.end - range.start + this.range.start);
|
||||
} else {
|
||||
span.style.left = this.translateToPx(range.start);
|
||||
span.style.width = this.translateToPx(range.end - range.start + this.range.start);
|
||||
}
|
||||
},
|
||||
updateStyles: function() {
|
||||
this.handles.each( function(h){ Element.removeClassName(h, 'selected') });
|
||||
Element.addClassName(this.activeHandle, 'selected');
|
||||
},
|
||||
startDrag: function(event) {
|
||||
if (Event.isLeftClick(event)) {
|
||||
if (!this.disabled){
|
||||
this.active = true;
|
||||
|
||||
var handle = Event.element(event);
|
||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||
var track = handle;
|
||||
if (track==this.track) {
|
||||
var offsets = this.track.cumulativeOffset();
|
||||
this.event = event;
|
||||
this.setValue(this.translateToValue(
|
||||
(this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
|
||||
));
|
||||
var offsets = this.activeHandle.cumulativeOffset();
|
||||
this.offsetX = (pointer[0] - offsets[0]);
|
||||
this.offsetY = (pointer[1] - offsets[1]);
|
||||
} else {
|
||||
// find the handle (prevents issues with Safari)
|
||||
while((this.handles.indexOf(handle) == -1) && handle.parentNode)
|
||||
handle = handle.parentNode;
|
||||
|
||||
if (this.handles.indexOf(handle)!=-1) {
|
||||
this.activeHandle = handle;
|
||||
this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
|
||||
this.updateStyles();
|
||||
|
||||
var offsets = this.activeHandle.cumulativeOffset();
|
||||
this.offsetX = (pointer[0] - offsets[0]);
|
||||
this.offsetY = (pointer[1] - offsets[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
Event.stop(event);
|
||||
}
|
||||
},
|
||||
update: function(event) {
|
||||
if (this.active) {
|
||||
if (!this.dragging) this.dragging = true;
|
||||
this.draw(event);
|
||||
if (Prototype.Browser.WebKit) window.scrollBy(0,0);
|
||||
Event.stop(event);
|
||||
}
|
||||
},
|
||||
draw: function(event) {
|
||||
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||
var offsets = this.track.cumulativeOffset();
|
||||
pointer[0] -= this.offsetX + offsets[0];
|
||||
pointer[1] -= this.offsetY + offsets[1];
|
||||
this.event = event;
|
||||
this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
|
||||
if (this.initialized && this.options.onSlide)
|
||||
this.options.onSlide(this.values.length>1 ? this.values : this.value, this);
|
||||
},
|
||||
endDrag: function(event) {
|
||||
if (this.active && this.dragging) {
|
||||
this.finishDrag(event, true);
|
||||
Event.stop(event);
|
||||
}
|
||||
this.active = false;
|
||||
this.dragging = false;
|
||||
},
|
||||
finishDrag: function(event, success) {
|
||||
this.active = false;
|
||||
this.dragging = false;
|
||||
this.updateFinished();
|
||||
},
|
||||
updateFinished: function() {
|
||||
if (this.initialized && this.options.onChange)
|
||||
this.options.onChange(this.values.length>1 ? this.values : this.value, this);
|
||||
this.event = null;
|
||||
}
|
||||
});
|
||||
59
javascript/scoluos/src/sound.js
Executable file
59
javascript/scoluos/src/sound.js
Executable file
@@ -0,0 +1,59 @@
|
||||
// script.aculo.us sound.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
|
||||
|
||||
// Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
//
|
||||
// Based on code created by Jules Gravinese (http://www.webveteran.com/)
|
||||
//
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
Sound = {
|
||||
tracks: {},
|
||||
_enabled: true,
|
||||
template:
|
||||
new Template('<embed style="height:0" id="sound_#{track}_#{id}" src="#{url}" loop="false" autostart="true" hidden="true"/>'),
|
||||
enable: function(){
|
||||
Sound._enabled = true;
|
||||
},
|
||||
disable: function(){
|
||||
Sound._enabled = false;
|
||||
},
|
||||
play: function(url){
|
||||
if(!Sound._enabled) return;
|
||||
var options = Object.extend({
|
||||
track: 'global', url: url, replace: false
|
||||
}, arguments[1] || {});
|
||||
|
||||
if(options.replace && this.tracks[options.track]) {
|
||||
$R(0, this.tracks[options.track].id).each(function(id){
|
||||
var sound = $('sound_'+options.track+'_'+id);
|
||||
sound.Stop && sound.Stop();
|
||||
sound.remove();
|
||||
});
|
||||
this.tracks[options.track] = null;
|
||||
}
|
||||
|
||||
if(!this.tracks[options.track])
|
||||
this.tracks[options.track] = { id: 0 };
|
||||
else
|
||||
this.tracks[options.track].id++;
|
||||
|
||||
options.id = this.tracks[options.track].id;
|
||||
$$('body')[0].insert(
|
||||
Prototype.Browser.IE ? new Element('bgsound',{
|
||||
id: 'sound_'+options.track+'_'+options.id,
|
||||
src: options.url, loop: 1, autostart: true
|
||||
}) : Sound.template.evaluate(options));
|
||||
}
|
||||
};
|
||||
|
||||
if(Prototype.Browser.Gecko && navigator.userAgent.indexOf("Win") > 0){
|
||||
if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('QuickTime') != -1 }))
|
||||
Sound.template = new Template('<object id="sound_#{track}_#{id}" width="0" height="0" type="audio/mpeg" data="#{url}"/>');
|
||||
else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('Windows Media') != -1 }))
|
||||
Sound.template = new Template('<object id="sound_#{track}_#{id}" type="application/x-mplayer2" data="#{url}"></object>');
|
||||
else if(navigator.plugins && $A(navigator.plugins).detect(function(p){ return p.name.indexOf('RealPlayer') != -1 }))
|
||||
Sound.template = new Template('<embed type="audio/x-pn-realaudio-plugin" style="height:0" id="sound_#{track}_#{id}" src="#{url}" loop="false" autostart="true" hidden="true"/>');
|
||||
else
|
||||
Sound.play = function(){};
|
||||
}
|
||||
568
javascript/scoluos/src/unittest.js
Executable file
568
javascript/scoluos/src/unittest.js
Executable file
@@ -0,0 +1,568 @@
|
||||
// script.aculo.us unittest.js v1.8.3, Thu Oct 08 11:23:33 +0200 2009
|
||||
|
||||
// Copyright (c) 2005-2009 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
// (c) 2005-2009 Jon Tirsen (http://www.tirsen.com)
|
||||
// (c) 2005-2009 Michael Schuerig (http://www.schuerig.de/michael/)
|
||||
//
|
||||
// script.aculo.us is freely distributable under the terms of an MIT-style license.
|
||||
// For details, see the script.aculo.us web site: http://script.aculo.us/
|
||||
|
||||
// experimental, Firefox-only
|
||||
Event.simulateMouse = function(element, eventName) {
|
||||
var options = Object.extend({
|
||||
pointerX: 0,
|
||||
pointerY: 0,
|
||||
buttons: 0,
|
||||
ctrlKey: false,
|
||||
altKey: false,
|
||||
shiftKey: false,
|
||||
metaKey: false
|
||||
}, arguments[2] || {});
|
||||
var oEvent = document.createEvent("MouseEvents");
|
||||
oEvent.initMouseEvent(eventName, true, true, document.defaultView,
|
||||
options.buttons, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
|
||||
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, 0, $(element));
|
||||
|
||||
if(this.mark) Element.remove(this.mark);
|
||||
this.mark = document.createElement('div');
|
||||
this.mark.appendChild(document.createTextNode(" "));
|
||||
document.body.appendChild(this.mark);
|
||||
this.mark.style.position = 'absolute';
|
||||
this.mark.style.top = options.pointerY + "px";
|
||||
this.mark.style.left = options.pointerX + "px";
|
||||
this.mark.style.width = "5px";
|
||||
this.mark.style.height = "5px;";
|
||||
this.mark.style.borderTop = "1px solid red;";
|
||||
this.mark.style.borderLeft = "1px solid red;";
|
||||
|
||||
if(this.step)
|
||||
alert('['+new Date().getTime().toString()+'] '+eventName+'/'+Test.Unit.inspect(options));
|
||||
|
||||
$(element).dispatchEvent(oEvent);
|
||||
};
|
||||
|
||||
// Note: Due to a fix in Firefox 1.0.5/6 that probably fixed "too much", this doesn't work in 1.0.6 or DP2.
|
||||
// You need to downgrade to 1.0.4 for now to get this working
|
||||
// See https://bugzilla.mozilla.org/show_bug.cgi?id=289940 for the fix that fixed too much
|
||||
Event.simulateKey = function(element, eventName) {
|
||||
var options = Object.extend({
|
||||
ctrlKey: false,
|
||||
altKey: false,
|
||||
shiftKey: false,
|
||||
metaKey: false,
|
||||
keyCode: 0,
|
||||
charCode: 0
|
||||
}, arguments[2] || {});
|
||||
|
||||
var oEvent = document.createEvent("KeyEvents");
|
||||
oEvent.initKeyEvent(eventName, true, true, window,
|
||||
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey,
|
||||
options.keyCode, options.charCode );
|
||||
$(element).dispatchEvent(oEvent);
|
||||
};
|
||||
|
||||
Event.simulateKeys = function(element, command) {
|
||||
for(var i=0; i<command.length; i++) {
|
||||
Event.simulateKey(element,'keypress',{charCode:command.charCodeAt(i)});
|
||||
}
|
||||
};
|
||||
|
||||
var Test = {};
|
||||
Test.Unit = {};
|
||||
|
||||
// security exception workaround
|
||||
Test.Unit.inspect = Object.inspect;
|
||||
|
||||
Test.Unit.Logger = Class.create();
|
||||
Test.Unit.Logger.prototype = {
|
||||
initialize: function(log) {
|
||||
this.log = $(log);
|
||||
if (this.log) {
|
||||
this._createLogTable();
|
||||
}
|
||||
},
|
||||
start: function(testName) {
|
||||
if (!this.log) return;
|
||||
this.testName = testName;
|
||||
this.lastLogLine = document.createElement('tr');
|
||||
this.statusCell = document.createElement('td');
|
||||
this.nameCell = document.createElement('td');
|
||||
this.nameCell.className = "nameCell";
|
||||
this.nameCell.appendChild(document.createTextNode(testName));
|
||||
this.messageCell = document.createElement('td');
|
||||
this.lastLogLine.appendChild(this.statusCell);
|
||||
this.lastLogLine.appendChild(this.nameCell);
|
||||
this.lastLogLine.appendChild(this.messageCell);
|
||||
this.loglines.appendChild(this.lastLogLine);
|
||||
},
|
||||
finish: function(status, summary) {
|
||||
if (!this.log) return;
|
||||
this.lastLogLine.className = status;
|
||||
this.statusCell.innerHTML = status;
|
||||
this.messageCell.innerHTML = this._toHTML(summary);
|
||||
this.addLinksToResults();
|
||||
},
|
||||
message: function(message) {
|
||||
if (!this.log) return;
|
||||
this.messageCell.innerHTML = this._toHTML(message);
|
||||
},
|
||||
summary: function(summary) {
|
||||
if (!this.log) return;
|
||||
this.logsummary.innerHTML = this._toHTML(summary);
|
||||
},
|
||||
_createLogTable: function() {
|
||||
this.log.innerHTML =
|
||||
'<div id="logsummary"></div>' +
|
||||
'<table id="logtable">' +
|
||||
'<thead><tr><th>Status</th><th>Test</th><th>Message</th></tr></thead>' +
|
||||
'<tbody id="loglines"></tbody>' +
|
||||
'</table>';
|
||||
this.logsummary = $('logsummary');
|
||||
this.loglines = $('loglines');
|
||||
},
|
||||
_toHTML: function(txt) {
|
||||
return txt.escapeHTML().replace(/\n/g,"<br/>");
|
||||
},
|
||||
addLinksToResults: function(){
|
||||
$$("tr.failed .nameCell").each( function(td){ // todo: limit to children of this.log
|
||||
td.title = "Run only this test";
|
||||
Event.observe(td, 'click', function(){ window.location.search = "?tests=" + td.innerHTML;});
|
||||
});
|
||||
$$("tr.passed .nameCell").each( function(td){ // todo: limit to children of this.log
|
||||
td.title = "Run all tests";
|
||||
Event.observe(td, 'click', function(){ window.location.search = "";});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Test.Unit.Runner = Class.create();
|
||||
Test.Unit.Runner.prototype = {
|
||||
initialize: function(testcases) {
|
||||
this.options = Object.extend({
|
||||
testLog: 'testlog'
|
||||
}, arguments[1] || {});
|
||||
this.options.resultsURL = this.parseResultsURLQueryParameter();
|
||||
this.options.tests = this.parseTestsQueryParameter();
|
||||
if (this.options.testLog) {
|
||||
this.options.testLog = $(this.options.testLog) || null;
|
||||
}
|
||||
if(this.options.tests) {
|
||||
this.tests = [];
|
||||
for(var i = 0; i < this.options.tests.length; i++) {
|
||||
if(/^test/.test(this.options.tests[i])) {
|
||||
this.tests.push(new Test.Unit.Testcase(this.options.tests[i], testcases[this.options.tests[i]], testcases["setup"], testcases["teardown"]));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.options.test) {
|
||||
this.tests = [new Test.Unit.Testcase(this.options.test, testcases[this.options.test], testcases["setup"], testcases["teardown"])];
|
||||
} else {
|
||||
this.tests = [];
|
||||
for(var testcase in testcases) {
|
||||
if(/^test/.test(testcase)) {
|
||||
this.tests.push(
|
||||
new Test.Unit.Testcase(
|
||||
this.options.context ? ' -> ' + this.options.titles[testcase] : testcase,
|
||||
testcases[testcase], testcases["setup"], testcases["teardown"]
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.currentTest = 0;
|
||||
this.logger = new Test.Unit.Logger(this.options.testLog);
|
||||
setTimeout(this.runTests.bind(this), 1000);
|
||||
},
|
||||
parseResultsURLQueryParameter: function() {
|
||||
return window.location.search.parseQuery()["resultsURL"];
|
||||
},
|
||||
parseTestsQueryParameter: function(){
|
||||
if (window.location.search.parseQuery()["tests"]){
|
||||
return window.location.search.parseQuery()["tests"].split(',');
|
||||
};
|
||||
},
|
||||
// Returns:
|
||||
// "ERROR" if there was an error,
|
||||
// "FAILURE" if there was a failure, or
|
||||
// "SUCCESS" if there was neither
|
||||
getResult: function() {
|
||||
var hasFailure = false;
|
||||
for(var i=0;i<this.tests.length;i++) {
|
||||
if (this.tests[i].errors > 0) {
|
||||
return "ERROR";
|
||||
}
|
||||
if (this.tests[i].failures > 0) {
|
||||
hasFailure = true;
|
||||
}
|
||||
}
|
||||
if (hasFailure) {
|
||||
return "FAILURE";
|
||||
} else {
|
||||
return "SUCCESS";
|
||||
}
|
||||
},
|
||||
postResults: function() {
|
||||
if (this.options.resultsURL) {
|
||||
new Ajax.Request(this.options.resultsURL,
|
||||
{ method: 'get', parameters: 'result=' + this.getResult(), asynchronous: false });
|
||||
}
|
||||
},
|
||||
runTests: function() {
|
||||
var test = this.tests[this.currentTest];
|
||||
if (!test) {
|
||||
// finished!
|
||||
this.postResults();
|
||||
this.logger.summary(this.summary());
|
||||
return;
|
||||
}
|
||||
if(!test.isWaiting) {
|
||||
this.logger.start(test.name);
|
||||
}
|
||||
test.run();
|
||||
if(test.isWaiting) {
|
||||
this.logger.message("Waiting for " + test.timeToWait + "ms");
|
||||
setTimeout(this.runTests.bind(this), test.timeToWait || 1000);
|
||||
} else {
|
||||
this.logger.finish(test.status(), test.summary());
|
||||
this.currentTest++;
|
||||
// tail recursive, hopefully the browser will skip the stackframe
|
||||
this.runTests();
|
||||
}
|
||||
},
|
||||
summary: function() {
|
||||
var assertions = 0;
|
||||
var failures = 0;
|
||||
var errors = 0;
|
||||
var messages = [];
|
||||
for(var i=0;i<this.tests.length;i++) {
|
||||
assertions += this.tests[i].assertions;
|
||||
failures += this.tests[i].failures;
|
||||
errors += this.tests[i].errors;
|
||||
}
|
||||
return (
|
||||
(this.options.context ? this.options.context + ': ': '') +
|
||||
this.tests.length + " tests, " +
|
||||
assertions + " assertions, " +
|
||||
failures + " failures, " +
|
||||
errors + " errors");
|
||||
}
|
||||
};
|
||||
|
||||
Test.Unit.Assertions = Class.create();
|
||||
Test.Unit.Assertions.prototype = {
|
||||
initialize: function() {
|
||||
this.assertions = 0;
|
||||
this.failures = 0;
|
||||
this.errors = 0;
|
||||
this.messages = [];
|
||||
},
|
||||
summary: function() {
|
||||
return (
|
||||
this.assertions + " assertions, " +
|
||||
this.failures + " failures, " +
|
||||
this.errors + " errors" + "\n" +
|
||||
this.messages.join("\n"));
|
||||
},
|
||||
pass: function() {
|
||||
this.assertions++;
|
||||
},
|
||||
fail: function(message) {
|
||||
this.failures++;
|
||||
this.messages.push("Failure: " + message);
|
||||
},
|
||||
info: function(message) {
|
||||
this.messages.push("Info: " + message);
|
||||
},
|
||||
error: function(error) {
|
||||
this.errors++;
|
||||
this.messages.push(error.name + ": "+ error.message + "(" + Test.Unit.inspect(error) +")");
|
||||
},
|
||||
status: function() {
|
||||
if (this.failures > 0) return 'failed';
|
||||
if (this.errors > 0) return 'error';
|
||||
return 'passed';
|
||||
},
|
||||
assert: function(expression) {
|
||||
var message = arguments[1] || 'assert: got "' + Test.Unit.inspect(expression) + '"';
|
||||
try { expression ? this.pass() :
|
||||
this.fail(message); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertEqual: function(expected, actual) {
|
||||
var message = arguments[2] || "assertEqual";
|
||||
try { (expected == actual) ? this.pass() :
|
||||
this.fail(message + ': expected "' + Test.Unit.inspect(expected) +
|
||||
'", actual "' + Test.Unit.inspect(actual) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertInspect: function(expected, actual) {
|
||||
var message = arguments[2] || "assertInspect";
|
||||
try { (expected == actual.inspect()) ? this.pass() :
|
||||
this.fail(message + ': expected "' + Test.Unit.inspect(expected) +
|
||||
'", actual "' + Test.Unit.inspect(actual) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertEnumEqual: function(expected, actual) {
|
||||
var message = arguments[2] || "assertEnumEqual";
|
||||
try { $A(expected).length == $A(actual).length &&
|
||||
expected.zip(actual).all(function(pair) { return pair[0] == pair[1] }) ?
|
||||
this.pass() : this.fail(message + ': expected ' + Test.Unit.inspect(expected) +
|
||||
', actual ' + Test.Unit.inspect(actual)); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertNotEqual: function(expected, actual) {
|
||||
var message = arguments[2] || "assertNotEqual";
|
||||
try { (expected != actual) ? this.pass() :
|
||||
this.fail(message + ': got "' + Test.Unit.inspect(actual) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertIdentical: function(expected, actual) {
|
||||
var message = arguments[2] || "assertIdentical";
|
||||
try { (expected === actual) ? this.pass() :
|
||||
this.fail(message + ': expected "' + Test.Unit.inspect(expected) +
|
||||
'", actual "' + Test.Unit.inspect(actual) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertNotIdentical: function(expected, actual) {
|
||||
var message = arguments[2] || "assertNotIdentical";
|
||||
try { !(expected === actual) ? this.pass() :
|
||||
this.fail(message + ': expected "' + Test.Unit.inspect(expected) +
|
||||
'", actual "' + Test.Unit.inspect(actual) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertNull: function(obj) {
|
||||
var message = arguments[1] || 'assertNull';
|
||||
try { (obj==null) ? this.pass() :
|
||||
this.fail(message + ': got "' + Test.Unit.inspect(obj) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertMatch: function(expected, actual) {
|
||||
var message = arguments[2] || 'assertMatch';
|
||||
var regex = new RegExp(expected);
|
||||
try { (regex.exec(actual)) ? this.pass() :
|
||||
this.fail(message + ' : regex: "' + Test.Unit.inspect(expected) + ' did not match: ' + Test.Unit.inspect(actual) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertHidden: function(element) {
|
||||
var message = arguments[1] || 'assertHidden';
|
||||
this.assertEqual("none", element.style.display, message);
|
||||
},
|
||||
assertNotNull: function(object) {
|
||||
var message = arguments[1] || 'assertNotNull';
|
||||
this.assert(object != null, message);
|
||||
},
|
||||
assertType: function(expected, actual) {
|
||||
var message = arguments[2] || 'assertType';
|
||||
try {
|
||||
(actual.constructor == expected) ? this.pass() :
|
||||
this.fail(message + ': expected "' + Test.Unit.inspect(expected) +
|
||||
'", actual "' + (actual.constructor) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertNotOfType: function(expected, actual) {
|
||||
var message = arguments[2] || 'assertNotOfType';
|
||||
try {
|
||||
(actual.constructor != expected) ? this.pass() :
|
||||
this.fail(message + ': expected "' + Test.Unit.inspect(expected) +
|
||||
'", actual "' + (actual.constructor) + '"'); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertInstanceOf: function(expected, actual) {
|
||||
var message = arguments[2] || 'assertInstanceOf';
|
||||
try {
|
||||
(actual instanceof expected) ? this.pass() :
|
||||
this.fail(message + ": object was not an instance of the expected type"); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertNotInstanceOf: function(expected, actual) {
|
||||
var message = arguments[2] || 'assertNotInstanceOf';
|
||||
try {
|
||||
!(actual instanceof expected) ? this.pass() :
|
||||
this.fail(message + ": object was an instance of the not expected type"); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertRespondsTo: function(method, obj) {
|
||||
var message = arguments[2] || 'assertRespondsTo';
|
||||
try {
|
||||
(obj[method] && typeof obj[method] == 'function') ? this.pass() :
|
||||
this.fail(message + ": object doesn't respond to [" + method + "]"); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertReturnsTrue: function(method, obj) {
|
||||
var message = arguments[2] || 'assertReturnsTrue';
|
||||
try {
|
||||
var m = obj[method];
|
||||
if(!m) m = obj['is'+method.charAt(0).toUpperCase()+method.slice(1)];
|
||||
m() ? this.pass() :
|
||||
this.fail(message + ": method returned false"); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertReturnsFalse: function(method, obj) {
|
||||
var message = arguments[2] || 'assertReturnsFalse';
|
||||
try {
|
||||
var m = obj[method];
|
||||
if(!m) m = obj['is'+method.charAt(0).toUpperCase()+method.slice(1)];
|
||||
!m() ? this.pass() :
|
||||
this.fail(message + ": method returned true"); }
|
||||
catch(e) { this.error(e); }
|
||||
},
|
||||
assertRaise: function(exceptionName, method) {
|
||||
var message = arguments[2] || 'assertRaise';
|
||||
try {
|
||||
method();
|
||||
this.fail(message + ": exception expected but none was raised"); }
|
||||
catch(e) {
|
||||
((exceptionName == null) || (e.name==exceptionName)) ? this.pass() : this.error(e);
|
||||
}
|
||||
},
|
||||
assertElementsMatch: function() {
|
||||
var expressions = $A(arguments), elements = $A(expressions.shift());
|
||||
if (elements.length != expressions.length) {
|
||||
this.fail('assertElementsMatch: size mismatch: ' + elements.length + ' elements, ' + expressions.length + ' expressions');
|
||||
return false;
|
||||
}
|
||||
elements.zip(expressions).all(function(pair, index) {
|
||||
var element = $(pair.first()), expression = pair.last();
|
||||
if (element.match(expression)) return true;
|
||||
this.fail('assertElementsMatch: (in index ' + index + ') expected ' + expression.inspect() + ' but got ' + element.inspect());
|
||||
}.bind(this)) && this.pass();
|
||||
},
|
||||
assertElementMatches: function(element, expression) {
|
||||
this.assertElementsMatch([element], expression);
|
||||
},
|
||||
benchmark: function(operation, iterations) {
|
||||
var startAt = new Date();
|
||||
(iterations || 1).times(operation);
|
||||
var timeTaken = ((new Date())-startAt);
|
||||
this.info((arguments[2] || 'Operation') + ' finished ' +
|
||||
iterations + ' iterations in ' + (timeTaken/1000)+'s' );
|
||||
return timeTaken;
|
||||
},
|
||||
_isVisible: function(element) {
|
||||
element = $(element);
|
||||
if(!element.parentNode) return true;
|
||||
this.assertNotNull(element);
|
||||
if(element.style && Element.getStyle(element, 'display') == 'none')
|
||||
return false;
|
||||
|
||||
return this._isVisible(element.parentNode);
|
||||
},
|
||||
assertNotVisible: function(element) {
|
||||
this.assert(!this._isVisible(element), Test.Unit.inspect(element) + " was not hidden and didn't have a hidden parent either. " + ("" || arguments[1]));
|
||||
},
|
||||
assertVisible: function(element) {
|
||||
this.assert(this._isVisible(element), Test.Unit.inspect(element) + " was not visible. " + ("" || arguments[1]));
|
||||
},
|
||||
benchmark: function(operation, iterations) {
|
||||
var startAt = new Date();
|
||||
(iterations || 1).times(operation);
|
||||
var timeTaken = ((new Date())-startAt);
|
||||
this.info((arguments[2] || 'Operation') + ' finished ' +
|
||||
iterations + ' iterations in ' + (timeTaken/1000)+'s' );
|
||||
return timeTaken;
|
||||
}
|
||||
};
|
||||
|
||||
Test.Unit.Testcase = Class.create();
|
||||
Object.extend(Object.extend(Test.Unit.Testcase.prototype, Test.Unit.Assertions.prototype), {
|
||||
initialize: function(name, test, setup, teardown) {
|
||||
Test.Unit.Assertions.prototype.initialize.bind(this)();
|
||||
this.name = name;
|
||||
|
||||
if(typeof test == 'string') {
|
||||
test = test.gsub(/(\.should[^\(]+\()/,'#{0}this,');
|
||||
test = test.gsub(/(\.should[^\(]+)\(this,\)/,'#{1}(this)');
|
||||
this.test = function() {
|
||||
eval('with(this){'+test+'}');
|
||||
}
|
||||
} else {
|
||||
this.test = test || function() {};
|
||||
}
|
||||
|
||||
this.setup = setup || function() {};
|
||||
this.teardown = teardown || function() {};
|
||||
this.isWaiting = false;
|
||||
this.timeToWait = 1000;
|
||||
},
|
||||
wait: function(time, nextPart) {
|
||||
this.isWaiting = true;
|
||||
this.test = nextPart;
|
||||
this.timeToWait = time;
|
||||
},
|
||||
run: function() {
|
||||
try {
|
||||
try {
|
||||
if (!this.isWaiting) this.setup.bind(this)();
|
||||
this.isWaiting = false;
|
||||
this.test.bind(this)();
|
||||
} finally {
|
||||
if(!this.isWaiting) {
|
||||
this.teardown.bind(this)();
|
||||
}
|
||||
}
|
||||
}
|
||||
catch(e) { this.error(e); }
|
||||
}
|
||||
});
|
||||
|
||||
// *EXPERIMENTAL* BDD-style testing to please non-technical folk
|
||||
// This draws many ideas from RSpec http://rspec.rubyforge.org/
|
||||
|
||||
Test.setupBDDExtensionMethods = function(){
|
||||
var METHODMAP = {
|
||||
shouldEqual: 'assertEqual',
|
||||
shouldNotEqual: 'assertNotEqual',
|
||||
shouldEqualEnum: 'assertEnumEqual',
|
||||
shouldBeA: 'assertType',
|
||||
shouldNotBeA: 'assertNotOfType',
|
||||
shouldBeAn: 'assertType',
|
||||
shouldNotBeAn: 'assertNotOfType',
|
||||
shouldBeNull: 'assertNull',
|
||||
shouldNotBeNull: 'assertNotNull',
|
||||
|
||||
shouldBe: 'assertReturnsTrue',
|
||||
shouldNotBe: 'assertReturnsFalse',
|
||||
shouldRespondTo: 'assertRespondsTo'
|
||||
};
|
||||
var makeAssertion = function(assertion, args, object) {
|
||||
this[assertion].apply(this,(args || []).concat([object]));
|
||||
};
|
||||
|
||||
Test.BDDMethods = {};
|
||||
$H(METHODMAP).each(function(pair) {
|
||||
Test.BDDMethods[pair.key] = function() {
|
||||
var args = $A(arguments);
|
||||
var scope = args.shift();
|
||||
makeAssertion.apply(scope, [pair.value, args, this]); };
|
||||
});
|
||||
|
||||
[Array.prototype, String.prototype, Number.prototype, Boolean.prototype].each(
|
||||
function(p){ Object.extend(p, Test.BDDMethods) }
|
||||
);
|
||||
};
|
||||
|
||||
Test.context = function(name, spec, log){
|
||||
Test.setupBDDExtensionMethods();
|
||||
|
||||
var compiledSpec = {};
|
||||
var titles = {};
|
||||
for(specName in spec) {
|
||||
switch(specName){
|
||||
case "setup":
|
||||
case "teardown":
|
||||
compiledSpec[specName] = spec[specName];
|
||||
break;
|
||||
default:
|
||||
var testName = 'test'+specName.gsub(/\s+/,'-').camelize();
|
||||
var body = spec[specName].toString().split('\n').slice(1);
|
||||
if(/^\{/.test(body[0])) body = body.slice(1);
|
||||
body.pop();
|
||||
body = body.map(function(statement){
|
||||
return statement.strip()
|
||||
});
|
||||
compiledSpec[testName] = body.join('\n');
|
||||
titles[testName] = specName;
|
||||
}
|
||||
}
|
||||
new Test.Unit.Runner(compiledSpec, { titles: titles, testLog: log || 'testlog', context: name });
|
||||
};
|
||||
1
javascript/scoluos/test/functional/_ajax_inplaceeditor_result.html
Executable file
1
javascript/scoluos/test/functional/_ajax_inplaceeditor_result.html
Executable file
@@ -0,0 +1 @@
|
||||
Server received: To be edited
|
||||
1
javascript/scoluos/test/functional/_ajax_inplaceeditor_text.html
Executable file
1
javascript/scoluos/test/functional/_ajax_inplaceeditor_text.html
Executable file
@@ -0,0 +1 @@
|
||||
Text from server
|
||||
9
javascript/scoluos/test/functional/_autocomplete_result.html
Executable file
9
javascript/scoluos/test/functional/_autocomplete_result.html
Executable file
@@ -0,0 +1,9 @@
|
||||
<ul>
|
||||
<li>test1<span class="selectme">selectme1</span></li><li><span class="selectme">selectme2</span>test2</li>
|
||||
<li>test3<span class="selectme">selectme3</span></li>
|
||||
<li><b>BOLD</b><span class="selectme">selectme4<b>boldinselectme</b></span></li>
|
||||
|
||||
<li><span class="informal">(GET ME NOT)</span>(GET <ME> INSTEAD)<span class="selectme">(forselectme!)</span></li>
|
||||
|
||||
<li><span class="selectme">Here we have <a href="_autocomplete_result.html">a link</a> which should work</span></li>
|
||||
</ul>
|
||||
3
javascript/scoluos/test/functional/_autocomplete_result_single.html
Executable file
3
javascript/scoluos/test/functional/_autocomplete_result_single.html
Executable file
@@ -0,0 +1,3 @@
|
||||
<ul>
|
||||
<li>test1<span class="selectme">selectme1</span></li>
|
||||
</ul>
|
||||
86
javascript/scoluos/test/functional/ajax_autocompleter2_test.html
Executable file
86
javascript/scoluos/test/functional/ajax_autocompleter2_test.html
Executable file
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Autocompleter functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
.selected { background-color: #888; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Autocompleter functional test file</h1>
|
||||
|
||||
|
||||
|
||||
This is an incremental Ajax autocompleter. Type something, then type a comma, than type more. This autocompleter features an indicator.<br/>
|
||||
<div id="ac1_indicator" style="display:none">NOW FETCHING RESULTS</div>
|
||||
Autocompleter ac1: <input type="text" id="ac1" autocomplete="off"/>
|
||||
<div id="ac1update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
|
||||
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Ajax.Autocompleter('ac1','ac1update','_autocomplete_result.html', {
|
||||
tokens: ',', indicator: 'ac1_indicator'
|
||||
} );
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<br/><br/>
|
||||
Non-incremental Ajax autocompleter.<br/>
|
||||
Autocompleter ac2: <input id="ac2" type="text" autocomplete="off"/>
|
||||
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
|
||||
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Ajax.Autocompleter('ac2','ac2update','_autocomplete_result.html');
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<br/><br/>
|
||||
Non-incremental Ajax autocompleter.<br/>
|
||||
Autocompleter ac3: <input id="ac3" type="text" autocomplete="off"/>
|
||||
<div id="ac3update" style="display:none;border:1px solid black;background-color:white;"></div>
|
||||
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Ajax.Autocompleter('ac3','ac3update','_autocomplete_result.html');
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
Local incremental array autocompleter ac4<br/> with full-search. Type 'Jac', hit enter a few <br/>times, type 'gne'.<br/> <textarea rows=5 cols=40 id="ac4" autocomplete="off"></textarea>
|
||||
<div id="ac4update" style="display:none;border:1px solid black;background-color:white;"></div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Autocompleter.Local('ac4','ac4update',
|
||||
new Array("John Jackson", "", "Jack Johnson", "", "Jane Agnews"), { tokens: new Array(',','\n'), fullSearch: true, partialSearch: true });
|
||||
// ]]>
|
||||
</script>
|
||||
<br/><br/>
|
||||
|
||||
Local incremental array autocompleter ac5<br/> with fixed height and scrollbar. Type 'Jac', hit enter a few <br/>times, type 'gne'.<br/> <input id="ac5" type="text" autocomplete="off"/>
|
||||
<div id="ac5update" style="display:none;border:1px solid black;background-color:white;height:50px;overflow:auto;"></div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Autocompleter.Local('ac5','ac5update',
|
||||
new Array("John Jackson", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews", "Jack Johnson", "Jane Agnews"), { tokens: new Array(',','\n'), fullSearch: true, partialSearch: true });
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
||||
<br /><br /><br />
|
||||
<br /><br /><br />
|
||||
<div id="debug" style="font-size:11px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
71
javascript/scoluos/test/functional/ajax_autocompleter_test.html
Executable file
71
javascript/scoluos/test/functional/ajax_autocompleter_test.html
Executable file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Autocompleter functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
.selected { background-color: #888; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Autocompleter functional test file</h1>
|
||||
|
||||
|
||||
Autocompleter ac1 (updated panel is relative, so no overlapping should occur): <input id="ac1" name="ac1" type="text"/>
|
||||
<div id="ac1update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Ajax.Autocompleter('ac1','ac1update','_autocomplete_result.html');
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<br/>
|
||||
|
||||
Autocompleter ac2 w/ parameters: <input id="ac2" type="text" name="ac2"/>
|
||||
<div id="ac2update" style="display:none;border:1px solid black;background-color:white;"></div>
|
||||
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Ajax.Autocompleter('ac2','ac2update','_autocomplete_result.html',{parameters:'a=b&b=c'});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<br/>
|
||||
|
||||
Autocompleter ac3 (nested in postion:relative div, selects "selectme" class):
|
||||
<br/>
|
||||
<div style="position:relative">
|
||||
<input id="ac3" type="text"/>
|
||||
<div id="ac3update" style="display:none;border:1px solid black;background-color:white;"></div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Ajax.Autocompleter('ac3','ac3update','_autocomplete_result.html',{select:'selectme'});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<br/><select><option>First Item</option><option>Second Item</option><option>Third Item</option></select>
|
||||
|
||||
<br/><br/>
|
||||
Autocompleter ac4 (autoselects option if single single option is returned):
|
||||
<br/>
|
||||
<input id="ac4" type="text"/>
|
||||
<div id="ac4update" style="display:none;border:1px solid black;background-color:white;"></div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Ajax.Autocompleter('ac4','ac4update','_autocomplete_result_single.html',{select:'selectme',autoSelect:true});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<div id="debug" style="font-size:11px;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
60
javascript/scoluos/test/functional/ajax_inplacecollectioneditor_test.html
Executable file
60
javascript/scoluos/test/functional/ajax_inplacecollectioneditor_test.html
Executable file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Demo</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
.inplaceeditor-saving { background: url(wait.gif) bottom right no-repeat; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Demo</h1>
|
||||
<p>
|
||||
Demo of the Ajax.InPlaceCollectionEditor.
|
||||
</p>
|
||||
|
||||
<p id="tobeedited">three</p> (should autoselect "three")
|
||||
<script>
|
||||
new Ajax.InPlaceCollectionEditor(
|
||||
'tobeedited', '_ajax_inplaceeditor_result.html', {
|
||||
collection: ['one','two','three'],
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<p id="tobeedited2">two</p> (should autoselect "two")
|
||||
<script>
|
||||
new Ajax.InPlaceCollectionEditor(
|
||||
'tobeedited2', '_ajax_inplaceeditor_result.html', {
|
||||
collection: [[0,'one'],[1,'two'],[2,'three']],
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
<p id="tobeedited3">three</p> (should manually select "one")
|
||||
<script>
|
||||
new Ajax.InPlaceCollectionEditor(
|
||||
'tobeedited3', '_ajax_inplaceeditor_result.html', {
|
||||
collection: [[0,'one'],[1,'two'],[2,'three']],
|
||||
value: 0,
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
<p id="tobeedited4">one</p> (should manually select "two")
|
||||
<script>
|
||||
new Ajax.InPlaceCollectionEditor(
|
||||
'tobeedited4', '_ajax_inplaceeditor_result.html', {
|
||||
collection: ['one','two','three'],
|
||||
value: 'two',
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
116
javascript/scoluos/test/functional/ajax_inplaceeditor_test.html
Executable file
116
javascript/scoluos/test/functional/ajax_inplaceeditor_test.html
Executable file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Demo</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
.inplaceeditor-saving { background: url(wait.gif) bottom right no-repeat; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Demo</h1>
|
||||
<p>
|
||||
Demo of the Ajax.InPlaceEditor.
|
||||
</p>
|
||||
|
||||
<h1 id="tobeedited">To be edited</h1>
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeedited'), '_ajax_inplaceeditor_result.html', {
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 id="tobeeditedblur">To be edited w/ blur</h1>
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeeditedblur'), '_ajax_inplaceeditor_result.html', {
|
||||
submitOnBlur: true, okButton: false, cancelLink: true,
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 id="tobeeditedoklink">To be edited w/ okLink and cancelButton</h1>
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeeditedoklink'),
|
||||
'_ajax_inplaceeditor_result.html', {
|
||||
okButton: false,
|
||||
okLink: true,
|
||||
cancelButton: true,
|
||||
cancelLink: false,
|
||||
textBeforeControls: ' ---> ',
|
||||
textBetweenControls: ' | ',
|
||||
textAfterControls: ' <--- ',
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1 id="tobeeditedoklinkonly">To be edited w/ okLink only </h1>
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeeditedoklinkonly'),
|
||||
'_ajax_inplaceeditor_result.html', {
|
||||
okButton: false,
|
||||
okLink: true,
|
||||
cancelButton: false,
|
||||
cancelLink: false,
|
||||
textBeforeControls: ' ---> ',
|
||||
textBetweenControls: ' | ', // will not be used, as one control only
|
||||
textAfterControls: ' <--- ',
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<span id="tobeedited2">With external edit control and custom parameter name</span> <a id="tobeedited2EditControl" href="#">edit</a>
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeedited2'), '_ajax_inplaceeditor_result.html', {
|
||||
externalControl: 'tobeedited2EditControl',
|
||||
paramName: 'foobar',
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><span id="tobeeditedTD">test</span></td>
|
||||
<td><a id="tobeeditedTDEditControl" href="#">edit</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeeditedTD'), '_ajax_inplaceeditor_result.html', {
|
||||
externalControl: 'tobeeditedTDEditControl'
|
||||
});
|
||||
</script>
|
||||
|
||||
<p id="tobeedited3">Multi row editor: Lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum</p>
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeedited3'), '_ajax_inplaceeditor_result.html', {
|
||||
rows:5,
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
</script>
|
||||
|
||||
<p id="tobeedited4">Loads text from server</p>
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeedited4'), '_ajax_inplaceeditor_result.html',
|
||||
{ajaxOptions: {method: 'get'}, //override so we can use a static for the result and to load the text
|
||||
loadTextURL: '_ajax_inplaceeditor_text.html'
|
||||
});
|
||||
</script>
|
||||
|
||||
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
|
||||
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
|
||||
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
|
||||
|
||||
<h1 id="tobeeditedFarDown">Editor very far down to test scrolling bug</h1>
|
||||
<script>
|
||||
new Ajax.InPlaceEditor($('tobeeditedFarDown'), '../unit/_ajax_inplaceeditor_result.html');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
85
javascript/scoluos/test/functional/dragdrop2_test.html
Executable file
85
javascript/scoluos/test/functional/dragdrop2_test.html
Executable file
@@ -0,0 +1,85 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Drag and drop functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
#thelist li { background: green; margin:5px; padding: 30px; }
|
||||
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Drag and drop functional test file</h1>
|
||||
|
||||
<h2>Draggables/Droppables</h2>
|
||||
|
||||
<div id="revertbox1" class="box1" style="z-index:1000;width:150px;height:150px;background:#bbf;">
|
||||
<span id="handle1">drag here</span><br/>
|
||||
<input type="checkbox" id="shouldrevert1"/> Revert?
|
||||
</div>
|
||||
|
||||
<div id="revertbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#bbf;">
|
||||
<span id="handle2">drag here</span><br/>
|
||||
<input type="checkbox" id="shouldrevert2"/> Revert?
|
||||
I've onStart, onDrag and onEnd events!<br/>
|
||||
<span id="event-info"></span>
|
||||
</div>
|
||||
|
||||
<div id="specialbox" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
|
||||
This box overrides the default endeffect
|
||||
</div>
|
||||
|
||||
<div id="specialbox2" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
|
||||
This box overrides the default starteffect
|
||||
</div>
|
||||
|
||||
<div id="specialbox3" class="box" style="z-index:1000;width:150px;height:150px;background:#fbb;">
|
||||
This box overrides the default end- and starteffects
|
||||
</div>
|
||||
|
||||
<div id="droptarget1" style="width:200px;height:200px;background-color:#eee;">accepts first box</div>
|
||||
<div id="droptarget2" style="width:200px;height:200px;background-color:#eee;">accepts second box</div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Draggable('revertbox1',{scroll:window,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
|
||||
new Draggable('revertbox2',{
|
||||
handle:'handle2',
|
||||
revert:function(element){return ($('shouldrevert2').checked)},
|
||||
onStart:function(){$('revertbox2').setStyle({backgroundColor:'#bfb'})},
|
||||
onDrag:function(){$('event-info').update('drag!')},
|
||||
onEnd:function(){alert('end!')}
|
||||
});
|
||||
|
||||
Droppables.add('droptarget1',{accept:['box1','otherstuff'],onDrop:function(){alert('drop!')}});
|
||||
Droppables.add('droptarget2',{accept:'box',onDrop:function(){alert('drop!')}});
|
||||
|
||||
|
||||
new Draggable('specialbox',{
|
||||
endeffect:function(){
|
||||
new Effect.Highlight('specialbox',{queue:'end'});
|
||||
}
|
||||
});
|
||||
new Draggable('specialbox2',{
|
||||
starteffect:function(){
|
||||
new Effect.Highlight('specialbox2',{queue:'end'});
|
||||
}
|
||||
});
|
||||
new Draggable('specialbox3',{
|
||||
starteffect:function(){
|
||||
new Effect.Highlight('specialbox3',{queue:'end'});
|
||||
},
|
||||
endeffect:function(){
|
||||
new Effect.Highlight('specialbox3',{queue:'end'});
|
||||
}
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
90
javascript/scoluos/test/functional/dragdrop3_test.html
Executable file
90
javascript/scoluos/test/functional/dragdrop3_test.html
Executable file
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Drag and drop functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
#thelist li { background: green; margin:5px; padding: 30px; }
|
||||
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Drag and drop functional test file</h1>
|
||||
|
||||
<h2>Draggables/Droppables</h2>
|
||||
|
||||
<div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container">
|
||||
|
||||
<ul id="thelist2" style="padding: 2px; background:red;">
|
||||
<li>Relatively here!</li>
|
||||
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<pre id="debug"></pre>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
|
||||
Position.includeScrollOffsets = true;
|
||||
Sortable.create('thelist2',{scroll:'scroll-container'});
|
||||
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
41
javascript/scoluos/test/functional/dragdrop4_test.html
Executable file
41
javascript/scoluos/test/functional/dragdrop4_test.html
Executable file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Drag and drop functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body style="background-color:#eee;">
|
||||
<div style="position:relative;margin-left:100px;top:40px;background-color:white;">
|
||||
(inside position:relative container)
|
||||
<h1>script.aculo.us Drag and drop functional test file</h1>
|
||||
|
||||
<h2>Draggables/Droppables</h2>
|
||||
|
||||
<div id="absolute_positioned_element" class="box1" style="width:150px;height:150px;background:#bbf;">
|
||||
<b>Ghosting effect</b>
|
||||
<input type="text" value="blah"/>
|
||||
<div id="hurradiegams">test!</div>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<a href="#" onclick="alert($('hurradiegams').innerHTML); return false;">alert contents of test div</a>
|
||||
|
||||
<div id="absolute_positioned_element2" class="box1" style="width:150px;height:150px;background:#bbf;">
|
||||
<span id="handle1">Ghost effect</span><br/>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
Position.includeScrollOffsets = true;
|
||||
|
||||
new Draggable('absolute_positioned_element',{ghosting: true});
|
||||
new Draggable('absolute_positioned_element2',{ghosting: true, revert:true});
|
||||
// ]]>
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
javascript/scoluos/test/functional/dragdrop5_test.html
Executable file
42
javascript/scoluos/test/functional/dragdrop5_test.html
Executable file
@@ -0,0 +1,42 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>script.aculo.us Drag and drop functional test file</title>
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<style>
|
||||
div.hoverclass123 {
|
||||
border:1px solid red;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
|
||||
<h1>script.aculo.us Drag and drop functional test file</h1>
|
||||
|
||||
<h2>w/o hoverclass</h2>
|
||||
|
||||
<div id="cart" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
|
||||
### DROP HERE ###
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">Droppables.add('cart', {onDrop:function(element,dropon){alert('w/o hoverclass, should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'cart\':' + dropon.id)}})</script>
|
||||
|
||||
<br/>
|
||||
|
||||
<img alt="Product2" id="product_id" src="icon.png" /> <-- drag this!
|
||||
|
||||
<script type="text/javascript">new Draggable('product_id', {revert:true})</script>
|
||||
|
||||
<h2>w/ hoverclass</h2>
|
||||
|
||||
|
||||
<div id="carth" class="cart" style="text-align:center;height:50px;padding:10px;background-color:#fba">
|
||||
### DROP HERE ###
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">Droppables.add('carth', {hoverclass:'hoverclass123',onDrop:function(element, dropon, event){alert('w/ hoverclass: should be \'product_id\':' + encodeURIComponent(element.id) + ', dropon should be \'carth\':' + dropon.id)}})</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
76
javascript/scoluos/test/functional/dragdrop6_test.html
Executable file
76
javascript/scoluos/test/functional/dragdrop6_test.html
Executable file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Drag and drop functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
div.box { background: green; width:100px; height:100px }
|
||||
div.box-container { background: yellow; width:200px; height:200px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Drag and drop functional test file</h1>
|
||||
|
||||
<h2>Draggables/Droppables</h2>
|
||||
|
||||
<div id="box-normal" class="box">
|
||||
Normal box
|
||||
</div>
|
||||
|
||||
<div id="box-grid-numeric" class="box">
|
||||
snap: 25
|
||||
</div>
|
||||
|
||||
<div id="box-grid-array" class="box">
|
||||
snap: [5,25]
|
||||
</div>
|
||||
|
||||
<div id="box-grid-procedural" class="box">
|
||||
snap: procedural (e.g. constrain to box)
|
||||
</div>
|
||||
|
||||
<div class="box-container">
|
||||
<div id="box-grid-procedural-gets-draggable" class="box">
|
||||
snap: procedural (e.g. constrain to parent element)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Draggable('box-normal',{snap:false,revert:true});
|
||||
new Draggable('box-grid-numeric',{snap:25,revert:true});
|
||||
new Draggable('box-grid-array',{snap:[5,25],revert:true});
|
||||
new Draggable('box-grid-procedural',{
|
||||
snap: function(x,y) {
|
||||
return[
|
||||
x<100 ? (x > 0 ? x : 0 ) : 100,
|
||||
y<50 ? (y > 0 ? y : 0) : 50];
|
||||
},
|
||||
revert:true
|
||||
});
|
||||
new Draggable('box-grid-procedural-gets-draggable',{
|
||||
snap: function(x,y,draggable) {
|
||||
function constrain(n, lower, upper) {
|
||||
if (n > upper) return upper;
|
||||
else if (n < lower) return lower;
|
||||
else return n;
|
||||
}
|
||||
|
||||
element_dimensions = Element.getDimensions(draggable.element);
|
||||
parent_dimensions = Element.getDimensions(draggable.element.parentNode);
|
||||
return[
|
||||
constrain(x, 0, parent_dimensions.width - element_dimensions.width),
|
||||
constrain(y, 0, parent_dimensions.height - element_dimensions.height)];
|
||||
},
|
||||
revert:true
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
211
javascript/scoluos/test/functional/dragdrop7_test.html
Executable file
211
javascript/scoluos/test/functional/dragdrop7_test.html
Executable file
@@ -0,0 +1,211 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title></title>
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
|
||||
Position.includeScrollOffsets = true;
|
||||
|
||||
Draggables.clear = function (event) {
|
||||
while (Draggables.drags.length) {
|
||||
var d = Draggables.drags.pop();
|
||||
var e = d.element;
|
||||
d.stopScrolling();
|
||||
d.destroy();
|
||||
d.element = null;
|
||||
if (e.parentNode) {e.parentNode.removeChild(e)};
|
||||
}
|
||||
}
|
||||
|
||||
function cleanup() { //try to remove circular references
|
||||
lis = document.getElementsByTagName("li");
|
||||
for (i = 0; i < lis.length; i++) {
|
||||
if (lis[i].longListItem) {lis[i].longListItem.destroy();}
|
||||
else if (lis[i].container) {lis[i].container.destroy();}
|
||||
}
|
||||
Draggables.clear();
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var li = $("masterList").getElementsByTagName('LI');
|
||||
for (var i = 0; i < li.length; i++) {
|
||||
//var d = new LongListItem(li[i]);
|
||||
//li[i].onmousedown = d.onMouseDown.bindAsEventListener(d);
|
||||
var d = new Draggable(li[i],
|
||||
{revert: true,
|
||||
ghosting: false,
|
||||
scroll: "rightContainers"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var divs = $("rightContainers").getElementsByTagName("div");
|
||||
for (i = 0; i < divs.length; i++) {
|
||||
if (divs[i].className && Element.hasClassName(divs[i], "container")) {
|
||||
Droppables.add(divs[i].id, {hoverclass: "hover", scrollingParent: "rightContainers"});
|
||||
}
|
||||
}
|
||||
Event.observe(window, 'unload', cleanup, false);
|
||||
}
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
margin:0; padding: 0;
|
||||
height: 100% !important;
|
||||
}
|
||||
body {
|
||||
position:relative;
|
||||
color: black;
|
||||
background-color: white;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: small;
|
||||
}
|
||||
h1 {font-size:115%;}
|
||||
h2 {font-size: 110%;}
|
||||
h3 {font-size: 105%;}
|
||||
div, p, li, td {
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
font-size: small;
|
||||
}
|
||||
p {margin: 0 0 .7em 0; padding:0;}
|
||||
ul {
|
||||
position:relative;
|
||||
list-style: none;
|
||||
margin:0; padding:0;
|
||||
overflow: visible;
|
||||
}
|
||||
li {position:relative;}
|
||||
|
||||
.instructions {font-style:italic;}
|
||||
#leftDiv {
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0;
|
||||
width: 30%;
|
||||
margin: 0; padding: 7px;
|
||||
border-right: 2px solid #bb9;
|
||||
background-color: #eed;
|
||||
}
|
||||
|
||||
#leftDiv li, #rightContainers div.container li {
|
||||
margin: 3px 0; padding: 3px 3em 3px 10px;
|
||||
border: 2px solid #456;
|
||||
background-color: #cde;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#rightContainers {
|
||||
padding: .5em;
|
||||
position: absolute;
|
||||
top: 0; bottom: 0; right: 0; left: 35%;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
#rightContainers div.container{
|
||||
background-color: #bb9;
|
||||
margin: 0 0 40px 0; padding: 0 0 1px 0;
|
||||
border: 2px solid #775;
|
||||
}
|
||||
|
||||
#rightContainers div.container h2{
|
||||
margin:0; padding: 2px 1em 0 1em;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#rightContainers div.container ul {
|
||||
margin: 5px; padding: 0 3px;
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#rightContainers div.container ul.empty {
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
#rightContainers div.hover {
|
||||
background-color: #eed;
|
||||
}
|
||||
</style>
|
||||
<!--[if IE]><style type="text/css">
|
||||
#leftDiv {
|
||||
height: expression((document.body.clientHeight - 44) + "px");
|
||||
}
|
||||
#leftDiv ul{width:93%;}
|
||||
#leftDiv li div.count {
|
||||
right:4px;
|
||||
top:4px;
|
||||
}
|
||||
#rightContainers li a.remove {
|
||||
display:block;
|
||||
float:none;
|
||||
position:absolute;
|
||||
top: 4px;
|
||||
right: 1.6em;
|
||||
margin:0; padding:0 .2em;
|
||||
}
|
||||
</style><![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="leftDiv" class="">
|
||||
<form id="frmContinue" action="#" method="post">
|
||||
<p class="instructions">Shrink your window until the right-hand pane is scrollable.</p>
|
||||
<p class="instructions">Drag from the list on left to groups on the right, force the right-hand pane to scroll.</p>
|
||||
<input name="data" type="hidden" value=" ">
|
||||
</form>
|
||||
<ul id="masterList">
|
||||
<li id="drag1">One</li>
|
||||
<li id="drag2">Two</li>
|
||||
<li id="drag3">Three</li>
|
||||
<li id="drag4">Four</li>
|
||||
<li id="drag5">Five</li>
|
||||
<li id="drag6">Six</li>
|
||||
<li id="drag7">Seven</li>
|
||||
<li id="drag8">Eight</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="rightContainers" class="">
|
||||
</form>
|
||||
<div id="grp1" class="container">
|
||||
<h2><span id="grp1_name">Group 1</span></h2>
|
||||
<ul id="grp1ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp2" class="container">
|
||||
<h2><span id="grp2_name">Group 2</span></h2>
|
||||
<ul id="grp2ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp3" class="container">
|
||||
<h2><span id="grp3_name">Group 3</span></h2>
|
||||
<ul id="grp3ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp4" class="container">
|
||||
<h2><span id="grp4_name">Group 4</span></h2>
|
||||
<ul id="grp4ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp5" class="container">
|
||||
<h2><span id="grp5_name">Group 5</span></h2>
|
||||
<ul id="grp5ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp6" class="container">
|
||||
<h2><span id="grp6_name">Group 6</span></h2>
|
||||
<ul id="grp6ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp7" class="container">
|
||||
<h2><span id="grp7_name">Group 7</span></h2>
|
||||
<ul id="grp7ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp8" class="container">
|
||||
<h2><span id="grp8_name">Group 8</span></h2>
|
||||
<ul id="grp8ul" class="empty"></ul>
|
||||
</div>
|
||||
<div id="grp9" class="container">
|
||||
<h2><span id="grp9_name">Group 9</span></h2>
|
||||
<ul id="grp9ul" class="empty"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
142
javascript/scoluos/test/functional/dragdrop8_test.html
Executable file
142
javascript/scoluos/test/functional/dragdrop8_test.html
Executable file
@@ -0,0 +1,142 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Drag & Drop</title>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
td
|
||||
{
|
||||
width: 10em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table.mytable {
|
||||
list-style-type: none;
|
||||
padding: 4px 4px 0 4px;
|
||||
margin: 0px;
|
||||
font-size: 13px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
table.mytable tr {
|
||||
margin-bottom: 4px;
|
||||
padding: 2px 2px;
|
||||
border: 1px solid #c00;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
div.draggable {
|
||||
cursor:move;
|
||||
padding:2px;
|
||||
background-color: #BBCCDD;
|
||||
}
|
||||
|
||||
div.dropsite {
|
||||
padding:2px;
|
||||
background-color: #DDBB99;
|
||||
}
|
||||
|
||||
div.hoverclass123
|
||||
{
|
||||
border:1px solid red;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script language="JavaScript" type="text/javascript" src="../../lib/prototype.js"></script>
|
||||
<script language="JavaScript" type="text/javascript" src="../../src/scriptaculous.js"></script>
|
||||
<script language="JavaScript" type="text/javascript">
|
||||
|
||||
Position.includeScrollOffsets = true;
|
||||
|
||||
window.onload = function()
|
||||
{
|
||||
var t1 = document.getElementById("t1");
|
||||
add_divs(t1, 'td', 'draggable');
|
||||
var trs = t1.getElementsByTagName("tr");
|
||||
for (var i = 0; i < trs.length; i++)
|
||||
{
|
||||
var divs = document.getElementsByClassName("draggable", trs[i]);
|
||||
var drag_text = divs[2].innerHTML;
|
||||
for (var j = 0; j < divs.length; ++j)
|
||||
{
|
||||
new Draggable(divs[j], {ghosting:true, revert:true});
|
||||
}
|
||||
}
|
||||
|
||||
var t2 = document.getElementById("t2");
|
||||
add_divs(t2, 'td', 'dropsite');
|
||||
var divs = document.getElementsByClassName("dropsite", t2);
|
||||
for (var j = 0; j < divs.length; ++j)
|
||||
{
|
||||
Droppables.add(divs[j], {accept:'draggable',
|
||||
hoverclass:'hoverclass123',
|
||||
onDrop:function(element, dropon, event)
|
||||
{ debug("dropped " + element.innerHTML + " on "
|
||||
+ dropon.innerHTML + "\n")}});
|
||||
}
|
||||
};
|
||||
|
||||
function debug(text)
|
||||
{
|
||||
document.getElementById('debug').innerHTML
|
||||
= "<pre>" + text + "</pre>";
|
||||
}
|
||||
|
||||
function add_divs(table, tag, classname)
|
||||
{
|
||||
var items = table.getElementsByTagName(tag);
|
||||
for (var i = 0; i < items.length; i++)
|
||||
items[i].innerHTML =
|
||||
"<div class='" + classname + "'>" + items[i].innerHTML + "</div>";
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Drag from this table:</p>
|
||||
<DIV STYLE="padding-left: 50pt;">
|
||||
<DIV STYLE="overflow: auto; width: 250; height: 100;
|
||||
border: 1px gray solid;
|
||||
padding:0px; margin: 0px;">
|
||||
<table id="t1" class="sortable mytable">
|
||||
<tr><td>one</td><td>1</td><td>uno</td></tr>
|
||||
<tr><td>two</td><td>2</td><td>dos</td></tr>
|
||||
<tr><td>three</td><td>3</td><td>tres</td></tr>
|
||||
<tr><td>four</td><td>4</td><td>quatro</td></tr>
|
||||
<tr><td>five</td><td>5</td><td>cinco</td></tr>
|
||||
<tr><td>six</td><td>6</td><td>seis</td></tr>
|
||||
<tr><td>seven</td><td>7</td><td>siete</td></tr>
|
||||
<tr><td>eight</td><td>8</td><td>ocho</td></tr>
|
||||
<tr><td>nine</td><td>9</td><td>nueve</td></tr>
|
||||
<tr><td>ten</td><td>10</td><td>diez</td></tr>
|
||||
</table>
|
||||
</DIV>
|
||||
</DIV>
|
||||
<p>
|
||||
<p>Drop on this table:</p>
|
||||
<DIV STYLE="padding-left: 50pt;">
|
||||
<DIV STYLE="overflow: auto; width: 250; height: 100;
|
||||
border: 1px gray solid;
|
||||
padding:0px; margin: 0px;">
|
||||
<table id="t2" class="sortable mytable">
|
||||
<tr><td>eleven</td><td>11</td><td>once</td></tr>
|
||||
<tr><td>twelve</td><td>12</td><td>doce</td></tr>
|
||||
<tr><td>thirteen</td><td>13</td><td>trece</td></tr>
|
||||
<tr><td>fourteen</td><td>14</td><td>catorce</td></tr>
|
||||
<tr><td>fifteen</td><td>15</td><td>quince</td></tr>
|
||||
<tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr>
|
||||
<tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr>
|
||||
<tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr>
|
||||
<tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr>
|
||||
<tr><td>twenty</td><td>20</td><td>veinte</td></tr>
|
||||
</table>
|
||||
</DIV>
|
||||
</DIV>
|
||||
<p>
|
||||
<div id="debug"></div>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
47
javascript/scoluos/test/functional/dragdrop9_test.html
Executable file
47
javascript/scoluos/test/functional/dragdrop9_test.html
Executable file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title></title>
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="source" style="height: 100px; width: 100px; background-color: gray;">
|
||||
Draggable
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
new Draggable("source", {
|
||||
revert:"failure",
|
||||
onDropped: function(element){ $(element).update('I WAS DROPPED!') },
|
||||
reverteffect: function(element, top_offset, left_offset) {
|
||||
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
|
||||
new Effect.Move(element, {
|
||||
x: -left_offset, y: -top_offset, duration: dur,
|
||||
transition: Effect.Transitions.spring,
|
||||
queue: {scope:'_draggable', position:'end'}
|
||||
});
|
||||
}
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<br/>
|
||||
|
||||
<div id="target" style="height: 100px; width: 100px; background-color: green;">
|
||||
Good Target
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
Droppables.add("target", {
|
||||
onDrop:function(element){ Effect.Puff($('source')); }
|
||||
});
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<br/>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
84
javascript/scoluos/test/functional/dragdrop_delay_test.html
Executable file
84
javascript/scoluos/test/functional/dragdrop_delay_test.html
Executable file
@@ -0,0 +1,84 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>script.aculo.us functional test</title>
|
||||
<script type="text/javascript" src="../../lib/prototype.js"></script>
|
||||
<script type="text/javascript" src="../../src/effects.js"></script>
|
||||
<script type="text/javascript" src="../../src/dragdrop.js"></script>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
var myStartEffect = function(element) {
|
||||
element._opacity = Element.getOpacity(element);
|
||||
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
|
||||
new Effect.Highlight(element, {});
|
||||
}
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
/*<![CDATA[*/
|
||||
h1 {font-size: 1.2em; text-align:center;}
|
||||
li {
|
||||
margin: 5px auto;
|
||||
padding: 2px;
|
||||
width: 200px;
|
||||
text-align:center;
|
||||
list-style-type:none;
|
||||
border: 2px solid #779;
|
||||
background-color: #dde
|
||||
}
|
||||
div {
|
||||
margin: 5px auto;
|
||||
padding: 2px;
|
||||
width: 300px;
|
||||
text-align:center;
|
||||
border: 2px solid #797;
|
||||
background-color: #ded
|
||||
}
|
||||
/*]]>*/
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>No delay sortable</h1>
|
||||
|
||||
<ul id="sort1">
|
||||
<li id="s1_1">one</li>
|
||||
|
||||
<li id="s1_2">two</li>
|
||||
|
||||
<li id="s1_3">three</li>
|
||||
</ul>
|
||||
|
||||
<h1>Delayed sortable (500 ms)</h1>
|
||||
|
||||
<ul id="sort2">
|
||||
<li id="s2_1">one</li>
|
||||
|
||||
<li id="s2_2">two</li>
|
||||
|
||||
<li id="s2_3">three</li>
|
||||
</ul>
|
||||
|
||||
<h1>No delay draggable</h1>
|
||||
|
||||
<div id="drag1">
|
||||
Lorem ipsum
|
||||
</div>
|
||||
|
||||
<h1>Delayed draggable (1000 ms)</h1>
|
||||
|
||||
<div id="drag2">
|
||||
Lorem ipsum
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
Sortable.create('sort1', {starteffect: myStartEffect});
|
||||
Sortable.create('sort2', {starteffect:myStartEffect, delay:500});
|
||||
new Draggable('drag1', {starteffect:myStartEffect});
|
||||
new Draggable('drag2', {starteffect:myStartEffect, delay:1000});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
120
javascript/scoluos/test/functional/dragdrop_test.html
Executable file
120
javascript/scoluos/test/functional/dragdrop_test.html
Executable file
@@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Drag and drop functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
#thelist li { background: green; margin:5px; padding: 30px; }
|
||||
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
|
||||
#revertbox2 { position:absolute;top:40px;left:50px;z-index:1000;width:150px;height:150px;background:#bbf; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Drag and drop functional test file</h1>
|
||||
|
||||
<h2>Draggables/Droppables</h2>
|
||||
|
||||
<a href="#" onclick="alert($H(Sortable.sortables).inspect());return false">inspect sortables</a>
|
||||
|
||||
<div id="revertbox1" class="box1" style="opacity:0.5;z-index:1000;width:150px;height:150px;background:#bfb;">
|
||||
<span class="handle1">drag here</span>
|
||||
<span class="handle1">(but not here)</span><br/>
|
||||
<input type="checkbox" id="shouldrevert1"/> Revert?
|
||||
</div>
|
||||
|
||||
<div id="revertbox2" class="box">
|
||||
<span id="handle2">drag here</span><br/>
|
||||
<input type="checkbox" id="shouldrevert2"/> Revert?
|
||||
</div>
|
||||
|
||||
<div id="xxxx">testtest</div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Draggable('revertbox1',{scroll:window,zindex:-5,handle:'handle1',revert:function(element){return ($('shouldrevert1').checked)}});
|
||||
new Draggable('revertbox2',{scroll:window,handle:'handle2',revert:function(element){return ($('shouldrevert2').checked)}});
|
||||
Droppables.add('xxxx',{accept:['box1','box2'],onDrop:function(){alert('drop!')}});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<ul id="thelist" style="padding: 10px; position: absolute; top:20px; left:200px;z-index:1000;">
|
||||
<li id="thelist_4">Hey there! I'm absolutely positioned</li>
|
||||
<li id="thelist_1">one<br/><form id="form1"><input type="checkbox" onclick="this.checked = !this.checked" value="x" name="x" id="xyz"/><input type="text" id="xxx"></input></form></li>
|
||||
<li id="thelist_2">two<br/><form id="form2"><input type="text" id="xyx"></input></form></li>
|
||||
<li id="thelist_3">three<br/><form id="form3"><input type="text" id="xu3"></input></form></li>
|
||||
</ul>
|
||||
|
||||
<ul id="thelist2" style="padding: 2px; background:red;">
|
||||
<li>Relatively here!</li>
|
||||
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
|
||||
Sortable.create('thelist');
|
||||
Sortable.create('thelist2');
|
||||
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
javascript/scoluos/test/functional/dropmarker.png
Executable file
BIN
javascript/scoluos/test/functional/dropmarker.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 213 B |
35
javascript/scoluos/test/functional/effect_direct_test.html
Executable file
35
javascript/scoluos/test/functional/effect_direct_test.html
Executable file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#d1 { background-color: #888; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('highlight',{duration:1.5}) }); return false;">Highlight</a> |
|
||||
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('blind_up','d1',{duration:1.5}) }); return false;">BlindUp</a> |
|
||||
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('blind_down',{duration:1.5}) }); return false;">BlindDown</a> |
|
||||
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('slide_up',{duration:1.5}) }); return false;">SlideUp</a> |
|
||||
<a href="#" onclick="$$('div.d').each( function(e) { e.visualEffect('slide_down',{duration:1.5}) }); return false;">SlideDown</a>
|
||||
|
||||
<div class="d"><div style="overflow:hidden">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
|
||||
</div></div>
|
||||
|
||||
<div class="d"><div style="overflow:hidden">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
|
||||
</div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
65
javascript/scoluos/test/functional/effect_puff_test.html
Executable file
65
javascript/scoluos/test/functional/effect_puff_test.html
Executable file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
Position.includeScrollOffsets = true;
|
||||
</script>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<h2>Effect.Puff</h2>
|
||||
|
||||
<div id="p1" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
|
||||
click to test puff, no position set
|
||||
</div>
|
||||
|
||||
<div id="p2" style="float:right;width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
|
||||
click to test puff, floats
|
||||
</div>
|
||||
|
||||
<div id="p3" style="position:absolute;left:200px;top:100px;width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
|
||||
click to test puff, absolute position set
|
||||
</div>
|
||||
|
||||
<h3>Floating inside a container</h3>
|
||||
|
||||
<div style="width:300px;height:300px;border:1px solid red">
|
||||
<div style="float:left;width:100px;height:100px;background-color:#888;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:100px;background-color:#999;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:100px;background-color:#aaa;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:100px;background-color:#bbb;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:100px;background-color:#ccc;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:100px;background-color:#ddd;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:100px;background-color:#eee;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:100px;background-color:#777;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
<div style="float:left;width:100px;height:100px;background-color:#666;" onclick="Effect.Puff(this)">
|
||||
click to puff
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
29
javascript/scoluos/test/functional/effect_scale_test.html
Executable file
29
javascript/scoluos/test/functional/effect_scale_test.html
Executable file
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#scaleable { background-color: #888; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: true, scaleY: false }); return false;">Scale X only</a> |
|
||||
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: false, scaleY: true }); return false;">Scale Y only</a> |
|
||||
<a href="#" onclick="new Effect.Scale( 'scaleable', 20,{ scaleX: true, scaleY: true }); return false;">Scale X and Y</a>
|
||||
|
||||
<div id="scaleable">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
55
javascript/scoluos/test/functional/effect_shake.html
Executable file
55
javascript/scoluos/test/functional/effect_shake.html
Executable file
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<body>
|
||||
<h1>script.aculo.us Effect.shake functional test file</h1>
|
||||
|
||||
<h2>Effect.Shake</h2>
|
||||
|
||||
<div id="debug"> </div>
|
||||
|
||||
|
||||
<a href="#" onclick="new Effect.Shake(this); return false;">shake</a><br/>
|
||||
<a href="#" onclick="new Effect.Shake(this, {distance:2}); return false;">shake 2</a><br/>
|
||||
<a href="#" onclick="new Effect.Shake(this, {distance:30}); return false;">shake 30</a><br/>
|
||||
<a href="#" onclick="new Effect.Shake(this, {distance:60}); return false;">shake 60</a><br/>
|
||||
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#shake10, #shake20, #shake30 { margin-left: 50px; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
<a href="#" onclick="shake_these();return false;">shake these</a><br/>
|
||||
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
function shake_these(){
|
||||
new Effect.Shake("shake10", {distance:10});
|
||||
new Effect.Shake("shake20", {distance:20});
|
||||
new Effect.Shake("shake30", {distance:30});
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
||||
<div id="shake10">shake 10</div>
|
||||
<div id="shake20">shake 20</div>
|
||||
<div id="shake30">shake 30</div>
|
||||
|
||||
<a href="#" onclick="new Effect.Shake(this, {duration:2.0}); return false;">shake slow</a><br/>
|
||||
<a href="#" onclick="new Effect.Shake(this, {duration:0.2}); return false;">shake fast</a><br/>
|
||||
|
||||
<a href="#" onclick="new Effect.Shake(this, {distance:2, duration:2.0}); return false;">shake 2 slow</a><br/>
|
||||
<a href="#" onclick="new Effect.Shake(this, {distance:60, duration:0.2}); return false;">shake 60 fast</a><br/>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
63
javascript/scoluos/test/functional/effects2_test.html
Executable file
63
javascript/scoluos/test/functional/effects2_test.html
Executable file
@@ -0,0 +1,63 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||||
<title>Untitled Document</title>
|
||||
<style type="text/css">
|
||||
#menu {
|
||||
width: 300px;
|
||||
border: 1px #000 solid;
|
||||
}
|
||||
.menu_header {
|
||||
background-color: #00CC99;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.menu_block {
|
||||
background-color: #006699;
|
||||
color: #FFFFFF;
|
||||
overflow:hidden;
|
||||
}
|
||||
.menu_block div {
|
||||
}
|
||||
.close_block {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="menu">
|
||||
<div class="menu_header" id="menu_header1"><a href="#" onClick="new Effect.SlideDown('menu_block1'); return false;">HEADER 1</a></div>
|
||||
<div class="menu_block_container" id="menu_block_container1">
|
||||
<div class="menu_block" id="menu_block1"><div>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
<a href="#" class="close_block" onClick="new Effect.SlideUp('menu_block1'); return false;">close</a></div></div>
|
||||
</div>
|
||||
<div class="menu_header" id="menu_header2"><a href="#" onClick="new Effect.SlideDown('menu_block2'); return false;">HEADER 2</a></div>
|
||||
<div class="menu_block_container" id="menu_block_container2">
|
||||
<div class="menu_block" id="menu_block2"><div>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
text<br>
|
||||
<a href="#" class="close_block" onClick="new Effect.SlideUp('menu_block2'); return false;">close</a></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
javascript/scoluos/test/functional/effects3_test.html
Executable file
36
javascript/scoluos/test/functional/effects3_test.html
Executable file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<h2>Effect.SlideDown/Effect.SlideUp</h2>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
var effect_1 = null;
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<a href="#" onclick="effect_1 = Effect.SlideDown('d1',{duration:1.0}); return false;">Start slide down</a> |
|
||||
<a href="#" onclick="effect_1 = Effect.SlideUp('d1',{duration:1.0}); return false;">Start slide up</a> |
|
||||
<a href="#" onclick="effect_1.cancel(); return false;">cancel()</a> |
|
||||
<a href="#" onclick="alert(Object.inspect($('d1').firstChild.style)); return false;">inspect()</a> |
|
||||
<a href="#" onclick="$('d1').firstChild.innerHTML += $('d1').firstChild.innerHTML; return false;">add content</a>
|
||||
|
||||
<div id="d1" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
|
||||
</p>
|
||||
</div></div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
31
javascript/scoluos/test/functional/effects4_test.html
Executable file
31
javascript/scoluos/test/functional/effects4_test.html
Executable file
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#d1 { background-color: #888; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<a href="#" onclick="new Effect.Highlight('d1',{duration:1.5}); return false;">Highlight</a> |
|
||||
<a href="#" onclick="new Effect.BlindUp('d1',{duration:1.5}); return false;">BlindUp</a> |
|
||||
<a href="#" onclick="new Effect.BlindDown('d1',{duration:1.5}); return false;">BlindDown</a> |
|
||||
<a href="#" onclick="new Effect.SlideUp('d1',{duration:1.5}); return false;">SlideUp</a> |
|
||||
<a href="#" onclick="new Effect.SlideDown('d1',{duration:1.5}); return false;">SlideDown</a>
|
||||
|
||||
<div id="d1"><div style="overflow:hidden">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien sollicitudin ultricies. Aliquam hendrerit orci et odio. Suspendisse volutpat wisi at sem. Integer eget nulla. Duis eu diam a nunc condimentum tempus. Praesent gravida metus vitae massa. Aliquam neque magna, fringilla eu, porta id, interdum sit amet, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin lorem est, ultrices sit amet, condimentum vitae, vehicula a, massa.
|
||||
</div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
483
javascript/scoluos/test/functional/effects5_test.html
Executable file
483
javascript/scoluos/test/functional/effects5_test.html
Executable file
@@ -0,0 +1,483 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us ScrollTo effect functional test</h1>
|
||||
|
||||
<a href="#" onclick="new Effect.ScrollTo('down-below',{duration:5.0}); return false;">scroll (slow-mo) down-below...</a>,
|
||||
<a href="#" onclick="new Effect.ScrollTo('last-heading'); return false;">scroll last-heading</a>
|
||||
|
||||
<h2 id="first-heading"><b>first-heading</b>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="down-below"><b>DOWN BELOW</b>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<a href="#" onclick="new Effect.ScrollTo('first-heading'); return false;">scroll...</a>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2>Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
<h2 id="last-heading">Heading 2</h2>
|
||||
<ul>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
<li>item</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
javascript/scoluos/test/functional/effects5b_test.html
Executable file
39
javascript/scoluos/test/functional/effects5b_test.html
Executable file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div style="height: 200px;"> </div>
|
||||
|
||||
<h1>script.aculo.us ScrollTo effect (with floats) functional test</h1>
|
||||
|
||||
(this test only applies to Firefox)
|
||||
|
||||
<div style="float: right; padding: 10px; background: #ccc; height: 1900px;">
|
||||
|
||||
<h2>top of float</h2>
|
||||
|
||||
<a href="#" onclick="new Effect.ScrollTo('bottom-of-float');return false;">scroll to bottom!</a>
|
||||
|
||||
<div style="height: 1500px;"> </div>
|
||||
|
||||
<h2 id="bottom-of-float">Bottom of Float</h2>
|
||||
|
||||
w00t
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
window.scrollBy(0, 200);
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
61
javascript/scoluos/test/functional/effects6_test.html
Executable file
61
javascript/scoluos/test/functional/effects6_test.html
Executable file
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Fade/Appear effect functional test</h1>
|
||||
<p>Note: these tests use the browser default CSS style rules.</p>
|
||||
|
||||
<h2>DIV</h2>
|
||||
<div id="test_div">TEST</div>
|
||||
<a href="#" onclick="Effect.Fade('test_div'); return false;">Effect.Fade</a> |
|
||||
<a href="#" onclick="Effect.Appear('test_div'); return false;">Effect.Appear</a>
|
||||
|
||||
<h2>SPAN</h2>
|
||||
<span id="test_span">TEST</span><br/>
|
||||
<a href="#" onclick="Effect.Fade('test_span'); return false;">Effect.Fade</a> |
|
||||
<a href="#" onclick="Effect.Appear('test_span'); return false;">Effect.Appear</a>
|
||||
|
||||
<h2>P</h2>
|
||||
<p id="test_p">TEST</p><br/>
|
||||
<a href="#" onclick="Effect.Fade('test_p'); return false;">Effect.Fade</a> |
|
||||
<a href="#" onclick="Effect.Appear('test_p'); return false;">Effect.Appear</a>
|
||||
|
||||
<h2>IMG</h2>
|
||||
<img id="test_img" src="icon.png" alt="test image" /><br/>
|
||||
<a href="#" onclick="Effect.Fade('test_img'); return false;">Effect.Fade</a> |
|
||||
<a href="#" onclick="Effect.Appear('test_img'); return false;">Effect.Appear</a>
|
||||
|
||||
|
||||
<hr/>
|
||||
|
||||
<p style="color:red;">The following elements are not supported with Fade/Appear on all browsers!</p>
|
||||
|
||||
<h2>TABLE</h2>
|
||||
<table id="test_table"><tbody><tr><td>TEST</td></tr></tbody></table>
|
||||
<a href="#" onclick="Effect.Fade('test_table'); return false;">Effect.Fade</a> |
|
||||
<a href="#" onclick="Effect.Appear('test_table'); return false;">Effect.Appear</a>
|
||||
|
||||
<h2>TBODY</h2>
|
||||
<table><tbody id="test_tbody"><tr><td>TEST</td></tr></tbody></table>
|
||||
<a href="#" onclick="Effect.Fade('test_tbody'); return false;">Effect.Fade</a> |
|
||||
<a href="#" onclick="Effect.Appear('test_tbody'); return false;">Effect.Appear</a>
|
||||
|
||||
<h2>TR</h2>
|
||||
<table><tbody><tr id="test_tr"><td>TEST</td></tr></tbody></table>
|
||||
<a href="#" onclick="Effect.Fade('test_tr'); return false;">Effect.Fade</a> |
|
||||
<a href="#" onclick="Effect.Appear('test_tr'); return false;">Effect.Appear</a>
|
||||
|
||||
<h2>TD</h2>
|
||||
<table><tbody><tr><td id="test_td">TEST</td></tr></tbody></table>
|
||||
<a href="#" onclick="Effect.Fade('test_td'); return false;">Effect.Fade</a> |
|
||||
<a href="#" onclick="Effect.Appear('test_td'); return false;">Effect.Appear</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
65
javascript/scoluos/test/functional/effects_blind_test.html
Executable file
65
javascript/scoluos/test/functional/effects_blind_test.html
Executable file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#d1 { background-color: #fcb; width: 200px; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<h2>Effect.BlindUp/Effect.BlindDown</h2>
|
||||
|
||||
<div id="d1">
|
||||
Lorem ipsum dolor sit amet
|
||||
<ul>
|
||||
<li>test!</li>
|
||||
<li>test!</li>
|
||||
</ul>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
<img src="icon.png" alt="test!"/>
|
||||
Lorem ipsum dolor sit amet
|
||||
<ul>
|
||||
<li>test!</li>
|
||||
<li>test!</li>
|
||||
</ul>
|
||||
Lorem ipsum dolor sit amet
|
||||
<ul>
|
||||
<li>test!</li>
|
||||
<li>test!</li>
|
||||
</ul>
|
||||
Lorem ipsum dolor sit amet
|
||||
<ul>
|
||||
<li>test!</li>
|
||||
<li>test!</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<a href="#" onclick="Effect.BlindDown('d1');; return false;">BlindDown()</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a href="#" onclick="Effect.BlindUp('d1');; return false;">BlindUp()</a>
|
||||
</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
46
javascript/scoluos/test/functional/effects_float_appear_test.html
Executable file
46
javascript/scoluos/test/functional/effects_float_appear_test.html
Executable file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us functional test file</h1>
|
||||
<p>
|
||||
See if workaround for Safari and floating elements with Effect.Appear works.
|
||||
</p>
|
||||
|
||||
<a href="#" onclick="Effect.Appear('float_div_left'); return false;">float:left</a> |
|
||||
<a href="#" onclick="Effect.Appear('float_div_right'); return false;">float:right</a> |
|
||||
<a href="#" onclick="$('float_div_right').setOpacity(1)">float:right (setOpacity 1)</a> |
|
||||
<a href="#" onclick="Effect.Appear('icon'); return false;">image (non-floating)</a> |
|
||||
<a href="#" onclick="Effect.Appear('float_icon'); return false;">image (floating)</a> |
|
||||
<a href="#" onclick="$('float_icon').setOpacity(1);">image (setOpacity 1)</a>
|
||||
|
||||
<hr/>
|
||||
|
||||
<div id="float_div_left" style="float:left;display:none">
|
||||
Lorem ipsum dolor sit amet,<br/>
|
||||
consectetur adipisicing elit,<br/>
|
||||
sed do eiusmod tempor incididunt<br/>
|
||||
ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
|
||||
<div id="float_div_right" style="float:right;opacity:0.4">
|
||||
Lorem ipsum dolor sit amet,<br/>
|
||||
consectetur adipisicing elit,<br/>
|
||||
sed do eiusmod tempor incididunt<br/>
|
||||
ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
|
||||
<img id="icon" src="icon.png" style="display:none" alt="" />
|
||||
|
||||
<img id="float_icon" src="icon.png" style="float:left;opacity:0.4" alt="" />
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
38
javascript/scoluos/test/functional/effects_grow_strink_test.html
Executable file
38
javascript/scoluos/test/functional/effects_grow_strink_test.html
Executable file
@@ -0,0 +1,38 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#d1 { background-color: #fcb; width: 200px; height: 200px; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<h2>Effect.Grow/Effect.Shrink</h2>
|
||||
|
||||
<div id="d1" style="font-size: 2em;">
|
||||
<p style="font-size:1em;">Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Grow:
|
||||
<a href="#" onclick="Effect.Grow('d1');; return false;">Grow()</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Shrink:
|
||||
<a href="#" onclick="Effect.Shrink('d1');; return false;">Shrink()</a>
|
||||
</p>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
70
javascript/scoluos/test/functional/effects_highlight_bg_image.html
Executable file
70
javascript/scoluos/test/functional/effects_highlight_bg_image.html
Executable file
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<title></title>
|
||||
<script type="text/javascript" src="../../lib/prototype.js"></script>
|
||||
<script type="text/javascript" src="../../src/scriptaculous.js?load=effects"></script>
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
|
||||
Li = {
|
||||
onMouseDown_image: function(event) {
|
||||
new Effect.Highlight(this, {keepBackgroundImage:true});
|
||||
},
|
||||
onMouseDown_without: function(event) {
|
||||
new Effect.Highlight(this);
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = function() {
|
||||
var li = $("with").getElementsByTagName('LI');
|
||||
for (var i = 0; i < li.length; i++) {
|
||||
li[i].onmousedown = Li.onMouseDown_image.bindAsEventListener(li[i]);
|
||||
}
|
||||
var li = $("without").getElementsByTagName('LI');
|
||||
for (i = 0; i < li.length; i++) {
|
||||
li[i].onmousedown = Li.onMouseDown_without.bindAsEventListener(li[i]);
|
||||
}
|
||||
}
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
color: black;
|
||||
background-color: white;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
margin:0; padding:0;
|
||||
}
|
||||
li {
|
||||
margin: 3px 0; padding: 3px 3em 3px 24px;
|
||||
border: 2px solid #456;
|
||||
background-image: url(icon.png);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 3px 3px;
|
||||
}
|
||||
#with li {background-color: #cde;}
|
||||
#without li {background-color: #ced;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test of <code>keepBackgroundImage</code> parameter for <code>Effect.Highlight</code>. Click items to show effect.</p>
|
||||
<p>With the <code>keepBackgroundImage</code> parameter.</p>
|
||||
<ul id="with">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ul>
|
||||
|
||||
<p>Without the parameter.</p>
|
||||
<ul id="without">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
<li>Three</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
30
javascript/scoluos/test/functional/effects_queue_limit_test.html
Executable file
30
javascript/scoluos/test/functional/effects_queue_limit_test.html
Executable file
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#d1 { background-color: #fcb; width: 200px; height: 200px; float:left; }
|
||||
#d2 { background-color: #cfb; font-size: 2em; width: 200px; height: 200px; float:left; }
|
||||
#d3 { background-color: #bcf; font-size: 2em; width: 200px; height: 200px; float:left; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<h2>Effect.Queue limit</h2>
|
||||
|
||||
<a href="#" onclick="Effect.SlideUp('slidingtwice',{queue:{scope:'myscope', position:'end', limit: 1}});">up</a>
|
||||
<a href="#" onclick="Effect.SlideDown('slidingtwice',{queue:{scope:'myscope', position:'end', limit: 1}});">down</a>
|
||||
<div id="slidingtwice"><div style="background-color:#000;color:white;font-size:20px;height:300px;width:150px;">
|
||||
Do a bit sliding in parallel, with a scoped queue, but I am limited to one : ) so don't try over and over again...
|
||||
</div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
67
javascript/scoluos/test/functional/effects_queue_test.html
Executable file
67
javascript/scoluos/test/functional/effects_queue_test.html
Executable file
@@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#d1 { background-color: #fcb; width: 200px; height: 200px; float:left; }
|
||||
#d2 { background-color: #cfb; font-size: 2em; width: 200px; height: 200px; float:left; }
|
||||
#d3 { background-color: #bcf; font-size: 2em; width: 200px; height: 200px; float:left; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<h2>Effect.Queue</h2>
|
||||
|
||||
<div id="d1" style="font-size: 2em;">
|
||||
<p style="font-size:1em;">Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
|
||||
<div id="d2">
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
|
||||
<div id="d3">
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
|
||||
<div style="clear: both">
|
||||
<a href="#" onclick="startTimeline(); return false;">Start queued effects</a> (in 'global' queue)
|
||||
</div>
|
||||
|
||||
<div id="sliding"><div style="background-color:#ccc;font-size:20px;height:300px;width:150px;">
|
||||
<a href="#" onclick="Effect.SlideUp('sliding',{queue:{scope:'myscope', position:'end'}}); Effect.SlideDown('sliding',{queue:{scope:'myscope', position:'end'}}); return false;">
|
||||
Do a bit sliding in parallel, with a scoped queue
|
||||
</a>
|
||||
</div></div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
function startTimeline() {
|
||||
// 3x highlight in front
|
||||
for(var i=0; i<3; i++)
|
||||
new Effect.Highlight('d3', { duration: 1.0, queue: 'front' });
|
||||
|
||||
// insert scale at very beginning
|
||||
new Effect.Scale('d1', 75, { scaleContent: true, duration: 1.0, queue: 'front' });
|
||||
|
||||
// parallel implied, delay 0.5 sec
|
||||
new Effect.Highlight('d1', { delay: 0.5 });
|
||||
|
||||
// puff at end
|
||||
new Effect.Puff('d2', { duration: 4.0, queue: 'end' });
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
76
javascript/scoluos/test/functional/effects_random_demo.html
Executable file
76
javascript/scoluos/test/functional/effects_random_demo.html
Executable file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
div.demo { font-size: 70pt; float: left }
|
||||
div#info { font: 10px/11px Tahoma, Arial, sans-serif; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
function startDemo() {
|
||||
$$('div.demo').each( function(d) {
|
||||
d.visualEffect(
|
||||
['fade','appear','blind_up','blind_down','puff','switch_off','drop_out','shake',
|
||||
'slide_up','slide_down','pulsate','squish','fold','grow','shrink'][Math.round(Math.random()*14)],
|
||||
{ duration:0.5+Math.random()*5, delay: Math.random()*3 });
|
||||
});
|
||||
$('info').update(
|
||||
Effect.Queues.get('global').collect( function(e) {
|
||||
return e.inspect().escapeHTML()
|
||||
}).join('<br/>'));
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Random effects demo</h1>
|
||||
<a href="#" onclick="startDemo(); return false;">Start...</a> |
|
||||
<a href="#" onclick="$('info').toggle(); return false">Show/hide log</a>
|
||||
|
||||
<div class="demo" style="background-color:#f00"><div>
|
||||
DIV1
|
||||
</div></div>
|
||||
|
||||
<div class="demo" style="background-color:#ff0"><div>
|
||||
DIV2
|
||||
</div></div>
|
||||
|
||||
<div class="demo" style="background-color:#0f0"><div>
|
||||
DIV3
|
||||
</div></div>
|
||||
|
||||
<div class="demo" style="background-color:#0ff"><div>
|
||||
DIV4
|
||||
</div></div>
|
||||
|
||||
<div class="demo" style="background-color:#f00"><div>
|
||||
DIV5
|
||||
</div></div>
|
||||
|
||||
<div class="demo" style="background-color:#ff0"><div>
|
||||
DIV6
|
||||
</div></div>
|
||||
|
||||
<div class="demo" style="background-color:#f00"><div>
|
||||
DIV7
|
||||
</div></div>
|
||||
|
||||
<div class="demo" style="background-color:#ff0"><div>
|
||||
DIV8
|
||||
</div></div>
|
||||
|
||||
<div class="demo" style="background-color:#0f0"><div>
|
||||
DIV9
|
||||
</div></div>
|
||||
|
||||
<div id="info" style="clear:both; display:none"> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
74
javascript/scoluos/test/functional/effects_test.html
Executable file
74
javascript/scoluos/test/functional/effects_test.html
Executable file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<body>
|
||||
<h1>script.aculo.us Effects functional test file</h1>
|
||||
|
||||
<h2>Effect.Highlight</h2>
|
||||
|
||||
<div id="debug"> </div>
|
||||
|
||||
<a href="#" onclick="new Effect.SlideDown('d1'); return false;">asdasd</a>
|
||||
|
||||
<div id="d1" onclick="new Effect.SlideUp('d1');" style="overflow:hidden;"><div style="background-color:#ff8080;">
|
||||
|
||||
(highlight to red)
|
||||
|
||||
</div></div>
|
||||
|
||||
<div id="d2" style="width:100px;height:100px;background-color:#80ff80;">
|
||||
(highlight to greenish)
|
||||
</div>
|
||||
|
||||
<div id="d3" style="width:100px;height:100px;background-color:#dde;">
|
||||
(bottom-right-grow)
|
||||
</div>
|
||||
|
||||
<div id="d4" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Shake(this)">
|
||||
click to test shake
|
||||
</div>
|
||||
|
||||
<div id="d5" style="width:100px;height:100px;background-color:#dde;" onclick="Effect.Puff(this)">
|
||||
click to test puff
|
||||
</div>
|
||||
<p>
|
||||
update callbacks: <span id="d5_after">(waiting)</span> -- <span id="d5_before">(waiting)</span>
|
||||
</p>
|
||||
<a href="#" onclick="$('d5').appear({beforeUpdate:before,afterUpdate:after}); return false;">show puff div again</a>
|
||||
|
||||
<a href="#" onclick="Effect.Appear('d6')">test appear</a>
|
||||
<div id="d6" style="width:100px;height:100px;background-color:#dde;display:none">
|
||||
appear
|
||||
</div>
|
||||
|
||||
<a href="#" onclick="Effect.Grow('d7')">test grow</a>
|
||||
<div id="d7" style="width:100px;height:100px;background-color:#dde;display:none">
|
||||
grow
|
||||
</div>
|
||||
|
||||
<a href="#" onclick="Effect.Pulsate('d8')">test pulsate default times (5)</a>
|
||||
<a href="#" onclick="Effect.Pulsate('d8', {pulses: 2})">test pulsate 2 times</a>
|
||||
<div id="d8" style="width:100px;height:100px;background-color:#dde;">
|
||||
pulsate
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
new Effect.Highlight("d2",{startcolor:"#000000"});
|
||||
new Effect.Grow("d3",{duration:5.0,direction: 'bottom-right',opacityTransition:Effect.Transitions.linear});
|
||||
new Effect.BlindDown("d1");
|
||||
|
||||
var afterUpdates = 0, beforeUpdates = 0;
|
||||
function after(){ afterUpdates++; $('d5_after').update(afterUpdates); }
|
||||
function before(){ beforeUpdates--; $('d5_before').update(beforeUpdates); }
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
36
javascript/scoluos/test/functional/effects_toggle_test.html
Executable file
36
javascript/scoluos/test/functional/effects_toggle_test.html
Executable file
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Effects functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Effect.toggle functional test file</h1>
|
||||
|
||||
<a href="#" onclick="Effect.toggle('d1','slide'); return false;">Toggle slide</a>
|
||||
<div id="d1" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
|
||||
</div></div>
|
||||
|
||||
<a href="#" onclick="Effect.toggle('d2','BLIND'); return false;">Toggle blind</a>
|
||||
<div id="d2" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
|
||||
</div></div>
|
||||
|
||||
|
||||
<a href="#" onclick="Effect.toggle('d3','appear'); return false;">Toggle appear</a>
|
||||
<div id="d3" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
|
||||
</div></div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
javascript/scoluos/test/functional/icon.png
Executable file
BIN
javascript/scoluos/test/functional/icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 281 B |
91
javascript/scoluos/test/functional/index.html
Executable file
91
javascript/scoluos/test/functional/index.html
Executable file
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us functional tests</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body class="navigation">
|
||||
|
||||
<h1>script.aculo.us<br/>Functional Tests</h1>
|
||||
|
||||
<p id="version"></p>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
$('version').innerHTML = 'script.aculo.us version '+Scriptaculous.Version+'<br/>Prototype version ' + Prototype.Version;
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<p><a href="http://wiki.script.aculo.us/scriptaculous/show/UnitTesting" target="test">Documentation</a></p>
|
||||
|
||||
<h2>Effects</h2>
|
||||
<ul>
|
||||
<li><b><a href="effects_random_demo.html" target="test">Random effects test</a></b></li>
|
||||
<li><a href="effects_test.html" target="test">effects_test</a></li>
|
||||
<li><a href="effect_direct_test.html" target="test">$$ selector effects/visualEffect</a></li>
|
||||
<li><a href="effects_queue_test.html" target="test">effects_queue</a></li>
|
||||
<li><a href="effects_queue_limit_test.html" target="test">effects_queue_limit</a></li>
|
||||
<li><a href="effects_toggle_test.html" target="test">Effect.toggle</a></li>
|
||||
<li><a href="effects2_test.html" target="test">effects2_test</a></li>
|
||||
<li><a href="effects3_test.html" target="test">effects3_test</a></li>
|
||||
<li><a href="effects4_test.html" target="test">effects4_test</a></li>
|
||||
<li><a href="effects5_test.html" target="test">effects5_test</a></li>
|
||||
<li><a href="effects5b_test.html" target="test">effects5b_test</a></li>
|
||||
<li><a href="effects6_test.html" target="test">effects6_test</a></li>
|
||||
<li><a href="effect_shake.html" target="test">effect shake</a></li>
|
||||
<li><a href="effects_grow_strink_test.html" target="test">Grow/Shrink</a></li>
|
||||
<li><a href="effects_blind_test.html" target="test">BlindUp/BlindDown</a></li>
|
||||
<li><a href="effect_scale_test.html" target="test">Effect.Scale</a></li>
|
||||
<li><a href="effect_puff_test.html" target="test">Effect.Puff</a></li>
|
||||
<li><a href="effects_float_appear_test.html" target="test">Test for Safari .Appear w/ floats</a></li>
|
||||
<li><a href="effects_highlight_bg_image.html" target="test">Effect.Highlight keepBackgroundImage option</a></li>
|
||||
<li><a href="texteffects_test.html" target="test">texteffects_test.html</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Controls</h2>
|
||||
<ul>
|
||||
<li><a href="ajax_autocompleter_test.html" target="test">ajax_autocompleter_test</a></li>
|
||||
<li><a href="ajax_autocompleter2_test.html" target="test">ajax_autocompleter2_test</a></li>
|
||||
<li><a href="ajax_inplaceeditor_test.html" target="test">ajax_inplaceeditor_test</a></li>
|
||||
<li><a href="ajax_inplacecollectioneditor_test.html" target="test">ajax_inplacecollectioneditor_test</a></li>
|
||||
<li><a href="slider_test.html" target="test">slider_test</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Drag & Drop</h2>
|
||||
<ul>
|
||||
<li><a href="dragdrop_test.html" target="test">dragdrop_test</a></li>
|
||||
<li><a href="dragdrop2_test.html" target="test">dragdrop2_test</a></li>
|
||||
<li><a href="dragdrop3_test.html" target="test">dragdrop3_test</a></li>
|
||||
<li><a href="dragdrop4_test.html" target="test">dragdrop4_test</a></li>
|
||||
<li><a href="dragdrop5_test.html" target="test">dragdrop5_test</a></li>
|
||||
<li><a href="dragdrop6_test.html" target="test">dragdrop6_test: snap option</a></li>
|
||||
<li><a href="dragdrop7_test.html" target="test">dragdrop7_test</a></li>
|
||||
<li><a href="dragdrop8_test.html" target="test">dragdrop8_test</a></li>
|
||||
<li><a href="dragdrop9_test.html" target="test">Revert: failure</a></li>
|
||||
<li><a href="dragdrop_delay_test.html" target="test">dragdrop delay test</a></li>
|
||||
<li><a href="sortable_test.html" target="test">sortable_test</a></li>
|
||||
<li><a href="sortable2_test.html" target="test">sortable2_test</a></li>
|
||||
<li><a href="sortable3_test.html" target="test">sortable3_test</a></li>
|
||||
<li><a href="sortable4_test.html" target="test">sortable4_test</a></li>
|
||||
<li><a href="sortable5_test.html" target="test">sortable5_test</a></li>
|
||||
<li><a href="sortable6_test.html" target="test">sortable5_test</a></li>
|
||||
<li><a href="sortable_tree_test.html" target="test">Sortable trees</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Sound (experimental)</h2>
|
||||
<ul>
|
||||
<li><a href="sound_test.html" target="test">sound_test.html</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Miscellaneous</h2>
|
||||
<ul>
|
||||
<li><a href="position_clone_test.html" target="test">position_clone_test</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
124
javascript/scoluos/test/functional/position_clone_test.html
Executable file
124
javascript/scoluos/test/functional/position_clone_test.html
Executable file
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>prototype.js Position.clone functional test</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<style type="text/css">
|
||||
.margins { margin:20px; }
|
||||
.nomargins { margin:0; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="container" style="position:relative; top:10px; width:300px; height:100px; overflow: auto;">
|
||||
|
||||
<div id="container2" style="position:relative; top:10px; width:400px; height:150px; overflow: auto;">
|
||||
|
||||
<div id="test1" style="border:1px solid black; position:absolute; left: 100px; top: 10px; width:100px; height:200px;">
|
||||
abs
|
||||
</div>
|
||||
|
||||
<div id="test2" style="border:1px solid black; position:relative; left: 50px; top: 0px;">
|
||||
rel
|
||||
</div>
|
||||
|
||||
<div id="test3" style="border:1px solid black; position:static;">
|
||||
static
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="c3" style="position:absolute;top:140px;left:55px;width:100px;height:20px;">
|
||||
abs-body child
|
||||
</div>
|
||||
|
||||
<p id="p1" style="background-color:#eee;">
|
||||
unpositioned p
|
||||
</p>
|
||||
|
||||
<script type="text/javascript" language="javascript">
|
||||
// <![CDATA[
|
||||
function d(el, marker) {
|
||||
$('debug').innerHTML =
|
||||
'orig: ' + Object.inspect(Position.page($(el))) + ', ' +
|
||||
'clone: ' + Object.inspect(Position.page($(marker)));
|
||||
}
|
||||
function testA(el) {
|
||||
Position.clone(el, 'marker');
|
||||
d(el, 'marker');
|
||||
}
|
||||
function testB(el) {
|
||||
Element.hide('marker2');
|
||||
Position.clone(el, 'marker2');
|
||||
Element.show('marker2');
|
||||
d(el, 'marker2');
|
||||
}
|
||||
function testC(el) {
|
||||
Position.clone(el, 'marker3');
|
||||
d(el, 'marker3');
|
||||
}
|
||||
function testD(el) {
|
||||
Position.clone(el, 'marker4');
|
||||
d(el, 'marker4');
|
||||
}
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<div id="actions" style="position:absolute;top:400px;">
|
||||
<a href="#" onclick="Element.toggle('big'); return false;">Toggle page scrolling</a> |
|
||||
Page margings: <a href="#" onclick="document.body.className = 'margins'">on</a> |
|
||||
<a href="#" onclick="document.body.className = 'nomargins'">off</a>
|
||||
<br/><br/>
|
||||
Absolute marker in position:relative container DIV:<br/>
|
||||
<a href="#" onclick="testA('test1'); return false;">Mark abs</a> |
|
||||
<a href="#" onclick="testA('test2'); return false;">Mark rel</a> |
|
||||
<a href="#" onclick="testA('test3'); return false;">Mark static</a> |
|
||||
<a href="#" onclick="testA('c3'); return false;">Mark abs-body child</a> |
|
||||
<a href="#" onclick="testA('p1'); return false;">Mark p</a>
|
||||
<br/><br/>
|
||||
Hidden marker (display:none), in position:relative container DIV switched on when clone is finished:<br/>
|
||||
<a href="#" onclick="testB('test1'); return false;">Mark abs</a> |
|
||||
<a href="#" onclick="testB('test2'); return false;">Mark rel</a> |
|
||||
<a href="#" onclick="testB('test3'); return false;">Mark static</a> |
|
||||
<a href="#" onclick="testB('c3'); return false;">Mark abs-body child</a> |
|
||||
<a href="#" onclick="testB('p1'); return false;">Mark p</a>
|
||||
<br/><br/>
|
||||
Absolute marker, child of BODY:<br/>
|
||||
<a href="#" onclick="testC('test1'); return false;">Mark abs</a> |
|
||||
<a href="#" onclick="testC('test2'); return false;">Mark rel</a> |
|
||||
<a href="#" onclick="testC('test3'); return false;">Mark static</a> |
|
||||
<a href="#" onclick="testC('c3'); return false;">Mark abs-body child</a> |
|
||||
<a href="#" onclick="testC('p1'); return false;">Mark p</a>
|
||||
<br/><br/>
|
||||
Fixed marker, child of BODY:<br/>
|
||||
<a href="#" onclick="testD('test1'); return false;">Mark abs</a> |
|
||||
<a href="#" onclick="testD('test2'); return false;">Mark rel</a> |
|
||||
<a href="#" onclick="testD('test3'); return false;">Mark static</a> |
|
||||
<a href="#" onclick="testD('c3'); return false;">Mark abs-body child</a> |
|
||||
<a href="#" onclick="testD('p1'); return false;">Mark p</a> |
|
||||
<div id="debug"></div>
|
||||
</div>
|
||||
|
||||
<div id="marker-container" style="position:relative;left:400px;top:20px;width:100px;height:100px;">
|
||||
<div id="blah" style="top:20px;">
|
||||
<div id="marker" style="position:absolute;background-color:#f00;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
|
||||
</div>
|
||||
<div id="marker2" style="display:none;position:absolute;background-color:#0f0;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="marker3" style="position:absolute;background-color:#00f;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
|
||||
|
||||
<div id="marker4" style="position:fixed;background-color:#08f;opacity:0.5;z-index:10000;width:10px;height:10px;">!</div>
|
||||
|
||||
<div id="big" style="display:none;height:10000px;"> </div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
152
javascript/scoluos/test/functional/slider_test.html
Executable file
152
javascript/scoluos/test/functional/slider_test.html
Executable file
@@ -0,0 +1,152 @@
|
||||
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Text effects tests</title>
|
||||
<script type="text/javascript" src="../../lib/prototype.js"></script>
|
||||
<script type="text/javascript" src="../../src/scriptaculous.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Sliders</h1>
|
||||
|
||||
<h2>Standard horizontal slider</h2>
|
||||
|
||||
<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
|
||||
<div id="handle1" style="width:5px;height:10px;background-color:#f00;"> </div>
|
||||
</div>
|
||||
|
||||
<p id="debug1"> </p>
|
||||
|
||||
<h2>Vertical slider</h2>
|
||||
|
||||
<div id="track2" style="height:100px;background-color:#aaa;width:5px;">
|
||||
<div id="handle2" style="width:10px;height:5px;background-color:#f00;"> </div>
|
||||
</div>
|
||||
|
||||
<p id="debug2"> </p>
|
||||
|
||||
<h2>Slider with predefined values [2,4,6,8] and a non-default range [2,15]</h2>
|
||||
|
||||
<div id="track3" style="width:200px;background-color:#aaa;height:5px;">
|
||||
<div id="handle3" style="width:5px;height:10px;background-color:#f00;"> </div>
|
||||
</div>
|
||||
|
||||
<p id="debug3"> </p>
|
||||
|
||||
<h2>Slider with multiple handles</h2>
|
||||
|
||||
<div id="track4" style="width:200px;background-color:#aaa;height:5px;position:relative;">
|
||||
<div id="handle4-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
|
||||
<div id="handle4-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
|
||||
<div id="handle4-3" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div>
|
||||
</div>
|
||||
|
||||
<p id="debug4"> </p>
|
||||
|
||||
<h2>Slider with multiple handles and predefined values</h2>
|
||||
|
||||
<div id="track5" style="width:200px;background-color:#aaa;height:5px;position:relative;">
|
||||
<div id="handle5-1" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
|
||||
<div id="handle5-2" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
|
||||
<div id="handle5-3" style="opacity:0.5;position:absolute;top:0;left:0;width:5px;height:10px;background-color:#00f;"> </div>
|
||||
</div>
|
||||
|
||||
<p id="debug5"> </p>
|
||||
|
||||
<h2>Slider with multiple handles, external controls, handles are restricted (can't be moved prior/after adjacent handles)</h2>
|
||||
|
||||
<div id="track6" style="width:200px;background-color:#aaa;height:5px;position:relative;">
|
||||
<div id="handle6-1" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#f00;"> </div>
|
||||
<div id="handle6-2" style="position:absolute;top:0;left:0;width:5px;height:10px;background-color:#0f0;"> </div>
|
||||
</div>
|
||||
|
||||
<br/><br/>
|
||||
<a href="#" onclick="slider6.setValueBy(-0.1);return false;"><--</a>
|
||||
<a href="#" onclick="slider6.setValueBy(0.1);return false;">--></a>
|
||||
|
||||
<p id="debug6"> </p>
|
||||
|
||||
<h2>Fun with spans</h2>
|
||||
|
||||
<style>
|
||||
#track7 div.handle {
|
||||
background-color:#aaa;
|
||||
color:#444;
|
||||
top:0;
|
||||
left:0;
|
||||
position:absolute;
|
||||
z-index:2;
|
||||
height:100px;
|
||||
font-size:20px;
|
||||
}
|
||||
#track7 div.handle.selected {
|
||||
background-color:#444;
|
||||
color:#fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="track7" style="width:300px;background-color:#cbf;height:50px;position:relative;z-index:0;">
|
||||
<div id="handle7-1" class="handle">1</div>
|
||||
<div id="handle7-2" class="handle">2</div>
|
||||
<div id="handle7-3" class="handle">3</div>
|
||||
|
||||
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:50px;z-index:1;"> </div>
|
||||
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:50px;z-index:1;"> </div>
|
||||
|
||||
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:50px;z-index:1;"> </div>
|
||||
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:50px;z-index:1;"> </div>
|
||||
</div>
|
||||
|
||||
<br/><br/><br/><br/>
|
||||
|
||||
<h2>Slider with span and [1,10] range (test for #3731)</h2>
|
||||
|
||||
<div id="zoom-track" style="width:300px;background-color:#aaa;height:20px;position:relative;z-index:0;">
|
||||
<div id="zoom-handle-1" style="position:absolute;background-color:#f00;height:20px;z-index:2">!</div>
|
||||
<div id="zoom-handle-2" style="position:absolute;background-color:#0f0;height:20px;z-index:2">!</div>
|
||||
<div id="zoom-track-selected" style="position:absolute;background-color:#00f;height:20px;z-index:1"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- FIXME: add more demos here -->
|
||||
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
new Control.Slider('handle1','track1',{
|
||||
sliderValue:0.5,
|
||||
onSlide:function(v){$('debug1').innerHTML='slide: '+v},
|
||||
onChange:function(v){$('debug1').innerHTML='changed! '+v}});
|
||||
new Control.Slider('handle2','track2',{axis:'vertical',
|
||||
onSlide:function(v){$('debug2').innerHTML='slide: '+v},
|
||||
onChange:function(v){$('debug2').innerHTML='changed! '+v}});
|
||||
new Control.Slider('handle3','track3',{values:[2,4,6,8],range:$R(2,15),
|
||||
onSlide:function(v){$('debug3').innerHTML='slide: '+v},
|
||||
onChange:function(v){$('debug3').innerHTML='changed! '+v}});
|
||||
new Control.Slider(['handle4-1','handle4-2','handle4-3'],'track4',{
|
||||
onSlide:function(v){$('debug4').innerHTML='slide: '+v.inspect()},
|
||||
onChange:function(v){$('debug4').innerHTML='changed! '+v.inspect()}});
|
||||
new Control.Slider(['handle5-1','handle5-2','handle5-3'],'track5',{values:[0,0.2,0.4,0.6,0.8],
|
||||
onSlide:function(v){$('debug5').innerHTML='slide: '+v.inspect()},
|
||||
onChange:function(v){$('debug5').innerHTML='changed! '+v.inspect()}});
|
||||
var slider6 = new Control.Slider(['handle6-1','handle6-2'],'track6',{
|
||||
sliderValue:[0.3, 0.8],
|
||||
restricted:true,
|
||||
onSlide:function(v){$('debug6').innerHTML='slide: '+v.inspect()},
|
||||
onChange:function(v){$('debug6').innerHTML='changed! '+v.inspect()}});
|
||||
new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
|
||||
{ spans:['span7-1','span7-2'],
|
||||
startSpan:'span7-start',
|
||||
endSpan:'span7-end',
|
||||
range:$R(0,300) });
|
||||
new Control.Slider(
|
||||
['zoom-handle-1','zoom-handle-2'],'zoom-track',{
|
||||
sliderValue:[1,10], range:$R(1,10),
|
||||
values:[1,2,3,4,5,6,7,8,9,10],
|
||||
restricted:true,
|
||||
spans:['zoom-track-selected'] });
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
148
javascript/scoluos/test/functional/sortable2_test.html
Executable file
148
javascript/scoluos/test/functional/sortable2_test.html
Executable file
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Sortable ghosting functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style>
|
||||
ul.testlist {
|
||||
list-style-type:none;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
ul.testlist li {
|
||||
width:200px;
|
||||
font:12px Verdana;
|
||||
padding:4px;
|
||||
cursor:move;
|
||||
}
|
||||
ul.testlist li.over {
|
||||
background-color:#fcb;
|
||||
}
|
||||
ul.testlist li img {
|
||||
float:left;
|
||||
margin-right:8px;
|
||||
}
|
||||
div.dropmarker {
|
||||
height:6px;
|
||||
width:200px;
|
||||
background: url(dropmarker.png) left top;
|
||||
margin-top:-3px;
|
||||
margin-left:-5px;
|
||||
z-index:1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
#testlist4 li {
|
||||
float:left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Sortable ghosting functional test file</h1>
|
||||
|
||||
<h2>Ghosting</h2>
|
||||
|
||||
<ul id="testlist" class="testlist">
|
||||
<li id="item_1"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
|
||||
<li id="item_2"><img src="icon.png" alt=""/> sit amet</li>
|
||||
<li id="item_3"><img src="icon.png" alt=""/> consectetur adipisicing</li>
|
||||
<li id="item_4"><img src="icon.png" alt=""/> elit</li>
|
||||
<li id="item_5"><img src="icon.png" alt=""/> sed do eiusmod</li>
|
||||
<li id="item_6"><img src="icon.png" alt=""/> tempor incididunt</li>
|
||||
<li id="item_7"><img src="icon.png" alt=""/> ut labore et dolore</li>
|
||||
<li id="item_8"><img src="icon.png" alt=""/> magna aliqua</li>
|
||||
</ul>
|
||||
|
||||
<p id="testlist_serialize">(waiting for onChange)</p>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
Sortable.create('testlist',{ghosting:true,constraint:false,hoverclass:'over',
|
||||
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
|
||||
onChange:function(element){$('testlist_serialize').innerHTML = Sortable.serialize(element.parentNode)}
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<h2>No ghosting</h2>
|
||||
|
||||
<ul id="testlist2" class="testlist">
|
||||
<li id="item_9"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
|
||||
<li id="item_10"><img src="icon.png" alt=""/> sit amet</li>
|
||||
<li id="item_11"><img src="icon.png" alt=""/> consectetur adipisicing</li>
|
||||
<li id="item_12"><img src="icon.png" alt=""/> elit</li>
|
||||
<li id="item_13"><img src="icon.png" alt=""/> sed do eiusmod</li>
|
||||
<li id="item_14"><img src="icon.png" alt=""/> tempor incididunt</li>
|
||||
<li id="item_15"><img src="icon.png" alt=""/> ut labore et dolore</li>
|
||||
<li id="item_16"><img src="icon.png" alt=""/> magna aliqua</li>
|
||||
</ul>
|
||||
|
||||
<p id="testlist2_serialize">(waiting for onChange)</p>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
Sortable.create('testlist2',{ghosting:false,constraint:false,hoverclass:'over',
|
||||
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
|
||||
onChange:function(element){$('testlist2_serialize').innerHTML = Sortable.serialize(element.parentNode)}
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<h2>Ghosting (inside position:relative container)</h2>
|
||||
<div style="position:relative;left:100px;top:-5px;">
|
||||
<ul id="testlist3" class="testlist">
|
||||
<li id="item_17"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
|
||||
<li id="item_18"><img src="icon.png" alt=""/> sit amet</li>
|
||||
<li id="item_19"><img src="icon.png" alt=""/> consectetur adipisicing</li>
|
||||
<li id="item_20"><img src="icon.png" alt=""/> elit</li>
|
||||
<li id="item_21"><img src="icon.png" alt=""/> sed do eiusmod</li>
|
||||
<li id="item_22"><img src="icon.png" alt=""/> tempor incididunt</li>
|
||||
<li id="item_23"><img src="icon.png" alt=""/> ut labore et dolore</li>
|
||||
<li id="item_24"><img src="icon.png" alt=""/> magna aliqua</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p id="testlist3_serialize">(waiting for onChange)</p>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
Sortable.create('testlist3',{ghosting:true,constraint:false,
|
||||
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
|
||||
onChange:function(element){$('testlist3_serialize').innerHTML = Sortable.serialize(element.parentNode)}
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
||||
<h2>Ghosting (inside position:relative container)</h2>
|
||||
<div style="position:relative;left:100px;top:-5px;">
|
||||
<ul id="testlist4" class="testlist">
|
||||
<li id="item_417"><img src="icon.png" alt=""/> Lorem ipsum dolor</li>
|
||||
<li id="item_418"><img src="icon.png" alt=""/> sit amet</li>
|
||||
<li id="item_419"><img src="icon.png" alt=""/> consectetur adipisicing</li>
|
||||
<li id="item_420"><img src="icon.png" alt=""/> elit</li>
|
||||
<li id="item_421"><img src="icon.png" alt=""/> sed do eiusmod</li>
|
||||
<li id="item_422"><img src="icon.png" alt=""/> tempor incididunt</li>
|
||||
<li id="item_423"><img src="icon.png" alt=""/> ut labore et dolore</li>
|
||||
<li id="item_424"><img src="icon.png" alt=""/> magna aliqua</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p id="testlist4_serialize">(waiting for onChange)</p>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
Sortable.create('testlist4',{overlap:'horizontal',ghosting:true,constraint:false,
|
||||
onUpdate:function(sortable){alert(Sortable.serialize(sortable))},
|
||||
onChange:function(element){$('testlist4_serialize').innerHTML = Sortable.serialize(element.parentNode)}
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
|
||||
<div id="debug"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
40
javascript/scoluos/test/functional/sortable3_test.html
Executable file
40
javascript/scoluos/test/functional/sortable3_test.html
Executable file
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us sortable functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style type="text/css" media="screen">
|
||||
ul { height: 100px; border:1px dotted #888; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Sortable two-lists w/ dropOnEmpty functional test file</h1>
|
||||
|
||||
<ul id="thelist1">
|
||||
<li id="thelist1_1">Hey there! I'm item#1/1</li>
|
||||
<li id="thelist1_2">Hey there! I'm item#1/2</li>
|
||||
<li id="thelist1_3">Hey there! I'm item#1/3</li>
|
||||
</ul>
|
||||
|
||||
<ul id="thelist2">
|
||||
</ul>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
Sortable.create('thelist1',{containment:['thelist1','thelist2'], dropOnEmpty:true});
|
||||
Sortable.create('thelist2',{containment:['thelist1','thelist2'], dropOnEmpty:true});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<a href="#" onclick="alert(Sortable.serialize('thelist1'));return false;">Serialize sortable1</a>
|
||||
<a href="#" onclick="alert(Sortable.serialize('thelist2'));return false;">Serialize sortable2</a>
|
||||
|
||||
<div id="debug"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
88
javascript/scoluos/test/functional/sortable4_test.html
Executable file
88
javascript/scoluos/test/functional/sortable4_test.html
Executable file
@@ -0,0 +1,88 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us sortable functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style type="text/css" media="screen">
|
||||
ul.sortablelist {
|
||||
list-style-image:none;
|
||||
list-style-type:none;
|
||||
margin-top:5px;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
ul.sortabledemo li {
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
span.handle {
|
||||
background-color: #E8A400;
|
||||
color:white;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
li.green {
|
||||
background-color: #ECF3E1;
|
||||
border:1px solid #C5DEA1;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
li.orange {
|
||||
border:1px solid #E8A400;
|
||||
background-color: #FFF4D8;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us: Two floating sortables with containment and dropOnEmpty</h1>
|
||||
|
||||
<div style="height:200px;">
|
||||
<div style="float:left;">
|
||||
<h3>This is the first list</h3>
|
||||
<ul class="sortabledemo" id="firstlist" style="height:150px;width:200px;">
|
||||
<li class="green" id="firstlist_firstlist1">Item 1 from first list.</li>
|
||||
<li class="green" id="firstlist_firstlist2">Item 2 from first list.</li>
|
||||
<li class="green" id="firstlist_firstlist3">Item 3 from first list.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="float:left;">
|
||||
<h3>And now the second list</h3>
|
||||
<ul class="sortabledemo" id="secondlist" style="height:150px;width:200px;">
|
||||
<li class="orange" id="secondlist_secondlist1">
|
||||
<span class="handle">DRAG HERE</span> Item 1 from second list.
|
||||
</li>
|
||||
<li class="orange" id="secondlist_secondlist2">
|
||||
<span class="handle">DRAG HERE</span> Item 2 from second list.
|
||||
</li>
|
||||
<li class="orange" id="secondlist_secondlist3">
|
||||
<span class="handle">DRAG HERE</span> Item 3 from second list.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="clear:both" />
|
||||
|
||||
<pre id="firstlist_debug"></pre>
|
||||
<pre id="secondlist_debug"></pre>
|
||||
|
||||
<script type="text/javascript">
|
||||
// <![CDATA[
|
||||
Sortable.create("firstlist",
|
||||
{dropOnEmpty:true,containment:["firstlist","secondlist"],constraint:false,
|
||||
onChange:function(){$('firstlist_debug').innerHTML = Sortable.serialize('firstlist') }});
|
||||
Sortable.create("secondlist",
|
||||
{dropOnEmpty:true,handle:'handle',containment:["firstlist","secondlist"],constraint:false,
|
||||
onChange:function(){$('secondlist_debug').innerHTML = Sortable.serialize('secondlist') }});
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
javascript/scoluos/test/functional/sortable5_test.html
Executable file
43
javascript/scoluos/test/functional/sortable5_test.html
Executable file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us sortable functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container_div">
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
var new_ul_id = 'new_id_123';
|
||||
var ul = document.createElement("ul");
|
||||
var ul_id = document.createAttribute("id");
|
||||
ul_id.nodeValue = new_ul_id;
|
||||
ul.setAttributeNode(ul_id);
|
||||
|
||||
var li = document.createElement("li");
|
||||
li.setAttribute("id", "test_1");
|
||||
li.appendChild(document.createTextNode("blah1"));
|
||||
ul.appendChild(li);
|
||||
|
||||
var li2 = document.createElement("li");
|
||||
li2.setAttribute("id", "test_2");
|
||||
li2.appendChild(document.createTextNode("blah2"));
|
||||
ul.appendChild(li2);
|
||||
|
||||
$('container_div').appendChild(ul);
|
||||
|
||||
Sortable.create(new_ul_id, { onUpdate: function() { alert(Sortable.serialize('new_id_123')); } });
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
148
javascript/scoluos/test/functional/sortable6_test.html
Executable file
148
javascript/scoluos/test/functional/sortable6_test.html
Executable file
@@ -0,0 +1,148 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head runat="server">
|
||||
<title>script.aculo.us Drag and drop functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<style type="text/css" media="screen">
|
||||
#thelist li { background: green; margin:5px; padding: 30px; }
|
||||
#thelist2 li { background: #ffb; margin:2px; padding: 2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Drag and drop functional test file</h1>
|
||||
|
||||
<p>Scroll window down to test autoscrolling inside scrollable elements when window is scrolled</p>
|
||||
|
||||
<h2>Draggables/Droppables</h2>
|
||||
|
||||
<div style="width:400px;height:400px;overflow:scroll;position:relative;" id="scroll-container">
|
||||
|
||||
<ul id="thelist2" style="padding: 2px; background:red;">
|
||||
<li>Relatively here!</li>
|
||||
<li><input onclick="this.checked = !this.checked" name="x" id="x" type="checkbox"/>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<h1> Some space in between</h1>
|
||||
<div style="width:400px;height:400px;overflow:scroll" id="scroll-container-mod">
|
||||
|
||||
<ul id="thelist2-mod" style="padding: 2px; background:red;">
|
||||
<li>Relatively here!</li>
|
||||
<li><input onclick="this.checked = !this.checked" name="y" id="y" type="checkbox"/>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
<li>one</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
<pre id="debug"></pre>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
// Sortable.create('thelist', {overlap: 'horizontal', constraint: false});
|
||||
Position.includeScrollOffsets = true;
|
||||
|
||||
Sortable.create('thelist2',{scroll:'scroll-container'});
|
||||
Sortable.create('thelist2-mod',{scroll:'scroll-container-mod'});
|
||||
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
57
javascript/scoluos/test/functional/sortable_nested_test.html
Executable file
57
javascript/scoluos/test/functional/sortable_nested_test.html
Executable file
@@ -0,0 +1,57 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Nested Sortable element bug</title>
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul id ="route">
|
||||
|
||||
<li id="39" class="segment">
|
||||
<h2 id="39_title"> <span id="39_note" class="segment_title">COLLEGE AVE</span></h2>
|
||||
<ul id="39_entries">
|
||||
<li id="39:3" class="entry">625</li>
|
||||
<li id="39:4" class="entry">617</li>
|
||||
<li id="39:5" class="entry">601</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li id="40" class="segment">
|
||||
<h2 id="40_title">Right <span id="40_note" class="segment_title">COLLEGE CT</span></h2>
|
||||
<ul id="40_entries">
|
||||
<li id="40:7" class="entry">14</li>
|
||||
<li id="40:8" class="entry">27</li>
|
||||
<li id="40:9" class="entry">30</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script type="text/javascript">
|
||||
Sortable.create(
|
||||
"route",
|
||||
{
|
||||
handle:'segment_title',
|
||||
format: /([0-9]+)/
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
Sortable.create("39_entries", {
|
||||
dropOnEmpty:true,
|
||||
constraint:false,
|
||||
format: /[0-9]+:([0-9]+)/
|
||||
}
|
||||
);
|
||||
|
||||
Sortable.create("40_entries", {
|
||||
dropOnEmpty:true,
|
||||
constraint:false,
|
||||
format: /[0-9]+:([0-9]+)/
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
141
javascript/scoluos/test/functional/sortable_test.html
Executable file
141
javascript/scoluos/test/functional/sortable_test.html
Executable file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us sortable functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style type="text/css" media="screen">
|
||||
#thelist li { background: green; margin:5px; padding: 30px; }
|
||||
div.dropmarker {
|
||||
height:6px;
|
||||
width:200px;
|
||||
background: url(dropmarker.png) left top;
|
||||
margin-top:-3px;
|
||||
margin-left:-5px;
|
||||
z-index:1000;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
var callsToOnUpdate = 0;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ul id="thelist">
|
||||
<li id="thelist_1">Hey there! I'm item#1</li>
|
||||
<li id="thelist_2">Hey there! I'm item#2</li>
|
||||
<li id="thelist_3">Hey there! I'm item#3</li>
|
||||
</ul>
|
||||
|
||||
<a href="#" onclick="Sortable.create('thelist',{onUpdate:function(){$('debug').update(++callsToOnUpdate+' call(s) to onUpdate')}});return false;">Create sortable</a> |
|
||||
<a href="#" onclick="Sortable.destroy('thelist');return false;">Destroy sortable</a> |
|
||||
<a href="#" onclick="alert(Sortable.serialize('thelist'));return false;">Serialize sortable</a>
|
||||
|
||||
<ul id="thehandlelist">
|
||||
<li id="thehandlelist_1">Hey there! I'm item#1<span class="handle">HANDLE</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
</li>
|
||||
<li id="thehandlelist_2">Hey there! I'm item#2<span class="handle">HANDLE</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
</li>
|
||||
<li id="thehandlelist_3">Hey there! I'm item#3<span class="handle">HANDLE</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
<span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span><span>S</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="#" onclick="Sortable.create('thehandlelist',{handle:'handle',onUpdate:function(){$('debug').update(++callsToOnUpdate+' call(s) to onUpdate')}});return false;">Create sortable</a> |
|
||||
<a href="#" onclick="Sortable.destroy('thehandlelist');return false;">Destroy sortable</a> |
|
||||
<a href="#" onclick="alert(Sortable.serialize('thehandlelist'));return false;">Serialize sortable</a>
|
||||
|
||||
<p id="debug">no calls to onUpdate</p>
|
||||
|
||||
<ul id="sortable_elements_handles">
|
||||
<li id="s_1">s1 <span class="handle" id="h_1">handle</span></li>
|
||||
<li id="s_2">s2 <span class="handle" id="h_2">handle</span></li>
|
||||
<li id="s_3">s3 <span class="handle" id="h_3">handle</span></li>
|
||||
<li id="s_4">s4 <span class="handle" id="h_4">handle</span></li>
|
||||
<li id="s_5">s5 <span class="handle" id="h_5">handle</span></li>
|
||||
<li id="s_6">s6 <span class="handle" id="h_6">handle</span></li>
|
||||
<li id="s_7">s7 <span class="handle" id="h_7">handle</span></li>
|
||||
<li id="s_8">s8 <span class="handle" id="h_8">handle</span></li>
|
||||
<li id="s_9">s9 <span class="handle" id="h_9">handle</span></li>
|
||||
<li id="s_10">s10 <span class="handle" id="h_10">handle</span></li>
|
||||
</ul>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
function initializePreselected(){
|
||||
Sortable.create('sortable_elements_handles',{
|
||||
handle: 'handle',
|
||||
handles: ['h_1','h_2','h_3','h_4','h_5','h_6','h_7','h_8','h_9','h_10'],
|
||||
elements: ['s_1','s_2','s_3','s_4','s_5','s_6','s_7','s_8','s_9','s_10']
|
||||
});
|
||||
}
|
||||
function initializeNormal(){
|
||||
Sortable.create('sortable_elements_handles',{
|
||||
handle: 'handle'
|
||||
});
|
||||
}
|
||||
function benchmark(method,times){
|
||||
var now = new Date();
|
||||
times.times(method);
|
||||
$('benchmark').update((new Date()-now)+'ms');
|
||||
}
|
||||
</script>
|
||||
|
||||
20 times: <a href="#" onclick="benchmark(function(){initializePreselected()},20);return false">Init with Preselection</a> |
|
||||
<a href="#" onclick="benchmark(function(){initializeNormal()},20);return false">Init normally</a> <span id="benchmark"></span>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
185
javascript/scoluos/test/functional/sortable_tree_test.html
Executable file
185
javascript/scoluos/test/functional/sortable_tree_test.html
Executable file
@@ -0,0 +1,185 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>Sortable tree test</title>
|
||||
<script src="../../lib/prototype.js" type="text/javascript" language="javascript" charset="utf-8"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript" language="javascript" charset="utf-8"></script>
|
||||
<style type="text/css">
|
||||
ul {padding-top:4px; padding-bottom: 2px; border: 1px solid #ccf;}
|
||||
li {border: 1px solid #fcc;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<a href="#" onclick="alert(Sortable.serialize('menu'));return false">serialize 1</a>
|
||||
|
||||
<ul id="menu" style="padding-top: 6px; padding-bottom: 6px;">
|
||||
<li class="edit_link level0" id="t1_7">
|
||||
System
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level1" id="t1_8">
|
||||
Page Not Found
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t1_9">
|
||||
Translation Not Available
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level0" id="t1_10">
|
||||
Main Menu
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level1" id="t1_1">
|
||||
Welcome
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t1_2">
|
||||
Software
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level2" id="t1_4">
|
||||
Serial Console
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level3" id="t1_6">
|
||||
Features
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level2" id="t1_5">
|
||||
Property Manager
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level2" id="t1_11">
|
||||
Geomap
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t1_12">
|
||||
Services
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t1_13">
|
||||
Software
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level2" id="t1_14">
|
||||
Serial Console
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level3" id="t1_15">
|
||||
Features
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level2" id="t1_16">
|
||||
Property Manager
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level2" id="t1_17">
|
||||
Geomap
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t1_18">
|
||||
Services
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
Sortable.create('menu', {tree:true,scroll:window});
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
<ul id="menu2" style="padding-top: 6px; padding-bottom: 6px;">
|
||||
<li class="edit_link level0" id="t2_7">
|
||||
System
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level1" id="t2_8">
|
||||
Page Not Found
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t2_9">
|
||||
Translation Not Available
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level0" id="t2_10">
|
||||
Main Menu
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level1" id="t2_1">
|
||||
Welcome
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t2_2">
|
||||
Software
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level2" id="t2_4">
|
||||
Serial Console
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level3" id="t2_6">
|
||||
Features
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level2" id="t2_5">
|
||||
Property Manager
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level2" id="t2_11">
|
||||
Geomap
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t2_12">
|
||||
Services
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t2_13">
|
||||
Software
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level2" id="t2_14">
|
||||
Serial Console
|
||||
<ul class="edit_list">
|
||||
<li class="edit_link level3" id="t2_15">
|
||||
Features
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level2" id="t2_16">
|
||||
Property Manager
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
<li class="edit_link level2" id="t2_17">
|
||||
Geomap
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="edit_link level1" id="t2_18">
|
||||
Services
|
||||
<ul class="edit_list"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
Sortable.create('menu2', {tree:true,scroll:window});
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
21
javascript/scoluos/test/functional/sound_test.html
Executable file
21
javascript/scoluos/test/functional/sound_test.html
Executable file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Sound functional test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Sound test file</h1>
|
||||
|
||||
<a href="#" onclick="Sound.play('sword.mp3'); return false">play sound (parallel)</a>
|
||||
|
||||
<a href="#" onclick="Sound.play('sword.mp3',{replace:true}); return false">play sound (overwrite)</a>
|
||||
|
||||
<a href="#" onclick="Sound.disable(); return false">Mute</a>
|
||||
<a href="#" onclick="Sound.enable(); return false">Enable sounds</a>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
javascript/scoluos/test/functional/sword.mp3
Executable file
BIN
javascript/scoluos/test/functional/sword.mp3
Executable file
Binary file not shown.
52
javascript/scoluos/test/functional/texteffects_test.html
Executable file
52
javascript/scoluos/test/functional/texteffects_test.html
Executable file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Text effects tests</title>
|
||||
<script type="text/javascript" src="../../lib/prototype.js"></script>
|
||||
<script type="text/javascript" src="../../src/scriptaculous.js"></script>
|
||||
<style>
|
||||
div#many_test span { font-size:40pt; color: white; background:black; width:100px; float:left; position: relative; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="h1_text" style="font:20pt Lucida Grande;color:#fff;text-align:center;background-color:#482;">
|
||||
Maybe this is useful? <img src="icon.png" alt="blah"/> Dunno...
|
||||
</h1>
|
||||
<a href="#" onclick="Effect.multiple('h1_text', Effect.Appear, {speed:0.05, afterFinishInternal:function(){}}); return false;">Appear</a> |
|
||||
<a href="#" onclick="Effect.multiple('h1_text', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
|
||||
<a href="#" onclick="Effect.multiple('h1_text', Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a> |
|
||||
<a href="#" onclick="alert($('h1_text').innerHTML); return false;">show H1 innerHTML</a>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
<p id="p_text" style="font:12px Verdana;color:red;font-weight:bold;">THIS IS A WARNING!</p>
|
||||
<p>
|
||||
<a href="#" onclick="Effect.multiple('p_text', Effect.Appear, {speed:0.05, afterFinishInternal:function(){}}); return false;">Appear</a> |
|
||||
<a href="#" onclick="Effect.multiple('p_text', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
|
||||
<a href="#" onclick="Effect.multiple('p_text', Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a>
|
||||
</p>
|
||||
|
||||
<div id="many_test" style="height:50px;">1234567890ABCDEFG</div>
|
||||
<div style="clear:both;"> </div>
|
||||
|
||||
<a href="#" onclick="Effect.multiple('many_test', Effect.Appear, {speed:0.5, duration:3.0, afterFinishInternal:function(){}}); return false;">Appear</a> |
|
||||
<a href="#" onclick="Effect.multiple('many_test', Effect.Fade, {speed:0.05, afterFinishInternal:function(){}}); return false;">Fade</a> |
|
||||
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.DropOut, {speed:0.07, afterFinishInternal:function(){}}); return false;">DropOut</a> |
|
||||
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.Highlight, {speed:0.07, afterFinishInternal:function(){}}); return false;">Highlight</a> |
|
||||
<a href="#" onclick="Effect.multiple($('many_test').childNodes, Effect.BlindDown, {speed:0.15, afterFinishInternal:function(){}}); return false;">BlindDown</a>
|
||||
|
||||
<script type="text/javascript" language="javascript">
|
||||
// <![CDATA[
|
||||
Effect.tagifyText('h1_text');
|
||||
Effect.tagifyText('p_text');
|
||||
Effect.tagifyText('many_test');
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<br/><br/>
|
||||
|
||||
<a href="#" onclick="Effect.multiple(document.getElementsByTagName('span'), Effect.Fade, {speed:0.04, afterFinishInternal:function(){}}); return false;">Fade all spans on page</a>
|
||||
<p id="debug"> <p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
20
javascript/scoluos/test/run_functional_tests.html
Executable file
20
javascript/scoluos/test/run_functional_tests.html
Executable file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<title>script.aculo.us functional tests</title>
|
||||
</head>
|
||||
|
||||
<frameset cols="250,*">
|
||||
<frame name="controls" src="functional/index.html" />
|
||||
<frame name="test" />
|
||||
</frameset>
|
||||
|
||||
<noframes>
|
||||
<body>
|
||||
Heya, 1995!
|
||||
</body>
|
||||
</noframes>
|
||||
|
||||
</html>
|
||||
20
javascript/scoluos/test/run_unit_tests.html
Executable file
20
javascript/scoluos/test/run_unit_tests.html
Executable file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<title>script.aculo.us Unit Test Runner</title>
|
||||
</head>
|
||||
|
||||
<frameset cols="250,*">
|
||||
<frame name="controls" src="unit/index.html" />
|
||||
<frame name="test" />
|
||||
</frameset>
|
||||
|
||||
<noframes>
|
||||
<body>
|
||||
Heya, 1995!
|
||||
</body>
|
||||
</noframes>
|
||||
|
||||
</html>
|
||||
90
javascript/scoluos/test/test.css
Executable file
90
javascript/scoluos/test/test.css
Executable file
@@ -0,0 +1,90 @@
|
||||
body, div, p, h1, h2, h3, ul, ol, span, a, table, td, form, img, li {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size:0.8em;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
background: #9DC569;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navigation h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.navigation h2 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
border: 1px solid #e8a400;
|
||||
border-bottom: 0;
|
||||
background: #ffc;
|
||||
color: #E8A400;
|
||||
padding: 8px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navigation ul {
|
||||
margin-top: 0;
|
||||
border: 1px solid #E8A400;
|
||||
border-top: none;
|
||||
background: #ffc;
|
||||
padding: 8px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.navigation ul li {
|
||||
font-size: 12px;
|
||||
list-style-type: none;
|
||||
margin-top: 1px;
|
||||
margin-bottom: 1px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.navigation a {
|
||||
color: #ffc;
|
||||
}
|
||||
|
||||
.navigation ul li a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#log {
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 2px solid #000;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
#logsummary {
|
||||
margin-bottom: 1em;
|
||||
padding: 1ex;
|
||||
border: 1px solid #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#logtable {
|
||||
width:100%;
|
||||
border-collapse: collapse;
|
||||
border: 1px dotted #666;
|
||||
}
|
||||
|
||||
#logtable td, #logtable th {
|
||||
text-align: left;
|
||||
padding: 3px 8px;
|
||||
border: 1px dotted #666;
|
||||
}
|
||||
|
||||
#logtable .passed {
|
||||
background-color: #cfc;
|
||||
}
|
||||
|
||||
#logtable .failed, #logtable .error {
|
||||
background-color: #fcc;
|
||||
}
|
||||
|
||||
#logtable .nameCell {
|
||||
cursor: pointer;
|
||||
}
|
||||
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_ipce_alt_text.html
Executable file
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_ipce_alt_text.html
Executable file
@@ -0,0 +1 @@
|
||||
ntbe
|
||||
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_result.html
Executable file
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_result.html
Executable file
@@ -0,0 +1 @@
|
||||
Server received: To be edited
|
||||
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_result2.html
Executable file
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_result2.html
Executable file
@@ -0,0 +1 @@
|
||||
New to be edited - edited
|
||||
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_tagged.html
Executable file
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_tagged.html
Executable file
@@ -0,0 +1 @@
|
||||
<span>New to be edited - edited</span>
|
||||
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_text.html
Executable file
1
javascript/scoluos/test/unit/_ajax_inplaceeditor_text.html
Executable file
@@ -0,0 +1 @@
|
||||
Text from server
|
||||
20
javascript/scoluos/test/unit/_ajax_updater_result.html
Executable file
20
javascript/scoluos/test/unit/_ajax_updater_result.html
Executable file
@@ -0,0 +1,20 @@
|
||||
Test text
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
alert('fragment1 hit!');
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
more test text
|
||||
|
||||
|
||||
<script>alert('fragment2 hit!')</script>
|
||||
|
||||
|
||||
even more test text
|
||||
|
||||
<script type="text/javascript">
|
||||
alert('fragment3 hit!');
|
||||
</script> some other test text
|
||||
|
||||
11
javascript/scoluos/test/unit/_autocomplete_result.html
Executable file
11
javascript/scoluos/test/unit/_autocomplete_result.html
Executable file
@@ -0,0 +1,11 @@
|
||||
<ul>
|
||||
<li>test1</li><li>test2</li>
|
||||
<li>test3</li>
|
||||
<li><b>BOLD</b></li>
|
||||
|
||||
<li><span class="informal">(GET ME NOT)</span>(GET <ME> INSTEAD)</li>
|
||||
|
||||
<li>Here we have <a href="_autocomplete_result.html">a link</a> which should work</li>
|
||||
|
||||
<li>Here we have some international ©∏Á®Äç†∑rß</li>
|
||||
</ul>
|
||||
1
javascript/scoluos/test/unit/_autocomplete_result_nobr.html
Executable file
1
javascript/scoluos/test/unit/_autocomplete_result_nobr.html
Executable file
@@ -0,0 +1 @@
|
||||
<ul><li>test1</li><li>test2</li><li>test3</li><li><b>BOLD</b></li><li><span class="informal">(GET ME NOT)</span>(GET <ME> INSTEAD)</li><li>Here we have <a href="_autocomplete_result.html">a link</a> which should work</li><li>Here we have some international ©∏Á®Äç†∑rß</li></ul>
|
||||
243
javascript/scoluos/test/unit/ajax_autocompleter_test.html
Executable file
243
javascript/scoluos/test/unit/ajax_autocompleter_test.html
Executable file
@@ -0,0 +1,243 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<!-- vim:expandtab=on
|
||||
-->
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style>
|
||||
.selected { background-color: #888; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Tests for Ajax.Autocompleter in controls.js.
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<input id="ac_input" type="text" autocomplete="off" />
|
||||
<div id="ac_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
|
||||
|
||||
<input id="ac_input_br" type="text" autocomplete="off" />
|
||||
<div id="ac_update_br" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
|
||||
|
||||
<input id="ac2_input" type="text" autocomplete="off" />
|
||||
<div id="ac2_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
|
||||
|
||||
<input id="actoken_input" type="text" autocomplete="off" />
|
||||
<div id="actoken_update" style="display:none;border:1px solid black;background-color:white;position:relative;"></div>
|
||||
|
||||
<input id="dummy_element" type="text" autocomplete="off" />
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
// Integration test, tests the entire cycle
|
||||
testAjaxAutocompleter: function() { with(this) {
|
||||
var ac = new Ajax.Autocompleter('ac_input','ac_update','_autocomplete_result.html',
|
||||
{ method: 'get' }); //override so we can use a static for the result
|
||||
assertInstanceOf(Ajax.Autocompleter, ac);
|
||||
|
||||
// box not visible
|
||||
assertNotVisible('ac_update');
|
||||
|
||||
// focus, but box not visible
|
||||
Event.simulateMouse('ac_input', 'click');
|
||||
assertNotVisible('ac_update');
|
||||
|
||||
Event.simulateKeys('ac_input','abcdefg');
|
||||
assertEqual('abcdefg', $('ac_input').value);
|
||||
|
||||
// check box popping up on input
|
||||
wait(1000, function() { with(this) {
|
||||
assertVisible('ac_update');
|
||||
assertEqual('test1', $('ac_update').firstChild.firstChild.innerHTML);
|
||||
assertEqual('test2', $('ac_update').firstChild.firstChild.nextSibling.innerHTML);
|
||||
|
||||
// intl. characters return (UTF-8)
|
||||
assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update').firstChild.lastChild.innerHTML);
|
||||
|
||||
// first entry should be selected
|
||||
assert(Element.hasClassName($('ac_update').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
|
||||
|
||||
Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
|
||||
|
||||
// second entry should be selected
|
||||
assert(!Element.hasClassName($('ac_update').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
|
||||
assert(Element.hasClassName($('ac_update').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
|
||||
|
||||
// check selecting with <TAB>
|
||||
Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_TAB});
|
||||
assertEqual('test2',$('ac_input').value);
|
||||
|
||||
// check box going away
|
||||
wait(500, function() { with(this) {
|
||||
assertNotVisible('ac_update');
|
||||
|
||||
// check selecting with mouse click
|
||||
Event.simulateKeys('ac_input','3');
|
||||
assertEqual('test23', $('ac_input').value);
|
||||
wait(1000, function() { with(this) {
|
||||
assertVisible('ac_update');
|
||||
Event.simulateMouse($('ac_update').firstChild.childNodes[4],'click');
|
||||
|
||||
wait(1000, function() { with(this) {
|
||||
// tests if removal of 'informal' nodes and HTML escaping works
|
||||
assertEqual('(GET <ME> INSTEAD)',$('ac_input').value);
|
||||
assertNotVisible('ac_update');
|
||||
|
||||
// check cancelling with <ESC>
|
||||
Event.simulateKeys('ac_input','abcdefg');
|
||||
|
||||
wait(1000, function() { with(this) {
|
||||
assertVisible('ac_update');
|
||||
assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
|
||||
|
||||
Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_DOWN});
|
||||
Event.simulateKey('ac_input','keypress',{keyCode:Event.KEY_ESC});
|
||||
|
||||
assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input').value);
|
||||
}});
|
||||
}});
|
||||
}});
|
||||
}});
|
||||
}});
|
||||
}},
|
||||
|
||||
testAfterUpdateElement: function() { with(this) {
|
||||
var ac = new Ajax.Autocompleter('ac2_input','ac2_update','_autocomplete_result.html',
|
||||
{ method: 'get',
|
||||
afterUpdateElement: function(element,selectedElement) {
|
||||
element.value = 'afterupdate:' + selectedElement.tagName;
|
||||
}
|
||||
});
|
||||
assertInstanceOf(Ajax.Autocompleter, ac);
|
||||
|
||||
Event.simulateMouse('ac2_input', 'click');
|
||||
Event.simulateKeys('ac2_input','abcdefg');
|
||||
|
||||
wait(1000, function() { with(this) {
|
||||
assertVisible('ac2_update');
|
||||
Event.simulateKey('ac2_input','keypress',{keyCode:Event.KEY_TAB});
|
||||
|
||||
assertEqual('afterupdate:LI',$('ac2_input').value);
|
||||
}});
|
||||
}},
|
||||
|
||||
testTokenizing: function() { with(this) {
|
||||
var actoken = new Ajax.Autocompleter('actoken_input','ac_update','_autocomplete_result.html',
|
||||
{ tokens:',', method: 'get' });
|
||||
assertInstanceOf(Ajax.Autocompleter, actoken);
|
||||
|
||||
Event.simulateKeys('actoken_input','abc');
|
||||
|
||||
wait(1000, function() { with(this) {
|
||||
Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
|
||||
assertEqual('test1',$('actoken_input').value);
|
||||
Event.simulateKeys('actoken_input',',abc');
|
||||
wait(1000, function() { with(this) {
|
||||
Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_DOWN});
|
||||
Event.simulateKey('actoken_input','keypress',{keyCode:Event.KEY_TAB});
|
||||
assertEqual('test1,test2',$('actoken_input').value);
|
||||
// Simulating KEY_LEFT's prior to a 'b' doesn't work! So slightly ugly here...
|
||||
$('actoken_input').value = 'test1b,test2';
|
||||
actoken.onObserverEvent();
|
||||
wait(1000, function() { with(this) {
|
||||
for (var index = 0; index < 2; ++index)
|
||||
Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_DOWN});
|
||||
Event.simulateKey('actoken_input', 'keypress', {keyCode: Event.KEY_TAB});
|
||||
assertEqual('test3,test2', $('actoken_input').value);
|
||||
}});
|
||||
}});
|
||||
}});
|
||||
}},
|
||||
|
||||
// Same integration test, results has no linebreaks
|
||||
testAjaxAutocompleterNoLinebreaksInResult: function() { with(this) {
|
||||
var ac = new Ajax.Autocompleter('ac_input_br','ac_update_br','_autocomplete_result_nobr.html',
|
||||
{ method: 'get' }); //override so we can use a static for the result
|
||||
assertInstanceOf(Ajax.Autocompleter, ac);
|
||||
|
||||
// box not visible
|
||||
assertNotVisible('ac_update_br');
|
||||
|
||||
// focus, but box not visible
|
||||
Event.simulateMouse('ac_input_br', 'click');
|
||||
assertNotVisible('ac_update_br');
|
||||
|
||||
Event.simulateKeys('ac_input_br','abcdefg');
|
||||
assertEqual('abcdefg', $('ac_input_br').value);
|
||||
|
||||
// check box popping up on input
|
||||
wait(1000, function() { with(this) {
|
||||
assertVisible('ac_update_br');
|
||||
assertEqual('test1', $('ac_update_br').firstChild.firstChild.innerHTML);
|
||||
assertEqual('test2', $('ac_update_br').firstChild.firstChild.nextSibling.innerHTML);
|
||||
|
||||
// intl. characters return (UTF-8)
|
||||
assertEqual('Here we have some international ©∏Á®Äç†∑rß', $('ac_update_br').firstChild.lastChild.innerHTML);
|
||||
|
||||
// first entry should be selected
|
||||
assert(Element.hasClassName($('ac_update_br').firstChild.firstChild, 'selected'),'Selected item should have a className of: selected');
|
||||
|
||||
Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
|
||||
|
||||
// second entry should be selected
|
||||
assert(!Element.hasClassName($('ac_update_br').firstChild.firstChild),'Item shouldn\'t have a className of: selected');
|
||||
assert(Element.hasClassName($('ac_update_br').firstChild.firstChild.nextSibling, 'selected'),'Second entry should have a className of: selected');
|
||||
|
||||
// check selecting with <TAB>
|
||||
Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_TAB});
|
||||
assertEqual('test2',$('ac_input_br').value);
|
||||
|
||||
// check box going away
|
||||
wait(500, function() { with(this) {
|
||||
assertNotVisible('ac_update_br');
|
||||
|
||||
// check selecting with mouse click
|
||||
Event.simulateKeys('ac_input_br','3');
|
||||
assertEqual('test23', $('ac_input_br').value);
|
||||
wait(1000, function() { with(this) {
|
||||
assertVisible('ac_update_br');
|
||||
Event.simulateMouse($('ac_update_br').firstChild.childNodes[4],'click');
|
||||
|
||||
wait(1000, function() { with(this) {
|
||||
// tests if removal of 'informal' nodes and HTML escaping works
|
||||
assertEqual('(GET <ME> INSTEAD)',$('ac_input_br').value);
|
||||
assertNotVisible('ac_update_br');
|
||||
|
||||
// check cancelling with <ESC>
|
||||
Event.simulateKeys('ac_input_br','abcdefg');
|
||||
|
||||
wait(1000, function() { with(this) {
|
||||
assertVisible('ac_update_br');
|
||||
assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
|
||||
|
||||
Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_DOWN});
|
||||
Event.simulateKey('ac_input_br','keypress',{keyCode:Event.KEY_ESC});
|
||||
|
||||
assertEqual('(GET <ME> INSTEAD)abcdefg', $('ac_input_br').value);
|
||||
}});
|
||||
}});
|
||||
}});
|
||||
}});
|
||||
}});
|
||||
}}
|
||||
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
895
javascript/scoluos/test/unit/ajax_inplaceeditor_test.html
Executable file
895
javascript/scoluos/test/unit/ajax_inplaceeditor_test.html
Executable file
@@ -0,0 +1,895 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Tests for <code>Ajax.InPlaceEditor</code> and <code>Ajax.InPlaceCollectionEditor</code> in controls.js
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<h1 id="tobeedited">To be edited</h1>
|
||||
<a id="tobeeditedEditControl" href="#">edit</a>
|
||||
|
||||
<p id="newtbe">New to be edited</p>
|
||||
<p id="newtbe_external">External control for it</p>
|
||||
|
||||
<p id="contains_ampersand">Me & Myself</p>
|
||||
|
||||
<div id="tobeeditedMultiLine">First line<br/>
|
||||
Second line<br/>
|
||||
Third line</div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
var IPCE_COLLECTION = [
|
||||
['tbe', 'To be edited'],
|
||||
['ntbe', 'New to be edited'],
|
||||
['ntbe2', 'New to be edited 2'],
|
||||
['ntbe3', 'New to be edited 3']
|
||||
];
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
setup: function() { with(this) {
|
||||
inPlaceEditor = new Ajax.InPlaceEditor($('tobeedited'), '_ajax_inplaceeditor_result.html', {
|
||||
externalControl: $('tobeeditedEditControl'),
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
inPlaceEditorMultiLine = new Ajax.InPlaceEditor($('tobeeditedMultiLine'), '_ajax_inplaceeditor_result.html', {
|
||||
ajaxOptions: {method: 'get'} //override so we can use a static for the result
|
||||
});
|
||||
}},
|
||||
|
||||
teardown: function() { with(this) {
|
||||
inPlaceEditor.dispose();
|
||||
inPlaceEditorMultiLine.dispose();
|
||||
}},
|
||||
|
||||
// Original-version tests, still pass thx to backward compatibility
|
||||
|
||||
// Integration test, tests the entire cycle
|
||||
testInPlaceEditor: function() { with(this) {
|
||||
Event.simulateMouse('tobeedited','click');
|
||||
assertHidden($('tobeedited'));
|
||||
assertNotNull(document.forms[0]);
|
||||
assertEqual("cancel", document.forms[0].lastChild.innerHTML);
|
||||
assertVisible(document.forms[0]);
|
||||
|
||||
Event.simulateMouse(document.forms[0].lastChild,'click');
|
||||
assertNull(document.forms[0]);
|
||||
assertVisible($('tobeedited'));
|
||||
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
|
||||
Event.simulateMouse('tobeedited','mouseover');
|
||||
Event.simulateMouse('tobeedited','click');
|
||||
|
||||
assertEqual("INPUT", document.forms[0].firstChild.tagName);
|
||||
assertEqual("To be edited", document.forms[0].firstChild.value);
|
||||
assertEqual("INPUT", document.forms[0].childNodes[1].tagName);
|
||||
assertEqual("submit", document.forms[0].childNodes[1].type);
|
||||
assertEqual("To be edited", document.forms[0].firstChild.value);
|
||||
assert(Element.hasClassName(document.forms[0], 'inplaceeditor-form'),
|
||||
"form doesn't have proper class: " + document.forms[0].className);
|
||||
|
||||
Event.simulateMouse(document.forms[0].childNodes[1],'click');
|
||||
|
||||
assertVisible($('tobeedited'));
|
||||
assertEqual("Saving...", $('tobeedited').innerHTML);
|
||||
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
|
||||
assert(Element.hasClassName($('tobeedited'), 'inplaceeditor-saving'),
|
||||
"doesn't have saving class");
|
||||
|
||||
wait(1000, function() {
|
||||
assertEqual("Server received: To be edited", $('tobeedited').innerHTML);
|
||||
assertNull(document.forms[0]);
|
||||
assertVisible($('tobeedited'));
|
||||
assert(!Element.hasClassName($('tobeedited'), 'inplaceeditor-saving'));
|
||||
});
|
||||
}},
|
||||
|
||||
testHovering: function() { with(this) {
|
||||
Event.simulateMouse('tobeedited','mouseover');
|
||||
assertEqual("rgb(255, 255, 153)", Element.getStyle('tobeedited','background-color'));
|
||||
|
||||
Event.simulateMouse('tobeedited','mouseout');
|
||||
wait(1100, function() {
|
||||
assertEqual("transparent", Element.getStyle('tobeedited','background-color'),
|
||||
"should be transparent after mouse leaves element");
|
||||
|
||||
Event.simulateMouse('tobeedited','click');
|
||||
})
|
||||
}},
|
||||
|
||||
testLoadsTextFromServer: function() { with(this) {
|
||||
inPlaceEditor.options.loadTextURL = '_ajax_inplaceeditor_text.html';
|
||||
inPlaceEditor.enterEditMode();
|
||||
assertEqual('Loading...', inPlaceEditor._form.value.value);
|
||||
assert(inPlaceEditor._form.value.disabled);
|
||||
assert(Element.hasClassName(inPlaceEditor._form, 'inplaceeditor-loading'));
|
||||
wait(1000, function() {
|
||||
assertEqual('Text from server', inPlaceEditor._form.value.value);
|
||||
assert(!inPlaceEditor._form.value.disabled);
|
||||
});
|
||||
}},
|
||||
|
||||
testDisposesProperly: function() { with(this) {
|
||||
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
|
||||
inPlaceEditor.dispose();
|
||||
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
|
||||
assertVisible($('tobeedited'));
|
||||
Event.simulateMouse('tobeedited','click');
|
||||
assertVisible($('tobeedited'));
|
||||
}},
|
||||
|
||||
testUsesTextAreaWhenMoreThanOneRows: function() { with(this) {
|
||||
inPlaceEditor.options.rows = 5;
|
||||
inPlaceEditor.enterEditMode();
|
||||
assertEqual("TEXTAREA", document.forms[0].firstChild.tagName);
|
||||
assertEqual("BR", document.forms[0].childNodes[1].tagName);
|
||||
}},
|
||||
|
||||
testCanSpecifyAllTextsThroughOptions: function() { with(this) {
|
||||
// swedish translation ;-)
|
||||
inPlaceEditor.options.okText = "spara";
|
||||
inPlaceEditor.options.cancelText = "avbryt";
|
||||
inPlaceEditor.options.savingText = "Sparar...";
|
||||
inPlaceEditor.enterEditMode();
|
||||
assertEqual("spara", document.forms[0].lastChild.previousSibling.value);
|
||||
assertEqual("avbryt", document.forms[0].lastChild.innerHTML);
|
||||
inPlaceEditor.showSaving();
|
||||
assertEqual("Sparar...", $('tobeedited').innerHTML);
|
||||
}},
|
||||
|
||||
testCanSpecifyFormIdThroughOptions: function() { with(this) {
|
||||
inPlaceEditor.enterEditMode();
|
||||
// default form id
|
||||
assertEqual("tobeedited-inplaceeditor", document.forms[0].id);
|
||||
inPlaceEditor.leaveEditMode();
|
||||
inPlaceEditor.options.formId = "myFormId";
|
||||
inPlaceEditor.enterEditMode();
|
||||
assertEqual("myFormId", document.forms[0].id);
|
||||
}},
|
||||
|
||||
testCantEditWhileSaving: function() { with(this) {
|
||||
inPlaceEditor.prepareSubmission();
|
||||
Event.simulateMouse('tobeedited','mouseover');
|
||||
assertEqual("transparent", Element.getStyle('tobeedited','background-color'));
|
||||
Event.simulateMouse('tobeedited','click');
|
||||
assertVisible($('tobeedited'));
|
||||
}},
|
||||
|
||||
testCallbackFunctionGetsCalled: function() { with(this) {
|
||||
var called = false;
|
||||
inPlaceEditor.options.callback = function(form) {
|
||||
called = true;
|
||||
}
|
||||
Event.simulateMouse('tobeedited','click');
|
||||
Event.simulateMouse(document.forms[0].childNodes[1],'click');
|
||||
assert(called, "callback was not called");
|
||||
}},
|
||||
|
||||
testCanUseExternalElementToGoIntoEditMode: function() { with(this) {
|
||||
Event.simulateMouse('tobeeditedEditControl','click');
|
||||
assertNotNull(document.forms[0], "external control didn't work");
|
||||
// doesn't work if you click it again while in edit mode
|
||||
Event.simulateMouse('tobeeditedEditControl','click');
|
||||
assertNull(document.forms[1], "external control created two forms");
|
||||
assertNotVisible($('tobeeditedEditControl'));
|
||||
Event.simulateMouse(document.forms[0].childNodes[2],'click');
|
||||
assertVisible($('tobeeditedEditControl'));
|
||||
}},
|
||||
|
||||
// Rewritten-version tests
|
||||
testControlOptions: function() {with(this) {
|
||||
// Default, then explicit default-equivalent, settings
|
||||
[{}, { okControl: 'button', cancelControl: 'link' }].each(function(opts) {
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe', '', opts);
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var submits = $('newtbe-inplaceeditor').getInputs('submit');
|
||||
assertEqual(1, submits.length, 'Not just one submit');
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, submits[0].value, 'Incorrect button label');
|
||||
assert(submits[0].hasClassName('editor_ok_button'), 'Missing class name on ok button');
|
||||
var links = $$('#newtbe-inplaceeditor a');
|
||||
assertEqual(1, links.length, 'Not just one link');
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, links[0].firstChild.nodeValue, 'Incorrect cancel link text');
|
||||
assert(links[0].href.endsWith('#'), 'Incorrect cancel link href');
|
||||
assert(links[0].hasClassName('editor_cancel_link'), 'Missing class name on cancel link');
|
||||
ipe.dispose();
|
||||
});
|
||||
// Reverse: ok link, cancel button
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: 'link', cancelControl: 'button' });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var links = $$('#newtbe-inplaceeditor a');
|
||||
assertEqual(1, links.length, 'Not just one link');
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, links[0].firstChild.nodeValue, 'Incorrect ok link text');
|
||||
assert(links[0].href.endsWith('#'), 'Incorrect ok link href');
|
||||
assert(links[0].hasClassName('editor_ok_link'), 'Missing class name on ok link');
|
||||
var submits = $('newtbe-inplaceeditor').getInputs('submit');
|
||||
assertEqual(1, submits.length, 'Not just one submit');
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, submits[0].value, 'Incorrect button label');
|
||||
assert(submits[0].hasClassName('editor_cancel_button'), 'Missing class name on cancel button');
|
||||
ipe.dispose();
|
||||
// Full links
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: 'link' });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var links = $$('#newtbe-inplaceeditor a');
|
||||
assertEqual(2, links.length, 'There should be two links');
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, links[0].firstChild.nodeValue, 'Incorrect ok link text');
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, links[1].firstChild.nodeValue, 'Incorrect cancel link text');
|
||||
assert(links[0].href.endsWith('#'), 'Incorrect ok link href');
|
||||
assert(links[1].href.endsWith('#'), 'Incorrect cancel link href');
|
||||
assert(links[0].hasClassName('editor_ok_link'), 'Missing class name on ok link');
|
||||
assert(links[1].hasClassName('editor_cancel_link'), 'Missing class name on cancel link');
|
||||
var submits = $('newtbe-inplaceeditor').getInputs('submit');
|
||||
assertEqual(0, submits.length, 'There should be no submit');
|
||||
ipe.dispose();
|
||||
// Full buttons
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { cancelControl: 'button' });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var submits = $('newtbe-inplaceeditor').getInputs('submit');
|
||||
assertEqual(2, submits.length, 'There should be two submits');
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.okText, submits[0].value, 'Incorrect ok button text');
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.cancelText, submits[1].value, 'Incorrect cancel button text');
|
||||
assert(submits[0].hasClassName('editor_ok_button'), 'Missing class name on ok button');
|
||||
assert(submits[1].hasClassName('editor_cancel_button'), 'Missing class name on cancel button');
|
||||
var links = $$('#newtbe-inplaceeditor a');
|
||||
assertEqual(0, links.length, 'There should be no link');
|
||||
ipe.dispose();
|
||||
// No cancel
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { cancelControl: false });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var submits = $('newtbe-inplaceeditor').getInputs('submit');
|
||||
assertEqual(1, submits.length, 'Not just one submit');
|
||||
var links = $$('#newtbe-inplaceeditor a');
|
||||
assertEqual(0, links.length, 'There should be no link');
|
||||
ipe.dispose();
|
||||
// No OK
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var submits = $('newtbe-inplaceeditor').getInputs('submit');
|
||||
assertEqual(0, submits.length, 'There should be no submit');
|
||||
var links = $$('#newtbe-inplaceeditor a');
|
||||
assertEqual(1, links.length, 'Not just one link');
|
||||
ipe.dispose();
|
||||
// Nothing
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false, cancelControl: false });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var submits = $('newtbe-inplaceeditor').getInputs('submit');
|
||||
assertEqual(0, submits.length, 'There should be no submit');
|
||||
var links = $$('#newtbe-inplaceeditor a');
|
||||
assertEqual(0, links.length, 'There should be no link');
|
||||
ipe.dispose();
|
||||
// Texts: default mode
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { okControl: false, cancelControl: false });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var submits = $('newtbe-inplaceeditor').getInputs('submit');
|
||||
assertEqual(0, submits.length, 'There should be no submit');
|
||||
var links = $$('#newtbe-inplaceeditor a');
|
||||
assertEqual(0, links.length, 'There should be no link');
|
||||
ipe.dispose();
|
||||
// Texts: before w/ controls
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { textBeforeControls: '[' });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var text = $('newtbe-inplaceeditor').childNodes[1];
|
||||
assertEqual(3, text.nodeType, 'Missing/misplaced initial text');
|
||||
assertEqual('[', text.nodeValue, 'Incorrect text');
|
||||
ipe.dispose();
|
||||
// Texts: after w/ controls
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { textAfterControls: ']' });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var text = $('newtbe-inplaceeditor').childNodes[3];
|
||||
assertEqual(3, text.nodeType, 'Missing/misplaced final text');
|
||||
assertEqual(']', text.nodeValue, 'Incorrect text');
|
||||
ipe.dispose();
|
||||
// Texts: between w/ controls
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { textBetweenControls: ' ' });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var text = $('newtbe-inplaceeditor').childNodes[2];
|
||||
assertEqual(3, text.nodeType, 'Missing/misplaced middle text');
|
||||
assertEqual(' ', text.nodeValue, 'Incorrect text');
|
||||
ipe.dispose();
|
||||
// Texts: before w/ no control
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { textBeforeControls: '[', okControl: false, cancelControl: false });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var nodes = $('newtbe-inplaceeditor').childNodes;
|
||||
assertEqual(1, nodes.length, 'Too many nodes in the form.');
|
||||
ipe.dispose();
|
||||
// Texts: after w/ no control
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { textAfterControls: ']', okControl: false, cancelControl: false });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var nodes = $('newtbe-inplaceeditor').childNodes;
|
||||
assertEqual(1, nodes.length, 'Too many nodes in the form.');
|
||||
ipe.dispose();
|
||||
// Texts: between w/ less than two controls
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '', { textBetweenControls: ' ', okControl: false });
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var nodes = $('newtbe-inplaceeditor').childNodes;
|
||||
assertEqual(2, nodes.length, 'The form should have only two nodes (edit+cancel)');
|
||||
assertEnumEqual(['input', 'a'], $A(nodes).pluck('tagName').invoke('toLowerCase'), 'Incorrect nodes');
|
||||
ipe.dispose();
|
||||
}},
|
||||
|
||||
testExternalControlOnly: function() {with(this) {
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
|
||||
externalControl: 'newtbe_external'
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assert(ipe._editing, 'Clicking on the element should turn editable.');
|
||||
ipe.leaveEditMode();
|
||||
Event.simulateMouse('newtbe_external', 'click');
|
||||
assert(ipe._editing, 'Clicking on the external control should turn editable.');
|
||||
ipe.dispose();
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
|
||||
externalControl: 'newtbe_external', externalControlOnly: true
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assert(!ipe._editing, 'Clicking on the element should not turn editable.');
|
||||
Event.simulateMouse('newtbe_external', 'click');
|
||||
assert(ipe._editing, 'Clicking on the external control should turn editable.');
|
||||
ipe.dispose();
|
||||
}},
|
||||
|
||||
testNewCallbacks: function() {with(this) {
|
||||
var called = [];
|
||||
var opts = {
|
||||
onEnterHover: function() { called.push('onEnterHover') },
|
||||
onEnterEditMode: function() { called.push('onEnterEditMode') },
|
||||
onLeaveEditMode: function() { called.push('onLeaveEditMode') },
|
||||
callback: function(form) {
|
||||
called.push('callback');
|
||||
return form.serialize();
|
||||
},
|
||||
onFailure: function() { called.push('onFailure') },
|
||||
onComplete: function() { called.push('onComplete') },
|
||||
onLeaveEditMode: function() { called.push('onLeaveEditMode') }
|
||||
}
|
||||
// Proper success
|
||||
$('newtbe').update('New to be edited');
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', opts);
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
var postUpdateHTML;
|
||||
wait(1000, function() {
|
||||
assertEnumEqual(['onEnterHover', 'onEnterEditMode', 'callback', 'onLeaveEditMode', 'onComplete'],
|
||||
called.uniq(), 'Incorrect callback sequence');
|
||||
postUpdateHTML = $('newtbe').innerHTML.strip();
|
||||
assertEqual('New to be edited - edited', postUpdateHTML, 'Update trouble');
|
||||
ipe.dispose();
|
||||
// Failure
|
||||
called.clear();
|
||||
// Any ideas? Requesting file:// URLs on non-existent stuff doesn't trigger A.U's onFailure...
|
||||
});
|
||||
}},
|
||||
|
||||
testCallbackFunctionReturnTypes: function() { with(this) {
|
||||
var params = [];
|
||||
var responder = {
|
||||
onCreate: function(req) {
|
||||
params.push(req.options.parameters);
|
||||
}
|
||||
};
|
||||
Ajax.Responders.register(responder);
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
|
||||
callback: function(form) {
|
||||
return 'foo=bar';
|
||||
}
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
wait(200, function() {
|
||||
assert(params[0] && params[0].foo == 'bar');
|
||||
ipe.dispose();
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
|
||||
callback: function(form) {
|
||||
return { bar: '?', 'r&d': 42 };
|
||||
}
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
wait(200, function() {
|
||||
assert(params[1] && params[1].bar == '?' && params[1]['r&d'] == 42);
|
||||
ipe.dispose();
|
||||
Ajax.Responders.unregister(responder);
|
||||
})
|
||||
});
|
||||
}},
|
||||
|
||||
testHtmlResponse: function() {with(this) {
|
||||
// Default (true) -> A.U w/ evalScripts: true
|
||||
$('newtbe').update('New to be edited');
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html');
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
var postUpdateHTML;
|
||||
wait(1000, function() {
|
||||
postUpdateHTML = $('newtbe').innerHTML.strip();
|
||||
assertEqual('New to be edited - edited', postUpdateHTML, 'Should have updated contents');
|
||||
ipe.dispose();
|
||||
// Explicit htmlResponse: true -> A.U w/ evalScripts: true
|
||||
$('newtbe').update('New to be edited');
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', { htmlResponse: true });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
wait(1000, function() {
|
||||
postUpdateHTML = $('newtbe').innerHTML.strip();
|
||||
assertEqual('New to be edited - edited', postUpdateHTML, 'Should have updated contents');
|
||||
ipe.dispose();
|
||||
// Explicit htmlResponse: false -> A.R
|
||||
$('newtbe').update('New to be edited');
|
||||
ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', { htmlResponse: false });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
wait(1000, function() {
|
||||
postUpdateHTML = $('newtbe').innerHTML.strip();
|
||||
assertEqual(ipe.options.savingText, postUpdateHTML, 'Should not have updated contents');
|
||||
ipe.dispose();
|
||||
});
|
||||
});
|
||||
});
|
||||
}},
|
||||
|
||||
testSingleOrMultipleRows: function() {with(this) {
|
||||
// Single-line value, rows <= 1 -> 1
|
||||
$('newtbe').update('New to be edited');
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html');
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assertEqual('input', ipe._controls.editor.tagName.toLowerCase());
|
||||
ipe.dispose();
|
||||
// Single-line value, rows > 1 (2) -> 2
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { rows: 2 });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
|
||||
assertEqual(2, ipe._controls.editor.rows);
|
||||
ipe.dispose();
|
||||
// Multiple-line value, rows <= 1, autoRows default (3) -> 3
|
||||
$('newtbe').update('Line 1\nLine 2\nLine 3');
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html');
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.autoRows, ipe._controls.editor.rows);
|
||||
ipe.dispose();
|
||||
// Multiple-line value, rows <= 1, autoRows custom (5) -> 5
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { autoRows: 5 });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
|
||||
assertEqual(5, ipe._controls.editor.rows);
|
||||
ipe.dispose();
|
||||
// Multiple-line value, rows > 1 (2), autoRows default (3) -> 2
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { rows: 2 });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
|
||||
assertEqual(2, ipe._controls.editor.rows);
|
||||
ipe.dispose();
|
||||
// Multiple-line value, rows > 1 (2), autoRows custom (5) -> 2
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { rows: 2, autoRows: 5 });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assertEqual('textarea', ipe._controls.editor.tagName.toLowerCase());
|
||||
assertEqual(2, ipe._controls.editor.rows);
|
||||
ipe.dispose();
|
||||
}},
|
||||
|
||||
testFormCustomizationCallback: function() {with(this) {
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe', '_ajax_inplaceeditor_result2.html', {
|
||||
onFormCustomization: function(ipe, form) {
|
||||
form.appendChild(new Element('input', { type: 'text', name: 'test', value: 'foobar' }));
|
||||
}
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assertEqual('foobar', Form.serialize(ipe._form, true).test, 'Custom field not present');
|
||||
ipe.dispose();
|
||||
}},
|
||||
|
||||
testPostCreationBehavior: function() {with(this) {
|
||||
var focused = false, activated = false;
|
||||
function override(name, fx) {
|
||||
arguments.callee.backups[name] = Field.Methods[name];
|
||||
Field.Methods[name] = fx;
|
||||
};
|
||||
override.backups = {};
|
||||
function restore() {
|
||||
$A(arguments).each(function(n) {
|
||||
Field.Methods[name] = override.backups[name];
|
||||
});
|
||||
Element.addMethods();
|
||||
};
|
||||
override('activate', function(elt) {
|
||||
override.backups['activate'](elt);
|
||||
activated = true;
|
||||
});
|
||||
override('focus', function(elt) { focused = true; });
|
||||
Element.addMethods();
|
||||
// fieldPostCreation default (activate)
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html');
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assert(focused && activated, "Should be focused and activated (resp. " + focused + " and " + activated + ')');
|
||||
ipe.dispose();
|
||||
// fieldPostCreation == 'focus'
|
||||
focused = activated = false;
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { fieldPostCreation: 'focus' });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assert(focused && !activated, "Should be focused, not activated (resp. " + focused + " and " + activated + ')');
|
||||
ipe.dispose();
|
||||
// fieldPostCreation == false
|
||||
focused = activated = false;
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { fieldPostCreation: false });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assert(!focused && !activated, "Should be neither focused nor activated (resp. " + focused + " and " + activated + ')');
|
||||
ipe.dispose();
|
||||
// fieldPostCreation == non-false yet neither activate nor focus -> default
|
||||
focused = activated = false;
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { fieldPostCreation: 'foobar' });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
assert(focused && activated, "Should be focused and activated (resp. " + focused + " and " + activated + ')');
|
||||
ipe.dispose();
|
||||
restore('activate', 'focus');
|
||||
}},
|
||||
|
||||
testResponseTagStripping: function() {with(this) {
|
||||
// stripLoadedTextTags default (false)
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html',
|
||||
{ loadTextURL: '_ajax_inplaceeditor_tagged.html' });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
wait(1000, function() {
|
||||
assertEqual('<span>New to be edited - edited</span>', ipe._controls.editor.value.strip());
|
||||
ipe.dispose();
|
||||
// stripLoadedTextTags == true
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html',
|
||||
{ loadTextURL: '_ajax_inplaceeditor_tagged.html',
|
||||
stripLoadedTextTags: true });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
wait(1000, function() {
|
||||
assertEqual('New to be edited - edited', ipe._controls.editor.value.strip());
|
||||
ipe.dispose();
|
||||
});
|
||||
});
|
||||
}},
|
||||
|
||||
testSubmitOnBlur: function() {with(this) {
|
||||
// submitOnBlur default (false)
|
||||
$('newtbe').update('To be edited');
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html');
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
ipe._controls.editor.blur();
|
||||
wait(1000, function() {
|
||||
assertEqual('To be edited', ipe._controls.editor ? ipe._controls.editor.value : '');
|
||||
ipe.dispose();
|
||||
// submitOnBlur == true
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { submitOnBlur: true });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
ipe._controls.editor.blur();
|
||||
wait(1200, function() {
|
||||
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
|
||||
ipe.dispose();
|
||||
});
|
||||
});
|
||||
}},
|
||||
|
||||
testEscReturnKeys: function() {with(this) {
|
||||
// No controls, Esc
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { okControl: false, cancelControl: false});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
|
||||
assert(!ipe._editing, 'Esc should have disabled IPE');
|
||||
ipe.dispose();
|
||||
// Cancel control, Esc
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { okControl: false });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
|
||||
assert(!ipe._editing, 'Esc should have disabled IPE');
|
||||
ipe.dispose();
|
||||
// OK control, Esc
|
||||
var ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { cancelControl: false });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
|
||||
assert(!ipe._editing, 'Esc should have disabled IPE');
|
||||
ipe.dispose();
|
||||
// Both controls, Esc
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html');
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_ESC });
|
||||
assert(!ipe._editing, 'Esc should have disabled IPE');
|
||||
ipe.dispose();
|
||||
// No controls, Return
|
||||
$('newtbe').update('New to be edited');
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { okControl: false, cancelControl: false });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
wait(1000, function() {
|
||||
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
|
||||
ipe.dispose();
|
||||
// Cancel control, Return
|
||||
$('newtbe').update('New to be edited');
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { okControl: false });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
wait(1000, function() {
|
||||
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
|
||||
ipe.dispose();
|
||||
// OK control, Return
|
||||
$('newtbe').update('New to be edited');
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { cancelControl: false });
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
wait(1000, function() {
|
||||
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
|
||||
ipe.dispose();
|
||||
// Both controls, Return
|
||||
$('newtbe').update('New to be edited');
|
||||
ipe = new Ajax.InPlaceEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html');
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
Event.simulateKey('newtbe', 'keydown', { keyCode: Event.KEY_RETURN });
|
||||
wait(1000, function() {
|
||||
assertEqual('New to be edited - edited', $('newtbe').innerHTML.strip());
|
||||
ipe.dispose();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}},
|
||||
|
||||
testIPCEBasic: function() {with(this) {
|
||||
// Basic creation, population and choice.
|
||||
$('newtbe').update('ntbe');
|
||||
var fieldValue = '';
|
||||
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
collection: IPCE_COLLECTION, callback: function(f, value) {
|
||||
fieldValue = value;
|
||||
}, onComplete: Prototype.emptyFunction
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var editor = ipe._controls.editor;
|
||||
assertEqual('test', editor.name);
|
||||
assertEqual('select', editor.tagName.toLowerCase());
|
||||
assertEqual(IPCE_COLLECTION.length, editor.options.length, 'Incorrect amount of options');
|
||||
for (var index = 0; index < IPCE_COLLECTION.length; ++index) {
|
||||
var ref = IPCE_COLLECTION[index];
|
||||
var item = editor.options[index];
|
||||
assertEqual(ref[0], item.value, 'Incorrect OPTION value');
|
||||
assertEqual(ref[1], item.text.strip(), 'Incorrect OPTION text');
|
||||
};
|
||||
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
|
||||
editor.selectedIndex = 2;
|
||||
Event.simulateMouse(ipe._controls.ok, 'click');
|
||||
assertEqual('ntbe2', fieldValue);
|
||||
ipe.dispose();
|
||||
// Test the value option
|
||||
$('newtbe').update('ntbe');
|
||||
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
collection: IPCE_COLLECTION, onComplete: Prototype.emptyFunction,
|
||||
value: 'ntbe2'
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
editor = ipe._controls.editor;
|
||||
assertEqual(2, editor.selectedIndex, 'Did not properly select item');
|
||||
ipe.dispose();
|
||||
}},
|
||||
|
||||
testIPCECollectionSyntaxes: function() {with(this) {
|
||||
// Array of two-item arrays (0 = value, 1 = text)
|
||||
$('newtbe').update('ntbe');
|
||||
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
collection: IPCE_COLLECTION, onComplete: Prototype.emptyFunction
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var editor = ipe._controls.editor;
|
||||
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
|
||||
// (further contents testing already done in Basic)
|
||||
ipe.dispose();
|
||||
// Array of one-item arrays
|
||||
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
collection: [['tbe'], ['ntbe'], ['ntbe2'], ['ntbe3']],
|
||||
onComplete: Prototype.emptyFunction
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var editor = ipe._controls.editor;
|
||||
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
|
||||
assertEqual('ntbe', $F(editor).strip(), 'Did not properly define text');
|
||||
ipe.dispose();
|
||||
// Array of items
|
||||
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
collection: ['tbe', 'ntbe', 'ntbe2', 'ntbe3'],
|
||||
onComplete: Prototype.emptyFunction
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var editor = ipe._controls.editor;
|
||||
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
|
||||
assertEqual('ntbe', $F(editor).strip(), 'Did not properly define text');
|
||||
ipe.dispose();
|
||||
}},
|
||||
|
||||
testIPCEAlternateTextOptions: function() {with(this) {
|
||||
// loadTextURL (check loading text, verify alternate text eventually)
|
||||
$('newtbe').update('New to be edited');
|
||||
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
collection: IPCE_COLLECTION, loadTextURL: '_ajax_inplaceeditor_ipce_alt_text.html',
|
||||
onComplete: Prototype.emptyFunction
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var editor = ipe._controls.editor;
|
||||
var text = editor.options[editor.selectedIndex].text.strip();
|
||||
assertEqual(Ajax.InPlaceEditor.DefaultOptions.loadingText, text);
|
||||
wait(1200, function() {
|
||||
assertEqual(1, editor.selectedIndex, 'Did not properly select item based on alternate text.');
|
||||
ipe.dispose();
|
||||
});
|
||||
}},
|
||||
|
||||
testIPCEDynamicCollectionOptions: function() {with(this) {
|
||||
// loadCollectionURL, default loadingCollectionText
|
||||
$('newtbe').update('ntbe');
|
||||
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
|
||||
onComplete: Prototype.emptyFunction
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var editor = ipe._controls.editor;
|
||||
var text = editor.options[editor.selectedIndex].text.strip();
|
||||
assertEqual(Ajax.InPlaceCollectionEditor.DefaultOptions.loadingCollectionText, text);
|
||||
wait(1000, function() {
|
||||
assertEqual(5, ipe._collection.length);
|
||||
assertEqual(2, editor.selectedIndex, 'Did not properly select item');
|
||||
ipe.dispose();
|
||||
// loadCollectionURL, custom loadingCollectionText
|
||||
$('newtbe').update('bar');
|
||||
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
|
||||
loadingCollectionText: 'There we go...',
|
||||
onComplete: Prototype.emptyFunction
|
||||
});
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
editor = ipe._controls.editor;
|
||||
text = editor.options[editor.selectedIndex].text.strip();
|
||||
assertEqual('There we go...', text);
|
||||
wait(1000, function() {
|
||||
assertEqual(1, editor.selectedIndex, 'Did not properly select item');
|
||||
ipe.dispose();
|
||||
});
|
||||
});
|
||||
}},
|
||||
|
||||
testIPCEATPlusDC: function() {with(this) {
|
||||
// loadCollectionURL, loadTextURL
|
||||
$('newtbe').update('Like I care');
|
||||
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
loadCollectionURL: '_ajax_inplaceeditor_ipce_collection.js',
|
||||
loadingCollectionText: 'There we go...',
|
||||
loadTextURL: '_ajax_inplaceeditor_ipce_alt_text.html',
|
||||
loadingText: 'OK, so, the text...',
|
||||
onComplete: Prototype.emptyFunction
|
||||
});
|
||||
ipe._regularCFET = ipe.checkForExternalText;
|
||||
ipe.checkForExternalText = function() {
|
||||
assert(5, ipe._collection.length);
|
||||
ipe._regularCFET();
|
||||
var editor = ipe._controls.editor;
|
||||
var text = editor.options[editor.selectedIndex].text.strip();
|
||||
assertEqual('OK, so, the text...', text);
|
||||
};
|
||||
Event.simulateMouse('newtbe', 'mouseover');
|
||||
Event.simulateMouse('newtbe', 'click');
|
||||
var editor = ipe._controls.editor;
|
||||
var text = editor.options[editor.selectedIndex].text.strip();
|
||||
assertEqual('There we go...', text);
|
||||
wait(2000, function() {
|
||||
assertEqual(2, editor.selectedIndex, 'Did not properly select item');
|
||||
ipe.dispose();
|
||||
});
|
||||
}},
|
||||
|
||||
testDeprecationLayer: function() {with(this) {
|
||||
// FIXME: needs to be coded yet, doesn't it?
|
||||
var ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
okButton: false, cancelLink: false
|
||||
});
|
||||
assertIdentical(false, ipe.options.okControl, 'OK control should be disabled');
|
||||
assertIdentical(false, ipe.options.cancelControl, 'Cancel control should be disabled');
|
||||
ipe.dispose();
|
||||
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
okLink: true, cancelButton: true
|
||||
});
|
||||
assertEqual('link', ipe.options.okControl, 'OK control should be a link');
|
||||
assertEqual('button', ipe.options.cancelControl, 'Cancel control should be a button');
|
||||
ipe.dispose();
|
||||
ipe = new Ajax.InPlaceCollectionEditor('newtbe',
|
||||
'_ajax_inplaceeditor_result2.html', { paramName: 'test',
|
||||
highlightcolor: '#ff0000', highlightendcolor: '#00ff00'
|
||||
});
|
||||
assertEqual('#ff0000', ipe.options.highlightColor, 'Highlight color was not migrated');
|
||||
assertEqual('#00ff00', ipe.options.highlightEndColor, 'Highlight end color was not migrated');
|
||||
ipe.dispose();
|
||||
}},
|
||||
|
||||
|
||||
testShouldShowAmpersandsProperly: function() {with(this) {
|
||||
var ipe = new Ajax.InPlaceEditor('contains_ampersand', '', {});
|
||||
Event.simulateMouse('contains_ampersand', 'click');
|
||||
assertEqual("Me & Myself", $$('form#contains_ampersand-inplaceeditor input.editor_field')[0].value);
|
||||
ipe.dispose();
|
||||
}}
|
||||
// FIXME: add AC w/o key conflicts?
|
||||
// FIXME: doc w/ full details on what's new, what's changed, etc. + deprecation layer info.
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
150
javascript/scoluos/test/unit/bdd_test.html
Executable file
150
javascript/scoluos/test/unit/bdd_test.html
Executable file
@@ -0,0 +1,150 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<div id="d">initial</div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
var moo = 0;
|
||||
|
||||
var assertMethods = [];
|
||||
for(method in Test.Unit.Assertions.prototype) {
|
||||
if(/^assert/.test(method)) assertMethods.push(method);
|
||||
}
|
||||
|
||||
var testObj = {
|
||||
isNice: function(){
|
||||
return true;
|
||||
},
|
||||
isBroken: function(){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
Test.context("BDD-style testing",{
|
||||
|
||||
setup: function() {
|
||||
$('d').update('setup!');
|
||||
moo++;
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
moo--;
|
||||
},
|
||||
|
||||
'should run setup before each specification': function(){
|
||||
assert($('d').innerHTML == 'setup!');
|
||||
assert(moo == 1);
|
||||
},
|
||||
|
||||
'should run teardown after each specification': function(){
|
||||
assert(moo == 1);
|
||||
},
|
||||
|
||||
'should provide extensions to tie in isSomething and respondsTo object methods': function(){
|
||||
Object.extend(testObj, Test.BDDMethods);
|
||||
|
||||
testObj.shouldBe('nice');
|
||||
testObj.shouldNotBe('broken');
|
||||
|
||||
testObj.shouldRespondTo('isNice');
|
||||
testObj.shouldRespondTo('isBroken');
|
||||
},
|
||||
|
||||
'should automatically add extensions to strings': function(){
|
||||
'a'.shouldEqual('a');
|
||||
'a'.shouldNotEqual('b');
|
||||
'a'.shouldNotBeNull();
|
||||
'a'.shouldBeA(String);
|
||||
|
||||
var aString = 'boo!';
|
||||
aString.shouldEqual('boo!');
|
||||
aString.shouldBeA(String);
|
||||
aString.shouldNotBeA(Number);
|
||||
},
|
||||
|
||||
'should automatically add extensions to numbers': function(){
|
||||
var n = 123;
|
||||
n.shouldEqual(123);
|
||||
n.shouldNotEqual(4);
|
||||
|
||||
n.shouldBeA(Number);
|
||||
n.shouldNotBeA(Test);
|
||||
},
|
||||
|
||||
'should automatically add extensions to arrays': function(){
|
||||
['a'].shouldNotBeA(String);
|
||||
[1,2,3].shouldBeAn(Array);
|
||||
[1,2,3].shouldEqualEnum([1,2,3]);
|
||||
},
|
||||
|
||||
'should automatically add extensions to booleans': function(){
|
||||
var theTruth = true;
|
||||
var lies = false;
|
||||
|
||||
theTruth.shouldNotBeA(String);
|
||||
lies.shouldBeA(Boolean);
|
||||
'false'.shouldNotBeA(Boolean);
|
||||
|
||||
theTruth.shouldEqual(true);
|
||||
lies.shouldNotEqual(true);
|
||||
},
|
||||
|
||||
'should support the eval() method': function(){
|
||||
eval('2*2').shouldEqual(4);
|
||||
},
|
||||
|
||||
'should support equality assertion': function(){
|
||||
assertEqual(1, 1);
|
||||
assertEqual('a', 'a');
|
||||
assertEqual(1, '1');
|
||||
|
||||
var x = 1;
|
||||
var y = 1;
|
||||
assertEqual(1, x)
|
||||
assertEqual(x, y);
|
||||
},
|
||||
|
||||
'should provide all assertions': function(){
|
||||
assertMethods.each(function(m){
|
||||
assert(typeof this[m] == 'function');
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
'should support deferred execution': function(){
|
||||
wait(10,function(){
|
||||
'a'.shouldEqual('a');
|
||||
});
|
||||
|
||||
wait(10,function(){
|
||||
'a'.shouldEqual('a');
|
||||
wait(10,function(){
|
||||
'a'.shouldEqual('a');
|
||||
wait(10,function(){
|
||||
'a'.shouldEqual('a');
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
262
javascript/scoluos/test/unit/builder_test.html
Executable file
262
javascript/scoluos/test/unit/builder_test.html
Executable file
@@ -0,0 +1,262 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Tests for builder.js
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<div id="result"></div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
// Serializes a node and it's contents to plain old HTML
|
||||
// IMPORTANT: style attributes can't be correctly serialized cross-browser wise,
|
||||
// so the contents of style attributes must match what IE thinks is correct
|
||||
function serializeNode(node){
|
||||
if(node.nodeType == 3) return node.nodeValue;
|
||||
node = $(node);
|
||||
var tag = node.tagName.toLowerCase();
|
||||
return '<' + ([tag].concat($A(node.attributes).map(function(attr){
|
||||
// Filter out stuff that we don't need
|
||||
if(attr.nodeName == '_extended' || attr.nodeName == '_counted' ||
|
||||
typeof attr.nodeValue == 'function' ||!Element.hasAttribute(node, attr.nodeName)) return;
|
||||
// remove trailing ; in style attributes on Firefox
|
||||
var value = node.readAttribute(attr.nodeName);
|
||||
if(attr.nodeName == 'style' && value.endsWith(';'))
|
||||
value = value.substr(0, value.length-1);
|
||||
return attr.nodeName + '="' + value + '"'
|
||||
}).compact().sort())).join(' ') + '>' + $A(node.childNodes).map(serializeNode).join('') +
|
||||
'</' + tag + '>';
|
||||
}
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
setup: function() {
|
||||
$('result').innerHTML = '';
|
||||
},
|
||||
|
||||
testBuilderBasics: function() { with(this) {
|
||||
var element = Builder.node('div');
|
||||
assertEqual('DIV', element.nodeName);
|
||||
|
||||
var element = Builder.node('div',{id:'mydiv'})
|
||||
assertEqual('mydiv', element.id);
|
||||
|
||||
var element = Builder.node('div',{id:'mydiv',className:'one two'})
|
||||
assertEqual('mydiv', element.id);
|
||||
assertEqual('one two', element.className);
|
||||
|
||||
var element = Builder.node('span','text 123 <blah>');
|
||||
assertEqual('SPAN', element.nodeName);
|
||||
assertEqual('text 123 <blah>', element.innerHTML);
|
||||
|
||||
var element = Builder.node('span',123);
|
||||
assertEqual('SPAN', element.nodeName);
|
||||
assertEqual('123', element.innerHTML);
|
||||
|
||||
var element = Builder.node('span',['test']);
|
||||
assertEqual('SPAN', element.nodeName);
|
||||
assertEqual('test', element.innerHTML);
|
||||
|
||||
var element = Builder.node('span',['test',123]);
|
||||
assertEqual('SPAN', element.nodeName);
|
||||
assertEqual('test123', element.innerHTML);
|
||||
|
||||
var element = Builder.node('span',{},['test',123]);
|
||||
assertEqual('SPAN', element.nodeName);
|
||||
assertEqual('test123', element.innerHTML);
|
||||
|
||||
var element = Builder.node('span',{id:'myspan'},['test',123]);
|
||||
assertEqual('SPAN', element.nodeName);
|
||||
assertEqual('myspan', element.id);
|
||||
assertEqual('test123', element.innerHTML);
|
||||
|
||||
var element = Builder.node('div',[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
|
||||
assertEqual('1234567890',element.innerHTML);
|
||||
|
||||
var element = Builder.node('div',[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
|
||||
assertEqual('1234567890',element.innerHTML);
|
||||
|
||||
var element = Builder.node('div',{id:'mydiv'},[1,2,[3],[[[4],5],6],7,8,[[[[9]]],0]]);
|
||||
assertEqual('1234567890',element.innerHTML);
|
||||
|
||||
var element = Builder.node('div',{id:'mydiv'},[1,'2',['3'],[[[4],'5'],6],7,'8',[[[['9']]],0]]);
|
||||
assertEqual('1234567890',element.innerHTML);
|
||||
assertEqual(10, element.childNodes.length);
|
||||
|
||||
var element = Builder.node('div', Builder.node('span'));
|
||||
assertEqual(1, element.childNodes.length);
|
||||
assertEqual('SPAN', element.childNodes[0].tagName);
|
||||
|
||||
var element = Builder.node('div', {id:'mydiv'}, Builder.node('span'));
|
||||
assertEqual(1, element.childNodes.length);
|
||||
assertEqual('mydiv', element.id);
|
||||
assertEqual('SPAN', element.childNodes[0].tagName);
|
||||
}},
|
||||
|
||||
testBuilderClassAndFor: function() { with(this) {
|
||||
var elt = Builder.node('div', { className: 'demoClass' });
|
||||
assertEqual('demoClass', elt.className);
|
||||
var elt = Builder.node('label', { htmlFor: 'mydiv' });
|
||||
assertEqual('mydiv', elt.htmlFor);
|
||||
}},
|
||||
|
||||
testBuilderExtendsElement: function() { with(this) {
|
||||
assertRespondsTo('hide', Builder.node('div'));
|
||||
}},
|
||||
|
||||
testBuilderAllXHTMLTags: function() { with(this) {
|
||||
var XHTML_TAGS = [
|
||||
'a','abbr','acronym','address','applet','area',
|
||||
'b','bdo','big','blockquote','br','button',
|
||||
'caption','cite','code','col','colgroup',
|
||||
'dd','del','dfn','div','dl','dt',
|
||||
'em',
|
||||
'fieldset','form',
|
||||
'h1','h2','h3','h4','h5','h6','hr',
|
||||
'i','iframe','img','input','ins',
|
||||
'kbd',
|
||||
'label','legend','li',
|
||||
'map',
|
||||
'object','ol','optgroup','option',
|
||||
'p','param','pre',
|
||||
'q',
|
||||
'samp','script','select','small','span','strong','style','sub','sup',
|
||||
'table','tbody','td','textarea','tfoot','th','thead','tr','tt',
|
||||
'ul','var']
|
||||
|
||||
XHTML_TAGS.each(function(tag) {
|
||||
try {
|
||||
var element = Builder.node(tag);
|
||||
assertNotNull(element, 'Tag "'+tag+'" expected, but was null.');
|
||||
assertEqual(tag.toUpperCase(), element.nodeName);
|
||||
|
||||
var element = Builder.node(tag,{id:'tag_'+tag+'_test_id'});
|
||||
assertEqual(tag.toUpperCase(), element.nodeName);
|
||||
assertEqual('tag_'+tag+'_test_id', element.id, 'Setting id attribute for "'+tag+'" failed!');
|
||||
} catch(e) {
|
||||
assert(false, 'Error while creating node of type '+tag+'. Note: Firefox bug in 1.0.X on option and optgroup, fixed in 1.5b1. Internet Explorer 6 doesn\'t support the ABBR tag and has no standard DOM implementation for tables.');
|
||||
}
|
||||
});
|
||||
}},
|
||||
|
||||
// special case, because requires workarounds on IE and Firefox < 1.5
|
||||
testBuilderOptionTag: function() { with(this) {
|
||||
assertEqual('', Builder.node('option').innerHTML);
|
||||
assertEqual('test', Builder.node('option','test').innerHTML);
|
||||
assertEqual('', Builder.node('option',{className:'test'}).innerHTML);
|
||||
assertEqual('test', Builder.node('option',{className:'test'},'test').innerHTML);
|
||||
assertEqual('test', Builder.node('option',{},'test').innerHTML);
|
||||
|
||||
var selectElement = Builder.node('select');
|
||||
var optionElement = Builder.node('option',{className:'test',id:'option_123'},123);
|
||||
selectElement.appendChild(optionElement);
|
||||
document.body.appendChild(selectElement);
|
||||
assertEqual('123', $('option_123').innerHTML);
|
||||
}},
|
||||
|
||||
testBuilderContatenation: function() { with(this) {
|
||||
var element = Builder.node('div', [Builder.node('span')]);
|
||||
assertEqual('DIV', element.nodeName);
|
||||
assertEqual(1, element.childNodes.length);
|
||||
assertEqual('SPAN', element.firstChild.nodeName);
|
||||
|
||||
var element = Builder.node('div', [Builder.node('span'),'text']);
|
||||
assertEqual(2, element.childNodes.length);
|
||||
assertEqual(0, element.firstChild.childNodes.length);
|
||||
assertEqual('DIV', element.nodeName);
|
||||
assertEqual('SPAN', element.firstChild.nodeName);
|
||||
assertEqual(3, element.firstChild.nextSibling.nodeType);
|
||||
|
||||
var element = Builder.node('div', [Builder.node('span',[Builder.node('strong','blah')]),'text']);
|
||||
assertEqual(2, element.childNodes.length);
|
||||
assertEqual(1, element.firstChild.childNodes.length);
|
||||
assertEqual('DIV', element.nodeName);
|
||||
assertEqual('SPAN', element.firstChild.nodeName);
|
||||
assertEqual('STRONG', element.firstChild.firstChild.nodeName);
|
||||
assertEqual('blah', element.firstChild.firstChild.innerHTML);
|
||||
assertEqual(3, element.firstChild.nextSibling.nodeType);
|
||||
}},
|
||||
|
||||
testBuilderComplexExample: function() { with(this) {
|
||||
var element = Builder.node('div',{id:'ghosttrain'},[
|
||||
Builder.node('div',{style:'font-weight: bold; font-size: 11px'},[
|
||||
Builder.node('h1','Ghost Train'),
|
||||
"testtext", 2, 3, 4,
|
||||
Builder.node('ul',[
|
||||
Builder.node('li',{onclick:'alert(\'test\')'},'click me')
|
||||
]),
|
||||
]),
|
||||
]);
|
||||
assertEqual('DIV', element.nodeName);
|
||||
|
||||
$('result').appendChild(element);
|
||||
|
||||
// browsers aren't sure about upper and lower case on elements
|
||||
assertEqual(
|
||||
'<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
|
||||
'<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
|
||||
serializeNode($('result').childNodes[0]));
|
||||
}},
|
||||
|
||||
testBuilderShortcuts: function() { with(this) {
|
||||
Builder.dump();
|
||||
|
||||
var element = DIV(SPAN());
|
||||
assertEqual('SPAN', element.childNodes[0].tagName);
|
||||
|
||||
var element = DIV({id:'test'},SPAN());
|
||||
assertEqual('SPAN', element.childNodes[0].tagName);
|
||||
|
||||
var element = DIV({id:'ghosttrain'},[
|
||||
DIV({style:'font-weight: bold; font-size: 11px'},[
|
||||
H1('Ghost Train'),
|
||||
"testtext", 2, 3, 4,
|
||||
UL([
|
||||
LI({onclick:'alert(\'test\')'},'click me')
|
||||
]),
|
||||
]),
|
||||
]);
|
||||
assertEqual('DIV', element.nodeName);
|
||||
|
||||
$('result').appendChild(element);
|
||||
|
||||
assertEqual(
|
||||
'<div id="ghosttrain"><div style="font-weight: bold; font-size: 11px">' +
|
||||
'<h1>Ghost Train</h1>testtext234<ul><li onclick="alert(\'test\')">click me</li></ul></div></div>',
|
||||
serializeNode($('result').childNodes[0]));
|
||||
}},
|
||||
|
||||
testBuilderBuild: function() { with(this) {
|
||||
['<span>this is <b>neat!</b></span>',' \n<span>this is <b>neat!</b></span>\n '].each(
|
||||
function(html){
|
||||
var node = Builder.build(html);
|
||||
assertEqual('<span>this is <b>neat!</b></span>', serializeNode(node));
|
||||
});
|
||||
}},
|
||||
|
||||
testBuilderAttributeEscaping: function() { with(this) {
|
||||
var element = Builder.node('div',{blah:"<foo'bar&baz\"bat>"});
|
||||
assertEqual("<foo'bar&baz\"bat>", $(element).readAttribute('blah'));
|
||||
}}
|
||||
|
||||
});
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
131
javascript/scoluos/test/unit/dragdrop_test.html
Executable file
131
javascript/scoluos/test/unit/dragdrop_test.html
Executable file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#div_absolute_test { position: absolute }
|
||||
/* ]]> */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Test of drag & drop functions in dragdrop.js
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<p id="p_test">p_test</p>
|
||||
<p id="p_test2">p_test2</p>
|
||||
<p id="p_test3">p_test3</p>
|
||||
<img id="img_test" src="icon.png" alt="img_text"/>
|
||||
<div id="droppable_test">droppable_test</div>
|
||||
|
||||
<div id="div_test">div_test</div>
|
||||
<div id="div_absolute_test">div_absolute_test</div>
|
||||
<div id="div_absolute_inline_test" style="position:absolute">div_absolute_inline_test</div>
|
||||
|
||||
<div id="droppable_container">
|
||||
<div id="d1">droppable_test</div>
|
||||
<div id="d2">droppable_test</div>
|
||||
</div>
|
||||
|
||||
<div id="droppable_container_2">
|
||||
<div id="d3">droppable_test</div>
|
||||
</div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
testDraggableBasics: function() { with(this) {
|
||||
var d = new Draggable('p_test');
|
||||
assertInstanceOf(Draggable, d);
|
||||
}},
|
||||
|
||||
testDraggableStartEffect: function() { with(this) {
|
||||
var d = new Draggable('p_test2');
|
||||
assert(d.options.starteffect, 'There should be a default start effect.');
|
||||
d = new Draggable('p_test3', { endeffect: Prototype.EmptyFunction });
|
||||
assert(undefined === d.options.startEffect, 'There should be no default start effect.');
|
||||
}},
|
||||
|
||||
testAutoPositioning: function() { with(this) {
|
||||
assertEqual('static', Element.getStyle('div_test','position'));
|
||||
new Draggable('div_test');
|
||||
new Draggable('div_absolute_test');
|
||||
new Draggable('div_absolute_inline_test');
|
||||
assertEqual('relative', Element.getStyle('div_test','position'));
|
||||
assertEqual('absolute', Element.getStyle('div_absolute_test','position'));
|
||||
assertEqual('absolute', Element.getStyle('div_absolute_inline_test','position'));
|
||||
}},
|
||||
|
||||
testDroppbalesBasics: function() { with(this) {
|
||||
assertEqual(0, Droppables.drops.length);
|
||||
assertEqual('static', Element.getStyle('droppable_test','position'));
|
||||
|
||||
Droppables.add('droppable_test');
|
||||
assertEqual(1, Droppables.drops.length);
|
||||
assertEqual('relative', Element.getStyle('droppable_test','position'));
|
||||
|
||||
Droppables.remove('droppable_test');
|
||||
assertEqual(0, Droppables.drops.length);
|
||||
|
||||
// accept option should take strings or array of strings
|
||||
Droppables.add('droppable_test',{accept:'document'});
|
||||
assertEqual(['document'].inspect(), Droppables.drops[0].accept.inspect());
|
||||
Droppables.remove('droppable_test');
|
||||
|
||||
Droppables.add('droppable_test',{accept:['document','image']});
|
||||
assertEqual(['document','image'].inspect(), Droppables.drops[0].accept.inspect());
|
||||
Droppables.remove('droppable_test');
|
||||
}},
|
||||
|
||||
testDroppableContainment: function() { with(this) {
|
||||
// Droppable containers should be cached
|
||||
Droppables.add('droppable_test', {
|
||||
containment:'droppable_container' });
|
||||
assertEqual(1, Droppables.drops[0]._containers.length);
|
||||
assertEqual($('droppable_container'), Droppables.drops[0]._containers[0]);
|
||||
assert(Droppables.isContained($('d1'), Droppables.drops[0]));
|
||||
assert(Droppables.isContained($('d2'), Droppables.drops[0]));
|
||||
assert(!Droppables.isContained($('d3'), Droppables.drops[0]));
|
||||
Droppables.remove('droppable_test');
|
||||
|
||||
Droppables.add('droppable_test', {
|
||||
containment:['droppable_container','droppable_container_2'] });
|
||||
assertEqual(2, Droppables.drops[0]._containers.length);
|
||||
assertEqual($('droppable_container'), Droppables.drops[0]._containers[0]);
|
||||
assertEqual($('droppable_container_2'), Droppables.drops[0]._containers[1]);
|
||||
assert(Droppables.isContained($('d1'), Droppables.drops[0]));
|
||||
assert(Droppables.isContained($('d2'), Droppables.drops[0]));
|
||||
assert(Droppables.isContained($('d3'), Droppables.drops[0]));
|
||||
Droppables.remove('droppable_test');
|
||||
}},
|
||||
|
||||
testDroppablesIsAffected: function() { with(this) {
|
||||
Droppables.add('droppable_test');
|
||||
|
||||
Position.prepare();
|
||||
assert(!Droppables.isAffected([-10, -10], null, Droppables.drops[0]));
|
||||
|
||||
var p = Position.page($('droppable_test'));
|
||||
assert(Droppables.isAffected(p, null, Droppables.drops[0]));
|
||||
}}
|
||||
|
||||
}, "testlog");
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
547
javascript/scoluos/test/unit/effects_test.html
Executable file
547
javascript/scoluos/test/unit/effects_test.html
Executable file
@@ -0,0 +1,547 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style type="text/css" media="screen">
|
||||
#rotfl {
|
||||
color: red;
|
||||
font-family: serif;
|
||||
font-style: italic;
|
||||
font-size: 40px;
|
||||
background: #fed;
|
||||
padding: 1em;
|
||||
width: 400px;
|
||||
}
|
||||
.final {
|
||||
color: #fff;
|
||||
font-style: italic;
|
||||
background: #000;
|
||||
opacity: 0.5;
|
||||
}
|
||||
body div.final {
|
||||
font-size: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Tests for effects.js
|
||||
</p>
|
||||
|
||||
<!-- generated elements go in here -->
|
||||
<div id="sandbox"></div>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<div class="morphing blub" style="font-size:25px;color:#f00">Well</div>
|
||||
<div class="morphing">You know</div>
|
||||
<div id="blah" style="border:1px solid black;width:100px">Whoo-hoo!</div>
|
||||
|
||||
<div id="error_message">ERROR MESSAGE</div>
|
||||
<div id="error_message_2">SECOND ERROR MESSAGE</div>
|
||||
<div id="error_message_3" style="border:1px solid red; width:100px; color: #f00">THIRD ERROR MESSAGE</div>
|
||||
|
||||
<ul class="error-list" id="error_test_ul">
|
||||
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
|
||||
<li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
|
||||
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li>
|
||||
<li>nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</li>
|
||||
<li>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
|
||||
</ul>
|
||||
|
||||
<div id="rotfl">ROTFL</div>
|
||||
|
||||
<div id="tween">foo!</div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
var TAGS =
|
||||
['div','span','ol','ul','table','p','h1','h2','h3','h4','h5','h6'];
|
||||
|
||||
var COMBINED_EFFECTS =
|
||||
['Fade','Appear','BlindUp','BlindDown','Puff','SwitchOff','DropOut','Shake',
|
||||
'SlideUp','SlideDown','Pulsate','Squish','Fold','Grow','Shrink'];
|
||||
|
||||
var COMBINED_RJS_EFFECTS = $w('fade appear blind_up blind_down puff switch_off '+
|
||||
'drop_out shake slide_up slide_down pulsate squish fold grow shrink');
|
||||
|
||||
var tmp, tmp2;
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
setup: function() { with (this) {
|
||||
$('sandbox').innerHTML = "";
|
||||
}},
|
||||
|
||||
teardown: function() { with(this) {
|
||||
// remove all queued effects
|
||||
Effect.Queue.each(function(e) { e.cancel() });
|
||||
}},
|
||||
|
||||
testExceptionOnNonExistingElement: function() { with(this) {
|
||||
assertRaise('ElementDoesNotExistError',
|
||||
function(){new Effect.Opacity('nothing-to-see-here')});
|
||||
assertRaise('ElementDoesNotExistError',
|
||||
function(){new Effect.Move('nothing-to-see-here')});
|
||||
assertRaise('ElementDoesNotExistError',
|
||||
function(){new Effect.Scale('nothing-to-see-here')});
|
||||
assertRaise('ElementDoesNotExistError',
|
||||
function(){new Effect.Highlight('nothing-to-see-here')});
|
||||
}},
|
||||
|
||||
testCallbacks: function() { with(this) {
|
||||
tmp = tmp2 = 0;
|
||||
var e1 = new Effect.Opacity('sandbox',{from:1.0,to:0.5,duration:0.5,
|
||||
beforeStart: function() { tmp++ },
|
||||
beforeStartInternal: function() { tmp++ },
|
||||
beforeSetup: function() { tmp++ },
|
||||
beforeSetupInternal: function() { tmp++ },
|
||||
afterSetup: function() { tmp++ },
|
||||
afterSetupInternal: function() { tmp++ },
|
||||
beforeUpdate: function() { tmp2++ },
|
||||
beforeUpdateInternal: function() { tmp2++ },
|
||||
beforeFinish: function() { tmp++ },
|
||||
beforeFinishInternal: function() { tmp++ },
|
||||
afterFinish: function() { tmp++ },
|
||||
afterFinishInternal: function() { tmp++ }
|
||||
});
|
||||
wait(1000, function() {
|
||||
assertEqual(10, tmp);
|
||||
assert(tmp2 > 0);
|
||||
});
|
||||
}},
|
||||
|
||||
testEvent: function() { with(this) {
|
||||
tmp = 0;
|
||||
new Effect.Event({ afterFinish:function(){ tmp++ }, position:'end'});
|
||||
wait(100, function() {
|
||||
assertEqual(1, tmp);
|
||||
});
|
||||
}},
|
||||
|
||||
testTransition: function() { with(this) {
|
||||
// false implies linear
|
||||
var e = new Effect.Opacity('sandbox',{transition:false,from:0.0,to:0.25,duration:0.5});
|
||||
assert(e.options.transition == Effect.Transitions.linear);
|
||||
|
||||
wait(1000, function() {
|
||||
assertEqual(0.25, $('sandbox').getStyle('opacity'));
|
||||
// default to sinoidal
|
||||
var e = new Effect.Opacity('sandbox',{from:0.0,to:0.25,duration:0.5});
|
||||
assert(e.options.transition == Effect.Transitions.sinoidal);
|
||||
wait(1000, function() {
|
||||
assertEqual(0.25, $('sandbox').getStyle('opacity'));
|
||||
|
||||
var transitions = [
|
||||
{ transition: Effect.Transitions.linear, expected: 1 },
|
||||
{ transition: Effect.Transitions.sinoidal, expected: 1 },
|
||||
{ transition: Effect.Transitions.reverse, expected: 0 },
|
||||
{ transition: Effect.Transitions.flicker, expected: 1 },
|
||||
{ transition: Effect.Transitions.wobble, expected: 1 },
|
||||
{ transition: Effect.Transitions.pulse, expected: 1 },
|
||||
{ transition: Effect.Transitions.none, expected: 0 }
|
||||
];
|
||||
|
||||
transitions.each(function(t){
|
||||
var e = new Effect.Opacity('sandbox',{sync:true, from:0, to: 1, transition:t.transition});
|
||||
assert(e.options.transition == t.transition);
|
||||
e.render(1.0);
|
||||
assertEqual(t.expected, e.position, t.transition);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
}},
|
||||
|
||||
testInspect: function() { with(this) {
|
||||
var e1 = new Effect.Opacity('sandbox',{from:1.0,to:0.5,duration:0.5});
|
||||
info( e1.inspect() );
|
||||
assertEqual(0, e1.inspect().indexOf('#<Effect:'));
|
||||
assert(e1.inspect().indexOf('idle')>0);
|
||||
wait(1000, function() {
|
||||
assert(e1.inspect().indexOf('finished')>0);
|
||||
});
|
||||
}},
|
||||
|
||||
testDefaultOptions: function() { with(this) {
|
||||
var oldDefaultOptions = Object.extend({},Effect.DefaultOptions);
|
||||
|
||||
assertEqual(1.0, Effect.DefaultOptions.duration);
|
||||
Effect.DefaultOptions.duration = 0.5;
|
||||
var e1 = new Effect.Opacity('sandbox');
|
||||
assertEqual(0.5, e1.options.duration);
|
||||
|
||||
wait(750, function() {
|
||||
assertEqual('finished', e1.state);
|
||||
Effect.DefaultOptions = oldDefaultOptions;
|
||||
});
|
||||
}},
|
||||
|
||||
testEffectsQueue: function() { with(this) {
|
||||
var e1 = new Effect.Highlight('sandbox');
|
||||
var e2 = new Effect.Appear('sandbox');
|
||||
|
||||
assertEqual(2, Effect.Queue.effects.length);
|
||||
|
||||
tmp = 0;
|
||||
Effect.Queue.each(function(e) { tmp++ });
|
||||
assertEqual(2, tmp);
|
||||
|
||||
// the internal interval timer should be active
|
||||
assertNotNull(Effect.Queue.interval);
|
||||
e1.cancel();
|
||||
e2.cancel();
|
||||
assertEqual(0, Effect.Queue.effects.length);
|
||||
|
||||
// should be inactive after all effects are removed from queue
|
||||
assertNull(Effect.Queue.interval);
|
||||
|
||||
// should be in e3,e1,e2 order
|
||||
var e1 = new Effect.Highlight('sandbox');
|
||||
var e2 = new Effect.Appear('sandbox',{queue:'end'});
|
||||
var e3 = new Effect.Fade('sandbox',{queue:'front'});
|
||||
assert(e2.startOn > e1.startOn);
|
||||
assert(e3.startOn < e1.startOn);
|
||||
assert(e3.startOn < e2.startOn);
|
||||
assertEqual(3, Effect.Queue.effects.length);
|
||||
|
||||
Effect.Queue.each(function(e) { e.cancel() });
|
||||
assertEqual(0, Effect.Queue.effects.length);
|
||||
}},
|
||||
|
||||
testScopedEffectsQueue: function() { with(this) {
|
||||
var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope'} } );
|
||||
var e2 = new Effect.Appear('sandbox', {queue: {scope:'myscope'} } );
|
||||
var e3 = new Effect.Highlight('sandbox', {queue: {scope:'secondscope'} } );
|
||||
var e4 = new Effect.Appear('sandbox');
|
||||
|
||||
assertEqual(2, Effect.Queues.get('myscope').effects.length);
|
||||
assertEqual(1, Effect.Queues.get('secondscope').effects.length);
|
||||
assertEqual(1, Effect.Queues.get('global').effects.length);
|
||||
assertEqual(Effect.Queue.effects.length, Effect.Queues.get('global').effects.length);
|
||||
|
||||
var tmp = 0;
|
||||
Effect.Queues.get('myscope').effects.each(function(e) { tmp++ });
|
||||
assertEqual(2, tmp);
|
||||
|
||||
// the internal interval timer should be active
|
||||
assertNotNull(Effect.Queues.get('myscope').interval);
|
||||
assertNotNull(Effect.Queues.get('secondscope').interval);
|
||||
assertNotNull(Effect.Queues.get('global').interval);
|
||||
|
||||
e1.cancel(); e2.cancel(); e3.cancel(); e4.cancel();
|
||||
|
||||
assertEqual(0, Effect.Queues.get('myscope').effects.length);
|
||||
assertEqual(0, Effect.Queues.get('secondscope').effects.length);
|
||||
assertEqual(0, Effect.Queues.get('global').effects.length);
|
||||
|
||||
// should be inactive after all effects are removed from queues
|
||||
assertNull(Effect.Queues.get('myscope').interval);
|
||||
assertNull(Effect.Queues.get('secondscope').interval);
|
||||
assertNull(Effect.Queues.get('global').interval);
|
||||
|
||||
// should be in e3 and e4 together and then e1,e2 order
|
||||
var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope'} } );
|
||||
var e2 = new Effect.Appear('sandbox', {queue: {position: 'end', scope:'myscope'} } );
|
||||
var e3 = new Effect.Fade('sandbox', {queue: {position: 'front', scope:'myscope'} } );
|
||||
var e4 = new Effect.Appear('sandbox');
|
||||
assert(e2.startOn > e1.startOn);
|
||||
assert(e3.startOn < e1.startOn);
|
||||
assert(e3.startOn < e2.startOn);
|
||||
assert(e3.startOn = e4.startOn);
|
||||
assertEqual(3, Effect.Queues.get('myscope').effects.length);
|
||||
|
||||
Effect.Queues.get('myscope').each(function(e) { e.cancel() });
|
||||
assertEqual(0, Effect.Queues.get('myscope').effects.length);
|
||||
|
||||
Effect.Queues.get('global').each(function(e) { e.cancel() });
|
||||
assertEqual(0, Effect.Queues.get('global').effects.length);
|
||||
|
||||
// should only allow the first two effects and ignore the third
|
||||
var e1 = new Effect.Highlight('sandbox', {queue: {scope:'myscope', limit: 2} } );
|
||||
var e2 = new Effect.Appear('sandbox', {queue: {position: 'end', scope:'myscope', limit: 2} } );
|
||||
var e3 = new Effect.Fade('sandbox', {queue: {position: 'front', scope:'myscope', limit: 2} } );
|
||||
|
||||
assertEqual(2, Effect.Queues.get('myscope').effects.length);
|
||||
}},
|
||||
|
||||
testEffectMultiple: function() { with(this) {
|
||||
$('sandbox').appendChild(Builder.node('div',{id:'test_1'}));
|
||||
$('sandbox').appendChild(Builder.node('div',{id:'test_2'},[Builder.node('div',{id:'test_2a'})]));
|
||||
$('sandbox').appendChild(Builder.node('div',{id:'test_3'}));
|
||||
|
||||
// only direct child elements
|
||||
Effect.multiple('sandbox',Effect.Fade);
|
||||
assertEqual(3, Effect.Queue.effects.length);
|
||||
|
||||
Effect.Queue.each(function(e) { e.cancel() });
|
||||
assertEqual(0, Effect.Queue.effects.length);
|
||||
|
||||
// call with array
|
||||
Effect.multiple(['test_1','test_3'],Effect.Puff);
|
||||
assertEqual(2, Effect.Queue.effects.length);
|
||||
}},
|
||||
|
||||
testEffectTagifyText: function() { with(this) {
|
||||
$('sandbox').innerHTML = "Blah<strong>bleb</strong> Blub";
|
||||
assertEqual(3, $('sandbox').childNodes.length);
|
||||
Effect.tagifyText('sandbox');
|
||||
assertEqual(10, $('sandbox').childNodes.length);
|
||||
|
||||
Effect.multiple('sandbox', Effect.Fade);
|
||||
assertEqual(10, Effect.Queue.effects.length);
|
||||
}},
|
||||
|
||||
testEffectParallel: function() { with(this) {
|
||||
assert( new Effect.Parallel() );
|
||||
assert( new Effect.Parallel([]) );
|
||||
assert( new Effect.Parallel([],{}) );
|
||||
assert( new Effect.Parallel([
|
||||
new Effect.Event({sync:true})
|
||||
],{ duration: 2}) );
|
||||
}},
|
||||
|
||||
testEffectTween: function() { with(this) {
|
||||
// basic initialization
|
||||
assert(new Effect.Tween(null,0,0,function(){}));
|
||||
assert(new Effect.Tween(null,0,0,{duration:0.1},function(){}));
|
||||
|
||||
// fun with objects
|
||||
var object = {
|
||||
blech: 2,
|
||||
foo: function(p){
|
||||
this.bar = p;
|
||||
}
|
||||
};
|
||||
assert(new Effect.Tween(object,0,1,{transition:Effect.Transitions.reverse},'blech'));
|
||||
assert(new Effect.Tween(object,0,1,'foo'));
|
||||
|
||||
// fun with elements
|
||||
assert(new Effect.Tween('tween',50,1,'update'));
|
||||
|
||||
wait(1500, function(){
|
||||
assertEqual(0, object.blech);
|
||||
assertEqual(1, object.bar);
|
||||
assertEqual('1', $('tween').innerHTML);
|
||||
});
|
||||
}},
|
||||
|
||||
// test if all combined effects correctly initialize themselves
|
||||
testCombinedEffectsInitialize: function() { with(this) {
|
||||
COMBINED_EFFECTS.each(function(fx,idx){
|
||||
info('Effect.'+fx);
|
||||
$('sandbox').innerHTML = "";
|
||||
$('sandbox').appendChild(
|
||||
Builder.node('div',{id:'test_element'},
|
||||
Builder.node('span','test'))); //some effects require a child element
|
||||
|
||||
// should work with new Effect.Blah syntax
|
||||
var effect = new Effect[fx]('test_element');
|
||||
assertEqual(0, effect.currentFrame);
|
||||
|
||||
// and without the 'new'
|
||||
var effect = Effect[fx]('test_element');
|
||||
assertEqual(0, effect.currentFrame);
|
||||
|
||||
// visualEffect
|
||||
assert($('test_element') == $('test_element').visualEffect(COMBINED_RJS_EFFECTS[idx]));
|
||||
|
||||
// direct element extension
|
||||
var method = COMBINED_EFFECTS[idx].charAt(0).toLowerCase() + COMBINED_EFFECTS[idx].substring(1)
|
||||
assert($('test_element') == $('test_element')[method]());
|
||||
|
||||
// options parsing (shake, squish and grow are special here)
|
||||
if(!['Shake','Squish','Grow'].include(fx)) {
|
||||
var effect = Effect[fx]('test_element',{duration:2.0});
|
||||
assertEqual(2.0, effect.options.duration, fx);
|
||||
}
|
||||
});
|
||||
}},
|
||||
|
||||
testSynchronizedEffects: function() { with(this) {
|
||||
var e1 = new Effect.Fade('sandbox',{sync:true});
|
||||
wait(250, function() {
|
||||
// effect should still be at frame 0
|
||||
assertEqual(0, e1.currentFrame);
|
||||
assertEqual('idle', e1.state);
|
||||
e1.render(0.01);
|
||||
|
||||
// no frame count for sync effects
|
||||
assertEqual(0, e1.currentFrame);
|
||||
assertEqual('running', e1.state);
|
||||
});
|
||||
}},
|
||||
|
||||
testEffectPosition: function() { with(this) {
|
||||
var testeffect = new Effect.Opacity('sandbox',{
|
||||
afterSetup: function(effect) { effect.frames = 0; },
|
||||
afterUpdate: function(effect) { effect.frames++; $('sandbox').update(effect.position); },
|
||||
duration: 0.5, from: 1.0, to: 0.5
|
||||
});
|
||||
assertNull(testeffect.position);
|
||||
assertEqual('idle', testeffect.state);
|
||||
wait(1000, function() {
|
||||
info('Rendered ' + testeffect.frames + ' frames in .5 seconds ' +
|
||||
'(~' + (testeffect.frames/0.5) + 'fps of a possible 60fps, ' +
|
||||
'note that this can exceed 60fps because of additional last frame rendering)');
|
||||
assertEqual('0.5', $('sandbox').innerHTML);
|
||||
assertEqual(0.5, testeffect.position);
|
||||
assertEqual('finished', testeffect.state);
|
||||
});
|
||||
}},
|
||||
|
||||
testRenderPerformance: function() { with(this) {
|
||||
info('The render() method is generated on a per-effect basis')
|
||||
var e = new Effect.Opacity('sandbox',{sync:true});
|
||||
benchmark(function(){
|
||||
e.render(0.5);
|
||||
},1000, 'Without events');
|
||||
var e = new Effect.Opacity('sandbox',{sync:true,afterUpdate:function(){return}});
|
||||
benchmark(function(){
|
||||
e.render(0.5);
|
||||
},1000, 'With afterUpdate event');
|
||||
}},
|
||||
|
||||
testElementMorph: function() { with(this) {
|
||||
$('error_test_ul').morph('font-size:40px', {duration: 0.5}).setStyle({marginRight:'17px'});
|
||||
$('error_message_2').morph({
|
||||
fontSize: '20px',
|
||||
color: '#f00',
|
||||
backgroundColor: '#ffffff'
|
||||
},
|
||||
{
|
||||
duration:0.5
|
||||
});
|
||||
$('error_message_3').morph('final', {duration:0.5});
|
||||
wait(1000,function(){
|
||||
assertEqual('17px', $('error_test_ul').getStyle('margin-right'));
|
||||
assertEqual('40px', $('error_test_ul').getStyle('font-size'));
|
||||
assertEqual('#ffffff', $('error_message_2').getStyle('background-color').parseColor());
|
||||
assertEqual('20px', $('error_message_2').getStyle('font-size'));
|
||||
assertEqual('italic', $('error_message_3').getStyle('font-style'));
|
||||
assertEqual('20px', $('error_message_3').getStyle('font-size'));
|
||||
assertEqual(.5, $('error_message_3').getStyle('opacity'));
|
||||
assertEqual('', $('error_message_3').style.fontSize);
|
||||
});
|
||||
}},
|
||||
|
||||
testElementMorphChaining: function() { with(this) {
|
||||
$('error_message').morph('font-size:17px').morph('opacity:0',{delay:2});
|
||||
wait(3100,function(){ // 2000ms delay + 1000ms default duration
|
||||
assertEqual(0, $('error_message').getStyle('opacity'));
|
||||
});
|
||||
}},
|
||||
|
||||
testTransformBySelector: function() { with(this) {
|
||||
new Effect.Transform([
|
||||
{ 'ul.error-list li': 'font-size:20px;text-indent:40pt' }
|
||||
],{ duration: 0.5 }).play();
|
||||
|
||||
wait(700,function(){
|
||||
var idx = 0;
|
||||
$A($('error_test_ul').cleanWhitespace().childNodes).each(function(node){
|
||||
assertEqual('20px', $(node).getStyle('font-size'));
|
||||
assertEqual('40pt', $(node).getStyle('text-indent'));
|
||||
idx++;
|
||||
});
|
||||
assertEqual(5, idx);
|
||||
});
|
||||
}},
|
||||
|
||||
testTransformUsesCSSClassPresets: function() { with(this) {
|
||||
assertEqual('40px', $('rotfl').getStyle('font-size'));
|
||||
|
||||
// Render the effect at half-way through, font-size should be
|
||||
// exactly half-way between original and target
|
||||
new Effect.Transform([
|
||||
{ 'rotfl': 'font-size:20px;text-indent:40pt;background-color:#888' }
|
||||
],{ sync:true }).play().render(0.5);
|
||||
|
||||
wait(1100,function(){
|
||||
// should be 30px = 40px + (20px-40px)/2
|
||||
assertEqual('30px', $('rotfl').getStyle('font-size'));
|
||||
});
|
||||
}},
|
||||
|
||||
testTransformMultiple: function() { with(this) {
|
||||
var transformation = new Effect.Transform([
|
||||
{ 'div.morphing': 'font-size:20px;padding-left:40em;opacity:0.5' },
|
||||
{ 'blah' :
|
||||
'width:480px;border-width:10px;border-right-width:20px;' +
|
||||
'margin:20px;margin-bottom:-20px;font-size:30px;' +
|
||||
'background:#954' }
|
||||
],{ duration: 0.5 });
|
||||
|
||||
var generatedEffect = transformation.play();
|
||||
|
||||
assertEqual(3, generatedEffect.effects.length);
|
||||
|
||||
wait(700, function(){
|
||||
// have a look at the generated color transforms for the 3rd found element
|
||||
// which is the "blah" div
|
||||
assertEqual('blah', generatedEffect.effects[2].element.id);
|
||||
assertEnumEqual([255,255,255],
|
||||
generatedEffect.effects[2].transforms.detect( function(transform){
|
||||
return (transform.style == 'backgroundColor')
|
||||
}).originalValue);
|
||||
assertEnumEqual([153,85,68],
|
||||
generatedEffect.effects[2].transforms.detect( function(transform){
|
||||
return (transform.style == 'backgroundColor')
|
||||
}).targetValue);
|
||||
|
||||
assertEqual('20px', $$('div.morphing').first().getStyle('font-size'));
|
||||
assertEqual('20px', $$('div.morphing').last().getStyle('font-size'));
|
||||
assertEqual('30px', $('blah').getStyle('font-size'));
|
||||
|
||||
// border-width/border-right-width should be set independently
|
||||
assertEqual('10px', $('blah').getStyle('border-top-width'));
|
||||
assertEqual('10px', $('blah').getStyle('border-bottom-width'));
|
||||
assertEqual('10px', $('blah').getStyle('border-left-width'));
|
||||
assertEqual('20px', $('blah').getStyle('border-right-width'));
|
||||
|
||||
// colors should assume transition from
|
||||
// #ffffff (white) if original was transparent
|
||||
// we now should have arrived at the given color
|
||||
assertEqual('#995544', $('blah').getStyle('background-color').parseColor());
|
||||
|
||||
// play again = should have same values
|
||||
transformation.play();
|
||||
wait(700, function(){
|
||||
assertEqual('20px', $$('div.morphing').first().getStyle('font-size'));
|
||||
assertEqual('20px', $$('div.morphing').last().getStyle('font-size'));
|
||||
assertEqual('30px', $('blah').getStyle('font-size'));
|
||||
|
||||
$('blah').setStyle({fontSize:'100px'});
|
||||
assertEqual('100px', $('blah').getStyle('font-size'));
|
||||
transformation.play();
|
||||
wait(700, function(){
|
||||
assertEqual('30px', $('blah').getStyle('font-size'));
|
||||
|
||||
new Effect.Transform([
|
||||
{ 'blah': 'color: #80d980; background: #208020' }
|
||||
],{ duration: 1.1 }).play();
|
||||
wait(1500, function(){
|
||||
assertEqual('#80d980', $('blah').getStyle('color').parseColor());
|
||||
assertEqual('#208020', $('blah').getStyle('background-color').parseColor());
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
}}
|
||||
|
||||
});
|
||||
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
116
javascript/scoluos/test/unit/element_test.html
Executable file
116
javascript/scoluos/test/unit/element_test.html
Executable file
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style type="text/css" media="screen">
|
||||
#style_test_1 { color:rgb(0, 0, 255); background-color: rgb(0, 0, 255); }
|
||||
blah { color:rgb(0, 255, 0); }
|
||||
#op2 { opacity:0.5;filter:alpha(opacity=50)progid:DXImageTransform.Microsoft.Blur(strength=10);}
|
||||
#allStyles_1 {font-size: 12px;}
|
||||
#allStyles_2 {opacity:0.5; filter:alpha(opacity=50);}
|
||||
#allStyles_3 {opacity:0.5;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Tests for Element extensions in effects.js
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<!-- Test elements follow -->
|
||||
<div id="test_1" class="a bbbbbbbbbbbb cccccccccc dddd"> </div>
|
||||
|
||||
<div id="test_2" class="classA-foobar classB-foobar"> </div> <span> </span>
|
||||
|
||||
<div id="style_test_1" style="display:none;"></div>
|
||||
<div id="style_test_2" class="blah" style="font-size:11px;"></div>
|
||||
|
||||
<div id="style_test_3">blah</div>
|
||||
|
||||
<div id="test_whitespace"> <span> </span>
|
||||
|
||||
|
||||
|
||||
<div><div></div> </div><span> </span>
|
||||
</div>
|
||||
|
||||
<!-- Test Element opacity functions -->
|
||||
<img id="op1" alt="op2" src="icon.png" style="opacity:0.5;filter:alpha(opacity=50)" />
|
||||
<img id="op2" alt="op2" src="icon.png"/>
|
||||
<img id="op3" alt="op3" src="icon.png"/>
|
||||
<img id="op4-ie" alt="op3" src="icon.png" style="filter:alpha(opacity=30)" />
|
||||
|
||||
<!-- Test Element.childrenWithClassName -->
|
||||
<div id="Container" class="moo hoo">
|
||||
<span id="1" class="firstClass">First class</span>
|
||||
<span id="2" class="secondClass">Second class</span>
|
||||
<span id="3" class="firstClass secondClass">First and Second class</span>
|
||||
<span id="4" class="thirdClass">Third class <span id="5" class="firstClass">Nested First class</span></span>
|
||||
|
||||
<div id="collect">1<span class="ignore"><span class="someclass">2</span>3</span><ul><li class="ignore">4</li></ul></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="perftest1"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
|
||||
<div id="allStyles_1"></div>
|
||||
<div id="allStyles_2"></div>
|
||||
<div id="allStyles_3"></div>
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
testElementCollectTextNodes: function() { with(this) {
|
||||
assertEqual('1234', Element.collectTextNodes('collect'));
|
||||
assert(benchmark(function(){
|
||||
Element.collectTextNodes('collect')
|
||||
},50) < 1000);
|
||||
|
||||
benchmark(function(){
|
||||
Element.collectTextNodes('collect')
|
||||
},10,'Element.collectTextNodes');
|
||||
|
||||
assertEqual('1234', Element.collectTextNodesIgnoreClass('collect', 'somethingcompletelydifferent'));
|
||||
assertEqual('1', $('collect').collectTextNodesIgnoreClass('ignore'));
|
||||
benchmark(function(){
|
||||
Element.collectTextNodesIgnoreClass('collect','ignore')
|
||||
},10,'Element.collectTextNodesIgnoreClass');
|
||||
|
||||
assertEqual('134', Element.collectTextNodesIgnoreClass('collect', 'someclass'));
|
||||
}},
|
||||
|
||||
testVisualEffect: function() { with(this) {
|
||||
assert($('style_test_3') == $('style_test_3').visualEffect('fade'));
|
||||
wait(1500,function(){
|
||||
assert(!$('style_test_3').visible())
|
||||
});
|
||||
}},
|
||||
|
||||
testParseStylePerformance: function() { with(this) {
|
||||
benchmark(function(){
|
||||
"font:12px/15pt Verdana;opacity:0.4;border:4px dotted red".parseStyle();
|
||||
},100);
|
||||
}},
|
||||
|
||||
testGetStyles: function() { with(this) {
|
||||
assertEqual('12px', $('allStyles_1').getStyles().fontSize);
|
||||
assertEqual(1, parseFloat($('allStyles_1').getStyles().opacity));
|
||||
assertEqual(0.5, parseFloat($('allStyles_2').getStyles().opacity));
|
||||
assertEqual(0.5, parseFloat($('allStyles_3').getStyles().opacity));
|
||||
}}
|
||||
|
||||
}, "testlog");
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
javascript/scoluos/test/unit/icon.png
Executable file
BIN
javascript/scoluos/test/unit/icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 281 B |
70
javascript/scoluos/test/unit/index.html
Executable file
70
javascript/scoluos/test/unit/index.html
Executable file
@@ -0,0 +1,70 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body class="navigation">
|
||||
|
||||
<h1>script.aculo.us<br/>Unit Tests</h1>
|
||||
|
||||
<p id="version"></p>
|
||||
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
$('version').innerHTML = 'script.aculo.us version '+Scriptaculous.Version+'<br/>Prototype version ' + Prototype.Version;
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<p><a href="http://wiki.script.aculo.us/scriptaculous/show/UnitTesting" target="test">Documentation</a></p>
|
||||
|
||||
<h2>scriptaculous.js</h2>
|
||||
<ul>
|
||||
<li><a href="loading_test.html" target="test">Dynamic loading test</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>effects.js</h2>
|
||||
<ul>
|
||||
<li><a href="effects_test.html" target="test">Effects test</a></li>
|
||||
<li><a href="string_test.html" target="test">String test</a></li>
|
||||
<li><a href="element_test.html" target="test">Element extensions test</a></li>
|
||||
<li><a href="position_clone_test.html" target="test">Position.clone test</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>dragdrop.js</h2>
|
||||
<ul>
|
||||
<li><a href="dragdrop_test.html" target="test">Drag & Drop test</a></li>
|
||||
<li><a href="sortable_test.html" target="test">Sortable test</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>builder.js</h2>
|
||||
<ul>
|
||||
<li><a href="builder_test.html" target="test">Builder test</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>controls.js</h2>
|
||||
<ul>
|
||||
<li><a href="ajax_autocompleter_test.html" target="test">Ajax.Autocompleter test</a></li>
|
||||
<li><a href="ajax_inplaceeditor_test.html" target="test">Ajax.InPlaceEditor test</a></li>
|
||||
<li>Note: unit tests work on Firefox only. The controls themselves are fully supported on IE6+, Firefox and Safari.</li>
|
||||
</ul>
|
||||
|
||||
<h2>slider.js</h2>
|
||||
<ul>
|
||||
<li><a href="slider_test.html" target="test">Control.Slider test</a></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h2>unittest.js</h2>
|
||||
<ul>
|
||||
<li><a href="unittest_test.html" target="test">Unittest test</a></li>
|
||||
<li><a href="bdd_test.html" target="test">BDD test</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
41
javascript/scoluos/test/unit/loading_test.html
Executable file
41
javascript/scoluos/test/unit/loading_test.html
Executable file
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js?load=effects,dragdrop" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Test dynamic loading in scriptaculous.js
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
testDynamicLoading: function() { with(this) {
|
||||
|
||||
// not loaded: controls
|
||||
assertNull(Ajax.Autocompleter || null);
|
||||
assertNull(Form.Element.DelayedObserver || null);
|
||||
|
||||
// we loading dragdrop
|
||||
assertNotNull(Draggable || null);
|
||||
}}
|
||||
|
||||
}, "testlog");
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
312
javascript/scoluos/test/unit/position_clone_test.html
Executable file
312
javascript/scoluos/test/unit/position_clone_test.html
Executable file
@@ -0,0 +1,312 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Tests for Postion.clone (to be moved to Prototype)
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
function prepareTarget(contained, position1, position2) {
|
||||
var target;
|
||||
if($('target_div')) Element.remove('target_div');
|
||||
if($('container_div')) Element.remove('container_div');
|
||||
if(contained) {
|
||||
target = Builder.node('div',
|
||||
{id: 'container_div', style: 'position:' + position1},
|
||||
[Builder.node('div', {id: 'target_div', style: 'position: ' +position2})]);
|
||||
} else {
|
||||
target = Builder.node('div',
|
||||
{id: 'target_div', style: 'position:' + position1}, '456');
|
||||
}
|
||||
document.body.appendChild(target);
|
||||
Position.clone($('source_div'),$('target_div'));
|
||||
}
|
||||
|
||||
function prepareTargetHidden(contained, position1, position2) {
|
||||
var target;
|
||||
if($('target_div')) Element.remove('target_div');
|
||||
if($('container_div')) Element.remove('container_div');
|
||||
if(contained) {
|
||||
target = Builder.node('div',
|
||||
{id: 'container_div', style: 'position:' + position1},
|
||||
[Builder.node('div', {id: 'target_div', style: 'display:none; position: ' +position2})]);
|
||||
} else {
|
||||
target = Builder.node('div',
|
||||
{id: 'target_div', style: 'display:none; position:' + position1}, '456');
|
||||
}
|
||||
document.body.appendChild(target);
|
||||
Position.clone($('source_div'),$('target_div'));
|
||||
Element.show($('target_div'));
|
||||
}
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
teardown: function() {
|
||||
Element.remove($('source_div'));
|
||||
},
|
||||
|
||||
testPositionCloneFromAbsolute: function() { with(this) {
|
||||
var source = Builder.node('div',
|
||||
{id: 'source_div', style: 'position:absolute; top:20px; left:120px; width:100px; height:50px;'}, '123');
|
||||
document.body.appendChild(source);
|
||||
var expected = Object.inspect([120, 20]);
|
||||
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
|
||||
|
||||
prepareTarget(false, 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute BODY child");
|
||||
|
||||
prepareTarget(false, 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed BODY child");
|
||||
|
||||
prepareTarget(true, 'absolute', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of absolute BODY child");
|
||||
|
||||
prepareTarget(true, 'absolute', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of absolute BODY child");
|
||||
|
||||
prepareTarget(true, 'relative', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of relative BODY child");
|
||||
|
||||
prepareTarget(true, 'relative', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of relative BODY child");
|
||||
|
||||
prepareTarget(true, 'static', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of static BODY child");
|
||||
|
||||
prepareTarget(true, 'static', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of static BODY child");
|
||||
}},
|
||||
|
||||
testPositionCloneFromRelative: function() { with(this) {
|
||||
var source = Builder.node('div',
|
||||
{id: 'source_div', style: 'position:relative; top:20px; left:120px; width:100px; height:50px;'}, '123');
|
||||
document.body.appendChild(source);
|
||||
var expected = Object.inspect(Position.page($('source_div')));
|
||||
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
|
||||
|
||||
prepareTarget(false, 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute BODY child");
|
||||
|
||||
prepareTarget(false, 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed BODY child");
|
||||
|
||||
prepareTarget(true, 'absolute', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of absolute BODY child");
|
||||
|
||||
prepareTarget(true, 'absolute', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of absolute BODY child");
|
||||
|
||||
prepareTarget(true, 'relative', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of relative BODY child");
|
||||
|
||||
prepareTarget(true, 'relative', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of relative BODY child");
|
||||
|
||||
prepareTarget(true, 'static', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of static BODY child");
|
||||
|
||||
prepareTarget(true, 'static', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of static BODY child");
|
||||
}},
|
||||
|
||||
testPositionCloneFromStatic: function() { with(this) {
|
||||
var source = Builder.node('div',
|
||||
{id: 'source_div', style: 'top:20px; left:120px; width:100px; height:50px;'}, '123');
|
||||
document.body.appendChild(source);
|
||||
var expected = Object.inspect(Position.page($('source_div')));
|
||||
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
|
||||
|
||||
prepareTarget(false, 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute BODY child");
|
||||
|
||||
prepareTarget(false, 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed BODY child");
|
||||
|
||||
prepareTarget(true, 'absolute', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of absolute BODY child");
|
||||
|
||||
prepareTarget(true, 'absolute', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of absolute BODY child");
|
||||
|
||||
prepareTarget(true, 'relative', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of relative BODY child");
|
||||
|
||||
prepareTarget(true, 'relative', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of relative BODY child");
|
||||
|
||||
prepareTarget(true, 'static', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of static BODY child");
|
||||
|
||||
prepareTarget(true, 'static', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of static BODY child");
|
||||
}},
|
||||
|
||||
testPositionCloneFromAbsoluteWithHiddenTarget: function() { with(this) {
|
||||
var source = Builder.node('div',
|
||||
{id: 'source_div', style: 'position:absolute; top:20px; left:120px; width:100px; height:50px;'}, '123');
|
||||
document.body.appendChild(source);
|
||||
var expected = Object.inspect([120, 20]);
|
||||
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
|
||||
|
||||
prepareTargetHidden(false, 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute BODY child");
|
||||
|
||||
prepareTargetHidden(false, 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'absolute', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of absolute BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'absolute', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of absolute BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'relative', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of relative BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'relative', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of relative BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'static', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of static BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'static', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of static BODY child");
|
||||
}},
|
||||
|
||||
testPositionCloneFromRelativeWithHiddenTarget: function() { with(this) {
|
||||
var source = Builder.node('div',
|
||||
{id: 'source_div', style: 'position:relative; top:20px; left:120px; width:100px; height:50px;'}, '123');
|
||||
document.body.appendChild(source);
|
||||
var expected = Object.inspect(Position.page($('source_div')));
|
||||
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
|
||||
|
||||
prepareTargetHidden(false, 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute BODY child");
|
||||
|
||||
prepareTargetHidden(false, 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'absolute', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of absolute BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'absolute', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of absolute BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'relative', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of relative BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'relative', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of relative BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'static', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of static BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'static', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of static BODY child");
|
||||
}},
|
||||
|
||||
testPositionCloneFromStaticWithHiddenTarget: function() { with(this) {
|
||||
var source = Builder.node('div',
|
||||
{id: 'source_div', style: 'top:20px; left:120px; width:100px; height:50px;'}, '123');
|
||||
document.body.appendChild(source);
|
||||
var expected = Object.inspect(Position.page($('source_div')));
|
||||
assertEqual(expected, Object.inspect(Position.page($('source_div'))));
|
||||
|
||||
prepareTargetHidden(false, 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute BODY child");
|
||||
|
||||
prepareTargetHidden(false, 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'absolute', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of absolute BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'absolute', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of absolute BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'relative', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of relative BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'relative', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of relative BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'static', 'absolute');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to absolute child of static BODY child");
|
||||
|
||||
prepareTargetHidden(true, 'static', 'fixed');
|
||||
assertEqual(expected, Object.inspect(Position.page($('target_div'))),
|
||||
"Clone to fixed child of static BODY child");
|
||||
}}
|
||||
|
||||
});
|
||||
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<!-- Test elements will be inserted after this -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
437
javascript/scoluos/test/unit/slider_test.html
Executable file
437
javascript/scoluos/test/unit/slider_test.html
Executable file
@@ -0,0 +1,437 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Tests for slider.js
|
||||
</p>
|
||||
|
||||
<div id="track1" style="width:200px;background-color:#aaa;height:5px;">
|
||||
<div id="handle1" style="width:15px;height:25px;background-color:#f00;"> </div>
|
||||
</div>
|
||||
|
||||
<div id="track2-vertical" style="height:100px;background-color:#aaa;width:5px;">
|
||||
<div id="handle2-vertical" style="width:25px;height:10px;background-color:#f00;"> </div>
|
||||
</div>
|
||||
|
||||
<div id="track2-horizontal" style="height:5px;background-color:#aaa;width:100px;">
|
||||
<div id="handle2-horizontal" style="width:10px;height:25px;background-color:#f00;"> </div>
|
||||
</div>
|
||||
|
||||
<div id="track3" style="width:300px;background-color:#cfb;height:30px;">
|
||||
<span id="handle3-1">1</span>
|
||||
<span id="handle3-2">2</span>
|
||||
<span id="handle3-3">3</span>
|
||||
</div>
|
||||
|
||||
<div id="track4" style="width:300px;position:relative;background-color:#cbf;height:30px;">
|
||||
<span id="handle4-1" style="top:0;left:0;position:absolute;background-color:#f00;">1</span>
|
||||
<span id="handle4-2" style="top:0;left:0;position:absolute;background-color:#0f0;">2</span>
|
||||
<span id="handle4-3" style="top:0;left:0;position:absolute;background-color:#00f;">3</span>
|
||||
</div>
|
||||
|
||||
<div id="track5" style="width:300px;background-color:#cbf;height:30px;position:relative;z-index:0;">
|
||||
<div id="handle5-1" style="top:0;left:0;position:absolute;background-color:#f00;z-index:2">1</div>
|
||||
<div id="handle5-2" style="top:0;left:0;position:absolute;background-color:#0f0;z-index:2">2</div>
|
||||
<div id="handle5-3" style="top:0;left:0;position:absolute;background-color:#00f;z-index:2">3</div>
|
||||
|
||||
<div id="span5-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div>
|
||||
<div id="span5-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div>
|
||||
</div>
|
||||
|
||||
<div id="track6" style="width:20px;background-color:#cbf;height:100px;position:relative;z-index:0;">
|
||||
<div id="handle6-1" style="top:0;left:0;height:13px;position:absolute;background-color:#f00;z-index:2">1</div>
|
||||
<div id="handle6-2" style="top:0;left:0;height:13px;position:absolute;background-color:#0f0;z-index:2">2</div>
|
||||
<div id="handle6-3" style="top:0;left:0;height:13px;position:absolute;background-color:#00f;z-index:2">3</div>
|
||||
|
||||
<div id="span6-1" style="top:0;left:0;position:absolute;background-color:#000;width:20px;z-index:1;"> </div>
|
||||
<div id="span6-2" style="top:0;left:0;position:absolute;background-color:#444;width:20px;z-index:1;"> </div>
|
||||
</div>
|
||||
|
||||
<div id="track7" style="width:200px;background-color:#cbf;height:30px;position:relative;z-index:0;">
|
||||
<div id="handle7-1" style="top:0;left:0;position:absolute;background-color:#f88;z-index:2">1</div>
|
||||
<div id="handle7-2" style="top:0;left:0;position:absolute;background-color:#8f8;z-index:2">2</div>
|
||||
<div id="handle7-3" style="top:0;left:0;position:absolute;background-color:#88f;z-index:2">3</div>
|
||||
|
||||
<div id="span7-1" style="top:0;left:0;position:absolute;background-color:#000;height:20px;z-index:1;"> </div>
|
||||
<div id="span7-2" style="top:0;left:0;position:absolute;background-color:#444;height:20px;z-index:1;"> </div>
|
||||
|
||||
<div id="span7-start" style="top:0;left:0;position:absolute;background-color:#f00;height:20px;z-index:1;"> </div>
|
||||
<div id="span7-end" style="top:0;left:0;position:absolute;background-color:#00f;height:20px;z-index:1;"> </div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="debug"> </div>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
var globalValue;
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
testSliderBasics: function() { with(this) {
|
||||
var slider = new Control.Slider('handle1', 'track1');
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
|
||||
assertEqual('horizontal', slider.axis);
|
||||
assertEqual(false, slider.disabled);
|
||||
assertEqual(0, slider.value);
|
||||
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
testSliderValues: function() { with(this) {
|
||||
['horizontal', 'vertical'].each( function(axis) {
|
||||
var slider = new Control.Slider('handle2-'+axis, 'track2-'+axis, {values:[0.2,0.4,0.6,0.8,1],axis:axis});
|
||||
assertEqual(axis, slider.axis);
|
||||
assertEqual(0.2, slider.value);
|
||||
|
||||
slider.setValue(0.35);
|
||||
assertEqual(0.4, slider.value);
|
||||
|
||||
slider.setValueBy(0.1);
|
||||
assertEqual(0.6, slider.value);
|
||||
slider.setValueBy(-0.6);
|
||||
assertEqual(0.2, slider.value);
|
||||
|
||||
slider.setValue(1);
|
||||
assertEqual(1, slider.value);
|
||||
|
||||
slider.setValue(-2);
|
||||
assertEqual(0.2, slider.value);
|
||||
|
||||
slider.setValue(55555);
|
||||
assertEqual(1, slider.value);
|
||||
|
||||
// leave active to be able to play around with the sliders
|
||||
// slider.dispose();
|
||||
});
|
||||
assertEqual("90px", $('handle2-horizontal').style.left);
|
||||
assertEqual("90px", $('handle2-vertical').style.top);
|
||||
}},
|
||||
|
||||
testSliderInitialValues: function() { with(this) {
|
||||
var slider = new Control.Slider('handle1', 'track1',{sliderValue:0.5});
|
||||
assertEqual(0.5, slider.value);
|
||||
|
||||
var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
|
||||
sliderValue:[50,145,170],
|
||||
values:[50,150,160,170,180],
|
||||
range:$R(50,180)
|
||||
});
|
||||
assertEqual(50, slider.value);
|
||||
assertEqual(50, slider.values[0]);
|
||||
assertEqual(150, slider.values[1]);
|
||||
assertEqual(170, slider.values[2]);
|
||||
slider.dispose();
|
||||
|
||||
var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
|
||||
sliderValue:[50,145,170],
|
||||
values:[50,150,160,170,180]
|
||||
});
|
||||
assertEqual(50, slider.value);
|
||||
assertEqual(50, slider.values[0]);
|
||||
assertEqual(150, slider.values[1]);
|
||||
assertEqual(170, slider.values[2]);
|
||||
slider.dispose();
|
||||
|
||||
var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {
|
||||
restricted:true,
|
||||
sliderValue:[50,145,170],
|
||||
values:[50,150,160,170,180]
|
||||
});
|
||||
assertEqual(50, slider.value);
|
||||
assertEqual(50, slider.values[0]);
|
||||
assertEqual(150, slider.values[1]);
|
||||
assertEqual(170, slider.values[2]);
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
testSliderOnChange: function() { with(this) {
|
||||
var slider = new Control.Slider('handle1', 'track1', { onChange:function(v){ globalValue = v; } });
|
||||
slider.setValue(1);
|
||||
assert(1, globalValue);
|
||||
assert(1, slider.value);
|
||||
|
||||
slider.setDisabled();
|
||||
slider.setValue(0.5);
|
||||
assert(1, globalValue);
|
||||
assert(1, slider.value);
|
||||
|
||||
slider.setEnabled();
|
||||
slider.setValue(0.2);
|
||||
assert(0.2, globalValue);
|
||||
assert(0.2, slider.value);
|
||||
|
||||
// s.event should be null if setValue is called from script
|
||||
var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {
|
||||
onChange:function(v, s){ if(!s.event) globalValue = v; } });
|
||||
|
||||
slider.setValue(0.5,1);
|
||||
assertEqual([0,0.5,0].inspect(), globalValue.inspect());
|
||||
assert(!slider.event);
|
||||
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
testMultipleHandles: function() { with(this) {
|
||||
var slider = new Control.Slider(['handle3-1','handle3-2','handle3-3'], 'track3', {range:$R(0,300)});
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
|
||||
slider.setValue(20, 0);
|
||||
slider.setValue(50, 1);
|
||||
slider.setValue(70, 2);
|
||||
assertEqual(20, slider.values[0]);
|
||||
assertEqual(50, slider.values[1]);
|
||||
assertEqual(70, slider.values[2]);
|
||||
assertEqual("20px", slider.handles[0].style.left);
|
||||
assertEqual("49px", slider.handles[1].style.left);
|
||||
assertEqual("68px", slider.handles[2].style.left);
|
||||
|
||||
// should change last manipulated handled by -10,
|
||||
// so check for handle with idx 2
|
||||
slider.setValueBy(-10);
|
||||
assertEqual(60, slider.values[2]);
|
||||
|
||||
slider.setValueBy(10, 0);
|
||||
assertEqual(20, slider.values[0]);
|
||||
slider.setValueBy(10, 1);
|
||||
assertEqual(60, slider.values[1]);
|
||||
slider.setValueBy(20, slider.activeHandleIdx);
|
||||
assertEqual(80, slider.values[1]);
|
||||
}},
|
||||
|
||||
testMultipleHandlesValues: function() { with(this) {
|
||||
var slider = new Control.Slider(['handle4-1','handle4-2','handle4-3'], 'track4', {values:[50,150,160,170,180],range:$R(50,180)});
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
|
||||
slider.setValue(20, 0);
|
||||
slider.setValue(150, 2);
|
||||
slider.setValue(179, 1);
|
||||
|
||||
assertEqual(50, slider.values[0]);
|
||||
assertEqual(150, slider.values[2]);
|
||||
assertEqual(180, slider.values[1]);
|
||||
|
||||
assertEqual("0px", slider.handles[0].style.left);
|
||||
assertEqual("225px", slider.handles[2].style.left);
|
||||
assertEqual("293px", slider.handles[1].style.left);
|
||||
|
||||
assertEqual($R(50,150).inspect(), slider.getRange().inspect());
|
||||
assertEqual(30, slider.getRange(1).end-slider.getRange(1).start);
|
||||
}},
|
||||
|
||||
testMultipleHandlesSpans: function() { with(this) {
|
||||
var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5',
|
||||
{spans:['span5-1','span5-2'],range:$R(0,300)});
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
|
||||
slider.setValue(20, 0);
|
||||
slider.setValue(100, 1);
|
||||
slider.setValue(150, 2);
|
||||
|
||||
assertEqual("20px", $('span5-1').style.left);
|
||||
assertEqual("78px", $('span5-1').style.width);
|
||||
assertEqual("98px", $('span5-2').style.left);
|
||||
assertEqual("49px", $('span5-2').style.width);
|
||||
|
||||
slider.setValue(30, 0);
|
||||
slider.setValue(110, 1);
|
||||
slider.setValue(90, 2);
|
||||
|
||||
assertEqual("29px", $('span5-1').style.left);
|
||||
assertEqual("59px", $('span5-1').style.width);
|
||||
assertEqual("88px", $('span5-2').style.left);
|
||||
assertEqual("20px", $('span5-2').style.width);
|
||||
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
testMultipleHandlesSpansStartEnd: function() { with(this) {
|
||||
var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
|
||||
{ spans:['span7-1','span7-2'],
|
||||
startSpan:'span7-start',
|
||||
endSpan:'span7-end',
|
||||
range:$R(0,200) });
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
|
||||
slider.setValue(20, 0);
|
||||
slider.setValue(100, 1);
|
||||
slider.setValue(150, 2);
|
||||
assertEqual("0px", $('span7-start').style.left);
|
||||
assertEqual("19px", $('span7-start').style.width);
|
||||
assertEqual("145px", $('span7-end').style.left);
|
||||
assertEqual("48px", $('span7-end').style.width);
|
||||
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
testSingleHandleSpansStartEnd: function() { with(this) {
|
||||
var slider = new Control.Slider('handle7-1', 'track7',
|
||||
{ spans:['span7-1','span7-2'],
|
||||
startSpan:'span7-start',
|
||||
endSpan:'span7-end',
|
||||
range:$R(0,200) });
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
|
||||
slider.setValue(20, 0);
|
||||
assertEqual("0px", $('span7-start').style.left);
|
||||
assertEqual("19px", $('span7-start').style.width);
|
||||
assertEqual("19px", $('span7-end').style.left);
|
||||
assertEqual("174px", $('span7-end').style.width);
|
||||
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
testMultipleHandlesStyles: function() { with(this) {
|
||||
var slider = new Control.Slider(['handle7-1','handle7-2','handle7-3'], 'track7',
|
||||
{ spans:['span7-1','span7-2'],
|
||||
startSpan:'span7-start',
|
||||
endSpan:'span7-end',
|
||||
range:$R(0,200) });
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
assert(Element.hasClassName('handle7-1','selected'));
|
||||
assert(!Element.hasClassName('handle7-2','selected'));
|
||||
assert(!Element.hasClassName('handle7-3','selected'));
|
||||
|
||||
slider.setValue(20, 0);
|
||||
assert(Element.hasClassName('handle7-1','selected'));
|
||||
assert(!Element.hasClassName('handle7-2','selected'));
|
||||
assert(!Element.hasClassName('handle7-3','selected'));
|
||||
|
||||
slider.setValue(100, 1);
|
||||
assert(!Element.hasClassName('handle7-1','selected'));
|
||||
assert(Element.hasClassName('handle7-2','selected'));
|
||||
assert(!Element.hasClassName('handle7-3','selected'));
|
||||
|
||||
slider.setValue(150, 2);
|
||||
assert(!Element.hasClassName('handle7-1','selected'));
|
||||
assert(!Element.hasClassName('handle7-2','selected'));
|
||||
assert(Element.hasClassName('handle7-3','selected'));
|
||||
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
testMultipleHandlesSpansRestricted: function() { with(this) {
|
||||
var slider = new Control.Slider(['handle5-1','handle5-2','handle5-3'], 'track5',
|
||||
{restricted:true,spans:['span5-1','span5-2'],range:$R(0,300)});
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
|
||||
slider.setValue(20, 0);
|
||||
slider.setValue(100, 1);
|
||||
slider.setValue(150, 2);
|
||||
assertEqual(0, slider.values[0]);
|
||||
assertEqual(0, slider.values[1]);
|
||||
assertEqual(150, slider.values[2]);
|
||||
|
||||
slider.setValue(150, 2);
|
||||
slider.setValue(100, 1);
|
||||
slider.setValue(20, 0);
|
||||
assertEqual(20, slider.values[0]);
|
||||
assertEqual(100, slider.values[1]);
|
||||
assertEqual(150, slider.values[2]);
|
||||
assertEqual("20px", $('span5-1').style.left);
|
||||
assertEqual("78px", $('span5-1').style.width);
|
||||
assertEqual("98px", $('span5-2').style.left);
|
||||
assertEqual("49px", $('span5-2').style.width);
|
||||
|
||||
slider.setValue(30, 0);
|
||||
slider.setValue(110, 1);
|
||||
slider.setValue(90, 2);
|
||||
assertEqual(30, slider.values[0]);
|
||||
assertEqual(110, slider.values[1]);
|
||||
assertEqual(110, slider.values[2], '???');
|
||||
|
||||
assertEqual("29px", $('span5-1').style.left);
|
||||
assertEqual("78px", $('span5-1').style.width);
|
||||
assertEqual("107px", $('span5-2').style.left);
|
||||
assertEqual("0px", $('span5-2').style.width);
|
||||
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
testMultipleHandlesSpansVertical: function() { with(this) {
|
||||
var slider = new Control.Slider(['handle6-1','handle6-2','handle6-3'], 'track6', {axis:'vertical',spans:['span6-1','span6-2'],range:$R(0,100)});
|
||||
assertInstanceOf(Control.Slider, slider);
|
||||
|
||||
slider.setValue(20, 0);
|
||||
slider.setValue(80, 1);
|
||||
slider.setValue(90, 2);
|
||||
|
||||
assertEqual("17px", $('span6-1').style.top);
|
||||
assertEqual("52px", $('span6-1').style.height);
|
||||
assertEqual("70px", $('span6-2').style.top);
|
||||
assertEqual("9px", $('span6-2').style.height);
|
||||
|
||||
slider.setValue(30, 0);
|
||||
slider.setValue(20, 1);
|
||||
slider.setValue(95, 2);
|
||||
|
||||
assertEqual("17px", $('span6-1').style.top);
|
||||
assertEqual("9px", $('span6-1').style.height);
|
||||
assertEqual("26px", $('span6-2').style.top);
|
||||
assertEqual("57px", $('span6-2').style.height);
|
||||
}},
|
||||
|
||||
testRange: function() { with(this) {
|
||||
var slider = new Control.Slider('handle1','track1');
|
||||
assertEqual(0, slider.value);
|
||||
slider.setValue(1);
|
||||
assertEqual("185px", $('handle1').style.left);
|
||||
slider.dispose();
|
||||
|
||||
var slider = new Control.Slider('handle1','track1',{range:$R(10,20)});
|
||||
assertEqual(10, slider.value);
|
||||
assertEqual("0px", $('handle1').style.left);
|
||||
slider.setValue(15);
|
||||
assertEqual("93px", $('handle1').style.left);
|
||||
slider.setValue(20);
|
||||
assertEqual("185px", $('handle1').style.left);
|
||||
slider.dispose();
|
||||
}},
|
||||
|
||||
// test for #3732
|
||||
testRangeValues: function() { with(this) {
|
||||
// test for non-zero starting range
|
||||
var slider = new Control.Slider('handle1','track1',{
|
||||
range:$R(1,3), values:[1,2,3]
|
||||
});
|
||||
assertEqual(1, slider.value);
|
||||
assertEqual("0px", $('handle1').style.left);
|
||||
slider.setValue(2);
|
||||
assertEqual("93px", $('handle1').style.left);
|
||||
slider.setValue(3);
|
||||
assertEqual("185px", $('handle1').style.left);
|
||||
slider.dispose();
|
||||
|
||||
// test zero-starting range
|
||||
var slider = new Control.Slider('handle1','track1',{
|
||||
range:$R(0,2), values:[0,1,2]
|
||||
});
|
||||
assertEqual(0, slider.value);
|
||||
assertEqual("0px", $('handle1').style.left);
|
||||
slider.setValue(1);
|
||||
assertEqual("93px", $('handle1').style.left);
|
||||
slider.setValue(2);
|
||||
assertEqual("185px", $('handle1').style.left);
|
||||
slider.dispose();
|
||||
}}
|
||||
|
||||
}, "testlog");
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
205
javascript/scoluos/test/unit/sortable_test.html
Executable file
205
javascript/scoluos/test/unit/sortable_test.html
Executable file
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Test of sortable functions in dragdrop.js
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
|
||||
<ul id="sortable1">
|
||||
<li id="item_1" class="a">item 1</li>
|
||||
<li id="item_2" class="c b">item 1<ul><li id="item_99">!!!</li></ul></li>
|
||||
<li id="item_3" class="b">item 1</li>
|
||||
<li id="item_xy" class="x y">item 1</li>
|
||||
<!-- a comment -->
|
||||
</ul>
|
||||
|
||||
<div id="sortable2">
|
||||
<div id="item_4">item 4</div> <div id="item_5">item 5</div>
|
||||
<img src="icon.png" alt="img"/>
|
||||
<!-- a comment -->
|
||||
</div>
|
||||
|
||||
<div id="sortable3">
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
By default, _ is the only valid seperator
|
||||
for the DOM ids. Complex element ids as in
|
||||
the form of "some_element_id_1" should also
|
||||
be parsed correctly (only the last part should
|
||||
be serialized)
|
||||
-->
|
||||
<ul id="sortable_complex">
|
||||
<li id="a_b_item_1" class="a">item 1</li>
|
||||
<li id="ab_item_2" class="c b">item 1
|
||||
<ul>
|
||||
<li id="item_99">!!!</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li id="a-b-item_3z_33" class="b">item 1</li>
|
||||
<li id="a-item-xy" class="x y">item 1</li>
|
||||
<!-- a comment -->
|
||||
</ul>
|
||||
|
||||
|
||||
<ul id="sortable_specialcreate">
|
||||
<li id="y1item">item 1</li>
|
||||
<li id="y2item">item 1<ul><li id="yyyy9928282hjhd">!!!</li></ul></li>
|
||||
</ul>
|
||||
|
||||
<ul id="sortable_specialformat">
|
||||
<li id="x1item">item 1</li>
|
||||
<li id="x2item">item 1<ul><li id="xxxxx88888item">!!!</li></ul></li>
|
||||
</ul>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
setup: function() { with(this) {
|
||||
Sortable.create('sortable1',{only:['a','b']});
|
||||
Sortable.create('sortable2',{tag:'div'});
|
||||
Sortable.create('sortable3');
|
||||
Sortable.create('sortable_specialcreate',{ format:/(\d+)/ });
|
||||
Sortable.create('sortable_specialformat');
|
||||
Sortable.create('sortable_complex');
|
||||
}},
|
||||
|
||||
teardown: function() { with(this) {
|
||||
Sortable.destroy('sortable1');
|
||||
Sortable.destroy('sortable2');
|
||||
Sortable.destroy('sortable3');
|
||||
Sortable.destroy('sortable_specialformat');
|
||||
Sortable.destroy('sortable_specialcreate');
|
||||
Sortable.destroy('sortable_complex');
|
||||
}},
|
||||
|
||||
testSortableSerializeSequenceBasics: function() { with(this) {
|
||||
assertEqual('sortable1[]=1&sortable1[]=2&sortable1[]=3', Sortable.serialize('sortable1'));
|
||||
|
||||
// test empty sortable
|
||||
assertEqual('', Sortable.serialize('sortable3'));
|
||||
assertEnumEqual([], Sortable.sequence('sortable3'));
|
||||
|
||||
Element.remove('item_4');
|
||||
assertEqual('sortable2[]=5', Sortable.serialize('sortable2'));
|
||||
assertEnumEqual(['5'], Sortable.sequence('sortable2'));
|
||||
}},
|
||||
|
||||
testSortableSerializeFormat: function() { with(this) {
|
||||
// should correctly serialize from option given to Sortable.create()
|
||||
assertEqual('sortable_specialcreate[]=1&sortable_specialcreate[]=2',
|
||||
Sortable.serialize('sortable_specialcreate'));
|
||||
|
||||
benchmark(function(){
|
||||
Sortable.serialize('sortable_specialcreate')
|
||||
},1,'Sortable.serialize');
|
||||
|
||||
// test special format given explicitly
|
||||
assertEqual('sortable_specialformat[]=1&sortable_specialformat[]=2',
|
||||
Sortable.serialize('sortable_specialformat', {format:/(\d+)/}));
|
||||
|
||||
// return full id
|
||||
assertEqual('sortable_specialformat[]=x1item&sortable_specialformat[]=x2item',
|
||||
Sortable.serialize('sortable_specialformat', {format:/(.*)/}));
|
||||
|
||||
// test default format given explicitly
|
||||
assertEqual('sortable1[]=1&sortable1[]=2&sortable1[]=3',
|
||||
Sortable.serialize('sortable1',{format:/^[^_]*_(.*)$/}));
|
||||
|
||||
// Ensure default options.format handles longer, more complex list
|
||||
// item IDs
|
||||
assertEqual('sortable_complex[]=1&sortable_complex[]=2&sortable_complex[]=33&sortable_complex[]=',
|
||||
Sortable.serialize('sortable_complex'));
|
||||
}},
|
||||
|
||||
testSortableSerializeRule: function() { with(this) {
|
||||
var ids = ['x','x-y','test_test','x_y_z','x_y-x_z'];
|
||||
ids.each(function(id){
|
||||
assertEqual('1',
|
||||
(id+'_1').match(Sortable.SERIALIZE_RULE)[1]);
|
||||
});
|
||||
|
||||
assertNull('x'.match(Sortable.SERIALIZE_RULE));
|
||||
}},
|
||||
|
||||
testSortableSerializeName: function() { with(this) {
|
||||
assertEqual('dumdidu[]=1&dumdidu[]=2',
|
||||
Sortable.serialize('sortable_specialcreate',{name:'dumdidu'}));
|
||||
}},
|
||||
|
||||
testSortableSequenceFormat: function() { with(this) {
|
||||
// shauld correctly serialize from option given to Sortable.create()
|
||||
assertEnumEqual(['1','2'],
|
||||
Sortable.sequence('sortable_specialcreate'));
|
||||
|
||||
// test special format given explicitly
|
||||
assertEnumEqual(['1','2'],
|
||||
Sortable.sequence('sortable_specialformat', {format:/(\d+)/}));
|
||||
|
||||
// return full id
|
||||
assertEnumEqual(['x1item','x2item'],
|
||||
Sortable.sequence('sortable_specialformat', {format:/(.*)/}));
|
||||
|
||||
// test default format given explicitly
|
||||
assertEnumEqual(['1','2','3'],
|
||||
Sortable.sequence('sortable1',{format:/^[^_]*_(.*)$/}));
|
||||
}},
|
||||
|
||||
testSortableFindElements: function() { with(this) {
|
||||
assertEqual(3, Sortable.findElements($('sortable1'),{tag:'li',only:['a','b']}).length);
|
||||
benchmark(function(){
|
||||
Sortable.findElements($('sortable1'),{tag:'li',only:['a','b']})
|
||||
},1,'Sortable.findElements/1');
|
||||
|
||||
assertEqual(1, Sortable.findElements($('sortable1'),{tag:'li',only:['x']}).length);
|
||||
assertEqual(1, Sortable.findElements($('sortable1'),{tag:'li',only:'a'}).length);
|
||||
assertEqual(2, Sortable.findElements($('sortable1'),{tag:'li',only:'b'}).length);
|
||||
assertEqual(4, Sortable.findElements($('sortable1'),{tag:'li',only:['a','b','x']}).length);
|
||||
}},
|
||||
|
||||
testSortableSetSequence: function() { with(this) {
|
||||
// make sure assigning current sequence is a no-op
|
||||
var o = Sortable.sequence('sortable1');
|
||||
Sortable.setSequence('sortable1', ['1','2','3']);
|
||||
assertEnumEqual(o, Sortable.sequence('sortable1'));
|
||||
|
||||
// check new sequence
|
||||
Sortable.setSequence('sortable1', ['3','2','1']);
|
||||
assertEnumEqual(['3','2','1'], Sortable.sequence('sortable1'));
|
||||
|
||||
// non-default format
|
||||
Sortable.setSequence('sortable_specialformat', ['2','1'], { format:/(\d+)/ });
|
||||
assertEnumEqual(['2','1'], Sortable.sequence('sortable_specialformat'));
|
||||
|
||||
// invalid sequence ids should be ignored
|
||||
Sortable.setSequence('sortable1', ['x', '1', 'y', '2', '3', 'z']);
|
||||
assertEnumEqual(['1', '2', '3'], Sortable.sequence('sortable1'));
|
||||
|
||||
// elements omitted in new sequence should be cropped
|
||||
Sortable.setSequence('sortable1', ['1', '3']);
|
||||
assertEnumEqual(['1', '3'], Sortable.sequence('sortable1'));
|
||||
}}
|
||||
|
||||
}, "testlog");
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
71
javascript/scoluos/test/unit/string_test.html
Executable file
71
javascript/scoluos/test/unit/string_test.html
Executable file
@@ -0,0 +1,71 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
Tests for String.prototype extensions in effects.js
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
testStringParseColor: function() { with(this) {
|
||||
assertEqual('#000000', "#000000".parseColor());
|
||||
assertEqual('#000000', "rgb(0,0,0)".parseColor());
|
||||
assertEqual('#000000', "rgb(0, 0, 0)".parseColor());
|
||||
assertEqual('#000000', "#000".parseColor());
|
||||
|
||||
assertEqual('#1', "#1".parseColor());
|
||||
assertEqual('#12', "#12".parseColor());
|
||||
assertEqual('#112233', "#123".parseColor());
|
||||
assertEqual('#1234', "#1234".parseColor());
|
||||
assertEqual('#12345', "#12345".parseColor());
|
||||
assertEqual('#123456', "#123456".parseColor());
|
||||
|
||||
assertEqual('#abcdef', "#aBcDeF".parseColor());
|
||||
assertEqual('#aabbcc', "#aBc".parseColor());
|
||||
|
||||
assertEqual('white', "white".parseColor());
|
||||
assertEqual('#123456', "#123456".parseColor('#000000')); // default to #000000 if not parseable
|
||||
assertEqual('#000000', "white".parseColor('#000000')); // default to #000000 if not parseable
|
||||
|
||||
assertEqual('#ffffff', "rgb(255,255,255)".parseColor());
|
||||
assertEqual('#ff0000', "rgb(255,0,0)".parseColor());
|
||||
assertEqual('#00ff00', "rgb(0,255,0)".parseColor());
|
||||
assertEqual('#0000ff', "rgb(0,0,255)".parseColor());
|
||||
}},
|
||||
|
||||
testStringParseStyle: function() { with(this) {
|
||||
var expected = "#<Hash:{'fontSize': '11px'}>";
|
||||
var expectedMultiple = "#<Hash:{'fontSize': '11px', 'width': '780px'}>";
|
||||
|
||||
assertInspect(expected, "font-size:11px".parseStyle());
|
||||
assertInspect(expected, "font-SIZE: 11px".parseStyle());
|
||||
assertInspect(expected, "font-size:11px ".parseStyle());
|
||||
assertInspect(expected, " Font-size: 11px ".parseStyle());
|
||||
|
||||
assertInspect(expectedMultiple, " font-size: 11px;width:780px".parseStyle());
|
||||
|
||||
}}
|
||||
|
||||
});
|
||||
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
154
javascript/scoluos/test/unit/unittest_test.html
Executable file
154
javascript/scoluos/test/unit/unittest_test.html
Executable file
@@ -0,0 +1,154 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<title>script.aculo.us Unit test file</title>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<script src="../../lib/prototype.js" type="text/javascript"></script>
|
||||
<script src="../../src/scriptaculous.js" type="text/javascript"></script>
|
||||
<script src="../../src/unittest.js" type="text/javascript"></script>
|
||||
<link rel="stylesheet" href="../test.css" type="text/css" />
|
||||
<style type="text/css" media="screen">
|
||||
/* <![CDATA[ */
|
||||
#testcss1 { font-size:11px; color: #f00; }
|
||||
#testcss2 { font-size:12px; color: #0f0; display: none; }
|
||||
/* ]]> */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>script.aculo.us Unit test file</h1>
|
||||
<p>
|
||||
This is a preliminary version mostly for testing the unittest library.
|
||||
</p>
|
||||
|
||||
<!-- Log output -->
|
||||
<div id="testlog"> </div>
|
||||
|
||||
<!-- Test elements follow -->
|
||||
<div id="test_1" class="a bbbbbbbbbbbb cccccccccc dddd"> </div>
|
||||
|
||||
<div id="test_2"> <span> </span>
|
||||
|
||||
|
||||
|
||||
<div><div></div> </div><span> </span>
|
||||
</div>
|
||||
|
||||
<ul id="tlist"><li id="tlist_1">x1</li><li id="tlist_2">x2</li></ul>
|
||||
<ul id="tlist2"><li class="a" id="tlist2_1">x1</li><li id="tlist2_2">x2</li></ul>
|
||||
|
||||
<div id="testmoveby" style="background-color:#333;width:100px;">XXXX</div>
|
||||
|
||||
<div id="testcss1">testcss1<span id="testcss1_span" style="display:none;">blah</span></div><div id="testcss2">testcss1</div>
|
||||
|
||||
<!-- Tests follow -->
|
||||
<script type="text/javascript" language="javascript" charset="utf-8">
|
||||
// <![CDATA[
|
||||
|
||||
var testObj = {
|
||||
isNice: function(){
|
||||
return true;
|
||||
},
|
||||
isBroken: function(){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
new Test.Unit.Runner({
|
||||
|
||||
testAssertEqual: function() { with(this) {
|
||||
assertEqual(0, 0);
|
||||
assertEqual(0, 0, "test");
|
||||
|
||||
assertEqual(0,'0');
|
||||
assertEqual(65.0, 65);
|
||||
|
||||
assertEqual("a", "a");
|
||||
assertEqual("a", "a", "test");
|
||||
|
||||
assertNotEqual(0, 1);
|
||||
assertNotEqual("a","b");
|
||||
assertNotEqual({},{});
|
||||
assertNotEqual([],[]);
|
||||
assertNotEqual([],{});
|
||||
}},
|
||||
|
||||
testAssertRespondsTo: function() { with(this) {
|
||||
assertRespondsTo('isNice', testObj);
|
||||
assertRespondsTo('isBroken', testObj);
|
||||
}},
|
||||
|
||||
testAssertIndentical: function() { with(this) {
|
||||
assertIdentical(0, 0);
|
||||
assertIdentical(0, 0, "test");
|
||||
assertIdentical(1, 1);
|
||||
assertIdentical('a', 'a');
|
||||
assertIdentical('a', 'a', "test");
|
||||
assertIdentical('', '');
|
||||
assertIdentical(undefined, undefined);
|
||||
assertIdentical(null, null);
|
||||
assertIdentical(true, true);
|
||||
assertIdentical(false, false);
|
||||
|
||||
var obj = {a:'b'};
|
||||
assertIdentical(obj, obj);
|
||||
|
||||
assertNotIdentical({1:2,3:4},{1:2,3:4});
|
||||
|
||||
assertIdentical(1, 1.0); // both are typeof == 'number'
|
||||
|
||||
assertNotIdentical(1, '1');
|
||||
assertNotIdentical(1, '1.0');
|
||||
}},
|
||||
|
||||
testAssertMatch: function() { with(this) {
|
||||
assertMatch(/knowmad.jpg$/, 'http://script.aculo.us/images/knowmad.jpg');
|
||||
assertMatch(/Fuc/, 'Thomas Fuchs');
|
||||
assertMatch(/^\$(\d{1,3}(\,\d{3})*|(\d+))(\.\d{2})?$/, '$19.95');
|
||||
assertMatch(/(\d{3}\) ?)|(\d{3}[- \.])?\d{3}[- \.]\d{4}(\s(x\d+)?){0,1}$/, '704-343-9330');
|
||||
assertMatch(/^(?:(?:(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00)))(\/|-|\.)(?:0?2\1(?:29)))|(?:(?:(?:1[6-9]|[2-9]\d)?\d{2})(\/|-|\.)(?:(?:(?:0?[13578]|1[02])\2(?:31))|(?:(?:0?[1,3-9]|1[0-2])\2(29|30))|(?:(?:0?[1-9])|(?:1[0-2]))\2(?:0?[1-9]|1\d|2[0-8]))))$/, '2001-06-16');
|
||||
assertMatch(/^((0?[123456789])|(1[012]))\s*:\s*([012345]\d)(\s*:\s*([012345]\d))?\s*[ap]m\s*-\s*((0?[123456789])|(1[012]))\s*:\s*([012345]\d)(\s*:\s*([012345]\d))?\s*[ap]m$/i, '2:00PM-2:15PM');
|
||||
|
||||
}},
|
||||
|
||||
testAssertInstanceOf: function() { with(this) {
|
||||
assertInstanceOf(Effect.Opacity, new Effect.Opacity('testcss1',{sync:true}));
|
||||
assertNotInstanceOf(String, new Effect.Opacity('testcss1',{sync:true}));
|
||||
|
||||
// note: fails with firefox 1.0.X (bug, fixed in Deer Park)
|
||||
assertNotInstanceOf(Effect.Parallel, new Effect.Opacity('testcss1',{sync:true}), "(note: fails with firefox 1.0.X, fixed in Deer Park)");
|
||||
}},
|
||||
|
||||
testAssertReturns: function() { with(this) {
|
||||
|
||||
assertReturnsTrue('isNice',testObj);
|
||||
assertReturnsFalse('isBroken',testObj);
|
||||
|
||||
assertReturnsTrue('nice',testObj);
|
||||
assertReturnsFalse('broken',testObj);
|
||||
|
||||
}},
|
||||
|
||||
testAssertVisible: function() { with(this) {
|
||||
assertVisible('testcss1');
|
||||
assertNotVisible('testcss1_span');
|
||||
assertNotVisible('testcss2', "Due to a Safari bug, this test fails in Safari.");
|
||||
|
||||
Element.hide('testcss1');
|
||||
assertNotVisible('testcss1');
|
||||
assertNotVisible('testcss1_span');
|
||||
Element.show('testcss1');
|
||||
assertVisible('testcss1');
|
||||
assertNotVisible('testcss1_span');
|
||||
|
||||
Element.show('testcss1_span');
|
||||
assertVisible('testcss1_span');
|
||||
Element.hide('testcss1');
|
||||
assertNotVisible('testcss1_span'); // hidden by parent
|
||||
}}
|
||||
|
||||
}, "testlog");
|
||||
// ]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user