/**
* dynamic html for TiledImage
* $Id: ButtonControl.js 16 2013-04-13 09:02:12Z nazotoko $
* Copyright 2013 Shun N. Watanabe <nazotoko (a+) users.sourceforge.net>
* @module TiledImage
*/
/**
* ButtonControl class. It controls TiledImage by Buttons on the image area.
* <li>controls<ul>
* <li><input type="button" style="width:16px;height:16px;background:url('../../js/buttons.png') 32px 16px;border: none;"/>: right</li>
* <li><input type="button" style="width:16px;height:16px;background:url('../../js/buttons.png') 0px 16px;border: none;"/>: left</li>
* <li><input type="button" style="width:16px;height:16px;background:url('../../js/buttons.png') 0px 0px;border: none;"/>: up</li>
* <li><input type="button" style="width:16px;height:16px;background:url('../../js/buttons.png') 0px 32px;border: none;"/>: down</li>
* <li><input type="button" style="width:16px;height:16px;background:url('../../js/buttons.png') 32px 0px;border: none;"/>: zoom</li>
* <li><input type="button" style="width:16px;height:16px;background:url('../../js/buttons.png') 32px 32px;border: none;"/>: zoom out</li>
* </ul>
* </li>
* <li>example
* <div id="buttonControl-ex1" style="height:255px;width:400px;"></div>
* <script>
* var buttonControl=new TiledImage("buttonControl-ex1");
* buttonControl.addLayer(new TilesLayer("chicago","../../chicago_skyview/z${z}/${x}_${y}.jpg",1920,1218).setTileSize(240,256));
* buttonControl.addControl(new ButtonControl());
* </script>
* </li>
*</ul>
*
* @class ButtonControl
* @constructor
*/
function ButtonControl(){
/**
* self: private scope of this
* @property self
* @type Object
* @private
* @default this
*/
var self=this,
/**
* parent (TiledImage) pointer
* @property parent
* @type object
* @private
*/
parent;
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,
d.mod(this,{
buttons:{},
/**
* Event list
* @property elist
* @type Array
* @required
* @public
*/
elist:[]
});
var key,layout={
'up':[32,16,0,0,this.upEvent],
'left':[16,32,0,16,this.leftEvent],
'right':[48,32,32,16,this.rightEvent],
'down':[32,48,0,32,this.downEvent],
'plus':[32,64,32,0,this.plusEvent],
'minus':[32,80,32,32,this.minusEvent]};
for(key in layout){
if(this.flags[key]){
this.elist[this.elist.length]={
m:'dblclick',f:this.dblclick,
t:this.buttons[key]=
d.app(p.target,'input',{
className:'popup button',type:"button",
style:{left:layout[key][0]+"px",top:layout[key][1]+"px",width:"16px",height:"16px",backgroundPosition:layout[key][2]+"px "+layout[key][3]+"px",opacity:0.7}
})
};
this.elist[this.elist.length]={m:'click',f:layout[key][4],t:this.buttons[key]};
}
}
return this.elist;
},
/**
* Change Visiblity
* @public
* @method setVisible
* @param {Array[Boolean]} flags visiblity flag.
* __true__ is visible, __false__ is hidden. __undefined__ is not changing.
* <ul>
* <li>all: abrevitation for zooms and arrows</li>
* <li>zooms: abrevitation for minus and plus</li>
* <li>arrows: abrevitation for up, down, left and right</li>
* </ul>
* @type Array
* @chainable
* @return this
* @since 0.9.2
*/
setVisible:function(flags){
if(flags.all)
d.mod(flags,{arrows:true,zooms:true});
else if(flags.all==false)
d.mod(flags,{arrows:false,zooms:false});
if(flags.arrows)
d.mod(flags,{up:true,down:true,right:true,left:true});
else if(flags.arrows==false)
d.mod(flags,{up:false,down:false,right:false,left:false});
if(flags.zooms)
d.mod(flags,{plus:true,minus:true});
else if(flags.zooms==false)
d.mod(flags,{plus:false,minus:false});
d.mod(this.flags,flags);
return this;
},
/**
* upEvent
* @protected
* @method upEvent
* @param {object} e event object
*/
upEvent:function(e){
parent.move(0,-64);
},
/**
* down Event
* @protected
* @method downEvent
* @param {object} e event object
*/
downEvent:function(e){
parent.move(0,64);
},
/**
* left event
* @protected
* @method leftEvent
* @param {object} e event object
*/
leftEvent:function(e){
parent.move(-64,0);
},
/**
* right event
* @protected
* @method rightEvent
* @param {object} e event object
*/
rightEvent:function(e){
parent.move(64,0);
},
/**
* plus event
* @protected
* @method plusEvent
* @param {object} e event object
*/
plusEvent:function(e){
parent.setZoom(parent.getZoom()+1);
},
/**
* minusEvent
* @protected
* @method minusEvent
* @param {object} e event object
*/
minusEvent:function(e){
parent.setZoom(parent.getZoom()-1);
},
/**
* double click Event. This is double click canceler to prohibit double
* click event of DragControl (zooming).
* @protected
* @method dblEvent
* @param {object} e event object
*/
dblclick:function(e){
if(e && e.stopPropagation) e.stopPropagation();
else event.cancelBubble = true;
},
/**
* visiblity flags
* @property flags
* @type Object
* @default {all:true}
*/
flags:{}
});
this.setVisible({all:true});
}