Include cropper and scriptaculous since lots of themes are using them.
git-svn-id: http://svn.automattic.com/wordpress/trunk@4629 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
ryan
parent
3b09e48f19
commit
245fa326d7
|
|
@ -0,0 +1,165 @@
|
||||||
|
.imgCrop_wrap {
|
||||||
|
/* width: 500px; @done_in_js */
|
||||||
|
/* height: 375px; @done_in_js */
|
||||||
|
position: relative;
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* an extra classname is applied for Opera < 9.0 to fix it's lack of opacity support */
|
||||||
|
.imgCrop_wrap.opera8 .imgCrop_overlay,
|
||||||
|
.imgCrop_wrap.opera8 .imgCrop_clickArea {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix for IE displaying all boxes at line-height by default, although they are still 1 pixel high until we combine them with the pointless span */
|
||||||
|
.imgCrop_wrap,
|
||||||
|
.imgCrop_wrap * {
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_overlay {
|
||||||
|
background-color: #000;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter:alpha(opacity=50);
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_selArea {
|
||||||
|
position: absolute;
|
||||||
|
/* @done_in_js
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
background: transparent url(castle.jpg) no-repeat -210px -110px;
|
||||||
|
*/
|
||||||
|
cursor: move;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* clickArea is all a fix for IE 5.5 & 6 to allow the user to click on the given area */
|
||||||
|
.imgCrop_clickArea {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FFF;
|
||||||
|
opacity: 0.01;
|
||||||
|
filter:alpha(opacity=01);
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_marqueeHoriz {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: transparent url(marqueeHoriz.gif) repeat-x 0 0;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_marqueeVert {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
background: transparent url(marqueeVert.gif) repeat-y 0 0;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_marqueeNorth { top: 0; left: 0; }
|
||||||
|
.imgCrop_marqueeEast { top: 0; right: 0; }
|
||||||
|
.imgCrop_marqueeSouth { bottom: 0px; left: 0; }
|
||||||
|
.imgCrop_marqueeWest { top: 0; left: 0; }
|
||||||
|
|
||||||
|
|
||||||
|
.imgCrop_handle {
|
||||||
|
position: absolute;
|
||||||
|
border: 1px solid #333;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
background: #FFF;
|
||||||
|
opacity: 0.5;
|
||||||
|
filter:alpha(opacity=50);
|
||||||
|
z-index: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* fix IE 5 box model */
|
||||||
|
* html .imgCrop_handle {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
wid\th: 6px;
|
||||||
|
hei\ght: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_handleN {
|
||||||
|
top: -3px;
|
||||||
|
left: 0;
|
||||||
|
/* margin-left: 49%; @done_in_js */
|
||||||
|
cursor: n-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_handleNE {
|
||||||
|
top: -3px;
|
||||||
|
right: -3px;
|
||||||
|
cursor: ne-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_handleE {
|
||||||
|
top: 0;
|
||||||
|
right: -3px;
|
||||||
|
/* margin-top: 49%; @done_in_js */
|
||||||
|
cursor: e-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_handleSE {
|
||||||
|
right: -3px;
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: se-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_handleS {
|
||||||
|
right: 0;
|
||||||
|
bottom: -3px;
|
||||||
|
/* margin-right: 49%; @done_in_js */
|
||||||
|
cursor: s-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_handleSW {
|
||||||
|
left: -3px;
|
||||||
|
bottom: -3px;
|
||||||
|
cursor: sw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_handleW {
|
||||||
|
top: 0;
|
||||||
|
left: -3px;
|
||||||
|
/* margin-top: 49%; @done_in_js */
|
||||||
|
cursor: e-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_handleNW {
|
||||||
|
top: -3px;
|
||||||
|
left: -3px;
|
||||||
|
cursor: nw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create an area to click & drag around on as the default browser behaviour is to let you drag the image
|
||||||
|
*/
|
||||||
|
.imgCrop_dragArea {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 200;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_previewWrap {
|
||||||
|
/* width: 200px; @done_in_js */
|
||||||
|
/* height: 200px; @done_in_js */
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgCrop_previewWrap img {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,516 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) 2006, David Spurr (http://www.defusion.org.uk/)
|
||||||
|
* All rights reserved.
|
||||||
|
*
|
||||||
|
* Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
||||||
|
*
|
||||||
|
* * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
||||||
|
* * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
||||||
|
* * Neither the name of the David Spurr nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written 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.
|
||||||
|
*
|
||||||
|
* http://www.opensource.org/licenses/bsd-license.php
|
||||||
|
*
|
||||||
|
* See scriptaculous.js for full scriptaculous licence
|
||||||
|
*/
|
||||||
|
|
||||||
|
var CropDraggable=Class.create();
|
||||||
|
Object.extend(Object.extend(CropDraggable.prototype,Draggable.prototype),{initialize:function(_1){
|
||||||
|
this.options=Object.extend({drawMethod:function(){
|
||||||
|
}},arguments[1]||{});
|
||||||
|
this.element=$(_1);
|
||||||
|
this.handle=this.element;
|
||||||
|
this.delta=this.currentDelta();
|
||||||
|
this.dragging=false;
|
||||||
|
this.eventMouseDown=this.initDrag.bindAsEventListener(this);
|
||||||
|
Event.observe(this.handle,"mousedown",this.eventMouseDown);
|
||||||
|
Draggables.register(this);
|
||||||
|
},draw:function(_2){
|
||||||
|
var _3=Position.cumulativeOffset(this.element);
|
||||||
|
var d=this.currentDelta();
|
||||||
|
_3[0]-=d[0];
|
||||||
|
_3[1]-=d[1];
|
||||||
|
var p=[0,1].map(function(i){
|
||||||
|
return (_2[i]-_3[i]-this.offset[i]);
|
||||||
|
}.bind(this));
|
||||||
|
this.options.drawMethod(p);
|
||||||
|
}});
|
||||||
|
var Cropper={};
|
||||||
|
Cropper.Img=Class.create();
|
||||||
|
Cropper.Img.prototype={initialize:function(_7,_8){
|
||||||
|
this.options=Object.extend({ratioDim:{x:0,y:0},minWidth:0,minHeight:0,displayOnInit:false,onEndCrop:Prototype.emptyFunction,captureKeys:true},_8||{});
|
||||||
|
if(this.options.minWidth>0&&this.options.minHeight>0){
|
||||||
|
this.options.ratioDim.x=this.options.minWidth;
|
||||||
|
this.options.ratioDim.y=this.options.minHeight;
|
||||||
|
}
|
||||||
|
this.img=$(_7);
|
||||||
|
this.clickCoords={x:0,y:0};
|
||||||
|
this.dragging=false;
|
||||||
|
this.resizing=false;
|
||||||
|
this.isWebKit=/Konqueror|Safari|KHTML/.test(navigator.userAgent);
|
||||||
|
this.isIE=/MSIE/.test(navigator.userAgent);
|
||||||
|
this.isOpera8=/Opera\s[1-8]/.test(navigator.userAgent);
|
||||||
|
this.ratioX=0;
|
||||||
|
this.ratioY=0;
|
||||||
|
this.attached=false;
|
||||||
|
$A(document.getElementsByTagName("script")).each(function(s){
|
||||||
|
if(s.src.match(/cropper\.js/)){
|
||||||
|
var _a=s.src.replace(/cropper\.js(.*)?/,"");
|
||||||
|
var _b=document.createElement("link");
|
||||||
|
_b.rel="stylesheet";
|
||||||
|
_b.type="text/css";
|
||||||
|
_b.href=_a+"cropper.css";
|
||||||
|
_b.media="screen";
|
||||||
|
document.getElementsByTagName("head")[0].appendChild(_b);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if(this.options.ratioDim.x>0&&this.options.ratioDim.y>0){
|
||||||
|
var _c=this.getGCD(this.options.ratioDim.x,this.options.ratioDim.y);
|
||||||
|
this.ratioX=this.options.ratioDim.x/_c;
|
||||||
|
this.ratioY=this.options.ratioDim.y/_c;
|
||||||
|
}
|
||||||
|
this.subInitialize();
|
||||||
|
if(this.img.complete||this.isWebKit){
|
||||||
|
this.onLoad();
|
||||||
|
}else{
|
||||||
|
Event.observe(this.img,"load",this.onLoad.bindAsEventListener(this));
|
||||||
|
}
|
||||||
|
},getGCD:function(a,b){return 1;
|
||||||
|
if(b==0){
|
||||||
|
return a;
|
||||||
|
}
|
||||||
|
return this.getGCD(b,a%b);
|
||||||
|
},onLoad:function(){
|
||||||
|
var _f="imgCrop_";
|
||||||
|
var _10=this.img.parentNode;
|
||||||
|
var _11="";
|
||||||
|
if(this.isOpera8){
|
||||||
|
_11=" opera8";
|
||||||
|
}
|
||||||
|
this.imgWrap=Builder.node("div",{"class":_f+"wrap"+_11});
|
||||||
|
if(this.isIE){
|
||||||
|
this.north=Builder.node("div",{"class":_f+"overlay "+_f+"north"},[Builder.node("span")]);
|
||||||
|
this.east=Builder.node("div",{"class":_f+"overlay "+_f+"east"},[Builder.node("span")]);
|
||||||
|
this.south=Builder.node("div",{"class":_f+"overlay "+_f+"south"},[Builder.node("span")]);
|
||||||
|
this.west=Builder.node("div",{"class":_f+"overlay "+_f+"west"},[Builder.node("span")]);
|
||||||
|
var _12=[this.north,this.east,this.south,this.west];
|
||||||
|
}else{
|
||||||
|
this.overlay=Builder.node("div",{"class":_f+"overlay"});
|
||||||
|
var _12=[this.overlay];
|
||||||
|
}
|
||||||
|
this.dragArea=Builder.node("div",{"class":_f+"dragArea"},_12);
|
||||||
|
this.handleN=Builder.node("div",{"class":_f+"handle "+_f+"handleN"});
|
||||||
|
this.handleNE=Builder.node("div",{"class":_f+"handle "+_f+"handleNE"});
|
||||||
|
this.handleE=Builder.node("div",{"class":_f+"handle "+_f+"handleE"});
|
||||||
|
this.handleSE=Builder.node("div",{"class":_f+"handle "+_f+"handleSE"});
|
||||||
|
this.handleS=Builder.node("div",{"class":_f+"handle "+_f+"handleS"});
|
||||||
|
this.handleSW=Builder.node("div",{"class":_f+"handle "+_f+"handleSW"});
|
||||||
|
this.handleW=Builder.node("div",{"class":_f+"handle "+_f+"handleW"});
|
||||||
|
this.handleNW=Builder.node("div",{"class":_f+"handle "+_f+"handleNW"});
|
||||||
|
this.selArea=Builder.node("div",{"class":_f+"selArea"},[Builder.node("div",{"class":_f+"marqueeHoriz "+_f+"marqueeNorth"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeVert "+_f+"marqueeEast"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeHoriz "+_f+"marqueeSouth"},[Builder.node("span")]),Builder.node("div",{"class":_f+"marqueeVert "+_f+"marqueeWest"},[Builder.node("span")]),this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW,Builder.node("div",{"class":_f+"clickArea"})]);
|
||||||
|
$(this.selArea).setStyle({backgroundColor:"transparent",backgroundRepeat:"no-repeat",backgroundPosition:"0 0"});
|
||||||
|
this.imgWrap.appendChild(this.img);
|
||||||
|
this.imgWrap.appendChild(this.dragArea);
|
||||||
|
this.dragArea.appendChild(this.selArea);
|
||||||
|
this.dragArea.appendChild(Builder.node("div",{"class":_f+"clickArea"}));
|
||||||
|
_10.appendChild(this.imgWrap);
|
||||||
|
Event.observe(this.dragArea,"mousedown",this.startDrag.bindAsEventListener(this));
|
||||||
|
Event.observe(document,"mousemove",this.onDrag.bindAsEventListener(this));
|
||||||
|
Event.observe(document,"mouseup",this.endCrop.bindAsEventListener(this));
|
||||||
|
var _13=[this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW];
|
||||||
|
for(var i=0;i<_13.length;i++){
|
||||||
|
Event.observe(_13[i],"mousedown",this.startResize.bindAsEventListener(this));
|
||||||
|
}
|
||||||
|
if(this.options.captureKeys){
|
||||||
|
Event.observe(document,"keydown",this.handleKeys.bindAsEventListener(this));
|
||||||
|
}
|
||||||
|
new CropDraggable(this.selArea,{drawMethod:this.moveArea.bindAsEventListener(this)});
|
||||||
|
this.setParams();
|
||||||
|
},setParams:function(){
|
||||||
|
this.imgW=this.img.width;
|
||||||
|
this.imgH=this.img.height;
|
||||||
|
if(!this.isIE){
|
||||||
|
$(this.overlay).setStyle({width:this.imgW+"px",height:this.imgH+"px"});
|
||||||
|
$(this.overlay).hide();
|
||||||
|
$(this.selArea).setStyle({backgroundImage:"url("+this.img.src+")"});
|
||||||
|
}else{
|
||||||
|
$(this.north).setStyle({height:0});
|
||||||
|
$(this.east).setStyle({width:0,height:0});
|
||||||
|
$(this.south).setStyle({height:0});
|
||||||
|
$(this.west).setStyle({width:0,height:0});
|
||||||
|
}
|
||||||
|
$(this.imgWrap).setStyle({"width":this.imgW+"px","height":this.imgH+"px"});
|
||||||
|
$(this.selArea).hide();
|
||||||
|
var _15=Position.positionedOffset(this.imgWrap);
|
||||||
|
this.wrapOffsets={"top":_15[1],"left":_15[0]};
|
||||||
|
var _16={x1:0,y1:0,x2:0,y2:0};
|
||||||
|
this.setAreaCoords(_16);
|
||||||
|
if(this.options.ratioDim.x>0&&this.options.ratioDim.y>0&&this.options.displayOnInit){
|
||||||
|
_16.x1=Math.ceil((this.imgW-this.options.ratioDim.x)/2);
|
||||||
|
_16.y1=Math.ceil((this.imgH-this.options.ratioDim.y)/2);
|
||||||
|
_16.x2=_16.x1+this.options.ratioDim.x;
|
||||||
|
_16.y2=_16.y1+this.options.ratioDim.y;
|
||||||
|
this.selArea.show();
|
||||||
|
this.drawArea();
|
||||||
|
this.endCrop();
|
||||||
|
}
|
||||||
|
this.attached=true;
|
||||||
|
},remove:function(){
|
||||||
|
this.attached=false;
|
||||||
|
this.imgWrap.parentNode.insertBefore(this.img,this.imgWrap);
|
||||||
|
this.imgWrap.parentNode.removeChild(this.imgWrap);
|
||||||
|
Event.stopObserving(this.dragArea,"mousedown",this.startDrag.bindAsEventListener(this));
|
||||||
|
Event.stopObserving(document,"mousemove",this.onDrag.bindAsEventListener(this));
|
||||||
|
Event.stopObserving(document,"mouseup",this.endCrop.bindAsEventListener(this));
|
||||||
|
var _17=[this.handleN,this.handleNE,this.handleE,this.handleSE,this.handleS,this.handleSW,this.handleW,this.handleNW];
|
||||||
|
for(var i=0;i<_17.length;i++){
|
||||||
|
Event.stopObserving(_17[i],"mousedown",this.startResize.bindAsEventListener(this));
|
||||||
|
}
|
||||||
|
if(this.options.captureKeys){
|
||||||
|
Event.stopObserving(document,"keydown",this.handleKeys.bindAsEventListener(this));
|
||||||
|
}
|
||||||
|
},reset:function(){
|
||||||
|
if(!this.attached){
|
||||||
|
this.onLoad();
|
||||||
|
}else{
|
||||||
|
this.setParams();
|
||||||
|
}
|
||||||
|
this.endCrop();
|
||||||
|
},handleKeys:function(e){
|
||||||
|
var dir={x:0,y:0};
|
||||||
|
if(!this.dragging){
|
||||||
|
switch(e.keyCode){
|
||||||
|
case (37):
|
||||||
|
dir.x=-1;
|
||||||
|
break;
|
||||||
|
case (38):
|
||||||
|
dir.y=-1;
|
||||||
|
break;
|
||||||
|
case (39):
|
||||||
|
dir.x=1;
|
||||||
|
break;
|
||||||
|
case (40):
|
||||||
|
dir.y=1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if(dir.x!=0||dir.y!=0){
|
||||||
|
if(e.shiftKey){
|
||||||
|
dir.x*=10;
|
||||||
|
dir.y*=10;
|
||||||
|
}
|
||||||
|
this.moveArea([this.areaCoords.x1+dir.x,this.areaCoords.y1+dir.y]);
|
||||||
|
Event.stop(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},calcW:function(){
|
||||||
|
return (this.areaCoords.x2-this.areaCoords.x1);
|
||||||
|
},calcH:function(){
|
||||||
|
return (this.areaCoords.y2-this.areaCoords.y1);
|
||||||
|
},moveArea:function(_1b){
|
||||||
|
this.setAreaCoords({x1:_1b[0],y1:_1b[1],x2:_1b[0]+this.calcW(),y2:_1b[1]+this.calcH()},true);
|
||||||
|
this.drawArea();
|
||||||
|
},cloneCoords:function(_1c){
|
||||||
|
return {x1:_1c.x1,y1:_1c.y1,x2:_1c.x2,y2:_1c.y2};
|
||||||
|
},setAreaCoords:function(_1d,_1e,_1f,_20,_21){
|
||||||
|
var _22=typeof _1e!="undefined"?_1e:false;
|
||||||
|
var _23=typeof _1f!="undefined"?_1f:false;
|
||||||
|
if(_1e){
|
||||||
|
var _24=_1d.x2-_1d.x1;
|
||||||
|
var _25=_1d.y2-_1d.y1;
|
||||||
|
if(_1d.x1<0){
|
||||||
|
_1d.x1=0;
|
||||||
|
_1d.x2=_24;
|
||||||
|
}
|
||||||
|
if(_1d.y1<0){
|
||||||
|
_1d.y1=0;
|
||||||
|
_1d.y2=_25;
|
||||||
|
}
|
||||||
|
if(_1d.x2>this.imgW){
|
||||||
|
_1d.x2=this.imgW;
|
||||||
|
_1d.x1=this.imgW-_24;
|
||||||
|
}
|
||||||
|
if(_1d.y2>this.imgH){
|
||||||
|
_1d.y2=this.imgH;
|
||||||
|
_1d.y1=this.imgH-_25;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(_1d.x1<0){
|
||||||
|
_1d.x1=0;
|
||||||
|
}
|
||||||
|
if(_1d.y1<0){
|
||||||
|
_1d.y1=0;
|
||||||
|
}
|
||||||
|
if(_1d.x2>this.imgW){
|
||||||
|
_1d.x2=this.imgW;
|
||||||
|
}
|
||||||
|
if(_1d.y2>this.imgH){
|
||||||
|
_1d.y2=this.imgH;
|
||||||
|
}
|
||||||
|
if(typeof (_20)!="undefined"){
|
||||||
|
if(this.ratioX>0){
|
||||||
|
this.applyRatio(_1d,{x:this.ratioX,y:this.ratioY},_20,_21);
|
||||||
|
}else{
|
||||||
|
if(_23){
|
||||||
|
this.applyRatio(_1d,{x:1,y:1},_20,_21);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var _26={a1:_1d.x1,a2:_1d.x2};
|
||||||
|
var _27={a1:_1d.y1,a2:_1d.y2};
|
||||||
|
var _28=this.options.minWidth;
|
||||||
|
var _29=this.options.minHeight;
|
||||||
|
if((_28==0||_29==0)&&_23){
|
||||||
|
if(_28>0){
|
||||||
|
_29=_28;
|
||||||
|
}else{
|
||||||
|
if(_29>0){
|
||||||
|
_28=_29;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.applyMinDimension(_26,_28,_20.x,{min:0,max:this.imgW});
|
||||||
|
this.applyMinDimension(_27,_29,_20.y,{min:0,max:this.imgH});
|
||||||
|
_1d={x1:_26.a1,y1:_27.a1,x2:_26.a2,y2:_27.a2};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.areaCoords=_1d;
|
||||||
|
},applyMinDimension:function(_2a,_2b,_2c,_2d){
|
||||||
|
if((_2a.a2-_2a.a1)<_2b){
|
||||||
|
if(_2c==1){
|
||||||
|
_2a.a2=_2a.a1+_2b;
|
||||||
|
}else{
|
||||||
|
_2a.a1=_2a.a2-_2b;
|
||||||
|
}
|
||||||
|
if(_2a.a1<_2d.min){
|
||||||
|
_2a.a1=_2d.min;
|
||||||
|
_2a.a2=_2b;
|
||||||
|
}else{
|
||||||
|
if(_2a.a2>_2d.max){
|
||||||
|
_2a.a1=_2d.max-_2b;
|
||||||
|
_2a.a2=_2d.max;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},applyRatio:function(_2e,_2f,_30,_31){
|
||||||
|
var _32;
|
||||||
|
if(_31=="N"||_31=="S"){
|
||||||
|
_32=this.applyRatioToAxis({a1:_2e.y1,b1:_2e.x1,a2:_2e.y2,b2:_2e.x2},{a:_2f.y,b:_2f.x},{a:_30.y,b:_30.x},{min:0,max:this.imgW});
|
||||||
|
_2e.x1=_32.b1;
|
||||||
|
_2e.y1=_32.a1;
|
||||||
|
_2e.x2=_32.b2;
|
||||||
|
_2e.y2=_32.a2;
|
||||||
|
}else{
|
||||||
|
_32=this.applyRatioToAxis({a1:_2e.x1,b1:_2e.y1,a2:_2e.x2,b2:_2e.y2},{a:_2f.x,b:_2f.y},{a:_30.x,b:_30.y},{min:0,max:this.imgH});
|
||||||
|
_2e.x1=_32.a1;
|
||||||
|
_2e.y1=_32.b1;
|
||||||
|
_2e.x2=_32.a2;
|
||||||
|
_2e.y2=_32.b2;
|
||||||
|
}
|
||||||
|
},applyRatioToAxis:function(_33,_34,_35,_36){
|
||||||
|
var _37=Object.extend(_33,{});
|
||||||
|
var _38=_37.a2-_37.a1;
|
||||||
|
var _3a=Math.floor(_38*_34.b/_34.a);
|
||||||
|
var _3b;
|
||||||
|
var _3c;
|
||||||
|
var _3d=null;
|
||||||
|
if(_35.b==1){
|
||||||
|
_3b=_37.b1+_3a;
|
||||||
|
if(_3b>_36.max){
|
||||||
|
_3b=_36.max;
|
||||||
|
_3d=_3b-_37.b1;
|
||||||
|
}
|
||||||
|
_37.b2=_3b;
|
||||||
|
}else{
|
||||||
|
_3b=_37.b2-_3a;
|
||||||
|
if(_3b<_36.min){
|
||||||
|
_3b=_36.min;
|
||||||
|
_3d=_3b+_37.b2;
|
||||||
|
}
|
||||||
|
_37.b1=_3b;
|
||||||
|
}
|
||||||
|
if(_3d!=null){
|
||||||
|
_3c=Math.floor(_3d*_34.a/_34.b);
|
||||||
|
if(_35.a==1){
|
||||||
|
_37.a2=_37.a1+_3c;
|
||||||
|
}else{
|
||||||
|
_37.a1=_37.a1=_37.a2-_3c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return _37;
|
||||||
|
},drawArea:function(){
|
||||||
|
if(!this.isIE){
|
||||||
|
$(this.overlay).show();
|
||||||
|
}
|
||||||
|
var _3e=this.calcW();
|
||||||
|
var _3f=this.calcH();
|
||||||
|
var _40=this.areaCoords.x2;
|
||||||
|
var _41=this.areaCoords.y2;
|
||||||
|
var _42=this.selArea.style;
|
||||||
|
_42.left=this.areaCoords.x1+"px";
|
||||||
|
_42.top=this.areaCoords.y1+"px";
|
||||||
|
_42.width=_3e+"px";
|
||||||
|
_42.height=_3f+"px";
|
||||||
|
var _43=Math.ceil((_3e-6)/2)+"px";
|
||||||
|
var _44=Math.ceil((_3f-6)/2)+"px";
|
||||||
|
this.handleN.style.left=_43;
|
||||||
|
this.handleE.style.top=_44;
|
||||||
|
this.handleS.style.left=_43;
|
||||||
|
this.handleW.style.top=_44;
|
||||||
|
if(this.isIE){
|
||||||
|
this.north.style.height=this.areaCoords.y1+"px";
|
||||||
|
var _45=this.east.style;
|
||||||
|
_45.top=this.areaCoords.y1+"px";
|
||||||
|
_45.height=_3f+"px";
|
||||||
|
_45.left=_40+"px";
|
||||||
|
_45.width=(this.img.width-_40)+"px";
|
||||||
|
var _46=this.south.style;
|
||||||
|
_46.top=_41+"px";
|
||||||
|
_46.height=(this.img.height-_41)+"px";
|
||||||
|
var _47=this.west.style;
|
||||||
|
_47.top=this.areaCoords.y1+"px";
|
||||||
|
_47.height=_3f+"px";
|
||||||
|
_47.width=this.areaCoords.x1+"px";
|
||||||
|
}else{
|
||||||
|
_42.backgroundPosition="-"+this.areaCoords.x1+"px "+"-"+this.areaCoords.y1+"px";
|
||||||
|
}
|
||||||
|
this.subDrawArea();
|
||||||
|
this.forceReRender();
|
||||||
|
},forceReRender:function(){
|
||||||
|
if(this.isIE||this.isWebKit){
|
||||||
|
var n=document.createTextNode(" ");
|
||||||
|
var d,el,fixEL,i;
|
||||||
|
if(this.isIE){
|
||||||
|
fixEl=this.selArea;
|
||||||
|
}else{
|
||||||
|
if(this.isWebKit){
|
||||||
|
fixEl=document.getElementsByClassName("imgCrop_marqueeSouth",this.imgWrap)[0];
|
||||||
|
d=Builder.node("div","");
|
||||||
|
d.style.visibility="hidden";
|
||||||
|
var _4a=["SE","S","SW"];
|
||||||
|
for(i=0;i<_4a.length;i++){
|
||||||
|
el=document.getElementsByClassName("imgCrop_handle"+_4a[i],this.selArea)[0];
|
||||||
|
if(el.childNodes.length){
|
||||||
|
el.removeChild(el.childNodes[0]);
|
||||||
|
}
|
||||||
|
el.appendChild(d);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fixEl.appendChild(n);
|
||||||
|
fixEl.removeChild(n);
|
||||||
|
}
|
||||||
|
},startResize:function(e){
|
||||||
|
this.startCoords=this.cloneCoords(this.areaCoords);
|
||||||
|
this.resizing=true;
|
||||||
|
this.resizeHandle=Event.element(e).classNames().toString().replace(/([^N|NE|E|SE|S|SW|W|NW])+/,"");
|
||||||
|
Event.stop(e);
|
||||||
|
},startDrag:function(e){
|
||||||
|
this.selArea.show();
|
||||||
|
this.clickCoords=this.getCurPos(e);
|
||||||
|
this.setAreaCoords({x1:this.clickCoords.x,y1:this.clickCoords.y,x2:this.clickCoords.x,y2:this.clickCoords.y});
|
||||||
|
this.dragging=true;
|
||||||
|
this.onDrag(e);
|
||||||
|
Event.stop(e);
|
||||||
|
},getCurPos:function(e){
|
||||||
|
return curPos={x:Event.pointerX(e)-this.wrapOffsets.left,y:Event.pointerY(e)-this.wrapOffsets.top};
|
||||||
|
},onDrag:function(e){
|
||||||
|
var _4f=null;
|
||||||
|
if(this.dragging||this.resizing){
|
||||||
|
var _50=this.getCurPos(e);
|
||||||
|
var _51=this.cloneCoords(this.areaCoords);
|
||||||
|
var _52={x:1,y:1};
|
||||||
|
}
|
||||||
|
if(this.dragging){
|
||||||
|
if(_50.x<this.clickCoords.x){
|
||||||
|
_52.x=-1;
|
||||||
|
}
|
||||||
|
if(_50.y<this.clickCoords.y){
|
||||||
|
_52.y=-1;
|
||||||
|
}
|
||||||
|
this.transformCoords(_50.x,this.clickCoords.x,_51,"x");
|
||||||
|
this.transformCoords(_50.y,this.clickCoords.y,_51,"y");
|
||||||
|
}else{
|
||||||
|
if(this.resizing){
|
||||||
|
_4f=this.resizeHandle;
|
||||||
|
if(_4f.match(/E/)){
|
||||||
|
this.transformCoords(_50.x,this.startCoords.x1,_51,"x");
|
||||||
|
if(_50.x<this.startCoords.x1){
|
||||||
|
_52.x=-1;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(_4f.match(/W/)){
|
||||||
|
this.transformCoords(_50.x,this.startCoords.x2,_51,"x");
|
||||||
|
if(_50.x<this.startCoords.x2){
|
||||||
|
_52.x=-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(_4f.match(/N/)){
|
||||||
|
this.transformCoords(_50.y,this.startCoords.y2,_51,"y");
|
||||||
|
if(_50.y<this.startCoords.y2){
|
||||||
|
_52.y=-1;
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
if(_4f.match(/S/)){
|
||||||
|
this.transformCoords(_50.y,this.startCoords.y1,_51,"y");
|
||||||
|
if(_50.y<this.startCoords.y1){
|
||||||
|
_52.y=-1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(this.dragging||this.resizing){
|
||||||
|
this.setAreaCoords(_51,false,e.shiftKey,_52,_4f);
|
||||||
|
this.drawArea();
|
||||||
|
Event.stop(e);
|
||||||
|
}
|
||||||
|
},transformCoords:function(_53,_54,_55,_56){
|
||||||
|
var _57=new Array();
|
||||||
|
if(_53<_54){
|
||||||
|
_57[0]=_53;
|
||||||
|
_57[1]=_54;
|
||||||
|
}else{
|
||||||
|
_57[0]=_54;
|
||||||
|
_57[1]=_53;
|
||||||
|
}
|
||||||
|
if(_56=="x"){
|
||||||
|
_55.x1=_57[0];
|
||||||
|
_55.x2=_57[1];
|
||||||
|
}else{
|
||||||
|
_55.y1=_57[0];
|
||||||
|
_55.y2=_57[1];
|
||||||
|
}
|
||||||
|
},endCrop:function(){
|
||||||
|
this.dragging=false;
|
||||||
|
this.resizing=false;
|
||||||
|
this.options.onEndCrop(this.areaCoords,{width:this.calcW(),height:this.calcH()});
|
||||||
|
},subInitialize:function(){
|
||||||
|
},subDrawArea:function(){
|
||||||
|
}};
|
||||||
|
Cropper.ImgWithPreview=Class.create();
|
||||||
|
Object.extend(Object.extend(Cropper.ImgWithPreview.prototype,Cropper.Img.prototype),{subInitialize:function(){
|
||||||
|
this.hasPreviewImg=false;
|
||||||
|
if(typeof (this.options.previewWrap)!="undefined"&&this.options.minWidth>0&&this.options.minHeight>0){
|
||||||
|
this.previewWrap=$(this.options.previewWrap);
|
||||||
|
this.previewImg=this.img.cloneNode(false);
|
||||||
|
this.options.displayOnInit=true;
|
||||||
|
this.hasPreviewImg=true;
|
||||||
|
this.previewWrap.addClassName("imgCrop_previewWrap");
|
||||||
|
this.previewWrap.setStyle({width:this.options.minWidth+"px",height:this.options.minHeight+"px"});
|
||||||
|
this.previewWrap.appendChild(this.previewImg);
|
||||||
|
}
|
||||||
|
},subDrawArea:function(){
|
||||||
|
if(this.hasPreviewImg){
|
||||||
|
var _58=this.calcW();
|
||||||
|
var _59=this.calcH();
|
||||||
|
var _5a={x:this.imgW/_58,y:this.imgH/_59};
|
||||||
|
var _5b={x:_58/this.options.minWidth,y:_59/this.options.minHeight};
|
||||||
|
var _5c={w:Math.ceil(this.options.minWidth*_5a.x)+"px",h:Math.ceil(this.options.minHeight*_5a.y)+"px",x:"-"+Math.ceil(this.areaCoords.x1/_5b.x)+"px",y:"-"+Math.ceil(this.areaCoords.y1/_5b.y)+"px"};
|
||||||
|
var _5d=this.previewImg.style;
|
||||||
|
_5d.width=_5c.w;
|
||||||
|
_5d.height=_5c.h;
|
||||||
|
_5d.left=_5c.x;
|
||||||
|
_5d.top=_5c.y;
|
||||||
|
}
|
||||||
|
}});
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,20 @@
|
||||||
|
Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of this software and associated documentation files (the
|
||||||
|
"Software"), to deal in the Software without restriction, including
|
||||||
|
without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be
|
||||||
|
included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
|
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||||
|
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||||
|
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||||
|
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
//
|
||||||
|
// See scriptaculous.js for full license.
|
||||||
|
|
||||||
|
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 != 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)) {
|
||||||
|
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 != 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);
|
||||||
|
},
|
||||||
|
_attributes: function(attributes) {
|
||||||
|
var attrs = [];
|
||||||
|
for(attribute in attributes)
|
||||||
|
attrs.push((attribute=='className' ? 'class' : attribute) +
|
||||||
|
'="' + attributes[attribute].toString().escapeHTML() + '"');
|
||||||
|
return attrs.join(" ");
|
||||||
|
},
|
||||||
|
_children: function(element, children) {
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,815 @@
|
||||||
|
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
// (c) 2005 Ivan Krstic (http://blogs.law.harvard.edu/ivan)
|
||||||
|
// (c) 2005 Jon Tirsen (http://www.tirsen.com)
|
||||||
|
// Contributors:
|
||||||
|
// Richard Livsey
|
||||||
|
// Rahul Bhargava
|
||||||
|
// Rob Wills
|
||||||
|
//
|
||||||
|
// See scriptaculous.js for full license.
|
||||||
|
|
||||||
|
// 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.
|
||||||
|
|
||||||
|
var Autocompleter = {}
|
||||||
|
Autocompleter.Base = function() {};
|
||||||
|
Autocompleter.Base.prototype = {
|
||||||
|
baseInitialize: function(element, update, options) {
|
||||||
|
this.element = $(element);
|
||||||
|
this.update = $(update);
|
||||||
|
this.hasFocus = false;
|
||||||
|
this.changed = false;
|
||||||
|
this.active = false;
|
||||||
|
this.index = 0;
|
||||||
|
this.entryCount = 0;
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
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, "keypress", this.onKeyPress.bindAsEventListener(this));
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function() {
|
||||||
|
if(Element.getStyle(this.update, 'display')=='none') this.options.onShow(this.element, this.update);
|
||||||
|
if(!this.iefix &&
|
||||||
|
(navigator.appVersion.indexOf('MSIE')>0) &&
|
||||||
|
(navigator.userAgent.indexOf('Opera')<0) &&
|
||||||
|
(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);
|
||||||
|
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();
|
||||||
|
if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);
|
||||||
|
return;
|
||||||
|
case Event.KEY_DOWN:
|
||||||
|
this.markNext();
|
||||||
|
this.render();
|
||||||
|
if(navigator.appVersion.indexOf('AppleWebKit')>0) Event.stop(event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
if(event.keyCode==Event.KEY_TAB || event.keyCode==Event.KEY_RETURN ||
|
||||||
|
(navigator.appVersion.indexOf('AppleWebKit') > 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;
|
||||||
|
},
|
||||||
|
|
||||||
|
markNext: function() {
|
||||||
|
if(this.index < this.entryCount-1) this.index++
|
||||||
|
else this.index = 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
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 = document.getElementsByClassName(this.options.select, selectedElement) || [];
|
||||||
|
if(nodes.length>0) value = Element.collectTextNodes(nodes[0], this.options.select);
|
||||||
|
} else
|
||||||
|
value = Element.collectTextNodesIgnoreClass(selectedElement, 'informal');
|
||||||
|
|
||||||
|
var lastTokenPos = this.findLastToken();
|
||||||
|
if (lastTokenPos != -1) {
|
||||||
|
var newValue = this.element.value.substr(0, lastTokenPos + 1);
|
||||||
|
var whitespace = this.element.value.substr(lastTokenPos + 1).match(/^\s+/);
|
||||||
|
if (whitespace)
|
||||||
|
newValue += whitespace[0];
|
||||||
|
this.element.value = newValue + value;
|
||||||
|
} else {
|
||||||
|
this.element.value = 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.firstChild);
|
||||||
|
|
||||||
|
if(this.update.firstChild && this.update.firstChild.childNodes) {
|
||||||
|
this.entryCount =
|
||||||
|
this.update.firstChild.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;
|
||||||
|
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;
|
||||||
|
if(this.getToken().length>=this.options.minChars) {
|
||||||
|
this.startIndicator();
|
||||||
|
this.getUpdatedChoices();
|
||||||
|
} else {
|
||||||
|
this.active = false;
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getToken: function() {
|
||||||
|
var tokenPos = this.findLastToken();
|
||||||
|
if (tokenPos != -1)
|
||||||
|
var ret = this.element.value.substr(tokenPos + 1).replace(/^\s+/,'').replace(/\s+$/,'');
|
||||||
|
else
|
||||||
|
var ret = this.element.value;
|
||||||
|
|
||||||
|
return /\n/.test(ret) ? '' : ret;
|
||||||
|
},
|
||||||
|
|
||||||
|
findLastToken: function() {
|
||||||
|
var lastTokenPos = -1;
|
||||||
|
|
||||||
|
for (var i=0; i<this.options.tokens.length; i++) {
|
||||||
|
var thisTokenPos = this.element.value.lastIndexOf(this.options.tokens[i]);
|
||||||
|
if (thisTokenPos > lastTokenPos)
|
||||||
|
lastTokenPos = thisTokenPos;
|
||||||
|
}
|
||||||
|
return lastTokenPos;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Ajax.Autocompleter = Class.create();
|
||||||
|
Object.extend(Object.extend(Ajax.Autocompleter.prototype, Autocompleter.Base.prototype), {
|
||||||
|
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() {
|
||||||
|
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.Local.prototype = Object.extend(new 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
|
||||||
|
//
|
||||||
|
// see documentation on http://wiki.script.aculo.us/scriptaculous/show/Ajax.InPlaceEditor
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";
|
||||||
|
Ajax.InPlaceEditor.prototype = {
|
||||||
|
initialize: function(element, url, options) {
|
||||||
|
this.url = url;
|
||||||
|
this.element = $(element);
|
||||||
|
|
||||||
|
this.options = Object.extend({
|
||||||
|
okButton: true,
|
||||||
|
okText: "ok",
|
||||||
|
cancelLink: true,
|
||||||
|
cancelText: "cancel",
|
||||||
|
savingText: "Saving...",
|
||||||
|
clickToEditText: "Click to edit",
|
||||||
|
okText: "ok",
|
||||||
|
rows: 1,
|
||||||
|
onComplete: function(transport, element) {
|
||||||
|
new Effect.Highlight(element, {startcolor: this.options.highlightcolor});
|
||||||
|
},
|
||||||
|
onFailure: function(transport) {
|
||||||
|
alert("Error communicating with the server: " + transport.responseText.stripTags());
|
||||||
|
},
|
||||||
|
callback: function(form) {
|
||||||
|
return Form.serialize(form);
|
||||||
|
},
|
||||||
|
handleLineBreaks: true,
|
||||||
|
loadingText: 'Loading...',
|
||||||
|
savingClassName: 'inplaceeditor-saving',
|
||||||
|
loadingClassName: 'inplaceeditor-loading',
|
||||||
|
formClassName: 'inplaceeditor-form',
|
||||||
|
highlightcolor: Ajax.InPlaceEditor.defaultHighlightColor,
|
||||||
|
highlightendcolor: "#FFFFFF",
|
||||||
|
externalControl: null,
|
||||||
|
submitOnBlur: false,
|
||||||
|
ajaxOptions: {},
|
||||||
|
evalScripts: false
|
||||||
|
}, options || {});
|
||||||
|
|
||||||
|
if(!this.options.formId && this.element.id) {
|
||||||
|
this.options.formId = this.element.id + "-inplaceeditor";
|
||||||
|
if ($(this.options.formId)) {
|
||||||
|
// there's already a form with that name, don't specify an id
|
||||||
|
this.options.formId = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.externalControl) {
|
||||||
|
this.options.externalControl = $(this.options.externalControl);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.originalBackground = Element.getStyle(this.element, 'background-color');
|
||||||
|
if (!this.originalBackground) {
|
||||||
|
this.originalBackground = "transparent";
|
||||||
|
}
|
||||||
|
|
||||||
|
this.element.title = this.options.clickToEditText;
|
||||||
|
|
||||||
|
this.onclickListener = this.enterEditMode.bindAsEventListener(this);
|
||||||
|
this.mouseoverListener = this.enterHover.bindAsEventListener(this);
|
||||||
|
this.mouseoutListener = this.leaveHover.bindAsEventListener(this);
|
||||||
|
Event.observe(this.element, 'click', this.onclickListener);
|
||||||
|
Event.observe(this.element, 'mouseover', this.mouseoverListener);
|
||||||
|
Event.observe(this.element, 'mouseout', this.mouseoutListener);
|
||||||
|
if (this.options.externalControl) {
|
||||||
|
Event.observe(this.options.externalControl, 'click', this.onclickListener);
|
||||||
|
Event.observe(this.options.externalControl, 'mouseover', this.mouseoverListener);
|
||||||
|
Event.observe(this.options.externalControl, 'mouseout', this.mouseoutListener);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enterEditMode: function(evt) {
|
||||||
|
if (this.saving) return;
|
||||||
|
if (this.editing) return;
|
||||||
|
this.editing = true;
|
||||||
|
this.onEnterEditMode();
|
||||||
|
if (this.options.externalControl) {
|
||||||
|
Element.hide(this.options.externalControl);
|
||||||
|
}
|
||||||
|
Element.hide(this.element);
|
||||||
|
this.createForm();
|
||||||
|
this.element.parentNode.insertBefore(this.form, this.element);
|
||||||
|
Field.scrollFreeActivate(this.editField);
|
||||||
|
// stop the event to avoid a page refresh in Safari
|
||||||
|
if (evt) {
|
||||||
|
Event.stop(evt);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
createForm: function() {
|
||||||
|
this.form = document.createElement("form");
|
||||||
|
this.form.id = this.options.formId;
|
||||||
|
Element.addClassName(this.form, this.options.formClassName)
|
||||||
|
this.form.onsubmit = this.onSubmit.bind(this);
|
||||||
|
|
||||||
|
this.createEditField();
|
||||||
|
|
||||||
|
if (this.options.textarea) {
|
||||||
|
var br = document.createElement("br");
|
||||||
|
this.form.appendChild(br);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.okButton) {
|
||||||
|
okButton = document.createElement("input");
|
||||||
|
okButton.type = "submit";
|
||||||
|
okButton.value = this.options.okText;
|
||||||
|
okButton.className = 'editor_ok_button';
|
||||||
|
this.form.appendChild(okButton);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.cancelLink) {
|
||||||
|
cancelLink = document.createElement("a");
|
||||||
|
cancelLink.href = "#";
|
||||||
|
cancelLink.appendChild(document.createTextNode(this.options.cancelText));
|
||||||
|
cancelLink.onclick = this.onclickCancel.bind(this);
|
||||||
|
cancelLink.className = 'editor_cancel';
|
||||||
|
this.form.appendChild(cancelLink);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hasHTMLLineBreaks: function(string) {
|
||||||
|
if (!this.options.handleLineBreaks) return false;
|
||||||
|
return string.match(/<br/i) || string.match(/<p>/i);
|
||||||
|
},
|
||||||
|
convertHTMLLineBreaks: function(string) {
|
||||||
|
return string.replace(/<br>/gi, "\n").replace(/<br\/>/gi, "\n").replace(/<\/p>/gi, "\n").replace(/<p>/gi, "");
|
||||||
|
},
|
||||||
|
createEditField: function() {
|
||||||
|
var text;
|
||||||
|
if(this.options.loadTextURL) {
|
||||||
|
text = this.options.loadingText;
|
||||||
|
} else {
|
||||||
|
text = this.getText();
|
||||||
|
}
|
||||||
|
|
||||||
|
var obj = this;
|
||||||
|
|
||||||
|
if (this.options.rows == 1 && !this.hasHTMLLineBreaks(text)) {
|
||||||
|
this.options.textarea = false;
|
||||||
|
var textField = document.createElement("input");
|
||||||
|
textField.obj = this;
|
||||||
|
textField.type = "text";
|
||||||
|
textField.name = "value";
|
||||||
|
textField.value = text;
|
||||||
|
textField.style.backgroundColor = this.options.highlightcolor;
|
||||||
|
textField.className = 'editor_field';
|
||||||
|
var size = this.options.size || this.options.cols || 0;
|
||||||
|
if (size != 0) textField.size = size;
|
||||||
|
if (this.options.submitOnBlur)
|
||||||
|
textField.onblur = this.onSubmit.bind(this);
|
||||||
|
this.editField = textField;
|
||||||
|
} else {
|
||||||
|
this.options.textarea = true;
|
||||||
|
var textArea = document.createElement("textarea");
|
||||||
|
textArea.obj = this;
|
||||||
|
textArea.name = "value";
|
||||||
|
textArea.value = this.convertHTMLLineBreaks(text);
|
||||||
|
textArea.rows = this.options.rows;
|
||||||
|
textArea.cols = this.options.cols || 40;
|
||||||
|
textArea.className = 'editor_field';
|
||||||
|
if (this.options.submitOnBlur)
|
||||||
|
textArea.onblur = this.onSubmit.bind(this);
|
||||||
|
this.editField = textArea;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.options.loadTextURL) {
|
||||||
|
this.loadExternalText();
|
||||||
|
}
|
||||||
|
this.form.appendChild(this.editField);
|
||||||
|
},
|
||||||
|
getText: function() {
|
||||||
|
return this.element.innerHTML;
|
||||||
|
},
|
||||||
|
loadExternalText: function() {
|
||||||
|
Element.addClassName(this.form, this.options.loadingClassName);
|
||||||
|
this.editField.disabled = true;
|
||||||
|
new Ajax.Request(
|
||||||
|
this.options.loadTextURL,
|
||||||
|
Object.extend({
|
||||||
|
asynchronous: true,
|
||||||
|
onComplete: this.onLoadedExternalText.bind(this)
|
||||||
|
}, this.options.ajaxOptions)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
onLoadedExternalText: function(transport) {
|
||||||
|
Element.removeClassName(this.form, this.options.loadingClassName);
|
||||||
|
this.editField.disabled = false;
|
||||||
|
this.editField.value = transport.responseText.stripTags();
|
||||||
|
},
|
||||||
|
onclickCancel: function() {
|
||||||
|
this.onComplete();
|
||||||
|
this.leaveEditMode();
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onFailure: function(transport) {
|
||||||
|
this.options.onFailure(transport);
|
||||||
|
if (this.oldInnerHTML) {
|
||||||
|
this.element.innerHTML = this.oldInnerHTML;
|
||||||
|
this.oldInnerHTML = null;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onSubmit: function() {
|
||||||
|
// onLoading resets these so we need to save them away for the Ajax call
|
||||||
|
var form = this.form;
|
||||||
|
var value = this.editField.value;
|
||||||
|
|
||||||
|
// do this first, sometimes the ajax call returns before we get a chance to switch on Saving...
|
||||||
|
// which means this will actually switch on Saving... *after* we've left edit mode causing Saving...
|
||||||
|
// to be displayed indefinitely
|
||||||
|
this.onLoading();
|
||||||
|
|
||||||
|
if (this.options.evalScripts) {
|
||||||
|
new Ajax.Request(
|
||||||
|
this.url, Object.extend({
|
||||||
|
parameters: this.options.callback(form, value),
|
||||||
|
onComplete: this.onComplete.bind(this),
|
||||||
|
onFailure: this.onFailure.bind(this),
|
||||||
|
asynchronous:true,
|
||||||
|
evalScripts:true
|
||||||
|
}, this.options.ajaxOptions));
|
||||||
|
} else {
|
||||||
|
new Ajax.Updater(
|
||||||
|
{ success: this.element,
|
||||||
|
// don't update on failure (this could be an option)
|
||||||
|
failure: null },
|
||||||
|
this.url, Object.extend({
|
||||||
|
parameters: this.options.callback(form, value),
|
||||||
|
onComplete: this.onComplete.bind(this),
|
||||||
|
onFailure: this.onFailure.bind(this)
|
||||||
|
}, this.options.ajaxOptions));
|
||||||
|
}
|
||||||
|
// stop the event to avoid a page refresh in Safari
|
||||||
|
if (arguments.length > 1) {
|
||||||
|
Event.stop(arguments[0]);
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
onLoading: function() {
|
||||||
|
this.saving = true;
|
||||||
|
this.removeForm();
|
||||||
|
this.leaveHover();
|
||||||
|
this.showSaving();
|
||||||
|
},
|
||||||
|
showSaving: function() {
|
||||||
|
this.oldInnerHTML = this.element.innerHTML;
|
||||||
|
this.element.innerHTML = this.options.savingText;
|
||||||
|
Element.addClassName(this.element, this.options.savingClassName);
|
||||||
|
this.element.style.backgroundColor = this.originalBackground;
|
||||||
|
Element.show(this.element);
|
||||||
|
},
|
||||||
|
removeForm: function() {
|
||||||
|
if(this.form) {
|
||||||
|
if (this.form.parentNode) Element.remove(this.form);
|
||||||
|
this.form = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enterHover: function() {
|
||||||
|
if (this.saving) return;
|
||||||
|
this.element.style.backgroundColor = this.options.highlightcolor;
|
||||||
|
if (this.effect) {
|
||||||
|
this.effect.cancel();
|
||||||
|
}
|
||||||
|
Element.addClassName(this.element, this.options.hoverClassName)
|
||||||
|
},
|
||||||
|
leaveHover: function() {
|
||||||
|
if (this.options.backgroundColor) {
|
||||||
|
this.element.style.backgroundColor = this.oldBackground;
|
||||||
|
}
|
||||||
|
Element.removeClassName(this.element, this.options.hoverClassName)
|
||||||
|
if (this.saving) return;
|
||||||
|
this.effect = new Effect.Highlight(this.element, {
|
||||||
|
startcolor: this.options.highlightcolor,
|
||||||
|
endcolor: this.options.highlightendcolor,
|
||||||
|
restorecolor: this.originalBackground
|
||||||
|
});
|
||||||
|
},
|
||||||
|
leaveEditMode: function() {
|
||||||
|
Element.removeClassName(this.element, this.options.savingClassName);
|
||||||
|
this.removeForm();
|
||||||
|
this.leaveHover();
|
||||||
|
this.element.style.backgroundColor = this.originalBackground;
|
||||||
|
Element.show(this.element);
|
||||||
|
if (this.options.externalControl) {
|
||||||
|
Element.show(this.options.externalControl);
|
||||||
|
}
|
||||||
|
this.editing = false;
|
||||||
|
this.saving = false;
|
||||||
|
this.oldInnerHTML = null;
|
||||||
|
this.onLeaveEditMode();
|
||||||
|
},
|
||||||
|
onComplete: function(transport) {
|
||||||
|
this.leaveEditMode();
|
||||||
|
this.options.onComplete.bind(this)(transport, this.element);
|
||||||
|
},
|
||||||
|
onEnterEditMode: function() {},
|
||||||
|
onLeaveEditMode: function() {},
|
||||||
|
dispose: function() {
|
||||||
|
if (this.oldInnerHTML) {
|
||||||
|
this.element.innerHTML = this.oldInnerHTML;
|
||||||
|
}
|
||||||
|
this.leaveEditMode();
|
||||||
|
Event.stopObserving(this.element, 'click', this.onclickListener);
|
||||||
|
Event.stopObserving(this.element, 'mouseover', this.mouseoverListener);
|
||||||
|
Event.stopObserving(this.element, 'mouseout', this.mouseoutListener);
|
||||||
|
if (this.options.externalControl) {
|
||||||
|
Event.stopObserving(this.options.externalControl, 'click', this.onclickListener);
|
||||||
|
Event.stopObserving(this.options.externalControl, 'mouseover', this.mouseoverListener);
|
||||||
|
Event.stopObserving(this.options.externalControl, 'mouseout', this.mouseoutListener);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
Ajax.InPlaceCollectionEditor = Class.create();
|
||||||
|
Object.extend(Ajax.InPlaceCollectionEditor.prototype, Ajax.InPlaceEditor.prototype);
|
||||||
|
Object.extend(Ajax.InPlaceCollectionEditor.prototype, {
|
||||||
|
createEditField: function() {
|
||||||
|
if (!this.cached_selectTag) {
|
||||||
|
var selectTag = document.createElement("select");
|
||||||
|
var collection = this.options.collection || [];
|
||||||
|
var optionTag;
|
||||||
|
collection.each(function(e,i) {
|
||||||
|
optionTag = document.createElement("option");
|
||||||
|
optionTag.value = (e instanceof Array) ? e[0] : e;
|
||||||
|
if(this.options.value==optionTag.value) optionTag.selected = true;
|
||||||
|
optionTag.appendChild(document.createTextNode((e instanceof Array) ? e[1] : e));
|
||||||
|
selectTag.appendChild(optionTag);
|
||||||
|
}.bind(this));
|
||||||
|
this.cached_selectTag = selectTag;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.editField = this.cached_selectTag;
|
||||||
|
if(this.options.loadTextURL) this.loadExternalText();
|
||||||
|
this.form.appendChild(this.editField);
|
||||||
|
this.options.callback = function(form, value) {
|
||||||
|
return "value=" + encodeURIComponent(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Delayed observer, like Form.Element.Observer,
|
||||||
|
// but waits for delay after last key input
|
||||||
|
// Ideal for live-search fields
|
||||||
|
|
||||||
|
Form.Element.DelayedObserver = Class.create();
|
||||||
|
Form.Element.DelayedObserver.prototype = {
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,915 @@
|
||||||
|
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
// (c) 2005 Sammi Williams (http://www.oriontransfer.co.nz, sammi@oriontransfer.co.nz)
|
||||||
|
//
|
||||||
|
// See scriptaculous.js for full license.
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
var Droppables = {
|
||||||
|
drops: [],
|
||||||
|
|
||||||
|
remove: function(element) {
|
||||||
|
this.drops = this.drops.reject(function(d) { return d.element==$(element) });
|
||||||
|
},
|
||||||
|
|
||||||
|
add: function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var options = Object.extend({
|
||||||
|
greedy: true,
|
||||||
|
hoverclass: null,
|
||||||
|
tree: false
|
||||||
|
}, arguments[1] || {});
|
||||||
|
|
||||||
|
// cache containers
|
||||||
|
if(options.containment) {
|
||||||
|
options._containers = [];
|
||||||
|
var containment = options.containment;
|
||||||
|
if((typeof containment == 'object') &&
|
||||||
|
(containment.constructor == Array)) {
|
||||||
|
containment.each( function(c) { options._containers.push($(c)) });
|
||||||
|
} else {
|
||||||
|
options._containers.push($(containment));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(options.accept) options.accept = [options.accept].flatten();
|
||||||
|
|
||||||
|
Element.makePositioned(element); // fix IE
|
||||||
|
options.element = element;
|
||||||
|
|
||||||
|
this.drops.push(options);
|
||||||
|
},
|
||||||
|
|
||||||
|
findDeepestChild: function(drops) {
|
||||||
|
deepest = drops[0];
|
||||||
|
|
||||||
|
for (i = 1; i < drops.length; ++i)
|
||||||
|
if (Element.isParent(drops[i].element, deepest.element))
|
||||||
|
deepest = drops[i];
|
||||||
|
|
||||||
|
return deepest;
|
||||||
|
},
|
||||||
|
|
||||||
|
isContained: function(element, drop) {
|
||||||
|
var containmentNode;
|
||||||
|
if(drop.tree) {
|
||||||
|
containmentNode = element.treeNode;
|
||||||
|
} else {
|
||||||
|
containmentNode = element.parentNode;
|
||||||
|
}
|
||||||
|
return drop._containers.detect(function(c) { return containmentNode == c });
|
||||||
|
},
|
||||||
|
|
||||||
|
isAffected: function(point, element, drop) {
|
||||||
|
return (
|
||||||
|
(drop.element!=element) &&
|
||||||
|
((!drop._containers) ||
|
||||||
|
this.isContained(element, drop)) &&
|
||||||
|
((!drop.accept) ||
|
||||||
|
(Element.classNames(element).detect(
|
||||||
|
function(v) { return drop.accept.include(v) } ) )) &&
|
||||||
|
Position.within(drop.element, point[0], point[1]) );
|
||||||
|
},
|
||||||
|
|
||||||
|
deactivate: function(drop) {
|
||||||
|
if(drop.hoverclass)
|
||||||
|
Element.removeClassName(drop.element, drop.hoverclass);
|
||||||
|
this.last_active = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
activate: function(drop) {
|
||||||
|
if(drop.hoverclass)
|
||||||
|
Element.addClassName(drop.element, drop.hoverclass);
|
||||||
|
this.last_active = drop;
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function(point, element) {
|
||||||
|
if(!this.drops.length) return;
|
||||||
|
var affected = [];
|
||||||
|
|
||||||
|
if(this.last_active) this.deactivate(this.last_active);
|
||||||
|
this.drops.each( function(drop) {
|
||||||
|
if(Droppables.isAffected(point, element, drop))
|
||||||
|
affected.push(drop);
|
||||||
|
});
|
||||||
|
|
||||||
|
if(affected.length>0) {
|
||||||
|
drop = Droppables.findDeepestChild(affected);
|
||||||
|
Position.within(drop.element, point[0], point[1]);
|
||||||
|
if(drop.onHover)
|
||||||
|
drop.onHover(element, drop.element, Position.overlap(drop.overlap, drop.element));
|
||||||
|
|
||||||
|
Droppables.activate(drop);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
fire: function(event, element) {
|
||||||
|
if(!this.last_active) return;
|
||||||
|
Position.prepare();
|
||||||
|
|
||||||
|
if (this.isAffected([Event.pointerX(event), Event.pointerY(event)], element, this.last_active))
|
||||||
|
if (this.last_active.onDrop)
|
||||||
|
this.last_active.onDrop(element, this.last_active.element, event);
|
||||||
|
},
|
||||||
|
|
||||||
|
reset: function() {
|
||||||
|
if(this.last_active)
|
||||||
|
this.deactivate(this.last_active);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var Draggables = {
|
||||||
|
drags: [],
|
||||||
|
observers: [],
|
||||||
|
|
||||||
|
register: function(draggable) {
|
||||||
|
if(this.drags.length == 0) {
|
||||||
|
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
|
||||||
|
this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
|
||||||
|
this.eventKeypress = this.keyPress.bindAsEventListener(this);
|
||||||
|
|
||||||
|
Event.observe(document, "mouseup", this.eventMouseUp);
|
||||||
|
Event.observe(document, "mousemove", this.eventMouseMove);
|
||||||
|
Event.observe(document, "keypress", this.eventKeypress);
|
||||||
|
}
|
||||||
|
this.drags.push(draggable);
|
||||||
|
},
|
||||||
|
|
||||||
|
unregister: function(draggable) {
|
||||||
|
this.drags = this.drags.reject(function(d) { return d==draggable });
|
||||||
|
if(this.drags.length == 0) {
|
||||||
|
Event.stopObserving(document, "mouseup", this.eventMouseUp);
|
||||||
|
Event.stopObserving(document, "mousemove", this.eventMouseMove);
|
||||||
|
Event.stopObserving(document, "keypress", this.eventKeypress);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
activate: function(draggable) {
|
||||||
|
window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
|
||||||
|
this.activeDraggable = draggable;
|
||||||
|
},
|
||||||
|
|
||||||
|
deactivate: function() {
|
||||||
|
this.activeDraggable = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateDrag: function(event) {
|
||||||
|
if(!this.activeDraggable) return;
|
||||||
|
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||||
|
// Mozilla-based browsers fire successive mousemove events with
|
||||||
|
// the same coordinates, prevent needless redrawing (moz bug?)
|
||||||
|
if(this._lastPointer && (this._lastPointer.inspect() == pointer.inspect())) return;
|
||||||
|
this._lastPointer = pointer;
|
||||||
|
this.activeDraggable.updateDrag(event, pointer);
|
||||||
|
},
|
||||||
|
|
||||||
|
endDrag: function(event) {
|
||||||
|
if(!this.activeDraggable) return;
|
||||||
|
this._lastPointer = null;
|
||||||
|
this.activeDraggable.endDrag(event);
|
||||||
|
this.activeDraggable = null;
|
||||||
|
},
|
||||||
|
|
||||||
|
keyPress: function(event) {
|
||||||
|
if(this.activeDraggable)
|
||||||
|
this.activeDraggable.keyPress(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
addObserver: function(observer) {
|
||||||
|
this.observers.push(observer);
|
||||||
|
this._cacheObserverCallbacks();
|
||||||
|
},
|
||||||
|
|
||||||
|
removeObserver: function(element) { // element instead of observer fixes mem leaks
|
||||||
|
this.observers = this.observers.reject( function(o) { return o.element==element });
|
||||||
|
this._cacheObserverCallbacks();
|
||||||
|
},
|
||||||
|
|
||||||
|
notify: function(eventName, draggable, event) { // 'onStart', 'onEnd', 'onDrag'
|
||||||
|
if(this[eventName+'Count'] > 0)
|
||||||
|
this.observers.each( function(o) {
|
||||||
|
if(o[eventName]) o[eventName](eventName, draggable, event);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
_cacheObserverCallbacks: function() {
|
||||||
|
['onStart','onEnd','onDrag'].each( function(eventName) {
|
||||||
|
Draggables[eventName+'Count'] = Draggables.observers.select(
|
||||||
|
function(o) { return o[eventName]; }
|
||||||
|
).length;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
var Draggable = Class.create();
|
||||||
|
Draggable.prototype = {
|
||||||
|
initialize: function(element) {
|
||||||
|
var options = Object.extend({
|
||||||
|
handle: false,
|
||||||
|
starteffect: function(element) {
|
||||||
|
element._opacity = Element.getOpacity(element);
|
||||||
|
new Effect.Opacity(element, {duration:0.2, from:element._opacity, to:0.7});
|
||||||
|
},
|
||||||
|
reverteffect: function(element, top_offset, left_offset) {
|
||||||
|
var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02;
|
||||||
|
element._revert = new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur});
|
||||||
|
},
|
||||||
|
endeffect: function(element) {
|
||||||
|
var toOpacity = typeof element._opacity == 'number' ? element._opacity : 1.0
|
||||||
|
new Effect.Opacity(element, {duration:0.2, from:0.7, to:toOpacity});
|
||||||
|
},
|
||||||
|
zindex: 1000,
|
||||||
|
revert: false,
|
||||||
|
scroll: false,
|
||||||
|
scrollSensitivity: 20,
|
||||||
|
scrollSpeed: 15,
|
||||||
|
snap: false // false, or xy or [x,y] or function(x,y){ return [x,y] }
|
||||||
|
}, arguments[1] || {});
|
||||||
|
|
||||||
|
this.element = $(element);
|
||||||
|
|
||||||
|
if(options.handle && (typeof options.handle == 'string')) {
|
||||||
|
var h = Element.childrenWithClassName(this.element, options.handle, true);
|
||||||
|
if(h.length>0) this.handle = h[0];
|
||||||
|
}
|
||||||
|
if(!this.handle) this.handle = $(options.handle);
|
||||||
|
if(!this.handle) this.handle = this.element;
|
||||||
|
|
||||||
|
if(options.scroll && !options.scroll.scrollTo && !options.scroll.outerHTML)
|
||||||
|
options.scroll = $(options.scroll);
|
||||||
|
|
||||||
|
Element.makePositioned(this.element); // fix IE
|
||||||
|
|
||||||
|
this.delta = this.currentDelta();
|
||||||
|
this.options = options;
|
||||||
|
this.dragging = false;
|
||||||
|
|
||||||
|
this.eventMouseDown = this.initDrag.bindAsEventListener(this);
|
||||||
|
Event.observe(this.handle, "mousedown", this.eventMouseDown);
|
||||||
|
|
||||||
|
Draggables.register(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy: function() {
|
||||||
|
Event.stopObserving(this.handle, "mousedown", this.eventMouseDown);
|
||||||
|
Draggables.unregister(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
currentDelta: function() {
|
||||||
|
return([
|
||||||
|
parseInt(Element.getStyle(this.element,'left') || '0'),
|
||||||
|
parseInt(Element.getStyle(this.element,'top') || '0')]);
|
||||||
|
},
|
||||||
|
|
||||||
|
initDrag: function(event) {
|
||||||
|
if(Event.isLeftClick(event)) {
|
||||||
|
// abort on form elements, fixes a Firefox issue
|
||||||
|
var src = Event.element(event);
|
||||||
|
if(src.tagName && (
|
||||||
|
src.tagName=='INPUT' ||
|
||||||
|
src.tagName=='SELECT' ||
|
||||||
|
src.tagName=='OPTION' ||
|
||||||
|
src.tagName=='BUTTON' ||
|
||||||
|
src.tagName=='TEXTAREA')) return;
|
||||||
|
|
||||||
|
if(this.element._revert) {
|
||||||
|
this.element._revert.cancel();
|
||||||
|
this.element._revert = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||||
|
var pos = Position.cumulativeOffset(this.element);
|
||||||
|
this.offset = [0,1].map( function(i) { return (pointer[i] - pos[i]) });
|
||||||
|
|
||||||
|
Draggables.activate(this);
|
||||||
|
Event.stop(event);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
startDrag: function(event) {
|
||||||
|
this.dragging = true;
|
||||||
|
|
||||||
|
if(this.options.zindex) {
|
||||||
|
this.originalZ = parseInt(Element.getStyle(this.element,'z-index') || 0);
|
||||||
|
this.element.style.zIndex = this.options.zindex;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.options.ghosting) {
|
||||||
|
this._clone = this.element.cloneNode(true);
|
||||||
|
Position.absolutize(this.element);
|
||||||
|
this.element.parentNode.insertBefore(this._clone, this.element);
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.options.scroll) {
|
||||||
|
if (this.options.scroll == window) {
|
||||||
|
var where = this._getWindowScroll(this.options.scroll);
|
||||||
|
this.originalScrollLeft = where.left;
|
||||||
|
this.originalScrollTop = where.top;
|
||||||
|
} else {
|
||||||
|
this.originalScrollLeft = this.options.scroll.scrollLeft;
|
||||||
|
this.originalScrollTop = this.options.scroll.scrollTop;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Draggables.notify('onStart', this, event);
|
||||||
|
if(this.options.starteffect) this.options.starteffect(this.element);
|
||||||
|
},
|
||||||
|
|
||||||
|
updateDrag: function(event, pointer) {
|
||||||
|
if(!this.dragging) this.startDrag(event);
|
||||||
|
Position.prepare();
|
||||||
|
Droppables.show(pointer, this.element);
|
||||||
|
Draggables.notify('onDrag', this, event);
|
||||||
|
this.draw(pointer);
|
||||||
|
if(this.options.change) this.options.change(this);
|
||||||
|
|
||||||
|
if(this.options.scroll) {
|
||||||
|
this.stopScrolling();
|
||||||
|
|
||||||
|
var p;
|
||||||
|
if (this.options.scroll == window) {
|
||||||
|
with(this._getWindowScroll(this.options.scroll)) { p = [ left, top, left+width, top+height ]; }
|
||||||
|
} else {
|
||||||
|
p = Position.page(this.options.scroll);
|
||||||
|
p[0] += this.options.scroll.scrollLeft;
|
||||||
|
p[1] += this.options.scroll.scrollTop;
|
||||||
|
p.push(p[0]+this.options.scroll.offsetWidth);
|
||||||
|
p.push(p[1]+this.options.scroll.offsetHeight);
|
||||||
|
}
|
||||||
|
var speed = [0,0];
|
||||||
|
if(pointer[0] < (p[0]+this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[0]+this.options.scrollSensitivity);
|
||||||
|
if(pointer[1] < (p[1]+this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[1]+this.options.scrollSensitivity);
|
||||||
|
if(pointer[0] > (p[2]-this.options.scrollSensitivity)) speed[0] = pointer[0]-(p[2]-this.options.scrollSensitivity);
|
||||||
|
if(pointer[1] > (p[3]-this.options.scrollSensitivity)) speed[1] = pointer[1]-(p[3]-this.options.scrollSensitivity);
|
||||||
|
this.startScrolling(speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
// fix AppleWebKit rendering
|
||||||
|
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
||||||
|
|
||||||
|
Event.stop(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
finishDrag: function(event, success) {
|
||||||
|
this.dragging = false;
|
||||||
|
|
||||||
|
if(this.options.ghosting) {
|
||||||
|
Position.relativize(this.element);
|
||||||
|
Element.remove(this._clone);
|
||||||
|
this._clone = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(success) Droppables.fire(event, this.element);
|
||||||
|
Draggables.notify('onEnd', this, event);
|
||||||
|
|
||||||
|
var revert = this.options.revert;
|
||||||
|
if(revert && typeof revert == 'function') revert = revert(this.element);
|
||||||
|
|
||||||
|
var d = this.currentDelta();
|
||||||
|
if(revert && this.options.reverteffect) {
|
||||||
|
this.options.reverteffect(this.element,
|
||||||
|
d[1]-this.delta[1], d[0]-this.delta[0]);
|
||||||
|
} else {
|
||||||
|
this.delta = d;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(this.options.zindex)
|
||||||
|
this.element.style.zIndex = this.originalZ;
|
||||||
|
|
||||||
|
if(this.options.endeffect)
|
||||||
|
this.options.endeffect(this.element);
|
||||||
|
|
||||||
|
Draggables.deactivate(this);
|
||||||
|
Droppables.reset();
|
||||||
|
},
|
||||||
|
|
||||||
|
keyPress: function(event) {
|
||||||
|
if(event.keyCode!=Event.KEY_ESC) return;
|
||||||
|
this.finishDrag(event, false);
|
||||||
|
Event.stop(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
endDrag: function(event) {
|
||||||
|
if(!this.dragging) return;
|
||||||
|
this.stopScrolling();
|
||||||
|
this.finishDrag(event, true);
|
||||||
|
Event.stop(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
draw: function(point) {
|
||||||
|
var pos = Position.cumulativeOffset(this.element);
|
||||||
|
var d = this.currentDelta();
|
||||||
|
pos[0] -= d[0]; pos[1] -= d[1];
|
||||||
|
|
||||||
|
if(this.options.scroll && (this.options.scroll != window)) {
|
||||||
|
pos[0] -= this.options.scroll.scrollLeft-this.originalScrollLeft;
|
||||||
|
pos[1] -= this.options.scroll.scrollTop-this.originalScrollTop;
|
||||||
|
}
|
||||||
|
|
||||||
|
var p = [0,1].map(function(i){
|
||||||
|
return (point[i]-pos[i]-this.offset[i])
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
if(this.options.snap) {
|
||||||
|
if(typeof this.options.snap == 'function') {
|
||||||
|
p = this.options.snap(p[0],p[1],this);
|
||||||
|
} else {
|
||||||
|
if(this.options.snap instanceof Array) {
|
||||||
|
p = p.map( function(v, i) {
|
||||||
|
return Math.round(v/this.options.snap[i])*this.options.snap[i] }.bind(this))
|
||||||
|
} else {
|
||||||
|
p = p.map( function(v) {
|
||||||
|
return Math.round(v/this.options.snap)*this.options.snap }.bind(this))
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
|
||||||
|
var style = this.element.style;
|
||||||
|
if((!this.options.constraint) || (this.options.constraint=='horizontal'))
|
||||||
|
style.left = p[0] + "px";
|
||||||
|
if((!this.options.constraint) || (this.options.constraint=='vertical'))
|
||||||
|
style.top = p[1] + "px";
|
||||||
|
if(style.visibility=="hidden") style.visibility = ""; // fix gecko rendering
|
||||||
|
},
|
||||||
|
|
||||||
|
stopScrolling: function() {
|
||||||
|
if(this.scrollInterval) {
|
||||||
|
clearInterval(this.scrollInterval);
|
||||||
|
this.scrollInterval = null;
|
||||||
|
Draggables._lastScrollPointer = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
startScrolling: function(speed) {
|
||||||
|
this.scrollSpeed = [speed[0]*this.options.scrollSpeed,speed[1]*this.options.scrollSpeed];
|
||||||
|
this.lastScrolled = new Date();
|
||||||
|
this.scrollInterval = setInterval(this.scroll.bind(this), 10);
|
||||||
|
},
|
||||||
|
|
||||||
|
scroll: function() {
|
||||||
|
var current = new Date();
|
||||||
|
var delta = current - this.lastScrolled;
|
||||||
|
this.lastScrolled = current;
|
||||||
|
if(this.options.scroll == window) {
|
||||||
|
with (this._getWindowScroll(this.options.scroll)) {
|
||||||
|
if (this.scrollSpeed[0] || this.scrollSpeed[1]) {
|
||||||
|
var d = delta / 1000;
|
||||||
|
this.options.scroll.scrollTo( left + d*this.scrollSpeed[0], top + d*this.scrollSpeed[1] );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.options.scroll.scrollLeft += this.scrollSpeed[0] * delta / 1000;
|
||||||
|
this.options.scroll.scrollTop += this.scrollSpeed[1] * delta / 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
Position.prepare();
|
||||||
|
Droppables.show(Draggables._lastPointer, this.element);
|
||||||
|
Draggables.notify('onDrag', this);
|
||||||
|
Draggables._lastScrollPointer = Draggables._lastScrollPointer || $A(Draggables._lastPointer);
|
||||||
|
Draggables._lastScrollPointer[0] += this.scrollSpeed[0] * delta / 1000;
|
||||||
|
Draggables._lastScrollPointer[1] += this.scrollSpeed[1] * delta / 1000;
|
||||||
|
if (Draggables._lastScrollPointer[0] < 0)
|
||||||
|
Draggables._lastScrollPointer[0] = 0;
|
||||||
|
if (Draggables._lastScrollPointer[1] < 0)
|
||||||
|
Draggables._lastScrollPointer[1] = 0;
|
||||||
|
this.draw(Draggables._lastScrollPointer);
|
||||||
|
|
||||||
|
if(this.options.change) this.options.change(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
_getWindowScroll: function(w) {
|
||||||
|
var T, L, W, H;
|
||||||
|
with (w.document) {
|
||||||
|
if (w.document.documentElement && documentElement.scrollTop) {
|
||||||
|
T = documentElement.scrollTop;
|
||||||
|
L = documentElement.scrollLeft;
|
||||||
|
} else if (w.document.body) {
|
||||||
|
T = body.scrollTop;
|
||||||
|
L = body.scrollLeft;
|
||||||
|
}
|
||||||
|
if (w.innerWidth) {
|
||||||
|
W = w.innerWidth;
|
||||||
|
H = w.innerHeight;
|
||||||
|
} else if (w.document.documentElement && documentElement.clientWidth) {
|
||||||
|
W = documentElement.clientWidth;
|
||||||
|
H = documentElement.clientHeight;
|
||||||
|
} else {
|
||||||
|
W = body.offsetWidth;
|
||||||
|
H = body.offsetHeight
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return { top: T, left: L, width: W, height: H };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
var SortableObserver = Class.create();
|
||||||
|
SortableObserver.prototype = {
|
||||||
|
initialize: function(element, observer) {
|
||||||
|
this.element = $(element);
|
||||||
|
this.observer = observer;
|
||||||
|
this.lastValue = Sortable.serialize(this.element);
|
||||||
|
},
|
||||||
|
|
||||||
|
onStart: function() {
|
||||||
|
this.lastValue = Sortable.serialize(this.element);
|
||||||
|
},
|
||||||
|
|
||||||
|
onEnd: function() {
|
||||||
|
Sortable.unmark();
|
||||||
|
if(this.lastValue != Sortable.serialize(this.element))
|
||||||
|
this.observer(this.element)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var Sortable = {
|
||||||
|
sortables: {},
|
||||||
|
|
||||||
|
_findRootElement: function(element) {
|
||||||
|
while (element.tagName != "BODY") {
|
||||||
|
if(element.id && Sortable.sortables[element.id]) return element;
|
||||||
|
element = element.parentNode;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
options: function(element) {
|
||||||
|
element = Sortable._findRootElement($(element));
|
||||||
|
if(!element) return;
|
||||||
|
return Sortable.sortables[element.id];
|
||||||
|
},
|
||||||
|
|
||||||
|
destroy: function(element){
|
||||||
|
var s = Sortable.options(element);
|
||||||
|
|
||||||
|
if(s) {
|
||||||
|
Draggables.removeObserver(s.element);
|
||||||
|
s.droppables.each(function(d){ Droppables.remove(d) });
|
||||||
|
s.draggables.invoke('destroy');
|
||||||
|
|
||||||
|
delete Sortable.sortables[s.element.id];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
create: function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var options = Object.extend({
|
||||||
|
element: element,
|
||||||
|
tag: 'li', // assumes li children, override with tag: 'tagname'
|
||||||
|
dropOnEmpty: false,
|
||||||
|
tree: false,
|
||||||
|
treeTag: 'ul',
|
||||||
|
overlap: 'vertical', // one of 'vertical', 'horizontal'
|
||||||
|
constraint: 'vertical', // one of 'vertical', 'horizontal', false
|
||||||
|
containment: element, // also takes array of elements (or id's); or false
|
||||||
|
handle: false, // or a CSS class
|
||||||
|
only: false,
|
||||||
|
hoverclass: null,
|
||||||
|
ghosting: false,
|
||||||
|
scroll: false,
|
||||||
|
scrollSensitivity: 20,
|
||||||
|
scrollSpeed: 15,
|
||||||
|
format: /^[^_]*_(.*)$/,
|
||||||
|
onChange: Prototype.emptyFunction,
|
||||||
|
onUpdate: Prototype.emptyFunction
|
||||||
|
}, arguments[1] || {});
|
||||||
|
|
||||||
|
// clear any old sortable with same element
|
||||||
|
this.destroy(element);
|
||||||
|
|
||||||
|
// build options for the draggables
|
||||||
|
var options_for_draggable = {
|
||||||
|
revert: true,
|
||||||
|
scroll: options.scroll,
|
||||||
|
scrollSpeed: options.scrollSpeed,
|
||||||
|
scrollSensitivity: options.scrollSensitivity,
|
||||||
|
ghosting: options.ghosting,
|
||||||
|
constraint: options.constraint,
|
||||||
|
handle: options.handle };
|
||||||
|
|
||||||
|
if(options.starteffect)
|
||||||
|
options_for_draggable.starteffect = options.starteffect;
|
||||||
|
|
||||||
|
if(options.reverteffect)
|
||||||
|
options_for_draggable.reverteffect = options.reverteffect;
|
||||||
|
else
|
||||||
|
if(options.ghosting) options_for_draggable.reverteffect = function(element) {
|
||||||
|
element.style.top = 0;
|
||||||
|
element.style.left = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
if(options.endeffect)
|
||||||
|
options_for_draggable.endeffect = options.endeffect;
|
||||||
|
|
||||||
|
if(options.zindex)
|
||||||
|
options_for_draggable.zindex = options.zindex;
|
||||||
|
|
||||||
|
// build options for the droppables
|
||||||
|
var options_for_droppable = {
|
||||||
|
overlap: options.overlap,
|
||||||
|
containment: options.containment,
|
||||||
|
tree: options.tree,
|
||||||
|
hoverclass: options.hoverclass,
|
||||||
|
onHover: Sortable.onHover
|
||||||
|
//greedy: !options.dropOnEmpty
|
||||||
|
}
|
||||||
|
|
||||||
|
var options_for_tree = {
|
||||||
|
onHover: Sortable.onEmptyHover,
|
||||||
|
overlap: options.overlap,
|
||||||
|
containment: options.containment,
|
||||||
|
hoverclass: options.hoverclass
|
||||||
|
}
|
||||||
|
|
||||||
|
// fix for gecko engine
|
||||||
|
Element.cleanWhitespace(element);
|
||||||
|
|
||||||
|
options.draggables = [];
|
||||||
|
options.droppables = [];
|
||||||
|
|
||||||
|
// drop on empty handling
|
||||||
|
if(options.dropOnEmpty || options.tree) {
|
||||||
|
Droppables.add(element, options_for_tree);
|
||||||
|
options.droppables.push(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
(this.findElements(element, options) || []).each( function(e) {
|
||||||
|
// handles are per-draggable
|
||||||
|
var handle = options.handle ?
|
||||||
|
Element.childrenWithClassName(e, options.handle)[0] : e;
|
||||||
|
options.draggables.push(
|
||||||
|
new Draggable(e, Object.extend(options_for_draggable, { handle: handle })));
|
||||||
|
Droppables.add(e, options_for_droppable);
|
||||||
|
if(options.tree) e.treeNode = element;
|
||||||
|
options.droppables.push(e);
|
||||||
|
});
|
||||||
|
|
||||||
|
if(options.tree) {
|
||||||
|
(Sortable.findTreeElements(element, options) || []).each( function(e) {
|
||||||
|
Droppables.add(e, options_for_tree);
|
||||||
|
e.treeNode = element;
|
||||||
|
options.droppables.push(e);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// keep reference
|
||||||
|
this.sortables[element.id] = options;
|
||||||
|
|
||||||
|
// for onupdate
|
||||||
|
Draggables.addObserver(new SortableObserver(element, options.onUpdate));
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
// return all suitable-for-sortable elements in a guaranteed order
|
||||||
|
findElements: function(element, options) {
|
||||||
|
return Element.findChildren(
|
||||||
|
element, options.only, options.tree ? true : false, options.tag);
|
||||||
|
},
|
||||||
|
|
||||||
|
findTreeElements: function(element, options) {
|
||||||
|
return Element.findChildren(
|
||||||
|
element, options.only, options.tree ? true : false, options.treeTag);
|
||||||
|
},
|
||||||
|
|
||||||
|
onHover: function(element, dropon, overlap) {
|
||||||
|
if(Element.isParent(dropon, element)) return;
|
||||||
|
|
||||||
|
if(overlap > .33 && overlap < .66 && Sortable.options(dropon).tree) {
|
||||||
|
return;
|
||||||
|
} else if(overlap>0.5) {
|
||||||
|
Sortable.mark(dropon, 'before');
|
||||||
|
if(dropon.previousSibling != element) {
|
||||||
|
var oldParentNode = element.parentNode;
|
||||||
|
element.style.visibility = "hidden"; // fix gecko rendering
|
||||||
|
dropon.parentNode.insertBefore(element, dropon);
|
||||||
|
if(dropon.parentNode!=oldParentNode)
|
||||||
|
Sortable.options(oldParentNode).onChange(element);
|
||||||
|
Sortable.options(dropon.parentNode).onChange(element);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
Sortable.mark(dropon, 'after');
|
||||||
|
var nextElement = dropon.nextSibling || null;
|
||||||
|
if(nextElement != element) {
|
||||||
|
var oldParentNode = element.parentNode;
|
||||||
|
element.style.visibility = "hidden"; // fix gecko rendering
|
||||||
|
dropon.parentNode.insertBefore(element, nextElement);
|
||||||
|
if(dropon.parentNode!=oldParentNode)
|
||||||
|
Sortable.options(oldParentNode).onChange(element);
|
||||||
|
Sortable.options(dropon.parentNode).onChange(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onEmptyHover: function(element, dropon, overlap) {
|
||||||
|
var oldParentNode = element.parentNode;
|
||||||
|
var droponOptions = Sortable.options(dropon);
|
||||||
|
|
||||||
|
if(!Element.isParent(dropon, element)) {
|
||||||
|
var index;
|
||||||
|
|
||||||
|
var children = Sortable.findElements(dropon, {tag: droponOptions.tag});
|
||||||
|
var child = null;
|
||||||
|
|
||||||
|
if(children) {
|
||||||
|
var offset = Element.offsetSize(dropon, droponOptions.overlap) * (1.0 - overlap);
|
||||||
|
|
||||||
|
for (index = 0; index < children.length; index += 1) {
|
||||||
|
if (offset - Element.offsetSize (children[index], droponOptions.overlap) >= 0) {
|
||||||
|
offset -= Element.offsetSize (children[index], droponOptions.overlap);
|
||||||
|
} else if (offset - (Element.offsetSize (children[index], droponOptions.overlap) / 2) >= 0) {
|
||||||
|
child = index + 1 < children.length ? children[index + 1] : null;
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
child = children[index];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
dropon.insertBefore(element, child);
|
||||||
|
|
||||||
|
Sortable.options(oldParentNode).onChange(element);
|
||||||
|
droponOptions.onChange(element);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
unmark: function() {
|
||||||
|
if(Sortable._marker) Element.hide(Sortable._marker);
|
||||||
|
},
|
||||||
|
|
||||||
|
mark: function(dropon, position) {
|
||||||
|
// mark on ghosting only
|
||||||
|
var sortable = Sortable.options(dropon.parentNode);
|
||||||
|
if(sortable && !sortable.ghosting) return;
|
||||||
|
|
||||||
|
if(!Sortable._marker) {
|
||||||
|
Sortable._marker = $('dropmarker') || document.createElement('DIV');
|
||||||
|
Element.hide(Sortable._marker);
|
||||||
|
Element.addClassName(Sortable._marker, 'dropmarker');
|
||||||
|
Sortable._marker.style.position = 'absolute';
|
||||||
|
document.getElementsByTagName("body").item(0).appendChild(Sortable._marker);
|
||||||
|
}
|
||||||
|
var offsets = Position.cumulativeOffset(dropon);
|
||||||
|
Sortable._marker.style.left = offsets[0] + 'px';
|
||||||
|
Sortable._marker.style.top = offsets[1] + 'px';
|
||||||
|
|
||||||
|
if(position=='after')
|
||||||
|
if(sortable.overlap == 'horizontal')
|
||||||
|
Sortable._marker.style.left = (offsets[0]+dropon.clientWidth) + 'px';
|
||||||
|
else
|
||||||
|
Sortable._marker.style.top = (offsets[1]+dropon.clientHeight) + 'px';
|
||||||
|
|
||||||
|
Element.show(Sortable._marker);
|
||||||
|
},
|
||||||
|
|
||||||
|
_tree: function(element, options, parent) {
|
||||||
|
var children = Sortable.findElements(element, options) || [];
|
||||||
|
|
||||||
|
for (var i = 0; i < children.length; ++i) {
|
||||||
|
var match = children[i].id.match(options.format);
|
||||||
|
|
||||||
|
if (!match) continue;
|
||||||
|
|
||||||
|
var child = {
|
||||||
|
id: encodeURIComponent(match ? match[1] : null),
|
||||||
|
element: element,
|
||||||
|
parent: parent,
|
||||||
|
children: new Array,
|
||||||
|
position: parent.children.length,
|
||||||
|
container: Sortable._findChildrenElement(children[i], options.treeTag.toUpperCase())
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Get the element containing the children and recurse over it */
|
||||||
|
if (child.container)
|
||||||
|
this._tree(child.container, options, child)
|
||||||
|
|
||||||
|
parent.children.push (child);
|
||||||
|
}
|
||||||
|
|
||||||
|
return parent;
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Finds the first element of the given tag type within a parent element.
|
||||||
|
Used for finding the first LI[ST] within a L[IST]I[TEM].*/
|
||||||
|
_findChildrenElement: function (element, containerTag) {
|
||||||
|
if (element && element.hasChildNodes)
|
||||||
|
for (var i = 0; i < element.childNodes.length; ++i)
|
||||||
|
if (element.childNodes[i].tagName == containerTag)
|
||||||
|
return element.childNodes[i];
|
||||||
|
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
tree: function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var sortableOptions = this.options(element);
|
||||||
|
var options = Object.extend({
|
||||||
|
tag: sortableOptions.tag,
|
||||||
|
treeTag: sortableOptions.treeTag,
|
||||||
|
only: sortableOptions.only,
|
||||||
|
name: element.id,
|
||||||
|
format: sortableOptions.format
|
||||||
|
}, arguments[1] || {});
|
||||||
|
|
||||||
|
var root = {
|
||||||
|
id: null,
|
||||||
|
parent: null,
|
||||||
|
children: new Array,
|
||||||
|
container: element,
|
||||||
|
position: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
return Sortable._tree (element, options, root);
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Construct a [i] index for a particular node */
|
||||||
|
_constructIndex: function(node) {
|
||||||
|
var index = '';
|
||||||
|
do {
|
||||||
|
if (node.id) index = '[' + node.position + ']' + index;
|
||||||
|
} while ((node = node.parent) != null);
|
||||||
|
return index;
|
||||||
|
},
|
||||||
|
|
||||||
|
sequence: function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var options = Object.extend(this.options(element), arguments[1] || {});
|
||||||
|
|
||||||
|
return $(this.findElements(element, options) || []).map( function(item) {
|
||||||
|
return item.id.match(options.format) ? item.id.match(options.format)[1] : '';
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
setSequence: function(element, new_sequence) {
|
||||||
|
element = $(element);
|
||||||
|
var options = Object.extend(this.options(element), arguments[2] || {});
|
||||||
|
|
||||||
|
var nodeMap = {};
|
||||||
|
this.findElements(element, options).each( function(n) {
|
||||||
|
if (n.id.match(options.format))
|
||||||
|
nodeMap[n.id.match(options.format)[1]] = [n, n.parentNode];
|
||||||
|
n.parentNode.removeChild(n);
|
||||||
|
});
|
||||||
|
|
||||||
|
new_sequence.each(function(ident) {
|
||||||
|
var n = nodeMap[ident];
|
||||||
|
if (n) {
|
||||||
|
n[1].appendChild(n[0]);
|
||||||
|
delete nodeMap[ident];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
serialize: function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var options = Object.extend(Sortable.options(element), arguments[1] || {});
|
||||||
|
var name = encodeURIComponent(
|
||||||
|
(arguments[1] && arguments[1].name) ? arguments[1].name : element.id);
|
||||||
|
|
||||||
|
if (options.tree) {
|
||||||
|
return Sortable.tree(element, arguments[1]).children.map( function (item) {
|
||||||
|
return [name + Sortable._constructIndex(item) + "=" +
|
||||||
|
encodeURIComponent(item.id)].concat(item.children.map(arguments.callee));
|
||||||
|
}).flatten().join('&');
|
||||||
|
} else {
|
||||||
|
return Sortable.sequence(element, arguments[1]).map( function(item) {
|
||||||
|
return name + "[]=" + encodeURIComponent(item);
|
||||||
|
}).join('&');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Returns true if child is contained within element */
|
||||||
|
Element.isParent = function(child, element) {
|
||||||
|
if (!child.parentNode || child == element) return false;
|
||||||
|
|
||||||
|
if (child.parentNode == element) return true;
|
||||||
|
|
||||||
|
return Element.isParent(child.parentNode, element);
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.findChildren = function(element, only, recursive, tagName) {
|
||||||
|
if(!element.hasChildNodes()) return null;
|
||||||
|
tagName = tagName.toUpperCase();
|
||||||
|
if(only) only = [only].flatten();
|
||||||
|
var elements = [];
|
||||||
|
$A(element.childNodes).each( function(e) {
|
||||||
|
if(e.tagName && e.tagName.toUpperCase()==tagName &&
|
||||||
|
(!only || (Element.classNames(e).detect(function(v) { return only.include(v) }))))
|
||||||
|
elements.push(e);
|
||||||
|
if(recursive) {
|
||||||
|
var grandchildren = Element.findChildren(e, only, recursive, tagName);
|
||||||
|
if(grandchildren) elements.push(grandchildren);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (elements.length>0 ? elements.flatten() : []);
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.offsetSize = function (element, type) {
|
||||||
|
if (type == 'vertical' || type == 'height')
|
||||||
|
return element.offsetHeight;
|
||||||
|
else
|
||||||
|
return element.offsetWidth;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,958 @@
|
||||||
|
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
// Contributors:
|
||||||
|
// Justin Palmer (http://encytemedia.com/)
|
||||||
|
// Mark Pilgrim (http://diveintomark.org/)
|
||||||
|
// Martin Bialasinki
|
||||||
|
//
|
||||||
|
// See scriptaculous.js for full license.
|
||||||
|
|
||||||
|
// converts rgb() and #xxx to #xxxxxx format,
|
||||||
|
// returns self (or first argument) if not convertable
|
||||||
|
String.prototype.parseColor = function() {
|
||||||
|
var color = '#';
|
||||||
|
if(this.slice(0,4) == 'rgb(') {
|
||||||
|
var cols = this.slice(4,this.length-1).split(',');
|
||||||
|
var i=0; do { color += parseInt(cols[i]).toColorPart() } while (++i<3);
|
||||||
|
} else {
|
||||||
|
if(this.slice(0,1) == '#') {
|
||||||
|
if(this.length==4) for(var i=1;i<4;i++) color += (this.charAt(i) + this.charAt(i)).toLowerCase();
|
||||||
|
if(this.length==7) color = this.toLowerCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return(color.length==7 ? color : (arguments[0] || this));
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
Element.collectTextNodes = function(element) {
|
||||||
|
return $A($(element).childNodes).collect( function(node) {
|
||||||
|
return (node.nodeType==3 ? node.nodeValue :
|
||||||
|
(node.hasChildNodes() ? Element.collectTextNodes(node) : ''));
|
||||||
|
}).flatten().join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.collectTextNodesIgnoreClass = function(element, className) {
|
||||||
|
return $A($(element).childNodes).collect( function(node) {
|
||||||
|
return (node.nodeType==3 ? node.nodeValue :
|
||||||
|
((node.hasChildNodes() && !Element.hasClassName(node,className)) ?
|
||||||
|
Element.collectTextNodesIgnoreClass(node, className) : ''));
|
||||||
|
}).flatten().join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.setContentZoom = function(element, percent) {
|
||||||
|
element = $(element);
|
||||||
|
Element.setStyle(element, {fontSize: (percent/100) + 'em'});
|
||||||
|
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.getOpacity = function(element){
|
||||||
|
var opacity;
|
||||||
|
if (opacity = Element.getStyle(element, 'opacity'))
|
||||||
|
return parseFloat(opacity);
|
||||||
|
if (opacity = (Element.getStyle(element, 'filter') || '').match(/alpha\(opacity=(.*)\)/))
|
||||||
|
if(opacity[1]) return parseFloat(opacity[1]) / 100;
|
||||||
|
return 1.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.setOpacity = function(element, value){
|
||||||
|
element= $(element);
|
||||||
|
if (value == 1){
|
||||||
|
Element.setStyle(element, { opacity:
|
||||||
|
(/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
|
||||||
|
0.999999 : null });
|
||||||
|
if(/MSIE/.test(navigator.userAgent))
|
||||||
|
Element.setStyle(element, {filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});
|
||||||
|
} else {
|
||||||
|
if(value < 0.00001) value = 0;
|
||||||
|
Element.setStyle(element, {opacity: value});
|
||||||
|
if(/MSIE/.test(navigator.userAgent))
|
||||||
|
Element.setStyle(element,
|
||||||
|
{ filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'') +
|
||||||
|
'alpha(opacity='+value*100+')' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.getInlineOpacity = function(element){
|
||||||
|
return $(element).style.opacity || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.childrenWithClassName = function(element, className, findFirst) {
|
||||||
|
var classNameRegExp = new RegExp("(^|\\s)" + className + "(\\s|$)");
|
||||||
|
var results = $A($(element).getElementsByTagName('*'))[findFirst ? 'detect' : 'select']( function(c) {
|
||||||
|
return (c.className && c.className.match(classNameRegExp));
|
||||||
|
});
|
||||||
|
if(!results) results = [];
|
||||||
|
return results;
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.forceRerendering = function(element) {
|
||||||
|
try {
|
||||||
|
element = $(element);
|
||||||
|
var n = document.createTextNode(' ');
|
||||||
|
element.appendChild(n);
|
||||||
|
element.removeChild(n);
|
||||||
|
} catch(e) { }
|
||||||
|
};
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
Array.prototype.call = function() {
|
||||||
|
var args = arguments;
|
||||||
|
this.each(function(f){ f.apply(this, args) });
|
||||||
|
}
|
||||||
|
|
||||||
|
/*--------------------------------------------------------------------------*/
|
||||||
|
|
||||||
|
var Effect = {
|
||||||
|
tagifyText: function(element) {
|
||||||
|
var tagifyStyle = 'position:relative';
|
||||||
|
if(/MSIE/.test(navigator.userAgent)) tagifyStyle += ';zoom:1';
|
||||||
|
element = $(element);
|
||||||
|
$A(element.childNodes).each( function(child) {
|
||||||
|
if(child.nodeType==3) {
|
||||||
|
child.nodeValue.toArray().each( function(character) {
|
||||||
|
element.insertBefore(
|
||||||
|
Builder.node('span',{style: tagifyStyle},
|
||||||
|
character == ' ' ? String.fromCharCode(160) : character),
|
||||||
|
child);
|
||||||
|
});
|
||||||
|
Element.remove(child);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
multiple: function(element, effect) {
|
||||||
|
var elements;
|
||||||
|
if(((typeof element == 'object') ||
|
||||||
|
(typeof element == 'function')) &&
|
||||||
|
(element.length))
|
||||||
|
elements = element;
|
||||||
|
else
|
||||||
|
elements = $(element).childNodes;
|
||||||
|
|
||||||
|
var options = Object.extend({
|
||||||
|
speed: 0.1,
|
||||||
|
delay: 0.0
|
||||||
|
}, arguments[2] || {});
|
||||||
|
var masterDelay = options.delay;
|
||||||
|
|
||||||
|
$A(elements).each( function(element, index) {
|
||||||
|
new effect(element, Object.extend(options, { delay: index * options.speed + masterDelay }));
|
||||||
|
});
|
||||||
|
},
|
||||||
|
PAIRS: {
|
||||||
|
'slide': ['SlideDown','SlideUp'],
|
||||||
|
'blind': ['BlindDown','BlindUp'],
|
||||||
|
'appear': ['Appear','Fade']
|
||||||
|
},
|
||||||
|
toggle: function(element, effect) {
|
||||||
|
element = $(element);
|
||||||
|
effect = (effect || 'appear').toLowerCase();
|
||||||
|
var options = Object.extend({
|
||||||
|
queue: { position:'end', scope:(element.id || 'global'), limit: 1 }
|
||||||
|
}, arguments[2] || {});
|
||||||
|
Effect[element.visible() ?
|
||||||
|
Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var Effect2 = Effect; // deprecated
|
||||||
|
|
||||||
|
/* ------------- transitions ------------- */
|
||||||
|
|
||||||
|
Effect.Transitions = {}
|
||||||
|
|
||||||
|
Effect.Transitions.linear = function(pos) {
|
||||||
|
return pos;
|
||||||
|
}
|
||||||
|
Effect.Transitions.sinoidal = function(pos) {
|
||||||
|
return (-Math.cos(pos*Math.PI)/2) + 0.5;
|
||||||
|
}
|
||||||
|
Effect.Transitions.reverse = function(pos) {
|
||||||
|
return 1-pos;
|
||||||
|
}
|
||||||
|
Effect.Transitions.flicker = function(pos) {
|
||||||
|
return ((-Math.cos(pos*Math.PI)/4) + 0.75) + Math.random()/4;
|
||||||
|
}
|
||||||
|
Effect.Transitions.wobble = function(pos) {
|
||||||
|
return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5;
|
||||||
|
}
|
||||||
|
Effect.Transitions.pulse = function(pos) {
|
||||||
|
return (Math.floor(pos*10) % 2 == 0 ?
|
||||||
|
(pos*10-Math.floor(pos*10)) : 1-(pos*10-Math.floor(pos*10)));
|
||||||
|
}
|
||||||
|
Effect.Transitions.none = function(pos) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
Effect.Transitions.full = function(pos) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ------------- core effects ------------- */
|
||||||
|
|
||||||
|
Effect.ScopedQueue = Class.create();
|
||||||
|
Object.extend(Object.extend(Effect.ScopedQueue.prototype, Enumerable), {
|
||||||
|
initialize: function() {
|
||||||
|
this.effects = [];
|
||||||
|
this.interval = null;
|
||||||
|
},
|
||||||
|
_each: function(iterator) {
|
||||||
|
this.effects._each(iterator);
|
||||||
|
},
|
||||||
|
add: function(effect) {
|
||||||
|
var timestamp = new Date().getTime();
|
||||||
|
|
||||||
|
var position = (typeof effect.options.queue == 'string') ?
|
||||||
|
effect.options.queue : effect.options.queue.position;
|
||||||
|
|
||||||
|
switch(position) {
|
||||||
|
case 'front':
|
||||||
|
// move unstarted effects after this effect
|
||||||
|
this.effects.findAll(function(e){ return e.state=='idle' }).each( function(e) {
|
||||||
|
e.startOn += effect.finishOn;
|
||||||
|
e.finishOn += effect.finishOn;
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'end':
|
||||||
|
// start effect after last queued effect has finished
|
||||||
|
timestamp = this.effects.pluck('finishOn').max() || timestamp;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
effect.startOn += timestamp;
|
||||||
|
effect.finishOn += timestamp;
|
||||||
|
|
||||||
|
if(!effect.options.queue.limit || (this.effects.length < effect.options.queue.limit))
|
||||||
|
this.effects.push(effect);
|
||||||
|
|
||||||
|
if(!this.interval)
|
||||||
|
this.interval = setInterval(this.loop.bind(this), 40);
|
||||||
|
},
|
||||||
|
remove: function(effect) {
|
||||||
|
this.effects = this.effects.reject(function(e) { return e==effect });
|
||||||
|
if(this.effects.length == 0) {
|
||||||
|
clearInterval(this.interval);
|
||||||
|
this.interval = null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loop: function() {
|
||||||
|
var timePos = new Date().getTime();
|
||||||
|
this.effects.invoke('loop', timePos);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Effect.Queues = {
|
||||||
|
instances: $H(),
|
||||||
|
get: function(queueName) {
|
||||||
|
if(typeof queueName != 'string') return queueName;
|
||||||
|
|
||||||
|
if(!this.instances[queueName])
|
||||||
|
this.instances[queueName] = new Effect.ScopedQueue();
|
||||||
|
|
||||||
|
return this.instances[queueName];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Effect.Queue = Effect.Queues.get('global');
|
||||||
|
|
||||||
|
Effect.DefaultOptions = {
|
||||||
|
transition: Effect.Transitions.sinoidal,
|
||||||
|
duration: 1.0, // seconds
|
||||||
|
fps: 25.0, // max. 25fps due to Effect.Queue implementation
|
||||||
|
sync: false, // true for combining
|
||||||
|
from: 0.0,
|
||||||
|
to: 1.0,
|
||||||
|
delay: 0.0,
|
||||||
|
queue: 'parallel'
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Base = function() {};
|
||||||
|
Effect.Base.prototype = {
|
||||||
|
position: null,
|
||||||
|
start: function(options) {
|
||||||
|
this.options = Object.extend(Object.extend({},Effect.DefaultOptions), options || {});
|
||||||
|
this.currentFrame = 0;
|
||||||
|
this.state = 'idle';
|
||||||
|
this.startOn = this.options.delay*1000;
|
||||||
|
this.finishOn = this.startOn + (this.options.duration*1000);
|
||||||
|
this.event('beforeStart');
|
||||||
|
if(!this.options.sync)
|
||||||
|
Effect.Queues.get(typeof this.options.queue == 'string' ?
|
||||||
|
'global' : this.options.queue.scope).add(this);
|
||||||
|
},
|
||||||
|
loop: function(timePos) {
|
||||||
|
if(timePos >= this.startOn) {
|
||||||
|
if(timePos >= this.finishOn) {
|
||||||
|
this.render(1.0);
|
||||||
|
this.cancel();
|
||||||
|
this.event('beforeFinish');
|
||||||
|
if(this.finish) this.finish();
|
||||||
|
this.event('afterFinish');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var pos = (timePos - this.startOn) / (this.finishOn - this.startOn);
|
||||||
|
var frame = Math.round(pos * this.options.fps * this.options.duration);
|
||||||
|
if(frame > this.currentFrame) {
|
||||||
|
this.render(pos);
|
||||||
|
this.currentFrame = frame;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render: function(pos) {
|
||||||
|
if(this.state == 'idle') {
|
||||||
|
this.state = 'running';
|
||||||
|
this.event('beforeSetup');
|
||||||
|
if(this.setup) this.setup();
|
||||||
|
this.event('afterSetup');
|
||||||
|
}
|
||||||
|
if(this.state == 'running') {
|
||||||
|
if(this.options.transition) pos = this.options.transition(pos);
|
||||||
|
pos *= (this.options.to-this.options.from);
|
||||||
|
pos += this.options.from;
|
||||||
|
this.position = pos;
|
||||||
|
this.event('beforeUpdate');
|
||||||
|
if(this.update) this.update(pos);
|
||||||
|
this.event('afterUpdate');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
cancel: function() {
|
||||||
|
if(!this.options.sync)
|
||||||
|
Effect.Queues.get(typeof this.options.queue == 'string' ?
|
||||||
|
'global' : this.options.queue.scope).remove(this);
|
||||||
|
this.state = 'finished';
|
||||||
|
},
|
||||||
|
event: function(eventName) {
|
||||||
|
if(this.options[eventName + 'Internal']) this.options[eventName + 'Internal'](this);
|
||||||
|
if(this.options[eventName]) this.options[eventName](this);
|
||||||
|
},
|
||||||
|
inspect: function() {
|
||||||
|
return '#<Effect:' + $H(this).inspect() + ',options:' + $H(this.options).inspect() + '>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Parallel = Class.create();
|
||||||
|
Object.extend(Object.extend(Effect.Parallel.prototype, Effect.Base.prototype), {
|
||||||
|
initialize: function(effects) {
|
||||||
|
this.effects = effects || [];
|
||||||
|
this.start(arguments[1]);
|
||||||
|
},
|
||||||
|
update: function(position) {
|
||||||
|
this.effects.invoke('render', position);
|
||||||
|
},
|
||||||
|
finish: function(position) {
|
||||||
|
this.effects.each( function(effect) {
|
||||||
|
effect.render(1.0);
|
||||||
|
effect.cancel();
|
||||||
|
effect.event('beforeFinish');
|
||||||
|
if(effect.finish) effect.finish(position);
|
||||||
|
effect.event('afterFinish');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Effect.Opacity = Class.create();
|
||||||
|
Object.extend(Object.extend(Effect.Opacity.prototype, Effect.Base.prototype), {
|
||||||
|
initialize: function(element) {
|
||||||
|
this.element = $(element);
|
||||||
|
// make this work on IE on elements without 'layout'
|
||||||
|
if(/MSIE/.test(navigator.userAgent) && (!this.element.hasLayout))
|
||||||
|
this.element.setStyle({zoom: 1});
|
||||||
|
var options = Object.extend({
|
||||||
|
from: this.element.getOpacity() || 0.0,
|
||||||
|
to: 1.0
|
||||||
|
}, arguments[1] || {});
|
||||||
|
this.start(options);
|
||||||
|
},
|
||||||
|
update: function(position) {
|
||||||
|
this.element.setOpacity(position);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Effect.Move = Class.create();
|
||||||
|
Object.extend(Object.extend(Effect.Move.prototype, Effect.Base.prototype), {
|
||||||
|
initialize: function(element) {
|
||||||
|
this.element = $(element);
|
||||||
|
var options = Object.extend({
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
mode: 'relative'
|
||||||
|
}, arguments[1] || {});
|
||||||
|
this.start(options);
|
||||||
|
},
|
||||||
|
setup: function() {
|
||||||
|
// Bug in Opera: Opera returns the "real" position of a static element or
|
||||||
|
// relative element that does not have top/left explicitly set.
|
||||||
|
// ==> Always set top and left for position relative elements in your stylesheets
|
||||||
|
// (to 0 if you do not need them)
|
||||||
|
this.element.makePositioned();
|
||||||
|
this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
|
||||||
|
this.originalTop = parseFloat(this.element.getStyle('top') || '0');
|
||||||
|
if(this.options.mode == 'absolute') {
|
||||||
|
// absolute movement, so we need to calc deltaX and deltaY
|
||||||
|
this.options.x = this.options.x - this.originalLeft;
|
||||||
|
this.options.y = this.options.y - this.originalTop;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: function(position) {
|
||||||
|
this.element.setStyle({
|
||||||
|
left: this.options.x * position + this.originalLeft + 'px',
|
||||||
|
top: this.options.y * position + this.originalTop + 'px'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// for backwards compatibility
|
||||||
|
Effect.MoveBy = function(element, toTop, toLeft) {
|
||||||
|
return new Effect.Move(element,
|
||||||
|
Object.extend({ x: toLeft, y: toTop }, arguments[3] || {}));
|
||||||
|
};
|
||||||
|
|
||||||
|
Effect.Scale = Class.create();
|
||||||
|
Object.extend(Object.extend(Effect.Scale.prototype, Effect.Base.prototype), {
|
||||||
|
initialize: function(element, percent) {
|
||||||
|
this.element = $(element)
|
||||||
|
var options = Object.extend({
|
||||||
|
scaleX: true,
|
||||||
|
scaleY: true,
|
||||||
|
scaleContent: true,
|
||||||
|
scaleFromCenter: false,
|
||||||
|
scaleMode: 'box', // 'box' or 'contents' or {} with provided values
|
||||||
|
scaleFrom: 100.0,
|
||||||
|
scaleTo: percent
|
||||||
|
}, arguments[2] || {});
|
||||||
|
this.start(options);
|
||||||
|
},
|
||||||
|
setup: function() {
|
||||||
|
this.restoreAfterFinish = this.options.restoreAfterFinish || false;
|
||||||
|
this.elementPositioning = this.element.getStyle('position');
|
||||||
|
|
||||||
|
this.originalStyle = {};
|
||||||
|
['top','left','width','height','fontSize'].each( function(k) {
|
||||||
|
this.originalStyle[k] = this.element.style[k];
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
this.originalTop = this.element.offsetTop;
|
||||||
|
this.originalLeft = this.element.offsetLeft;
|
||||||
|
|
||||||
|
var fontSize = this.element.getStyle('font-size') || '100%';
|
||||||
|
['em','px','%'].each( function(fontSizeType) {
|
||||||
|
if(fontSize.indexOf(fontSizeType)>0) {
|
||||||
|
this.fontSize = parseFloat(fontSize);
|
||||||
|
this.fontSizeType = fontSizeType;
|
||||||
|
}
|
||||||
|
}.bind(this));
|
||||||
|
|
||||||
|
this.factor = (this.options.scaleTo - this.options.scaleFrom)/100;
|
||||||
|
|
||||||
|
this.dims = null;
|
||||||
|
if(this.options.scaleMode=='box')
|
||||||
|
this.dims = [this.element.offsetHeight, this.element.offsetWidth];
|
||||||
|
if(/^content/.test(this.options.scaleMode))
|
||||||
|
this.dims = [this.element.scrollHeight, this.element.scrollWidth];
|
||||||
|
if(!this.dims)
|
||||||
|
this.dims = [this.options.scaleMode.originalHeight,
|
||||||
|
this.options.scaleMode.originalWidth];
|
||||||
|
},
|
||||||
|
update: function(position) {
|
||||||
|
var currentScale = (this.options.scaleFrom/100.0) + (this.factor * position);
|
||||||
|
if(this.options.scaleContent && this.fontSize)
|
||||||
|
this.element.setStyle({fontSize: this.fontSize * currentScale + this.fontSizeType });
|
||||||
|
this.setDimensions(this.dims[0] * currentScale, this.dims[1] * currentScale);
|
||||||
|
},
|
||||||
|
finish: function(position) {
|
||||||
|
if (this.restoreAfterFinish) this.element.setStyle(this.originalStyle);
|
||||||
|
},
|
||||||
|
setDimensions: function(height, width) {
|
||||||
|
var d = {};
|
||||||
|
if(this.options.scaleX) d.width = width + 'px';
|
||||||
|
if(this.options.scaleY) d.height = height + 'px';
|
||||||
|
if(this.options.scaleFromCenter) {
|
||||||
|
var topd = (height - this.dims[0])/2;
|
||||||
|
var leftd = (width - this.dims[1])/2;
|
||||||
|
if(this.elementPositioning == 'absolute') {
|
||||||
|
if(this.options.scaleY) d.top = this.originalTop-topd + 'px';
|
||||||
|
if(this.options.scaleX) d.left = this.originalLeft-leftd + 'px';
|
||||||
|
} else {
|
||||||
|
if(this.options.scaleY) d.top = -topd + 'px';
|
||||||
|
if(this.options.scaleX) d.left = -leftd + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.element.setStyle(d);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Effect.Highlight = Class.create();
|
||||||
|
Object.extend(Object.extend(Effect.Highlight.prototype, Effect.Base.prototype), {
|
||||||
|
initialize: function(element) {
|
||||||
|
this.element = $(element);
|
||||||
|
var options = Object.extend({ startcolor: '#ffff99' }, arguments[1] || {});
|
||||||
|
this.start(options);
|
||||||
|
},
|
||||||
|
setup: function() {
|
||||||
|
// Prevent executing on elements not in the layout flow
|
||||||
|
if(this.element.getStyle('display')=='none') { this.cancel(); return; }
|
||||||
|
// Disable background image during the effect
|
||||||
|
this.oldStyle = {
|
||||||
|
backgroundImage: this.element.getStyle('background-image') };
|
||||||
|
this.element.setStyle({backgroundImage: 'none'});
|
||||||
|
if(!this.options.endcolor)
|
||||||
|
this.options.endcolor = this.element.getStyle('background-color').parseColor('#ffffff');
|
||||||
|
if(!this.options.restorecolor)
|
||||||
|
this.options.restorecolor = this.element.getStyle('background-color');
|
||||||
|
// init color calculations
|
||||||
|
this._base = $R(0,2).map(function(i){ return parseInt(this.options.startcolor.slice(i*2+1,i*2+3),16) }.bind(this));
|
||||||
|
this._delta = $R(0,2).map(function(i){ return parseInt(this.options.endcolor.slice(i*2+1,i*2+3),16)-this._base[i] }.bind(this));
|
||||||
|
},
|
||||||
|
update: function(position) {
|
||||||
|
this.element.setStyle({backgroundColor: $R(0,2).inject('#',function(m,v,i){
|
||||||
|
return m+(Math.round(this._base[i]+(this._delta[i]*position)).toColorPart()); }.bind(this)) });
|
||||||
|
},
|
||||||
|
finish: function() {
|
||||||
|
this.element.setStyle(Object.extend(this.oldStyle, {
|
||||||
|
backgroundColor: this.options.restorecolor
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
Effect.ScrollTo = Class.create();
|
||||||
|
Object.extend(Object.extend(Effect.ScrollTo.prototype, Effect.Base.prototype), {
|
||||||
|
initialize: function(element) {
|
||||||
|
this.element = $(element);
|
||||||
|
this.start(arguments[1] || {});
|
||||||
|
},
|
||||||
|
setup: function() {
|
||||||
|
Position.prepare();
|
||||||
|
var offsets = Position.cumulativeOffset(this.element);
|
||||||
|
if(this.options.offset) offsets[1] += this.options.offset;
|
||||||
|
var max = window.innerHeight ?
|
||||||
|
window.height - window.innerHeight :
|
||||||
|
document.body.scrollHeight -
|
||||||
|
(document.documentElement.clientHeight ?
|
||||||
|
document.documentElement.clientHeight : document.body.clientHeight);
|
||||||
|
this.scrollStart = Position.deltaY;
|
||||||
|
this.delta = (offsets[1] > max ? max : offsets[1]) - this.scrollStart;
|
||||||
|
},
|
||||||
|
update: function(position) {
|
||||||
|
Position.prepare();
|
||||||
|
window.scrollTo(Position.deltaX,
|
||||||
|
this.scrollStart + (position*this.delta));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ------------- combination effects ------------- */
|
||||||
|
|
||||||
|
Effect.Fade = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var oldOpacity = element.getInlineOpacity();
|
||||||
|
var options = Object.extend({
|
||||||
|
from: element.getOpacity() || 1.0,
|
||||||
|
to: 0.0,
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
if(effect.options.to!=0) return;
|
||||||
|
effect.element.hide();
|
||||||
|
effect.element.setStyle({opacity: oldOpacity});
|
||||||
|
}}, arguments[1] || {});
|
||||||
|
return new Effect.Opacity(element,options);
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Appear = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var options = Object.extend({
|
||||||
|
from: (element.getStyle('display') == 'none' ? 0.0 : element.getOpacity() || 0.0),
|
||||||
|
to: 1.0,
|
||||||
|
// force Safari to render floated elements properly
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.element.forceRerendering();
|
||||||
|
},
|
||||||
|
beforeSetup: function(effect) {
|
||||||
|
effect.element.setOpacity(effect.options.from);
|
||||||
|
effect.element.show();
|
||||||
|
}}, arguments[1] || {});
|
||||||
|
return new Effect.Opacity(element,options);
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Puff = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var oldStyle = { opacity: element.getInlineOpacity(), position: element.getStyle('position') };
|
||||||
|
return new Effect.Parallel(
|
||||||
|
[ new Effect.Scale(element, 200,
|
||||||
|
{ sync: true, scaleFromCenter: true, scaleContent: true, restoreAfterFinish: true }),
|
||||||
|
new Effect.Opacity(element, { sync: true, to: 0.0 } ) ],
|
||||||
|
Object.extend({ duration: 1.0,
|
||||||
|
beforeSetupInternal: function(effect) {
|
||||||
|
effect.effects[0].element.setStyle({position: 'absolute'}); },
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.effects[0].element.hide();
|
||||||
|
effect.effects[0].element.setStyle(oldStyle); }
|
||||||
|
}, arguments[1] || {})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.BlindUp = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
element.makeClipping();
|
||||||
|
return new Effect.Scale(element, 0,
|
||||||
|
Object.extend({ scaleContent: false,
|
||||||
|
scaleX: false,
|
||||||
|
restoreAfterFinish: true,
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.element.hide();
|
||||||
|
effect.element.undoClipping();
|
||||||
|
}
|
||||||
|
}, arguments[1] || {})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.BlindDown = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var elementDimensions = element.getDimensions();
|
||||||
|
return new Effect.Scale(element, 100,
|
||||||
|
Object.extend({ scaleContent: false,
|
||||||
|
scaleX: false,
|
||||||
|
scaleFrom: 0,
|
||||||
|
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
||||||
|
restoreAfterFinish: true,
|
||||||
|
afterSetup: function(effect) {
|
||||||
|
effect.element.makeClipping();
|
||||||
|
effect.element.setStyle({height: '0px'});
|
||||||
|
effect.element.show();
|
||||||
|
},
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.element.undoClipping();
|
||||||
|
}
|
||||||
|
}, arguments[1] || {})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.SwitchOff = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var oldOpacity = element.getInlineOpacity();
|
||||||
|
return new Effect.Appear(element, {
|
||||||
|
duration: 0.4,
|
||||||
|
from: 0,
|
||||||
|
transition: Effect.Transitions.flicker,
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
new Effect.Scale(effect.element, 1, {
|
||||||
|
duration: 0.3, scaleFromCenter: true,
|
||||||
|
scaleX: false, scaleContent: false, restoreAfterFinish: true,
|
||||||
|
beforeSetup: function(effect) {
|
||||||
|
effect.element.makePositioned();
|
||||||
|
effect.element.makeClipping();
|
||||||
|
},
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.element.hide();
|
||||||
|
effect.element.undoClipping();
|
||||||
|
effect.element.undoPositioned();
|
||||||
|
effect.element.setStyle({opacity: oldOpacity});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.DropOut = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var oldStyle = {
|
||||||
|
top: element.getStyle('top'),
|
||||||
|
left: element.getStyle('left'),
|
||||||
|
opacity: element.getInlineOpacity() };
|
||||||
|
return new Effect.Parallel(
|
||||||
|
[ new Effect.Move(element, {x: 0, y: 100, sync: true }),
|
||||||
|
new Effect.Opacity(element, { sync: true, to: 0.0 }) ],
|
||||||
|
Object.extend(
|
||||||
|
{ duration: 0.5,
|
||||||
|
beforeSetup: function(effect) {
|
||||||
|
effect.effects[0].element.makePositioned();
|
||||||
|
},
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.effects[0].element.hide();
|
||||||
|
effect.effects[0].element.undoPositioned();
|
||||||
|
effect.effects[0].element.setStyle(oldStyle);
|
||||||
|
}
|
||||||
|
}, arguments[1] || {}));
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Shake = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var oldStyle = {
|
||||||
|
top: element.getStyle('top'),
|
||||||
|
left: element.getStyle('left') };
|
||||||
|
return new Effect.Move(element,
|
||||||
|
{ x: 20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
|
||||||
|
new Effect.Move(effect.element,
|
||||||
|
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
||||||
|
new Effect.Move(effect.element,
|
||||||
|
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
||||||
|
new Effect.Move(effect.element,
|
||||||
|
{ x: -40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
||||||
|
new Effect.Move(effect.element,
|
||||||
|
{ x: 40, y: 0, duration: 0.1, afterFinishInternal: function(effect) {
|
||||||
|
new Effect.Move(effect.element,
|
||||||
|
{ x: -20, y: 0, duration: 0.05, afterFinishInternal: function(effect) {
|
||||||
|
effect.element.undoPositioned();
|
||||||
|
effect.element.setStyle(oldStyle);
|
||||||
|
}}) }}) }}) }}) }}) }});
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.SlideDown = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
element.cleanWhitespace();
|
||||||
|
// SlideDown need to have the content of the element wrapped in a container element with fixed height!
|
||||||
|
var oldInnerBottom = $(element.firstChild).getStyle('bottom');
|
||||||
|
var elementDimensions = element.getDimensions();
|
||||||
|
return new Effect.Scale(element, 100, Object.extend({
|
||||||
|
scaleContent: false,
|
||||||
|
scaleX: false,
|
||||||
|
scaleFrom: window.opera ? 0 : 1,
|
||||||
|
scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
|
||||||
|
restoreAfterFinish: true,
|
||||||
|
afterSetup: function(effect) {
|
||||||
|
effect.element.makePositioned();
|
||||||
|
effect.element.firstChild.makePositioned();
|
||||||
|
if(window.opera) effect.element.setStyle({top: ''});
|
||||||
|
effect.element.makeClipping();
|
||||||
|
effect.element.setStyle({height: '0px'});
|
||||||
|
effect.element.show(); },
|
||||||
|
afterUpdateInternal: function(effect) {
|
||||||
|
effect.element.firstChild.setStyle({bottom:
|
||||||
|
(effect.dims[0] - effect.element.clientHeight) + 'px' });
|
||||||
|
},
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.element.undoClipping();
|
||||||
|
// IE will crash if child is undoPositioned first
|
||||||
|
if(/MSIE/.test(navigator.userAgent)){
|
||||||
|
effect.element.undoPositioned();
|
||||||
|
effect.element.firstChild.undoPositioned();
|
||||||
|
}else{
|
||||||
|
effect.element.firstChild.undoPositioned();
|
||||||
|
effect.element.undoPositioned();
|
||||||
|
}
|
||||||
|
effect.element.firstChild.setStyle({bottom: oldInnerBottom}); }
|
||||||
|
}, arguments[1] || {})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.SlideUp = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
element.cleanWhitespace();
|
||||||
|
var oldInnerBottom = $(element.firstChild).getStyle('bottom');
|
||||||
|
return new Effect.Scale(element, window.opera ? 0 : 1,
|
||||||
|
Object.extend({ scaleContent: false,
|
||||||
|
scaleX: false,
|
||||||
|
scaleMode: 'box',
|
||||||
|
scaleFrom: 100,
|
||||||
|
restoreAfterFinish: true,
|
||||||
|
beforeStartInternal: function(effect) {
|
||||||
|
effect.element.makePositioned();
|
||||||
|
effect.element.firstChild.makePositioned();
|
||||||
|
if(window.opera) effect.element.setStyle({top: ''});
|
||||||
|
effect.element.makeClipping();
|
||||||
|
effect.element.show(); },
|
||||||
|
afterUpdateInternal: function(effect) {
|
||||||
|
effect.element.firstChild.setStyle({bottom:
|
||||||
|
(effect.dims[0] - effect.element.clientHeight) + 'px' }); },
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.element.hide();
|
||||||
|
effect.element.undoClipping();
|
||||||
|
effect.element.firstChild.undoPositioned();
|
||||||
|
effect.element.undoPositioned();
|
||||||
|
effect.element.setStyle({bottom: oldInnerBottom}); }
|
||||||
|
}, arguments[1] || {})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bug in opera makes the TD containing this element expand for a instance after finish
|
||||||
|
Effect.Squish = function(element) {
|
||||||
|
return new Effect.Scale(element, window.opera ? 1 : 0,
|
||||||
|
{ restoreAfterFinish: true,
|
||||||
|
beforeSetup: function(effect) {
|
||||||
|
effect.element.makeClipping(effect.element); },
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.element.hide(effect.element);
|
||||||
|
effect.element.undoClipping(effect.element); }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Grow = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var options = Object.extend({
|
||||||
|
direction: 'center',
|
||||||
|
moveTransition: Effect.Transitions.sinoidal,
|
||||||
|
scaleTransition: Effect.Transitions.sinoidal,
|
||||||
|
opacityTransition: Effect.Transitions.full
|
||||||
|
}, arguments[1] || {});
|
||||||
|
var oldStyle = {
|
||||||
|
top: element.style.top,
|
||||||
|
left: element.style.left,
|
||||||
|
height: element.style.height,
|
||||||
|
width: element.style.width,
|
||||||
|
opacity: element.getInlineOpacity() };
|
||||||
|
|
||||||
|
var dims = element.getDimensions();
|
||||||
|
var initialMoveX, initialMoveY;
|
||||||
|
var moveX, moveY;
|
||||||
|
|
||||||
|
switch (options.direction) {
|
||||||
|
case 'top-left':
|
||||||
|
initialMoveX = initialMoveY = moveX = moveY = 0;
|
||||||
|
break;
|
||||||
|
case 'top-right':
|
||||||
|
initialMoveX = dims.width;
|
||||||
|
initialMoveY = moveY = 0;
|
||||||
|
moveX = -dims.width;
|
||||||
|
break;
|
||||||
|
case 'bottom-left':
|
||||||
|
initialMoveX = moveX = 0;
|
||||||
|
initialMoveY = dims.height;
|
||||||
|
moveY = -dims.height;
|
||||||
|
break;
|
||||||
|
case 'bottom-right':
|
||||||
|
initialMoveX = dims.width;
|
||||||
|
initialMoveY = dims.height;
|
||||||
|
moveX = -dims.width;
|
||||||
|
moveY = -dims.height;
|
||||||
|
break;
|
||||||
|
case 'center':
|
||||||
|
initialMoveX = dims.width / 2;
|
||||||
|
initialMoveY = dims.height / 2;
|
||||||
|
moveX = -dims.width / 2;
|
||||||
|
moveY = -dims.height / 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Effect.Move(element, {
|
||||||
|
x: initialMoveX,
|
||||||
|
y: initialMoveY,
|
||||||
|
duration: 0.01,
|
||||||
|
beforeSetup: function(effect) {
|
||||||
|
effect.element.hide();
|
||||||
|
effect.element.makeClipping();
|
||||||
|
effect.element.makePositioned();
|
||||||
|
},
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
new Effect.Parallel(
|
||||||
|
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
|
||||||
|
new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
|
||||||
|
new Effect.Scale(effect.element, 100, {
|
||||||
|
scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
|
||||||
|
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
|
||||||
|
], Object.extend({
|
||||||
|
beforeSetup: function(effect) {
|
||||||
|
effect.effects[0].element.setStyle({height: '0px'});
|
||||||
|
effect.effects[0].element.show();
|
||||||
|
},
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.effects[0].element.undoClipping();
|
||||||
|
effect.effects[0].element.undoPositioned();
|
||||||
|
effect.effects[0].element.setStyle(oldStyle);
|
||||||
|
}
|
||||||
|
}, options)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Shrink = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var options = Object.extend({
|
||||||
|
direction: 'center',
|
||||||
|
moveTransition: Effect.Transitions.sinoidal,
|
||||||
|
scaleTransition: Effect.Transitions.sinoidal,
|
||||||
|
opacityTransition: Effect.Transitions.none
|
||||||
|
}, arguments[1] || {});
|
||||||
|
var oldStyle = {
|
||||||
|
top: element.style.top,
|
||||||
|
left: element.style.left,
|
||||||
|
height: element.style.height,
|
||||||
|
width: element.style.width,
|
||||||
|
opacity: element.getInlineOpacity() };
|
||||||
|
|
||||||
|
var dims = element.getDimensions();
|
||||||
|
var moveX, moveY;
|
||||||
|
|
||||||
|
switch (options.direction) {
|
||||||
|
case 'top-left':
|
||||||
|
moveX = moveY = 0;
|
||||||
|
break;
|
||||||
|
case 'top-right':
|
||||||
|
moveX = dims.width;
|
||||||
|
moveY = 0;
|
||||||
|
break;
|
||||||
|
case 'bottom-left':
|
||||||
|
moveX = 0;
|
||||||
|
moveY = dims.height;
|
||||||
|
break;
|
||||||
|
case 'bottom-right':
|
||||||
|
moveX = dims.width;
|
||||||
|
moveY = dims.height;
|
||||||
|
break;
|
||||||
|
case 'center':
|
||||||
|
moveX = dims.width / 2;
|
||||||
|
moveY = dims.height / 2;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Effect.Parallel(
|
||||||
|
[ new Effect.Opacity(element, { sync: true, to: 0.0, from: 1.0, transition: options.opacityTransition }),
|
||||||
|
new Effect.Scale(element, window.opera ? 1 : 0, { sync: true, transition: options.scaleTransition, restoreAfterFinish: true}),
|
||||||
|
new Effect.Move(element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition })
|
||||||
|
], Object.extend({
|
||||||
|
beforeStartInternal: function(effect) {
|
||||||
|
effect.effects[0].element.makePositioned();
|
||||||
|
effect.effects[0].element.makeClipping(); },
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.effects[0].element.hide();
|
||||||
|
effect.effects[0].element.undoClipping();
|
||||||
|
effect.effects[0].element.undoPositioned();
|
||||||
|
effect.effects[0].element.setStyle(oldStyle); }
|
||||||
|
}, options)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Pulsate = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var options = arguments[1] || {};
|
||||||
|
var oldOpacity = element.getInlineOpacity();
|
||||||
|
var transition = options.transition || Effect.Transitions.sinoidal;
|
||||||
|
var reverser = function(pos){ return transition(1-Effect.Transitions.pulse(pos)) };
|
||||||
|
reverser.bind(transition);
|
||||||
|
return new Effect.Opacity(element,
|
||||||
|
Object.extend(Object.extend({ duration: 3.0, from: 0,
|
||||||
|
afterFinishInternal: function(effect) { effect.element.setStyle({opacity: oldOpacity}); }
|
||||||
|
}, options), {transition: reverser}));
|
||||||
|
}
|
||||||
|
|
||||||
|
Effect.Fold = function(element) {
|
||||||
|
element = $(element);
|
||||||
|
var oldStyle = {
|
||||||
|
top: element.style.top,
|
||||||
|
left: element.style.left,
|
||||||
|
width: element.style.width,
|
||||||
|
height: element.style.height };
|
||||||
|
Element.makeClipping(element);
|
||||||
|
return new Effect.Scale(element, 5, Object.extend({
|
||||||
|
scaleContent: false,
|
||||||
|
scaleX: false,
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
new Effect.Scale(element, 1, {
|
||||||
|
scaleContent: false,
|
||||||
|
scaleY: false,
|
||||||
|
afterFinishInternal: function(effect) {
|
||||||
|
effect.element.hide();
|
||||||
|
effect.element.undoClipping();
|
||||||
|
effect.element.setStyle(oldStyle);
|
||||||
|
} });
|
||||||
|
}}, arguments[1] || {}));
|
||||||
|
};
|
||||||
|
|
||||||
|
['setOpacity','getOpacity','getInlineOpacity','forceRerendering','setContentZoom',
|
||||||
|
'collectTextNodes','collectTextNodesIgnoreClass','childrenWithClassName'].each(
|
||||||
|
function(f) { Element.Methods[f] = Element[f]; }
|
||||||
|
);
|
||||||
|
|
||||||
|
Element.Methods.visualEffect = function(element, effect, options) {
|
||||||
|
s = effect.gsub(/_/, '-').camelize();
|
||||||
|
effect_class = s.charAt(0).toUpperCase() + s.substring(1);
|
||||||
|
new Effect[effect_class](element, options);
|
||||||
|
return $(element);
|
||||||
|
};
|
||||||
|
|
||||||
|
Element.addMethods();
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,47 @@
|
||||||
|
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
//
|
||||||
|
// Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
// a copy of this software and associated documentation files (the
|
||||||
|
// "Software"), to deal in the Software without restriction, including
|
||||||
|
// without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
// permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
// the following conditions:
|
||||||
|
//
|
||||||
|
// The above copyright notice and this permission notice shall be
|
||||||
|
// included in all copies or substantial portions of the Software.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
|
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||||
|
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||||
|
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||||
|
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
||||||
|
var Scriptaculous = {
|
||||||
|
Version: '1.6.1',
|
||||||
|
require: function(libraryName) {
|
||||||
|
// inserting via DOM fails in Safari 2.0, so brute force approach
|
||||||
|
document.write('<script type="text/javascript" src="'+libraryName+'"></script>');
|
||||||
|
},
|
||||||
|
load: function() {
|
||||||
|
if((typeof Prototype=='undefined') ||
|
||||||
|
(typeof Element == 'undefined') ||
|
||||||
|
(typeof Element.Methods=='undefined') ||
|
||||||
|
parseFloat(Prototype.Version.split(".")[0] + "." +
|
||||||
|
Prototype.Version.split(".")[1]) < 1.5)
|
||||||
|
throw("script.aculo.us requires the Prototype JavaScript framework >= 1.5.0");
|
||||||
|
|
||||||
|
$A(document.getElementsByTagName("script")).findAll( function(s) {
|
||||||
|
return (s.src && s.src.match(/scriptaculous\.js(\?.*)?$/))
|
||||||
|
}).each( function(s) {
|
||||||
|
var path = s.src.replace(/scriptaculous\.js(\?.*)?$/,'');
|
||||||
|
var includes = s.src.match(/\?.*load=([a-z,]*)/);
|
||||||
|
(includes ? includes[1] : 'builder,effects,dragdrop,controls,slider').split(',').each(
|
||||||
|
function(include) { Scriptaculous.require(path+include+'.js') });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Scriptaculous.load();
|
||||||
|
|
@ -0,0 +1,283 @@
|
||||||
|
// Copyright (c) 2005 Marty Haught, Thomas Fuchs
|
||||||
|
//
|
||||||
|
// See http://script.aculo.us for more info
|
||||||
|
//
|
||||||
|
// Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
// a copy of this software and associated documentation files (the
|
||||||
|
// "Software"), to deal in the Software without restriction, including
|
||||||
|
// without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
// permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
// the following conditions:
|
||||||
|
//
|
||||||
|
// The above copyright notice and this permission notice shall be
|
||||||
|
// included in all copies or substantial portions of the Software.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
|
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||||
|
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||||
|
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||||
|
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
||||||
|
if(!Control) var Control = {};
|
||||||
|
Control.Slider = Class.create();
|
||||||
|
|
||||||
|
// options:
|
||||||
|
// axis: 'vertical', or 'horizontal' (default)
|
||||||
|
//
|
||||||
|
// callbacks:
|
||||||
|
// onChange(value)
|
||||||
|
// onSlide(value)
|
||||||
|
Control.Slider.prototype = {
|
||||||
|
initialize: function(handle, track, options) {
|
||||||
|
var slider = this;
|
||||||
|
|
||||||
|
if(handle instanceof Array) {
|
||||||
|
this.handles = handle.collect( function(e) { return $(e) });
|
||||||
|
} else {
|
||||||
|
this.handles = [$(handle)];
|
||||||
|
}
|
||||||
|
|
||||||
|
this.track = $(track);
|
||||||
|
this.options = options || {};
|
||||||
|
|
||||||
|
this.axis = this.options.axis || 'horizontal';
|
||||||
|
this.increment = this.options.increment || 1;
|
||||||
|
this.step = parseInt(this.options.step || '1');
|
||||||
|
this.range = this.options.range || $R(0,1);
|
||||||
|
|
||||||
|
this.value = 0; // assure backwards compat
|
||||||
|
this.values = this.handles.map( function() { return 0 });
|
||||||
|
this.spans = this.options.spans ? this.options.spans.map(function(s){ return $(s) }) : false;
|
||||||
|
this.options.startSpan = $(this.options.startSpan || null);
|
||||||
|
this.options.endSpan = $(this.options.endSpan || null);
|
||||||
|
|
||||||
|
this.restricted = this.options.restricted || false;
|
||||||
|
|
||||||
|
this.maximum = this.options.maximum || this.range.end;
|
||||||
|
this.minimum = this.options.minimum || this.range.start;
|
||||||
|
|
||||||
|
// Will be used to align the handle onto the track, if necessary
|
||||||
|
this.alignX = parseInt(this.options.alignX || '0');
|
||||||
|
this.alignY = parseInt(this.options.alignY || '0');
|
||||||
|
|
||||||
|
this.trackLength = this.maximumOffset() - this.minimumOffset();
|
||||||
|
this.handleLength = this.isVertical() ? this.handles[0].offsetHeight : this.handles[0].offsetWidth;
|
||||||
|
|
||||||
|
this.active = false;
|
||||||
|
this.dragging = false;
|
||||||
|
this.disabled = false;
|
||||||
|
|
||||||
|
if(this.options.disabled) this.setDisabled();
|
||||||
|
|
||||||
|
// Allowed values array
|
||||||
|
this.allowedValues = this.options.values ? this.options.values.sortBy(Prototype.K) : false;
|
||||||
|
if(this.allowedValues) {
|
||||||
|
this.minimum = this.allowedValues.min();
|
||||||
|
this.maximum = this.allowedValues.max();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.eventMouseDown = this.startDrag.bindAsEventListener(this);
|
||||||
|
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
|
||||||
|
this.eventMouseMove = this.update.bindAsEventListener(this);
|
||||||
|
|
||||||
|
// Initialize handles in reverse (make sure first handle is active)
|
||||||
|
this.handles.each( function(h,i) {
|
||||||
|
i = slider.handles.length-1-i;
|
||||||
|
slider.setValue(parseFloat(
|
||||||
|
(slider.options.sliderValue instanceof Array ?
|
||||||
|
slider.options.sliderValue[i] : slider.options.sliderValue) ||
|
||||||
|
slider.range.start), i);
|
||||||
|
Element.makePositioned(h); // fix IE
|
||||||
|
Event.observe(h, "mousedown", slider.eventMouseDown);
|
||||||
|
});
|
||||||
|
|
||||||
|
Event.observe(this.track, "mousedown", this.eventMouseDown);
|
||||||
|
Event.observe(document, "mouseup", this.eventMouseUp);
|
||||||
|
Event.observe(document, "mousemove", this.eventMouseMove);
|
||||||
|
|
||||||
|
this.initialized = true;
|
||||||
|
},
|
||||||
|
dispose: function() {
|
||||||
|
var slider = this;
|
||||||
|
Event.stopObserving(this.track, "mousedown", this.eventMouseDown);
|
||||||
|
Event.stopObserving(document, "mouseup", this.eventMouseUp);
|
||||||
|
Event.stopObserving(document, "mousemove", this.eventMouseMove);
|
||||||
|
this.handles.each( function(h) {
|
||||||
|
Event.stopObserving(h, "mousedown", slider.eventMouseDown);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setDisabled: function(){
|
||||||
|
this.disabled = true;
|
||||||
|
},
|
||||||
|
setEnabled: function(){
|
||||||
|
this.disabled = false;
|
||||||
|
},
|
||||||
|
getNearestValue: function(value){
|
||||||
|
if(this.allowedValues){
|
||||||
|
if(value >= this.allowedValues.max()) return(this.allowedValues.max());
|
||||||
|
if(value <= this.allowedValues.min()) return(this.allowedValues.min());
|
||||||
|
|
||||||
|
var offset = Math.abs(this.allowedValues[0] - value);
|
||||||
|
var newValue = this.allowedValues[0];
|
||||||
|
this.allowedValues.each( function(v) {
|
||||||
|
var currentOffset = Math.abs(v - value);
|
||||||
|
if(currentOffset <= offset){
|
||||||
|
newValue = v;
|
||||||
|
offset = currentOffset;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return newValue;
|
||||||
|
}
|
||||||
|
if(value > this.range.end) return this.range.end;
|
||||||
|
if(value < this.range.start) return this.range.start;
|
||||||
|
return value;
|
||||||
|
},
|
||||||
|
setValue: function(sliderValue, handleIdx){
|
||||||
|
if(!this.active) {
|
||||||
|
this.activeHandle = this.handles[handleIdx];
|
||||||
|
this.activeHandleIdx = handleIdx;
|
||||||
|
this.updateStyles();
|
||||||
|
}
|
||||||
|
handleIdx = handleIdx || this.activeHandleIdx || 0;
|
||||||
|
if(this.initialized && this.restricted) {
|
||||||
|
if((handleIdx>0) && (sliderValue<this.values[handleIdx-1]))
|
||||||
|
sliderValue = this.values[handleIdx-1];
|
||||||
|
if((handleIdx < (this.handles.length-1)) && (sliderValue>this.values[handleIdx+1]))
|
||||||
|
sliderValue = this.values[handleIdx+1];
|
||||||
|
}
|
||||||
|
sliderValue = this.getNearestValue(sliderValue);
|
||||||
|
this.values[handleIdx] = sliderValue;
|
||||||
|
this.value = this.values[0]; // assure backwards compat
|
||||||
|
|
||||||
|
this.handles[handleIdx].style[this.isVertical() ? 'top' : 'left'] =
|
||||||
|
this.translateToPx(sliderValue);
|
||||||
|
|
||||||
|
this.drawSpans();
|
||||||
|
if(!this.dragging || !this.event) this.updateFinished();
|
||||||
|
},
|
||||||
|
setValueBy: function(delta, handleIdx) {
|
||||||
|
this.setValue(this.values[handleIdx || this.activeHandleIdx || 0] + delta,
|
||||||
|
handleIdx || this.activeHandleIdx || 0);
|
||||||
|
},
|
||||||
|
translateToPx: function(value) {
|
||||||
|
return Math.round(
|
||||||
|
((this.trackLength-this.handleLength)/(this.range.end-this.range.start)) *
|
||||||
|
(value - this.range.start)) + "px";
|
||||||
|
},
|
||||||
|
translateToValue: function(offset) {
|
||||||
|
return ((offset/(this.trackLength-this.handleLength) *
|
||||||
|
(this.range.end-this.range.start)) + this.range.start);
|
||||||
|
},
|
||||||
|
getRange: function(range) {
|
||||||
|
var v = this.values.sortBy(Prototype.K);
|
||||||
|
range = range || 0;
|
||||||
|
return $R(v[range],v[range+1]);
|
||||||
|
},
|
||||||
|
minimumOffset: function(){
|
||||||
|
return(this.isVertical() ? this.alignY : this.alignX);
|
||||||
|
},
|
||||||
|
maximumOffset: function(){
|
||||||
|
return(this.isVertical() ?
|
||||||
|
this.track.offsetHeight - this.alignY : this.track.offsetWidth - this.alignX);
|
||||||
|
},
|
||||||
|
isVertical: function(){
|
||||||
|
return (this.axis == 'vertical');
|
||||||
|
},
|
||||||
|
drawSpans: function() {
|
||||||
|
var slider = this;
|
||||||
|
if(this.spans)
|
||||||
|
$R(0, this.spans.length-1).each(function(r) { slider.setSpan(slider.spans[r], slider.getRange(r)) });
|
||||||
|
if(this.options.startSpan)
|
||||||
|
this.setSpan(this.options.startSpan,
|
||||||
|
$R(0, this.values.length>1 ? this.getRange(0).min() : this.value ));
|
||||||
|
if(this.options.endSpan)
|
||||||
|
this.setSpan(this.options.endSpan,
|
||||||
|
$R(this.values.length>1 ? this.getRange(this.spans.length-1).max() : this.value, this.maximum));
|
||||||
|
},
|
||||||
|
setSpan: function(span, range) {
|
||||||
|
if(this.isVertical()) {
|
||||||
|
span.style.top = this.translateToPx(range.start);
|
||||||
|
span.style.height = this.translateToPx(range.end - range.start + this.range.start);
|
||||||
|
} else {
|
||||||
|
span.style.left = this.translateToPx(range.start);
|
||||||
|
span.style.width = this.translateToPx(range.end - range.start + this.range.start);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateStyles: function() {
|
||||||
|
this.handles.each( function(h){ Element.removeClassName(h, 'selected') });
|
||||||
|
Element.addClassName(this.activeHandle, 'selected');
|
||||||
|
},
|
||||||
|
startDrag: function(event) {
|
||||||
|
if(Event.isLeftClick(event)) {
|
||||||
|
if(!this.disabled){
|
||||||
|
this.active = true;
|
||||||
|
|
||||||
|
var handle = Event.element(event);
|
||||||
|
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||||
|
if(handle==this.track) {
|
||||||
|
var offsets = Position.cumulativeOffset(this.track);
|
||||||
|
this.event = event;
|
||||||
|
this.setValue(this.translateToValue(
|
||||||
|
(this.isVertical() ? pointer[1]-offsets[1] : pointer[0]-offsets[0])-(this.handleLength/2)
|
||||||
|
));
|
||||||
|
var offsets = Position.cumulativeOffset(this.activeHandle);
|
||||||
|
this.offsetX = (pointer[0] - offsets[0]);
|
||||||
|
this.offsetY = (pointer[1] - offsets[1]);
|
||||||
|
} else {
|
||||||
|
// find the handle (prevents issues with Safari)
|
||||||
|
while((this.handles.indexOf(handle) == -1) && handle.parentNode)
|
||||||
|
handle = handle.parentNode;
|
||||||
|
|
||||||
|
this.activeHandle = handle;
|
||||||
|
this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
|
||||||
|
this.updateStyles();
|
||||||
|
|
||||||
|
var offsets = Position.cumulativeOffset(this.activeHandle);
|
||||||
|
this.offsetX = (pointer[0] - offsets[0]);
|
||||||
|
this.offsetY = (pointer[1] - offsets[1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Event.stop(event);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: function(event) {
|
||||||
|
if(this.active) {
|
||||||
|
if(!this.dragging) this.dragging = true;
|
||||||
|
this.draw(event);
|
||||||
|
// fix AppleWebKit rendering
|
||||||
|
if(navigator.appVersion.indexOf('AppleWebKit')>0) window.scrollBy(0,0);
|
||||||
|
Event.stop(event);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
draw: function(event) {
|
||||||
|
var pointer = [Event.pointerX(event), Event.pointerY(event)];
|
||||||
|
var offsets = Position.cumulativeOffset(this.track);
|
||||||
|
pointer[0] -= this.offsetX + offsets[0];
|
||||||
|
pointer[1] -= this.offsetY + offsets[1];
|
||||||
|
this.event = event;
|
||||||
|
this.setValue(this.translateToValue( this.isVertical() ? pointer[1] : pointer[0] ));
|
||||||
|
if(this.initialized && this.options.onSlide)
|
||||||
|
this.options.onSlide(this.values.length>1 ? this.values : this.value, this);
|
||||||
|
},
|
||||||
|
endDrag: function(event) {
|
||||||
|
if(this.active && this.dragging) {
|
||||||
|
this.finishDrag(event, true);
|
||||||
|
Event.stop(event);
|
||||||
|
}
|
||||||
|
this.active = false;
|
||||||
|
this.dragging = false;
|
||||||
|
},
|
||||||
|
finishDrag: function(event, success) {
|
||||||
|
this.active = false;
|
||||||
|
this.dragging = false;
|
||||||
|
this.updateFinished();
|
||||||
|
},
|
||||||
|
updateFinished: function() {
|
||||||
|
if(this.initialized && this.options.onChange)
|
||||||
|
this.options.onChange(this.values.length>1 ? this.values : this.value, this);
|
||||||
|
this.event = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,383 @@
|
||||||
|
// Copyright (c) 2005 Thomas Fuchs (http://script.aculo.us, http://mir.aculo.us)
|
||||||
|
// (c) 2005 Jon Tirsen (http://www.tirsen.com)
|
||||||
|
// (c) 2005 Michael Schuerig (http://www.schuerig.de/michael/)
|
||||||
|
//
|
||||||
|
// Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
// a copy of this software and associated documentation files (the
|
||||||
|
// "Software"), to deal in the Software without restriction, including
|
||||||
|
// without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
// distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
// permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
// the following conditions:
|
||||||
|
//
|
||||||
|
// The above copyright notice and this permission notice shall be
|
||||||
|
// included in all copies or substantial portions of the Software.
|
||||||
|
//
|
||||||
|
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
|
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||||
|
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||||
|
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||||
|
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
|
|
||||||
|
|
||||||
|
// experimental, Firefox-only
|
||||||
|
Event.simulateMouse = function(element, eventName) {
|
||||||
|
var options = Object.extend({
|
||||||
|
pointerX: 0,
|
||||||
|
pointerY: 0,
|
||||||
|
buttons: 0
|
||||||
|
}, arguments[2] || {});
|
||||||
|
var oEvent = document.createEvent("MouseEvents");
|
||||||
|
oEvent.initMouseEvent(eventName, true, true, document.defaultView,
|
||||||
|
options.buttons, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
|
||||||
|
false, false, false, false, 0, $(element));
|
||||||
|
|
||||||
|
if(this.mark) Element.remove(this.mark);
|
||||||
|
this.mark = document.createElement('div');
|
||||||
|
this.mark.appendChild(document.createTextNode(" "));
|
||||||
|
document.body.appendChild(this.mark);
|
||||||
|
this.mark.style.position = 'absolute';
|
||||||
|
this.mark.style.top = options.pointerY + "px";
|
||||||
|
this.mark.style.left = options.pointerX + "px";
|
||||||
|
this.mark.style.width = "5px";
|
||||||
|
this.mark.style.height = "5px;";
|
||||||
|
this.mark.style.borderTop = "1px solid red;"
|
||||||
|
this.mark.style.borderLeft = "1px solid red;"
|
||||||
|
|
||||||
|
if(this.step)
|
||||||
|
alert('['+new Date().getTime().toString()+'] '+eventName+'/'+Test.Unit.inspect(options));
|
||||||
|
|
||||||
|
$(element).dispatchEvent(oEvent);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Note: Due to a fix in Firefox 1.0.5/6 that probably fixed "too much", this doesn't work in 1.0.6 or DP2.
|
||||||
|
// You need to downgrade to 1.0.4 for now to get this working
|
||||||
|
// See https://bugzilla.mozilla.org/show_bug.cgi?id=289940 for the fix that fixed too much
|
||||||
|
Event.simulateKey = function(element, eventName) {
|
||||||
|
var options = Object.extend({
|
||||||
|
ctrlKey: false,
|
||||||
|
altKey: false,
|
||||||
|
shiftKey: false,
|
||||||
|
metaKey: false,
|
||||||
|
keyCode: 0,
|
||||||
|
charCode: 0
|
||||||
|
}, arguments[2] || {});
|
||||||
|
|
||||||
|
var oEvent = document.createEvent("KeyEvents");
|
||||||
|
oEvent.initKeyEvent(eventName, true, true, window,
|
||||||
|
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey,
|
||||||
|
options.keyCode, options.charCode );
|
||||||
|
$(element).dispatchEvent(oEvent);
|
||||||
|
};
|
||||||
|
|
||||||
|
Event.simulateKeys = function(element, command) {
|
||||||
|
for(var i=0; i<command.length; i++) {
|
||||||
|
Event.simulateKey(element,'keypress',{charCode:command.charCodeAt(i)});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var Test = {}
|
||||||
|
Test.Unit = {};
|
||||||
|
|
||||||
|
// security exception workaround
|
||||||
|
Test.Unit.inspect = Object.inspect;
|
||||||
|
|
||||||
|
Test.Unit.Logger = Class.create();
|
||||||
|
Test.Unit.Logger.prototype = {
|
||||||
|
initialize: function(log) {
|
||||||
|
this.log = $(log);
|
||||||
|
if (this.log) {
|
||||||
|
this._createLogTable();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
start: function(testName) {
|
||||||
|
if (!this.log) return;
|
||||||
|
this.testName = testName;
|
||||||
|
this.lastLogLine = document.createElement('tr');
|
||||||
|
this.statusCell = document.createElement('td');
|
||||||
|
this.nameCell = document.createElement('td');
|
||||||
|
this.nameCell.appendChild(document.createTextNode(testName));
|
||||||
|
this.messageCell = document.createElement('td');
|
||||||
|
this.lastLogLine.appendChild(this.statusCell);
|
||||||
|
this.lastLogLine.appendChild(this.nameCell);
|
||||||
|
this.lastLogLine.appendChild(this.messageCell);
|
||||||
|
this.loglines.appendChild(this.lastLogLine);
|
||||||
|
},
|
||||||
|
finish: function(status, summary) {
|
||||||
|
if (!this.log) return;
|
||||||
|
this.lastLogLine.className = status;
|
||||||
|
this.statusCell.innerHTML = status;
|
||||||
|
this.messageCell.innerHTML = this._toHTML(summary);
|
||||||
|
},
|
||||||
|
message: function(message) {
|
||||||
|
if (!this.log) return;
|
||||||
|
this.messageCell.innerHTML = this._toHTML(message);
|
||||||
|
},
|
||||||
|
summary: function(summary) {
|
||||||
|
if (!this.log) return;
|
||||||
|
this.logsummary.innerHTML = this._toHTML(summary);
|
||||||
|
},
|
||||||
|
_createLogTable: function() {
|
||||||
|
this.log.innerHTML =
|
||||||
|
'<div id="logsummary"></div>' +
|
||||||
|
'<table id="logtable">' +
|
||||||
|
'<thead><tr><th>Status</th><th>Test</th><th>Message</th></tr></thead>' +
|
||||||
|
'<tbody id="loglines"></tbody>' +
|
||||||
|
'</table>';
|
||||||
|
this.logsummary = $('logsummary')
|
||||||
|
this.loglines = $('loglines');
|
||||||
|
},
|
||||||
|
_toHTML: function(txt) {
|
||||||
|
return txt.escapeHTML().replace(/\n/g,"<br/>");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.Unit.Runner = Class.create();
|
||||||
|
Test.Unit.Runner.prototype = {
|
||||||
|
initialize: function(testcases) {
|
||||||
|
this.options = Object.extend({
|
||||||
|
testLog: 'testlog'
|
||||||
|
}, arguments[1] || {});
|
||||||
|
this.options.resultsURL = this.parseResultsURLQueryParameter();
|
||||||
|
if (this.options.testLog) {
|
||||||
|
this.options.testLog = $(this.options.testLog) || null;
|
||||||
|
}
|
||||||
|
if(this.options.tests) {
|
||||||
|
this.tests = [];
|
||||||
|
for(var i = 0; i < this.options.tests.length; i++) {
|
||||||
|
if(/^test/.test(this.options.tests[i])) {
|
||||||
|
this.tests.push(new Test.Unit.Testcase(this.options.tests[i], testcases[this.options.tests[i]], testcases["setup"], testcases["teardown"]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (this.options.test) {
|
||||||
|
this.tests = [new Test.Unit.Testcase(this.options.test, testcases[this.options.test], testcases["setup"], testcases["teardown"])];
|
||||||
|
} else {
|
||||||
|
this.tests = [];
|
||||||
|
for(var testcase in testcases) {
|
||||||
|
if(/^test/.test(testcase)) {
|
||||||
|
this.tests.push(new Test.Unit.Testcase(testcase, testcases[testcase], testcases["setup"], testcases["teardown"]));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.currentTest = 0;
|
||||||
|
this.logger = new Test.Unit.Logger(this.options.testLog);
|
||||||
|
setTimeout(this.runTests.bind(this), 1000);
|
||||||
|
},
|
||||||
|
parseResultsURLQueryParameter: function() {
|
||||||
|
return window.location.search.parseQuery()["resultsURL"];
|
||||||
|
},
|
||||||
|
// Returns:
|
||||||
|
// "ERROR" if there was an error,
|
||||||
|
// "FAILURE" if there was a failure, or
|
||||||
|
// "SUCCESS" if there was neither
|
||||||
|
getResult: function() {
|
||||||
|
var hasFailure = false;
|
||||||
|
for(var i=0;i<this.tests.length;i++) {
|
||||||
|
if (this.tests[i].errors > 0) {
|
||||||
|
return "ERROR";
|
||||||
|
}
|
||||||
|
if (this.tests[i].failures > 0) {
|
||||||
|
hasFailure = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (hasFailure) {
|
||||||
|
return "FAILURE";
|
||||||
|
} else {
|
||||||
|
return "SUCCESS";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
postResults: function() {
|
||||||
|
if (this.options.resultsURL) {
|
||||||
|
new Ajax.Request(this.options.resultsURL,
|
||||||
|
{ method: 'get', parameters: 'result=' + this.getResult(), asynchronous: false });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
runTests: function() {
|
||||||
|
var test = this.tests[this.currentTest];
|
||||||
|
if (!test) {
|
||||||
|
// finished!
|
||||||
|
this.postResults();
|
||||||
|
this.logger.summary(this.summary());
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if(!test.isWaiting) {
|
||||||
|
this.logger.start(test.name);
|
||||||
|
}
|
||||||
|
test.run();
|
||||||
|
if(test.isWaiting) {
|
||||||
|
this.logger.message("Waiting for " + test.timeToWait + "ms");
|
||||||
|
setTimeout(this.runTests.bind(this), test.timeToWait || 1000);
|
||||||
|
} else {
|
||||||
|
this.logger.finish(test.status(), test.summary());
|
||||||
|
this.currentTest++;
|
||||||
|
// tail recursive, hopefully the browser will skip the stackframe
|
||||||
|
this.runTests();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
summary: function() {
|
||||||
|
var assertions = 0;
|
||||||
|
var failures = 0;
|
||||||
|
var errors = 0;
|
||||||
|
var messages = [];
|
||||||
|
for(var i=0;i<this.tests.length;i++) {
|
||||||
|
assertions += this.tests[i].assertions;
|
||||||
|
failures += this.tests[i].failures;
|
||||||
|
errors += this.tests[i].errors;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
this.tests.length + " tests, " +
|
||||||
|
assertions + " assertions, " +
|
||||||
|
failures + " failures, " +
|
||||||
|
errors + " errors");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.Unit.Assertions = Class.create();
|
||||||
|
Test.Unit.Assertions.prototype = {
|
||||||
|
initialize: function() {
|
||||||
|
this.assertions = 0;
|
||||||
|
this.failures = 0;
|
||||||
|
this.errors = 0;
|
||||||
|
this.messages = [];
|
||||||
|
},
|
||||||
|
summary: function() {
|
||||||
|
return (
|
||||||
|
this.assertions + " assertions, " +
|
||||||
|
this.failures + " failures, " +
|
||||||
|
this.errors + " errors" + "\n" +
|
||||||
|
this.messages.join("\n"));
|
||||||
|
},
|
||||||
|
pass: function() {
|
||||||
|
this.assertions++;
|
||||||
|
},
|
||||||
|
fail: function(message) {
|
||||||
|
this.failures++;
|
||||||
|
this.messages.push("Failure: " + message);
|
||||||
|
},
|
||||||
|
info: function(message) {
|
||||||
|
this.messages.push("Info: " + message);
|
||||||
|
},
|
||||||
|
error: function(error) {
|
||||||
|
this.errors++;
|
||||||
|
this.messages.push(error.name + ": "+ error.message + "(" + Test.Unit.inspect(error) +")");
|
||||||
|
},
|
||||||
|
status: function() {
|
||||||
|
if (this.failures > 0) return 'failed';
|
||||||
|
if (this.errors > 0) return 'error';
|
||||||
|
return 'passed';
|
||||||
|
},
|
||||||
|
assert: function(expression) {
|
||||||
|
var message = arguments[1] || 'assert: got "' + Test.Unit.inspect(expression) + '"';
|
||||||
|
try { expression ? this.pass() :
|
||||||
|
this.fail(message); }
|
||||||
|
catch(e) { this.error(e); }
|
||||||
|
},
|
||||||
|
assertEqual: function(expected, actual) {
|
||||||
|
var message = arguments[2] || "assertEqual";
|
||||||
|
try { (expected == actual) ? this.pass() :
|
||||||
|
this.fail(message + ': expected "' + Test.Unit.inspect(expected) +
|
||||||
|
'", actual "' + Test.Unit.inspect(actual) + '"'); }
|
||||||
|
catch(e) { this.error(e); }
|
||||||
|
},
|
||||||
|
assertEnumEqual: function(expected, actual) {
|
||||||
|
var message = arguments[2] || "assertEnumEqual";
|
||||||
|
try { $A(expected).length == $A(actual).length &&
|
||||||
|
expected.zip(actual).all(function(pair) { return pair[0] == pair[1] }) ?
|
||||||
|
this.pass() : this.fail(message + ': expected ' + Test.Unit.inspect(expected) +
|
||||||
|
', actual ' + Test.Unit.inspect(actual)); }
|
||||||
|
catch(e) { this.error(e); }
|
||||||
|
},
|
||||||
|
assertNotEqual: function(expected, actual) {
|
||||||
|
var message = arguments[2] || "assertNotEqual";
|
||||||
|
try { (expected != actual) ? this.pass() :
|
||||||
|
this.fail(message + ': got "' + Test.Unit.inspect(actual) + '"'); }
|
||||||
|
catch(e) { this.error(e); }
|
||||||
|
},
|
||||||
|
assertNull: function(obj) {
|
||||||
|
var message = arguments[1] || 'assertNull'
|
||||||
|
try { (obj==null) ? this.pass() :
|
||||||
|
this.fail(message + ': got "' + Test.Unit.inspect(obj) + '"'); }
|
||||||
|
catch(e) { this.error(e); }
|
||||||
|
},
|
||||||
|
assertHidden: function(element) {
|
||||||
|
var message = arguments[1] || 'assertHidden';
|
||||||
|
this.assertEqual("none", element.style.display, message);
|
||||||
|
},
|
||||||
|
assertNotNull: function(object) {
|
||||||
|
var message = arguments[1] || 'assertNotNull';
|
||||||
|
this.assert(object != null, message);
|
||||||
|
},
|
||||||
|
assertInstanceOf: function(expected, actual) {
|
||||||
|
var message = arguments[2] || 'assertInstanceOf';
|
||||||
|
try {
|
||||||
|
(actual instanceof expected) ? this.pass() :
|
||||||
|
this.fail(message + ": object was not an instance of the expected type"); }
|
||||||
|
catch(e) { this.error(e); }
|
||||||
|
},
|
||||||
|
assertNotInstanceOf: function(expected, actual) {
|
||||||
|
var message = arguments[2] || 'assertNotInstanceOf';
|
||||||
|
try {
|
||||||
|
!(actual instanceof expected) ? this.pass() :
|
||||||
|
this.fail(message + ": object was an instance of the not expected type"); }
|
||||||
|
catch(e) { this.error(e); }
|
||||||
|
},
|
||||||
|
_isVisible: function(element) {
|
||||||
|
element = $(element);
|
||||||
|
if(!element.parentNode) return true;
|
||||||
|
this.assertNotNull(element);
|
||||||
|
if(element.style && Element.getStyle(element, 'display') == 'none')
|
||||||
|
return false;
|
||||||
|
|
||||||
|
return this._isVisible(element.parentNode);
|
||||||
|
},
|
||||||
|
assertNotVisible: function(element) {
|
||||||
|
this.assert(!this._isVisible(element), Test.Unit.inspect(element) + " was not hidden and didn't have a hidden parent either. " + ("" || arguments[1]));
|
||||||
|
},
|
||||||
|
assertVisible: function(element) {
|
||||||
|
this.assert(this._isVisible(element), Test.Unit.inspect(element) + " was not visible. " + ("" || arguments[1]));
|
||||||
|
},
|
||||||
|
benchmark: function(operation, iterations) {
|
||||||
|
var startAt = new Date();
|
||||||
|
(iterations || 1).times(operation);
|
||||||
|
var timeTaken = ((new Date())-startAt);
|
||||||
|
this.info((arguments[2] || 'Operation') + ' finished ' +
|
||||||
|
iterations + ' iterations in ' + (timeTaken/1000)+'s' );
|
||||||
|
return timeTaken;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Test.Unit.Testcase = Class.create();
|
||||||
|
Object.extend(Object.extend(Test.Unit.Testcase.prototype, Test.Unit.Assertions.prototype), {
|
||||||
|
initialize: function(name, test, setup, teardown) {
|
||||||
|
Test.Unit.Assertions.prototype.initialize.bind(this)();
|
||||||
|
this.name = name;
|
||||||
|
this.test = test || function() {};
|
||||||
|
this.setup = setup || function() {};
|
||||||
|
this.teardown = teardown || function() {};
|
||||||
|
this.isWaiting = false;
|
||||||
|
this.timeToWait = 1000;
|
||||||
|
},
|
||||||
|
wait: function(time, nextPart) {
|
||||||
|
this.isWaiting = true;
|
||||||
|
this.test = nextPart;
|
||||||
|
this.timeToWait = time;
|
||||||
|
},
|
||||||
|
run: function() {
|
||||||
|
try {
|
||||||
|
try {
|
||||||
|
if (!this.isWaiting) this.setup.bind(this)();
|
||||||
|
this.isWaiting = false;
|
||||||
|
this.test.bind(this)();
|
||||||
|
} finally {
|
||||||
|
if(!this.isWaiting) {
|
||||||
|
this.teardown.bind(this)();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch(e) { this.error(e); }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -22,6 +22,11 @@ class WP_Scripts {
|
||||||
$this->add( 'autosave', '/wp-includes/js/autosave.js.php', array('prototype', 'sack'), '4508');
|
$this->add( 'autosave', '/wp-includes/js/autosave.js.php', array('prototype', 'sack'), '4508');
|
||||||
$this->add( 'wp-ajax', '/wp-includes/js/wp-ajax-js.php', array('prototype'), '4459');
|
$this->add( 'wp-ajax', '/wp-includes/js/wp-ajax-js.php', array('prototype'), '4459');
|
||||||
$this->add( 'listman', '/wp-includes/js/list-manipulation-js.php', array('wp-ajax', 'fat'), '4583');
|
$this->add( 'listman', '/wp-includes/js/list-manipulation-js.php', array('wp-ajax', 'fat'), '4583');
|
||||||
|
$this->add( 'scriptaculous', '/wp-includes/js/scriptaculous/scriptaculous.js', array('prototype'), '1.6.1');
|
||||||
|
$this->add( 'scriptaculous-dragdrop', '/wp-includes/js/scriptaculous/scriptaculous.js?load=builder,dragdrop', array('prototype'), '1.6.1');
|
||||||
|
$this->add( 'scriptaculous-slider', '/wp-includes/js/scriptaculous/scriptaculous.js?load=slider,effects', array('prototype'), '1.6.1');
|
||||||
|
$this->add( 'scriptaculous-controls', '/wp-includes/js/scriptaculous/scriptaculous.js?load=controls', array('prototype'), '1.6.1');
|
||||||
|
$this->add( 'cropper', '/wp-content/themes/pub/connections/crop/cropper.js', array('scriptaculous-dragdrop'), '1');
|
||||||
if ( is_admin() ) {
|
if ( is_admin() ) {
|
||||||
$this->add( 'dbx-admin-key', '/wp-admin/dbx-admin-key-js.php', array('dbx'), '3651' );
|
$this->add( 'dbx-admin-key', '/wp-admin/dbx-admin-key-js.php', array('dbx'), '3651' );
|
||||||
$this->add( 'ajaxcat', '/wp-admin/cat-js.php', array('listman'), '3684' );
|
$this->add( 'ajaxcat', '/wp-admin/cat-js.php', array('listman'), '3684' );
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue