1// ========================================================================== 2// 3// Thumbs 4// Displays thumbnails in a grid 5// 6// ========================================================================== 7;(function (document, $) { 8 'use strict'; 9 10 // Make sure there are default values 11 $.os_fancybox.defaults = $.extend(true, { 12 btnTpl : { 13 thumbs : 14 '<button data-os_fancybox-thumbs class="os_fancybox-button os_fancybox-button--thumbs" title="{{THUMBS}}">' + 15 '<svg class="hvr-wobble-skew" viewBox="0 0 120 120">' + 16 '<path d="M30,30 h14 v14 h-14 Z M50,30 h14 v14 h-14 Z M70,30 h14 v14 h-14 Z M30,50 h14 v14 h-14 Z M50,50 h14 v14 h-14 Z M70,50 h14 v14 h-14 Z M30,70 h14 v14 h-14 Z M50,70 h14 v14 h-14 Z M70,70 h14 v14 h-14 Z" />' + 17 '</svg>' + 18 '</button>' 19 }, 20 thumbs : { 21 autoStart : false, // Display thumbnails on opening 22 hideOnClose : true, // Hide thumbnail grid when closing animation starts 23 parentEl : '.os_fancybox-container', // Container is injected into this element 24 axis : 'y' // Vertical (y) or horizontal (x) scrolling 25 } 26 }, $.os_fancybox.defaults); 27 28 var FancyThumbs = function( instance ) { 29 this.init( instance ); 30 }; 31 32 $.extend( FancyThumbs.prototype, { 33 34 $button : null, 35 $grid : null, 36 $list : null, 37 isVisible : false, 38 isActive : false, 39 40 init : function( instance ) { 41 var self = this; 42 43 self.instance = instance; 44 45 instance.Thumbs = self; 46 47 // Enable thumbs if at least two group items have thumbnails 48 var first = instance.group[0], 49 second = instance.group[1]; 50 51 self.opts = instance.group[ instance.currIndex ].opts.thumbs; 52 53 self.$button = instance.$refs.toolbar.find( '[data-os_fancybox-thumbs]' ); 54 55 if ( self.opts && first && second && ( 56 ( first.type == 'image' || first.opts.thumb || first.opts.$thumb ) && 57 ( second.type == 'image' || second.opts.thumb || second.opts.$thumb ) 58 )) { 59 60 self.$button.show().on('click', function() { 61 self.toggle(); 62 }); 63 64 self.isActive = true; 65 66 } else { 67 self.$button.hide(); 68 } 69 }, 70 71 create : function() { 72 var self = this, 73 instance = self.instance, 74 parentEl = self.opts.parentEl, 75 list, 76 src; 77 78 self.$grid = $('<div class="os_fancybox-thumbs os_fancybox-thumbs-' + self.opts.axis + '"></div>').appendTo( instance.$refs.container.find( parentEl ).addBack().filter( parentEl ) ); 79 80 // Build list HTML 81 list = '<ul>'; 82 83 $.each(instance.group, function( i, item ) { 84 src = item.opts.thumb || ( item.opts.$thumb ? item.opts.$thumb.attr( 'src' ) : null ); 85 86 if ( !src && item.type === 'image' ) { 87 src = item.src; 88 } 89 90 if ( src && src.length ) { 91 list += '<li data-index="' + i + '" tabindex="0" class="os_fancybox-thumbs-loading"><img data-src="' + src + '" /></li>'; 92 } 93 }); 94 95 list += '</ul>'; 96 97 self.$list = $( list ).appendTo( self.$grid ).on('click', 'li', function() { 98 instance.jumpTo( $(this).data('index') ); 99 }); 100
101 self.$list.find( 'img' ).hide().one('load', function() { 102 var $parent = $(this).parent().removeClass( 'os_fancybox-thumbs-loading' ), 103 thumbWidth = $parent.outerWidth(), 104 thumbHeight = $parent.outerHeight(), 105 width, 106 height, 107 widthRatio, 108 heightRatio; 109 110 width = this.naturalWidth || this.width; 111 height = this.naturalHeight || this.height; 112 113 // Calculate thumbnail dimensions; center vertically and horizontally 114 widthRatio = width / thumbWidth; 115 heightRatio = height / thumbHeight; 116 117 if (widthRatio >= 1 && heightRatio >= 1) { 118 if (widthRatio > heightRatio) { 119 width = width / heightRatio; 120 height = thumbHeight; 121 122 } else { 123 width = thumbWidth; 124 height = height / widthRatio; 125 } 126 } 127 128 $(this).css({ 129 width : Math.floor(width), 130 height : Math.floor(height), 131 'margin-top' : height > thumbHeight ? ( Math.floor(thumbHeight * 0.3 - height * 0.3 ) ) : Math.floor(thumbHeight * 0.5 - height * 0.5 ), 132 'margin-left' : Math.floor(thumbWidth * 0.5 - width * 0.5 ) 133 }).show(); 134 135 }) 136 .each(function() { 137 this.src = $( this ).data( 'src' ); 138 }); 139 140 if ( self.opts.axis === 'x' ) { 141 self.$list.width( parseInt( self.$grid.css("padding-right") ) + ( instance.group.length * self.$list.children().eq(0).outerWidth(true) ) + 'px' ); 142 } 143 }, 144 145 focus : function( duration ) { 146 var self = this, 147 $list = self.$list, 148 thumb, 149 thumbPos; 150 151 if ( self.instance.current ) { 152 thumb = $list.children() 153 .removeClass( 'os_fancybox-thumbs-active' ) 154 .filter('[data-index="' + self.instance.current.index + '"]') 155 .addClass('os_fancybox-thumbs-active'); 156 157 thumbPos = thumb.position(); 158 159 // Check if need to scroll to make current thumb visible 160 if ( self.opts.axis === 'y' && ( thumbPos.top < 0 || thumbPos.top > ( $list.height() - thumb.outerHeight() ) ) ) { 161 $list.stop().animate({ 'scrollTop' : $list.scrollTop() + thumbPos.top }, duration); 162 163 } else if ( self.opts.axis === 'x' && ( 164 thumbPos.left < $list.parent().scrollLeft() || 165 thumbPos.left > ( $list.parent().scrollLeft() + ( $list.parent().width() - thumb.outerWidth() ) ) 166 ) 167 ) { 168 $list.parent().stop().animate({ 'scrollLeft' : thumbPos.left }, duration); 169 } 170 } 171 }, 172 173 update : function() { 174 this.instance.$refs.container.toggleClass( 'os_fancybox-show-thumbs', this.isVisible ); 175 176 if ( this.isVisible ) { 177 if ( !this.$grid ) { 178 this.create(); 179 } 180 181 this.instance.trigger( 'onThumbsShow' ); 182 183 this.focus( 0 ); 184 185 } else if ( this.$grid ) { 186 this.instance.trigger( 'onThumbsHide' ); 187 } 188 189 // Update content position 190 this.instance.update(); 191 }, 192 193 hide : function() { 194 this.isVisible = false; 195 this.update(); 196 }, 197 198 show : function() { 199 this.isVisible = true; 200 this.update(); 201 }, 202 203 toggle : function() { 204 this.isVisible = !this.isVisible; 205 this.update(); 206 } 207 }); 208 209 $(document).on({ 210 211 'onInit.fb' : function(e, instance) { 212 var Thumbs; 213 214 if ( instance && !instance.Thumbs ) { 215 Thumbs = new FancyThumbs( instance ); 216 217 if ( Thumbs.isActive && Thumbs.opts.autoStart === true ) { 218 Thumbs.show(); 219 } 220 } 221 }, 222 223 'beforeShow.fb' : function(e, instance, item, firstRun) { 224 var Thumbs = instance && instance.Thumbs; 225 226 if ( Thumbs && Thumbs.isVisible ) { 227 Thumbs.focus( firstRun ? 0 : 250 ); 228 } 229 }, 230 231 'afterKeydown.fb' : function(e, instance, current, keypress, keycode) { 232 var Thumbs = instance && instance.Thumbs; 233 234 // "G" 235 if ( Thumbs && Thumbs.isActive && keycode === 71 ) { 236 keypress.preventDefault(); 237 238 Thumbs.toggle(); 239 } 240 }, 241 242 'beforeClose.fb' : function( e, instance ) { 243 var Thumbs = instance && instance.Thumbs; 244 245 if ( Thumbs && Thumbs.isVisible && Thumbs.opts.hideOnClose !== false ) { 246 Thumbs.$grid.hide(); 247 } 248 } 249 250 }); 251 252}(document, window.jQuerOs));
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.