1/** 2 * hover figure caption with mouse direction 3 * Licensed under the MIT license. 4 * http://www.opensource.org/licenses/mit-license.php 5 * 6 * Copyright 2016 MAAB 7 * http://www.github.com/maab16/hover-figure-caption-with-mouse-direction 8 */ 9 10;(function($,window,document,undefined){ 11 'use strict'; 12 13 var deafults = { 14 15 containerWidth : 0, 16 containerHeight : 0, 17 nOfRow : 0, 18 nOfColumn : 0, 19 aspectRatio : '1:1', 20 containerMargin : '0px auto', 21 itemWidth : 0, 22 itemHeight : 0, 23 itemDistance : 20, 24 animationSpeed : 300, 25 containerAnimationDelay : 500, 26 allContainerAnimationSpeed : 500, 27 easing : 'swing', 28 margin : 0, 29 filterController : '.filter-btn', 30 responsive : [ 31 { 32 breakpoint : 1200, 33 containerWidth : 1170, 34 settings : { 35 nOfRow : 3, 36 nOfColumn : 3 37 } 38 }, 39 { 40 breakpoint : 992, 41 containerWidth : 970, 42 settings : { 43 nOfRow : 3, 44 nOfColumn : 3 45 } 46 }, 47 { 48 breakpoint : 768, 49 containerWidth : 750, 50 settings : { 51 nOfRow : 2, 52 nOfColumn : 2 53 } 54 } 55 ] 56 57 } 58 59 function filterData(element,options){ 60 61 this.settings = $.extend({},deafults,options); 62 this.element = $(element); 63 this.win = $(window).width(); 64 this.all = this.element.find('>section'); 65 this.totalItems = this.all.length; 66 //this.containerWidth = (this.settings.containerWidth == 0) ? this.element.width() : this.settings.containerWidth; 67 //this.nOfColumn = (this.settings.nOfColumn == 0) ? Math.round(this.containerWidth/this.all.width()) : this.settings.nOfColumn; 68 //this.nOfRows = (this.settings.nOfRow == 0) ? Math.ceil(this.totalItems/this.nOfColumn) : this.settings.nOfRow; 69 var self = this; 70 71 $(window).on('resize',function(){ 72 self.win = $(this).width(); 73 self.setScreen(); 74 }); 75 76 this.init(); 77 78 }; 79 80 filterData.prototype = { 81 82 init : function(){ 83 var self = this; 84 if (self.win >= 1200) { 85 self.setSettings(1200); 86 }else if (self.win >= 992) { 87 self.setSettings(992); 88 }else if (self.win >= 768) { 89 self.setSettings(768); 90 }else if (self.win < 768) { 91 self.setSettings('xtra-small'); 92 } 93 94 self.itemWidth = (self.settings.itemWidth == 0) ? self.containerWidth/self.nOfColumn : self.settings.itemWidth; 95 self.itemHeight = self.getHeightFromRatio(); 96 self.containerHeight = (self.settings.containerHeight == 0) ? self.nOfRows*self.itemHeight : self.settings.containerHeight; 97 self.top = 0, 98 self.j=0, 99 self.k=0; 100 //Style Container 101 self.element.css({ 102 width : self.containerWidth, 103 height : self.containerHeight, 104 position : 'relative', 105 overflow : 'hidden', 106 margin : '0px auto' 107 }); 108 //Style Each Item 109 self.all.each(function(i,item){ 110 if (self.j*self.itemWidth >= self.element.width()) { 111 self.j = 0; 112 self.k++; 113 } 114 $(this).css({ 115 width : self.itemWidth, 116 height : self.itemHeight, 117 position : 'absolute', 118 left : (self.j*self.itemWidth), 119 top : self.k*self.itemHeight, 120 paddingBottom : self.settings.itemDistance 121 }); 122 self.j++; 123 }); 124 // Style Figure 125 self.all.find('figure').css({ 126 width : '100%', 127 height : '100%' 128 }); 129 //Style Images 130 self.all.find('img').css({ 131 width : '100%', 132 height : '100%' 133 }); 134 135 $(self.settings.filterController).on('change', function(event) { 136 var type = $(this).data('filter-type'); 137 self.$item = $(this).val(); 138 console.log('this is: ' + $(self.settings.filterController).not(this)); 139 $(self.settings.filterController).not(this).prop('selectedIndex', 0); 140 // self.$item = $(this).data('filter'); 141 if (undefined !== self.$item) { 142 $(this).addClass('active-filter'); 143 self.items = self.element.find('section.'+self.$item); 144 self.totalItems = self.items.length; 145 self.m=0; 146 self.n=0; 147 } 148 if ($(this).hasClass('active-filter')) { 149 self.controllDisplay(); 150 } 151 }); 152 153 if (document.location.search.length) { 154 var val = document.location.search.split('=')[1]; 155 $(self.settings.filterController+' option[value='+val+']').parent('select').trigger('change'); 156 } 157 }, 158 controllDisplay : function(){ 159 switch(this.$item){ 160 case 'all': 161 this.displayAll(); 162 break; 163 default : 164 this.displaySingleCategory(); 165 break; 166 } 167 }, 168 setScreen : function(){ 169 var self = this; 170 if (self.win >= 1200) { 171 self.setSettings(1200); 172 }else if (self.win >= 992) { 173 self.setSettings(992); 174 }else if (self.win >= 768) { 175 self.setSettings(768); 176 }else if (self.win < 768) { 177 self.setSettings('xtra-small'); 178 } 179 //console.log('win : '+self.win); 180 //console.log('container : '+self.containerWidth); 181 //console.log('container : '+self.nOfColumn); 182 // self.settings.animationSpeed = 0; 183 // self.settings.containerAnimationDelay = 0; 184 // self.settings.allContainerAnimationSpeed = 0; 185 //self.nOfRows = (self.settings.nOfRow == 0) ? Math.ceil(self.totalItems/self.nOfColumn) : self.settings.nOfRow; 186 self.itemWidth = (self.settings.itemWidth == 0) ? self.containerWidth/self.nOfColumn : self.settings.itemWidth; 187 self.itemHeight = self.getHeightFromRatio(); 188 self.top = 0, 189 self.j=0, 190 self.k=0; 191 self.containerHeight = (self.settings.containerHeight == 0) ? self.nOfRows*self.itemHeight : self.settings.containerHeight; 192 193 //Style Container 194 self.element.css({ 195 width : self.containerWidth, 196 height : self.containerHeight, 197 position : 'relative', 198 overflow : 'hidden', 199 // margin : self.settings.margin 200 }); 201 202 $(self.settings.filterController).each(function(){ 203 self.$item = $(this).data('filter'); 204 if ($(this).hasClass('active-work')) { 205 self.items = self.element.find('section'+self.$item); 206 self.totalItems = self.items.length; 207 self.m=0; 208 self.n=0; 209 self.controllDisplay(); 210 } 211 212 }); 213 }, 214 setSettings : function(breakpoint){ 215 var self = this; 216 $.each(self.settings.responsive,function(index,responsive){ 217 if (responsive.breakpoint == breakpoint){ 218 self.nOfColumn = responsive.settings.nOfColumn; 219 self.nOfRows = responsive.settings.nOfRow; 220 self.containerWidth = responsive.containerWidth; 221 } 222 }); 223 if (breakpoint == 'xtra-small') { 224 self.containerWidth = self.win; 225 self.nOfColumn = 1; 226 self.nOfRows = self.totalItems; 227 } 228 }, 229 getRgba : function(hex,alpha=1) { 230 var r,g,b,a=alpha, 231 //match = hex.match(/^#?(([0-9a-zA-Z]{3}){1,3})$/), 232 match = hex.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i), 233 hex = (match !== null) ? match[1] : '000'; 234 //console.log(hex); 235 236 if (hex.length == 6) { 237 r = parseInt(hex.substring(0, 2), 16); 238 g = parseInt(hex.substring(2, 4), 16); 239 b = parseInt(hex.substring(4, 6), 16); 240 }else if (hex.length == 3) { 241 r = parseInt(hex.substring(0, 1) + hex.substring(0, 1), 16); 242 g = parseInt(hex.substring(1, 2) + hex.substring(1, 2), 16); 243 b = parseInt(hex.substring(2, 3) + hex.substring(2, 3), 16); 244 } 245 return r+','+g+','+b+','+a; 246 }, 247 getHeightFromRatio : function(){ 248 this.ratio = this.settings.aspectRatio.split(':'); 249 return Math.ceil((this.itemWidth*this.ratio[1])/this.ratio[0]); 250 }, 251 displayAll : function(){ 252 var self = this; 253 254 // Display all 255 self.all.css({ 256 display : 'block', 257 opacity : 1, 258 transform : 'scale(1)', 259 transition : 'all 0.5s ease' 260 }); 261 // Animate all 262 self.all.each(function(i,item){ 263 if (self.m*self.itemWidth >= self.element.width()) { 264 self.m = 0; 265 self.n++; 266 } 267 $(this).css({ 268 display : 'block', 269 opacity : 1, 270 width : self.itemWidth, 271 height : self.itemHeight, 272 position : 'absolute', 273 }).animate({ 274 left : (self.m*self.itemWidth), 275 top : self.n*self.itemHeight 276 }, 277 self.settings.animationSpeed, 278 self.settings.easing); 279 self.m++; 280 }); 281 self.element 282 .delay(self.settings.containerAnimationDelay) 283 .animate({ 284 height : self.containerHeight 285 },self.settings.allContainerAnimationSpeed); 286 }, 287 displaySingleCategory : function(){ 288 var self = this, 289 Rows = Math.ceil(self.totalItems/self.nOfColumn), 290 containerHeight; 291 if (Rows <= self.nOfRows) { 292 containerHeight = self.itemHeight*Rows; 293 }else{ 294 containerHeight = self.itemHeight*self.nOfRows; 295 } 296 if (self.$item != undefined) { 297 // Hide all if not match current items 298 self.all.each(function(i,item){ 299 if (!self.matchCurrent(item)) { 300 $(this).css({ 301 display : 'block', 302 opacity : 0, 303 transform : 'scale(0)', 304 transition : 'all 0.5s ease' 305 }); 306 } 307 }); 308 // Show all element if matches current items 309 self.items.css({ 310 display : 'block', 311 opacity : 1, 312 transform : 'scale(1)', 313 transition : 'all 0.5s ease', 314 }); 315 // Animate all items 316 $(self.items).each(function(i,item){ 317 if (self.m*self.itemWidth >= self.element.width()) { 318 self.m = 0; 319 self.n++; 320 } 321 $(item).css({ 322 display : 'block', 323 opacity : 1, 324 width : self.itemWidth, 325 height : self.itemHeight, 326 position : 'absolute', 327 }); 328 $(this).animate({ 329 left : self.m*self.itemWidth, 330 top : self.n*self.itemHeight 331 }, 332 self.settings.animationSpeed, 333 self.settings.easing); 334 self.m++; 335 }); 336 self.element.delay(self.settings.containerAnimationDelay) 337 .animate({ 338 height : containerHeight 339 },self.settings.allContainerAnimationSpeed); 340 } 341 }, 342 matchCurrent : function(current){ 343 var currentItems = $.map(self.items, function(value, index) { 344 return [value]; 345 }); 346 for (var i = 0; i < currentItems.length; i++) { 347 if (current === currentItems[i]) { 348 return true; 349 } 350 } 351 return false;
352 } 353 }; 354 355 $.fn.filterData = function(options){ 356 357 return this.each(function(){ 358 359 if (!$.data(this,'filterData')) { 360 361 $.data(this,'filterData',new filterData(this,options)); 362 } 363 }); 364 }; 365 366 367})(jQuery,window,document);
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.