/**
* dynamic html for Tiled Image
* $Id: ScrollbarControl.js 16 2013-04-13 09:02:12Z nazotoko $
* Copyright 2013 Shun N. Watanabe <nazotoko (a+) users.sourceforge.net>
* @module TiledImage
*/
/**
* Scrollbar Control Class
* <ul>
* <li>example
* <div id="scrollControl-ex1" style="height:255px;width:400px;"></div>
* <script><!--
* var scrollControl=new TiledImage("scrollControl-ex1");
* scrollControl.addLayer(new TilesLayer("chicago","../../chicago_skyview/z${z}/${x}_${y}.jpg",1920,1218).setTileSize(240,256));
* scrollControl.addControl(new ScrollbarControl());
* //--></script>
* </li>
* </ul>
* @class ScrollbarControl
* @constructor
* @since 0.9.2
**/
function ScrollbarControl(){
/**
* self: private scope of this
* @property self
* @type object
* @private
* @default this
*/
var self=this,
/**
* parent (TiledImage) pointer
* @property parent
* @type object
* @private
*/
parent,
/**
* DOM Element's parent
* @property control
* @type object
* @private
*/
control,
buttons,
/**
* drag flags.
* @property dragFlag
* @type Array
* @private
*/
dragFlag;
d.mod(this,{
/**
* Called from TiledImage object
* @public
* @method setParent
* @required
* @param {Object} p parent (TiledImage) object.
* @return {Array} this.elist event list
*/
setParent:function (p){
parent=p;
control=p.target;
d.mod(this,{
/**
* DOM Elements of buttons
* @property buttons
* @type Array[DOMElements]
* @protected
*/
buttons:{},
/**
* Event list
* @property elist
* @type Array
* @required
* @public
*/
elist:[{m:'resize',f:this.resize},
{m:'changezoom',f:this.zoom},
{m:'move',f:this.scroll},
{m:'mouseup',t:p.target,f:this.dragEnd},
{m:'mousemove',t:p.target,f:this.move}
]
});
var e,key,layout={
'up':[-16,0,0,0,this.upEvent],
'left':[0,-16,0,16,this.leftEvent],
'right':[-32,-16,32,16,this.rightEvent],
'down':[-16,-32,0,32,this.downEvent]};
for(key in layout){
this.buttons[key]=e=d.app(p.target,'input',{
className:'popup button',type:"button",
style:{width:"16px",height:"16px",backgroundPosition:layout[key][2]+"px "+layout[key][3]+"px",opacity:0.7}});
if(layout[key][0]<0){
e.style.right=-layout[key][0]-16+"px";
} else {
e.style.left=layout[key][0]+"px";
}
if(layout[key][1]<0){
e.style.bottom=-layout[key][1]-16+"px";
} else {
e.style.top=layout[key][1]+"px";
}
d.cat(this.elist,[
{m:'dblclick',t:e,f:this.dblclick},
{m:'click',t:e,f:layout[key][4]}]);
}
d.mod(this.buttons,{
hrizontal0:d.app(p.target,'div',{className:'popup cage',style:{height:"14px",bottom:"0px",left:"16px",opacity:0.7}}),
hrizontal1:d.app(p.target,'div',{className:'popup box',style:{height:"14px",bottom:"1px",opacity:0.7}}),
vertical0:d.app(p.target,'div',{className:'popup cage',style:{width:"14px",right:"0px",top:"16px",opacity:0.7}}),
vertical1:d.app(p.target,'div',{className:'popup box',style:{width:"14px",right:"1px",opacity:0.7}})
});
return d.cat(this.elist,[
{m:'mousedown',t:this.buttons.hrizontal1,f:this.dragStartH},
{m:'mousedown',t:this.buttons.vertical1,f:this.dragStartV}
]);
},
/**
* resizing event listener
* @protected
* @method resize
* @param {Array} w windowSize of the TiledImage object.
*/
resize:function(w){
self.buttons['hrizontal0'].style.width=w[0]-50+"px";
self.buttons['vertical0'].style.height=w[1]-50+"px";
},
/**
* moving event listener
* @protected
* @method scroll
* @param {Array} p position of the TiledImage object.
*/
scroll:function(p){
var s=parent.getMaxSize(),
w=parent.getWindowSize();
self.buttons['hrizontal1'].style.left=17+(w[0]-50)*p[0]/s[0]-self.offset[0]+"px";
self.buttons['vertical1'].style.top=17+(w[1]-50)*p[1]/s[1]-self.offset[1]+"px";
},
/**
* zooming event listener
* @protected
* @method zoom
* @param {Array} z zooms [minZ,current Z, maxZ] of the TiledImage object.
*/
zoom:function(z){
var s=parent.getMaxSize(),
w=parent.getWindowSize(),
dz=z[2]-z[1],t;
t=(w[0]-50)*(w[0]<<dz)/s[0];
self.offset=[t/2];
self.buttons['hrizontal1'].style.width=t+"px";
t=(w[1]-50)*(w[1]<<dz)/s[1];
self.offset[1]=[t/2];
self.buttons['vertical1'].style.height=t+"px";
},
upEvent:function(e){
parent.move(0,-64);
},
downEvent:function(e){
parent.move(0,64);
},
leftEvent:function(e){
parent.move(-64,0);
},
rightEvent:function(e){
parent.move(64,0);
},
dblclick:function(e){
if(e && e.stopPropagation){e.stopPropagation();}
else event.cancelBubble = true;
},
/**
* "mousemove" event listener
* @protected
* @method move
* @param {Object Event} e event object.
*/
move: function(e){
if(!dragFlag) return true;
if(!e) e=window.event;
var d,w=parent.getWindowSize();
if(dragFlag[0]){
d=e.clientX-self.startPosition[0];
parent.move(d*w[0]/self.offset[0]/2,0);
} else {
d=e.clientY-self.startPosition[1];
parent.move(0,d*w[1]/self.offset[1]/2);
}
self.startPosition=[e.clientX,e.clientY];
if(e.stopPropagation){e.stopPropagation();e.preventDefault();}
else {e.cancelBubble=true;e.returnValue=false;}
},
/**
* "mousedown" event listener's common routine
* @private
* @method dragStart
* @param {Object Event} e event object.
*/
dragStart:function(e){
if(!e){e=window.event;}
self.startPosition=[e.clientX,e.clientY];
control.style.cursor='move';
if(e.stopPropagation){e.stopPropagation();e.preventDefault();}
else {e.cancelBubble=true;e.returnValue=false;}
},
/**
* event listener for "mousedown" of the holizontal bar.
* @private
* @method dragStartH
* @param {Object Event} e event object.
*/
dragStartH:function(e){
dragFlag=[true,false];
self.dragStart(e);
},
/**
* event listener for "mousedown" of the vertical bar.
* @private
* @method dragStartV
* @param {Object Event} e event object.
*/
dragStartV:function(e){
dragFlag=[false,true];
self.dragStart(e);
},
/**
* event listener for "mouseup". Drag state is ended.
* @private
* @method dragEnd
* @param {Object Event} e event object.
*/
dragEnd:function(e){
if(!e){e=window.event;}
dragFlag=false;
control.style.cursor='auto';
}
});
};
