1 2if(typeof g_ugFunctions != "undefined") 3 g_ugFunctions.registerTheme("tilesgrid"); 4else 5 jQuery(document).ready(function(){g_ugFunctions.registerTheme("tilesgrid")}); 6 7 8/** 9 * Fixed tiles theme 10 */ 11function UGTheme_tilesgrid(){ 12 13 var t = this; 14 var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper; 15 var g_objThumbsGrid = new UGThumbsGrid(), g_lightbox = new UGLightbox(); 16 var g_functions = new UGFunctions(), g_objTileDesign = new UGTileDesign(); 17 var g_objBullets, g_objNavWrapper, g_objButtonLeft, g_objButtonRight, g_objPreloader; 18 19 20 var g_options = { 21 theme_gallery_padding: 5, //padding from sides of the gallery 22 theme_grid_align: "center", //grid align 23 theme_navigation_type: "arrows", //bullets, arrows 24 theme_arrows_margin_top: 10, //the space between arrows and grid 25 theme_space_between_arrows: 5, //horizontal space between arrows 26 theme_bullets_margin_top: 10, //the space 27 theme_navigation_align: "center", //center, left, right - horizontal align of the navigation 28 theme_navigation_offset_hor: 0, //horizontal offset of the navigation, according the align 29 theme_bullets_color: "gray", //gray, blue, brown, green, red - color of the bullets 30 theme_auto_open:null //auto open lightbox at start 31 }; 32 33 var g_defaults = { 34 gallery_width: "100%", 35 36 tile_width: 195, 37 tile_height: 160, 38 39 grid_num_rows: 3, 40 grid_padding: 10, 41 42 tile_enable_border: true, 43 tile_enable_shadow: true, 44 45 tile_border_radius: 2, 46 47 grid_space_between_cols: 12, 48 grid_space_between_rows: 12, 49 grid_space_between_mobile: 15, 50 51 bullets_space_between: 12, 52 grid_vertical_scroll_ondrag: true, 53 tile_border_width:1, 54 tile_shadow_h:0, 55 tile_shadow_v:0, 56 tile_shadow_blur:0, 57 tile_shadow_spread:1, 58 lightbox_type: 'compact', 59 slider_control_zoom: false 60 }; 61 62 63 //temp variables 64 var g_temp = { 65 handle: null //interval handle 66 }; 67 68 69 /** 70 * Init the theme 71 */ 72 function initTheme(gallery, customOptions){ 73 74 g_gallery = gallery; 75 76 //set default options 77 g_options = jQuery.extend(g_options, g_defaults); 78 79 //set custom options 80 g_options = jQuery.extend(g_options, customOptions); 81 82 modifyOptions(); 83 84 //set gallery options 85 g_gallery.setOptions(g_options); 86 87 g_gallery.setFreestyleMode(); 88 89 g_objects = gallery.getObjects(); 90 91 //get some objects for local use 92 g_objGallery = jQuery(gallery); 93 g_objWrapper = g_objects.g_objWrapper; 94 95 //init objects 96 g_lightbox.init(gallery, g_options); 97 98 g_objThumbsGrid.init(gallery, g_options, true); 99 100 g_objTileDesign = g_objThumbsGrid.getObjTileDesign(); 101 } 102 103 104 /** 105 * modify options 106 */ 107 function modifyOptions(){ 108 109 if(!g_options.grid_num_rows) 110 g_options.grid_num_rows = 9999; 111 112 g_options.bullets_addclass = "ug-bullets-"+g_options.theme_bullets_color; 113 114 } 115 116 117 /** 118 * get gallery width available for the grid 119 */ 120 function getGalleryWidth(){ 121 var galleryWidth = g_gallery.getSize().width; 122 galleryWidth -= g_options.theme_gallery_padding * 2; 123 124 return(galleryWidth); 125 } 126 127 128 /** 129 * set gallery html elements 130 */ 131 function setHtml(){ 132 133 //init bullets (only after panes size estimation) 134 if(g_options.theme_navigation_type == "bullets"){ 135 136 g_objBullets = new UGBullets(); 137 138 var galleryWidth = getGalleryWidth(); 139 140 var numPanes = g_objThumbsGrid.getNumPanesEstimationByWidth(galleryWidth); 141 142 var objOptions = g_gallery.getOptions(); 143 g_objBullets.init(g_gallery, objOptions, numPanes); 144 145 } 146 147 //add html elements 148 g_objWrapper.addClass("ug-theme-tilesfixed"); 149 150 g_objThumbsGrid.setHtml(); 151 152 if(g_objBullets) 153 g_objBullets.appendHTML(g_objWrapper); 154 155 if(g_options.theme_navigation_type == "arrows"){ 156 var htmlAdd = "<div class='ug-tile-navigation-wrapper' style='position:absolute'>"; 157 htmlAdd += "<div class='ug-button-tile-navigation ug-button-tile-left'></div>"; 158 htmlAdd += "<div class='ug-button-tile-navigation ug-button-tile-right'></div>"; 159 htmlAdd += "</div>"; 160 g_objWrapper.append(htmlAdd); 161 162 g_objNavWrapper = g_objWrapper.children(".ug-tile-navigation-wrapper"); 163 164 g_objButtonLeft = g_objNavWrapper.children(".ug-button-tile-left"); 165 g_objButtonRight = g_objNavWrapper.children(".ug-button-tile-right"); 166 167 g_objButtonLeft.css("margin-right",g_options.theme_space_between_arrows+"px"); 168 } 169 170 g_lightbox.putHtml(); 171 172 //add preloader 173 g_objWrapper.append("<div class='ug-tiles-preloader ug-preloader-trans'></div>"); 174 g_objPreloader = g_objWrapper.children(".ug-tiles-preloader"); 175 g_objPreloader.fadeTo(0,0); 176 177 } 178 179 180 /** 181 * get height estimation by width 182 */ 183 function getHeightEstimation(galleryWidth){ 184 185 //put the placeholder before run. check the width 186 var gridHeight = g_objThumbsGrid.getHeightEstimationByWidth(galleryWidth); 187 var numPanes = g_objThumbsGrid.getNumPanesEstimationByWidth(galleryWidth); 188 189 //add navigation height 190 if(numPanes > 1){ 191 if(g_options.theme_navigation_type == "arrows"){ 192 gridHeight += g_options.theme_arrows_margin_top; 193 gridHeight += 30; //arrows size 194 } 195 else{ 196 gridHeight += g_options.theme_bullets_margin_top; 197 gridHeight += 15; //bullets size 198 } 199 200 } 201 202 return(gridHeight); 203 } 204 205 206 /** 207 * actually run the theme 208 */ 209 function actualRun(){ 210 211 //get gallery width, set estimation height and get width again. 212 var galleryWidth = getGalleryWidth(); 213 var totalHeight = getHeightEstimation(galleryWidth); 214 g_objWrapper.height(totalHeight); 215 var galleryWidth = getGalleryWidth(); 216 217 initEvents(); 218 219 //place preloader 220 g_functions.placeElement(g_objPreloader, g_options.theme_grid_align, 50); 221 222 g_objThumbsGrid.setWidth(galleryWidth); 223 224 g_objThumbsGrid.run(); 225 226 g_lightbox.run(); 227 228 updateBullets(); 229 230 positionElements(); 231 232 233 } 234 235 236 /** 237 * run the theme 238 */ 239 function runTheme(){ 240 241 setHtml(); 242 actualRun(); 243 244 } 245 246 247 /** 248 * position elements 249 */ 250 function positionElements(){ 251 252 var objGallerySize = g_gallery.getSize(); 253 var g_objGridSize = g_objThumbsGrid.getSize(); 254 255 var gridElement = g_objThumbsGrid.getElement(); 256 g_functions.placeElement(gridElement, g_options.theme_grid_align, 0); 257 258 g_objGridSize = g_objThumbsGrid.getSize(); 259 260 var galleryHeight = g_objGridSize.height; 261 262 var numPanes = g_objThumbsGrid.getNumPanes(); 263 264 if(numPanes > 1){ 265 266 //position bullets 267 if(g_objBullets){ 268 269 g_objBullets.getElement().show(); 270 271 var bulletsElement = g_objBullets.getElement(); 272 var bulletsWidth = g_objBullets.getBulletsWidth(); 273 274 //get bullets offset x (relative to the grid) 275 var bulletsX = g_objGridSize.left + g_functions.getElementRelativePos(bulletsWidth, g_options.theme_navigation_align, g_options.theme_navigation_offset_hor, gridElement); 276 277 g_functions.placeElement(bulletsElement, bulletsX, galleryHeight + g_options.theme_bullets_margin_top); 278 279 var sizeBullets = g_functions.getElementSize(bulletsElement); 280 galleryHeight = sizeBullets.bottom; 281 282 } 283 284 //position buttons 285 if(g_objNavWrapper){ 286 287 g_objNavWrapper.show(); 288 289 var navX = g_objGridSize.left + g_functions.getElementRelativePos(g_objNavWrapper, g_options.theme_navigation_align, g_options.theme_navigation_offset_hor, gridElement); 290 291 g_functions.placeElement(g_objNavWrapper, navX, galleryHeight + g_options.theme_arrows_margin_top); 292 293 var sizeNav = g_functions.getElementSize(g_objNavWrapper); 294 295 galleryHeight = sizeNav.bottom; 296 } 297 298 }else{ //if only one pame, hide the navigation 299 300 if(g_objNavWrapper) 301 g_objNavWrapper.hide(); 302 303 if(g_objBullets) 304 g_objBullets.getElement().hide(); 305 } 306 307 g_objWrapper.height(galleryHeight); 308 } 309 310 311 /** 312 * on tile click - open lightbox 313 */ 314 function onTileClick(data, objTile){ 315 316 objTile = jQuery(objTile); 317 var index = objTile.index(); 318 319 g_lightbox.open(index); 320 } 321 322 323 /** 324 * update the bullets 325 */ 326 function updateBullets(){ 327 328 //update bullets 329 if(!g_objBullets) 330 return(false); 331 332 numPanes = g_objThumbsGrid.getNumPanes(); 333 g_objBullets.updateNumBullets(numPanes); 334 g_objBullets.setActive(0); 335 } 336 337 338 /** 339 * on gallery size change - resize the theme. 340 */ 341 function onSizeChange(){ 342 343 var galleryWidth = getGalleryWidth(); 344 345 g_objThumbsGrid.setWidth(galleryWidth); 346 g_objThumbsGrid.run(); 347 348 updateBullets(); 349 350 setTimeout(positionElements, 500); 351 352 } 353 354 355 /** 356 * on tile click - open lightbox 357 */ 358 function onTileClick(data, objTile){ 359 360 objTile = jQuery(objTile); 361 362 var objItem = g_objTileDesign.getItemByTile(objTile); 363 var index = objItem.index; 364 365 g_lightbox.open(index); 366 } 367 368 /** 369 * before items request: hide items, show preloader 370 */ 371 function onBeforeReqestItems(){ 372 373 if(g_objNavWrapper) 374 g_objNavWrapper.hide(); 375 376 if(g_objThumbsGrid) 377 g_objThumbsGrid.getElement().hide(); 378 379 //show preloader: 380 g_objPreloader.fadeTo(0,1); 381 } 382 383 384 /** 385 * open lightbox at start if needed 386 */ 387 function onLightboxInit(){ 388 389 if(g_options.theme_auto_open !== null){ 390 g_lightbox.open(g_options.theme_auto_open); 391 g_options.theme_auto_open = null; 392 } 393 394 } 395 396 397 /** 398 * init buttons functionality and events 399 */ 400 function initEvents(){ 401 402 g_objGallery.on(g_gallery.events.SIZE_CHANGE, onSizeChange); 403 g_objGallery.on(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS, onBeforeReqestItems); 404 405 if(g_objBullets) 406 g_objThumbsGrid.attachBullets(g_objBullets); 407 408 if(g_objNavWrapper){ 409 g_objThumbsGrid.attachNextPaneButton(g_objButtonRight); 410 g_objThumbsGrid.attachPrevPaneButton(g_objButtonLeft); 411 } 412 413 jQuery(g_objTileDesign).on(g_objTileDesign.events.TILE_CLICK, onTileClick); 414 415 jQuery(g_lightbox).on(g_lightbox.events.LIGHTBOX_INIT, onLightboxInit); 416 } 417 418 419 /** 420 * destroy the theme 421 */ 422 this.destroy = function(){ 423 424 g_objGallery.off(g_gallery.events.SIZE_CHANGE); 425 g_objGallery.off(g_gallery.events.GALLERY_BEFORE_REQUEST_ITEMS); 426 427 jQuery(g_objTileDesign).off(g_objTileDesign.events.TILE_CLICK); 428 429 if(g_objBullets) 430 jQuery(g_objBullets).off(g_objBullets.events.BULLET_CLICK); 431 432 jQuery(g_lightbox).off(g_lightbox.events.LIGHTBOX_INIT); 433 434 g_objThumbsGrid.destroy(); 435 g_lightbox.destroy(); 436 437 } 438 439 440 /** 441 * run the theme setting 442 */ 443 this.run = function(){ 444 445 runTheme(); 446 } 447 448 449 /** 450 * init 451 */ 452 this.init = function(gallery, customOptions){ 453 454 initTheme(gallery, customOptions); 455 456 } 457 458 459}
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.