1/** 2 * HSPopup - wrapper of the Fancybox plugin. 3 * 4 * @author Htmlstream 5 * @version 1.0 6 * @requires fancybox.js (v2.1.5) 7 * 8 */ 9;(function($){ 10 'use strict'; 11 12 $.HSCore.components.HSPopup = { 13 14 /** 15 * Base configuration of the wrapper. 16 * 17 * @protected 18 */ 19 _baseConfig: { 20 baseClass: 'u-fancybox-theme', 21 slideClass: 'u-fancybox-slide', 22 speed: 1000, 23 slideSpeedCoefficient: 1, 24 infobar: false, 25 slideShow: false, 26 fullScreen: true, 27 thumbs: false, 28 closeBtn: true, 29 baseTpl : '<div class="fancybox-container" role="dialog" tabindex="-1">' + 30 '<div class="fancybox-bg"></div>' + 31 '<div class="fancybox-controls">' + 32 '<div class="fancybox-infobar">' + 33 '<div class="fancybox-infobar__body">' + 34 '<span class="js-fancybox-index"></span> / <span class="js-fancybox-count"></span>' + 35 '</div>' + 36 '</div>' + 37 '<div class="fancybox-buttons">' + 38 '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="Close (Esc)"></button>' + 39 '</div>' + 40 '</div>' + 41 '<div class="fancybox-slider-wrap">' + 42 '<button data-fancybox-previous class="fancybox-button fancybox-button--left" title="Previous"></button>' + 43 '<button data-fancybox-next class="fancybox-button fancybox-button--right" title="Next"></button>' + 44 '<div class="fancybox-slider"></div>' + 45 '</div>' + 46 '<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' + 47 '</div>', 48 onInit: $.noop, 49 beforeMove: $.noop, 50 beforeClose: $.noop 51 }, 52 53 /** 54 * Initialization of the wrapper. 55 * 56 * @param {String} selector 57 * @param {Object} config (optional) 58 * @public 59 */ 60 init: function(selector, config) { 61 62 if(!selector) return; 63 64 var hiddenGallery, 65 $collection = $(selector); 66 67 if(!$collection.length) return; 68 69 config = config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig; 70 config = this._predefineCallbacks( config ); 71 72 this.$body = $('body'); 73 74 this.initGallery(selector, config); 75 76 }, 77 78 /** 79 * Initialization of a gallery. 80 * 81 * @param {String} selector 82 * @param {Object} config (optional) 83 * @public 84 */ 85 initGallery: function(selector, config) { 86 87 $('body').on('click.HSPopup', selector, function(e) { 88 89 var $this = $(this), 90 index = 0, 91 $gallery, 92 predefinedCollection = [], 93 collectionItem; 94 95 if( $this.data('fancybox-gallery') ) { 96 $gallery = $('[data-fancybox-gallery="' + $this.data('fancybox-gallery') + '"]'); 97 } 98 else if ( $this.data('fancybox-hidden-gallery') ) { 99 $gallery = $('[data-fancybox-hidden-gallery="' + $this.data('fancybox-hidden-gallery') + '"]'); 100 } 101 102 103 if( $gallery && $gallery.length ) { 104 105 index = $gallery.index( $this ); 106 107 $gallery.each(function(i, el){ 108 var $el = $(el); 109 110 collectionItem = { 111 src: $el.attr(el.nodeName === "IMG" || el.nodeName === "IFRAME" ? 'src' : 'href'), 112 customOpts: { 113 fancyboxAnimateIn: $el.data('fancybox-animate-in'), 114 fancyboxAnimateOut: $el.data('fancybox-animate-out'), 115 fancyboxSpeed: $el.data('fancybox-speed'), 116 fancyboxSlideSpeed: $el.data('fancybox-slide-speed'), 117 fancyboxBlurBg: $el.data('fancybox-blur-bg'), 118 fancyboxBg: $el.data('fancybox-bg') 119 } 120 }; 121 122 if( $el.data('fancybox-type') ) { 123 collectionItem.type = $el.data('fancybox-type'); 124 console.log($el); 125 } 126 127 predefinedCollection.push(collectionItem); 128 }); 129 console.log(predefinedCollection); 130 } 131 else { 132 133 collectionItem = { 134 src: $this.attr('href'), 135 customOpts: { 136 fancyboxAnimateIn: $this.data('fancybox-animate-in'), 137 fancyboxAnimateOut: $this.data('fancybox-animate-out'), 138 fancyboxSpeed: $this.data('fancybox-speed'), 139 fancyboxSlideSpeed: $this.data('fancybox-slide-speed'), 140 fancyboxBlurBg: $this.data('fancybox-blur-bg'), 141 fancyboxBg: $this.data('fancybox-bg') 142 } 143 }; 144 145 if( $this.data('fancybox-type') ) { 146 collectionItem.type = $this.data('fancybox-type'); 147 } 148 149 predefinedCollection = [collectionItem]; 150 } 151 152 $.fancybox.open( 153 predefinedCollection, 154 predefinedCollection[index].customOpts.fancyboxSpeed ? $.extend(true, {}, config, { 155 speed: predefinedCollection[index].customOpts.fancyboxSpeed 156 }) : config, 157 index 158 ); 159 160 e.preventDefault(); 161 }); 162 163 }, 164 165 /** 166 * Integration of custom options. 167 * 168 * @param {Object} config 169 * @private 170 * @returns {Object} 171 */ 172 _predefineCallbacks: function( config ) { 173 174 var self = this, 175 onInitCallback = config.onInit, 176 beforeMoveCallback = config.beforeMove, 177 beforeCloseCallback = config.beforeClose; 178 179 config.onInit = function( instance ) { 180 self._defaultBgColor = instance.$refs.bg.css('background-color'); 181 182 if(instance.group.length > 1) { 183 instance.$refs.container.find('.fancybox-button--left, .fancybox-button--right').show(); 184 } 185 if( $.isFunction( onInitCallback ) ) onInitCallback.call(this, instance); 186 }; 187 188 config.beforeMove = function( instance, slide ) { 189 190 if( self._currentSlide ) { 191 self._closeSlide( self._currentSlide, instance ); 192 } 193 194 setTimeout( function() { 195 196 self._openSlide( slide, instance ); 197 198 }, 0 ); 199 200 self._currentSlide = slide; 201 beforeMoveCallback.call(this, instance, slide); 202 203 }; 204 205 config.beforeClose = function( instance, slide ) { 206 207 setTimeout( function() { 208 209 self._closeSlide( slide, instance ); 210 211 }, 0 ); 212 213 beforeCloseCallback.call(this, instance, slide); 214 215 }; 216 217 return config; 218 }, 219 220 /** 221 * Closes the specified slide. 222 * 223 * @param {Object} slide 224 * @param {Object} instance 225 * @private 226 */ 227 _closeSlide: function( slide, instance ) { 228 229 var $image = $(slide.$image), 230 itemData = slide.customOpts ? slide.customOpts : slide.opts.$orig.data(), 231 groupLength = instance.group.length; 232 233 this._blurBg(false); 234 235 if( itemData.fancyboxAnimateOut ) { 236 if( $image.hasClass(itemData.fancyboxAnimateIn) ) $image.removeClass( itemData.fancyboxAnimateIn ); 237 $image.addClass(itemData.fancyboxAnimateOut ); 238 } 239 240 }, 241 242 /** 243 * Opens the specified slide. 244 * 245 * @param {Object} slide 246 * @param {Object} instance 247 * @private 248 */ 249 _openSlide: function( slide, instance ) { 250 251 var $image = $(slide.$image), 252 itemData = slide.customOpts ? slide.customOpts : slide.opts.$orig.data(); 253 254 instance.$refs.bg.css( 255 'background-color', 256 (itemData.fancyboxBg ? itemData.fancyboxBg : this._defaultBgColor) 257 ); 258 259 this._blurBg(itemData.fancyboxBlurBg ? true : false); 260 261 $image.css('animation-duration', (itemData.fancyboxSlideSpeed && itemData.fancyboxSlideSpeed >= slide.opts.speed ? itemData.fancyboxSlideSpeed : slide.opts.speed * Math.abs( slide.opts.slideSpeedCoefficient )) + 'ms'); 262 263 if( itemData.fancyboxAnimateIn ) { 264 if( $image.hasClass( itemData.fancyboxAnimateOut ) ) $image.removeClass( itemData.fancyboxAnimateOut ); 265 $image.addClass( 'animated ' + itemData.fancyboxAnimateIn ); 266 } 267 }, 268 269 /** 270 * Makes blur background while slide is opening. 271 * 272 * @param {Boolean} isBlur 273 * @private 274 */ 275 _blurBg: function(isBlur) { 276 277 var self = this; 278 279 if( isBlur ) { 280 281 if( this._blurBgTimeOut ) clearTimeout( this._blurBgTimeOut ); 282 283 if( !this.blurBgContainer ) {
284 this.blurBgContainer = $('<div></div>', { 285 class: 'u-fancybox-blur-bg-container' 286 }); 287 this.$body.append(this.blurBgContainer); 288 } 289 290 if( this.blurBgContainer.children().length ) return; 291 292 this.blurBgContainer.append( this.$body.children().not('.fancybox-container') ); 293 294 } 295 else { 296 297 if(!this.blurBgContainer || !this.blurBgContainer.children().length) return; 298 299 this._blurBgTimeOut = setTimeout(function(){ 300 301 self.$body.append( self.blurBgContainer.children() ); 302 }, 10) 303 304 } 305 306 } 307 308 }; 309 310})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.