API tools faq
paste
Advertisement
Guest User

Slider Code

a guest
Nov 4th, 2015
115
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 56.44 KB | None | 0 0
raw download clone embed print report
  1. <script>
  2.  
  3. /*
  4. Copyright &copy; 2015 Jay Wilson / ImageSliderMaker.com - All Rights Reserved
  5. */
  6.  
  7. (function() {
  8.  
  9. //////////////
  10. // ISMQuery //
  11. //////////////
  12.  
  13. // ISMQuery (iq): Simple jQuery-like implementation for IE8+ DOM manipulation under ISM
  14. function ISMQuery(el_or_selector, node_list) {
  15. this.selector = null;
  16. if(node_list)
  17. {
  18. this.nodes = node_list;
  19. }
  20. else if(typeof el_or_selector == "string")
  21. {
  22. this.selector = el_or_selector;
  23. this.nodes = document.querySelectorAll(el_or_selector);
  24. }
  25. else // assume single node; set this.nodes as raw array, which is okay for our needs
  26. {
  27. this.nodes = [el_or_selector];
  28. }
  29. this.length = this.nodes.length;
  30. this.el = this.nodes[0];
  31. };
  32.  
  33. function iq(el_or_selector) {
  34. return new ISMQuery(el_or_selector);
  35. };
  36.  
  37. ISMQuery.prototype.get = function(index) {
  38. return this.nodes[index];
  39. };
  40.  
  41. ISMQuery.prototype.find = function(selector) {
  42. var el = this.el;
  43. var found_nodes = el.querySelectorAll(selector);
  44. return new ISMQuery(null, found_nodes);
  45. };
  46.  
  47. ISMQuery.prototype.index = function() {
  48. var child = this.el;
  49. var i = 0;
  50. while((child = child.previousSibling) != null)
  51. {
  52. i++;
  53. }
  54. return i;
  55. };
  56.  
  57. ISMQuery.prototype.each = function(cb) {
  58. for(var i = 0; i < this.nodes.length; i++)
  59. {
  60. var el = this.nodes[i];
  61. var iqObj = new ISMQuery(el);
  62. cb.call(iqObj, i, iqObj);
  63. }
  64. };
  65.  
  66. ISMQuery.prototype.remove = function() {
  67. for(var i = 0; i < this.nodes.length; i++)
  68. {
  69. var el = this.nodes[i];
  70. el.parentNode.removeChild(el);
  71. }
  72. };
  73.  
  74. ISMQuery.prototype.removeAttr = function(name) {
  75. for(var i = 0; i < this.nodes.length; i++)
  76. {
  77. var el = this.nodes[i];
  78. el.removeAttribute(name);
  79. }
  80. };
  81.  
  82. ISMQuery.prototype.attr = function(name, value) {
  83. var el = this.el;
  84. if(value != undefined)
  85. {
  86. el.setAttribute(name, value);
  87. }
  88. else
  89. {
  90. return el.getAttribute(name);
  91. }
  92. };
  93.  
  94. ISMQuery.prototype.data = function(name) {
  95. var el = this.el;
  96. return el.getAttribute("data-" + name);
  97. };
  98.  
  99. ISMQuery.prototype.hasClass = function(class_name) {
  100. var el = this.el;
  101. if(el.classList)
  102. {
  103. return el.classList.contains(class_name);
  104. }
  105. else
  106. {
  107. return (new RegExp('(^| )' + class_name + '( |$)', 'gi')).test(el.className);
  108. }
  109. };
  110.  
  111. ISMQuery.prototype.addClass = function(class_name) {
  112. for(var i = 0; i < this.nodes.length; i++)
  113. {
  114. var el = this.nodes[i];
  115. if(el.classList)
  116. {
  117. el.classList.add(class_name);
  118. }
  119. else
  120. {
  121. el.className += " " + class_name;
  122. }
  123. }
  124. };
  125.  
  126. ISMQuery.prototype.removeClass = function(class_name) {
  127. for(var i = 0; i < this.nodes.length; i++)
  128. {
  129. var el = this.nodes[i];
  130. if(el.classList)
  131. {
  132. el.classList.remove(class_name.split(" "));
  133. }
  134. else
  135. {
  136. el.className = el.className.replace(new RegExp('(^|\\b)' + class_name.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  137. }
  138. }
  139. };
  140.  
  141. ISMQuery.prototype.show = function() {
  142. for(var i = 0; i < this.nodes.length; i++)
  143. {
  144. var el = this.nodes[i];
  145. if(el && el.style)
  146. {
  147. el.style.display = "";
  148. }
  149. }
  150. };
  151.  
  152. ISMQuery.prototype.hide = function() {
  153. for(var i = 0; i < this.nodes.length; i++)
  154. {
  155. var el = this.el;
  156. if(el && el.style)
  157. {
  158. el.style.display = "none";
  159. }
  160. }
  161. };
  162.  
  163. ISMQuery.prototype.css = function(prop, value) {
  164. for(var i = 0; i < this.nodes.length; i++)
  165. {
  166. var el = this.nodes[i];
  167. el.style[prop] = value;
  168. }
  169. };
  170.  
  171. ISMQuery.prototype.fadeIn = function(duration, callback) {
  172. var el = this.el;
  173. duration = duration || 400;
  174. var opacity = 0;
  175. el.style.opacity = 0;
  176. el.style.filter = '';
  177. var last = +new Date();
  178. var tick = function() {
  179. opacity += (new Date() - last) / duration;
  180. el.style.opacity = opacity;
  181. el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';
  182. last = +new Date();
  183. if(opacity < 1)
  184. {
  185. (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
  186. }
  187. else if(callback)
  188. {
  189. callback();
  190. }
  191. };
  192. tick();
  193. };
  194.  
  195. ISMQuery.prototype.fadeOut = function(duration, callback) {
  196. var el = this.el;
  197. duration = duration || 400;
  198. var opacity = 1;
  199. el.style.opacity = 1;
  200. el.style.filter = '';
  201. var last = +new Date();
  202. var tick = function() {
  203. opacity -= (new Date() - last) / duration;
  204. el.style.opacity = opacity;
  205. el.style.filter = 'alpha(opacity=' + (100 * opacity)|0 + ')';
  206. last = +new Date();
  207. if(opacity > 0)
  208. {
  209. (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
  210. }
  211. else if(callback)
  212. {
  213. callback();
  214. }
  215. };
  216. tick();
  217. };
  218.  
  219. ISMQuery.prototype.wrap = function(html) {
  220. for(var i = 0; i < this.nodes.length; i++)
  221. {
  222. var el = this.nodes[i];
  223. var el_index = (new ISMQuery(el)).index();
  224. var el_html = el.outerHTML;
  225. var parent = el.parentNode;
  226. el.insertAdjacentHTML("beforebegin", html);
  227. ////el.remove();
  228. parent.removeChild(el);
  229. var wrap_elem = parent.childNodes[el_index];
  230. wrap_elem.innerHTML = el_html;
  231. }
  232. };
  233.  
  234. ISMQuery.prototype.wrapInner = function(html) {
  235. var el = this.el;
  236. var el_inner_html = el.innerHTML;
  237. el.innerHTML = html;
  238. el.firstChild.innerHTML = el_inner_html;
  239. };
  240.  
  241. ISMQuery.prototype.unwrap = function() {
  242. var el = this.el;
  243. el.parentNode.outerHTML = el.parentNode.innerHTML;
  244. };
  245.  
  246. ISMQuery.prototype.after = function(html) {
  247. var el = this.el;
  248. el.insertAdjacentHTML("afterend", html);
  249. };
  250.  
  251. ISMQuery.prototype.append = function(html) {
  252. var el = this.el;
  253. el.insertAdjacentHTML("beforeend", html);
  254. };
  255.  
  256. ISMQuery.prototype.insertAfter = function(an_el) {
  257. var el = this.el;
  258. an_el.parentNode.insertBefore(el, an_el.nextSibling);
  259. };
  260.  
  261. ISMQuery.prototype.clone = function() {
  262. var el = this.el;
  263. return new ISMQuery(el.cloneNode(true)); // deep == true
  264. };
  265.  
  266. ISMQuery.prototype.on = function(event_name, handler) {
  267. for(var i = 0; i < this.nodes.length; i++)
  268. {
  269. var el = this.nodes[i];
  270. if(el.addEventListener)
  271. {
  272. el.addEventListener(event_name, handler);
  273. }
  274. else
  275. {
  276. el.attachEvent("on" + event_name, function() {
  277. handler.call(el);
  278. });
  279. }
  280. }
  281. };
  282.  
  283. ISMQuery.prototype.off = function(event_name, handler) {
  284. for(var i = 0; i < this.nodes.length; i++)
  285. {
  286. var el = this.nodes[i];
  287. if(el)
  288. {
  289. if(el.removeEventListener)
  290. {
  291. el.removeEventListener(event_name, handler);
  292. }
  293. else
  294. {
  295. el.detachEvent("on" + event_name, handler);
  296. }
  297. }
  298. }
  299. };
  300.  
  301. // static
  302. iq.ready = function(cb) {
  303. console.log("document.readyState(" + document.readyState + ") document.addEventListener(" + (!!document.addEventListener) + ")");
  304. if(document.readyState === "complete")
  305. {
  306. setTimeout(cb, 1);
  307. }
  308. else if(document.addEventListener)
  309. {
  310. document.addEventListener("DOMContentLoaded", cb, false);
  311. }
  312. else
  313. {
  314. document.attachEvent("onreadystatechange", function() {
  315. if(document.readyState === "complete")
  316. {
  317. cb();
  318. }
  319. });
  320. }
  321. };
  322.  
  323. //////////
  324. //////////
  325. //////////
  326.  
  327. function ISMSlider(element_id, options) {
  328.  
  329. var default_options = {
  330. transition_type: "slide", // "instant" | "slide" | "fade" | "zoom"
  331. play_type: "manual", // "manual" | "once" | "once-rewind" | "loop"
  332. interval: 7000, // time in ms
  333. image_fx: "none", // "none" | "zoompan" | "zoomrotate"
  334. buttons: true, // true | false
  335. radios: true, // true | false
  336. radio_type: "button", // "button" | "thumbnail"
  337. pause_button: true, // true | false
  338. transition_duration: 350, // applies to fade and zoom transition types only
  339. swipe: true // true | false
  340. };
  341.  
  342. var default_captions = [{enable:false,delay:0}, {enable:false,delay:200}, {enable:false,delay:400}];
  343.  
  344. var opts, ol, slide_width_pc, slide_index,
  345. buttons, prev_button, next_button, radios, pause_button,
  346. autoplay_run, autoplay_timeout,
  347. in_transition, dragger, listeners = {};
  348.  
  349. init(options, false, options.prevent_stop_loading || false);
  350.  
  351. //////////
  352. // INIT //
  353. //////////
  354.  
  355. function init(options_arg, reset, prevent_stop_loading) {
  356.  
  357. options_arg = options_arg || {};
  358.  
  359. start_loading();
  360.  
  361. if(reset !== false)
  362. {
  363. // Reset all HTML, CSS, animation state
  364. reset_all();
  365. }
  366.  
  367. opts = null;
  368. ol = null;
  369. slide_width_pc = null;
  370. slide_index = (-1);
  371. buttons = null;
  372. prev_button = null;
  373. next_button = null;
  374. radios = null;
  375. pause_button = null;
  376. autoplay_run = false;
  377. autoplay_timeout = null;
  378. in_transition = false;
  379. dragger = null;
  380.  
  381. // Merge given config with default config
  382. init_config(options_arg);
  383.  
  384. // Create references to slide elements and count slides
  385. // Modify markup - add classes, container divs, ...
  386. analyze_and_modify_markup();
  387.  
  388. // Set animation type to "instant", "slide", "fade" or "zoom"
  389. set_transition_type(opts.transition_type, true);
  390.  
  391. // Initialise captions
  392. init_captions();
  393.  
  394. // Render markup for previous and next buttons and bind click events
  395. init_buttons();
  396.  
  397. // Render radios markup and bind click events
  398. init_radios();
  399.  
  400. // Initialise autoplay
  401. set_play_type(opts.play_type);
  402.  
  403. // Listen for swipe events on slider
  404. bind_swipe();
  405.  
  406. setTimeout(function() {
  407. if(prevent_stop_loading !== true)
  408. {
  409. stop_loading();
  410. }
  411. }, 1000);
  412.  
  413. console.log("ISMSlider Ready");
  414.  
  415. };
  416.  
  417. /////////////
  418. // LOADING //
  419. /////////////
  420.  
  421. function start_loading() {
  422.  
  423. iq("#" + element_id + "-ism-loading-mask").remove();
  424.  
  425. var loading_div = document.createElement("DIV");
  426.  
  427. loading_div.id = element_id + "-ism-loading-mask";
  428. loading_div.style.position = "absolute";
  429. loading_div.style.zIndex = 10;
  430. loading_div.style.top = 0;
  431. loading_div.style.bottom = 0;
  432. loading_div.style.left = 0;
  433. loading_div.style.right = 0;
  434. loading_div.style.backgroundColor = "#eee";
  435.  
  436. iq("#" + element_id).el.appendChild(loading_div);
  437.  
  438. };
  439.  
  440. function stop_loading() {
  441.  
  442. iq("#" + element_id).show();
  443.  
  444. var loading_mask = iq("#" + element_id + "-ism-loading-mask");
  445. if(loading_mask.length == 1)
  446. {
  447. iq("#" + element_id + "-ism-loading-mask").fadeOut(400, function() {
  448. iq("#" + element_id + "-ism-loading-mask").remove();
  449.  
  450. // Run image effects on initial slide
  451. run_image_fx(0);
  452.  
  453. // This is normally called by the transition functions
  454. trigger_slide_captions(0);
  455.  
  456. });
  457. }
  458.  
  459. };
  460.  
  461. ////////////
  462. // CONFIG //
  463. ////////////
  464.  
  465. function init_config(given_opts) {
  466.  
  467. // Config provided using JavaScript has precedence
  468. // <div class="ism-slider" data-transition-type="" data-play-type="" data-pause="" data-interval="" data-image-fx="" data-buttons="" data-radios="">
  469.  
  470. for(var p in default_options)
  471. {
  472. var type = typeof default_options[p];
  473. if(given_opts[p] == undefined && type != "object")
  474. {
  475. var data_value = iq("#" + element_id).data(p);
  476. if(data_value != undefined)
  477. {
  478. given_opts[p] = data_value;
  479. }
  480. }
  481. }
  482.  
  483. opts = given_opts || {};
  484.  
  485. // Apply default options where no value provided
  486. for(var p in default_options)
  487. {
  488. if(opts[p] == undefined)
  489. {
  490. opts[p] = default_options[p];
  491. }
  492. }
  493.  
  494. // Get caption data attributes or apply defaults in their absence
  495. opts.captions = [];
  496.  
  497. var li_els = iq("#" + element_id + " ol > li");
  498. var slide_count = li_els.length;
  499. for(var s_i = 0; s_i < slide_count; s_i++)
  500. {
  501. opts.captions[s_i] = [];
  502. for(var c_i = 0; c_i < 3; c_i++)
  503. {
  504. var caption_config = {
  505. enable: default_captions[c_i].enable,
  506. delay: default_captions[c_i].delay
  507. };
  508. var caption_el = iq(li_els.get(s_i)).find(".ism-caption-" + c_i);
  509. if(caption_el.length == 1)
  510. {
  511. caption_config.enable = true;
  512. var data_delay = caption_el.data("delay");
  513. if(!isNaN(data_delay))
  514. {
  515. caption_config.delay = parseInt(data_delay);
  516. }
  517. }
  518. opts.captions[s_i][c_i] = caption_config;
  519. }
  520. }
  521.  
  522. };
  523.  
  524. ///////////
  525. // RESET //
  526. ///////////
  527.  
  528. function reset_all() {
  529.  
  530. reset_autoplay();
  531. remove_image_fx();
  532. unbind_swipe();
  533. unbind_buttons();
  534. unbind_radios();
  535. unbind_pause_button();
  536. iq("#" + element_id + " .ism-button").remove();
  537. iq("#" + element_id + " .ism-radios").remove();
  538. iq("#" + element_id + " .ism-cloned").remove();
  539. iq("#" + element_id + " .ism-tmp-clone").remove();
  540. while(iq("#" + element_id + " .ism-frame").length > 0)
  541. {
  542. iq("#" + element_id + " .ism-slides").unwrap();
  543. }
  544. if(iq("#" + element_id + " .ism-img-frame").length > 0)
  545. {
  546. iq("#" + element_id + " .ism-img").unwrap();
  547. }
  548.  
  549. iq("#" + element_id + " .ism-caption").removeAttr("style");
  550. iq("#" + element_id + " .ism-slide").show();
  551. iq("#" + element_id + " .ism-slide").removeAttr("style");
  552. iq("#" + element_id + " .ism-slides").removeAttr("style");
  553. iq("#" + element_id + " .ism-img").removeClass("ism-img");
  554.  
  555. iq("#" + element_id + " .ism-slide").removeClass("ism-slide ism-slide-0 ism-slide-1 ism-slide-2 ism-slide-3 ism-slide-4 ism-slide-5 ism-slide-6 ism-slide-7 ism-slide-8 ism-slide-9");
  556. iq("#" + element_id + " .ism-slides").removeClass("ism-slides");
  557. iq("#" + element_id).removeClass("active");
  558.  
  559. };
  560.  
  561. ////////////////////////
  562. // ANALYSE AND MODIFY //
  563. ////////////////////////
  564.  
  565. function analyze_and_modify_markup() {
  566.  
  567. ol = iq("#" + element_id + " ol");
  568. var slide_count = iq("#" + element_id + " ol > li").length;
  569. slide_width_pc = 100.0 / (slide_count);
  570. slide_index = 0;
  571.  
  572. ol.addClass("ism-slides");
  573. iq("#" + element_id + " .ism-slides > li").addClass("ism-slide");
  574. iq("#" + element_id + " .ism-slides > .ism-slide > img, #" + element_id + " .ism-slides > .ism-slide > a > img").addClass("ism-img");
  575.  
  576. ol.find("li").each(function(indx) {
  577. this.addClass("ism-slide-" + indx);
  578. });
  579.  
  580. var slider_frame_html = "<div class='ism-frame'></div>";
  581. iq("#" + element_id).wrapInner(slider_frame_html); // this breaks things
  582. ol = iq("#" + element_id + " ol.ism-slides"); // wrapInner method replaces ol node with copy
  583.  
  584. var img_frame_html = "<div class='ism-img-frame'></div>";
  585. iq("#" + element_id + " .ism-img").wrap(img_frame_html);
  586.  
  587. };
  588.  
  589. function get_slide_count() {
  590.  
  591. return iq("#" + element_id + " .ism-slide").length;
  592.  
  593. };
  594.  
  595. function get_active_slide_index() {
  596.  
  597. return slide_index;
  598.  
  599. };
  600.  
  601. //////////////
  602. // AUTOPLAY //
  603. //////////////
  604.  
  605. function set_play_type(play_type) {
  606.  
  607. opts.play_type = play_type;
  608.  
  609. // Render markup for pause button and bind click event
  610. init_pause_button();
  611.  
  612. continue_autoplay()
  613.  
  614. };
  615.  
  616. function set_interval(play_rate) {
  617.  
  618. opts.interval = play_rate;
  619.  
  620. };
  621.  
  622. function continue_autoplay() {
  623.  
  624. autoplay_run = true;
  625. iq("#" + element_id + " .ism-pause-button").removeClass("ism-play");
  626.  
  627. if(opts.play_type != "manual")
  628. {
  629. clearTimeout(autoplay_timeout);
  630. autoplay_timeout = setTimeout(do_autoplay, opts.interval);
  631. }
  632.  
  633. };
  634.  
  635. function do_autoplay() {
  636.  
  637. var next_slide_index = slide_index + 1;
  638.  
  639. if(autoplay_run && opts.play_type != "manual")
  640. {
  641. if(opts.play_type == "once" && slide_index == get_slide_count() - 2) // penultimate slide
  642. {
  643. transition(next_slide_index);
  644. pause_autoplay();
  645. }
  646. else if(opts.play_type == "once-rewind" && slide_index == get_slide_count() - 1) // last slide
  647. {
  648. transition(0);
  649. pause_autoplay();
  650. }
  651. else if(opts.play_type == "loop" && slide_index == get_slide_count() - 1) // last slide
  652. {
  653. transition(0);
  654. continue_autoplay();
  655. }
  656. else
  657. {
  658. transition(next_slide_index);
  659. continue_autoplay();
  660. }
  661. }
  662.  
  663. };
  664.  
  665. function pause_autoplay() {
  666.  
  667. autoplay_run = false;
  668. clearTimeout(autoplay_timeout);
  669. autoplay_timeout = null;
  670.  
  671. iq("#" + element_id + " .ism-pause-button").addClass("ism-play");
  672.  
  673. };
  674.  
  675. function reset_autoplay() {
  676.  
  677. pause_autoplay();
  678.  
  679. };
  680.  
  681. function user_play(new_slide_index, callback) {
  682.  
  683. if(new_slide_index != slide_index)
  684. {
  685. pause_autoplay();
  686. transition(new_slide_index, callback);
  687. }
  688.  
  689. };
  690.  
  691. /////////////
  692. // BUTTONS //
  693. /////////////
  694.  
  695. function init_buttons() {
  696.  
  697. if(opts.buttons)
  698. {
  699. var buttons_html = "<div class='ism-button ism-button-prev'>&nbsp;</div>"
  700. + "<div class='ism-button ism-button-next'>&nbsp;</div>";
  701. ol.after(buttons_html);
  702. prev_button = iq("#" + element_id + " .ism-button-prev");
  703. next_button = iq("#" + element_id + " .ism-button-next");
  704.  
  705. // Listen for click of prev button
  706. prev_button.on("click", prev_button_handler);
  707. prev_button.on("touchstart", prev_button_handler);
  708.  
  709. // Listen for click of next button
  710. next_button.on("click", next_button_handler);
  711. next_button.on("touchstart", next_button_handler);
  712. }
  713.  
  714. };
  715.  
  716. function enable_buttons(enable) {
  717. if(enable === true && !opts.buttons)
  718. {
  719. unbind_buttons();
  720. iq("#" + element_id + " .ism-button").remove();
  721. init_buttons();
  722. }
  723. };
  724.  
  725. function unbind_buttons() {
  726.  
  727. iq("#" + element_id + " .ism-button-prev").off("click", prev_button_handler);
  728. iq("#" + element_id + " .ism-button-prev").off("touchstart", prev_button_handler);
  729. iq("#" + element_id + " .ism-button-next").off("click", next_button_handler);
  730. iq("#" + element_id + " .ism-button-next").off("touchstart", next_button_handler);
  731.  
  732. };
  733.  
  734. function prev_button_handler(e) {
  735. if(e && e.preventDefault)
  736. {
  737. e.preventDefault();
  738. }
  739. if(e && e.stopPropagation)
  740. {
  741. e.stopPropagation();
  742. }
  743. user_play(slide_index - 1);
  744. };
  745.  
  746. function next_button_handler(e) {
  747. if(e && e.preventDefault)
  748. {
  749. e.preventDefault();
  750. }
  751. if(e && e.stopPropagation)
  752. {
  753. e.stopPropagation();
  754. }
  755. user_play(slide_index + 1);
  756. };
  757.  
  758. ////////////
  759. // RADIOS //
  760. ////////////
  761.  
  762. function set_radio_type(radio_type) {
  763.  
  764. if(radio_type == "thumbnail")
  765. {
  766. iq("#" + element_id + " .ism-radios").addClass("ism-radios-as-thumbnails");
  767. }
  768. else
  769. {
  770. iq("#" + element_id + " .ism-radios").removeClass("ism-radios-as-thumbnails");
  771. }
  772.  
  773. };
  774.  
  775. function init_radios() {
  776.  
  777. // Radios
  778. if(opts.radios)
  779. {
  780. iq("#" + element_id).append("<ul class='ism-radios'></ul>");
  781. radios = iq("#" + element_id + " .ism-radios");
  782.  
  783. if(opts.radio_type == "thumbnail")
  784. {
  785. radios.addClass("ism-radios-as-thumbnails");
  786. }
  787.  
  788. for(var i = 0; i < get_slide_count(); i++)
  789. {
  790. if(i == 0)
  791. {
  792. radios.append("<li class='ism-radio-" + i + " active'>"
  793. + "<input type='radio' name='ism-radio' class='ism-radio' id='ism-radio-" + i + "' checked='checked' />"
  794. + "<label class='ism-radio-label' for='ism-radio-" + i + "'></label>"
  795. + "</li>");
  796. }
  797. else
  798. {
  799. radios.append("<li class='ism-radio-" + i + "'>"
  800. + "<input type='radio' name='ism-radio' class='ism-radio' id='ism-radio-" + i + "' />"
  801. + "<label class='ism-radio-label' for='ism-radio-" + i + "'></label>"
  802. + "</li>");
  803. }
  804. }
  805.  
  806. iq("#" + element_id + " .ism-radios input.ism-radio, #" + element_id + " .ism-radios .ism-radio-label").on("click", radio_handler);
  807. iq("#" + element_id + " .ism-radios input.ism-radio, #" + element_id + " .ism-radios .ism-radio-label").on("touchstart", radio_handler);
  808. }
  809.  
  810. };
  811.  
  812. function enable_radios(enable) {
  813. };
  814.  
  815. function unbind_radios() {
  816. iq("#" + element_id + " .ism-radios input.ism-radio, #" + element_id + " .ism-radios .ism-radio-label").off("click", radio_handler);
  817. iq("#" + element_id + " .ism-radios input.ism-radio, #" + element_id + " .ism-radios .ism-radio-label").off("touchstart", radio_handler);
  818. };
  819.  
  820. function radio_handler(e) {
  821. if(e.preventDefault)
  822. {
  823. e.preventDefault();
  824. }
  825. if(e.stopPropagation)
  826. {
  827. e.stopPropagation();
  828. }
  829.  
  830. var radio_index = iq(e.target.parentNode).index();
  831. user_play(radio_index);
  832. };
  833.  
  834. function refresh_radios(new_slide_index) {
  835.  
  836. if(opts.radios)
  837. {
  838. iq("#" + element_id + " .ism-radios li").removeClass("active");
  839. var radio_li = iq("#" + element_id + " .ism-radios li").get(new_slide_index);
  840. iq(radio_li).addClass("active");
  841. iq(radio_li).find("input").attr("checked", "checked");
  842. }
  843.  
  844. };
  845.  
  846. //////////////////
  847. // PAUSE BUTTON //
  848. //////////////////
  849.  
  850. function init_pause_button() {
  851.  
  852. unbind_pause_button();
  853. iq("#" + element_id + " .ism-pause-button").remove();
  854.  
  855. if(opts.pause_button && opts.play_type != "manual")
  856. {
  857. var pause_button_html = "<div class='ism-pause-button'>&nbsp;</div>";
  858. ol.after(pause_button_html);
  859. pause_button = iq("#" + element_id + " .ism-pause-button");
  860.  
  861. // Listen for click of pause button
  862. pause_button.on("click", pause_button_handler);
  863. pause_button.on("touchstart", pause_button_handler);
  864. }
  865.  
  866. };
  867.  
  868. function unbind_pause_button() {
  869.  
  870. iq("#" + element_id + " .ism-pause-button").off("click", pause_button_handler);
  871. iq("#" + element_id + " .ism-pause-button").off("touchstart", pause_button_handler);
  872.  
  873. };
  874.  
  875. function pause_button_handler(e) {
  876. e.preventDefault();
  877. e.stopPropagation();
  878.  
  879. if(autoplay_run)
  880. {
  881. pause_autoplay();
  882. }
  883. else
  884. {
  885. continue_autoplay();
  886. }
  887.  
  888. };
  889.  
  890. ///////////
  891. // SWIPE //
  892. ///////////
  893.  
  894. function bind_swipe() {
  895.  
  896. var slider_el = iq("#" + element_id).get(0);
  897. var handle_el = ol.get(0);
  898.  
  899. dragger = new Dragdealer(slider_el, handle_el, {
  900. steps: get_slide_count(),
  901. x: 0,
  902. speed: 0.2,
  903. loose: true,
  904. requestAnimationFrame: true,
  905. dragStartCallback: function() {
  906. pause_autoplay();
  907. },
  908. dragStopCallback: function(x_val, y_val) {
  909. var real_index = (dragger.getStep()[0] - 1); // -1: convert from 1-based to 0-based index
  910. new_slide_index = real_index;
  911. pause_autoplay();
  912. after_swipe(new_slide_index);
  913. },
  914. onAfterGlide: function() {
  915. dragger.setStep(slide_index + 1, 1, true); // +1 because dragger uses 1-based index
  916. }
  917. });
  918.  
  919. // After render and after slider's width has been determined
  920. window.onload = function() {
  921. setTimeout(function() { dragger.reflow(); }, 150);
  922. setTimeout(function() { dragger.reflow(); }, 600);
  923. };
  924.  
  925. };
  926.  
  927. function unbind_swipe() {
  928. if(dragger)
  929. {
  930. dragger.unbindEventListeners();
  931. }
  932. };
  933.  
  934. function reflow() {
  935. if(dragger)
  936. {
  937. dragger.setStep(slide_index + 1, 1, true); // +1 because dragger uses 1-based index
  938. dragger.reflow();
  939. }
  940. };
  941.  
  942. ////////////
  943. // EVENTS //
  944. ////////////
  945.  
  946. function fire(event_name, args) {
  947.  
  948. if(listeners[event_name])
  949. {
  950. listeners[event_name].apply(this, args);
  951. }
  952.  
  953. };
  954.  
  955. function listen(event_name, callback) {
  956.  
  957. // Only allows one listener per event
  958. listeners[event_name] = callback;
  959.  
  960. };
  961.  
  962. /////////////////////
  963. // SLIDE ANIMATION //
  964. /////////////////////
  965.  
  966. function set_transition_type(new_transition_type, force) {
  967.  
  968. if(force != true && new_transition_type == opts["transition_type"])
  969. {
  970. return;
  971. }
  972.  
  973. opts["transition_type"] = new_transition_type;
  974.  
  975. iq("#" + element_id + " .ism-slide").removeClass("ism-zoom-in");
  976. iq("#" + element_id + " .ism-slide").show();
  977.  
  978. var ol_unit_length = get_slide_count();
  979. var unit_fraction = 1.0 / ol_unit_length;
  980. ol.css("width", (100.0 * ol_unit_length) + "%");
  981.  
  982. ol.find(".ism-slide").each(function(indx) {
  983. var left_percent = (slide_width_pc * indx) + "%";
  984. var width_percent = (100.0 / ol_unit_length) + "%";
  985. this.css("width", width_percent);
  986. this.css("left", left_percent);
  987. });
  988.  
  989. };
  990.  
  991. function transition(new_slide_index, callback) {
  992.  
  993. if(in_transition !== true && new_slide_index != slide_index)
  994. {
  995. in_transition = true;
  996.  
  997. var current_slide_index = slide_index;
  998.  
  999. new_slide_index = parseInt(new_slide_index);
  1000.  
  1001. if(new_slide_index < 0)
  1002. {
  1003. new_slide_index = get_slide_count() - 1;
  1004. }
  1005. else if(new_slide_index >= get_slide_count())
  1006. {
  1007. new_slide_index = 0;
  1008. }
  1009.  
  1010. before_transition(current_slide_index, new_slide_index);
  1011.  
  1012. if(opts.transition_type == "instant")
  1013. {
  1014. instant_swap(current_slide_index, new_slide_index, callback);
  1015. }
  1016. else if(opts.transition_type == "slide")
  1017. {
  1018. hori_slide(current_slide_index, new_slide_index, callback);
  1019. }
  1020. else if(opts.transition_type == "fade")
  1021. {
  1022. fade(current_slide_index, new_slide_index, false, callback);
  1023. }
  1024. else if(opts.transition_type == "zoom")
  1025. {
  1026. fade(current_slide_index, new_slide_index, true, callback);
  1027. }
  1028. }
  1029.  
  1030. };
  1031.  
  1032. function before_transition(current_slide_index, new_slide_index) {
  1033.  
  1034. refresh_radios(new_slide_index);
  1035.  
  1036. slide_index = new_slide_index;
  1037.  
  1038. fire("beforetransition", [new_slide_index]);
  1039.  
  1040. };
  1041.  
  1042. function instant_swap(current_slide_index, new_slide_index, callback) {
  1043.  
  1044. dragger.setStep(new_slide_index + 1, 1, true);
  1045.  
  1046. after_transition(current_slide_index, new_slide_index, true, callback);
  1047.  
  1048. };
  1049.  
  1050. function hori_slide(current_slide_index, new_slide_index, callback) {
  1051.  
  1052. var target_ratio = (new_slide_index) / (get_slide_count() - 1); // e.g. 0/(4-1)=0, 1/(4-1)=0.33, 2/(4-1)=0.66, 3/(4-1)=1
  1053.  
  1054. dragger.startSlide(target_ratio, function() {
  1055.  
  1056. after_transition(current_slide_index, new_slide_index, true, callback);
  1057.  
  1058. });
  1059.  
  1060. };
  1061.  
  1062. function fade(current_slide_index, new_slide_index, zoom, callback) {
  1063.  
  1064. iq("#" + element_id + " li.ism-slide").removeClass("ism-zoom-in");
  1065.  
  1066. var li_current = iq("#" + element_id + " li.ism-slide-" + current_slide_index);
  1067.  
  1068. // Clone 'next' slide
  1069. var ol_clone = ol.clone();
  1070. ol_clone.addClass("ism-slides-clone");
  1071. var pos_ratio = (new_slide_index) / (get_slide_count() - 1);
  1072. var offset = dragger.getOffsetsByRatios([pos_ratio, 0]);
  1073. ////ol_clone.hide();
  1074. ol_clone.css("transform", "translateX(" + offset[0] + "px)");
  1075. ol_clone.insertAfter(ol.el);
  1076.  
  1077. if(zoom)
  1078. {
  1079. li_current.addClass("ism-zoom-in");
  1080. }
  1081.  
  1082. ol_clone.fadeIn(opts.transition_duration * 2, function() {
  1083. dragger.setStep(new_slide_index + 1, 1, true);
  1084. iq("#" + element_id + " .ism-slides-clone").remove();
  1085. iq("#" + element_id + " .ism-slides").show();
  1086. iq("#" + element_id + " .ism-slides").css("opacity", null);
  1087. after_transition(current_slide_index, new_slide_index, true, callback);
  1088. console.log("fadeIn ok");
  1089. });
  1090.  
  1091. ol.fadeOut(opts.transition_duration * 2 * 0.9, function() {
  1092. console.log("fadeOut ok");
  1093. });
  1094.  
  1095. };
  1096.  
  1097. function after_swipe(new_slide_index) {
  1098.  
  1099. var current_slide_index = slide_index;
  1100.  
  1101. slide_index = new_slide_index;
  1102. fire("afterswipe", [new_slide_index]);
  1103. refresh_radios(new_slide_index);
  1104.  
  1105. after_transition(current_slide_index, new_slide_index, false);
  1106.  
  1107. };
  1108.  
  1109. function after_transition(current_slide_index, new_slide_index, do_reflow, callback) {
  1110.  
  1111. new_slide_index = parseInt(new_slide_index);
  1112.  
  1113. iq("#" + element_id + " .ism-slides-clone").remove();
  1114. iq("#" + element_id + " .ism-slides").show();
  1115. iq("#" + element_id + " li.ism-slide").removeClass("ism-zoom-in");
  1116.  
  1117. if(do_reflow)
  1118. {
  1119. reflow();
  1120. }
  1121.  
  1122. if(callback) { callback(); }
  1123.  
  1124. run_image_fx(new_slide_index);
  1125.  
  1126. trigger_slide_captions(new_slide_index);
  1127.  
  1128. in_transition = false;
  1129.  
  1130. fire("aftertransition", [new_slide_index]);
  1131.  
  1132. };
  1133.  
  1134. //////////////
  1135. // IMAGE FX //
  1136. //////////////
  1137.  
  1138. function set_image_fx(image_effect) {
  1139.  
  1140. if(image_effect != opts["image_fx"])
  1141. {
  1142. opts["image_fx"] = image_effect;
  1143.  
  1144. run_image_fx(slide_index);
  1145. }
  1146. else
  1147. {
  1148. opts["image_fx"] = image_effect;
  1149. }
  1150.  
  1151. };
  1152.  
  1153. function run_image_fx(new_slide_index) {
  1154.  
  1155. remove_image_fx();
  1156.  
  1157. if(opts["image_fx"] == "none")
  1158. {
  1159. return;
  1160. }
  1161. else if(opts["image_fx"] == "zoompan")
  1162. {
  1163. iq("#" + element_id + " .ism-slide-" + new_slide_index + " .ism-img-frame").addClass("ism-zoom-pan");
  1164. }
  1165. else if(opts["image_fx"] == "zoomrotate")
  1166. {
  1167. iq("#" + element_id + " .ism-slide-" + new_slide_index + " .ism-img-frame").addClass("ism-zoom-rotate");
  1168. }
  1169.  
  1170. };
  1171.  
  1172. function remove_image_fx() {
  1173.  
  1174. iq("#" + element_id + " .ism-slide .ism-img-frame").removeClass("ism-zoom-pan");
  1175. iq("#" + element_id + " .ism-slide .ism-img-frame").removeClass("ism-zoom-rotate");
  1176.  
  1177. };
  1178.  
  1179. //////////////
  1180. // CAPTIONS //
  1181. //////////////
  1182.  
  1183. function init_captions() {
  1184.  
  1185. ol.find("#" + element_id + " .ism-caption").css("visibility", "hidden");
  1186.  
  1187. };
  1188.  
  1189. function set_caption_enable(slide_index, caption_index, enable) {
  1190.  
  1191. opts.captions[slide_index][caption_index].enable = enable;
  1192.  
  1193. };
  1194.  
  1195. function set_caption_delay(slide_index, caption_index, delay_ms) {
  1196.  
  1197. opts.captions[slide_index][caption_index].delay = delay_ms;
  1198.  
  1199. };
  1200.  
  1201. function trigger_slide_captions(s_i) {
  1202.  
  1203. ol.find(".ism-caption").css("visibility", "hidden");
  1204. ol.find(".ism-caption").removeClass("ism-caption-anim");
  1205.  
  1206. caption_transition(s_i, 0);
  1207. caption_transition(s_i, 1);
  1208. caption_transition(s_i, 2);
  1209.  
  1210. };
  1211.  
  1212. function caption_transition(s_i, c_i) {
  1213.  
  1214. if(opts.captions[s_i] && opts.captions[s_i][c_i].enable == true)
  1215. {
  1216. setTimeout(function() {
  1217. ol.find(".ism-slide-" + s_i + " .ism-caption-" + c_i).css("visibility", "visible");
  1218. ol.find(".ism-slide-" + s_i + " .ism-caption-" + c_i).addClass("ism-caption-anim");
  1219. }, opts.captions[s_i][c_i].delay);
  1220. }
  1221.  
  1222. };
  1223.  
  1224. function set_element_id(new_element_id) {
  1225.  
  1226. var elem = document.getElementById(element_id);
  1227. elem.id = new_element_id;
  1228. element_id = new_element_id;
  1229.  
  1230. };
  1231.  
  1232. ////////////
  1233. // PUBLIC //
  1234. ////////////
  1235.  
  1236. this.init = init;
  1237. this.deinit = reset_all;
  1238. this.stopLoading = stop_loading;
  1239. this.transition = transition;
  1240. this.listen = listen;
  1241. this.reflow = reflow;
  1242. this.setTransitionType = set_transition_type;
  1243. this.setPlayType = set_play_type;
  1244. this.setInterval = set_interval;
  1245. this.setImageFx = set_image_fx;
  1246. this.setCaptionEnable = set_caption_enable;
  1247. this.setCaptionDelay = set_caption_delay;
  1248. this.enableButtons = enable_buttons;
  1249. this.enableRadios = enable_radios;
  1250. this.setRadioType = set_radio_type;
  1251. this.getSlideCount = get_slide_count;
  1252. this.getActiveSlideIndex = get_active_slide_index;
  1253. this.setElementId = set_element_id;
  1254.  
  1255. };
  1256.  
  1257. window.ISM = window.ISM || {};
  1258. window.ISM.Slider = ISMSlider;
  1259. window.ISM.Config = window.ISM.Config || {};
  1260. window.ISM.instances = [];
  1261.  
  1262. iq.ready(function() {
  1263. console.log("iq.ready");
  1264. if(window.ISM.Config.no_instantiation !== true)
  1265. {
  1266. var slider_divs = iq(".ism-slider");
  1267. console.log(slider_divs + " - " + slider_divs.length);
  1268. for(var i = 0; i < slider_divs.length; i++)
  1269. {
  1270. console.log("[" + i + "]");
  1271. var slider_div = slider_divs.get(i);
  1272. slider_div.id = slider_div.id || "ism-slider-" + i;
  1273. window.ISM.instances.push(new ISMSlider(slider_div.id, {}));
  1274. }
  1275. }
  1276. });
  1277.  
  1278. })();
  1279.  
  1280. ////////////////////////////////////////////////////////////////////////////////
  1281. ////////////////////////////////////////////////////////////////////////////////
  1282. ////////////////////////////////////////////////////////////////////////////////
  1283.  
  1284. // Dragdealer.js 0.9.8 - ISM mod
  1285.  
  1286. (function (root, factory) {
  1287. if (typeof define === 'function' && define.amd) {
  1288. // AMD. Register as an anonymous module.
  1289. define(factory);
  1290. } else {
  1291. // Browser globals
  1292. root.Dragdealer = factory();
  1293. }
  1294. }(this, function () {
  1295.  
  1296. var Dragdealer = function(wrapper_el, handle_el, options) {
  1297.  
  1298. this.options = this.applyDefaults(options || {});
  1299. this.bindMethods();
  1300. this.wrapper = wrapper_el;
  1301. this.handle = handle_el;
  1302. this.init();
  1303. this.bindEventListeners();
  1304. };
  1305.  
  1306. Dragdealer.prototype = {
  1307. defaults: {
  1308. disabled: false,
  1309. horizontal: true,
  1310. vertical: false,
  1311. slide: true,
  1312. steps: 0,
  1313. snap: false,
  1314. loose: false,
  1315. speed: 0.1,
  1316. xPrecision: 0,
  1317. yPrecision: 0,
  1318. activeClass: 'active',
  1319. css3: true,
  1320. tapping: true,
  1321. afterSwipeCallback: function(){}
  1322. },
  1323. init: function() {
  1324. if (this.options.css3) {
  1325. triggerWebkitHardwareAcceleration(this.handle);
  1326. }
  1327. this.value = {
  1328. prev: [-1, -1],
  1329. current: [this.options.x || 0, this.options.y || 0],
  1330. target: [this.options.x || 0, this.options.y || 0]
  1331. };
  1332. this.offset = {
  1333. wrapper: [0, 0],
  1334. mouse: [0, 0],
  1335. prev: [-999999, -999999],
  1336. current: [0, 0],
  1337. target: [0, 0]
  1338. };
  1339. this.change = [0, 0];
  1340. this.stepRatios = this.calculateStepRatios();
  1341.  
  1342. this.activity = false;
  1343. this.dragging = false;
  1344. this.tapping = false;
  1345. this.sliding = false;
  1346. this.slide_count = 0;
  1347.  
  1348. this.reflow();
  1349. if (this.options.disabled) {
  1350. this.disable();
  1351. }
  1352. },
  1353. applyDefaults: function(options) {
  1354. for (var k in this.defaults) {
  1355. if (!options.hasOwnProperty(k)) {
  1356. options[k] = this.defaults[k];
  1357. }
  1358. }
  1359. return options;
  1360. },
  1361. calculateStepRatios: function() {
  1362. var stepRatios = [];
  1363. if (this.options.steps >= 1) {
  1364. for (var i = 0; i <= this.options.steps - 1; i++) {
  1365. if (this.options.steps > 1) {
  1366. stepRatios[i] = i / (this.options.steps - 1);
  1367. } else {
  1368. // A single step will always have a 0 value
  1369. stepRatios[i] = 0;
  1370. }
  1371. }
  1372. }
  1373. return stepRatios;
  1374. },
  1375. setWrapperOffset: function() {
  1376. this.offset.wrapper = Position.get(this.wrapper);
  1377. },
  1378. calculateBounds: function() {
  1379. var bounds = {
  1380. top: this.options.top || 0,
  1381. bottom: -(this.options.bottom || 0) + this.wrapper.offsetHeight,
  1382. left: this.options.left || 0,
  1383. right: -(this.options.right || 0) + this.wrapper.offsetWidth
  1384. };
  1385. bounds.availWidth = (bounds.right - bounds.left) - this.handle.offsetWidth;
  1386. bounds.availHeight = (bounds.bottom - bounds.top) - this.handle.offsetHeight;
  1387. return bounds;
  1388. },
  1389. calculateValuePrecision: function() {
  1390. var xPrecision = this.options.xPrecision || Math.abs(this.bounds.availWidth),
  1391. yPrecision = this.options.yPrecision || Math.abs(this.bounds.availHeight);
  1392. return [
  1393. xPrecision ? 1 / xPrecision : 0,
  1394. yPrecision ? 1 / yPrecision : 0
  1395. ];
  1396. },
  1397. bindMethods: function() {
  1398. if (typeof(this.options.customRequestAnimationFrame) === 'function') {
  1399. this.requestAnimationFrame = bind(this.options.customRequestAnimationFrame, window);
  1400. } else {
  1401. this.requestAnimationFrame = bind(requestAnimationFrame, window);
  1402. }
  1403. if (typeof(this.options.customCancelAnimationFrame) === 'function') {
  1404. this.cancelAnimationFrame = bind(this.options.customCancelAnimationFrame, window);
  1405. } else {
  1406. this.cancelAnimationFrame = bind(cancelAnimationFrame, window);
  1407. }
  1408. this.animateWithRequestAnimationFrame = bind(this.animateWithRequestAnimationFrame, this);
  1409. this.animate = bind(this.animate, this);
  1410. this.onHandleMouseDown = bind(this.onHandleMouseDown, this);
  1411. this.onHandleTouchStart = bind(this.onHandleTouchStart, this);
  1412. this.onDocumentMouseMove = bind(this.onDocumentMouseMove, this);
  1413. this.onWrapperTouchMove = bind(this.onWrapperTouchMove, this);
  1414. this.onWrapperMouseDown = bind(this.onWrapperMouseDown, this);
  1415. this.onWrapperTouchStart = bind(this.onWrapperTouchStart, this);
  1416. this.onDocumentMouseUp = bind(this.onDocumentMouseUp, this);
  1417. this.onDocumentTouchEnd = bind(this.onDocumentTouchEnd, this);
  1418. this.onHandleClick = bind(this.onHandleClick, this);
  1419. this.onWindowResize = bind(this.onWindowResize, this);
  1420. },
  1421. bindEventListeners: function() {
  1422. // Start dragging
  1423. addEventListener(this.handle, 'mousedown', this.onHandleMouseDown);
  1424. addEventListener(this.handle, 'touchstart', this.onHandleTouchStart);
  1425. // While dragging
  1426. addEventListener(document, 'mousemove', this.onDocumentMouseMove);
  1427. addEventListener(this.wrapper, 'touchmove', this.onWrapperTouchMove);
  1428. // Start tapping
  1429. addEventListener(this.wrapper, 'mousedown', this.onWrapperMouseDown);
  1430. addEventListener(this.wrapper, 'touchstart', this.onWrapperTouchStart);
  1431. // Stop dragging/tapping
  1432. addEventListener(document, 'mouseup', this.onDocumentMouseUp);
  1433. addEventListener(document, 'touchend', this.onDocumentTouchEnd);
  1434.  
  1435. addEventListener(this.handle, 'click', this.onHandleClick);
  1436. addEventListener(window, 'resize', this.onWindowResize);
  1437.  
  1438. this.animate(false, true);
  1439. this.interval = this.requestAnimationFrame(this.animateWithRequestAnimationFrame);
  1440.  
  1441. },
  1442. unbindEventListeners: function() {
  1443. removeEventListener(this.handle, 'mousedown', this.onHandleMouseDown);
  1444. removeEventListener(this.handle, 'touchstart', this.onHandleTouchStart);
  1445. removeEventListener(document, 'mousemove', this.onDocumentMouseMove);
  1446. removeEventListener(this.wrapper, 'touchmove', this.onWrapperTouchMove);
  1447. removeEventListener(this.wrapper, 'mousedown', this.onWrapperMouseDown);
  1448. removeEventListener(this.wrapper, 'touchstart', this.onWrapperTouchStart);
  1449. removeEventListener(document, 'mouseup', this.onDocumentMouseUp);
  1450. removeEventListener(document, 'touchend', this.onDocumentTouchEnd);
  1451. removeEventListener(this.handle, 'click', this.onHandleClick);
  1452. removeEventListener(window, 'resize', this.onWindowResize);
  1453. this.cancelAnimationFrame(this.interval);
  1454. },
  1455. onHandleMouseDown: function(e) {
  1456. if(e.target && e.target.tagName == "A" && e.target.className.search(/ism-caption/) >= 0)
  1457. {
  1458. document.location = e.target.href;
  1459. }
  1460. Cursor.refresh(e);
  1461. preventEventDefaults(e);
  1462. stopEventPropagation(e);
  1463. this.activity = false;
  1464. this.startDrag();
  1465. },
  1466. onHandleTouchStart: function(e) {
  1467. if(e.target && e.target.tagName == "A" && e.target.className.search(/ism-caption/) >= 0)
  1468. {
  1469. document.location = e.target.href;
  1470. }
  1471. Cursor.refresh(e);
  1472. stopEventPropagation(e);
  1473. this.activity = false;
  1474. this.startDrag();
  1475. },
  1476. onDocumentMouseMove: function(e) {
  1477. Cursor.refresh(e);
  1478. if (this.dragging) {
  1479. this.activity = true;
  1480. preventEventDefaults(e);
  1481. }
  1482. },
  1483. onWrapperTouchMove: function(e) {
  1484. Cursor.refresh(e);
  1485. if (!this.activity && this.draggingOnDisabledAxis()) {
  1486. if (this.dragging) {
  1487. this.stopDrag();
  1488. }
  1489. return;
  1490. }
  1491. preventEventDefaults(e);
  1492. this.activity = true;
  1493. },
  1494. onWrapperMouseDown: function(e) {
  1495. if(e.target && e.target.className.search(/ism-(button|radio|caption)/) >= 0)
  1496. {
  1497. return;
  1498. }
  1499. Cursor.refresh(e);
  1500. preventEventDefaults(e);
  1501. this.startTap();
  1502. },
  1503. onWrapperTouchStart: function(e) {
  1504. Cursor.refresh(e);
  1505. preventEventDefaults(e);
  1506. this.startTap();
  1507. },
  1508. onDocumentMouseUp: function(e) {
  1509. this.stopDrag();
  1510. this.stopTap();
  1511. if(e.target && e.target.className.search(/ism-(button|radio|caption)/) >= 0)
  1512. {
  1513. return;
  1514. }
  1515. this.options.afterSwipeCallback();
  1516. },
  1517. onDocumentTouchEnd: function(e) {
  1518. this.stopDrag();
  1519. this.stopTap();
  1520. this.options.afterSwipeCallback();
  1521. },
  1522. onHandleClick: function(e) {
  1523. if(e.target && e.target.className.search(/ism-(button|radio)/) >= 0)
  1524. {
  1525. return;
  1526. }
  1527. if (this.activity) {
  1528. preventEventDefaults(e);
  1529. stopEventPropagation(e);
  1530. }
  1531. },
  1532. onWindowResize: function(e) {
  1533. this.reflow();
  1534. },
  1535. enable: function() {
  1536. this.disabled = false;
  1537. this.handle.className = this.handle.className.replace(/\s?disabled/g, '');
  1538. },
  1539. disable: function() {
  1540. this.disabled = true;
  1541. this.handle.className += ' disabled';
  1542. },
  1543. reflow: function() {
  1544. this.setWrapperOffset();
  1545. this.bounds = this.calculateBounds();
  1546. this.valuePrecision = this.calculateValuePrecision();
  1547. this.updateOffsetFromValue();
  1548. },
  1549. getStep: function() {
  1550. return [
  1551. this.getStepNumber(this.value.target[0]),
  1552. this.getStepNumber(this.value.target[1])
  1553. ];
  1554. },
  1555. getValue: function() {
  1556. return this.value.target;
  1557. },
  1558. setStep: function(x, y, snap) {
  1559. this.setValue(
  1560. this.options.steps && x > 1 ? (x - 1) / (this.options.steps - 1) : 0,
  1561. this.options.steps && y > 1 ? (y - 1) / (this.options.steps - 1) : 0,
  1562. snap
  1563. );
  1564. },
  1565. setValue: function(x, y, snap) {
  1566. this.setTargetValue([x, y || 0]);
  1567. if (snap) {
  1568. this.groupCopy(this.value.current, this.value.target);
  1569. this.updateOffsetFromValue();
  1570. this.callAnimationCallback();
  1571. }
  1572. },
  1573. startTap: function() {
  1574. if (this.disabled || !this.options.tapping) {
  1575. return;
  1576. }
  1577.  
  1578. this.tapping = true;
  1579. this.setWrapperOffset();
  1580.  
  1581. this.setTargetValueByOffset([
  1582. Cursor.x - this.offset.wrapper[0] - (this.handle.offsetWidth / 2),
  1583. Cursor.y - this.offset.wrapper[1] - (this.handle.offsetHeight / 2)
  1584. ]);
  1585. },
  1586. stopTap: function() {
  1587. if (this.disabled || !this.tapping) {
  1588. return;
  1589. }
  1590. this.tapping = false;
  1591.  
  1592. this.setTargetValue(this.value.current);
  1593. },
  1594. startDrag: function() {
  1595. if (this.disabled) {
  1596. return;
  1597. }
  1598. this.dragging = true;
  1599. this.interval = this.requestAnimationFrame(this.animateWithRequestAnimationFrame);
  1600. this.setWrapperOffset();
  1601.  
  1602. this.offset.mouse = [
  1603. Cursor.x - Position.get(this.handle)[0],
  1604. Cursor.y - Position.get(this.handle)[1]
  1605. ];
  1606. if (!this.wrapper.className.match(this.options.activeClass)) {
  1607. this.wrapper.className += ' ' + this.options.activeClass;
  1608. }
  1609. this.callDragStartCallback();
  1610. },
  1611. stopDrag: function() {
  1612. if (this.disabled || !this.dragging) {
  1613. return;
  1614. }
  1615. this.dragging = false;
  1616.  
  1617. var target = this.groupClone(this.value.current);
  1618. if (this.options.slide) {
  1619. var ratioChange = this.change;
  1620. target[0] += ratioChange[0] * 4;
  1621. target[1] += ratioChange[1] * 4;
  1622. }
  1623. this.setTargetValue(target);
  1624. this.wrapper.className = this.wrapper.className.replace(' ' + this.options.activeClass, '');
  1625. this.callDragStopCallback();
  1626. },
  1627. callAnimationCallback: function() {
  1628. var value = this.value.current;
  1629. if (this.options.snap && this.options.steps > 1) {
  1630. value = this.getClosestSteps(value);
  1631. }
  1632. if (!this.groupCompare(value, this.value.prev)) {
  1633. if (typeof(this.options.animationCallback) == 'function') {
  1634. this.options.animationCallback.call(this, value[0], value[1]);
  1635. }
  1636. this.groupCopy(this.value.prev, value);
  1637. }
  1638. },
  1639. callTargetCallback: function() {
  1640. if (typeof(this.options.callback) == 'function') {
  1641. this.options.callback.call(this, this.value.target[0], this.value.target[1]);
  1642. }
  1643. },
  1644. callDragStartCallback: function() {
  1645. if (typeof(this.options.dragStartCallback) == 'function') {
  1646. this.options.dragStartCallback.call(this, this.value.target[0], this.value.target[1]);
  1647. }
  1648. },
  1649. callDragStopCallback: function() {
  1650. if (typeof(this.options.dragStopCallback) == 'function') {
  1651. this.options.dragStopCallback.call(this, this.value.target[0], this.value.target[1]);
  1652. }
  1653. },
  1654. startSlide: function(slide_target, callback) {
  1655. this.slide_callback = callback;
  1656. this.sliding = true;
  1657. this.value.target[0] = slide_target;
  1658. this.slide_start = this.value.current[0];
  1659. this.step_size = Math.abs(this.value.target[0] - this.value.current[0]);
  1660. this.interval = this.requestAnimationFrame(this.animateWithRequestAnimationFrame); // EDIT
  1661. },
  1662. animateWithRequestAnimationFrame: function (time) {
  1663. if (time) {
  1664. // using requestAnimationFrame
  1665. this.timeOffset = this.timeStamp ? time - this.timeStamp : 0;
  1666. this.timeStamp = time;
  1667. } else {
  1668. // using setTimeout(callback, 25) polyfill
  1669. this.timeOffset = 25;
  1670. }
  1671. if(this.sliding)
  1672. {
  1673. this.animateSlide();
  1674. }
  1675. else
  1676. {
  1677. this.animate();
  1678. }
  1679. // only animate if dragging or gliding
  1680. if(this.sliding || this.dragging || this.value.target[0] != this.value.current[0])
  1681. {
  1682. this.interval = this.requestAnimationFrame(this.animateWithRequestAnimationFrame);
  1683. }
  1684. else
  1685. {
  1686. this.options.onAfterGlide();
  1687. }
  1688. },
  1689. animate: function(direct, first) {
  1690. if (direct && !this.dragging) {
  1691. return;
  1692. }
  1693. if (this.dragging) {
  1694. var prevTarget = this.groupClone(this.value.target);
  1695.  
  1696. var offset = [
  1697. Cursor.x - this.offset.wrapper[0] - this.offset.mouse[0],
  1698. Cursor.y - this.offset.wrapper[1] - this.offset.mouse[1]
  1699. ];
  1700. this.setTargetValueByOffset(offset, this.options.loose);
  1701.  
  1702. this.change = [
  1703. this.value.target[0] - prevTarget[0],
  1704. this.value.target[1] - prevTarget[1]
  1705. ];
  1706. }
  1707. if (this.dragging || first) {
  1708. this.groupCopy(this.value.current, this.value.target);
  1709. }
  1710. if (this.dragging || this.glide() || first) {
  1711. this.updateOffsetFromValue();
  1712. this.callAnimationCallback();
  1713. }
  1714. },
  1715. glide: function() {
  1716. var diff = [
  1717. this.value.target[0] - this.value.current[0],
  1718. this.value.target[1] - this.value.current[1]
  1719. ];
  1720. if (!diff[0] && !diff[1]) {
  1721. return false;
  1722. }
  1723. if (Math.abs(diff[0]) > this.valuePrecision[0] ||
  1724. Math.abs(diff[1]) > this.valuePrecision[1]) {
  1725. this.value.current[0] += diff[0] * Math.min(this.options.speed * this.timeOffset / 25, 1);
  1726. this.value.current[1] += diff[1] * Math.min(this.options.speed * this.timeOffset / 25, 1);
  1727. } else {
  1728. this.groupCopy(this.value.current, this.value.target);
  1729. }
  1730. return true;
  1731. },
  1732. animateSlide: function() {
  1733. var diff = this.value.target[0] - this.value.current[0];
  1734. var sign = diff >= 0 ? 1 : (-1);
  1735. var remain = Math.abs(diff);
  1736. var progress = (this.value.current[0] - this.slide_start) / (this.value.target[0] - this.slide_start); // 0.0 .. 1.0
  1737. var p = progress - 0.5; // -0.5 .. 0.5
  1738. var d = ((-3 * p * p) + 0.8) * this.step_size * 0.08; // quadratic
  1739. while(d > remain)
  1740. {
  1741. d *= 0.5;
  1742. }
  1743. if(progress > 0.995)
  1744. {
  1745. this.groupCopy(this.value.current, this.value.target);
  1746. this.sliding = false;
  1747. this.slide_callback();
  1748. }
  1749. else
  1750. {
  1751. this.value.current[0] += sign * d;
  1752. }
  1753. this.updateOffsetFromValue();
  1754. this.renderHandlePosition();
  1755. if(isNaN(progress))
  1756. {
  1757. //throw "progress NaN";
  1758. }
  1759. },
  1760. updateOffsetFromValue: function() {
  1761. if (!this.options.snap) {
  1762. this.offset.current = this.getOffsetsByRatios(this.value.current);
  1763. } else {
  1764. this.offset.current = this.getOffsetsByRatios(
  1765. this.getClosestSteps(this.value.current)
  1766. );
  1767. }
  1768. if (!this.groupCompare(this.offset.current, this.offset.prev)) {
  1769. this.renderHandlePosition();
  1770. this.groupCopy(this.offset.prev, this.offset.current);
  1771. }
  1772. },
  1773. renderHandlePosition: function() {
  1774. var transform = '';
  1775. if (this.options.css3 && StylePrefix.transform) {
  1776. if (this.options.horizontal) {
  1777. transform += 'translateX(' + this.offset.current[0] + 'px)';
  1778. }
  1779. this.handle.style[StylePrefix.transform] = transform;
  1780. return;
  1781. }
  1782. if (this.options.horizontal) {
  1783. this.handle.style.left = this.offset.current[0] + 'px';
  1784. }
  1785. },
  1786. setTargetValue: function(value, loose) {
  1787. var target = loose ? this.getLooseValue(value) : this.getProperValue(value);
  1788.  
  1789. this.groupCopy(this.value.target, target);
  1790. this.offset.target = this.getOffsetsByRatios(target);
  1791.  
  1792. this.callTargetCallback();
  1793. },
  1794. setTargetValueByOffset: function(offset, loose) {
  1795. var value = this.getRatiosByOffsets(offset);
  1796. var target = loose ? this.getLooseValue(value) : this.getProperValue(value);
  1797.  
  1798. this.groupCopy(this.value.target, target);
  1799. this.offset.target = this.getOffsetsByRatios(target);
  1800. },
  1801. getLooseValue: function(value) {
  1802. var proper = this.getProperValue(value);
  1803. return [
  1804. proper[0] + ((value[0] - proper[0]) / 4),
  1805. proper[1] + ((value[1] - proper[1]) / 4)
  1806. ];
  1807. },
  1808. getProperValue: function(value) {
  1809. var proper = this.groupClone(value);
  1810.  
  1811. proper[0] = Math.max(proper[0], 0);
  1812. proper[1] = Math.max(proper[1], 0);
  1813. proper[0] = Math.min(proper[0], 1);
  1814. proper[1] = Math.min(proper[1], 1);
  1815.  
  1816. if ((!this.dragging && !this.tapping) || this.options.snap) {
  1817. if (this.options.steps > 1) {
  1818. proper = this.getClosestSteps(proper);
  1819. }
  1820. }
  1821. return proper;
  1822. },
  1823. getRatiosByOffsets: function(group) {
  1824. return [
  1825. this.getRatioByOffset(group[0], this.bounds.availWidth, this.bounds.left),
  1826. this.getRatioByOffset(group[1], this.bounds.availHeight, this.bounds.top)
  1827. ];
  1828. },
  1829. getRatioByOffset: function(offset, range, padding) {
  1830. return range ? (offset - padding) / range : 0;
  1831. },
  1832. getOffsetsByRatios: function(group) {
  1833. return [
  1834. this.getOffsetByRatio(group[0], this.bounds.availWidth, this.bounds.left),
  1835. this.getOffsetByRatio(group[1], this.bounds.availHeight, this.bounds.top)
  1836. ];
  1837. },
  1838. getOffsetByRatio: function(ratio, range, padding) {
  1839. return Math.round(ratio * range) + padding;
  1840. },
  1841. getStepNumber: function(value) {
  1842. return this.getClosestStep(value) * (this.options.steps - 1) + 1;
  1843. },
  1844. getClosestSteps: function(group) {
  1845. return [
  1846. this.getClosestStep(group[0]),
  1847. this.getClosestStep(group[1])
  1848. ];
  1849. },
  1850. getClosestStep: function(value) {
  1851. var k = 0;
  1852. var min = 1;
  1853. for (var i = 0; i <= this.options.steps - 1; i++) {
  1854. if (Math.abs(this.stepRatios[i] - value) < min) {
  1855. min = Math.abs(this.stepRatios[i] - value);
  1856. k = i;
  1857. }
  1858. }
  1859. return this.stepRatios[k];
  1860. },
  1861. groupCompare: function(a, b) {
  1862. return a[0] == b[0] && a[1] == b[1];
  1863. },
  1864. groupCopy: function(a, b) {
  1865. a[0] = b[0];
  1866. a[1] = b[1];
  1867. },
  1868. groupClone: function(a) {
  1869. return [a[0], a[1]];
  1870. },
  1871. draggingOnDisabledAxis: function() {
  1872. return (!this.options.horizontal && Cursor.xDiff > Cursor.yDiff) ||
  1873. (!this.options.vertical && Cursor.yDiff > Cursor.xDiff);
  1874. }
  1875. };
  1876.  
  1877.  
  1878. var bind = function(fn, context) {
  1879. return function() {
  1880. return fn.apply(context, arguments);
  1881. };
  1882. };
  1883.  
  1884. // Cross-browser vanilla JS event handling
  1885.  
  1886. var addEventListener = function(element, type, callback) {
  1887. if (element.addEventListener) {
  1888. element.addEventListener(type, callback, false);
  1889. } else if (element.attachEvent) {
  1890. element.attachEvent('on' + type, callback);
  1891. }
  1892. };
  1893.  
  1894. var removeEventListener = function(element, type, callback) {
  1895. if (element.removeEventListener) {
  1896. element.removeEventListener(type, callback, false);
  1897. } else if (element.detachEvent) {
  1898. element.detachEvent('on' + type, callback);
  1899. }
  1900. };
  1901.  
  1902. var preventEventDefaults = function(e) {
  1903. if (!e) {
  1904. e = window.event;
  1905. }
  1906. if (e.preventDefault) {
  1907. e.preventDefault();
  1908. }
  1909. e.returnValue = false;
  1910. };
  1911.  
  1912. var stopEventPropagation = function(e) {
  1913. if (!e) {
  1914. e = window.event;
  1915. }
  1916. if (e.stopPropagation) {
  1917. e.stopPropagation();
  1918. }
  1919. e.cancelBubble = true;
  1920. };
  1921.  
  1922.  
  1923. var Cursor = {
  1924.  
  1925. x: 0,
  1926. y: 0,
  1927. xDiff: 0,
  1928. yDiff: 0,
  1929. refresh: function(e) {
  1930. if (!e) {
  1931. e = window.event;
  1932. }
  1933. if (e.type == 'mousemove') {
  1934. this.set(e);
  1935. } else if (e.touches) {
  1936. this.set(e.touches[0]);
  1937. }
  1938. },
  1939. set: function(e) {
  1940. var lastX = this.x,
  1941. lastY = this.y;
  1942. if (e.clientX || e.clientY) {
  1943. this.x = e.clientX;
  1944. this.y = e.clientY;
  1945. } else if (e.pageX || e.pageY) {
  1946. this.x = e.pageX - document.body.scrollLeft - document.documentElement.scrollLeft;
  1947. this.y = e.pageY - document.body.scrollTop - document.documentElement.scrollTop;
  1948. }
  1949. this.xDiff = Math.abs(this.x - lastX);
  1950. this.yDiff = Math.abs(this.y - lastY);
  1951. }
  1952. };
  1953.  
  1954.  
  1955. var Position = {
  1956. get: function(obj) {
  1957. var rect = {left: 0, top: 0};
  1958. if (obj.getBoundingClientRect !== undefined) {
  1959. rect = obj.getBoundingClientRect();
  1960. }
  1961. return [rect.left, rect.top];
  1962. }
  1963. };
  1964.  
  1965.  
  1966. var StylePrefix = {
  1967. transform: getPrefixedStylePropName('transform'),
  1968. perspective: getPrefixedStylePropName('perspective'),
  1969. backfaceVisibility: getPrefixedStylePropName('backfaceVisibility')
  1970. };
  1971.  
  1972. function getPrefixedStylePropName(propName) {
  1973. var domPrefixes = 'Webkit Moz ms O'.split(' '),
  1974. elStyle = document.documentElement.style;
  1975. if (elStyle[propName] !== undefined) return propName; // Is supported unprefixed
  1976. propName = propName.charAt(0).toUpperCase() + propName.substr(1);
  1977. for (var i = 0; i < domPrefixes.length; i++) {
  1978. if (elStyle[domPrefixes[i] + propName] !== undefined) {
  1979. return domPrefixes[i] + propName; // Is supported with prefix
  1980. }
  1981. }
  1982. };
  1983.  
  1984. function triggerWebkitHardwareAcceleration(element) {
  1985. if (StylePrefix.backfaceVisibility && StylePrefix.perspective) {
  1986. element.style[StylePrefix.perspective] = '1000px';
  1987. element.style[StylePrefix.backfaceVisibility] = 'hidden';
  1988. }
  1989. };
  1990.  
  1991. var vendors = ['webkit', 'moz'];
  1992. var requestAnimationFrame = window.requestAnimationFrame;
  1993. var cancelAnimationFrame = window.cancelAnimationFrame;
  1994.  
  1995. for (var x = 0; x < vendors.length && !requestAnimationFrame; ++x) {
  1996. requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
  1997. cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
  1998. window[vendors[x] + 'CancelRequestAnimationFrame'];
  1999. }
  2000.  
  2001. if (!requestAnimationFrame) {
  2002. requestAnimationFrame = function (callback) {
  2003. return setTimeout(callback, 25);
  2004. };
  2005. cancelAnimationFrame = clearTimeout;
  2006. }
  2007.  
  2008. return Dragdealer;
  2009.  
  2010. }));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!