Subsonic-->Libresonic regex
This commit is contained in:
Eugene E. Kashpureff Jr
@@ -0,0 +1,269 @@
|
||||
// Flash Player Version Detection - Rev 1.5
|
||||
// Detect Client Browser type
|
||||
// Copyright(c) 2005-2006 Adobe Macromedia Software, LLC. All rights reserved.
|
||||
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
|
||||
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
|
||||
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
|
||||
|
||||
function ControlVersion()
|
||||
{
|
||||
var version;
|
||||
var axo;
|
||||
var e;
|
||||
|
||||
// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry
|
||||
|
||||
try {
|
||||
// version will be set for 7.X or greater players
|
||||
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
|
||||
version = axo.GetVariable("$version");
|
||||
} catch (e) {
|
||||
}
|
||||
|
||||
if (!version)
|
||||
{
|
||||
try {
|
||||
// version will be set for 6.X players only
|
||||
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
|
||||
|
||||
// installed player is some revision of 6.0
|
||||
// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
|
||||
// so we have to be careful.
|
||||
|
||||
// default to the first public version
|
||||
version = "WIN 6,0,21,0";
|
||||
|
||||
// throws if AllowScripAccess does not exist (introduced in 6.0r47)
|
||||
axo.AllowScriptAccess = "always";
|
||||
|
||||
// safe to call for 6.0r47 or greater
|
||||
version = axo.GetVariable("$version");
|
||||
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
if (!version)
|
||||
{
|
||||
try {
|
||||
// version will be set for 4.X or 5.X player
|
||||
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
|
||||
version = axo.GetVariable("$version");
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
if (!version)
|
||||
{
|
||||
try {
|
||||
// version will be set for 3.X player
|
||||
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
|
||||
version = "WIN 3,0,18,0";
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
if (!version)
|
||||
{
|
||||
try {
|
||||
// version will be set for 2.X player
|
||||
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
|
||||
version = "WIN 2,0,0,11";
|
||||
} catch (e) {
|
||||
version = -1;
|
||||
}
|
||||
}
|
||||
|
||||
return version;
|
||||
}
|
||||
|
||||
// JavaScript helper required to detect Flash Player PlugIn version information
|
||||
function GetSwfVer(){
|
||||
// NS/Opera version >= 3 check for Flash plugin in plugin array
|
||||
var flashVer = -1;
|
||||
|
||||
if (navigator.plugins != null && navigator.plugins.length > 0) {
|
||||
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
|
||||
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
|
||||
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
|
||||
var descArray = flashDescription.split(" ");
|
||||
var tempArrayMajor = descArray[2].split(".");
|
||||
var versionMajor = tempArrayMajor[0];
|
||||
var versionMinor = tempArrayMajor[1];
|
||||
if ( descArray[3] != "" ) {
|
||||
tempArrayMinor = descArray[3].split("r");
|
||||
} else {
|
||||
tempArrayMinor = descArray[4].split("r");
|
||||
}
|
||||
var versionRevision = tempArrayMinor[1] > 0 ? tempArrayMinor[1] : 0;
|
||||
var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
|
||||
}
|
||||
}
|
||||
// MSN/WebTV 2.6 supports Flash 4
|
||||
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
|
||||
// WebTV 2.5 supports Flash 3
|
||||
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
|
||||
// older WebTV supports Flash 2
|
||||
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
|
||||
else if ( isIE && isWin && !isOpera ) {
|
||||
flashVer = ControlVersion();
|
||||
}
|
||||
return flashVer;
|
||||
}
|
||||
|
||||
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
|
||||
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
|
||||
{
|
||||
versionStr = GetSwfVer();
|
||||
if (versionStr == -1 ) {
|
||||
return false;
|
||||
} else if (versionStr != 0) {
|
||||
if(isIE && isWin && !isOpera) {
|
||||
// Given "WIN 2,0,0,11"
|
||||
tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
|
||||
tempString = tempArray[1]; // "2,0,0,11"
|
||||
versionArray = tempString.split(","); // ['2', '0', '0', '11']
|
||||
} else {
|
||||
versionArray = versionStr.split(".");
|
||||
}
|
||||
var versionMajor = versionArray[0];
|
||||
var versionMinor = versionArray[1];
|
||||
var versionRevision = versionArray[2];
|
||||
|
||||
// is the major.revision >= requested major.revision AND the minor version >= requested minor
|
||||
if (versionMajor > parseFloat(reqMajorVer)) {
|
||||
return true;
|
||||
} else if (versionMajor == parseFloat(reqMajorVer)) {
|
||||
if (versionMinor > parseFloat(reqMinorVer))
|
||||
return true;
|
||||
else if (versionMinor == parseFloat(reqMinorVer)) {
|
||||
if (versionRevision >= parseFloat(reqRevision))
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function AC_AddExtension(src, ext)
|
||||
{
|
||||
if (src.indexOf('?') != -1)
|
||||
return src.replace(/\?/, ext+'?');
|
||||
else
|
||||
return src + ext;
|
||||
}
|
||||
|
||||
function AC_Generateobj(objAttrs, params, embedAttrs)
|
||||
{
|
||||
var str = '';
|
||||
if (isIE && isWin && !isOpera)
|
||||
{
|
||||
str += '<object ';
|
||||
for (var i in objAttrs)
|
||||
str += i + '="' + objAttrs[i] + '" ';
|
||||
for (var i in params)
|
||||
str += '><param name="' + i + '" value="' + params[i] + '" /> ';
|
||||
str += '></object>';
|
||||
} else {
|
||||
str += '<embed ';
|
||||
for (var i in embedAttrs)
|
||||
str += i + '="' + embedAttrs[i] + '" ';
|
||||
str += '> </embed>';
|
||||
}
|
||||
|
||||
document.write(str);
|
||||
}
|
||||
|
||||
function AC_FL_RunContent(){
|
||||
var ret =
|
||||
AC_GetArgs
|
||||
( arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
|
||||
, "application/x-shockwave-flash"
|
||||
);
|
||||
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
|
||||
}
|
||||
|
||||
function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
|
||||
var ret = new Object();
|
||||
ret.embedAttrs = new Object();
|
||||
ret.params = new Object();
|
||||
ret.objAttrs = new Object();
|
||||
for (var i=0; i < args.length; i=i+2){
|
||||
var currArg = args[i].toLowerCase();
|
||||
|
||||
switch (currArg){
|
||||
case "classid":
|
||||
break;
|
||||
case "pluginspage":
|
||||
ret.embedAttrs[args[i]] = args[i+1];
|
||||
break;
|
||||
case "src":
|
||||
case "movie":
|
||||
args[i+1] = AC_AddExtension(args[i+1], ext);
|
||||
ret.embedAttrs["src"] = args[i+1];
|
||||
ret.params[srcParamName] = args[i+1];
|
||||
break;
|
||||
case "onafterupdate":
|
||||
case "onbeforeupdate":
|
||||
case "onblur":
|
||||
case "oncellchange":
|
||||
case "onclick":
|
||||
case "ondblClick":
|
||||
case "ondrag":
|
||||
case "ondragend":
|
||||
case "ondragenter":
|
||||
case "ondragleave":
|
||||
case "ondragover":
|
||||
case "ondrop":
|
||||
case "onfinish":
|
||||
case "onfocus":
|
||||
case "onhelp":
|
||||
case "onmousedown":
|
||||
case "onmouseup":
|
||||
case "onmouseover":
|
||||
case "onmousemove":
|
||||
case "onmouseout":
|
||||
case "onkeypress":
|
||||
case "onkeydown":
|
||||
case "onkeyup":
|
||||
case "onload":
|
||||
case "onlosecapture":
|
||||
case "onpropertychange":
|
||||
case "onreadystatechange":
|
||||
case "onrowsdelete":
|
||||
case "onrowenter":
|
||||
case "onrowexit":
|
||||
case "onrowsinserted":
|
||||
case "onstart":
|
||||
case "onscroll":
|
||||
case "onbeforeeditfocus":
|
||||
case "onactivate":
|
||||
case "onbeforedeactivate":
|
||||
case "ondeactivate":
|
||||
case "type":
|
||||
case "codebase":
|
||||
ret.objAttrs[args[i]] = args[i+1];
|
||||
break;
|
||||
case "id":
|
||||
case "width":
|
||||
case "height":
|
||||
case "align":
|
||||
case "vspace":
|
||||
case "hspace":
|
||||
case "class":
|
||||
case "title":
|
||||
case "accesskey":
|
||||
case "name":
|
||||
case "tabindex":
|
||||
ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
|
||||
break;
|
||||
default:
|
||||
ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
|
||||
}
|
||||
}
|
||||
ret.objAttrs["classid"] = classid;
|
||||
if (mimeType) ret.embedAttrs["type"] = mimeType;
|
||||
return ret;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
// script.aculo.us builder.js v1.8.2, Tue Nov 18 18:30:58 +0100 2008
|
||||
|
||||
// Copyright (c) 2005-2008 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)));
|
||||
};
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,43 @@
|
||||
(function() {var chrome = window.chrome || {};
|
||||
chrome.cast = chrome.cast || {};
|
||||
chrome.cast.media = chrome.cast.media || {};
|
||||
chrome.cast.ApiBootstrap_ = function() {
|
||||
};
|
||||
chrome.cast.ApiBootstrap_.EXTENSION_IDS = ["boadgeojelhgndaghljhdicfkmllpafd", "dliochdbjfkdbacpmhlcpmleaejidimm", "hfaagokkkhdbgiakmmlclaapfelnkoah", "fmfcbgogabcbclcofgocippekhfcmgfj", "enhhojjnijigcajfphajepfemndkmdlo"];
|
||||
chrome.cast.ApiBootstrap_.findInstalledExtension_ = function(callback) {
|
||||
chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_(0, callback);
|
||||
};
|
||||
chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_ = function(index, callback) {
|
||||
index == chrome.cast.ApiBootstrap_.EXTENSION_IDS.length ? callback(null) : chrome.cast.ApiBootstrap_.isExtensionInstalled_(chrome.cast.ApiBootstrap_.EXTENSION_IDS[index], function(installed) {
|
||||
installed ? callback(chrome.cast.ApiBootstrap_.EXTENSION_IDS[index]) : chrome.cast.ApiBootstrap_.findInstalledExtensionHelper_(index + 1, callback);
|
||||
});
|
||||
};
|
||||
chrome.cast.ApiBootstrap_.getCastSenderUrl_ = function(extensionId) {
|
||||
return "chrome-extension://" + extensionId + "/cast_sender.js";
|
||||
};
|
||||
chrome.cast.ApiBootstrap_.isExtensionInstalled_ = function(extensionId, callback) {
|
||||
var xmlhttp = new XMLHttpRequest;
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
4 == xmlhttp.readyState && 200 == xmlhttp.status && callback(!0);
|
||||
};
|
||||
xmlhttp.onerror = function() {
|
||||
callback(!1);
|
||||
};
|
||||
xmlhttp.open("GET", chrome.cast.ApiBootstrap_.getCastSenderUrl_(extensionId), !0);
|
||||
xmlhttp.send();
|
||||
};
|
||||
chrome.cast.ApiBootstrap_.findInstalledExtension_(function(extensionId) {
|
||||
if (extensionId) {
|
||||
console.log("Found cast extension: " + extensionId);
|
||||
chrome.cast.extensionId = extensionId;
|
||||
var apiScript = document.createElement("script");
|
||||
apiScript.src = chrome.cast.ApiBootstrap_.getCastSenderUrl_(extensionId);
|
||||
(document.head || document.documentElement).appendChild(apiScript);
|
||||
} else {
|
||||
var msg = "No cast extension found";
|
||||
console.log(msg);
|
||||
var callback = window.__onGCastApiAvailable;
|
||||
callback && "function" == typeof callback && callback(!1, msg);
|
||||
}
|
||||
});
|
||||
})();
|
||||
+965
@@ -0,0 +1,965 @@
|
||||
// script.aculo.us controls.js v1.8.2, Tue Nov 18 18:30:58 +0100 2008
|
||||
|
||||
// Copyright (c) 2005-2008 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||
// (c) 2005-2008 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
|
||||
// (c) 2005-2008 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));
|
||||
}
|
||||
});
|
||||
+1130
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,761 @@
|
||||
// FancyZoom.js - v1.1 - http://www.fancyzoom.com
|
||||
//
|
||||
// Copyright (c) 2008 Cabel Sasser / Panic Inc
|
||||
// All rights reserved.
|
||||
//
|
||||
// Requires: FancyZoomHTML.js
|
||||
// Instructions: Include JS files in page, call setupZoom() in onLoad. That's it!
|
||||
// Any <a href> links to images will be updated to zoom inline.
|
||||
// Add rel="nozoom" to your <a href> to disable zooming for an image.
|
||||
//
|
||||
// Redistribution and use of this effect in source form, with or without modification,
|
||||
// are permitted provided that the following conditions are met:
|
||||
//
|
||||
// * USE OF SOURCE ON COMMERCIAL (FOR-PROFIT) WEBSITE REQUIRES ONE-TIME LICENSE FEE PER DOMAIN.
|
||||
// Reasonably priced! Visit www.fancyzoom.com for licensing instructions. Thanks!
|
||||
//
|
||||
// * Non-commercial (personal) website use is permitted without license/payment!
|
||||
//
|
||||
// * Redistribution of source code must retain the above copyright notice,
|
||||
// this list of conditions and the following disclaimer.
|
||||
//
|
||||
// * Redistribution of source code and derived works cannot be sold without specific
|
||||
// written prior permission.
|
||||
//
|
||||
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||||
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
|
||||
// CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
// EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
|
||||
// PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
|
||||
// PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
|
||||
// LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
// NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
||||
// SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
var includeCaption = true; // Turn on the "caption" feature, and write out the caption HTML
|
||||
var zoomTime = 5; // Milliseconds between frames of zoom animation
|
||||
var zoomSteps = 15; // Number of zoom animation frames
|
||||
var includeFade = 1; // Set to 1 to fade the image in / out as it zooms
|
||||
var minBorder = 90; // Amount of padding between large, scaled down images, and the window edges
|
||||
var shadowSettings = '0px 5px 25px rgba(0, 0, 0, '; // Blur, radius, color of shadow for compatible browsers
|
||||
|
||||
// Location of the zoom and shadow images
|
||||
var zoomImagesURI;
|
||||
|
||||
// Init. Do not add anything below this line, unless it's something awesome.
|
||||
|
||||
var myWidth = 0, myHeight = 0, myScroll = 0; myScrollWidth = 0; myScrollHeight = 0;
|
||||
var zoomOpen = false, preloadFrame = 1, preloadActive = false, preloadTime = 0, imgPreload = new Image();
|
||||
var preloadAnimTimer = 0;
|
||||
|
||||
var zoomActive = new Array(); var zoomTimer = new Array();
|
||||
var zoomOrigW = new Array(); var zoomOrigH = new Array();
|
||||
var zoomOrigX = new Array(); var zoomOrigY = new Array();
|
||||
|
||||
var zoomID = "ZoomBox";
|
||||
var theID = "ZoomImage";
|
||||
var zoomCaption = "ZoomCaption";
|
||||
var zoomCaptionDiv = "ZoomCapDiv";
|
||||
|
||||
if (navigator.userAgent.indexOf("MSIE") != -1) {
|
||||
var browserIsIE = true;
|
||||
}
|
||||
|
||||
// Zoom: Setup The Page! Called in your <body>'s onLoad handler.
|
||||
|
||||
function setupZoom(baseURI) {
|
||||
zoomImagesURI = baseURI + 'script/fancyzoom/images/';
|
||||
|
||||
prepZooms();
|
||||
insertZoomHTML();
|
||||
zoomdiv = document.getElementById(zoomID);
|
||||
zoomimg = document.getElementById(theID);
|
||||
}
|
||||
|
||||
// Zoom: Inject Javascript functions into hrefs with a "zoom" rel.
|
||||
// This is done at page load time via an onLoad() handler.
|
||||
|
||||
function prepZooms() {
|
||||
if (! document.getElementsByTagName) {
|
||||
return;
|
||||
}
|
||||
var links = document.getElementsByTagName("a");
|
||||
for (i = 0; i < links.length; i++) {
|
||||
if (links[i].getAttribute("href")) {
|
||||
if (links[i].getAttribute("rel") == "zoom") {
|
||||
links[i].onclick = function (event) { return zoomClick(this, event); };
|
||||
links[i].onmouseover = function () { zoomPreload(this); };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom: Load an image into an image object. When done loading, function sets preloadActive to false,
|
||||
// so other bits know that they can proceed with the zoom.
|
||||
// Preloaded image is stored in imgPreload and swapped out in the zoom function.
|
||||
|
||||
function zoomPreload(from) {
|
||||
|
||||
var theimage = from.getAttribute("href");
|
||||
|
||||
// Only preload if we have to, i.e. the image isn't this image already
|
||||
|
||||
if (imgPreload.src.indexOf(from.getAttribute("href").substr(from.getAttribute("href").lastIndexOf("/"))) == -1) {
|
||||
preloadActive = true;
|
||||
imgPreload = new Image();
|
||||
|
||||
// Set a function to fire when the preload is complete, setting flags along the way.
|
||||
|
||||
imgPreload.onload = function() {
|
||||
preloadActive = false;
|
||||
}
|
||||
|
||||
// Load it!
|
||||
imgPreload.src = theimage;
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom: Start the preloading animation cycle.
|
||||
|
||||
function preloadAnimStart() {
|
||||
preloadTime = new Date();
|
||||
document.getElementById("ZoomSpin").style.left = (myWidth / 2) + 'px';
|
||||
document.getElementById("ZoomSpin").style.top = ((myHeight / 2) + myScroll) + 'px';
|
||||
document.getElementById("ZoomSpin").style.visibility = "visible";
|
||||
preloadFrame = 1;
|
||||
document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png';
|
||||
preloadAnimTimer = setInterval("preloadAnim()", 100);
|
||||
}
|
||||
|
||||
// Zoom: Display and ANIMATE the jibber-jabber widget. Once preloadActive is false, bail and zoom it up!
|
||||
|
||||
function preloadAnim(from) {
|
||||
if (preloadActive != false) {
|
||||
document.getElementById("SpinImage").src = zoomImagesURI+'zoom-spin-'+preloadFrame+'.png';
|
||||
preloadFrame++;
|
||||
if (preloadFrame > 12) preloadFrame = 1;
|
||||
} else {
|
||||
document.getElementById("ZoomSpin").style.visibility = "hidden";
|
||||
clearInterval(preloadAnimTimer);
|
||||
preloadAnimTimer = 0;
|
||||
zoomIn(preloadFrom);
|
||||
}
|
||||
}
|
||||
|
||||
// ZOOM CLICK: We got a click! Should we do the zoom? Or wait for the preload to complete?
|
||||
// todo?: Double check that imgPreload src = clicked src
|
||||
|
||||
function zoomClick(from, evt) {
|
||||
|
||||
var shift = getShift(evt);
|
||||
|
||||
// Check for Command / Alt key. If pressed, pass them through -- don't zoom!
|
||||
if (! evt && window.event && (window.event.metaKey || window.event.altKey)) {
|
||||
return true;
|
||||
} else if (evt && (evt.metaKey|| evt.altKey)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Get browser dimensions
|
||||
getSize();
|
||||
|
||||
// If preloading still, wait, and display the spinner.
|
||||
if (preloadActive == true) {
|
||||
// But only display the spinner if it's not already being displayed!
|
||||
if (preloadAnimTimer == 0) {
|
||||
preloadFrom = from;
|
||||
preloadAnimStart();
|
||||
}
|
||||
} else {
|
||||
// Otherwise, we're loaded: do the zoom!
|
||||
zoomIn(from, shift);
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
// Zoom: Move an element in to endH endW, using zoomHost as a starting point.
|
||||
// "from" is an object reference to the href that spawned the zoom.
|
||||
|
||||
function zoomIn(from, shift) {
|
||||
|
||||
zoomimg.src = from.getAttribute("href");
|
||||
|
||||
// Determine the zoom settings from where we came from, the element in the <a>.
|
||||
// If there's no element in the <a>, or we can't get the width, make stuff up
|
||||
|
||||
if (from.childNodes[0].width) {
|
||||
startW = from.childNodes[0].width;
|
||||
startH = from.childNodes[0].height;
|
||||
startPos = findElementPos(from.childNodes[0]);
|
||||
} else {
|
||||
startW = 50;
|
||||
startH = 12;
|
||||
startPos = findElementPos(from);
|
||||
}
|
||||
|
||||
hostX = startPos[0];
|
||||
hostY = startPos[1];
|
||||
|
||||
// Make up for a scrolled containing div.
|
||||
// TODO: This HAS to move into findElementPos.
|
||||
|
||||
if (document.getElementById('scroller')) {
|
||||
hostX = hostX - document.getElementById('scroller').scrollLeft;
|
||||
}
|
||||
|
||||
// Determine the target zoom settings from the preloaded image object
|
||||
|
||||
endW = imgPreload.width;
|
||||
endH = imgPreload.height;
|
||||
|
||||
// Start! But only if we're not zooming already!
|
||||
|
||||
if (zoomActive[theID] != true) {
|
||||
|
||||
// Clear everything out just in case something is already open
|
||||
|
||||
if (document.getElementById("ShadowBox")) {
|
||||
document.getElementById("ShadowBox").style.visibility = "hidden";
|
||||
} else if (! browserIsIE) {
|
||||
|
||||
// Wipe timer if shadow is fading in still
|
||||
if (fadeActive["ZoomImage"]) {
|
||||
clearInterval(fadeTimer["ZoomImage"]);
|
||||
fadeActive["ZoomImage"] = false;
|
||||
fadeTimer["ZoomImage"] = false;
|
||||
}
|
||||
|
||||
document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)';
|
||||
}
|
||||
|
||||
document.getElementById("ZoomClose").style.visibility = "hidden";
|
||||
|
||||
// Setup the CAPTION, if existing. Hide it first, set the text.
|
||||
|
||||
if (includeCaption) {
|
||||
document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
|
||||
if (from.getAttribute('title') && includeCaption) {
|
||||
// Yes, there's a caption, set it up
|
||||
document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');
|
||||
} else {
|
||||
document.getElementById(zoomCaption).innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
// Store original position in an array for future zoomOut.
|
||||
|
||||
zoomOrigW[theID] = startW;
|
||||
zoomOrigH[theID] = startH;
|
||||
zoomOrigX[theID] = hostX;
|
||||
zoomOrigY[theID] = hostY;
|
||||
|
||||
// Now set the starting dimensions
|
||||
|
||||
zoomimg.style.width = startW + 'px';
|
||||
zoomimg.style.height = startH + 'px';
|
||||
zoomdiv.style.left = hostX + 'px';
|
||||
zoomdiv.style.top = hostY + 'px';
|
||||
|
||||
// Show the zooming image container, make it invisible
|
||||
|
||||
if (includeFade == 1) {
|
||||
setOpacity(0, zoomID);
|
||||
}
|
||||
zoomdiv.style.visibility = "visible";
|
||||
|
||||
// If it's too big to fit in the window, shrink the width and height to fit (with ratio).
|
||||
|
||||
sizeRatio = endW / endH;
|
||||
if (endW > myWidth - minBorder) {
|
||||
endW = myWidth - minBorder;
|
||||
endH = endW / sizeRatio;
|
||||
}
|
||||
if (endH > myHeight - minBorder) {
|
||||
endH = myHeight - minBorder;
|
||||
endW = endH * sizeRatio;
|
||||
}
|
||||
|
||||
zoomChangeX = ((myWidth / 2) - (endW / 2) - hostX);
|
||||
zoomChangeY = (((myHeight / 2) - (endH / 2) - hostY) + myScroll);
|
||||
zoomChangeW = (endW - startW);
|
||||
zoomChangeH = (endH - startH);
|
||||
|
||||
// Shift key?
|
||||
|
||||
if (shift) {
|
||||
tempSteps = zoomSteps * 7;
|
||||
} else {
|
||||
tempSteps = zoomSteps;
|
||||
}
|
||||
|
||||
// Setup Zoom
|
||||
|
||||
zoomCurrent = 0;
|
||||
|
||||
// Setup Fade with Zoom, If Requested
|
||||
|
||||
if (includeFade == 1) {
|
||||
fadeCurrent = 0;
|
||||
fadeAmount = (0 - 100) / tempSteps;
|
||||
} else {
|
||||
fadeAmount = 0;
|
||||
}
|
||||
|
||||
// Do It!
|
||||
|
||||
zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+hostX+", "+zoomChangeX+", "+hostY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDoneIn(zoomID)')", zoomTime);
|
||||
zoomActive[theID] = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom it back out.
|
||||
|
||||
function zoomOut(from, evt) {
|
||||
|
||||
// Get shift key status.
|
||||
// IE events don't seem to get passed through the function, so grab it from the window.
|
||||
|
||||
if (getShift(evt)) {
|
||||
tempSteps = zoomSteps * 7;
|
||||
} else {
|
||||
tempSteps = zoomSteps;
|
||||
}
|
||||
|
||||
// Check to see if something is happening/open
|
||||
|
||||
if (zoomActive[theID] != true) {
|
||||
|
||||
// First, get rid of the shadow if necessary.
|
||||
|
||||
if (document.getElementById("ShadowBox")) {
|
||||
document.getElementById("ShadowBox").style.visibility = "hidden";
|
||||
} else if (! browserIsIE) {
|
||||
|
||||
// Wipe timer if shadow is fading in still
|
||||
if (fadeActive["ZoomImage"]) {
|
||||
clearInterval(fadeTimer["ZoomImage"]);
|
||||
fadeActive["ZoomImage"] = false;
|
||||
fadeTimer["ZoomImage"] = false;
|
||||
}
|
||||
|
||||
document.getElementById("ZoomImage").style.webkitBoxShadow = shadowSettings + '0.0)';
|
||||
}
|
||||
|
||||
// ..and the close box...
|
||||
|
||||
document.getElementById("ZoomClose").style.visibility = "hidden";
|
||||
|
||||
// ...and the caption if necessary!
|
||||
|
||||
if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") {
|
||||
// fadeElementSetup(zoomCaptionDiv, 100, 0, 5, 1);
|
||||
document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
|
||||
}
|
||||
|
||||
// Now, figure out where we came from, to get back there
|
||||
|
||||
startX = parseInt(zoomdiv.style.left);
|
||||
startY = parseInt(zoomdiv.style.top);
|
||||
startW = zoomimg.width;
|
||||
startH = zoomimg.height;
|
||||
zoomChangeX = zoomOrigX[theID] - startX;
|
||||
zoomChangeY = zoomOrigY[theID] - startY;
|
||||
zoomChangeW = zoomOrigW[theID] - startW;
|
||||
zoomChangeH = zoomOrigH[theID] - startH;
|
||||
|
||||
// Setup Zoom
|
||||
|
||||
zoomCurrent = 0;
|
||||
|
||||
// Setup Fade with Zoom, If Requested
|
||||
|
||||
if (includeFade == 1) {
|
||||
fadeCurrent = 0;
|
||||
fadeAmount = (100 - 0) / tempSteps;
|
||||
} else {
|
||||
fadeAmount = 0;
|
||||
}
|
||||
|
||||
// Do It!
|
||||
|
||||
zoomTimer[theID] = setInterval("zoomElement('"+zoomID+"', '"+theID+"', "+zoomCurrent+", "+startW+", "+zoomChangeW+", "+startH+", "+zoomChangeH+", "+startX+", "+zoomChangeX+", "+startY+", "+zoomChangeY+", "+tempSteps+", "+includeFade+", "+fadeAmount+", 'zoomDone(zoomID, theID)')", zoomTime);
|
||||
zoomActive[theID] = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Finished Zooming In
|
||||
|
||||
function zoomDoneIn(zoomdiv, theID) {
|
||||
|
||||
// Note that it's open
|
||||
|
||||
zoomOpen = true;
|
||||
zoomdiv = document.getElementById(zoomdiv);
|
||||
|
||||
// Position the table shadow behind the zoomed in image, and display it
|
||||
|
||||
if (document.getElementById("ShadowBox")) {
|
||||
|
||||
setOpacity(0, "ShadowBox");
|
||||
shadowdiv = document.getElementById("ShadowBox");
|
||||
|
||||
shadowLeft = parseInt(zoomdiv.style.left) - 13;
|
||||
shadowTop = parseInt(zoomdiv.style.top) - 8;
|
||||
shadowWidth = zoomdiv.offsetWidth + 26;
|
||||
shadowHeight = zoomdiv.offsetHeight + 26;
|
||||
|
||||
shadowdiv.style.width = shadowWidth + 'px';
|
||||
shadowdiv.style.height = shadowHeight + 'px';
|
||||
shadowdiv.style.left = shadowLeft + 'px';
|
||||
shadowdiv.style.top = shadowTop + 'px';
|
||||
|
||||
document.getElementById("ShadowBox").style.visibility = "visible";
|
||||
fadeElementSetup("ShadowBox", 0, 100, 5);
|
||||
|
||||
} else if (! browserIsIE) {
|
||||
// Or, do a fade of the modern shadow
|
||||
fadeElementSetup("ZoomImage", 0, .8, 5, 0, "shadow");
|
||||
}
|
||||
|
||||
// Position and display the CAPTION, if existing
|
||||
|
||||
if (includeCaption && document.getElementById(zoomCaption).innerHTML != "") {
|
||||
// setOpacity(0, zoomCaptionDiv);
|
||||
zoomcapd = document.getElementById(zoomCaptionDiv);
|
||||
zoomcapd.style.top = parseInt(zoomdiv.style.top) + (zoomdiv.offsetHeight + 15) + 'px';
|
||||
zoomcapd.style.left = (myWidth / 2) - (zoomcapd.offsetWidth / 2) + 'px';
|
||||
zoomcapd.style.visibility = "visible";
|
||||
// fadeElementSetup(zoomCaptionDiv, 0, 100, 5);
|
||||
}
|
||||
|
||||
// Display Close Box (fade it if it's not IE)
|
||||
|
||||
if (!browserIsIE) setOpacity(0, "ZoomClose");
|
||||
document.getElementById("ZoomClose").style.visibility = "visible";
|
||||
if (!browserIsIE) fadeElementSetup("ZoomClose", 0, 100, 5);
|
||||
|
||||
// Get keypresses
|
||||
document.onkeypress = getKey;
|
||||
|
||||
}
|
||||
|
||||
// Finished Zooming Out
|
||||
|
||||
function zoomDone(zoomdiv, theID) {
|
||||
|
||||
// No longer open
|
||||
|
||||
zoomOpen = false;
|
||||
|
||||
// Clear stuff out, clean up
|
||||
|
||||
zoomOrigH[theID] = "";
|
||||
zoomOrigW[theID] = "";
|
||||
document.getElementById(zoomdiv).style.visibility = "hidden";
|
||||
zoomActive[theID] == false;
|
||||
|
||||
// Stop getting keypresses
|
||||
|
||||
document.onkeypress = null;
|
||||
|
||||
}
|
||||
|
||||
// Actually zoom the element
|
||||
|
||||
function zoomElement(zoomdiv, theID, zoomCurrent, zoomStartW, zoomChangeW, zoomStartH, zoomChangeH, zoomStartX, zoomChangeX, zoomStartY, zoomChangeY, zoomSteps, includeFade, fadeAmount, execWhenDone) {
|
||||
|
||||
// console.log("Zooming Step #"+zoomCurrent+ " of "+zoomSteps+" (zoom " + zoomStartW + "/" + zoomChangeW + ") (zoom " + zoomStartH + "/" + zoomChangeH + ") (zoom " + zoomStartX + "/" + zoomChangeX + ") (zoom " + zoomStartY + "/" + zoomChangeY + ") Fade: "+fadeAmount);
|
||||
|
||||
// Test if we're done, or if we continue
|
||||
|
||||
if (zoomCurrent == (zoomSteps + 1)) {
|
||||
zoomActive[theID] = false;
|
||||
clearInterval(zoomTimer[theID]);
|
||||
|
||||
if (execWhenDone != "") {
|
||||
eval(execWhenDone);
|
||||
}
|
||||
} else {
|
||||
|
||||
// Do the Fade!
|
||||
|
||||
if (includeFade == 1) {
|
||||
if (fadeAmount < 0) {
|
||||
setOpacity(Math.abs(zoomCurrent * fadeAmount), zoomdiv);
|
||||
} else {
|
||||
setOpacity(100 - (zoomCurrent * fadeAmount), zoomdiv);
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate this step's difference, and move it!
|
||||
|
||||
moveW = cubicInOut(zoomCurrent, zoomStartW, zoomChangeW, zoomSteps);
|
||||
moveH = cubicInOut(zoomCurrent, zoomStartH, zoomChangeH, zoomSteps);
|
||||
moveX = cubicInOut(zoomCurrent, zoomStartX, zoomChangeX, zoomSteps);
|
||||
moveY = cubicInOut(zoomCurrent, zoomStartY, zoomChangeY, zoomSteps);
|
||||
|
||||
document.getElementById(zoomdiv).style.left = moveX + 'px';
|
||||
document.getElementById(zoomdiv).style.top = moveY + 'px';
|
||||
zoomimg.style.width = moveW + 'px';
|
||||
zoomimg.style.height = moveH + 'px';
|
||||
|
||||
zoomCurrent++;
|
||||
|
||||
clearInterval(zoomTimer[theID]);
|
||||
zoomTimer[theID] = setInterval("zoomElement('"+zoomdiv+"', '"+theID+"', "+zoomCurrent+", "+zoomStartW+", "+zoomChangeW+", "+zoomStartH+", "+zoomChangeH+", "+zoomStartX+", "+zoomChangeX+", "+zoomStartY+", "+zoomChangeY+", "+zoomSteps+", "+includeFade+", "+fadeAmount+", '"+execWhenDone+"')", zoomTime);
|
||||
}
|
||||
}
|
||||
|
||||
// Zoom Utility: Get Key Press when image is open, and act accordingly
|
||||
|
||||
function getKey(evt) {
|
||||
if (! evt) {
|
||||
theKey = event.keyCode;
|
||||
} else {
|
||||
theKey = evt.keyCode;
|
||||
}
|
||||
|
||||
if (theKey == 27) { // ESC
|
||||
zoomOut(this, evt);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////
|
||||
//
|
||||
// FADE Functions
|
||||
//
|
||||
|
||||
function fadeOut(elem) {
|
||||
if (elem.id) {
|
||||
fadeElementSetup(elem.id, 100, 0, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function fadeIn(elem) {
|
||||
if (elem.id) {
|
||||
fadeElementSetup(elem.id, 0, 100, 10);
|
||||
}
|
||||
}
|
||||
|
||||
// Fade: Initialize the fade function
|
||||
|
||||
var fadeActive = new Array();
|
||||
var fadeQueue = new Array();
|
||||
var fadeTimer = new Array();
|
||||
var fadeClose = new Array();
|
||||
var fadeMode = new Array();
|
||||
|
||||
function fadeElementSetup(theID, fdStart, fdEnd, fdSteps, fdClose, fdMode) {
|
||||
|
||||
// alert("Fading: "+theID+" Steps: "+fdSteps+" Mode: "+fdMode);
|
||||
|
||||
if (fadeActive[theID] == true) {
|
||||
// Already animating, queue up this command
|
||||
fadeQueue[theID] = new Array(theID, fdStart, fdEnd, fdSteps);
|
||||
} else {
|
||||
fadeSteps = fdSteps;
|
||||
fadeCurrent = 0;
|
||||
fadeAmount = (fdStart - fdEnd) / fadeSteps;
|
||||
fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15);
|
||||
fadeActive[theID] = true;
|
||||
fadeMode[theID] = fdMode;
|
||||
|
||||
if (fdClose == 1) {
|
||||
fadeClose[theID] = true;
|
||||
} else {
|
||||
fadeClose[theID] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fade: Do the fade. This function will call itself, modifying the parameters, so
|
||||
// many instances can run concurrently. Can fade using opacity, or fade using a box-shadow.
|
||||
|
||||
function fadeElement(theID, fadeCurrent, fadeAmount, fadeSteps) {
|
||||
|
||||
if (fadeCurrent == fadeSteps) {
|
||||
|
||||
// We're done, so clear.
|
||||
|
||||
clearInterval(fadeTimer[theID]);
|
||||
fadeActive[theID] = false;
|
||||
fadeTimer[theID] = false;
|
||||
|
||||
// Should we close it once the fade is complete?
|
||||
|
||||
if (fadeClose[theID] == true) {
|
||||
document.getElementById(theID).style.visibility = "hidden";
|
||||
}
|
||||
|
||||
// Hang on.. did a command queue while we were working? If so, make it happen now
|
||||
|
||||
if (fadeQueue[theID] && fadeQueue[theID] != false) {
|
||||
fadeElementSetup(fadeQueue[theID][0], fadeQueue[theID][1], fadeQueue[theID][2], fadeQueue[theID][3]);
|
||||
fadeQueue[theID] = false;
|
||||
}
|
||||
} else {
|
||||
|
||||
fadeCurrent++;
|
||||
|
||||
// Now actually do the fade adjustment.
|
||||
|
||||
if (fadeMode[theID] == "shadow") {
|
||||
|
||||
// Do a special fade on the webkit-box-shadow of the object
|
||||
|
||||
if (fadeAmount < 0) {
|
||||
document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (Math.abs(fadeCurrent * fadeAmount)) + ')';
|
||||
} else {
|
||||
document.getElementById(theID).style.webkitBoxShadow = shadowSettings + (100 - (fadeCurrent * fadeAmount)) + ')';
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
// Set the opacity depending on if we're adding or subtracting (pos or neg)
|
||||
|
||||
if (fadeAmount < 0) {
|
||||
setOpacity(Math.abs(fadeCurrent * fadeAmount), theID);
|
||||
} else {
|
||||
setOpacity(100 - (fadeCurrent * fadeAmount), theID);
|
||||
}
|
||||
}
|
||||
|
||||
// Keep going, and send myself the updated variables
|
||||
clearInterval(fadeTimer[theID]);
|
||||
fadeTimer[theID] = setInterval("fadeElement('"+theID+"', '"+fadeCurrent+"', '"+fadeAmount+"', '"+fadeSteps+"')", 15);
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////////
|
||||
//
|
||||
// UTILITY functions
|
||||
//
|
||||
|
||||
// Utility: Set the opacity, compatible with a number of browsers. Value from 0 to 100.
|
||||
|
||||
function setOpacity(opacity, theID) {
|
||||
|
||||
var object = document.getElementById(theID).style;
|
||||
|
||||
// If it's 100, set it to 99 for Firefox.
|
||||
|
||||
if (navigator.userAgent.indexOf("Firefox") != -1) {
|
||||
if (opacity == 100) { opacity = 99.9999; } // This is majorly awkward
|
||||
}
|
||||
|
||||
// Multi-browser opacity setting
|
||||
|
||||
object.filter = "alpha(opacity=" + opacity + ")"; // IE/Win
|
||||
object.opacity = (opacity / 100); // Safari 1.2, Firefox+Mozilla
|
||||
|
||||
}
|
||||
|
||||
// Utility: Math functions for animation calucations - From http://www.robertpenner.com/easing/
|
||||
//
|
||||
// t = time, b = begin, c = change, d = duration
|
||||
// time = current frame, begin is fixed, change is basically finish - begin, duration is fixed (frames),
|
||||
|
||||
function linear(t, b, c, d)
|
||||
{
|
||||
return c*t/d + b;
|
||||
}
|
||||
|
||||
function sineInOut(t, b, c, d)
|
||||
{
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
}
|
||||
|
||||
function cubicIn(t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
}
|
||||
|
||||
function cubicOut(t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
}
|
||||
|
||||
function cubicInOut(t, b, c, d)
|
||||
{
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
}
|
||||
|
||||
function bounceOut(t, b, c, d)
|
||||
{
|
||||
if ((t/=d) < (1/2.75)){
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)){
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)){
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Utility: Get the size of the window, and set myWidth and myHeight
|
||||
// Credit to quirksmode.org
|
||||
|
||||
function getSize() {
|
||||
|
||||
// Window Size
|
||||
|
||||
if (self.innerHeight) { // Everyone but IE
|
||||
myWidth = window.innerWidth;
|
||||
myHeight = window.innerHeight;
|
||||
myScroll = window.pageYOffset;
|
||||
} else if (document.documentElement && document.documentElement.clientHeight) { // IE6 Strict
|
||||
myWidth = document.documentElement.clientWidth;
|
||||
myHeight = document.documentElement.clientHeight;
|
||||
myScroll = document.documentElement.scrollTop;
|
||||
} else if (document.body) { // Other IE, such as IE7
|
||||
myWidth = document.body.clientWidth;
|
||||
myHeight = document.body.clientHeight;
|
||||
myScroll = document.body.scrollTop;
|
||||
}
|
||||
|
||||
// Page size w/offscreen areas
|
||||
|
||||
if (window.innerHeight && window.scrollMaxY) {
|
||||
myScrollWidth = document.body.scrollWidth;
|
||||
myScrollHeight = window.innerHeight + window.scrollMaxY;
|
||||
} else if (document.body.scrollHeight > document.body.offsetHeight) { // All but Explorer Mac
|
||||
myScrollWidth = document.body.scrollWidth;
|
||||
myScrollHeight = document.body.scrollHeight;
|
||||
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
||||
myScrollWidth = document.body.offsetWidth;
|
||||
myScrollHeight = document.body.offsetHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility: Get Shift Key Status
|
||||
// IE events don't seem to get passed through the function, so grab it from the window.
|
||||
|
||||
function getShift(evt) {
|
||||
var shift = false;
|
||||
if (! evt && window.event) {
|
||||
shift = window.event.shiftKey;
|
||||
} else if (evt) {
|
||||
shift = evt.shiftKey;
|
||||
if (shift) evt.stopPropagation(); // Prevents Firefox from doing shifty things
|
||||
}
|
||||
return shift;
|
||||
}
|
||||
|
||||
// Utility: Find the Y position of an element on a page. Return Y and X as an array
|
||||
|
||||
function findElementPos(elemFind)
|
||||
{
|
||||
var elemX = 0;
|
||||
var elemY = 0;
|
||||
do {
|
||||
elemX += elemFind.offsetLeft;
|
||||
elemY += elemFind.offsetTop;
|
||||
} while ( elemFind = elemFind.offsetParent )
|
||||
|
||||
return Array(elemX, elemY);
|
||||
}
|
||||
@@ -0,0 +1,318 @@
|
||||
// FancyZoomHTML.js - v1.0
|
||||
// Used to draw necessary HTML elements for FancyZoom
|
||||
//
|
||||
// Copyright (c) 2008 Cabel Sasser / Panic Inc
|
||||
// All rights reserved.
|
||||
|
||||
function insertZoomHTML() {
|
||||
|
||||
// All of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow.
|
||||
|
||||
var inBody = document.getElementsByTagName("body").item(0);
|
||||
|
||||
// WAIT SPINNER
|
||||
|
||||
var inSpinbox = document.createElement("div");
|
||||
inSpinbox.setAttribute('id', 'ZoomSpin');
|
||||
inSpinbox.style.position = 'absolute';
|
||||
inSpinbox.style.left = '10px';
|
||||
inSpinbox.style.top = '10px';
|
||||
inSpinbox.style.visibility = 'hidden';
|
||||
inSpinbox.style.zIndex = '525';
|
||||
inBody.insertBefore(inSpinbox, inBody.firstChild);
|
||||
|
||||
var inSpinImage = document.createElement("img");
|
||||
inSpinImage.setAttribute('id', 'SpinImage');
|
||||
inSpinImage.setAttribute('src', zoomImagesURI+'zoom-spin-1.png');
|
||||
inSpinbox.appendChild(inSpinImage);
|
||||
|
||||
// ZOOM IMAGE
|
||||
//
|
||||
// <div id="ZoomBox">
|
||||
// <a href="javascript:zoomOut();"><img src="/images/spacer.gif" id="ZoomImage" border="0"></a> <!-- THE IMAGE -->
|
||||
// <div id="ZoomClose">
|
||||
// <a href="javascript:zoomOut();"><img src="/images/closebox.png" width="30" height="30" border="0"></a>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
var inZoombox = document.createElement("div");
|
||||
inZoombox.setAttribute('id', 'ZoomBox');
|
||||
|
||||
inZoombox.style.position = 'absolute';
|
||||
inZoombox.style.left = '10px';
|
||||
inZoombox.style.top = '10px';
|
||||
inZoombox.style.visibility = 'hidden';
|
||||
inZoombox.style.zIndex = '499';
|
||||
|
||||
inBody.insertBefore(inZoombox, inSpinbox.nextSibling);
|
||||
|
||||
var inImage1 = document.createElement("img");
|
||||
inImage1.onclick = function (event) { zoomOut(this, event); return false; };
|
||||
inImage1.setAttribute('src',zoomImagesURI+'spacer.gif');
|
||||
inImage1.setAttribute('id','ZoomImage');
|
||||
inImage1.setAttribute('border', '0');
|
||||
// inImage1.setAttribute('onMouseOver', 'zoomMouseOver();')
|
||||
// inImage1.setAttribute('onMouseOut', 'zoomMouseOut();')
|
||||
|
||||
// This must be set first, so we can later test it using webkitBoxShadow.
|
||||
inImage1.setAttribute('style', '-webkit-box-shadow: '+shadowSettings+'0.0)');
|
||||
inImage1.style.display = 'block';
|
||||
inImage1.style.width = '10px';
|
||||
inImage1.style.height = '10px';
|
||||
inImage1.style.cursor = 'pointer'; // -webkit-zoom-out?
|
||||
inZoombox.appendChild(inImage1);
|
||||
|
||||
var inClosebox = document.createElement("div");
|
||||
inClosebox.setAttribute('id', 'ZoomClose');
|
||||
inClosebox.style.position = 'absolute';
|
||||
|
||||
// In MSIE, we need to put the close box inside the image.
|
||||
// It's 2008 and I'm having to do a browser detect? Sigh.
|
||||
if (browserIsIE) {
|
||||
inClosebox.style.left = '-1px';
|
||||
inClosebox.style.top = '0px';
|
||||
} else {
|
||||
inClosebox.style.left = '-15px';
|
||||
inClosebox.style.top = '-15px';
|
||||
}
|
||||
|
||||
inClosebox.style.visibility = 'hidden';
|
||||
inZoombox.appendChild(inClosebox);
|
||||
|
||||
var inImage2 = document.createElement("img");
|
||||
inImage2.onclick = function (event) { zoomOut(this, event); return false; };
|
||||
inImage2.setAttribute('src',zoomImagesURI+'closebox.png');
|
||||
inImage2.setAttribute('width','30');
|
||||
inImage2.setAttribute('height','30');
|
||||
inImage2.setAttribute('border','0');
|
||||
inImage2.style.cursor = 'pointer';
|
||||
inClosebox.appendChild(inImage2);
|
||||
|
||||
// SHADOW
|
||||
// Only draw the table-based shadow if the programatic webkitBoxShadow fails!
|
||||
// Also, don't draw it if we're IE -- it wouldn't look quite right anyway.
|
||||
|
||||
if (! document.getElementById('ZoomImage').style.webkitBoxShadow && ! browserIsIE) {
|
||||
|
||||
// SHADOW BASE
|
||||
|
||||
var inFixedBox = document.createElement("div");
|
||||
inFixedBox.setAttribute('id', 'ShadowBox');
|
||||
inFixedBox.style.position = 'absolute';
|
||||
inFixedBox.style.left = '50px';
|
||||
inFixedBox.style.top = '50px';
|
||||
inFixedBox.style.width = '100px';
|
||||
inFixedBox.style.height = '100px';
|
||||
inFixedBox.style.visibility = 'hidden';
|
||||
inFixedBox.style.zIndex = '498';
|
||||
inBody.insertBefore(inFixedBox, inZoombox.nextSibling);
|
||||
|
||||
// SHADOW
|
||||
// Now, the shadow table. Skip if not compatible, or irrevelant with -box-shadow.
|
||||
|
||||
// <div id="ShadowBox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X
|
||||
// <tr height="25">
|
||||
// <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td>
|
||||
// <td background="/images/zoom-shadow2.png"> </td>
|
||||
// <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td>
|
||||
// </tr>
|
||||
|
||||
var inShadowTable = document.createElement("table");
|
||||
inShadowTable.setAttribute('border', '0');
|
||||
inShadowTable.setAttribute('width', '100%');
|
||||
inShadowTable.setAttribute('height', '100%');
|
||||
inShadowTable.setAttribute('cellpadding', '0');
|
||||
inShadowTable.setAttribute('cellspacing', '0');
|
||||
inFixedBox.appendChild(inShadowTable);
|
||||
|
||||
var inShadowTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
|
||||
inShadowTable.appendChild(inShadowTbody);
|
||||
|
||||
var inRow1 = document.createElement("tr");
|
||||
inRow1.style.height = '25px';
|
||||
inShadowTbody.appendChild(inRow1);
|
||||
|
||||
var inCol1 = document.createElement("td");
|
||||
inCol1.style.width = '27px';
|
||||
inRow1.appendChild(inCol1);
|
||||
var inShadowImg1 = document.createElement("img");
|
||||
inShadowImg1.setAttribute('src', zoomImagesURI+'zoom-shadow1.png');
|
||||
inShadowImg1.setAttribute('width', '27');
|
||||
inShadowImg1.setAttribute('height', '25');
|
||||
inShadowImg1.style.display = 'block';
|
||||
inCol1.appendChild(inShadowImg1);
|
||||
|
||||
var inCol2 = document.createElement("td");
|
||||
inCol2.setAttribute('background', zoomImagesURI+'zoom-shadow2.png');
|
||||
inRow1.appendChild(inCol2);
|
||||
// inCol2.innerHTML = '<img src=';
|
||||
var inSpacer1 = document.createElement("img");
|
||||
inSpacer1.setAttribute('src',zoomImagesURI+'spacer.gif');
|
||||
inSpacer1.setAttribute('height', '1');
|
||||
inSpacer1.setAttribute('width', '1');
|
||||
inSpacer1.style.display = 'block';
|
||||
inCol2.appendChild(inSpacer1);
|
||||
|
||||
var inCol3 = document.createElement("td");
|
||||
inCol3.style.width = '27px';
|
||||
inRow1.appendChild(inCol3);
|
||||
var inShadowImg3 = document.createElement("img");
|
||||
inShadowImg3.setAttribute('src', zoomImagesURI+'zoom-shadow3.png');
|
||||
inShadowImg3.setAttribute('width', '27');
|
||||
inShadowImg3.setAttribute('height', '25');
|
||||
inShadowImg3.style.display = 'block';
|
||||
inCol3.appendChild(inShadowImg3);
|
||||
|
||||
// <tr>
|
||||
// <td background="/images/zoom-shadow4.png"> </td>
|
||||
// <td bgcolor="#ffffff"> </td>
|
||||
// <td background="/images/zoom-shadow5.png"> </td>
|
||||
// </tr>
|
||||
|
||||
inRow2 = document.createElement("tr");
|
||||
inShadowTbody.appendChild(inRow2);
|
||||
|
||||
var inCol4 = document.createElement("td");
|
||||
inCol4.setAttribute('background', zoomImagesURI+'zoom-shadow4.png');
|
||||
inRow2.appendChild(inCol4);
|
||||
// inCol4.innerHTML = ' ';
|
||||
var inSpacer2 = document.createElement("img");
|
||||
inSpacer2.setAttribute('src',zoomImagesURI+'spacer.gif');
|
||||
inSpacer2.setAttribute('height', '1');
|
||||
inSpacer2.setAttribute('width', '1');
|
||||
inSpacer2.style.display = 'block';
|
||||
inCol4.appendChild(inSpacer2);
|
||||
|
||||
var inCol5 = document.createElement("td");
|
||||
inCol5.setAttribute('bgcolor', '#ffffff');
|
||||
inRow2.appendChild(inCol5);
|
||||
// inCol5.innerHTML = ' ';
|
||||
var inSpacer3 = document.createElement("img");
|
||||
inSpacer3.setAttribute('src',zoomImagesURI+'spacer.gif');
|
||||
inSpacer3.setAttribute('height', '1');
|
||||
inSpacer3.setAttribute('width', '1');
|
||||
inSpacer3.style.display = 'block';
|
||||
inCol5.appendChild(inSpacer3);
|
||||
|
||||
var inCol6 = document.createElement("td");
|
||||
inCol6.setAttribute('background', zoomImagesURI+'zoom-shadow5.png');
|
||||
inRow2.appendChild(inCol6);
|
||||
// inCol6.innerHTML = ' ';
|
||||
var inSpacer4 = document.createElement("img");
|
||||
inSpacer4.setAttribute('src',zoomImagesURI+'spacer.gif');
|
||||
inSpacer4.setAttribute('height', '1');
|
||||
inSpacer4.setAttribute('width', '1');
|
||||
inSpacer4.style.display = 'block';
|
||||
inCol6.appendChild(inSpacer4);
|
||||
|
||||
// <tr height="26">
|
||||
// <td width="27"><img src="/images/zoom-shadow6.png" width="27" height="26"</td>
|
||||
// <td background="/images/zoom-shadow7.png"> </td>
|
||||
// <td width="27"><img src="/images/zoom-shadow8.png" width="27" height="26"></td>
|
||||
// </tr>
|
||||
// </table>
|
||||
|
||||
var inRow3 = document.createElement("tr");
|
||||
inRow3.style.height = '26px';
|
||||
inShadowTbody.appendChild(inRow3);
|
||||
|
||||
var inCol7 = document.createElement("td");
|
||||
inCol7.style.width = '27px';
|
||||
inRow3.appendChild(inCol7);
|
||||
var inShadowImg7 = document.createElement("img");
|
||||
inShadowImg7.setAttribute('src', zoomImagesURI+'zoom-shadow6.png');
|
||||
inShadowImg7.setAttribute('width', '27');
|
||||
inShadowImg7.setAttribute('height', '26');
|
||||
inShadowImg7.style.display = 'block';
|
||||
inCol7.appendChild(inShadowImg7);
|
||||
|
||||
var inCol8 = document.createElement("td");
|
||||
inCol8.setAttribute('background', zoomImagesURI+'zoom-shadow7.png');
|
||||
inRow3.appendChild(inCol8);
|
||||
// inCol8.innerHTML = ' ';
|
||||
var inSpacer5 = document.createElement("img");
|
||||
inSpacer5.setAttribute('src',zoomImagesURI+'spacer.gif');
|
||||
inSpacer5.setAttribute('height', '1');
|
||||
inSpacer5.setAttribute('width', '1');
|
||||
inSpacer5.style.display = 'block';
|
||||
inCol8.appendChild(inSpacer5);
|
||||
|
||||
var inCol9 = document.createElement("td");
|
||||
inCol9.style.width = '27px';
|
||||
inRow3.appendChild(inCol9);
|
||||
var inShadowImg9 = document.createElement("img");
|
||||
inShadowImg9.setAttribute('src', zoomImagesURI+'zoom-shadow8.png');
|
||||
inShadowImg9.setAttribute('width', '27');
|
||||
inShadowImg9.setAttribute('height', '26');
|
||||
inShadowImg9.style.display = 'block';
|
||||
inCol9.appendChild(inShadowImg9);
|
||||
}
|
||||
|
||||
if (includeCaption) {
|
||||
|
||||
// CAPTION
|
||||
//
|
||||
// <div id="ZoomCapDiv" style="margin-left: 13px; margin-right: 13px;">
|
||||
// <table border="1" cellpadding="0" cellspacing="0">
|
||||
// <tr height="26">
|
||||
// <td><img src="zoom-caption-l.png" width="13" height="26"></td>
|
||||
// <td rowspan="3" background="zoom-caption-fill.png"><div id="ZoomCaption"></div></td>
|
||||
// <td><img src="zoom-caption-r.png" width="13" height="26"></td>
|
||||
// </tr>
|
||||
// </table>
|
||||
// </div>
|
||||
|
||||
var inCapDiv = document.createElement("div");
|
||||
inCapDiv.setAttribute('id', 'ZoomCapDiv');
|
||||
inCapDiv.style.position = 'absolute';
|
||||
inCapDiv.style.visibility = 'hidden';
|
||||
inCapDiv.style.marginLeft = 'auto';
|
||||
inCapDiv.style.marginRight = 'auto';
|
||||
inCapDiv.style.zIndex = '501';
|
||||
|
||||
inBody.insertBefore(inCapDiv, inZoombox.nextSibling);
|
||||
|
||||
var inCapTable = document.createElement("table");
|
||||
inCapTable.setAttribute('border', '0');
|
||||
inCapTable.setAttribute('cellPadding', '0'); // Wow. These honestly need to
|
||||
inCapTable.setAttribute('cellSpacing', '0'); // be intercapped to work in IE. WTF?
|
||||
inCapDiv.appendChild(inCapTable);
|
||||
|
||||
var inTbody = document.createElement("tbody"); // Needed for IE (for HTML4).
|
||||
inCapTable.appendChild(inTbody);
|
||||
|
||||
var inCapRow1 = document.createElement("tr");
|
||||
inTbody.appendChild(inCapRow1);
|
||||
|
||||
var inCapCol1 = document.createElement("td");
|
||||
inCapCol1.setAttribute('align', 'right');
|
||||
inCapRow1.appendChild(inCapCol1);
|
||||
var inCapImg1 = document.createElement("img");
|
||||
inCapImg1.setAttribute('src', zoomImagesURI+'zoom-caption-l.png');
|
||||
inCapImg1.setAttribute('width', '13');
|
||||
inCapImg1.setAttribute('height', '26');
|
||||
inCapImg1.style.display = 'block';
|
||||
inCapCol1.appendChild(inCapImg1);
|
||||
|
||||
var inCapCol2 = document.createElement("td");
|
||||
inCapCol2.setAttribute('background', zoomImagesURI+'zoom-caption-fill.png');
|
||||
inCapCol2.setAttribute('id', 'ZoomCaption');
|
||||
inCapCol2.setAttribute('valign', 'middle');
|
||||
inCapCol2.style.fontSize = '14px';
|
||||
inCapCol2.style.fontFamily = 'Helvetica';
|
||||
inCapCol2.style.fontWeight = 'bold';
|
||||
inCapCol2.style.color = '#ffffff';
|
||||
inCapCol2.style.textShadow = '0px 2px 4px #000000';
|
||||
inCapCol2.style.whiteSpace = 'nowrap';
|
||||
inCapRow1.appendChild(inCapCol2);
|
||||
|
||||
var inCapCol3 = document.createElement("td");
|
||||
inCapRow1.appendChild(inCapCol3);
|
||||
var inCapImg2 = document.createElement("img");
|
||||
inCapImg2.setAttribute('src', zoomImagesURI+'zoom-caption-r.png');
|
||||
inCapImg2.setAttribute('width', '13');
|
||||
inCapImg2.setAttribute('height', '26');
|
||||
inCapImg2.style.display = 'block';
|
||||
inCapCol3.appendChild(inCapImg2);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
Binary file not shown.
|
After Width: | Height: | Size: 134 B |
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
Binary file not shown.
|
After Width: | Height: | Size: 290 B |
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
Binary file not shown.
|
After Width: | Height: | Size: 164 B |
Binary file not shown.
|
After Width: | Height: | Size: 368 B |
Binary file not shown.
|
After Width: | Height: | Size: 178 B |
Binary file not shown.
|
After Width: | Height: | Size: 180 B |
Binary file not shown.
|
After Width: | Height: | Size: 428 B |
Binary file not shown.
|
After Width: | Height: | Size: 186 B |
Binary file not shown.
|
After Width: | Height: | Size: 426 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
+142
@@ -0,0 +1,142 @@
|
||||
.toast-container {
|
||||
width: 280px;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
|
||||
* html .toast-container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.toast-item {
|
||||
height: auto;
|
||||
background: #333;
|
||||
opacity: 0.9;
|
||||
-moz-border-radius: 10px;
|
||||
-webkit-border-radius: 10px;
|
||||
color: #eee;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
font-family: lucida Grande;
|
||||
font-size: 14px;
|
||||
border: 2px solid #999;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.toast-item p {
|
||||
text-align: left;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.toast-item-close {
|
||||
background:url(../images/close.gif);
|
||||
width:22px;
|
||||
height:22px;
|
||||
position: absolute;
|
||||
top:7px;
|
||||
right:7px;
|
||||
}
|
||||
|
||||
.toast-item-image {
|
||||
width:32px;
|
||||
height: 32px;
|
||||
margin-left: 10px;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.toast-item-image-notice {
|
||||
background:url(../images/notice.png);
|
||||
}
|
||||
|
||||
.toast-item-image-success {
|
||||
background:url(../images/success.png);
|
||||
}
|
||||
|
||||
.toast-item-image-warning {
|
||||
background:url(../images/warning.png);
|
||||
}
|
||||
|
||||
.toast-item-image-error {
|
||||
background:url(../images/error.png);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* toast types
|
||||
*
|
||||
* pattern: toast-type-[value]
|
||||
* where 'value' is the real value of the plugin option 'type'
|
||||
*
|
||||
*/
|
||||
.toast-type-notice {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast-type-success {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.toast-type-warning {
|
||||
color: white;
|
||||
border-color: #FCBD57;
|
||||
}
|
||||
|
||||
.toast-type-error {
|
||||
color: white;
|
||||
border-color: #B32B2B;
|
||||
}
|
||||
|
||||
/**
|
||||
* positions
|
||||
*
|
||||
* pattern: toast-position-[value]
|
||||
* where 'value' is the real value of the plugin option 'position'
|
||||
*
|
||||
*/
|
||||
.toast-position-top-left {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.toast-position-top-center {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
margin-left: -140px;
|
||||
}
|
||||
|
||||
.toast-position-top-right {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.toast-position-middle-left {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
top: 50%;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.toast-position-middle-center {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
margin-left: -140px;
|
||||
margin-top: -40px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.toast-position-middle-right {
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
margin-left: -140px;
|
||||
margin-top: -40px;
|
||||
top: 50%;
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 718 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,161 @@
|
||||
/*
|
||||
* Copyright 2010 akquinet
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/**
|
||||
* This JQuery Plugin will help you in showing some nice Toast-Message like notification messages. The behavior is
|
||||
* similar to the android Toast class.
|
||||
* You have 4 different toast types you can show. Each type comes with its own icon and colored border. The types are:
|
||||
* - notice
|
||||
* - success
|
||||
* - warning
|
||||
* - error
|
||||
*
|
||||
* The following methods will display a toast message:
|
||||
*
|
||||
* $().toastmessage('showNoticeToast', 'some message here');
|
||||
* $().toastmessage('showSuccessToast', "some message here");
|
||||
* $().toastmessage('showWarningToast', "some message here");
|
||||
* $().toastmessage('showErrorToast', "some message here");
|
||||
*
|
||||
* // user configured toastmessage:
|
||||
* $().toastmessage('showToast', {
|
||||
* text : 'Hello World',
|
||||
* sticky : true,
|
||||
* position : 'top-right',
|
||||
* type : 'success',
|
||||
* close : function () {console.log("toast is closed ...");}
|
||||
* });
|
||||
*
|
||||
* To see some more examples please have a look into the Tests in src/test/javascript/ToastmessageTest.js
|
||||
*
|
||||
* For further style configuration please see corresponding css file: jquery-toastmessage.css
|
||||
*
|
||||
* This plugin is based on the jquery-notice (http://sandbox.timbenniks.com/projects/jquery-notice/)
|
||||
* but is enhanced in several ways:
|
||||
*
|
||||
* configurable positioning
|
||||
* convenience methods for different message types
|
||||
* callback functionality when closing the toast
|
||||
* included some nice free icons
|
||||
* reimplemented to follow jquery plugin good practices rules
|
||||
*
|
||||
* Author: Daniel Bremer-Tonn
|
||||
**/
|
||||
(function($)
|
||||
{
|
||||
var settings = {
|
||||
inEffect: {opacity: 'show'}, // in effect
|
||||
inEffectDuration: 600, // in effect duration in miliseconds
|
||||
stayTime: 3000, // time in miliseconds before the item has to disappear
|
||||
text: '', // content of the item. Might be a string or a jQuery object. Be aware that any jQuery object which is acting as a message will be deleted when the toast is fading away.
|
||||
sticky: false, // should the toast item sticky or not?
|
||||
type: 'notice', // notice, warning, error, success
|
||||
position: 'top-right', // top-left, top-center, top-right, middle-left, middle-center, middle-right ... Position of the toast container holding different toast. Position can be set only once at the very first call, changing the position after the first call does nothing
|
||||
closeText: '', // text which will be shown as close button, set to '' when you want to introduce an image via css
|
||||
close: null // callback function when the toastmessage is closed
|
||||
};
|
||||
|
||||
var methods = {
|
||||
init : function(options)
|
||||
{
|
||||
if (options) {
|
||||
$.extend( settings, options );
|
||||
}
|
||||
},
|
||||
|
||||
showToast : function(options)
|
||||
{
|
||||
var localSettings = {};
|
||||
$.extend(localSettings, settings, options);
|
||||
|
||||
// declare variables
|
||||
var toastWrapAll, toastItemOuter, toastItemInner, toastItemClose, toastItemImage;
|
||||
|
||||
toastWrapAll = (!$('.toast-container').length) ? $('<div></div>').addClass('toast-container').addClass('toast-position-' + localSettings.position).appendTo('body') : $('.toast-container');
|
||||
toastItemOuter = $('<div></div>').addClass('toast-item-wrapper');
|
||||
toastItemInner = $('<div></div>').hide().addClass('toast-item toast-type-' + localSettings.type).appendTo(toastWrapAll).html($('<p>').append (localSettings.text)).animate(localSettings.inEffect, localSettings.inEffectDuration).wrap(toastItemOuter);
|
||||
toastItemClose = $('<div></div>').addClass('toast-item-close').prependTo(toastItemInner).html(localSettings.closeText).click(function() { $().toastmessage('removeToast',toastItemInner, localSettings) });
|
||||
toastItemImage = $('<div></div>').addClass('toast-item-image').addClass('toast-item-image-' + localSettings.type).prependTo(toastItemInner);
|
||||
|
||||
if(navigator.userAgent.match(/MSIE 6/i))
|
||||
{
|
||||
toastWrapAll.css({top: document.documentElement.scrollTop});
|
||||
}
|
||||
|
||||
if(!localSettings.sticky)
|
||||
{
|
||||
setTimeout(function()
|
||||
{
|
||||
$().toastmessage('removeToast', toastItemInner, localSettings);
|
||||
},
|
||||
localSettings.stayTime);
|
||||
}
|
||||
return toastItemInner;
|
||||
},
|
||||
|
||||
showNoticeToast : function (message)
|
||||
{
|
||||
var options = {text : message, type : 'notice'};
|
||||
return $().toastmessage('showToast', options);
|
||||
},
|
||||
|
||||
showSuccessToast : function (message)
|
||||
{
|
||||
var options = {text : message, type : 'success'};
|
||||
return $().toastmessage('showToast', options);
|
||||
},
|
||||
|
||||
showErrorToast : function (message)
|
||||
{
|
||||
var options = {text : message, type : 'error'};
|
||||
return $().toastmessage('showToast', options);
|
||||
},
|
||||
|
||||
showWarningToast : function (message)
|
||||
{
|
||||
var options = {text : message, type : 'warning'};
|
||||
return $().toastmessage('showToast', options);
|
||||
},
|
||||
|
||||
removeToast: function(obj, options)
|
||||
{
|
||||
obj.animate({opacity: '0'}, 600, function()
|
||||
{
|
||||
obj.parent().animate({height: '0px'}, 300, function()
|
||||
{
|
||||
obj.parent().remove();
|
||||
});
|
||||
});
|
||||
// callback
|
||||
if (options && options.close !== null)
|
||||
{
|
||||
options.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.toastmessage = function( method ) {
|
||||
|
||||
// Method calling logic
|
||||
if ( methods[method] ) {
|
||||
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
|
||||
} else if ( typeof method === 'object' || ! method ) {
|
||||
return methods.init.apply( this, arguments );
|
||||
} else {
|
||||
$.error( 'Method ' + method + ' does not exist on jQuery.toastmessage' );
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,39 @@
|
||||
/*
|
||||
|
||||
Correctly handle PNG transparency in Win IE 5.5 & 6.
|
||||
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.
|
||||
|
||||
Use in <HEAD> with DEFER keyword wrapped in conditional comments:
|
||||
<!--[if lt IE 7]>
|
||||
<script defer type="text/javascript" src="pngfix.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
*/
|
||||
|
||||
var arVersion = navigator.appVersion.split("MSIE")
|
||||
var version = parseFloat(arVersion[1])
|
||||
|
||||
if ((version >= 5.5) && (document.body.filters))
|
||||
{
|
||||
for(var i=0; i<document.images.length; i++)
|
||||
{
|
||||
var img = document.images[i]
|
||||
var imgName = img.src.toUpperCase()
|
||||
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
|
||||
{
|
||||
var imgID = (img.id) ? "id='" + img.id + "' " : ""
|
||||
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
|
||||
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
|
||||
var imgStyle = "display:inline-block;" + img.style.cssText
|
||||
if (img.align == "left") imgStyle = "float:left;" + imgStyle
|
||||
if (img.align == "right") imgStyle = "float:right;" + imgStyle
|
||||
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
|
||||
var strNewHTML = "<span " + imgID + imgClass + imgTitle
|
||||
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
|
||||
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
|
||||
+ "(src=\'" + img.src + "\', sizingMethod='image');\"></span>"
|
||||
img.outerHTML = strNewHTML
|
||||
i = i-1
|
||||
}
|
||||
}
|
||||
}
|
||||
+4320
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,41 @@
|
||||
|
||||
//
|
||||
// REMEMBER TO UPDATE VERSION WHEN CHANGING THIS SCRIPT, IN ORDER FOR BROWSERS TO REFRESH IT.
|
||||
//
|
||||
|
||||
var entityMap = {
|
||||
"&": "&",
|
||||
"<": "<",
|
||||
">": ">",
|
||||
'"': '"',
|
||||
"'": ''',
|
||||
"/": '/'
|
||||
};
|
||||
|
||||
function escapeHtml(string) {
|
||||
return String(string).replace(/[&<>"'\/]/g, function (s) {
|
||||
return entityMap[s];
|
||||
});
|
||||
}
|
||||
|
||||
function noop() {
|
||||
}
|
||||
|
||||
function popup(mylink, windowname) {
|
||||
return popupSize(mylink, windowname, 400, 200);
|
||||
}
|
||||
|
||||
function popupSize(mylink, windowname, width, height) {
|
||||
var href;
|
||||
if (typeof(mylink) == "string") {
|
||||
href = mylink;
|
||||
} else {
|
||||
href = mylink.href;
|
||||
}
|
||||
|
||||
var w = window.open(href, windowname, "width=" + width + ",height=" + height + ",scrollbars=yes,resizable=yes");
|
||||
w.focus();
|
||||
w.moveTo(300, 200);
|
||||
return false;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,221 @@
|
||||
/*
|
||||
tip_balloon.js v. 1.81
|
||||
|
||||
The latest version is available at
|
||||
http://www.walterzorn.com
|
||||
or http://www.devira.com
|
||||
or http://www.walterzorn.de
|
||||
|
||||
Initial author: Walter Zorn
|
||||
Last modified: 2.2.2009
|
||||
|
||||
Extension for the tooltip library wz_tooltip.js.
|
||||
Implements balloon tooltips.
|
||||
*/
|
||||
|
||||
// Make sure that the core file wz_tooltip.js is included first
|
||||
if(typeof config == "undefined")
|
||||
alert("Error:\nThe core tooltip script file 'wz_tooltip.js' must be included first, before the plugin files!");
|
||||
|
||||
// Here we define new global configuration variable(s) (as members of the
|
||||
// predefined "config." class).
|
||||
// From each of these config variables, wz_tooltip.js will automatically derive
|
||||
// a command which can be passed to Tip() or TagToTip() in order to customize
|
||||
// tooltips individually. These command names are just the config variable
|
||||
// name(s) translated to uppercase,
|
||||
// e.g. from config. Balloon a command BALLOON will automatically be
|
||||
// created.
|
||||
|
||||
//=================== GLOBAL TOOLTIP CONFIGURATION =========================//
|
||||
config. Balloon = false // true or false - set to true if you want this to be the default behaviour
|
||||
config. BalloonImgPath = "script/tip_balloon/" // Path to images (border, corners, stem), in quotes. Path must be relative to your HTML file.
|
||||
// Sizes of balloon images
|
||||
config. BalloonEdgeSize = 6 // Integer - sidelength of quadratic corner images
|
||||
config. BalloonStemWidth = 15 // Integer
|
||||
config. BalloonStemHeight = 19 // Integer
|
||||
config. BalloonStemOffset = -7 // Integer - horizontal offset of left stem edge from mouse (recommended: -stemwidth/2 to center the stem above the mouse)
|
||||
config. BalloonImgExt = "gif";// File name extension of default balloon images, e.g. "gif" or "png"
|
||||
//======= END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW ==============//
|
||||
|
||||
|
||||
// Create a new tt_Extension object (make sure that the name of that object,
|
||||
// here balloon, is unique amongst the extensions available for wz_tooltips.js):
|
||||
var balloon = new tt_Extension();
|
||||
|
||||
// Implement extension eventhandlers on which our extension should react
|
||||
|
||||
balloon.OnLoadConfig = function()
|
||||
{
|
||||
if(tt_aV[BALLOON])
|
||||
{
|
||||
// Turn off native style properties which are not appropriate
|
||||
balloon.padding = Math.max(tt_aV[PADDING] - tt_aV[BALLOONEDGESIZE], 0);
|
||||
balloon.width = tt_aV[WIDTH];
|
||||
//if(tt_bBoxOld)
|
||||
// balloon.width += (balloon.padding << 1);
|
||||
tt_aV[BORDERWIDTH] = 0;
|
||||
tt_aV[WIDTH] = 0;
|
||||
tt_aV[PADDING] = 0;
|
||||
tt_aV[BGCOLOR] = "";
|
||||
tt_aV[BGIMG] = "";
|
||||
tt_aV[SHADOW] = false;
|
||||
// Append slash to img path if missing
|
||||
if(tt_aV[BALLOONIMGPATH].charAt(tt_aV[BALLOONIMGPATH].length - 1) != '/')
|
||||
tt_aV[BALLOONIMGPATH] += "/";
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
balloon.OnCreateContentString = function()
|
||||
{
|
||||
if(!tt_aV[BALLOON])
|
||||
return false;
|
||||
|
||||
var aImg, sImgZ, sCssCrn, sVaT, sVaB, sCss0;
|
||||
|
||||
// Cache balloon images in advance:
|
||||
// Either use the pre-cached default images...
|
||||
if(tt_aV[BALLOONIMGPATH] == config.BalloonImgPath)
|
||||
aImg = balloon.aDefImg;
|
||||
// ...or load images from different directory
|
||||
else
|
||||
aImg = Balloon_CacheImgs(tt_aV[BALLOONIMGPATH], tt_aV[BALLOONIMGEXT]);
|
||||
sCss0 = 'padding:0;margin:0;border:0;line-height:0;overflow:hidden;';
|
||||
sCssCrn = ' style="position:relative;width:' + tt_aV[BALLOONEDGESIZE] + 'px;' + sCss0 + 'overflow:hidden;';
|
||||
sVaT = 'vertical-align:top;" valign="top"';
|
||||
sVaB = 'vertical-align:bottom;" valign="bottom"';
|
||||
sImgZ = '" style="' + sCss0 + '" />';
|
||||
|
||||
tt_sContent = '<table border="0" cellpadding="0" cellspacing="0" style="width:auto;padding:0;margin:0;left:0;top:0;"><tr>'
|
||||
// Left-top corner
|
||||
+ '<td' + sCssCrn + sVaB + '>'
|
||||
+ '<img src="' + aImg[1].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
|
||||
+ '</td>'
|
||||
// Top border
|
||||
+ '<td valign="bottom" style="position:relative;' + sCss0 + '">'
|
||||
+ '<img id="bALlOOnT" style="position:relative;top:1px;z-index:1;display:none;' + sCss0 + '" src="' + aImg[9].src + '" width="' + tt_aV[BALLOONSTEMWIDTH] + '" height="' + tt_aV[BALLOONSTEMHEIGHT] + '" />'
|
||||
+ '<div style="position:relative;z-index:0;top:0;' + sCss0 + 'width:auto;height:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[2].src + ');">'
|
||||
+ '</div>'
|
||||
+ '</td>'
|
||||
// Right-top corner
|
||||
+ '<td' + sCssCrn + sVaB + '>'
|
||||
+ '<img src="' + aImg[3].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
|
||||
+ '</td>'
|
||||
+ '</tr><tr>'
|
||||
// Left border (background-repeat fix courtesy Dirk Schnitzler)
|
||||
+ '<td style="position:relative;background-repeat:repeat;' + sCss0 + 'width:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[8].src + ');">'
|
||||
// Redundant image for bugous old Geckos which won't auto-expand TD height to 100%
|
||||
+ '<img width="' + tt_aV[BALLOONEDGESIZE] + '" height="100%" src="' + aImg[8].src + sImgZ
|
||||
+ '</td>'
|
||||
// Content
|
||||
+ '<td id="bALlO0nBdY" style="position:relative;line-height:normal;background-repeat:repeat;'
|
||||
+ ';background-image:url(' + aImg[0].src + ')'
|
||||
+ ';color:' + tt_aV[FONTCOLOR]
|
||||
+ ';font-family:' + tt_aV[FONTFACE]
|
||||
+ ';font-size:' + tt_aV[FONTSIZE]
|
||||
+ ';font-weight:' + tt_aV[FONTWEIGHT]
|
||||
+ ';text-align:' + tt_aV[TEXTALIGN]
|
||||
+ ';padding:' + balloon.padding + 'px'
|
||||
+ ';width:' + ((balloon.width > 0) ? (balloon.width + 'px') : 'auto')
|
||||
+ ';">' + tt_sContent + '</td>'
|
||||
// Right border
|
||||
+ '<td style="position:relative;background-repeat:repeat;' + sCss0 + 'width:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[4].src + ');">'
|
||||
// Image redundancy for bugous old Geckos that won't auto-expand TD height to 100%
|
||||
+ '<img width="' + tt_aV[BALLOONEDGESIZE] + '" height="100%" src="' + aImg[4].src + sImgZ
|
||||
+ '</td>'
|
||||
+ '</tr><tr>'
|
||||
// Left-bottom corner
|
||||
+ '<td' + sCssCrn + sVaT + '>'
|
||||
+ '<img src="' + aImg[7].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
|
||||
+ '</td>'
|
||||
// Bottom border
|
||||
+ '<td valign="top" style="position:relative;' + sCss0 + '">'
|
||||
+ '<div style="position:relative;left:0;top:0;' + sCss0 + 'width:auto;height:' + tt_aV[BALLOONEDGESIZE] + 'px;background-image:url(' + aImg[6].src + ');"></div>'
|
||||
+ '<img id="bALlOOnB" style="position:relative;top:-1px;left:2px;z-index:1;display:none;' + sCss0 + '" src="' + aImg[10].src + '" width="' + tt_aV[BALLOONSTEMWIDTH] + '" height="' + tt_aV[BALLOONSTEMHEIGHT] + '" />'
|
||||
+ '</td>'
|
||||
// Right-bottom corner
|
||||
+ '<td' + sCssCrn + sVaT + '>'
|
||||
+ '<img src="' + aImg[5].src + '" width="' + tt_aV[BALLOONEDGESIZE] + '" height="' + tt_aV[BALLOONEDGESIZE] + sImgZ
|
||||
+ '</td>'
|
||||
+ '</tr></table>';//alert(tt_sContent);
|
||||
return true;
|
||||
};
|
||||
balloon.OnSubDivsCreated = function()
|
||||
{
|
||||
if(tt_aV[BALLOON])
|
||||
{
|
||||
var bdy = tt_GetElt("bALlO0nBdY");
|
||||
|
||||
// Insert a TagToTip() HTML element into the central body TD
|
||||
if (tt_t2t && !tt_aV[COPYCONTENT] && bdy)
|
||||
tt_MovDomNode(tt_t2t, tt_GetDad(tt_t2t), bdy);
|
||||
balloon.iStem = tt_aV[ABOVE] * 1;
|
||||
balloon.aStem = [tt_GetElt("bALlOOnT"), tt_GetElt("bALlOOnB")];
|
||||
balloon.aStem[balloon.iStem].style.display = "inline";
|
||||
if (balloon.width < -1)
|
||||
Balloon_MaxW(bdy);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
// Display the stem appropriately
|
||||
balloon.OnMoveAfter = function()
|
||||
{
|
||||
if(tt_aV[BALLOON])
|
||||
{
|
||||
var iStem = (tt_aV[ABOVE] != tt_bJmpVert) * 1;
|
||||
|
||||
// Tooltip position vertically flipped?
|
||||
if(iStem != balloon.iStem)
|
||||
{
|
||||
// Display opposite stem
|
||||
balloon.aStem[balloon.iStem].style.display = "none";
|
||||
balloon.aStem[iStem].style.display = "inline";
|
||||
balloon.iStem = iStem;
|
||||
}
|
||||
|
||||
balloon.aStem[iStem].style.left = Balloon_CalcStemX() + "px";
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
function Balloon_CalcStemX()
|
||||
{
|
||||
var x = tt_musX - tt_x + tt_aV[BALLOONSTEMOFFSET] - tt_aV[BALLOONEDGESIZE];
|
||||
return Math.max(Math.min(x, tt_w - tt_aV[BALLOONSTEMWIDTH] - (tt_aV[BALLOONEDGESIZE] << 1) - 2), 2);
|
||||
}
|
||||
function Balloon_CacheImgs(sPath, sExt)
|
||||
{
|
||||
var asImg = ["background", "lt", "t", "rt", "r", "rb", "b", "lb", "l", "stemt", "stemb"],
|
||||
n = asImg.length,
|
||||
aImg = new Array(n),
|
||||
img;
|
||||
|
||||
while(n)
|
||||
{--n;
|
||||
img = aImg[n] = new Image();
|
||||
img.src = sPath + asImg[n] + "." + sExt;
|
||||
}
|
||||
return aImg;
|
||||
}
|
||||
function Balloon_MaxW(bdy)
|
||||
{
|
||||
if (bdy)
|
||||
{
|
||||
var iAdd = tt_bBoxOld ? (balloon.padding << 1) : 0, w = tt_GetDivW(bdy);
|
||||
if (w > -balloon.width + iAdd)
|
||||
bdy.style.width = (-balloon.width + iAdd) + "px";
|
||||
}
|
||||
}
|
||||
// This mechanism pre-caches the default images specified by
|
||||
// congif.BalloonImgPath, so, whenever a balloon tip using these default images
|
||||
// is created, no further server connection is necessary.
|
||||
function Balloon_PreCacheDefImgs()
|
||||
{
|
||||
// Append slash to img path if missing
|
||||
if(config.BalloonImgPath.charAt(config.BalloonImgPath.length - 1) != '/')
|
||||
config.BalloonImgPath += "/";
|
||||
// Preload default images into array
|
||||
balloon.aDefImg = Balloon_CacheImgs(config.BalloonImgPath, config.BalloonImgExt);
|
||||
}
|
||||
Balloon_PreCacheDefImgs();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 46 B |
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
Binary file not shown.
|
After Width: | Height: | Size: 46 B |
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
Binary file not shown.
|
After Width: | Height: | Size: 46 B |
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
Binary file not shown.
|
After Width: | Height: | Size: 85 B |
Binary file not shown.
|
After Width: | Height: | Size: 165 B |
Binary file not shown.
|
After Width: | Height: | Size: 167 B |
Binary file not shown.
|
After Width: | Height: | Size: 46 B |
@@ -0,0 +1,157 @@
|
||||
<component lightWeight="true">
|
||||
<attach event="onpropertychange" onevent="checkPropertyChange()" />
|
||||
<attach event="ondetach" onevent="restore()" />
|
||||
<script>
|
||||
//<![CDATA[
|
||||
|
||||
var doc = element.document;
|
||||
|
||||
function init() {
|
||||
updateBorderBoxWidth();
|
||||
updateBorderBoxHeight();
|
||||
}
|
||||
|
||||
function restore() {
|
||||
element.runtimeStyle.width = "";
|
||||
element.runtimeStyle.height = "";
|
||||
}
|
||||
|
||||
/* border width getters */
|
||||
function getBorderWidth(sSide) {
|
||||
if (element.currentStyle["border" + sSide + "Style"] == "none")
|
||||
return 0;
|
||||
var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
|
||||
return n || 0;
|
||||
}
|
||||
|
||||
function getBorderLeftWidth() { return getBorderWidth("Left"); }
|
||||
function getBorderRightWidth() { return getBorderWidth("Right"); }
|
||||
function getBorderTopWidth() { return getBorderWidth("Top"); }
|
||||
function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
|
||||
/* end border width getters */
|
||||
|
||||
/* padding getters */
|
||||
function getPadding(sSide) {
|
||||
var n = parseInt(element.currentStyle["padding" + sSide]);
|
||||
return n || 0;
|
||||
}
|
||||
|
||||
function getPaddingLeft() { return getPadding("Left"); }
|
||||
function getPaddingRight() { return getPadding("Right"); }
|
||||
function getPaddingTop() { return getPadding("Top"); }
|
||||
function getPaddingBottom() { return getPadding("Bottom"); }
|
||||
/* end padding getters */
|
||||
|
||||
function getBoxSizing() {
|
||||
var s = element.style;
|
||||
var cs = element.currentStyle
|
||||
|
||||
if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
|
||||
return s.boxSizing;
|
||||
if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
|
||||
return s["box-sizing"];
|
||||
if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
|
||||
return cs.boxSizing;
|
||||
if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
|
||||
return cs["box-sizing"];
|
||||
return getDocumentBoxSizing();
|
||||
}
|
||||
|
||||
function getDocumentBoxSizing() {
|
||||
if (doc.compatMode == null || doc.compatMode == "BackCompat")
|
||||
return "border-box";
|
||||
return "content-box"
|
||||
}
|
||||
|
||||
/* width and height setters */
|
||||
function setBorderBoxWidth(n) {
|
||||
element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
|
||||
getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
|
||||
}
|
||||
|
||||
function setBorderBoxHeight(n) {
|
||||
element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
|
||||
getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
|
||||
}
|
||||
|
||||
function setContentBoxWidth(n) {
|
||||
element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
|
||||
getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
|
||||
}
|
||||
|
||||
function setContentBoxHeight(n) {
|
||||
element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
|
||||
getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
|
||||
}
|
||||
/* end width and height setters */
|
||||
|
||||
function updateBorderBoxWidth() {
|
||||
element.runtimeStyle.width = "";
|
||||
if (getDocumentBoxSizing() == getBoxSizing())
|
||||
return;
|
||||
var csw = element.currentStyle.width;
|
||||
if (csw != "auto" && csw.indexOf("px") != -1) {
|
||||
if (getBoxSizing() == "border-box")
|
||||
setBorderBoxWidth(parseInt(csw));
|
||||
else
|
||||
setContentBoxWidth(parseInt(csw));
|
||||
}
|
||||
}
|
||||
|
||||
function updateBorderBoxHeight() {
|
||||
element.runtimeStyle.height = "";
|
||||
if (getDocumentBoxSizing() == getBoxSizing())
|
||||
return;
|
||||
var csh = element.currentStyle.height;
|
||||
if (csh != "auto" && csh.indexOf("px") != -1) {
|
||||
if (getBoxSizing() == "border-box")
|
||||
setBorderBoxHeight(parseInt(csh));
|
||||
else
|
||||
setContentBoxHeight(parseInt(csh));
|
||||
}
|
||||
}
|
||||
|
||||
function checkPropertyChange() {
|
||||
var pn = event.propertyName;
|
||||
var undef;
|
||||
|
||||
if (pn == "style.boxSizing" && element.style.boxSizing == "") {
|
||||
element.style.removeAttribute("boxSizing");
|
||||
element.runtimeStyle.boxSizing = undef;
|
||||
}
|
||||
|
||||
|
||||
switch (pn) {
|
||||
case "style.width":
|
||||
case "style.borderLeftWidth":
|
||||
case "style.borderLeftStyle":
|
||||
case "style.borderRightWidth":
|
||||
case "style.borderRightStyle":
|
||||
case "style.paddingLeft":
|
||||
case "style.paddingRight":
|
||||
updateBorderBoxWidth();
|
||||
break;
|
||||
|
||||
case "style.height":
|
||||
case "style.borderTopWidth":
|
||||
case "style.borderTopStyle":
|
||||
case "style.borderBottomWidth":
|
||||
case "style.borderBottomStyle":
|
||||
case "style.paddingTop":
|
||||
case "style.paddingBottom":
|
||||
updateBorderBoxHeight();
|
||||
break;
|
||||
|
||||
case "className":
|
||||
case "style.boxSizing":
|
||||
updateBorderBoxWidth();
|
||||
updateBorderBoxHeight();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
|
||||
//]]>
|
||||
</script>
|
||||
</component>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 440 B |
Binary file not shown.
|
After Width: | Height: | Size: 443 B |
Binary file not shown.
|
After Width: | Height: | Size: 395 B |
Binary file not shown.
|
After Width: | Height: | Size: 398 B |
@@ -0,0 +1,75 @@
|
||||
.dynamic-slider-control {
|
||||
position: relative;
|
||||
/*background-color: ThreeDFace;*/
|
||||
-moz-user-focus: normal;
|
||||
-moz-user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.horizontal {
|
||||
width: 200px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
width: 29px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.dynamic-slider-control input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dynamic-slider-control .handle {
|
||||
position: absolute;
|
||||
font-size: 1px;
|
||||
overflow: hidden;
|
||||
-moz-user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dynamic-slider-control.horizontal .handle {
|
||||
width: 11px;
|
||||
height: 21px;
|
||||
background-image: url("handle.horizontal.png");
|
||||
}
|
||||
|
||||
.dynamic-slider-control.horizontal .handle div {}
|
||||
.dynamic-slider-control.horizontal .handle.hover {
|
||||
background-image: url("handle.horizontal.hover.png");
|
||||
}
|
||||
|
||||
.dynamic-slider-control.vertical .handle {
|
||||
width: 25px;
|
||||
height: 13px;
|
||||
background-image: url("handle.vertical.png");
|
||||
}
|
||||
|
||||
.dynamic-slider-control.vertical .handle.hover {
|
||||
background-image: url("handle.vertical.hover.png");
|
||||
}
|
||||
|
||||
.dynamic-slider-control .line {
|
||||
position: absolute;
|
||||
font-size: 0.01mm;
|
||||
overflow: hidden;
|
||||
border: 1px solid;
|
||||
border-color: ThreeDShadow ThreeDHighlight
|
||||
ThreeDHighlight ThreeDShadow;
|
||||
-moz-border-radius: 50%;
|
||||
|
||||
behavior: url("boxsizing.htc"); /* ie path bug */
|
||||
box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
}
|
||||
.dynamic-slider-control.vertical .line {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.dynamic-slider-control.horizontal .line {
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.dynamic-slider-control .line div {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,132 @@
|
||||
/*----------------------------------------------------------------------------\
|
||||
| Range Class |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Created by Erik Arvidsson |
|
||||
| (http://webfx.eae.net/contact.html#erik) |
|
||||
| For WebFX (http://webfx.eae.net/) |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Used to model the data used when working with sliders, scrollbars and |
|
||||
| progress bars. Based on the ideas of the javax.swing.BoundedRangeModel |
|
||||
| interface defined by Sun for Java; http://java.sun.com/products/jfc/ |
|
||||
| swingdoc-api-1.0.3/com/sun/java/swing/BoundedRangeModel.html |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Copyright (c) 2002, 2005, 2006 Erik Arvidsson |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Licensed under the Apache License, Version 2.0 (the "License"); you may not |
|
||||
| use this file except in compliance with the License. You may obtain a copy |
|
||||
| of the License at http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
|
||||
| Unless required by applicable law or agreed to in writing, software |
|
||||
| distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
|
||||
| WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
|
||||
| License for the specific language governing permissions and limitations |
|
||||
| under the License. |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| 2002-10-14 | Original version released |
|
||||
| 2005-10-27 | Use Math.round instead of Math.floor |
|
||||
| 2006-05-28 | Changed license to Apache Software License 2.0. |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 |
|
||||
\----------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
function Range() {
|
||||
this._value = 0;
|
||||
this._minimum = 0;
|
||||
this._maximum = 100;
|
||||
this._extent = 0;
|
||||
|
||||
this._isChanging = false;
|
||||
}
|
||||
|
||||
Range.prototype.setValue = function (value) {
|
||||
value = Math.round(parseFloat(value));
|
||||
if (isNaN(value)) return;
|
||||
if (this._value != value) {
|
||||
if (value + this._extent > this._maximum)
|
||||
this._value = this._maximum - this._extent;
|
||||
else if (value < this._minimum)
|
||||
this._value = this._minimum;
|
||||
else
|
||||
this._value = value;
|
||||
if (!this._isChanging && typeof this.onchange == "function")
|
||||
this.onchange();
|
||||
}
|
||||
};
|
||||
|
||||
Range.prototype.getValue = function () {
|
||||
return this._value;
|
||||
};
|
||||
|
||||
Range.prototype.setExtent = function (extent) {
|
||||
if (this._extent != extent) {
|
||||
if (extent < 0)
|
||||
this._extent = 0;
|
||||
else if (this._value + extent > this._maximum)
|
||||
this._extent = this._maximum - this._value;
|
||||
else
|
||||
this._extent = extent;
|
||||
if (!this._isChanging && typeof this.onchange == "function")
|
||||
this.onchange();
|
||||
}
|
||||
};
|
||||
|
||||
Range.prototype.getExtent = function () {
|
||||
return this._extent;
|
||||
};
|
||||
|
||||
Range.prototype.setMinimum = function (minimum) {
|
||||
if (this._minimum != minimum) {
|
||||
var oldIsChanging = this._isChanging;
|
||||
this._isChanging = true;
|
||||
|
||||
this._minimum = minimum;
|
||||
|
||||
if (minimum > this._value)
|
||||
this.setValue(minimum);
|
||||
if (minimum > this._maximum) {
|
||||
this._extent = 0;
|
||||
this.setMaximum(minimum);
|
||||
this.setValue(minimum)
|
||||
}
|
||||
if (minimum + this._extent > this._maximum)
|
||||
this._extent = this._maximum - this._minimum;
|
||||
|
||||
this._isChanging = oldIsChanging;
|
||||
if (!this._isChanging && typeof this.onchange == "function")
|
||||
this.onchange();
|
||||
}
|
||||
};
|
||||
|
||||
Range.prototype.getMinimum = function () {
|
||||
return this._minimum;
|
||||
};
|
||||
|
||||
Range.prototype.setMaximum = function (maximum) {
|
||||
if (this._maximum != maximum) {
|
||||
var oldIsChanging = this._isChanging;
|
||||
this._isChanging = true;
|
||||
|
||||
this._maximum = maximum;
|
||||
|
||||
if (maximum < this._value)
|
||||
this.setValue(maximum - this._extent);
|
||||
if (maximum < this._minimum) {
|
||||
this._extent = 0;
|
||||
this.setMinimum(maximum);
|
||||
this.setValue(this._maximum);
|
||||
}
|
||||
if (maximum < this._minimum + this._extent)
|
||||
this._extent = this._maximum - this._minimum;
|
||||
if (maximum < this._value + this._extent)
|
||||
this._extent = this._maximum - this._value;
|
||||
|
||||
this._isChanging = oldIsChanging;
|
||||
if (!this._isChanging && typeof this.onchange == "function")
|
||||
this.onchange();
|
||||
}
|
||||
};
|
||||
|
||||
Range.prototype.getMaximum = function () {
|
||||
return this._maximum;
|
||||
};
|
||||
@@ -0,0 +1,489 @@
|
||||
/*----------------------------------------------------------------------------\
|
||||
| Slider 1.02 |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Created by Erik Arvidsson |
|
||||
| (http://webfx.eae.net/contact.html#erik) |
|
||||
| For WebFX (http://webfx.eae.net/) |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| A slider control that degrades to an input control for non supported |
|
||||
| browsers. |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Copyright (c) 2002, 2003, 2006 Erik Arvidsson |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Licensed under the Apache License, Version 2.0 (the "License"); you may not |
|
||||
| use this file except in compliance with the License. You may obtain a copy |
|
||||
| of the License at http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
|
||||
| Unless required by applicable law or agreed to in writing, software |
|
||||
| distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
|
||||
| WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
|
||||
| License for the specific language governing permissions and limitations |
|
||||
| under the License. |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Dependencies: timer.js - an OO abstraction of timers |
|
||||
| range.js - provides the data model for the slider |
|
||||
| winclassic.css or any other css file describing the look |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| 2002-10-14 | Original version released |
|
||||
| 2003-03-27 | Added a test in the constructor for missing oElement arg |
|
||||
| 2003-11-27 | Only use mousewheel when focused |
|
||||
| 2006-05-28 | Changed license to Apache Software License 2.0. |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 |
|
||||
\----------------------------------------------------------------------------*/
|
||||
|
||||
Slider.isSupported = typeof document.createElement != "undefined" &&
|
||||
typeof document.documentElement != "undefined" &&
|
||||
typeof document.documentElement.offsetWidth == "number";
|
||||
|
||||
|
||||
function Slider(oElement, oInput, sOrientation) {
|
||||
if (!oElement) return;
|
||||
this._orientation = sOrientation || "horizontal";
|
||||
this._range = new Range();
|
||||
this._range.setExtent(0);
|
||||
this._blockIncrement = 10;
|
||||
this._unitIncrement = 1;
|
||||
this._timer = new Timer(100);
|
||||
|
||||
|
||||
if (Slider.isSupported && oElement) {
|
||||
|
||||
this.document = oElement.ownerDocument || oElement.document;
|
||||
|
||||
this.element = oElement;
|
||||
this.element.slider = this;
|
||||
this.element.unselectable = "on";
|
||||
|
||||
// add class name tag to class name
|
||||
this.element.className = this._orientation + " " + this.classNameTag + " " + this.element.className;
|
||||
|
||||
// create line
|
||||
this.line = this.document.createElement("DIV");
|
||||
this.line.className = "line";
|
||||
this.line.unselectable = "on";
|
||||
this.line.appendChild(this.document.createElement("DIV"));
|
||||
this.element.appendChild(this.line);
|
||||
|
||||
// create handle
|
||||
this.handle = this.document.createElement("DIV");
|
||||
this.handle.className = "handle";
|
||||
this.handle.unselectable = "on";
|
||||
this.handle.appendChild(this.document.createElement("DIV"));
|
||||
this.handle.firstChild.appendChild(
|
||||
this.document.createTextNode(String.fromCharCode(160)));
|
||||
this.element.appendChild(this.handle);
|
||||
}
|
||||
|
||||
this.input = oInput;
|
||||
|
||||
// events
|
||||
var oThis = this;
|
||||
this._range.onchange = function () {
|
||||
oThis.recalculate();
|
||||
if (typeof oThis.onchange == "function")
|
||||
oThis.onchange();
|
||||
};
|
||||
|
||||
if (Slider.isSupported && oElement) {
|
||||
this.element.onfocus = Slider.eventHandlers.onfocus;
|
||||
this.element.onblur = Slider.eventHandlers.onblur;
|
||||
this.element.onmousedown = Slider.eventHandlers.onmousedown;
|
||||
this.element.onmouseover = Slider.eventHandlers.onmouseover;
|
||||
this.element.onmouseout = Slider.eventHandlers.onmouseout;
|
||||
this.element.onkeydown = Slider.eventHandlers.onkeydown;
|
||||
this.element.onkeypress = Slider.eventHandlers.onkeypress;
|
||||
this.element.onmousewheel = Slider.eventHandlers.onmousewheel;
|
||||
this.handle.onselectstart =
|
||||
this.element.onselectstart = function () { return false; };
|
||||
|
||||
this._timer.ontimer = function () {
|
||||
oThis.ontimer();
|
||||
};
|
||||
|
||||
// extra recalculate for ie
|
||||
window.setTimeout(function() {
|
||||
oThis.recalculate();
|
||||
}, 1);
|
||||
}
|
||||
else {
|
||||
this.input.onchange = function (e) {
|
||||
oThis.setValue(oThis.input.value);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Slider.eventHandlers = {
|
||||
|
||||
// helpers to make events a bit easier
|
||||
getEvent: function (e, el) {
|
||||
if (!e) {
|
||||
if (el)
|
||||
e = el.document.parentWindow.event;
|
||||
else
|
||||
e = window.event;
|
||||
}
|
||||
if (!e.srcElement) {
|
||||
var el = e.target;
|
||||
while (el != null && el.nodeType != 1)
|
||||
el = el.parentNode;
|
||||
e.srcElement = el;
|
||||
}
|
||||
if (typeof e.offsetX == "undefined") {
|
||||
e.offsetX = e.layerX;
|
||||
e.offsetY = e.layerY;
|
||||
}
|
||||
|
||||
return e;
|
||||
},
|
||||
|
||||
getDocument: function (e) {
|
||||
if (e.target)
|
||||
return e.target.ownerDocument;
|
||||
return e.srcElement.document;
|
||||
},
|
||||
|
||||
getSlider: function (e) {
|
||||
var el = e.target || e.srcElement;
|
||||
while (el != null && el.slider == null) {
|
||||
el = el.parentNode;
|
||||
}
|
||||
if (el)
|
||||
return el.slider;
|
||||
return null;
|
||||
},
|
||||
|
||||
getLine: function (e) {
|
||||
var el = e.target || e.srcElement;
|
||||
while (el != null && el.className != "line") {
|
||||
el = el.parentNode;
|
||||
}
|
||||
return el;
|
||||
},
|
||||
|
||||
getHandle: function (e) {
|
||||
var el = e.target || e.srcElement;
|
||||
var re = /handle/;
|
||||
while (el != null && !re.test(el.className)) {
|
||||
el = el.parentNode;
|
||||
}
|
||||
return el;
|
||||
},
|
||||
// end helpers
|
||||
|
||||
onfocus: function (e) {
|
||||
var s = this.slider;
|
||||
s._focused = true;
|
||||
s.handle.className = "handle hover";
|
||||
},
|
||||
|
||||
onblur: function (e) {
|
||||
var s = this.slider
|
||||
s._focused = false;
|
||||
s.handle.className = "handle";
|
||||
},
|
||||
|
||||
onmouseover: function (e) {
|
||||
e = Slider.eventHandlers.getEvent(e, this);
|
||||
var s = this.slider;
|
||||
if (e.srcElement == s.handle)
|
||||
s.handle.className = "handle hover";
|
||||
},
|
||||
|
||||
onmouseout: function (e) {
|
||||
e = Slider.eventHandlers.getEvent(e, this);
|
||||
var s = this.slider;
|
||||
if (e.srcElement == s.handle && !s._focused)
|
||||
s.handle.className = "handle";
|
||||
},
|
||||
|
||||
onmousedown: function (e) {
|
||||
e = Slider.eventHandlers.getEvent(e, this);
|
||||
var s = this.slider;
|
||||
if (s.element.focus)
|
||||
s.element.focus();
|
||||
|
||||
Slider._currentInstance = s;
|
||||
var doc = s.document;
|
||||
|
||||
if (doc.addEventListener) {
|
||||
doc.addEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
|
||||
doc.addEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
|
||||
}
|
||||
else if (doc.attachEvent) {
|
||||
doc.attachEvent("onmousemove", Slider.eventHandlers.onmousemove);
|
||||
doc.attachEvent("onmouseup", Slider.eventHandlers.onmouseup);
|
||||
doc.attachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
|
||||
s.element.setCapture();
|
||||
}
|
||||
|
||||
if (Slider.eventHandlers.getHandle(e)) { // start drag
|
||||
Slider._sliderDragData = {
|
||||
screenX: e.screenX,
|
||||
screenY: e.screenY,
|
||||
dx: e.screenX - s.handle.offsetLeft,
|
||||
dy: e.screenY - s.handle.offsetTop,
|
||||
startValue: s.getValue(),
|
||||
slider: s
|
||||
};
|
||||
}
|
||||
else {
|
||||
var lineEl = Slider.eventHandlers.getLine(e);
|
||||
s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
|
||||
s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
|
||||
s._increasing = null;
|
||||
s.ontimer();
|
||||
}
|
||||
},
|
||||
|
||||
onmousemove: function (e) {
|
||||
e = Slider.eventHandlers.getEvent(e, this);
|
||||
|
||||
if (Slider._sliderDragData) { // drag
|
||||
var s = Slider._sliderDragData.slider;
|
||||
|
||||
var boundSize = s.getMaximum() - s.getMinimum();
|
||||
var size, pos, reset;
|
||||
|
||||
if (s._orientation == "horizontal") {
|
||||
size = s.element.offsetWidth - s.handle.offsetWidth;
|
||||
pos = e.screenX - Slider._sliderDragData.dx;
|
||||
reset = Math.abs(e.screenY - Slider._sliderDragData.screenY) > 100;
|
||||
}
|
||||
else {
|
||||
size = s.element.offsetHeight - s.handle.offsetHeight;
|
||||
pos = s.element.offsetHeight - s.handle.offsetHeight -
|
||||
(e.screenY - Slider._sliderDragData.dy);
|
||||
reset = Math.abs(e.screenX - Slider._sliderDragData.screenX) > 100;
|
||||
}
|
||||
s.setValue(reset ? Slider._sliderDragData.startValue :
|
||||
s.getMinimum() + boundSize * pos / size);
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
var s = Slider._currentInstance;
|
||||
if (s != null) {
|
||||
var lineEl = Slider.eventHandlers.getLine(e);
|
||||
s._mouseX = e.offsetX + (lineEl ? s.line.offsetLeft : 0);
|
||||
s._mouseY = e.offsetY + (lineEl ? s.line.offsetTop : 0);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
onmouseup: function (e) {
|
||||
e = Slider.eventHandlers.getEvent(e, this);
|
||||
var s = Slider._currentInstance;
|
||||
var doc = s.document;
|
||||
if (doc.removeEventListener) {
|
||||
doc.removeEventListener("mousemove", Slider.eventHandlers.onmousemove, true);
|
||||
doc.removeEventListener("mouseup", Slider.eventHandlers.onmouseup, true);
|
||||
}
|
||||
else if (doc.detachEvent) {
|
||||
doc.detachEvent("onmousemove", Slider.eventHandlers.onmousemove);
|
||||
doc.detachEvent("onmouseup", Slider.eventHandlers.onmouseup);
|
||||
doc.detachEvent("onlosecapture", Slider.eventHandlers.onmouseup);
|
||||
s.element.releaseCapture();
|
||||
}
|
||||
|
||||
if (Slider._sliderDragData) { // end drag
|
||||
Slider._sliderDragData = null;
|
||||
}
|
||||
else {
|
||||
s._timer.stop();
|
||||
s._increasing = null;
|
||||
}
|
||||
Slider._currentInstance = null;
|
||||
},
|
||||
|
||||
onkeydown: function (e) {
|
||||
e = Slider.eventHandlers.getEvent(e, this);
|
||||
//var s = Slider.eventHandlers.getSlider(e);
|
||||
var s = this.slider;
|
||||
var kc = e.keyCode;
|
||||
switch (kc) {
|
||||
case 33: // page up
|
||||
s.setValue(s.getValue() + s.getBlockIncrement());
|
||||
break;
|
||||
case 34: // page down
|
||||
s.setValue(s.getValue() - s.getBlockIncrement());
|
||||
break;
|
||||
case 35: // end
|
||||
s.setValue(s.getOrientation() == "horizontal" ?
|
||||
s.getMaximum() :
|
||||
s.getMinimum());
|
||||
break;
|
||||
case 36: // home
|
||||
s.setValue(s.getOrientation() == "horizontal" ?
|
||||
s.getMinimum() :
|
||||
s.getMaximum());
|
||||
break;
|
||||
case 38: // up
|
||||
case 39: // right
|
||||
s.setValue(s.getValue() + s.getUnitIncrement());
|
||||
break;
|
||||
|
||||
case 37: // left
|
||||
case 40: // down
|
||||
s.setValue(s.getValue() - s.getUnitIncrement());
|
||||
break;
|
||||
}
|
||||
|
||||
if (kc >= 33 && kc <= 40) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
onkeypress: function (e) {
|
||||
e = Slider.eventHandlers.getEvent(e, this);
|
||||
var kc = e.keyCode;
|
||||
if (kc >= 33 && kc <= 40) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
onmousewheel: function (e) {
|
||||
e = Slider.eventHandlers.getEvent(e, this);
|
||||
var s = this.slider;
|
||||
if (s._focused) {
|
||||
s.setValue(s.getValue() + e.wheelDelta / 120 * s.getUnitIncrement());
|
||||
// windows inverts this on horizontal sliders. That does not
|
||||
// make sense to me
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
Slider.prototype.classNameTag = "dynamic-slider-control";
|
||||
|
||||
Slider.prototype.setValue = function (v) {
|
||||
this._range.setValue(v);
|
||||
this.input.value = this.getValue();
|
||||
};
|
||||
|
||||
Slider.prototype.getValue = function () {
|
||||
return this._range.getValue();
|
||||
};
|
||||
|
||||
Slider.prototype.setMinimum = function (v) {
|
||||
this._range.setMinimum(v);
|
||||
this.input.value = this.getValue();
|
||||
};
|
||||
|
||||
Slider.prototype.getMinimum = function () {
|
||||
return this._range.getMinimum();
|
||||
};
|
||||
|
||||
Slider.prototype.setMaximum = function (v) {
|
||||
this._range.setMaximum(v);
|
||||
this.input.value = this.getValue();
|
||||
};
|
||||
|
||||
Slider.prototype.getMaximum = function () {
|
||||
return this._range.getMaximum();
|
||||
};
|
||||
|
||||
Slider.prototype.setUnitIncrement = function (v) {
|
||||
this._unitIncrement = v;
|
||||
};
|
||||
|
||||
Slider.prototype.getUnitIncrement = function () {
|
||||
return this._unitIncrement;
|
||||
};
|
||||
|
||||
Slider.prototype.setBlockIncrement = function (v) {
|
||||
this._blockIncrement = v;
|
||||
};
|
||||
|
||||
Slider.prototype.getBlockIncrement = function () {
|
||||
return this._blockIncrement;
|
||||
};
|
||||
|
||||
Slider.prototype.getOrientation = function () {
|
||||
return this._orientation;
|
||||
};
|
||||
|
||||
Slider.prototype.setOrientation = function (sOrientation) {
|
||||
if (sOrientation != this._orientation) {
|
||||
if (Slider.isSupported && this.element) {
|
||||
// add class name tag to class name
|
||||
this.element.className = this.element.className.replace(this._orientation,
|
||||
sOrientation);
|
||||
}
|
||||
this._orientation = sOrientation;
|
||||
this.recalculate();
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
Slider.prototype.recalculate = function() {
|
||||
if (!Slider.isSupported || !this.element) return;
|
||||
|
||||
var w = this.element.offsetWidth;
|
||||
var h = this.element.offsetHeight;
|
||||
var hw = this.handle.offsetWidth;
|
||||
var hh = this.handle.offsetHeight;
|
||||
var lw = this.line.offsetWidth;
|
||||
var lh = this.line.offsetHeight;
|
||||
|
||||
// this assumes a border-box layout
|
||||
|
||||
if (this._orientation == "horizontal") {
|
||||
this.handle.style.left = (w - hw) * (this.getValue() - this.getMinimum()) /
|
||||
(this.getMaximum() - this.getMinimum()) + "px";
|
||||
this.handle.style.top = (h - hh) / 2 + "px";
|
||||
|
||||
this.line.style.top = (h - lh) / 2 + "px";
|
||||
this.line.style.left = hw / 2 + "px";
|
||||
//this.line.style.right = hw / 2 + "px";
|
||||
this.line.style.width = Math.max(0, w - hw - 2)+ "px";
|
||||
this.line.firstChild.style.width = Math.max(0, w - hw - 4)+ "px";
|
||||
}
|
||||
else {
|
||||
this.handle.style.left = (w - hw) / 2 + "px";
|
||||
this.handle.style.top = h - hh - (h - hh) * (this.getValue() - this.getMinimum()) /
|
||||
(this.getMaximum() - this.getMinimum()) + "px";
|
||||
|
||||
this.line.style.left = (w - lw) / 2 + "px";
|
||||
this.line.style.top = hh / 2 + "px";
|
||||
this.line.style.height = Math.max(0, h - hh - 2) + "px"; //hard coded border width
|
||||
//this.line.style.bottom = hh / 2 + "px";
|
||||
this.line.firstChild.style.height = Math.max(0, h - hh - 4) + "px"; //hard coded border width
|
||||
}
|
||||
};
|
||||
|
||||
Slider.prototype.ontimer = function () {
|
||||
var hw = this.handle.offsetWidth;
|
||||
var hh = this.handle.offsetHeight;
|
||||
var hl = this.handle.offsetLeft;
|
||||
var ht = this.handle.offsetTop;
|
||||
|
||||
if (this._orientation == "horizontal") {
|
||||
if (this._mouseX > hl + hw &&
|
||||
(this._increasing == null || this._increasing)) {
|
||||
this.setValue(this.getValue() + this.getBlockIncrement());
|
||||
this._increasing = true;
|
||||
}
|
||||
else if (this._mouseX < hl &&
|
||||
(this._increasing == null || !this._increasing)) {
|
||||
this.setValue(this.getValue() - this.getBlockIncrement());
|
||||
this._increasing = false;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (this._mouseY > ht + hh &&
|
||||
(this._increasing == null || !this._increasing)) {
|
||||
this.setValue(this.getValue() - this.getBlockIncrement());
|
||||
this._increasing = false;
|
||||
}
|
||||
else if (this._mouseY < ht &&
|
||||
(this._increasing == null || this._increasing)) {
|
||||
this.setValue(this.getValue() + this.getBlockIncrement());
|
||||
this._increasing = true;
|
||||
}
|
||||
}
|
||||
|
||||
this._timer.start();
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
/*----------------------------------------------------------------------------\
|
||||
| Timer Class |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Created by Erik Arvidsson |
|
||||
| (http://webfx.eae.net/contact.html#erik) |
|
||||
| For WebFX (http://webfx.eae.net/) |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Object Oriented Encapsulation of setTimeout fires ontimer when the timer |
|
||||
| is triggered. Does not work in IE 5.00 |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Copyright (c) 2002, 2006 Erik Arvidsson |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Licensed under the Apache License, Version 2.0 (the "License"); you may not |
|
||||
| use this file except in compliance with the License. You may obtain a copy |
|
||||
| of the License at http://www.apache.org/licenses/LICENSE-2.0 |
|
||||
| - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - |
|
||||
| Unless required by applicable law or agreed to in writing, software |
|
||||
| distributed under the License is distributed on an "AS IS" BASIS, WITHOUT |
|
||||
| WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the |
|
||||
| License for the specific language governing permissions and limitations |
|
||||
| under the License. |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| 2002-10-14 | Original version released |
|
||||
| 2006-05-28 | Changed license to Apache Software License 2.0. |
|
||||
|-----------------------------------------------------------------------------|
|
||||
| Created 2002-10-14 | All changes are in the log above. | Updated 2006-05-28 |
|
||||
\----------------------------------------------------------------------------*/
|
||||
|
||||
function Timer(nPauseTime) {
|
||||
this._pauseTime = typeof nPauseTime == "undefined" ? 1000 : nPauseTime;
|
||||
this._timer = null;
|
||||
this._isStarted = false;
|
||||
}
|
||||
|
||||
Timer.prototype.start = function () {
|
||||
if (this.isStarted())
|
||||
this.stop();
|
||||
var oThis = this;
|
||||
this._timer = window.setTimeout(function () {
|
||||
if (typeof oThis.ontimer == "function")
|
||||
oThis.ontimer();
|
||||
}, this._pauseTime);
|
||||
this._isStarted = false;
|
||||
};
|
||||
|
||||
Timer.prototype.stop = function () {
|
||||
if (this._timer != null)
|
||||
window.clearTimeout(this._timer);
|
||||
this._isStarted = false;
|
||||
};
|
||||
|
||||
Timer.prototype.isStarted = function () {
|
||||
return this._isStarted;
|
||||
};
|
||||
|
||||
Timer.prototype.getPauseTime = function () {
|
||||
return this._pauseTime;
|
||||
};
|
||||
|
||||
Timer.prototype.setPauseTime = function (nPauseTime) {
|
||||
this._pauseTime = nPauseTime;
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user