Advertisement
Guest User

Untitled

a guest
Apr 4th, 2013
116
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.56 KB | None | 0 0
  1. // Title: tigra slider control
  2. // Description: See the demo at url
  3. // URL: http://www.softcomplex.com/products/tigra_slider_control/
  4. // Version: 1.1 (commented source)
  5. // Date: 08/28/2012
  6. // Tech. Support: http://www.softcomplex.com/forum/
  7. // Notes: This script is free. Visit official site for further details.
  8.  
  9. function slider (a_init, a_tpl) {
  10.  
  11. this.f_setValue = f_sliderSetValue;
  12. this.f_getPos = f_sliderGetPos;
  13.  
  14. // register in the global collection
  15. if (!window.A_SLIDERS)
  16. window.A_SLIDERS = [];
  17. var n_id = this.n_id = window.A_SLIDERS.length;
  18. window.A_SLIDERS[n_id] = this;
  19.  
  20. // save config parameters in the slider object
  21. var s_key;
  22. if (a_tpl)
  23. for (s_key in a_tpl)
  24. this[s_key] = a_tpl[s_key];
  25. for (s_key in a_init)
  26. this[s_key] = a_init[s_key];
  27.  
  28. this.n_pix2value = this.n_pathLength / (this.n_maxValue - this.n_minValue);
  29. if (this.n_value == null)
  30. this.n_value = this.n_minValue;
  31.  
  32. // generate the control's HTML
  33. document.write(
  34. '<div style="width:' + this.n_controlWidth + 'px;height:' + this.n_controlHeight + 'px;border:0; background-image:url(' + this.s_imgControl + ')" id="sl' + n_id + 'base">' +
  35. '<img src="' + this.s_imgSlider + '" width="' + this.n_sliderWidth + '" height="' + this.n_sliderHeight + '" border="0" style="position:relative;left:' + this.n_pathLeft + 'px;top:' + this.n_pathTop + 'px;z-index:' + this.n_zIndex + ';cursor:pointer;visibility:hidden;" name="sl' + n_id + 'slider" id="sl' + n_id + 'slider" onmousedown="return f_sliderMouseDown(' + n_id + ')" /></div>'
  36. );
  37. this.e_base = get_element('sl' + n_id + 'base');
  38. this.e_slider = get_element('sl' + n_id + 'slider');
  39.  
  40. if (document.addEventListener) {
  41. this.e_slider.addEventListener("touchstart", function (e_event) { f_sliderMouseDown(n_id, e_event) }, false);
  42. document.addEventListener("touchmove", f_sliderMouseMove, false);
  43. document.addEventListener("touchend", f_sliderMouseUp, false);
  44. }
  45.  
  46.  
  47. // safely hook document/window events
  48. if (!window.f_savedMouseMove && document.onmousemove != f_sliderMouseMove) {
  49. window.f_savedMouseMove = document.onmousemove;
  50. document.onmousemove = f_sliderMouseMove;
  51. }
  52. if (!window.f_savedMouseUp && document.onmouseup != f_sliderMouseUp) {
  53. window.f_savedMouseUp = document.onmouseup;
  54. document.onmouseup = f_sliderMouseUp;
  55. }
  56.  
  57. // preset to the value in the input box if available
  58. var e_input = this.s_form == null
  59. ? get_element(this.s_name)
  60. : document.forms[this.s_form]
  61. ? document.forms[this.s_form].elements[this.s_name]
  62. : null;
  63. this.f_setValue(e_input && e_input.value != '' ? e_input.value : null, 1);
  64. this.e_slider.style.visibility = 'visible';
  65.  
  66. }
  67.  
  68. function f_sliderSetValue (n_value, b_noInputCheck) {
  69. if (n_value == null)
  70. n_value = this.n_value == null ? this.n_minValue : this.n_value;
  71. if (isNaN(n_value))
  72. return false;
  73. // round to closest multiple if step is specified
  74. if (this.n_step)
  75. n_value = Math.round((n_value - this.n_minValue) / this.n_step) * this.n_step + this.n_minValue;
  76. // smooth out the result
  77. if (n_value % 1)
  78. n_value = Math.round(n_value * 1e5) / 1e5;
  79.  
  80. if (n_value < this.n_minValue)
  81. n_value = this.n_minValue;
  82. if (n_value > this.n_maxValue)
  83. n_value = this.n_maxValue;
  84.  
  85. this.n_value = n_value;
  86.  
  87. // move the slider
  88. if (this.b_vertical)
  89. this.e_slider.style.top = (this.n_pathTop + this.n_pathLength - Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';
  90. else
  91. this.e_slider.style.left = (this.n_pathLeft + Math.round((n_value - this.n_minValue) * this.n_pix2value)) + 'px';
  92.  
  93. // save new value
  94. var e_input;
  95. if (this.s_form == null) {
  96. e_input = get_element(this.s_name);
  97. if (!e_input)
  98. return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with ID='" + this.s_name + "'.");
  99. }
  100. else {
  101. var e_form = document.forms[this.s_form];
  102. if (!e_form)
  103. return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the form with NAME='" + this.s_form + "'.");
  104. e_input = e_form.elements[this.s_name];
  105. if (!e_input)
  106. return b_noInputCheck ? null : f_sliderError(this.n_id, "Can not find the input with NAME='" + this.s_name + "'.");
  107. }
  108. e_input.value = n_value;
  109.  
  110. }
  111.  
  112.  
  113.  
  114.  
  115.  
  116. // get absolute position of the element in the document
  117. function f_sliderGetPos (b_vertical, b_base) {
  118. var n_pos = 0,
  119. s_coord = (b_vertical ? 'Top' : 'Left');
  120. var o_elem = o_elem2 = b_base ? this.e_base : this.e_slider;
  121.  
  122. while (o_elem) {
  123. n_pos += o_elem["offset" + s_coord];
  124. o_elem = o_elem.offsetParent;
  125. }
  126. o_elem = o_elem2;
  127.  
  128. var n_offset;
  129. while (o_elem.tagName != "BODY") {
  130. n_offset = o_elem["scroll" + s_coord];
  131. if (n_offset)
  132. n_pos -= o_elem["scroll" + s_coord];
  133. o_elem = o_elem.parentNode;
  134. }
  135. return n_pos;
  136. }
  137.  
  138. function f_sliderMouseDown (n_id, e_event) {
  139.  
  140. window.n_activeSliderId = n_id;
  141. f_sliderSaveTouch(e_event);
  142.  
  143. var o_slider = A_SLIDERS[n_id];
  144. window.n_mouseOffset = o_slider.b_vertical
  145. ? window.n_mouseY - o_slider.n_sliderHeight / 2 - o_slider.f_getPos(1, 1) - parseInt(o_slider.e_slider.style.top)
  146. : window.n_mouseX - o_slider.n_sliderWidth / 2 - o_slider.f_getPos(0, 1) - parseInt(o_slider.e_slider.style.left);
  147.  
  148. return false;
  149. }
  150.  
  151. function f_sliderMouseUp (e_event, b_watching) {
  152.  
  153. if (window.n_activeSliderId != null) {
  154. var o_slider = window.A_SLIDERS[window.n_activeSliderId];
  155. o_slider.f_setValue(o_slider.n_minValue + (o_slider.b_vertical
  156. ? (o_slider.n_pathLength - parseInt(o_slider.e_slider.style.top) + o_slider.n_pathTop)
  157. : (parseInt(o_slider.e_slider.style.left) - o_slider.n_pathLeft)) / o_slider.n_pix2value);
  158. if (b_watching) return;
  159.  
  160. window.n_activeSliderId = null;
  161. window.n_mouseOffset = null;
  162.  
  163. }
  164. if (window.f_savedMouseUp)
  165. return window.f_savedMouseUp(e_event);
  166. }
  167.  
  168. function f_sliderMouseMove (e_event) {
  169.  
  170. if (!e_event && window.event) e_event = window.event;
  171.  
  172. // save mouse coordinates
  173. if (e_event) {
  174. window.n_mouseX = e_event.clientX + f_scrollLeft();
  175. window.n_mouseY = e_event.clientY + f_scrollTop();
  176. }
  177.  
  178. // check if in drag mode
  179. if (window.n_activeSliderId != null) {
  180.  
  181. f_sliderSaveTouch(e_event);
  182. var o_slider = window.A_SLIDERS[window.n_activeSliderId];
  183.  
  184. var n_pxOffset;
  185. if (o_slider.b_vertical) {
  186. var n_sliderTop = window.n_mouseY - o_slider.n_sliderHeight / 2 - o_slider.f_getPos(1, 1) - window.n_mouseOffset;
  187. // limit the slider movement
  188. if (n_sliderTop < o_slider.n_pathTop)
  189. n_sliderTop = o_slider.n_pathTop;
  190. var n_pxMax = o_slider.n_pathTop + o_slider.n_pathLength;
  191. if (n_sliderTop > n_pxMax)
  192. n_sliderTop = n_pxMax;
  193. o_slider.e_slider.style.top = n_sliderTop + 'px';
  194. n_pxOffset = o_slider.n_pathLength - n_sliderTop + o_slider.n_pathTop;
  195. }
  196. else {
  197. var n_sliderLeft = window.n_mouseX - o_slider.n_sliderWidth / 2 - o_slider.f_getPos(0, 1) - window.n_mouseOffset;
  198. // limit the slider movement
  199. if (n_sliderLeft < o_slider.n_pathLeft)
  200. n_sliderLeft = o_slider.n_pathLeft;
  201. var n_pxMax = o_slider.n_pathLeft + o_slider.n_pathLength;
  202. if (n_sliderLeft > n_pxMax)
  203. n_sliderLeft = n_pxMax;
  204.  
  205. o_slider.e_slider.style.left = n_sliderLeft + 'px';
  206. n_pxOffset = n_sliderLeft - o_slider.n_pathLeft;
  207.  
  208. }
  209. if (o_slider.b_watch)
  210. f_sliderMouseUp(e_event, 1);
  211.  
  212. return false;
  213. }
  214.  
  215. if (window.f_savedMouseMove)
  216. return window.f_savedMouseMove(e_event);
  217. }
  218.  
  219. function f_sliderSaveTouch (e_event) {
  220. if (!e_event || !e_event.touches) return;
  221. e_event.preventDefault();
  222. var e_touch = e_event.touches[0] || e_event.changedTouches[0];
  223. window.n_mouseX = e_touch.pageX;
  224. window.n_mouseY = e_touch.pageY;
  225. }
  226.  
  227. // get the scroller positions of the page
  228. function f_scrollLeft() {
  229. return f_filterResults (
  230. window.pageXOffset ? window.pageXOffset : 0,
  231. document.documentElement ? document.documentElement.scrollLeft : 0,
  232. document.body ? document.body.scrollLeft : 0
  233. );
  234. }
  235. function f_scrollTop() {
  236. return f_filterResults (
  237. window.pageYOffset ? window.pageYOffset : 0,
  238. document.documentElement ? document.documentElement.scrollTop : 0,
  239. document.body ? document.body.scrollTop : 0
  240. );
  241. }
  242. function f_filterResults(n_win, n_docel, n_body) {
  243. var n_result = n_win ? n_win : 0;
  244. if (n_docel && (!n_result || (n_result > n_docel)))
  245. n_result = n_docel;
  246. return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
  247. }
  248.  
  249. function f_sliderError (n_id, s_message) {
  250. alert("Slider #" + n_id + " Error:\n" + s_message);
  251. window.n_activeSliderId = null;
  252. }
  253.  
  254. get_element = document.all ?
  255. function (s_id) { return document.all[s_id] } :
  256. function (s_id) { return document.getElementById(s_id) };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement