-
+
diff --git a/wise-doc/src/main/webapp/images/bin.png b/wise-doc/src/main/webapp/images/bin.png
new file mode 100644
index 00000000..ebad933c
Binary files /dev/null and b/wise-doc/src/main/webapp/images/bin.png differ
diff --git a/wise-doc/src/main/webapp/js/editor.js b/wise-doc/src/main/webapp/js/editor.js
index da059278..9c0aa37e 100644
--- a/wise-doc/src/main/webapp/js/editor.js
+++ b/wise-doc/src/main/webapp/js/editor.js
@@ -16,9 +16,6 @@
* limitations under the License.
*/
-
-$import("../js/mindplot.svg.js");
-
var designer = null;
// CSS helper functions
@@ -180,12 +177,11 @@ function afterMindpotLibraryLoading() {
});
}
- var iconChooser = buildIconChooser();
-// iconPanel = new IconPanel({button:$('topicIcon'), onStart:cleanScreenEvent, content:iconChooser});
- // Register Events ...
- $(document).addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
- $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bindWithEvent(designer));
- //
+ // Register Key Events ...
+ $(document).addEvent('keydown', designer.keyEventHandler.bind(designer));
+ $("ffoxWorkarroundInput").addEvent('keydown', designer.keyEventHandler.bind(designer));
+
+ // Register toolbar events ...
$('zoomIn').addEvent('click', function(event) {
designer.zoomIn();
});
@@ -202,7 +198,7 @@ function afterMindpotLibraryLoading() {
designer.redo();
});
- designer.addEventListener("change", function(event) {
+ designer.addEventListener("modelUpdate", function(event) {
if (event.undoSteps > 0) {
$("undoEdition").setStyle("background-image", "url(../images/file_undo.png)");
} else {
@@ -222,42 +218,10 @@ function afterMindpotLibraryLoading() {
});
$('deleteTopic').addEvent('click', function(event) {
- var topics = designer.getSelectedNodes();
designer.deleteCurrentNode();
});
- var context = this;
- /*var colorPicker1 = new MooRainbow('topicColor', {
- id: 'topicColor',
- imgPath: '../images/',
- startColor: [255, 255, 255],
- onInit: function(color) {
- cleanScreenEvent.bind(context).attempt();
- setCurrentColorPicker.attempt(colorPicker1, context);
- },
- onChange: function(color) {
- designer.setBackColor2SelectedNode(color.hex);
- },
- onComplete: function(color) {
- removeCurrentColorPicker.attempt(colorPicker1, context);
- }
- });
- var colorPicker2 = new MooRainbow('topicBorder', {
- id: 'topicBorder',
- imgPath: '../images/',
- startColor: [255, 255, 255],
- onInit: function(color) {
- cleanScreenEvent.bind(context).attempt();
- setCurrentColorPicker.attempt(colorPicker2, context);
- },
- onChange: function(color) {
- designer.setBorderColor2SelectedNode(color.hex);
- },
- onComplete: function(color) {
- removeCurrentColorPicker.attempt(colorPicker2, context);
- }
- });*/
- $('topicLink').addEvent('click', function(event) {
+ $('topicLink').addEvent('click', function() {
designer.addLink2SelectedNode();
});
@@ -266,73 +230,32 @@ function afterMindpotLibraryLoading() {
designer.addRelationShip2SelectedNode(event);
});
- $('topicNote').addEvent('click', function(event) {
+ $('topicNote').addEvent('click', function() {
designer.addNote2SelectedNode();
});
-
- $('fontBold').addEvent('click', function(event) {
+ $('fontBold').addEvent('click', function() {
designer.setWeight2SelectedNode();
});
- $('fontItalic').addEvent('click', function(event) {
+ $('fontItalic').addEvent('click', function() {
designer.setStyle2SelectedNode();
});
- /*var colorPicker3 = new MooRainbow('fontColor', {
- id: 'fontColor',
- imgPath: '../images/',
- startColor: [255, 255, 255],
- onInit: function(color) {
- cleanScreenEvent.bind(context).attempt();
- setCurrentColorPicker.attempt(colorPicker3, context);
- },
- onChange: function(color) {
- designer.setFontColor2SelectedNode(color.hex);
- },
- onComplete: function(color) {
- removeCurrentColorPicker.attempt(colorPicker3, context);
- }
- });*/
-
- // Save event handler ....
- var saveButton = $('saveButton');
- saveButton.addEvent('click', function(event) {
-
-
- saveButton.setStyle('cursor', 'wait');
- var saveFunc = function() {
- designer.save(function() {
- var monitor = core.Monitor.getInstance();
- monitor.logMessage('Save completed successfully');
- saveButton.setStyle('cursor', 'pointer');
- }, true);
- }
- saveFunc.delay(1);
-
- });
-
- var discardButton = $('discardButton');
- discardButton.addEvent('click', function(event) {
-
- displayLoading();
- window.document.location = "mymaps.htm";
- });
-
// To prevent the user from leaving the page with changes ...
- window.onbeforeunload = function confirmExit() {
+ window.onbeforeunload = function () {
if (designer.needsSave()) {
designer.save(null, false)
}
- }
+ };
+ var menu = new mindplot.widget.Menu(designer);
- // Build panels ...
- fontFamilyPanel();
- shapeTypePanel();
- fontSizePanel();
+ // If a node has focus, focus can be move to another node using the keys.
+ designer._cleanScreen = function(){menu.clear()};
- // If not problem has occured, I close the dialog ...
+
+ // If not problem has arisen, close the dialog ...
var closeDialog = function() {
if (!window.hasUnexpectedErrors) {
@@ -341,44 +264,6 @@ function afterMindpotLibraryLoading() {
}.delay(500);
}
-function buildIconChooser() {
- var content = new Element('div').setStyles({width:253,height:200,padding:5});
- var count = 0;
- for (var i = 0; i < mindplot.ImageIcon.prototype.ICON_FAMILIES.length; i = i + 1) {
- var familyIcons = mindplot.ImageIcon.prototype.ICON_FAMILIES[i].icons;
- for (var j = 0; j < familyIcons.length; j = j + 1) {
- // Separate icons by line ...
- var familyContent;
- if ((count % 12) == 0) {
- familyContent = new Element('div').inject(content);
- }
-
-
- var iconId = familyIcons[j];
- var img = new Element('img').setStyles({width:16,height:16,padding:"0px 2px"}).inject(familyContent);
- img.id = iconId;
- img.src = mindplot.ImageIcon.prototype._getImageUrl(iconId);
- img.addEvent('click', function(event, id) {
- designer.addImage2SelectedNode(this.id);
- }.bindWithEvent(img));
- count = count + 1;
- }
-
- }
-
- return content;
-}
-
-
-
-function setCurrentColorPicker(colorPicker) {
- this.currentColorPicker = colorPicker;
-}
-
-function removeCurrentColorPicker(colorPicker) {
- $clear(this.currentColorPicker);
-}
-
function buildMindmapDesigner() {
// Initialize message logger ...
// var monitor = new core.Monitor($('msgLoggerContainer'), $('msgLogger'));
@@ -391,7 +276,7 @@ function buildMindmapDesigner() {
var screenHeight = window.getHeight();
// header - footer
- screenHeight = screenHeight - 90 - 61;
+ screenHeight = screenHeight - 115;
// body margin ...
editorProperties.width = screenWidth;
@@ -407,143 +292,80 @@ function buildMindmapDesigner() {
function buildStandaloneMindmapDesigner(){
designer.loadFromXML(mapId, mapXml);
-
- // If a node has focus, focus can be move to another node using the keys.
- designer._cleanScreen = cleanScreenEvent.bind(this);
}
function buildCollaborativeMindmapDesigner(){
if($wise_collaborationManager.isCollaborativeFrameworkReady()){
designer.loadFromCollaborativeModel($wise_collaborationManager);
- // If a node has focus, focus can be move to another node using the keys.
- designer._cleanScreen = cleanScreenEvent.bind(this);
}else{
$wise_collaborationManager.setWiseReady(true);
}
}
-function createColorPalette(container, onSelectFunction, event) {
- cleanScreenEvent();
- _colorPalette = new core.ColorPicker();
- _colorPalette.onSelect = function(color) {
- onSelectFunction.call(this, color);
- cleanScreenEvent();
- };
+//######################### Libraries Loading ##################################
+function JSPomLoader(pomUrl, callback) {
+ console.log("POM Load URL:" + pomUrl);
+ var jsUrls;
+ var request = new Request({
+ url: pomUrl,
+ method: 'get',
+ onRequest: function() {
+ console.log("loading ...");
+ },
+ onSuccess: function(responseText, responseXML) {
- // dojo.event.kwConnect({srcObj: this._colorPalette,srcFunc:"onColorSelect",targetObj:this._colorPalette, targetFunc:"onSelect", once:true});
- var mouseCoords = core.Utils.getMousePosition(event);
- var colorPaletteElement = $("colorPalette");
- colorPaletteElement.setStyle('left', (mouseCoords.x - 80) + "px");
- colorPaletteElement.setStyle('display', "block");
-}
-;
+ // Collect JS Urls ...
+ var concatRoot = responseXML.getElementsByTagName('concat');
+ var fileSetArray = Array.filter(concatRoot[0].childNodes, function(elem) {
+ return elem.nodeType == Node.ELEMENT_NODE
+ });
-function cleanScreenEvent() {
- /*if (this.currentColorPicker) {
- this.currentColorPicker.hide();
- }*/
- $("fontFamilyPanel").setStyle('display', "none");
- $("fontSizePanel").setStyle('display', "none");
- $("topicShapePanel").setStyle('display', "none");
-// iconPanel.close();
-}
+ jsUrls = new Array();
+ Array.each(fileSetArray, function(elem) {
+ var jsUrl = elem.getAttribute("dir") + elem.getAttribute("files");
+ jsUrls.push(jsUrl.replace("${basedir}", pomUrl.substring(0, pomUrl.lastIndexOf('/'))));
+ }
+ );
-function fontFamilyPanel() {
- var supportedFonts = ['times','arial','tahoma','verdana'];
- var updateFunction = function(value) {
- value = value.charAt(0).toUpperCase() + value.substring(1, value.length);
- designer.setFont2SelectedNode(value);
- };
+ // Load all JS dynamically ....
+ jsUrls = jsUrls.reverse();
- var onFocusValue = function(selectedNode) {
- return selectedNode.getFontFamily();
- };
+ function jsRecLoad(urls) {
+ if (urls.length == 0) {
+ if ($defined(callback))
+ callback();
+ } else {
+ var url = urls.pop();
+// console.log("load url:" + url);
+ Asset.javascript(url, {
+ onLoad: function() {
+ jsRecLoad(urls)
+ }
+ });
+ }
+ }
- buildPanel('fontFamily', 'fontFamilyPanel', supportedFonts, updateFunction, onFocusValue);
-}
-
-function shapeTypePanel() {
- var shapeTypePanel = ['rectagle','rounded_rectagle','line','elipse'];
- var updateFunction = function(value) {
- designer.setShape2SelectedNode(value.replace('_', ' '));
- };
-
- var onFocusValue = function(selectedNode) {
-
- return selectedNode.getShapeType().replace(' ', '_');
- };
-
- buildPanel('topicShape', 'topicShapePanel', shapeTypePanel, updateFunction, onFocusValue);
-}
-
-function fontSizePanel() {
- var shapeTypePanel = ['small','normal','large','huge'];
- var map = {small:'6',normal:'8',large:'10',huge:'15'};
- var updateFunction = function(value) {
- var nodes = designer.getSelectedNodes();
- var value = map[value];
- designer.setFontSize2SelectedNode(value);
- };
-
- var onFocusValue = function(selectedNode) {
- var fontSize = selectedNode.getFontSize();
- var result = "";
- if (fontSize <= 6) {
- result = 'small';
- } else if (fontSize <= 8) {
- result = 'normal';
- } else if (fontSize <= 10) {
- result = 'large';
- } else if (fontSize >= 15) {
- result = 'huge';
+ jsRecLoad(jsUrls);
+ },
+ onFailure: function() {
+ console.log('Sorry, your request failed :(');
}
- return result;
- };
- buildPanel('fontSize', 'fontSizePanel', shapeTypePanel, updateFunction, onFocusValue);
-}
-
-function buildPanel(buttonElemId, elemLinksContainer, elemLinkIds, updateFunction, onFocusValue) {
- // Font family event handling ....
- $(buttonElemId).addEvent('click', function(event) {
- var container = $(elemLinksContainer);
- var isRendered = container.getStyle('display') == 'block';
- cleanScreenEvent();
-
- // Restore default css.
- for (var i = 0; i < elemLinkIds.length; i++) {
- var elementId = elemLinkIds[i];
- $(elementId).className = 'toolbarPanelLink';
- }
-
- // Select current element ...
- var nodes = designer.getSelectedNodes();
- var lenght = nodes.length;
- if (lenght == 1) {
- var selectedNode = nodes[0];
- var selectedElementId = onFocusValue(selectedNode);
- selectedElementId = selectedElementId.toLowerCase();
- var selectedElement = $(selectedElementId);
- selectedElement.className = 'toolbarPanelLinkSelectedLink';
- }
-
- container.setStyle('display', 'block');
-
- var mouseCoords = core.Utils.getMousePosition(event);
- if (!isRendered) {
- container.setStyle('left', (mouseCoords.x - 10) + "px");
- }
-
});
+ request.send();
- var fontOnClick = function(event) {
- var value = this.getAttribute('id');
- updateFunction(value);
- cleanScreenEvent();
- };
+}
- // Register event listeners on elements ...
- for (var i = 0; i < elemLinkIds.length; i++) {
- var elementId = elemLinkIds[i];
- $(elementId).addEvent('click', fontOnClick.bind($(elementId)));
- }
+var localEnv = true;
+if (localEnv) {
+ Asset.javascript("../../../../../web2d/target/classes/web2d.svg-min.js", {
+ onLoad: function() {
+ JSPomLoader('../../../../../mindplot/pom.xml', afterMindpotLibraryLoading)
+ }
+ });
+} else {
+ Asset.javascript("../js/mindplot.svg.js", {
+ onLoad: function() {
+ afterMindpotLibraryLoading();
+ }
+ });
}
\ No newline at end of file
diff --git a/wise-doc/src/main/webapp/js/jsapi.nocache.js b/wise-doc/src/main/webapp/js/jsapi.nocache.js
new file mode 100644
index 00000000..3e21827b
--- /dev/null
+++ b/wise-doc/src/main/webapp/js/jsapi.nocache.js
@@ -0,0 +1,16 @@
+function jsapi(){var L='',ec='\n-',sb='" for "gwt:onLoadErrorFn"',qb='" for "gwt:onPropertyErrorFn"',Tb='"
- (end)
-
- Returns:
- email=bob@bob.com&zipCode=90210
- */
-
- toQueryString: function() {
- var queryString = [];
- this.getFormElements().each(function(el) {
- var name = el.name;
- var value = el.getValue();
- if (value === false || !name || el.disabled) return;
- var qs = function(val) {
- queryString.push(name + '=' + encodeURIComponent(val));
- };
- if ($type(value) == 'array') value.each(qs);
- else qs(value);
- });
- return queryString.join('&');
- }
-
-});
-
-/*
-Script: Element.Dimensions.js
- Contains Element prototypes to deal with Element size and position in space.
-
-Note:
- The functions in this script require n XHTML doctype.
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Element
- Custom class to allow all of its methods to be used with any DOM element via the dollar function <$>.
-*/
-
-Element.extend({
-
-/*
- Property: scrollTo
- Scrolls the element to the specified coordinated (if the element has an overflow)
-
- Arguments:
- x - the x coordinate
- y - the y coordinate
-
- Example:
- >$('myElement').scrollTo(0, 100)
- */
-
- scrollTo: function(x, y) {
- this.scrollLeft = x;
- this.scrollTop = y;
- },
-
-/*
- Property: getSize
- Return an Object representing the size/scroll values of the element.
-
- Example:
- (start code)
- $('myElement').getSize();
- (end)
-
- Returns:
- (start code)
- {
- 'scroll': {'x': 100, 'y': 100},
- 'size': {'x': 200, 'y': 400},
- 'scrollSize': {'x': 300, 'y': 500}
- }
- (end)
- */
-
- getSize: function() {
- return {
- 'scroll': {'x': this.scrollLeft, 'y': this.scrollTop},
- 'size': {'x': this.offsetWidth, 'y': this.offsetHeight},
- 'scrollSize': {'x': this.scrollWidth, 'y': this.scrollHeight}
- };
- },
-
-/*
- Property: getPosition
- Returns the real offsets of the element.
-
- Arguments:
- overflown - optional, an array of nested scrolling containers for scroll offset calculation, use this if your element is inside any element containing scrollbars
-
- Example:
- >$('element').getPosition();
-
- Returns:
- >{x: 100, y:500};
- */
-
- getPosition: function(overflown) {
- overflown = overflown || [];
- var el = this, left = 0, top = 0;
- do {
- left += el.offsetLeft || 0;
- top += el.offsetTop || 0;
- el = el.offsetParent;
- } while (el);
- overflown.each(function(element) {
- left -= element.scrollLeft || 0;
- top -= element.scrollTop || 0;
- });
- return {'x': left, 'y': top};
- },
-
-/*
- Property: getTop
- Returns the distance from the top of the window to the Element.
-
- Arguments:
- overflown - optional, an array of nested scrolling containers, see Element::getPosition
- */
-
- getTop: function(overflown) {
- return this.getPosition(overflown).y;
- },
-
-/*
- Property: getLeft
- Returns the distance from the left of the window to the Element.
-
- Arguments:
- overflown - optional, an array of nested scrolling containers, see Element::getPosition
- */
-
- getLeft: function(overflown) {
- return this.getPosition(overflown).x;
- },
-
-/*
- Property: getCoordinates
- Returns an object with width, height, left, right, top, and bottom, representing the values of the Element
-
- Arguments:
- overflown - optional, an array of nested scrolling containers, see Element::getPosition
-
- Example:
- (start code)
- var myValues = $('myElement').getCoordinates();
- (end)
-
- Returns:
- (start code)
- {
- width: 200,
- height: 300,
- left: 100,
- top: 50,
- right: 300,
- bottom: 350
- }
- (end)
- */
-
- getCoordinates: function(overflown) {
- var position = this.getPosition(overflown);
- var obj = {
- 'width': this.offsetWidth,
- 'height': this.offsetHeight,
- 'left': position.x,
- 'top': position.y
- };
- obj.right = obj.left + obj.width;
- obj.bottom = obj.top + obj.height;
- return obj;
- }
-
-});
-
-/*
-Script: Window.DomReady.js
- Contains the custom event domready, for window.
-
-License:
- MIT-style license.
-*/
-
-/* Section: Custom Events */
-
-/*
-Event: domready
- executes a function when the dom tree is loaded, without waiting for images. Only works when called from window.
-
-Credits:
- (c) Dean Edwards/Matthias Miller/John Resig, remastered for MooTools.
-
-Arguments:
- fn - the function to execute when the DOM is ready
-
-Example:
- > window.addEvent('domready', function(){
- > alert('the dom is ready');
- > });
-*/
-
-Element.Events.domready = {
-
- add: function(fn) {
- if (window.loaded) {
- fn.call(this);
- return;
- }
- var domReady = function() {
- if (window.loaded) return;
- window.loaded = true;
- window.timer = $clear(window.timer);
- this.fireEvent('domready');
- }.bind(this);
- if (document.readyState && window.webkit) {
- window.timer = function() {
- if (['loaded','complete'].contains(document.readyState)) domReady();
- }.periodical(50);
- } else if (document.readyState && window.ie) {
- if (!$('ie_ready')) {
- var src = (window.location.protocol == 'https:') ? '://0' : 'javascript:void(0)';
- document.write('
- (end)
- */
-
- send: function(options) {
- return new Ajax(this.getProperty('action'), $merge({data: this.toQueryString()}, options, {method: 'post'})).request();
- }
-
-});
-
-/*
-Script: Cookie.js
- A cookie reader/creator
-
-Credits:
- based on the functions by Peter-Paul Koch (http://quirksmode.org)
-*/
-
-/*
-Class: Cookie
- Class for creating, getting, and removing cookies.
-*/
-
-var Cookie = new Abstract({
-
- options: {
- domain: false,
- path: false,
- duration: false,
- secure: false
- },
-
-/*
- Property: set
- Sets a cookie in the browser.
-
- Arguments:
- key - the key (name) for the cookie
- value - the value to set, cannot contain semicolons
- options - an object representing the Cookie options. See Options below. Default values are stored in Cookie.options.
-
- Options:
- domain - the domain the Cookie belongs to. If you want to share the cookie with pages located on a different domain, you have to set this value. Defaults to the current domain.
- path - the path the Cookie belongs to. If you want to share the cookie with pages located in a different path, you have to set this value, for example to "/" to share the cookie with all pages on the domain. Defaults to the current path.
- duration - the duration of the Cookie before it expires, in days.
- If set to false or 0, the cookie will be a session cookie that expires when the browser is closed. This is default.
- secure - Stored cookie information can be accessed only from a secure environment.
-
- Returns:
- An object with the options, the key and the value. You can give it as first parameter to Cookie.remove.
-
- Example:
- >Cookie.set('username', 'Harald'); // session cookie (duration is false), or ...
- >Cookie.set('username', 'JackBauer', {duration: 1}); // save this for 1 day
-
- */
-
- set: function(key, value, options) {
- options = $merge(this.options, options);
- value = encodeURIComponent(value);
- if (options.domain) value += '; domain=' + options.domain;
- if (options.path) value += '; path=' + options.path;
- if (options.duration) {
- var date = new Date();
- date.setTime(date.getTime() + options.duration * 24 * 60 * 60 * 1000);
- value += '; expires=' + date.toGMTString();
- }
- if (options.secure) value += '; secure';
- document.cookie = key + '=' + value;
- return $extend(options, {'key': key, 'value': value});
- },
-
-/*
- Property: get
- Gets the value of a cookie.
-
- Arguments:
- key - the name of the cookie you wish to retrieve.
-
- Returns:
- The cookie string value, or false if not found.
-
- Example:
- >Cookie.get("username") //returns JackBauer
- */
-
- get: function(key) {
- var value = document.cookie.match('(?:^|;)\\s*' + key.escapeRegExp() + '=([^;]*)');
- return value ? decodeURIComponent(value[1]) : false;
- },
-
-/*
- Property: remove
- Removes a cookie from the browser.
-
- Arguments:
- cookie - the name of the cookie to remove or a previous cookie (for domains)
- options - optional. you can also pass the domain and path here. Same as options in
-
- Examples:
- >Cookie.remove('username') //bye-bye JackBauer, cya in 24 hours
- >
- >var myCookie = Cookie.set('username', 'Aaron', {domain: 'mootools.net'}); // Cookie.set returns an object with all values need to remove the cookie
- >Cookie.remove(myCookie);
- */
-
- remove: function(cookie, options) {
- if ($type(cookie) == 'object') this.set(cookie.key, '', $merge(cookie, {duration: -1}));
- else this.set(cookie, '', $merge(options, {duration: -1}));
- }
-
-});
-
-/*
-Script: Json.js
- Simple Json parser and Stringyfier, See:
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Json
- Simple Json parser and Stringyfier, See:
-*/
-
-var Json = {
-
-/*
- Property: toString
- Converts an object to a string, to be passed in server-side scripts as a parameter. Although its not normal usage for this class, this method can also be used to convert functions and arrays to strings.
-
- Arguments:
- obj - the object to convert to string
-
- Returns:
- A json string
-
- Example:
- (start code)
- Json.toString({apple: 'red', lemon: 'yellow'}); '{"apple":"red","lemon":"yellow"}'
- (end)
- */
-
- toString: function(obj) {
- switch ($type(obj)) {
- case 'string':
- return '"' + obj.replace(/(["\\])/g, '\\$1') + '"';
- case 'array':
- return '[' + obj.map(Json.toString).join(',') + ']';
- case 'object':
- var string = [];
- for (var property in obj) string.push(Json.toString(property) + ':' + Json.toString(obj[property]));
- return '{' + string.join(',') + '}';
- case 'number':
- if (isFinite(obj)) break;
- case false:
- return 'null';
- }
- return String(obj);
- },
-
-/*
- Property: evaluate
- converts a json string to an javascript Object.
-
- Arguments:
- str - the string to evaluate. if its not a string, it returns false.
- secure - optionally, performs syntax check on json string. Defaults to false.
-
- Credits:
- Json test regexp is by Douglas Crockford .
-
- Example:
- >var myObject = Json.evaluate('{"apple":"red","lemon":"yellow"}');
- >//myObject will become {apple: 'red', lemon: 'yellow'}
- */
-
- evaluate: function(str, secure) {
- return (($type(str) != 'string') || (secure && !str.test(/^("(\\.|[^"\\\n\r])*?"|[,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t])+?$/))) ? null : eval('(' + str + ')');
- }
-
-};
-
-/*
-Script: Json.Remote.js
- Contains .
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Json.Remote
- Wrapped XHR with automated sending and receiving of Javascript Objects in Json Format.
- Inherits methods, properties, options and events from .
-
-Arguments:
- url - the url you want to send your object to.
- options - see options
-
-Example:
- this code will send user information based on name/last name
- (start code)
- var jSonRequest = new Json.Remote("http://site.com/tellMeAge.php", {onComplete: function(person){
- alert(person.age); //is 25 years
- alert(person.height); //is 170 cm
- alert(person.weight); //is 120 kg
- }}).send({'name': 'John', 'lastName': 'Doe'});
- (end)
-*/
-
-Json.Remote = XHR.extend({
-
- initialize: function(url, options) {
- this.url = url;
- this.addEvent('onSuccess', this.onComplete);
- this.parent(options);
- this.setHeader('X-Request', 'JSON');
- },
-
- send: function(obj) {
- return this.parent(this.url, 'json=' + Json.toString(obj));
- },
-
- onComplete: function() {
- this.fireEvent('onComplete', [Json.evaluate(this.response.text, this.options.secure)]);
- }
-
-});
-
-/*
-Script: Assets.js
- provides dynamic loading for images, css and javascript files.
-
-License:
- MIT-style license.
-*/
-
-var Asset = new Abstract({
-
-/*
- Property: javascript
- Injects a javascript file in the page.
-
- Arguments:
- source - the path of the javascript file
- properties - some additional attributes you might want to add to the script element
-
- Example:
- > new Asset.javascript('/scripts/myScript.js', {id: 'myScript'});
- */
-
- javascript: function(source, properties) {
- properties = $merge({
- 'onload': Class.empty
- }, properties);
- var script = new Element('script', {'src': source}).addEvents({
- 'load': properties.onload,
- 'readystatechange': function() {
- if (this.readyState == 'complete') this.fireEvent('load');
- }
- });
- delete properties.onload;
- return script.setProperties(properties).inject(document.head);
- },
-
-/*
- Property: css
- Injects a css file in the page.
-
- Arguments:
- source - the path of the css file
- properties - some additional attributes you might want to add to the link element
-
- Example:
- > new Asset.css('/css/myStyle.css', {id: 'myStyle', title: 'myStyle'});
- */
-
- css: function(source, properties) {
- return new Element('link', $merge({
- 'rel': 'stylesheet', 'media': 'screen', 'type': 'text/css', 'href': source
- }, properties)).inject(document.head);
- },
-
-/*
- Property: image
- Preloads an image and returns the img element. does not inject it to the page.
-
- Arguments:
- source - the path of the image file
- properties - some additional attributes you might want to add to the img element
-
- Example:
- > new Asset.image('/images/myImage.png', {id: 'myImage', title: 'myImage', onload: myFunction});
-
- Returns:
- the img element. you can inject it anywhere you want with //
- */
-
- image: function(source, properties) {
- properties = $merge({
- 'onload': Class.empty,
- 'onabort': Class.empty,
- 'onerror': Class.empty
- }, properties);
- var image = new Image();
- image.src = source;
- var element = new Element('img', {'src': source});
- ['load', 'abort', 'error'].each(function(type) {
- var event = properties['on' + type];
- delete properties['on' + type];
- element.addEvent(type, function() {
- this.removeEvent(type, arguments.callee);
- event.call(this);
- });
- });
- if (image.width && image.height) element.fireEvent('load', element, 1);
- return element.setProperties(properties);
- },
-
-/*
- Property: images
- Preloads an array of images (as strings) and returns an array of img elements. does not inject them to the page.
-
- Arguments:
- sources - array, the paths of the image files
- options - object, see below
-
- Options:
- onComplete - a function to execute when all image files are loaded in the browser's cache
- onProgress - a function to execute when one image file is loaded in the browser's cache
-
- Example:
- (start code)
- new Asset.images(['/images/myImage.png', '/images/myImage2.gif'], {
- onComplete: function(){
- alert('all images loaded!');
- }
- });
- (end)
-
- Returns:
- the img elements as $$. you can inject them anywhere you want with //
- */
-
- images: function(sources, options) {
- options = $merge({
- onComplete: Class.empty,
- onProgress: Class.empty
- }, options);
- if (!sources.push) sources = [sources];
- var images = [];
- var counter = 0;
- sources.each(function(source) {
- var img = new Asset.image(source, {
- 'onload': function() {
- options.onProgress.call(this, counter);
- counter++;
- if (counter == sources.length) options.onComplete();
- }
- });
- images.push(img);
- });
- return new Elements(images);
- }
-
-});
-
-/*
-Script: Hash.js
- Contains the class Hash.
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Hash
- It wraps an object that it uses internally as a map. The user must use set(), get(), and remove() to add/change, retrieve and remove values, it must not access the internal object directly. null/undefined values are allowed.
-
-Note:
- Each hash instance has the length property.
-
-Arguments:
- obj - an object to convert into a Hash instance.
-
-Example:
- (start code)
- var hash = new Hash({a: 'hi', b: 'world', c: 'howdy'});
- hash.remove('b'); // b is removed.
- hash.set('c', 'hello');
- hash.get('c'); // returns 'hello'
- hash.length // returns 2 (a and c)
- (end)
-*/
-
-var Hash = new Class({
-
- length: 0,
-
- initialize: function(object) {
- this.obj = object || {};
- this.setLength();
- },
-
-/*
- Property: get
- Retrieves a value from the hash.
-
- Arguments:
- key - The key
-
- Returns:
- The value
- */
-
- get: function(key) {
- return (this.hasKey(key)) ? this.obj[key] : null;
- },
-
-/*
- Property: hasKey
- Check the presence of a specified key-value pair in the hash.
-
- Arguments:
- key - The key
-
- Returns:
- True if the Hash contains a value for the specified key, otherwise false
- */
-
- hasKey: function(key) {
- return (key in this.obj);
- },
-
-/*
- Property: set
- Adds a key-value pair to the hash or replaces a previous value associated with the key.
-
- Arguments:
- key - The key
- value - The value
- */
-
- set: function(key, value) {
- if (!this.hasKey(key)) this.length++;
- this.obj[key] = value;
- return this;
- },
-
- setLength: function() {
- this.length = 0;
- for (var p in this.obj) this.length++;
- return this;
- },
-
-/*
- Property: remove
- Removes a key-value pair from the hash.
-
- Arguments:
- key - The key
- */
-
- remove: function(key) {
- if (this.hasKey(key)) {
- delete this.obj[key];
- this.length--;
- }
- return this;
- },
-
-/*
- Property: each
- Calls a function for each key-value pair. The first argument passed to the function will be the value, the second one will be the key, like $each.
-
- Arguments:
- fn - The function to call for each key-value pair
- bind - Optional, the object that will be referred to as "this" in the function
- */
-
- each: function(fn, bind) {
- $each(this.obj, fn, bind);
- },
-
-/*
- Property: extend
- Extends the current hash with an object containing key-value pairs. Values for duplicate keys will be replaced by the new ones.
-
- Arguments:
- obj - An object containing key-value pairs
- */
-
- extend: function(obj) {
- $extend(this.obj, obj);
- return this.setLength();
- },
-
-/*
- Property: merge
- Merges the current hash with multiple objects.
- */
-
- merge: function() {
- this.obj = $merge.apply(null, [this.obj].extend(arguments));
- return this.setLength();
- },
-
-/*
- Property: empty
- Empties all hash values properties and values.
- */
-
- empty: function() {
- this.obj = {};
- this.length = 0;
- return this;
- },
-
-/*
- Property: keys
- Returns an array containing all the keys, in the same order as the values returned by .
-
- Returns:
- An array containing all the keys of the hash
- */
-
- keys: function() {
- var keys = [];
- for (var property in this.obj) keys.push(property);
- return keys;
- },
-
-/*
- Property: values
- Returns an array containing all the values, in the same order as the keys returned by .
-
- Returns:
- An array containing all the values of the hash
- */
-
- values: function() {
- var values = [];
- for (var property in this.obj) values.push(this.obj[property]);
- return values;
- }
-
-});
-
-/* Section: Utility Functions */
-
-/*
-Function: $H
- Shortcut to create a Hash from an Object.
-*/
-
-function $H(obj) {
- return new Hash(obj);
-}
-;
-
-/*
-Script: Hash.Cookie.js
- Stores and loads an Hash as a cookie using Json format.
-*/
-
-/*
-Class: Hash.Cookie
- Inherits all the methods from , additional methods are save and load.
- Hash json string has a limit of 4kb (4096byte), so be careful with your Hash size.
- Creating a new instance automatically loads the data from the Cookie into the Hash.
- If the Hash is emptied, the cookie is also removed.
-
-Arguments:
- name - the key (name) for the cookie
- options - options are identical to and are simply passed along to it.
- In addition, it has the autoSave option, to save the cookie at every operation. defaults to true.
-
-Example:
- (start code)
- var fruits = new Hash.Cookie('myCookieName', {duration: 3600});
- fruits.extend({
- 'lemon': 'yellow',
- 'apple': 'red'
- });
- fruits.set('melon', 'green');
- fruits.get('lemon'); // yellow
-
- // ... on another page ... values load automatically
-
- var fruits = new Hash.Cookie('myCookieName', {duration: 365});
- fruits.get('melon'); // green
-
- fruits.erase(); // delete cookie
- (end)
-*/
-
-Hash.Cookie = Hash.extend({
-
- initialize: function(name, options) {
- this.name = name;
- this.options = $extend({'autoSave': true}, options || {});
- this.load();
- },
-
-/*
- Property: save
- Saves the Hash to the cookie. If the hash is empty, removes the cookie.
-
- Returns:
- Returns false when the JSON string cookie is too long (4kb), otherwise true.
-
- Example:
- (start code)
- var login = new Hash.Cookie('userstatus', {autoSave: false});
-
- login.extend({
- 'username': 'John',
- 'credentials': [4, 7, 9]
- });
- login.set('last_message', 'User logged in!');
-
- login.save(); // finally save the Hash
- (end)
- */
-
- save: function() {
- if (this.length == 0) {
- Cookie.remove(this.name, this.options);
- return true;
- }
- var str = Json.toString(this.obj);
- if (str.length > 4096) return false; //cookie would be truncated!
- Cookie.set(this.name, str, this.options);
- return true;
- },
-
-/*
- Property: load
- Loads the cookie and assigns it to the Hash.
- */
-
- load: function() {
- this.obj = Json.evaluate(Cookie.get(this.name), true) || {};
- this.setLength();
- }
-
-});
-
-Hash.Cookie.Methods = {};
-['extend', 'set', 'merge', 'empty', 'remove'].each(function(method) {
- Hash.Cookie.Methods[method] = function() {
- Hash.prototype[method].apply(this, arguments);
- if (this.options.autoSave) this.save();
- return this;
- };
-});
-Hash.Cookie.implement(Hash.Cookie.Methods);
-
-/*
-Script: Color.js
- Contains the Color class.
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Color
- Creates a new Color Object, which is an array with some color specific methods.
-Arguments:
- color - the hex, the RGB array or the HSB array of the color to create. For HSB colors, you need to specify the second argument.
- type - a string representing the type of the color to create. needs to be specified if you intend to create the color with HSB values, or an array of HEX values. Can be 'rgb', 'hsb' or 'hex'.
-
-Example:
- (start code)
- var black = new Color('#000');
- var purple = new Color([255,0,255]);
- // mix black with white and purple, each time at 10% of the new color
- var darkpurple = black.mix('#fff', purple, 10);
- $('myDiv').setStyle('background-color', darkpurple);
- (end)
-*/
-
-var Color = new Class({
-
- initialize: function(color, type) {
- type = type || (color.push ? 'rgb' : 'hex');
- var rgb, hsb;
- switch (type) {
- case 'rgb':
- rgb = color;
- hsb = rgb.rgbToHsb();
- break;
- case 'hsb':
- rgb = color.hsbToRgb();
- hsb = color;
- break;
- default:
- rgb = color.hexToRgb(true);
- hsb = rgb.rgbToHsb();
- }
- rgb.hsb = hsb;
- rgb.hex = rgb.rgbToHex();
- return $extend(rgb, Color.prototype);
- },
-
-/*
- Property: mix
- Mixes two or more colors with the Color.
-
- Arguments:
- color - a color to mix. you can use as arguments how many colors as you want to mix with the original one.
- alpha - if you use a number as the last argument, it will be threated as the amount of the color to mix.
- */
-
- mix: function() {
- var colors = $A(arguments);
- var alpha = ($type(colors[colors.length - 1]) == 'number') ? colors.pop() : 50;
- var rgb = this.copy();
- colors.each(function(color) {
- color = new Color(color);
- for (var i = 0; i < 3; i++) rgb[i] = Math.round((rgb[i] / 100 * (100 - alpha)) + (color[i] / 100 * alpha));
- });
- return new Color(rgb, 'rgb');
- },
-
-/*
- Property: invert
- Inverts the Color.
- */
-
- invert: function() {
- return new Color(this.map(function(value) {
- return 255 - value;
- }));
- },
-
-/*
- Property: setHue
- Modifies the hue of the Color, and returns a new one.
-
- Arguments:
- value - the hue to set
- */
-
- setHue: function(value) {
- return new Color([value, this.hsb[1], this.hsb[2]], 'hsb');
- },
-
-/*
- Property: setSaturation
- Changes the saturation of the Color, and returns a new one.
-
- Arguments:
- percent - the percentage of the saturation to set
- */
-
- setSaturation: function(percent) {
- return new Color([this.hsb[0], percent, this.hsb[2]], 'hsb');
- },
-
-/*
- Property: setBrightness
- Changes the brightness of the Color, and returns a new one.
-
- Arguments:
- percent - the percentage of the brightness to set
- */
-
- setBrightness: function(percent) {
- return new Color([this.hsb[0], this.hsb[1], percent], 'hsb');
- }
-
-});
-
-/* Section: Utility Functions */
-
-/*
-Function: $RGB
- Shortcut to create a new color, based on red, green, blue values.
-
-Arguments:
- r - (integer) red value (0-255)
- g - (integer) green value (0-255)
- b - (integer) blue value (0-255)
-
-*/
-
-function $RGB(r, g, b) {
- return new Color([r, g, b], 'rgb');
-}
-;
-
-/*
-Function: $HSB
- Shortcut to create a new color, based on hue, saturation, brightness values.
-
-Arguments:
- h - (integer) hue value (0-100)
- s - (integer) saturation value (0-100)
- b - (integer) brightness value (0-100)
-*/
-
-function $HSB(h, s, b) {
- return new Color([h, s, b], 'hsb');
-}
-;
-
-/*
-Class: Array
- A collection of The Array Object prototype methods.
-*/
-
-Array.extend({
-
-/*
- Property: rgbToHsb
- Converts a RGB array to an HSB array.
-
- Returns:
- the HSB array.
- */
-
- rgbToHsb: function() {
- var red = this[0], green = this[1], blue = this[2];
- var hue, saturation, brightness;
- var max = Math.max(red, green, blue), min = Math.min(red, green, blue);
- var delta = max - min;
- brightness = max / 255;
- saturation = (max != 0) ? delta / max : 0;
- if (saturation == 0) {
- hue = 0;
- } else {
- var rr = (max - red) / delta;
- var gr = (max - green) / delta;
- var br = (max - blue) / delta;
- if (red == max) hue = br - gr;
- else if (green == max) hue = 2 + rr - br;
- else hue = 4 + gr - rr;
- hue /= 6;
- if (hue < 0) hue++;
- }
- return [Math.round(hue * 360), Math.round(saturation * 100), Math.round(brightness * 100)];
- },
-
-/*
- Property: hsbToRgb
- Converts an HSB array to an RGB array.
-
- Returns:
- the RGB array.
- */
-
- hsbToRgb: function() {
- var br = Math.round(this[2] / 100 * 255);
- if (this[1] == 0) {
- return [br, br, br];
- } else {
- var hue = this[0] % 360;
- var f = hue % 60;
- var p = Math.round((this[2] * (100 - this[1])) / 10000 * 255);
- var q = Math.round((this[2] * (6000 - this[1] * f)) / 600000 * 255);
- var t = Math.round((this[2] * (6000 - this[1] * (60 - f))) / 600000 * 255);
- switch (Math.floor(hue / 60)) {
- case 0: return [br, t, p];
- case 1: return [q, br, p];
- case 2: return [p, br, t];
- case 3: return [p, q, br];
- case 4: return [t, p, br];
- case 5: return [br, p, q];
- }
- }
- return false;
- }
-
-});
-
-/*
-Script: Scroller.js
- Contains the .
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Scroller
- The Scroller is a class to scroll any element with an overflow (including the window) when the mouse cursor reaches certain buondaries of that element.
- You must call its start method to start listening to mouse movements.
-
-Note:
- The Scroller requires an XHTML doctype.
-
-Arguments:
- element - required, the element to scroll.
- options - optional, see options below, and options.
-
-Options:
- area - integer, the necessary boundaries to make the element scroll.
- velocity - integer, velocity ratio, the modifier for the window scrolling speed.
-
-Events:
- onChange - optionally, when the mouse reaches some boundaries, you can choose to alter some other values, instead of the scrolling offsets.
- Automatically passes as parameters x and y values.
-*/
-
-var Scroller = new Class({
-
- options: {
- area: 20,
- velocity: 1,
- onChange: function(x, y) {
- this.element.scrollTo(x, y);
- }
- },
-
- initialize: function(element, options) {
- this.setOptions(options);
- this.element = $(element);
- this.mousemover = ([window, document].contains(element)) ? $(document.body) : this.element;
- },
-
-/*
- Property: start
- The scroller starts listening to mouse movements.
- */
-
- start: function() {
- this.coord = this.getCoords.bindWithEvent(this);
- this.mousemover.addListener('mousemove', this.coord);
- },
-
-/*
- Property: stop
- The scroller stops listening to mouse movements.
- */
-
- stop: function() {
- this.mousemover.removeListener('mousemove', this.coord);
- this.timer = $clear(this.timer);
- },
-
- getCoords: function(event) {
- this.page = (this.element == window) ? event.client : event.page;
- if (!this.timer) this.timer = this.scroll.periodical(50, this);
- },
-
- scroll: function() {
- var el = this.element.getSize();
- var pos = this.element.getPosition();
-
- var change = {'x': 0, 'y': 0};
- for (var z in this.page) {
- if (this.page[z] < (this.options.area + pos[z]) && el.scroll[z] != 0)
- change[z] = (this.page[z] - this.options.area - pos[z]) * this.options.velocity;
- else if (this.page[z] + this.options.area > (el.size[z] + pos[z]) && el.scroll[z] + el.size[z] != el.scrollSize[z])
- change[z] = (this.page[z] - el.size[z] + this.options.area - pos[z]) * this.options.velocity;
- }
- if (change.y || change.x) this.fireEvent('onChange', [el.scroll.x + change.x, el.scroll.y + change.y]);
- }
-
-});
-
-Scroller.implement(new Events, new Options);
-
-/*
-Script: Slider.js
- Contains
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Slider
- Creates a slider with two elements: a knob and a container. Returns the values.
-
-Note:
- The Slider requires an XHTML doctype.
-
-Arguments:
- element - the knob container
- knob - the handle
- options - see Options below
-
-Options:
- steps - the number of steps for your slider.
- mode - either 'horizontal' or 'vertical'. defaults to horizontal.
- offset - relative offset for knob position. default to 0.
-
-Events:
- onChange - a function to fire when the value changes.
- onComplete - a function to fire when you're done dragging.
- onTick - optionally, you can alter the onTick behavior, for example displaying an effect of the knob moving to the desired position.
- Passes as parameter the new position.
-*/
-
-var Slider = new Class({
-
- options: {
- onChange: Class.empty,
- onComplete: Class.empty,
- onTick: function(pos) {
- this.knob.setStyle(this.p, pos);
- },
- mode: 'horizontal',
- steps: 100,
- offset: 0
- },
-
- initialize: function(el, knob, options) {
- this.element = $(el);
- this.knob = $(knob);
- this.setOptions(options);
- this.previousChange = -1;
- this.previousEnd = -1;
- this.step = -1;
- this.element.addEvent('mousedown', this.clickedElement.bindWithEvent(this));
- var mod, offset;
- switch (this.options.mode) {
- case 'horizontal':
- this.z = 'x';
- this.p = 'left';
- mod = {'x': 'left', 'y': false};
- offset = 'offsetWidth';
- break;
- case 'vertical':
- this.z = 'y';
- this.p = 'top';
- mod = {'x': false, 'y': 'top'};
- offset = 'offsetHeight';
- }
- this.max = this.element[offset] - this.knob[offset] + (this.options.offset * 2);
- this.half = this.knob[offset] / 2;
- this.getPos = this.element['get' + this.p.capitalize()].bind(this.element);
- this.knob.setStyle('position', 'relative').setStyle(this.p, - this.options.offset);
- var lim = {};
- lim[this.z] = [- this.options.offset, this.max - this.options.offset];
- this.drag = new Drag.Base(this.knob, {
- limit: lim,
- modifiers: mod,
- snap: 0,
- onStart: function() {
- this.draggedKnob();
- }.bind(this),
- onDrag: function() {
- this.draggedKnob();
- }.bind(this),
- onComplete: function() {
- this.draggedKnob();
- this.end();
- }.bind(this)
- });
- if (this.options.initialize) this.options.initialize.call(this);
- },
-
-/*
- Property: set
- The slider will get the step you pass.
-
- Arguments:
- step - one integer
- */
-
- set: function(step) {
- this.step = step.limit(0, this.options.steps);
- this.checkStep();
- this.end();
- this.fireEvent('onTick', this.toPosition(this.step));
- return this;
- },
-
- clickedElement: function(event) {
- var position = event.page[this.z] - this.getPos() - this.half;
- position = position.limit(-this.options.offset, this.max - this.options.offset);
- this.step = this.toStep(position);
- this.checkStep();
- this.end();
- this.fireEvent('onTick', position);
- },
-
- draggedKnob: function() {
- this.step = this.toStep(this.drag.value.now[this.z]);
- this.checkStep();
- },
-
- checkStep: function() {
- if (this.previousChange != this.step) {
- this.previousChange = this.step;
- this.fireEvent('onChange', this.step);
- }
- },
-
- end: function() {
- if (this.previousEnd !== this.step) {
- this.previousEnd = this.step;
- this.fireEvent('onComplete', this.step + '');
- }
- },
-
- toStep: function(position) {
- return Math.round((position + this.options.offset) / this.max * this.options.steps);
- },
-
- toPosition: function(step) {
- return this.max * step / this.options.steps;
- }
-
-});
-
-Slider.implement(new Events);
-Slider.implement(new Options);
-
-/*
-Script: SmoothScroll.js
- Contains
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: SmoothScroll
- Auto targets all the anchors in a page and display a smooth scrolling effect upon clicking them.
- Inherits methods, properties, options and events from .
-
-Note:
- SmoothScroll requires an XHTML doctype.
-
-Arguments:
- options - the Fx.Scroll options (see: ) plus links, a collection of elements you want your smoothscroll on. Defaults to document.links.
-
-Example:
- >new SmoothScroll();
-*/
-
-var SmoothScroll = Fx.Scroll.extend({
-
- initialize: function(options) {
- this.parent(window, options);
- this.links = (this.options.links) ? $$(this.options.links) : $$(document.links);
- var location = window.location.href.match(/^[^#]*/)[0] + '#';
- this.links.each(function(link) {
- if (link.href.indexOf(location) != 0) return;
- var anchor = link.href.substr(location.length);
- if (anchor && $(anchor)) this.useLink(link, anchor);
- }, this);
- if (!window.webkit419) this.addEvent('onComplete', function() {
- window.location.hash = this.anchor;
- });
- },
-
- useLink: function(link, anchor) {
- link.addEvent('click', function(event) {
- this.anchor = anchor;
- this.toElement(anchor);
- event.stop();
- }.bindWithEvent(this));
- }
-
-});
-
-/*
-Script: Sortables.js
- Contains Class.
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Sortables
- Creates an interface for and drop, resorting of a list.
-
-Note:
- The Sortables require an XHTML doctype.
-
-Arguments:
- list - required, the list that will become sortable.
- options - an Object, see options below.
-
-Options:
- handles - a collection of elements to be used for drag handles. defaults to the elements.
-
-Events:
- onStart - function executed when the item starts dragging
- onComplete - function executed when the item ends dragging
-*/
-
-var Sortables = new Class({
-
- options: {
- handles: false,
- onStart: Class.empty,
- onComplete: Class.empty,
- ghost: true,
- snap: 3,
- onDragStart: function(element, ghost) {
- ghost.setStyle('opacity', 0.7);
- element.setStyle('opacity', 0.7);
- },
- onDragComplete: function(element, ghost) {
- element.setStyle('opacity', 1);
- ghost.remove();
- this.trash.remove();
- }
- },
-
- initialize: function(list, options) {
- this.setOptions(options);
- this.list = $(list);
- this.elements = this.list.getChildren();
- this.handles = (this.options.handles) ? $$(this.options.handles) : this.elements;
- this.bound = {
- 'start': [],
- 'moveGhost': this.moveGhost.bindWithEvent(this)
- };
- for (var i = 0, l = this.handles.length; i < l; i++) {
- this.bound.start[i] = this.start.bindWithEvent(this, this.elements[i]);
- }
- this.attach();
- if (this.options.initialize) this.options.initialize.call(this);
- this.bound.move = this.move.bindWithEvent(this);
- this.bound.end = this.end.bind(this);
- },
-
- attach: function() {
- this.handles.each(function(handle, i) {
- handle.addEvent('mousedown', this.bound.start[i]);
- }, this);
- },
-
- detach: function() {
- this.handles.each(function(handle, i) {
- handle.removeEvent('mousedown', this.bound.start[i]);
- }, this);
- },
-
- start: function(event, el) {
- this.active = el;
- this.coordinates = this.list.getCoordinates();
- if (this.options.ghost) {
- var position = el.getPosition();
- this.offset = event.page.y - position.y;
- this.trash = new Element('div').inject(document.body);
- this.ghost = el.clone().inject(this.trash).setStyles({
- 'position': 'absolute',
- 'left': position.x,
- 'top': event.page.y - this.offset
- });
- document.addListener('mousemove', this.bound.moveGhost);
- this.fireEvent('onDragStart', [el, this.ghost]);
- }
- document.addListener('mousemove', this.bound.move);
- document.addListener('mouseup', this.bound.end);
- this.fireEvent('onStart', el);
- event.stop();
- },
-
- moveGhost: function(event) {
- var value = event.page.y - this.offset;
- value = value.limit(this.coordinates.top, this.coordinates.bottom - this.ghost.offsetHeight);
- this.ghost.setStyle('top', value);
- event.stop();
- },
-
- move: function(event) {
- var now = event.page.y;
- this.previous = this.previous || now;
- var up = ((this.previous - now) > 0);
- var prev = this.active.getPrevious();
- var next = this.active.getNext();
- if (prev && up && now < prev.getCoordinates().bottom) this.active.injectBefore(prev);
- if (next && !up && now > next.getCoordinates().top) this.active.injectAfter(next);
- this.previous = now;
- },
-
- serialize: function(converter) {
- return this.list.getChildren().map(converter || function(el) {
- return this.elements.indexOf(el);
- }, this);
- },
-
- end: function() {
- this.previous = null;
- document.removeListener('mousemove', this.bound.move);
- document.removeListener('mouseup', this.bound.end);
- if (this.options.ghost) {
- document.removeListener('mousemove', this.bound.moveGhost);
- this.fireEvent('onDragComplete', [this.active, this.ghost]);
- }
- this.fireEvent('onComplete', this.active);
- }
-
-});
-
-Sortables.implement(new Events, new Options);
-
-/*
-Script: Tips.js
- Tooltips, BubbleTips, whatever they are, they will appear on mouseover
-
-License:
- MIT-style license.
-
-Credits:
- The idea behind Tips.js is based on Bubble Tooltips () by Alessandro Fulcitiniti
-*/
-
-/*
-Class: Tips
- Display a tip on any element with a title and/or href.
-
-Note:
- Tips requires an XHTML doctype.
-
-Arguments:
- elements - a collection of elements to apply the tooltips to on mouseover.
- options - an object. See options Below.
-
-Options:
- maxTitleChars - the maximum number of characters to display in the title of the tip. defaults to 30.
- showDelay - the delay the onShow method is called. (defaults to 100 ms)
- hideDelay - the delay the onHide method is called. (defaults to 100 ms)
-
- className - the prefix for your tooltip classNames. defaults to 'tool'.
-
- the whole tooltip will have as classname: tool-tip
-
- the title will have as classname: tool-title
-
- the text will have as classname: tool-text
-
- offsets - the distance of your tooltip from the mouse. an Object with x/y properties.
- fixed - if set to true, the toolTip will not follow the mouse.
-
-Events:
- onShow - optionally you can alter the default onShow behaviour with this option (like displaying a fade in effect);
- onHide - optionally you can alter the default onHide behaviour with this option (like displaying a fade out effect);
-
-Example:
- (start code)
- 
-
- (end)
-
-Note:
- The title of the element will always be used as the tooltip body. If you put :: on your title, the text before :: will become the tooltip title.
-*/
-
-var Tips = new Class({
-
- options: {
- onShow: function(tip) {
- tip.setStyle('visibility', 'visible');
- },
- onHide: function(tip) {
- tip.setStyle('visibility', 'hidden');
- },
- maxTitleChars: 30,
- showDelay: 100,
- hideDelay: 100,
- className: 'tool',
- offsets: {'x': 16, 'y': 16},
- fixed: false
- },
-
- initialize: function(elements, options) {
- this.setOptions(options);
- this.toolTip = new Element('div', {
- 'class': this.options.className + '-tip',
- 'styles': {
- 'position': 'absolute',
- 'top': '0',
- 'left': '0',
- 'visibility': 'hidden'
- }
- }).inject(document.body);
- this.wrapper = new Element('div').inject(this.toolTip);
- $$(elements).each(this.build, this);
- if (this.options.initialize) this.options.initialize.call(this);
- },
-
- build: function(el) {
- el.$tmp.myTitle = (el.href && el.getTag() == 'a') ? el.href.replace('http://', '') : (el.rel || false);
- if (el.title) {
- var dual = el.title.split('::');
- if (dual.length > 1) {
- el.$tmp.myTitle = dual[0].trim();
- el.$tmp.myText = dual[1].trim();
- } else {
- el.$tmp.myText = el.title;
- }
- el.removeAttribute('title');
- } else {
- el.$tmp.myText = false;
- }
- if (el.$tmp.myTitle && el.$tmp.myTitle.length > this.options.maxTitleChars) el.$tmp.myTitle = el.$tmp.myTitle.substr(0, this.options.maxTitleChars - 1) + "…";
- el.addEvent('mouseenter', function(event) {
- this.start(el);
- if (!this.options.fixed) this.locate(event);
- else this.position(el);
- }.bind(this));
- if (!this.options.fixed) el.addEvent('mousemove', this.locate.bindWithEvent(this));
- var end = this.end.bind(this);
- el.addEvent('mouseleave', end);
- el.addEvent('trash', end);
- },
-
- start: function(el) {
- this.wrapper.empty();
- if (el.$tmp.myTitle) {
- this.title = new Element('span').inject(new Element('div', {'class': this.options.className + '-title'}).inject(this.wrapper)).setHTML(el.$tmp.myTitle);
- }
- if (el.$tmp.myText) {
- this.text = new Element('span').inject(new Element('div', {'class': this.options.className + '-text'}).inject(this.wrapper)).setHTML(el.$tmp.myText);
- }
- $clear(this.timer);
- this.timer = this.show.delay(this.options.showDelay, this);
- },
-
- end: function(event) {
- $clear(this.timer);
- this.timer = this.hide.delay(this.options.hideDelay, this);
- },
-
- position: function(element) {
- var pos = element.getPosition();
- this.toolTip.setStyles({
- 'left': pos.x + this.options.offsets.x,
- 'top': pos.y + this.options.offsets.y
- });
- },
-
- locate: function(event) {
- var win = {'x': window.getWidth(), 'y': window.getHeight()};
- var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
- var tip = {'x': this.toolTip.offsetWidth, 'y': this.toolTip.offsetHeight};
- var prop = {'x': 'left', 'y': 'top'};
- for (var z in prop) {
- var pos = event.page[z] + this.options.offsets[z];
- if ((pos + tip[z] - scroll[z]) > win[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
- this.toolTip.setStyle(prop[z], pos);
- }
- ;
- },
-
- show: function() {
- if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
- this.fireEvent('onShow', [this.toolTip]);
- },
-
- hide: function() {
- this.fireEvent('onHide', [this.toolTip]);
- }
-
-});
-
-Tips.implement(new Events, new Options);
-
-/*
-Script: Group.js
- For Grouping Classes or Elements Events. The Event added to the Group will fire when all of the events of the items of the group are fired.
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Group
- An "Utility" Class.
-
-Arguments:
- List of Class instances
-
-Example:
- (start code)
- xhr1 = new Ajax('data.js', {evalScript: true});
- xhr2 = new Ajax('abstraction.js', {evalScript: true});
- xhr3 = new Ajax('template.js', {evalScript: true});
-
- var group = new Group(xhr1, xhr2, xhr3);
- group.addEvent('onComplete', function(){
- alert('All Scripts loaded');
- });
-
- xhr1.request();
- xhr2.request();
- xhr3.request();
- (end)
-
-*/
-
-var Group = new Class({
-
- initialize: function() {
- this.instances = $A(arguments);
- this.events = {};
- this.checker = {};
- },
-
-/*
- Property: addEvent
- adds an event to the stack of events of the Class instances.
-
- Arguments:
- type - string; the event name (e.g. 'onComplete')
- fn - function to execute when all instances fired this event
- */
-
- addEvent: function(type, fn) {
- this.checker[type] = this.checker[type] || {};
- this.events[type] = this.events[type] || [];
- if (this.events[type].contains(fn)) return false;
- else this.events[type].push(fn);
- this.instances.each(function(instance, i) {
- instance.addEvent(type, this.check.bind(this, [type, instance, i]));
- }, this);
- return this;
- },
-
- check: function(type, instance, i) {
- this.checker[type][i] = true;
- var every = this.instances.every(function(current, j) {
- return this.checker[type][j] || false;
- }, this);
- if (!every) return;
- this.checker[type] = {};
- this.events[type].each(function(event) {
- event.call(this, this.instances, instance);
- }, this);
- }
-
-});
-
-/*
-Script: Accordion.js
- Contains
-
-License:
- MIT-style license.
-*/
-
-/*
-Class: Accordion
- The Accordion class creates a group of elements that are toggled when their handles are clicked. When one elements toggles in, the others toggles back.
- Inherits methods, properties, options and events from .
-
-Note:
- The Accordion requires an XHTML doctype.
-
-Arguments:
- togglers - required, a collection of elements, the elements handlers that will be clickable.
- elements - required, a collection of elements the transitions will be applied to.
- options - optional, see options below, and options and events.
-
-Options:
- show - integer, the Index of the element to show at start.
- display - integer, the Index of the element to show at start (with a transition). defaults to 0.
- fixedHeight - integer, if you want the elements to have a fixed height. defaults to false.
- fixedWidth - integer, if you want the elements to have a fixed width. defaults to false.
- height - boolean, will add a height transition to the accordion if true. defaults to true.
- opacity - boolean, will add an opacity transition to the accordion if true. defaults to true.
- width - boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work!
- alwaysHide - boolean, will allow to hide all elements if true, instead of always keeping one element shown. defaults to false.
-
-Events:
- onActive - function to execute when an element starts to show
- onBackground - function to execute when an element starts to hide
-*/
-
-var Accordion = Fx.Elements.extend({
-
- options: {
- onActive: Class.empty,
- onBackground: Class.empty,
- display: 0,
- show: false,
- height: true,
- width: false,
- opacity: true,
- fixedHeight: false,
- fixedWidth: false,
- wait: false,
- alwaysHide: false
- },
-
- initialize: function() {
- var options, togglers, elements, container;
- $each(arguments, function(argument, i) {
- switch ($type(argument)) {
- case 'object': options = argument; break;
- case 'element': container = $(argument); break;
- default:
- var temp = $$(argument);
- if (!togglers) togglers = temp;
- else elements = temp;
- }
- });
- this.togglers = togglers || [];
- this.elements = elements || [];
- this.container = $(container);
- this.setOptions(options);
- this.previous = -1;
- if (this.options.alwaysHide) this.options.wait = true;
- if ($defined(this.options.show)) {
- this.options.display = false;
- this.previous = this.options.show;
- }
- if (this.options.start) {
- this.options.display = false;
- this.options.show = false;
- }
- this.effects = {};
- if (this.options.opacity) this.effects.opacity = 'fullOpacity';
- if (this.options.width) this.effects.width = this.options.fixedWidth ? 'fullWidth' : 'offsetWidth';
- if (this.options.height) this.effects.height = this.options.fixedHeight ? 'fullHeight' : 'scrollHeight';
- for (var i = 0, l = this.togglers.length; i < l; i++) this.addSection(this.togglers[i], this.elements[i]);
- this.elements.each(function(el, i) {
- if (this.options.show === i) {
- this.fireEvent('onActive', [this.togglers[i], el]);
- } else {
- for (var fx in this.effects) el.setStyle(fx, 0);
- }
- }, this);
- this.parent(this.elements);
- if ($defined(this.options.display)) this.display(this.options.display);
- },
-
-/*
- Property: addSection
- Dynamically adds a new section into the accordion at the specified position.
-
- Arguments:
- toggler - (dom element) the element that toggles the accordion section open.
- element - (dom element) the element that stretches open when the toggler is clicked.
- pos - (integer) the index where these objects are to be inserted within the accordion.
- */
-
- addSection: function(toggler, element, pos) {
- toggler = $(toggler);
- element = $(element);
- var test = this.togglers.contains(toggler);
- var len = this.togglers.length;
- this.togglers.include(toggler);
- this.elements.include(element);
- if (len && (!test || pos)) {
- pos = $pick(pos, len - 1);
- toggler.injectBefore(this.togglers[pos]);
- element.injectAfter(toggler);
- } else if (this.container && !test) {
- toggler.inject(this.container);
- element.inject(this.container);
- }
- var idx = this.togglers.indexOf(toggler);
- toggler.addEvent('click', this.display.bind(this, idx));
- if (this.options.height) element.setStyles({'padding-top': 0, 'border-top': 'none', 'padding-bottom': 0, 'border-bottom': 'none'});
- if (this.options.width) element.setStyles({'padding-left': 0, 'border-left': 'none', 'padding-right': 0, 'border-right': 'none'});
- element.fullOpacity = 1;
- if (this.options.fixedWidth) element.fullWidth = this.options.fixedWidth;
- if (this.options.fixedHeight) element.fullHeight = this.options.fixedHeight;
- element.setStyle('overflow', 'hidden');
- if (!test) {
- for (var fx in this.effects) element.setStyle(fx, 0);
- }
- return this;
- },
-
-/*
- Property: display
- Shows a specific section and hides all others. Useful when triggering an accordion from outside.
-
- Arguments:
- index - integer, the index of the item to show, or the actual element to show.
- */
-
- display: function(index) {
- index = ($type(index) == 'element') ? this.elements.indexOf(index) : index;
- if ((this.timer && this.options.wait) || (index === this.previous && !this.options.alwaysHide)) return this;
- this.previous = index;
- var obj = {};
- this.elements.each(function(el, i) {
- obj[i] = {};
- var hide = (i != index) || (this.options.alwaysHide && (el.offsetHeight > 0));
- this.fireEvent(hide ? 'onBackground' : 'onActive', [this.togglers[i], el]);
- for (var fx in this.effects) obj[i][fx] = hide ? 0 : el[this.effects[fx]];
- }, this);
- return this.start(obj);
- },
-
- showThisHideOpen: function(index) {
- return this.display(index);
- }
-
-});
-
-Fx.Accordion = Accordion;
