Просмотр файла wu-static/js/lightgallery/js/lg-thumbnail.js

Конкурс дизайнеров на 15000 рублей
НЕЙРОСЕТИ
Размер файла: 15.34Kb 
  1. /*! lg-thumbnail - v1.0.0 - 2016-09-20
  2. * http://sachinchoolur.github.io/lightGallery
  3. * Copyright (c) 2016 Sachin N; Licensed GPLv3 */
  4.  
  5. (function (root, factory) {
  6.   if (typeof define === 'function' && define.amd) {
  7.     // AMD. Register as an anonymous module unless amdModuleId is set
  8.     define([], function () {
  9.       return (factory());
  10.     });
  11.   } else if (typeof exports === 'object') {
  12.     // Node. Does not work with strict CommonJS, but
  13.     // only CommonJS-like environments that support module.exports,
  14.     // like Node.
  15.     module.exports = factory();
  16.   } else {
  17.     factory();
  18.   }
  19. }(this, function () {
  20.  
  21. (function($, window, document, undefined) {
  22.  
  23.     'use strict';
  24.  
  25.     var defaults = {
  26.         thumbnail: true,
  27.  
  28.         animateThumb: true,
  29.         currentPagerPosition: 'middle',
  30.  
  31.         thumbWidth: 100,
  32.         thumbContHeight: 100,
  33.         thumbMargin: 5,
  34.  
  35.         exThumbImage: false,
  36.         showThumbByDefault: true,
  37.         toogleThumb: true,
  38.         pullCaptionUp: true,
  39.  
  40.         enableThumbDrag: true,
  41.         enableThumbSwipe: true,
  42.         swipeThreshold: 50,
  43.  
  44.         loadYoutubeThumbnail: true,
  45.         youtubeThumbSize: 1,
  46.  
  47.         loadVimeoThumbnail: true,
  48.         vimeoThumbSize: 'thumbnail_small',
  49.  
  50.         loadDailymotionThumbnail: true
  51.     };
  52.  
  53.     var Thumbnail = function(element) {
  54.  
  55.         // get lightGallery core plugin data
  56.         this.core = $(element).data('lightGallery');
  57.  
  58.         // extend module default settings with lightGallery core settings
  59.         this.core.s = $.extend({}, defaults, this.core.s);
  60.  
  61.         this.$el = $(element);
  62.         this.$thumbOuter = null;
  63.         this.thumbOuterWidth = 0;
  64.         this.thumbTotalWidth = (this.core.$items.length * (this.core.s.thumbWidth + this.core.s.thumbMargin));
  65.         this.thumbIndex = this.core.index;
  66.  
  67.         // Thumbnail animation value
  68.         this.left = 0;
  69.  
  70.         this.init();
  71.  
  72.         return this;
  73.     };
  74.  
  75.     Thumbnail.prototype.init = function() {
  76.         var _this = this;
  77.         if (this.core.s.thumbnail && this.core.$items.length > 1) {
  78.             if (this.core.s.showThumbByDefault) {
  79.                 setTimeout(function(){
  80.                     _this.core.$outer.addClass('lg-thumb-open');
  81.                 }, 700);
  82.             }
  83.  
  84.             if (this.core.s.pullCaptionUp) {
  85.                 this.core.$outer.addClass('lg-pull-caption-up');
  86.             }
  87.  
  88.             this.build();
  89.             if (this.core.s.animateThumb) {
  90.                 if (this.core.s.enableThumbDrag && !this.core.isTouch && this.core.doCss()) {
  91.                     this.enableThumbDrag();
  92.                 }
  93.  
  94.                 if (this.core.s.enableThumbSwipe && this.core.isTouch && this.core.doCss()) {
  95.                     this.enableThumbSwipe();
  96.                 }
  97.  
  98.                 this.thumbClickable = false;
  99.             } else {
  100.                 this.thumbClickable = true;
  101.             }
  102.  
  103.             this.toogle();
  104.             this.thumbkeyPress();
  105.         }
  106.     };
  107.  
  108.     Thumbnail.prototype.build = function() {
  109.         var _this = this;
  110.         var thumbList = '';
  111.         var vimeoErrorThumbSize = '';
  112.         var $thumb;
  113.         var html = '<div class="lg-thumb-outer">' +
  114.             '<div class="lg-thumb group">' +
  115.             '</div>' +
  116.             '</div>';
  117.  
  118.         switch (this.core.s.vimeoThumbSize) {
  119.             case 'thumbnail_large':
  120.                 vimeoErrorThumbSize = '640';
  121.                 break;
  122.             case 'thumbnail_medium':
  123.                 vimeoErrorThumbSize = '200x150';
  124.                 break;
  125.             case 'thumbnail_small':
  126.                 vimeoErrorThumbSize = '100x75';
  127.         }
  128.  
  129.         _this.core.$outer.addClass('lg-has-thumb');
  130.  
  131.         _this.core.$outer.find('.lg').append(html);
  132.  
  133.         _this.$thumbOuter = _this.core.$outer.find('.lg-thumb-outer');
  134.         _this.thumbOuterWidth = _this.$thumbOuter.width();
  135.  
  136.         if (_this.core.s.animateThumb) {
  137.             _this.core.$outer.find('.lg-thumb').css({
  138.                 width: _this.thumbTotalWidth + 'px',
  139.                 position: 'relative'
  140.             });
  141.         }
  142.  
  143.         if (this.core.s.animateThumb) {
  144.             _this.$thumbOuter.css('height', _this.core.s.thumbContHeight + 'px');
  145.         }
  146.  
  147.         function getThumb(src, thumb, index) {
  148.             var isVideo = _this.core.isVideo(src, index) || {};
  149.             var thumbImg;
  150.             var vimeoId = '';
  151.  
  152.             if (isVideo.youtube || isVideo.vimeo || isVideo.dailymotion) {
  153.                 if (isVideo.youtube) {
  154.                     if (_this.core.s.loadYoutubeThumbnail) {
  155.                         thumbImg = '//img.youtube.com/vi/' + isVideo.youtube[1] + '/' + _this.core.s.youtubeThumbSize + '.jpg';
  156.                     } else {
  157.                         thumbImg = thumb;
  158.                     }
  159.                 } else if (isVideo.vimeo) {
  160.                     if (_this.core.s.loadVimeoThumbnail) {
  161.                         thumbImg = '//i.vimeocdn.com/video/error_' + vimeoErrorThumbSize + '.jpg';
  162.                         vimeoId = isVideo.vimeo[1];
  163.                     } else {
  164.                         thumbImg = thumb;
  165.                     }
  166.                 } else if (isVideo.dailymotion) {
  167.                     if (_this.core.s.loadDailymotionThumbnail) {
  168.                         thumbImg = '//www.dailymotion.com/thumbnail/video/' + isVideo.dailymotion[1];
  169.                     } else {
  170.                         thumbImg = thumb;
  171.                     }
  172.                 }
  173.             } else {
  174.                 thumbImg = thumb;
  175.             }
  176.  
  177.             thumbList += '<div data-vimeo-id="' + vimeoId + '" class="lg-thumb-item" style="width:' + _this.core.s.thumbWidth + 'px; margin-right: ' + _this.core.s.thumbMargin + 'px"><img src="' + thumbImg + '" /></div>';
  178.             vimeoId = '';
  179.         }
  180.  
  181.         if (_this.core.s.dynamic) {
  182.             for (var i = 0; i < _this.core.s.dynamicEl.length; i++) {
  183.                 getThumb(_this.core.s.dynamicEl[i].src, _this.core.s.dynamicEl[i].thumb, i);
  184.             }
  185.         } else {
  186.             _this.core.$items.each(function(i) {
  187.  
  188.                 if (!_this.core.s.exThumbImage) {
  189.                     getThumb($(this).attr('href') || $(this).attr('data-src'), $(this).find('img').attr('src'), i);
  190.                 } else {
  191.                     getThumb($(this).attr('href') || $(this).attr('data-src'), $(this).attr(_this.core.s.exThumbImage), i);
  192.                 }
  193.  
  194.             });
  195.         }
  196.  
  197.         _this.core.$outer.find('.lg-thumb').html(thumbList);
  198.  
  199.         $thumb = _this.core.$outer.find('.lg-thumb-item');
  200.  
  201.         // Load vimeo thumbnails
  202.         $thumb.each(function() {
  203.             var $this = $(this);
  204.             var vimeoVideoId = $this.attr('data-vimeo-id');
  205.  
  206.             if (vimeoVideoId) {
  207.                 $.getJSON('//www.vimeo.com/api/v2/video/' + vimeoVideoId + '.json?callback=?', {
  208.                     format: 'json'
  209.                 }, function(data) {
  210.                     $this.find('img').attr('src', data[0][_this.core.s.vimeoThumbSize]);
  211.                 });
  212.             }
  213.         });
  214.  
  215.         // manage active class for thumbnail
  216.         $thumb.eq(_this.core.index).addClass('active');
  217.         _this.core.$el.on('onBeforeSlide.lg.tm', function() {
  218.             $thumb.removeClass('active');
  219.             $thumb.eq(_this.core.index).addClass('active');
  220.         });
  221.  
  222.         $thumb.on('click.lg touchend.lg', function() {
  223.             var _$this = $(this);
  224.             setTimeout(function() {
  225.  
  226.                 // In IE9 and bellow touch does not support
  227.                 // Go to slide if browser does not support css transitions
  228.                 if ((_this.thumbClickable && !_this.core.lgBusy) || !_this.core.doCss()) {
  229.                     _this.core.index = _$this.index();
  230.                     _this.core.slide(_this.core.index, false, true);
  231.                 }
  232.             }, 50);
  233.         });
  234.  
  235.         _this.core.$el.on('onBeforeSlide.lg.tm', function() {
  236.             _this.animateThumb(_this.core.index);
  237.         });
  238.  
  239.         $(window).on('resize.lg.thumb orientationchange.lg.thumb', function() {
  240.             setTimeout(function() {
  241.                 _this.animateThumb(_this.core.index);
  242.                 _this.thumbOuterWidth = _this.$thumbOuter.width();
  243.             }, 200);
  244.         });
  245.  
  246.     };
  247.  
  248.     Thumbnail.prototype.setTranslate = function(value) {
  249.         // jQuery supports Automatic CSS prefixing since jQuery 1.8.0
  250.         this.core.$outer.find('.lg-thumb').css({
  251.             transform: 'translate3d(-' + (value) + 'px, 0px, 0px)'
  252.         });
  253.     };
  254.  
  255.     Thumbnail.prototype.animateThumb = function(index) {
  256.         var $thumb = this.core.$outer.find('.lg-thumb');
  257.         if (this.core.s.animateThumb) {
  258.             var position;
  259.             switch (this.core.s.currentPagerPosition) {
  260.                 case 'left':
  261.                     position = 0;
  262.                     break;
  263.                 case 'middle':
  264.                     position = (this.thumbOuterWidth / 2) - (this.core.s.thumbWidth / 2);
  265.                     break;
  266.                 case 'right':
  267.                     position = this.thumbOuterWidth - this.core.s.thumbWidth;
  268.             }
  269.             this.left = ((this.core.s.thumbWidth + this.core.s.thumbMargin) * index - 1) - position;
  270.             if (this.left > (this.thumbTotalWidth - this.thumbOuterWidth)) {
  271.                 this.left = this.thumbTotalWidth - this.thumbOuterWidth;
  272.             }
  273.  
  274.             if (this.left < 0) {
  275.                 this.left = 0;
  276.             }
  277.  
  278.             if (this.core.lGalleryOn) {
  279.                 if (!$thumb.hasClass('on')) {
  280.                     this.core.$outer.find('.lg-thumb').css('transition-duration', this.core.s.speed + 'ms');
  281.                 }
  282.  
  283.                 if (!this.core.doCss()) {
  284.                     $thumb.animate({
  285.                         left: -this.left + 'px'
  286.                     }, this.core.s.speed);
  287.                 }
  288.             } else {
  289.                 if (!this.core.doCss()) {
  290.                     $thumb.css('left', -this.left + 'px');
  291.                 }
  292.             }
  293.  
  294.             this.setTranslate(this.left);
  295.  
  296.         }
  297.     };
  298.  
  299.     // Enable thumbnail dragging and swiping
  300.     Thumbnail.prototype.enableThumbDrag = function() {
  301.  
  302.         var _this = this;
  303.         var startCoords = 0;
  304.         var endCoords = 0;
  305.         var isDraging = false;
  306.         var isMoved = false;
  307.         var tempLeft = 0;
  308.  
  309.         _this.$thumbOuter.addClass('lg-grab');
  310.  
  311.         _this.core.$outer.find('.lg-thumb').on('mousedown.lg.thumb', function(e) {
  312.             if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
  313.                 // execute only on .lg-object
  314.                 e.preventDefault();
  315.                 startCoords = e.pageX;
  316.                 isDraging = true;
  317.  
  318.                 // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723
  319.                 _this.core.$outer.scrollLeft += 1;
  320.                 _this.core.$outer.scrollLeft -= 1;
  321.  
  322.                 // *
  323.                 _this.thumbClickable = false;
  324.                 _this.$thumbOuter.removeClass('lg-grab').addClass('lg-grabbing');
  325.             }
  326.         });
  327.  
  328.         $(window).on('mousemove.lg.thumb', function(e) {
  329.             if (isDraging) {
  330.                 tempLeft = _this.left;
  331.                 isMoved = true;
  332.                 endCoords = e.pageX;
  333.  
  334.                 _this.$thumbOuter.addClass('lg-dragging');
  335.  
  336.                 tempLeft = tempLeft - (endCoords - startCoords);
  337.  
  338.                 if (tempLeft > (_this.thumbTotalWidth - _this.thumbOuterWidth)) {
  339.                     tempLeft = _this.thumbTotalWidth - _this.thumbOuterWidth;
  340.                 }
  341.  
  342.                 if (tempLeft < 0) {
  343.                     tempLeft = 0;
  344.                 }
  345.  
  346.                 // move current slide
  347.                 _this.setTranslate(tempLeft);
  348.  
  349.             }
  350.         });
  351.  
  352.         $(window).on('mouseup.lg.thumb', function() {
  353.             if (isMoved) {
  354.                 isMoved = false;
  355.                 _this.$thumbOuter.removeClass('lg-dragging');
  356.  
  357.                 _this.left = tempLeft;
  358.  
  359.                 if (Math.abs(endCoords - startCoords) < _this.core.s.swipeThreshold) {
  360.                     _this.thumbClickable = true;
  361.                 }
  362.  
  363.             } else {
  364.                 _this.thumbClickable = true;
  365.             }
  366.  
  367.             if (isDraging) {
  368.                 isDraging = false;
  369.                 _this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab');
  370.             }
  371.         });
  372.  
  373.     };
  374.  
  375.     Thumbnail.prototype.enableThumbSwipe = function() {
  376.         var _this = this;
  377.         var startCoords = 0;
  378.         var endCoords = 0;
  379.         var isMoved = false;
  380.         var tempLeft = 0;
  381.  
  382.         _this.core.$outer.find('.lg-thumb').on('touchstart.lg', function(e) {
  383.             if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
  384.                 e.preventDefault();
  385.                 startCoords = e.originalEvent.targetTouches[0].pageX;
  386.                 _this.thumbClickable = false;
  387.             }
  388.         });
  389.  
  390.         _this.core.$outer.find('.lg-thumb').on('touchmove.lg', function(e) {
  391.             if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
  392.                 e.preventDefault();
  393.                 endCoords = e.originalEvent.targetTouches[0].pageX;
  394.                 isMoved = true;
  395.  
  396.                 _this.$thumbOuter.addClass('lg-dragging');
  397.  
  398.                 tempLeft = _this.left;
  399.  
  400.                 tempLeft = tempLeft - (endCoords - startCoords);
  401.  
  402.                 if (tempLeft > (_this.thumbTotalWidth - _this.thumbOuterWidth)) {
  403.                     tempLeft = _this.thumbTotalWidth - _this.thumbOuterWidth;
  404.                 }
  405.  
  406.                 if (tempLeft < 0) {
  407.                     tempLeft = 0;
  408.                 }
  409.  
  410.                 // move current slide
  411.                 _this.setTranslate(tempLeft);
  412.  
  413.             }
  414.         });
  415.  
  416.         _this.core.$outer.find('.lg-thumb').on('touchend.lg', function() {
  417.             if (_this.thumbTotalWidth > _this.thumbOuterWidth) {
  418.  
  419.                 if (isMoved) {
  420.                     isMoved = false;
  421.                     _this.$thumbOuter.removeClass('lg-dragging');
  422.                     if (Math.abs(endCoords - startCoords) < _this.core.s.swipeThreshold) {
  423.                         _this.thumbClickable = true;
  424.                     }
  425.  
  426.                     _this.left = tempLeft;
  427.                 } else {
  428.                     _this.thumbClickable = true;
  429.                 }
  430.             } else {
  431.                 _this.thumbClickable = true;
  432.             }
  433.         });
  434.  
  435.     };
  436.  
  437.     Thumbnail.prototype.toogle = function() {
  438.         var _this = this;
  439.         if (_this.core.s.toogleThumb) {
  440.             _this.core.$outer.addClass('lg-can-toggle');
  441.             _this.$thumbOuter.append('<span class="lg-toogle-thumb lg-icon"></span>');
  442.             _this.core.$outer.find('.lg-toogle-thumb').on('click.lg', function() {
  443.                 _this.core.$outer.toggleClass('lg-thumb-open');
  444.             });
  445.         }
  446.     };
  447.  
  448.     Thumbnail.prototype.thumbkeyPress = function() {
  449.         var _this = this;
  450.         $(window).on('keydown.lg.thumb', function(e) {
  451.             if (e.keyCode === 38) {
  452.                 e.preventDefault();
  453.                 _this.core.$outer.addClass('lg-thumb-open');
  454.             } else if (e.keyCode === 40) {
  455.                 e.preventDefault();
  456.                 _this.core.$outer.removeClass('lg-thumb-open');
  457.             }
  458.         });
  459.     };
  460.  
  461.     Thumbnail.prototype.destroy = function() {
  462.         if (this.core.s.thumbnail && this.core.$items.length > 1) {
  463.             $(window).off('resize.lg.thumb orientationchange.lg.thumb keydown.lg.thumb');
  464.             this.$thumbOuter.remove();
  465.             this.core.$outer.removeClass('lg-has-thumb');
  466.         }
  467.     };
  468.  
  469.     $.fn.lightGallery.modules.Thumbnail = Thumbnail;
  470.  
  471. })(jQuery, window, document);
  472.  
  473. }));