1 /**

     2  * Interface Elements for jQuery

     3  * Slider

     4  * 

     5  * http://interface.eyecon.ro

     6  * 

     7  * Copyright (c) 2006 Stefan Petre

     8  * Dual licensed under the MIT (MIT-LICENSE.txt) 

     9  * and GPL (GPL-LICENSE.txt) licenses.

    10  *   

    11  *

    12  */

    13 

    14 jQuery.iSlider = {

    15 	tabindex : 1,

    16 	set : function (values)

    17 	{

    18 		var values = values;

    19 		return this.each(

    20 			function()

    21 			{

    22 				this.slideCfg.sliders.each(

    23 					function (key) 

    24 					{ 

    25 						jQuery.iSlider.dragmoveBy(this,values[key]);

    26 					}

    27 				);

    28 			}

    29 		);

    30 	},

    31 	

    32 	get : function()

    33 	{

    34 		var values = [];

    35 		this.each(

    36 			function(slider)

    37 			{

    38 				if (this.isSlider) {

    39 					values[slider] = [];

    40 					var elm = this;

    41 					var sizes = jQuery.iUtil.getSize(this);

    42 					this.slideCfg.sliders.each(

    43 						function (key) 

    44 						{

    45 							var x = this.offsetLeft;

    46 							var y = this.offsetTop;

    47 							xproc = parseInt(x * 100 / (sizes.w - this.offsetWidth));

    48 							yproc = parseInt(y * 100 / (sizes.h - this.offsetHeight));

    49 							values[slider][key] = [xproc||0, yproc||0, x||0, y||0];

    50 						}

    51 					);

    52 				}

    53 			}

    54 		);

    55 		return values;

    56 	},

    57 	

    58 	modifyContainer : function (elm)

    59 	{

    60 		elm.dragCfg.containerMaxx = elm.dragCfg.cont.w - elm.dragCfg.oC.wb;

    61 		elm.dragCfg.containerMaxy = elm.dragCfg.cont.h - elm.dragCfg.oC.hb;

    62 		if (elm.SliderContainer.slideCfg.restricted ) {

    63 			next = elm.SliderContainer.slideCfg.sliders.get(elm.SliderIteration+1);

    64 			if (next) {

    65 				elm.dragCfg.cont.w = (parseInt(jQuery(next).css('left'))||0) + elm.dragCfg.oC.wb;

    66 				elm.dragCfg.cont.h = (parseInt(jQuery(next).css('top'))||0) + elm.dragCfg.oC.hb;

    67 			}

    68 			prev = elm.SliderContainer.slideCfg.sliders.get(elm.SliderIteration-1);

    69 			if (prev) {

    70 				var prevLeft = parseInt(jQuery(prev).css('left'))||0;

    71 				var prevTop = parseInt(jQuery(prev).css('left'))||0;

    72 				elm.dragCfg.cont.x += prevLeft;

    73 				elm.dragCfg.cont.y += prevTop;

    74 				elm.dragCfg.cont.w -= prevLeft;

    75 				elm.dragCfg.cont.h -= prevTop;

    76 			}

    77 		}

    78 		elm.dragCfg.maxx = elm.dragCfg.cont.w - elm.dragCfg.oC.wb;

    79 		elm.dragCfg.maxy = elm.dragCfg.cont.h - elm.dragCfg.oC.hb;

    80 		if(elm.dragCfg.fractions) {

    81 			elm.dragCfg.gx = ((elm.dragCfg.cont.w - elm.dragCfg.oC.wb)/elm.dragCfg.fractions) || 1;

    82 			elm.dragCfg.gy = ((elm.dragCfg.cont.h - elm.dragCfg.oC.hb)/elm.dragCfg.fractions) || 1;

    83 			elm.dragCfg.fracW = elm.dragCfg.maxx / elm.dragCfg.fractions;

    84 			elm.dragCfg.fracH = elm.dragCfg.maxy / elm.dragCfg.fractions;

    85 		}

    86 		

    87 		elm.dragCfg.cont.dx = elm.dragCfg.cont.x - elm.dragCfg.oR.x;

    88 		elm.dragCfg.cont.dy = elm.dragCfg.cont.y - elm.dragCfg.oR.y;

    89 		

    90 		jQuery.iDrag.helper.css('cursor', 'default');

    91 	},

    92 	

    93 	onSlide : function(elm, x, y)

    94 	{

    95 		if (elm.dragCfg.fractions) {

    96 				xfrac = parseInt(x/elm.dragCfg.fracW);

    97 				xproc = xfrac * 100 / elm.dragCfg.fractions;

    98 				yfrac = parseInt(y/elm.dragCfg.fracH);

    99 				yproc = yfrac * 100 / elm.dragCfg.fractions;

   100 		} else {

   101 			xproc = parseInt(x * 100 / elm.dragCfg.containerMaxx);

   102 			yproc = parseInt(y * 100 / elm.dragCfg.containerMaxy);

   103 		}

   104 		elm.dragCfg.lastSi = [xproc||0, yproc||0, x||0, y||0];

   105 		if (elm.dragCfg.onSlide)

   106 			elm.dragCfg.onSlide.apply(elm, elm.dragCfg.lastSi);

   107 	},

   108 	

   109 	dragmoveByKey : function (event)

   110 	{

   111 		pressedKey = event.charCode || event.keyCode || -1;

   112 		

   113 		switch (pressedKey)

   114 		{

   115 			//end

   116 			case 35:

   117 				jQuery.iSlider.dragmoveBy(this.dragElem, [2000, 2000] );

   118 			break;

   119 			//home

   120 			case 36:

   121 				jQuery.iSlider.dragmoveBy(this.dragElem, [-2000, -2000] );

   122 			break;

   123 			//left

   124 			case 37:

   125 				jQuery.iSlider.dragmoveBy(this.dragElem, [-this.dragElem.dragCfg.gx||-1, 0] );

   126 			break;

   127 			//up

   128 			case 38:

   129 				jQuery.iSlider.dragmoveBy(this.dragElem, [0, -this.dragElem.dragCfg.gy||-1] );

   130 			break;

   131 			//right

   132 			case 39:

   133 				jQuery.iSlider.dragmoveBy(this.dragElem, [this.dragElem.dragCfg.gx||1, 0] );

   134 			break;

   135 			//down;

   136 			case 40:

   137 				jQuery.iDrag.dragmoveBy(this.dragElem, [0, this.dragElem.dragCfg.gy||1] );

   138 			break;

   139 		}

   140 	},

   141 	

   142 	dragmoveBy : function (elm, position) 

   143 	{

   144 		if (!elm.dragCfg) {

   145 			return;

   146 		}

   147 		

   148 		elm.dragCfg.oC = jQuery.extend(

   149 			jQuery.iUtil.getPosition(elm),

   150 			jQuery.iUtil.getSize(elm)

   151 		);

   152 		

   153 		elm.dragCfg.oR = {

   154 			x : parseInt(jQuery.css(elm, 'left'))||0,

   155 			y : parseInt(jQuery.css(elm, 'top'))||0

   156 		};

   157 		

   158 		elm.dragCfg.oP = jQuery.css(elm, 'position');

   159 		if (elm.dragCfg.oP != 'relative' && elm.dragCfg.oP != 'absolute') {

   160 			elm.style.position = 'relative';

   161 		}

   162 		

   163 		jQuery.iDrag.getContainment(elm);

   164 		jQuery.iSlider.modifyContainer(elm);		

   165 		

   166 		dx = parseInt(position[0]) || 0;

   167 		dy = parseInt(position[1]) || 0;

   168 		

   169 		nx = elm.dragCfg.oR.x + dx;

   170 		ny = elm.dragCfg.oR.y + dy;

   171 		if(elm.dragCfg.fractions) {

   172 			newCoords = jQuery.iDrag.snapToGrid.apply(elm, [nx, ny, dx, dy]);

   173 			if (newCoords.constructor == Object) {

   174 				dx = newCoords.dx;

   175 				dy = newCoords.dy;

   176 			}

   177 			nx = elm.dragCfg.oR.x + dx;

   178 			ny = elm.dragCfg.oR.y + dy;

   179 		}

   180 		

   181 		newCoords = jQuery.iDrag.fitToContainer.apply(elm, [nx, ny, dx, dy]);

   182 		if (newCoords && newCoords.constructor == Object) {

   183 			dx = newCoords.dx;

   184 			dy = newCoords.dy;

   185 		}

   186 		

   187 		nx = elm.dragCfg.oR.x + dx;

   188 		ny = elm.dragCfg.oR.y + dy;

   189 		

   190 		if (elm.dragCfg.si && (elm.dragCfg.onSlide || elm.dragCfg.onChange)) {

   191 			jQuery.iSlider.onSlide(elm, nx, ny);

   192 		}

   193 		nx = !elm.dragCfg.axis || elm.dragCfg.axis == 'horizontally' ? nx : elm.dragCfg.oR.x||0;

   194 		ny = !elm.dragCfg.axis || elm.dragCfg.axis == 'vertically' ? ny : elm.dragCfg.oR.y||0;

   195 		elm.style.left = nx + 'px';

   196 		elm.style.top = ny + 'px';

   197 	},

   198 	

   199 	build : function(o) {

   200 		return this.each(

   201 			function()

   202 			{

   203 				if (this.isSlider == true || !o.accept || !jQuery.iUtil || !jQuery.iDrag || !jQuery.iDrop){

   204 					return;

   205 				}

   206 				toDrag = jQuery(o.accept, this);

   207 				if (toDrag.size() == 0) {

   208 					return;

   209 				}

   210 				var params = {

   211 					containment: 'parent',

   212 					si : true,

   213 					onSlide : o.onSlide && o.onSlide.constructor == Function ? o.onSlide : null,

   214 					onChange : o.onChange && o.onChange.constructor == Function ? o.onChange : null,

   215 					handle: this,

   216 					opacity: o.opacity||false

   217 				};

   218 				if (o.fractions && parseInt(o.fractions)) {

   219 					params.fractions = parseInt(o.fractions)||1;

   220 					params.fractions = params.fractions > 0 ? params.fractions : 1;

   221 				}

   222 				if (toDrag.size() == 1)

   223 					toDrag.Draggable(params);

   224 				else {

   225 					jQuery(toDrag.get(0)).Draggable(params);

   226 					params.handle = null;

   227 					toDrag.Draggable(params);

   228 				}

   229 				toDrag.keydown(jQuery.iSlider.dragmoveByKey);

   230 				toDrag.attr('tabindex',jQuery.iSlider.tabindex++);	

   231 				

   232 				this.isSlider = true;

   233 				this.slideCfg = {};

   234 				this.slideCfg.onslide = params.onslide;

   235 				this.slideCfg.fractions = params.fractions;

   236 				this.slideCfg.sliders = toDrag;

   237 				this.slideCfg.restricted = o.restricted ? true : false;

   238 				sliderEl = this;

   239 				sliderEl.slideCfg.sliders.each(

   240 					function(nr)

   241 					{

   242 						this.SliderIteration = nr;

   243 						this.SliderContainer = sliderEl;

   244 					}

   245 				);

   246 				if (o.values && o.values.constructor == Array) {

   247 					for (i = o.values.length -1; i>=0;i--) {

   248 						if (o.values[i].constructor == Array && o.values[i].length == 2) {

   249 							el = this.slideCfg.sliders.get(i);

   250 							if (el.tagName) {

   251 								jQuery.iSlider.dragmoveBy(el, o.values[i]);

   252 							}

   253 						}

   254 					}

   255 				}

   256 			}

   257 		);

   258 	}

   259 };

   260 jQuery.fn.extend(

   261 	{

   262 		/**

   263 		 * Create a slider width options

   264 		 * 

   265 		 * @name Slider

   266 		 * @description Create a slider width options

   267 		 * @param Hash hash A hash of parameters. All parameters are optional.

   268 		 * @option Mixed accepts string to select slider indicators or DOMElement slider indicator

   269 		 * @option Integer factions (optional) number of sgments to divide and snap slider

   270 		 * @option Function onSlide (optional) A function to be executed whenever slider indicator it is moved

   271 		 * @option Function onChanged (optional) A function to be executed whenever slider indicator was moved

   272 		 * @option Array values (optional) Initial values for slider indicators

   273 		 * @option Boolean restricted (optional) if true the slider indicator can not be moved beyond adjacent indicators

   274 		 * @type jQuery

   275 		 * @cat Plugins/Interface

   276 		 * @author Stefan Petre

   277 		 */

   278 		Slider : jQuery.iSlider.build,

   279 		/**

   280 		 * Set value/position for slider indicators

   281 		 * 

   282 		 * @name SliderSetValues

   283 		 * @description Set value/position for slider indicators

   284 		 * @param Array values array width values for each indicator

   285 		 * @type jQuery

   286 		 * @cat Plugins/Interface

   287 		 * @author Stefan Petre

   288 		 */

   289 		SliderSetValues : jQuery.iSlider.set,

   290 		/**

   291 		 * Get value/position for slider indicators

   292 		 * 

   293 		 * @name SliderSetValues

   294 		 * @description Get value/position for slider indicators

   295 		 * @type jQuery

   296 		 * @cat Plugins/Interface

   297 		 * @author Stefan Petre

   298 		 */

   299 		SliderGetValues : jQuery.iSlider.get

   300 	}

   301 );