API Docs for:
Show:

File: src/main/resources/js/ButtonControl.js

/**
 * 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});
}