1import layout from './layout.js'; 2 3var responsive = { 4 5 init: function () { 6 if ($('body').hasClass('site-responsive')) { 7 window.galleries.responsive.navigation(); 8 window.galleries.responsive.records_lists(); 9 } 10 }, 11 12 navigation: function () { 13 14 if ($('body').hasClass('responsive-nav-slide-nav')) { 15 16 if (!$('#responsive_slide_nav_wrapper').length) { 17 $('#header .navigation').wrapAll('<div id="responsive_slide_nav_wrapper"></div>'); 18 } 19 if (!$('#slide_nav_reveal').length) { 20 $('<div id="slide_nav_reveal" tabindex="0" role="button">Menu</div>').appendTo('#header .inner'); 21 } 22 23 if ($('#top_nav ul.topnav li').length == 0 && $('#topnav_translations ul li').length == 0 && $('#header.topnav_dropdown_header').length == 0) { 24 $('#slide_nav_reveal').hide(); 25 } 26 27 28 // CUSTOM TIMING 29 var li_class_delay = 80; 30 31 var custom_delay_attr = $('#responsive_slide_nav_wrapper').attr('data-nav-items-animation-delay'); 32 if (typeof custom_delay_attr !== typeof undefined && custom_delay_attr !== false) { 33 if (custom_delay_attr) { 34 li_class_delay = parseInt(custom_delay_attr); 35 } 36 } 37 38 $('#top_nav_reveal, #slide_nav_reveal').click(function (e) { 39 40 e.preventDefault(); 41 42 // For accessibility - tracks which element to refocus on 43 try { 44 h.accessibility.global_variables.element_to_refocus_to = $(this); 45 } catch (error) { 46 console.error(error); 47 } 48 49 $('.has_dropdown_items_mobile.open').find("a").off('click.pageload'); 50 $('.has_dropdown_items_mobile.open').removeClass('open'); 51 52 if ($('body').hasClass('slide-nav-open')) { 53 $('body').removeClass('slide-nav-open'); 54 setTimeout(function () { 55 $('body').removeClass('slide-nav-active'); 56 }, 400); 57 $('#responsive_slide_nav_wrapper ul li, .header_social_links_mobile, #topnav_search').removeClass('item-visible'); 58 // if the nav is closed allow fullpage.js vertical slideshow to scroll 59 if (typeof window.fullpage_api != 'undefined') { 60 window.fullpage_api.setAllowScrolling(true); 61 } 62 h.accessibility.on_popup_closing('#slide_nav_reveal'); 63 // Accessibility - iOS fix - remove aria-hidden attributes once the mobile nav has been closed 64 $('#header .inner > *:not(.header-ui-wrapper)').attr('aria-hidden', 'false'); 65 $('#slide_nav_reveal').attr('aria-hidden', 'false'); 66 $('#main_content').attr('aria-hidden', 'false'); 67 $('#footer').attr('aria-hidden', 'false'); 68 } else { 69 $('body').addClass('slide-nav-active'); 70 setTimeout(function () { 71 $('body').addClass('slide-nav-open'); 72 }, 10); 73 h.accessibility.on_popup_opening('#responsive_slide_nav_wrapper', '#top_nav .topnav a:first-of-type', '#top_nav_reveal'); 74 75 // Accessibility - iOS fix - hide all other elements other than the nav menu from the screen reader 76 $('#header .inner > *:not(.header-ui-wrapper)').attr('aria-hidden', 'true'); 77 $('#slide_nav_reveal').attr('aria-hidden', 'true'); 78 $('#main_content').attr('aria-hidden', 'true'); 79 $('#footer').attr('aria-hidden', 'true'); 80 81 // if the nav is open don't allow fullpage.js vertical slideshow to scroll 82 if (typeof fullpage_api != 'undefined') { 83 window.fullpage_api.setAllowScrolling(false); 84 } 85 86 var delay = 0; 87 $('#responsive_slide_nav_wrapper ul li:not(.nested), .header_social_links_mobile, #topnav_search').each(function () { 88 var $li = $(this); 89 setTimeout(function () { 90 $li.addClass('item-visible'); 91 }, delay += li_class_delay); 92 }); 93 } 94 }); 95 96 // trigger above click function if the enter or space keys are pressed (for accessibility) 97 $('#top_nav_reveal, #slide_nav_reveal').keydown(function (event) { 98 var curElement = document.activeElement; 99 if ($(this)[0] === curElement && (event.keyCode === 13 || event.keyCode === 32)) { 100 event.preventDefault(); 101 $(this).click(); 102 } 103 }); 104 105 } else { 106 107 // Initialise the menu button 108 109 $('#top_nav_reveal').click(function () { 110 ///$('.parallax-mirror').animate({'margin-top': '300px'}, 300); 111 if ($('.topnav').css('display') == 'none') { 112 $('.topnav, #translations_nav, #header_quick_search').slideDown(); 113 $('#header').addClass('responsive-nav-open'); 114 } else { 115 $('.topnav, #translations_nav, #header_quick_search').slide
115Up(function () { 116 $(this).attr('style', ''); 117 }); 118 $('#header').removeClass('responsive-nav-open'); 119 } 120 return false; 121 }); 122 123 124 } // end of if 125 126 }, 127 128 records_lists: function () { 129 $('.records_list').not('.columns_list').not('.tile_list').not('.flow_list').not('.reading_list').not('.records_list_noprocess').each(function () { 130 131 if ($('> ul', this).length) { 132 // Remove extra ULs in lists, these are not responsive friendly 133 if ($('> ul', this).length > 1) { 134 $('> ul', this).replaceWith(function () { 135 return $(this).html(); 136 }); 137 $(this).wrapInner('<ul></ul>'); 138 } 139 140 // Remove whitespace between list items (removes space between inline-block elements) 141 if ($('> ul > li', this).length > 1) { 142 $(this).html($(this).html().replace(/>\s+</g, '><')); 143 if (typeof window.cart != 'undefined') { 144 window.cart.add_to_cart($('.store_item .store_item_add_to_cart')); 145 window.cart.add_to_wishlist($('.add_to_wishlist')); 146 window.cart.remove_from_wishlist($('.wishlist_button .store_item_remove_from_wishlist')); 147 } 148 } 149 150 $(this).find('.records_list').each(function () { 151 // Run the same commands for any nested elements 152 if ($('> ul', this).length > 1) { 153 $('> ul', this).replaceWith(function () { 154 return $(this).html(); 155 }); 156 $(this).wrapInner('<ul></ul>'); 157 } 158 if ($('> ul > li', this).length > 1) { 159 $(this).html($(this).html().replace(/>\s+</g, '><')); 160 } 161 }); 162 163 if ($('body.site-lib-version-1-0').length || !$('body[class*="site-lib-version"]').length) { 164 $('> ul > li', this).each(function () { 165 $('.image', this).wrap('<span class="outer"></span>'); 166 $('.image', this).wrap('<span class="image_wrapper"></span>'); 167 $('.outer', this).prepend('<span class="fill"></span>'); 168 }); 169 } 170 } 171 }); 172 173 $('.records_list.columns_list').each(function () { 174 // Remove whitespace between list items (removes space between inline-block elements) 175 $(this).html($(this).html().replace(/>\s+</g, '><')); 176 }); 177 178 // Run the archimedes core init again, as removing spaces between elements will have removed any javascript events on the modified grid 179 if (typeof window.archimedes != 'undefined') { 180 window.archimedes.archimedes_core.process_links(); 181 } 182 h.accessibility.init(); 183 184 $(".records_list ul").each(function () { 185 var item_count = $(this).children('li').length; 186 $(this).closest('.records_list').addClass('record-count-' + item_count); 187 }); 188 189 window.galleries.responsive.tile_list_setup(); 190 window.galleries.responsive.flow_list_setup(); 191 window.galleries.responsive.grid_dynamic_layout(); 192 var resize_timeout; 193 var last_window_width = $(window).width(); 194 195 196 $(window).resize(function () { 197 clearTimeout(resize_timeout); 198 resize_timeout = setTimeout(function () { 199 window.galleries.layout.init(); 200 201 if ($(window).width() !== last_window_width) { 202 last_window_width = $(window).width(); 203 window.galleries.responsive.tile_list_init(); 204 window.galleries.responsive.tile_list_after_resize(); 205 window.galleries.responsive.flow_list_init(); 206 window.galleries.responsive.flow_list_after_resize(); 207 } 208 window.galleries.responsive.grid_dynamic_layout(); 209 210 if ($('.records_list.flow_list, .records_list.tile_list').length) { 211 if (window.cart && typeof window.cart != 'undefined') {
212 window.cart.add_to_cart($('.records_list.flow_list .store_item .store_item_add_to_cart , .records_list.tile_list .store_item .store_item_add_to_cart')); 213 window.cart.add_to_wishlist($('.records_list.flow_list .add_to_wishlist, .records_list.tile_list .add_to_wishlist')); 214 window.cart.remove_from_wishlist($('.records_list.flow_list .wishlist_button .store_item_remove_from_wishlist, .records_list.tile_list .wishlist_button .store_item_remove_from_wishlist')); 215 } 216 } 217 }, 400); 218 }); 219 220 221 // Depricated in 2.0 222 window.galleries.responsive.dynamic_grid_image_size(); 223 $(window).resize(function () { 224 // Depricated in 2.0 225 window.galleries.responsive.dynamic_grid_image_size(); 226 }); 227 228 229 if ($('.records_list.flow_list, .records_list.tile_list').length) { 230 if (window.cart && typeof window.cart != 'undefined') { 231 window.cart.add_to_cart($('.records_list.flow_list .store_item .store_item_add_to_cart , .records_list.tile_list .store_item .store_item_add_to_cart')); 232 window.cart.add_to_wishlist($('.records_list.flow_list .add_to_wishlist, .records_list.tile_list .add_to_wishlist')); 233 window.cart.remove_from_wishlist($('.records_list.flow_list .wishlist_button .store_item_remove_from_wishlist, .records_list.tile_list .wishlist_button .store_item_remove_from_wishlist')); 234 } 235 } 236 }, 237 238 tile_list_setup: function (context) { 239 240 if (context && typeof context != 'undefined') { 241 var context = context; 242 } else { 243 var context = 'body'; 244 } 245 $('.records_list.tile_list', context).each(function () { 246 var original_html = $(this).html(); 247 $(this).html(''); 248 $(this).append('<div class="tile_list_formatted"></div>'); 249 $(this).append('<div class="tile_list_original"></div>'); 250 $('.tile_list_original', this).html(original_html).css('visibility', 'hidden'); 251 }); 252 window.galleries.responsive.tile_list_init(context); 253 }, 254 255 tile_list_init: function (context, force) { 256 257 258 if (context && typeof context != 'undefined') { 259 var context = context; 260 } else { 261 var context = 'body'; 262 } 263 264 if (force && typeof force != 'undefined') { 265 var force = force; 266 } else { 267 var force = false; 268 } 269 270 $('.records_list.tile_list', context).each(function () { 271 272 if ($('.tile_list_original ul', this).length) { 273 274 // Check if the script has already been run before and set variables 275 if ($(this).hasClass('initialised')) { 276 var init_rerun = true; 277 var existing_formatted_list_column_count = $('.tile_list_formatted ul', this).length; 278 } else { 279 $(this).addClass('initialised'); 280 init_rerun = false; 281 } 282 283 // Start initialising the new list 284 285 var init_allowed = true; 286 287 $('.tile_list_original', this).removeClass('hidden'); 288 289 var tile_list_instance = $(this); 290 var $tile_list_formatted = $('.tile_list_formatted', tile_list_instance); 291 var tile_list_width = $(this).width(); 292 var tile_list_column_width = Math.floor($('.tile_list_original ul', this)[0].getBoundingClientRect().width + parseInt($('.tile_list_original ul', this).css('margin-left')) + parseInt($('.tile_list_original ul', this).css('margin-right'))); 293 var column_count = 3; 294 var column_count_calculated = Math.floor(tile_list_width / tile_list_column_width); 295 if (column_count_calculated < 7) { 296 column_count = column_count_calculated; 297 } 298 299 if (init_rerun && !force) { 300 // If the script is being run again, check if the column count is different to before. If not, stop the list from being rebuilt. 301 if (existing_formatted_list_column_count == column_count) { 302 init_allowed = false;
303 } 304 } 305 306 var caption_heights = []; 307 $('.tile_list_original li:not(.hidden)', this).each(function () { 308 var orginal_item_caption_height = $(this).find('.content').outerHeight(); 309 if (orginal_item_caption_height) { 310 caption_heights.push(orginal_item_caption_height); 311 } else { 312 caption_heights.push(0); 313 } 314 }); 315 316 $('.tile_list_original', this).addClass('hidden'); 317 318 if (init_allowed) { 319 var columns = {}; 320 $.each(Array(column_count), function (index, value) { 321 columns[index] = {'height': 0, 'objects': []}; 322 }); 323 324 $('.tile_list_original li:not(.hidden)', this).each(function (index) { 325 if ($(this).attr('data-width') && $(this).attr('data-height')) { 326 var data_width = $(this).attr('data-width'); 327 var data_height = $(this).attr('data-height'); 328 } else { 329 var data_width, data_height = '400'; 330 console.warn('tile_list_init: Width and height of each image is required as a data attribute for this script to work.'); 331 } 332 var caption_height = caption_heights[index]; 333 var height_to_width_factor = parseInt(data_width) / tile_list_column_width; 334 var relative_item_height = Math.ceil((parseInt(data_height) / height_to_width_factor) + caption_height); 335 var lowest_height_index = 0; 336 if (columns[0] && typeof columns[0] != 'undefined') { 337 var loop_current_lowest_height = columns[0]['height']; 338 $.each(columns, function (index, value) { 339 if ((value.height < loop_current_lowest_height)) { 340 lowest_height_index = index; 341 loop_current_lowest_height = value.height; 342 } 343 }); 344 columns[lowest_height_index]['height'] = columns[lowest_height_index]['height'] + relative_item_height; 345 columns[lowest_height_index]['objects'].push($(this).clone().find('.video_inline').remove().end()); 346 // console.log('column ', lowest_height_index, '. height ', caption_height, $(this).text()); 347 } 348 }); 349 350 // console.log(columns); 351 352 // Generate formatted tile list 353 $tile_list_formatted.html(''); 354 $.each(columns, function (index, value) { 355 $tile_list_formatted.append('<ul></ul>'); 356 $tile_list_formatted.find('ul:last-child').append(value.objects); 357 }); 358 359 window.galleries.responsive.tile_list_after_init(); 360 361 } 362 363 // Scatter list functions 364 if ($(this).hasClass('scatter_list')) { 365 window.galleries.responsive.tile_list_scatter(); 366 } 367 368 // Process formatted tile list 369 $tile_list_formatted.each(function () { 370 var $this = $(this); 371 372 $this.find('ul:last-child').addClass('last'); 373 374 // Video inline not currently supported 375 $this.find('.video_inline').remove(); 376 377 // Set the size of the image container as a placeholder for lazyload 378 $this.find('li').each(function () { 379 window.galleries.responsive.set_item_min_height($(this)); 380 }); 381 382 }); 383 384 } 385 386 }); 387 }, 388 389 set_item_min_height: function ($element) { 390 // Set the size of the image container as a placeholder for lazyload 391 var item_width = $element.find('.image').width(); 392 var image_width = $element.attr('data-width'); 393 var image_height = $element.attr('data-height'); 394 var image_width_proportional = 0; 395 var image_height_proportional = 0; 396 if (image_width && image_height) { 397 image_width_proportional = item_width / image_width; 398 image_height_proportional = image_height * image_width_proportional; 399 if (image_height_proportional) { 400 $element.find('.image').css('min-height', image_height_proportional); 401 } 402 } 403 }, 404 405 tile_list_append_refresh: function (tile_list_instance) { 406 407 //Refreshes the visible tile list (tile_list_formatted) after manually appending list items to the tile_list_original, for example after list-ajax-load-more button is used 408 var column_count = tile_list_instance.find('.tile_list_formatted ul').length; 409 var $tile_list_formatted = $('.tile_list_formatted', tile_list_instance); 410 411 var tile_list_column_width = $tile_list_formatted.first('ul').width(); 412 var columns = {}; 413 $.each(Array(column_count), function (index, value) { 414 columns[index] = {'height': 0, 'objects': []}; 415 }); 416 417 418 // Work out columns with all items in tile_list_original, not just the incoming ones. 419 // This ensures that we retain all of the correct column heights - exactly as if we were building the list from scratch. 420 421 //TODO this code that sorts items into columns is basically a duplication of the same funcationality in tile_list_init. 422 $('.tile_list_original li', tile_list_instance).each(function (index) { 423 424 if ($(this).attr('data-width') && $(this).attr('data-height')) { 425 var data_width = $(this).attr('data-width'); 426 var data_height = $(this).attr('data-height'); 427 } else { 428 var data_width, data_height = '400'; 429 console.warn('tile_list_init: Width and height of each image is required as a data attribute for this script to work.'); 430 } 431 var height_to_width_factor = parseInt(data_width) / tile_list_column_width;
432 var relative_item_height = Math.ceil(parseInt(data_height) / height_to_width_factor); 433 var lowest_height_index = 0; 434 if (columns[0] && typeof columns[0] != 'undefined') { 435 var loop_current_lowest_height = columns[0]['height']; 436 $.each(columns, function (index, value) { 437 if ((value.height < loop_current_lowest_height)) { 438 lowest_height_index = index; 439 loop_current_lowest_height = value.height; 440 } 441 }); 442 columns[lowest_height_index]['height'] = columns[lowest_height_index]['height'] + relative_item_height; 443 columns[lowest_height_index]['objects'].push($(this).clone().find('.video_inline').remove().end()); 444 } 445 }); 446 447 448 $.each(columns, function (index, value) { 449 450 var $formatted_column = $tile_list_formatted.find('ul:eq(' + index + ')'); 451 452 //Check how many items are already in the visible column 453 var existing_items_in_visible_col = $formatted_column.find('li').length; 454 455 //Append all items in column object from the existing length to the total length 456 $formatted_column.append(value.objects.slice(existing_items_in_visible_col, value.objects.length)); 457 458 $tile_list_formatted.find('.video_inline').remove(); 459 $tile_list_formatted.find('li').each(function () { 460 window.galleries.responsive.set_item_min_height($(this)); 461 }); 462 463 }); 464 465 }, 466 467 tile_list_after_init: function () { 468 Artlogic.import('galleries_js/layout.js').then(function (m) { 469 window.galleries.layout.init(); 470 }) 471 }, 472 473 tile_list_after_resize: function () { 474 Artlogic.import('galleries_js/layout.js').then(function (m) { 475 window.galleries.layout.init(); 476 }) 477 Artlogic.import('galleries_js/contact_form_popup.js').then(function (m) { 478 window.galleries.contact_form_popup.init(); 479 }) 480 $('.tile_list .click_event_added').removeClass('click_event_added'); 481 Artlogic.import('galleries_js/misc.js').then(function (m) { 482 window.galleries.misc.extended_click_area(); 483 }) 484 if (typeof $.pageload != 'undefined') { 485 if (typeof $.pageload.refresh == 'function') { 486 $.pageload.refresh('.tile_list'); 487 } else { 488 console.warn('Failed to run pageload.refresh') 489 } 490 } 491 Artlogic.import('galleries_js/artworks.js').then(function (m) { 492 if (window.galleries.artworks.favourites !== undefined && window.galleries.artworks.favourites.init !== undefined) { 493 window.galleries.artworks.favourites.init(); 494 } 495 }) 496 497 }, 498 499 flow_list_setup: function (context) { 500 if (context && typeof context != 'undefined') { 501 var context = context; 502 } else { 503 var context = 'body'; 504 } 505 $('.records_list.flow_list', context).each(function () { 506 var original_html = $(this).html(); 507 $(this).html(''); 508 $(this).append('<div class="flow_list_formatted"></div>'); 509 $(this).append('<div class="flow_list_original"></div>'); 510 $('.flow_list_original', this).html(original_html).css('visibility', 'hidden'); 511 }); 512 window.galleries.responsive.flow_list_init(context); 513 }, 514 515 flow_list_format: function ($flow_list_formatted, target_height, column_count, row_class_to_target) { 516 517 var row_heights = []; 518 var tallest_height = 0; 519 var cur_tallest_height = 0; 520 var row_count = 0; 521 522 // row_class_to_target is a class which has been added to specific rows and only those rows should be formatted 523 // For example when ajax load more button is pressed we only want to format the new/modified rows. 524 row_class_to_target = (typeof row_class_to_target !== 'undefined') ? row_class_to_target : '.flow_list_row'; 525 526 // Process formatted flow list 527 $flow_list_formatted.find(row_class_to_target).each(function () { 528 529 var $this = $(this); 530 row_count += 1; 531 var items = $this.find("li"); 532 var total_margin = 0; 533 var items_array = items.get(); 534 var combinedWidth = items_array.reduce(function (sum, item) { // .get returns the jQuery object's elements as an array 535 536 var scaled_width; 537 if ("width" in item.dataset && "height" in item.dataset) { 538 var data_width = item.dataset.width; 539 var data_height = item.dataset.height; 540 var scale_ratio = target_height / data_height; 541 var scaled_width = data_width * scale_ratio; 542 var style = window.getComputedStyle(item); 543 var marginLeft = parseInt(style.getPropertyValue('margin-left')); 544 var marginRight = parseInt(style.getPropertyValue('margin-right')); 545 546 total_margin += (marginLeft + marginRight); 547 548 } else { 549 console.warn('flow_list_init: Width and height of each image is required as a data attribute for this script to work.'); 550 } 551 552 return sum + scaled_width; 553 554 }, 0); 555 556 var diff = ($this.width() - total_margin) / combinedWidth; 557 var final_item_height = (target_height - 1) * diff; // 999 allows 1 px of wiggle room, in case it's too wide by subpixels 558 559 // Add all of the rows except the last one to the row_heights list. 560 // When we calculate the average row height later, we don't want to use the last row as it can be an anomaly 561 if (row_count != $flow_list_formatted.find(row_class_to_target).length) { 562 row_heights.push(final_item_height); 563 } 564 565 // Get the current tallest height or if no current tallest - get target height 566 var cur_tallest_height = ((tallest_height) ? tallest_height : target_height); 567 568 if (((items_array.length < (column_count - 1) || column_count == 2 && items_array.length == 1) && final_item_height > cur_tallest_height) && !$(this).closest('.flow_list').hasClass('expand-single-item')) { 569 570 // - For the last row, use the average height of the other rows to determine the height if there are not enough items to fill all the columns 571 // - We check against (column_count - 1) because we want the items to fill the full width of the row if there is only one less item. 572 // - If the column number is set to 2, we don't want a singular item on the last row to go full width because it would be too big. Therefore we use the average height. 573 574 var total = 0; 575 for (var i = 0; i < row_heights.length; i++) { 576 total += row_heights[i]; 577 } 578 var average_row_height = total / row_heights.length; 579 final_item_height = average_row_height 580 581 } else { 582 if (final_item_height > tallest_height) { 583 tallest_height = final_item_height; 584 } 585 } 586 587 items.find('.image').height(final_item_height); 588 items_array.forEach(function (item, index) { 589 var final_height_scale = final_item_height / item.dataset.height; 590 if($(item).parent().find("li").length == 1){ 591 if(item.dataset.width <= $(item).find('.image').width()){ 592 593 594 $(item).width(item.dataset.width); 595 $(item).height('auto'); 596 $(item).find('.image').height('auto'); 597 }else{ 598 $(item).width(item.dataset.width * final_height_scale); 599 600 } 601 602 }else{ 603 604 $(item).width(item.dataset.width * final_height_scale); 605 606 } 607 }); 608 609 $this.find('ul:last-child').addClass('last'); 610 // Video inline not currently supported 611 $this.find('.video_inline').remove(); 612 $this.removeClass('row_requires_formatting'); 613 }); 614 615 }, 616 617 flow_list_create_rows: function (flow_list_formatted_instance, list_items_to_be_added, column_count) { 618 619 // TO DO: add in some logic that when a setting is turned on, the quantity of images added to a row depend on the image proportions within the row. 620 // For example if there are 4 columns but there are 2 lanscape images next to each other, set the column number to 2 for that row. 621 622 var columns = {};
623 var column_split = Math.ceil(list_items_to_be_added.length / column_count); 624 625 if (column_split) { 626 $.each(Array(column_split), function (index, value) { 627 columns[index] = {'objects': []}; 628 }); 629 } 630 631 list_items_to_be_added.each(function () { 632 var lowest_height_index = 0; 633 if (columns[0] && typeof columns[0] != 'undefined') { 634 $.each(columns, function (index, value) { 635 if ((this.objects.length < column_count)) { 636 lowest_height_index = index; 637 return false; 638 } 639 }); 640 columns[lowest_height_index]['objects'].push($(this).clone().find('.video_inline').remove().end()); 641 } 642 }); 643 644 $.each(columns, function (index, value) { 645 flow_list_formatted_instance.append('<ul class="flow_list_row row_requires_formatting"></ul>'); 646 flow_list_formatted_instance.find('ul:last-child').append(value.objects); 647 }); 648 649 }, 650 651 flow_list_init: function (context) { 652 if (context && typeof context != 'undefined') { 653 var context = context; 654 } else { 655 var context = 'body'; 656 } 657 658 $('.records_list.flow_list', context).each(function () { 659 660 var $flow_list = $(this); 661 var $flow_list_original = $('.flow_list_original ul', this); 662 var init_rerun 663 var existing_formatted_list_column_count 664 665 if ($flow_list_original.length) { 666 // Check if the script has already been run before and set variables 667 if ($(this).hasClass('initialised')) { 668 init_rerun = true; 669 670 existing_formatted_list_column_count = $('.flow_list_formatted ul.flow_list_row:first li', this).length; 671 672 } else { 673 $(this).addClass('initialised'); 674 init_rerun = false; 675 } 676 677 // Start initialising the new list 678 var init_allowed = true; 679 $flow_list_original.removeClass('hidden'); 680 var flow_list_instance = $(this); 681 var $flow_list_formatted = $('.flow_list_formatted', flow_list_instance); 682 var flow_list_width = $flow_list.width(); 683 var item_widths = $flow_list_original.find('li').first().width(); 684 var number_of_items_in_grid = $flow_list_original.find('li').length; 685 var column_count_calculated = Math.round((flow_list_width / item_widths) * 10) / 10; 686 var column_count = column_count_calculated; 687 688 // If we can't detect any columns, do not initialise 689 if (!column_count) { 690 init_allowed = false 691 } 692 693 // If there are less items in the grid that the number of columns, set the column number to the number of items 694 // This needs to be done to stop the grid from trying to be formatted on resize etc 695 if (column_count > number_of_items_in_grid) { 696 column_count = number_of_items_in_grid 697 } 698 $flow_list_formatted.attr('data-column-count', column_count); 699 700 if (init_rerun) { 701 // If the script is being run again, check if the column count is different to before. If not, stop the list from being rebuilt. 702 if (existing_formatted_list_column_count == column_count) { 703 init_allowed = false; 704 } 705 } 706 707 $flow_list_original.addClass('hidden'); 708 709 var target_height = 600; //MOSTLY ARBITRARY - JUST A UNIFYING NUMBER. IS THE MAX HEIGHT OF 710 711 if (init_allowed) { 712 713 $flow_list_formatted.html(''); 714 window.galleries.responsive.flow_list_create_rows($flow_list_formatted, $flow_list_original.find('li'), column_count); 715 window.galleries.responsive.flow_list_format($flow_list_formatted, target_height, column_count); 716 window.galleries.responsive.flow_list_after_init(); 717 718 } else { 719 //just run the formatting to ensure the sizes are correct 720 window.galleries.responsive.flow_list_format($flow_list_formatted, target_height, column_count); 721 } 722 } 723 }); 724 725 }, 726 727 flow_list_append_refresh: function (flow_list_instance) { 728 729 // This function gets called when new items get appended to the list - for example when the aja
729x load more button gets pressed. 730 731 var $flow_list_original = $('.flow_list_original', flow_list_instance); 732 var $flow_list_formatted = $('.flow_list_formatted', flow_list_instance); 733 var column_count = $flow_list_formatted.attr('data-column-count'); 734 var last_row_column_count = $flow_list_formatted.find('ul:last li').length; 735 var $last_row_before_new_content = $flow_list_formatted.find('ul:last'); 736 var $ajax_loaded_list_items = $flow_list_original.find('ul li.ajax-loaded-list-item').not(".pageload-refreshed"); 737 738 // Work out if the last row before adding the new items needs new items added to it to fill the row and then adds them. 739 // For example if the last row had 2 items and the column count was 4, we would need to add 2 of the new ajax loaded items into that already existing row to fill it. 740 if (last_row_column_count < column_count) { 741 742 // Don't scroll list position if we are adding new items to the last row. 743 flow_list_instance.addClass('no_scroll_after_load'); 744 // Add class so width & height of existing items in the last row can be transitioned 745 $last_row_before_new_content.find('li').addClass('transition_size'); 746 // Calculate how many new items need to be added to the previously last row. 747 var number_of_items_required_to_complete_last_row = column_count - last_row_column_count; 748 // Get the required amount of items from the new ajax loaded items list. 749 var items_to_fill_spaces = $ajax_loaded_list_items.slice(0, number_of_items_required_to_complete_last_row); 750 751 // Insert the new items into what previously was the existing last row. 752 items_to_fill_spaces.clone().insertAfter($last_row_before_new_content.find('li:last')); 753 754 // Add a class to this row so we know it requires reformatting it because the items within it have changed. 755 $last_row_before_new_content.addClass('row_requires_formatting'); 756 757 // Set the ajax loaded list of items to not include the ones which have just been added to the existing row. 758 $ajax_loaded_list_items = $ajax_loaded_list_items.slice(number_of_items_required_to_complete_last_row); 759 760 // Remove class once size has transitioned 761 setTimeout(function () { 762 $flow_list_formatted.find('li.transition_size').removeClass('transition_size'); 763 }, 1500); 764 } 765 766 window.galleries.responsive.flow_list_create_rows($flow_list_formatted, $ajax_loaded_list_items, column_count); 767 window.galleries.responsive.flow_list_format($flow_list_formatted, 600, column_count, '.flow_list_row.row_requires_formatting'); 768 769 }, 770 771 flow_list_after_init: function () { 772 window.galleries.layout.init(); 773 }, 774 flow_list_after_resize: function () { 775 776 window.galleries.layout.init(); 777 $(window).trigger('resize'); 778 }, 779 780 tile_list_scatter: function () { 781 782 /* 783 Scatter items are 'pulled' out of place to create a random effect. 784 The maximum they can deviate is the margin/padding of the column, this prevents them from touching. 785 */ 786 var max_x_pull = ($('.tile_list_formatted ul').outerWidth(true) - $('.tile_list_formatted ul').outerWidth(false)) / 2; 787 var min_x_pull = -max_x_pull; 788 789 $('.tile_list_formatted ul').each(function () { 790 var $this = $(this); 791 var y_pull = window.galleries.responsive.tile_list_scatter_bounds((min_x_pull / 2), (max_x_pull * 2)); 792 $this.css({ 793 'padding-top': y_pull + 'px' 794 }); 795 }); 796 797 $('.tile_list_formatted ul li').each(function () { 798 var $this = $(this); 799 var x_pull = window.galleries.responsive.tile_list_scatter_bounds(min_x_pull, max_x_pull); 800 if (!$this.find('.wrap_inner').length) { 801 $this.wrapInner('<div class="wrap_inner"></div'); 802 } 803 $this.attr('data-x-pull', x_pull); 804 $this.find('.wrap_inner').css({ 805 'transform': 'translateX(' + x_pull + 'px )', 806 'margin-bottom': max_x_pull * 2 807 }); 808 }); 809 810 if (!$('.tile_list').hasClass('scatter-list-initialised')) { 811 window.setTimeout(function () { 812 $('.tile_list').addClass('scatter-list-initialised'); 813 }, 1000); 814 } 815 816 }, 817 818 tile_list_scatter_bounds: function (min, max) { 819 return Math.floor(Math.random() * (max - min + 1)) + min; 820 }, 821 822 grid_dynamic_layout: function () { 823 824 $('.records_list.set_minimum_heights_per_row, .records_list.set_minimum_heights_per_item').each(function () { 825 $(this).addClass("grid_dynamic_disable_lazyload_height"); 826 var initial_rows = $(this).attr('data-initial-rows') && typeof $(this).attr('data-initial-rows') != 'undefined' ? $(this).attr('data-initial-rows') : false;
827 var row_number = 0; 828 var row_offset = 0; 829 830 $('li', this).each(function () { 831 $(this).find('.image > span').css('min-height', ''); 832 var item_width = $(this).find('.image').width(); 833 var image_width = $(this).attr('data-width'); 834 var image_height = $(this).attr('data-height'); 835 var image_width_proportional = 0; 836 var image_height_proportional = 0; 837 if (image_width && image_height) { 838 image_width_proportional = item_width / image_width; 839 image_height_proportional = image_height * image_width_proportional; 840 if (image_height_proportional) { 841 $(this).find('.image').css('min-height', image_height_proportional); 842 $(this).find('.image > span').css('min-height', image_height_proportional); 843 } 844 } 845 $(this).removeClass('revealable'); 846 }); 847 848 if ($(this).hasClass('set_minimum_heights_per_row')) { 849 $('li', this).each(function () { 850 // Find adjacent elements 851 var offset_top = $(this).offset().top; 852 var this_image_height = $(this).find('.image').height(); 853 if (offset_top > row_offset) { 854 row_number = row_number + 1; 855 row_offset = offset_top; 856 } 857 $(this).parent().find('li').each(function () { 858 if ($(this).offset().top == offset_top) { 859 $(this).attr('data-row-number', row_number); 860 if ($(this).find('.image').height() < this_image_height) { 861 $(this).find('.image').css('min-height', this_image_height); 862 $(this).find('.image > span').css('min-height', this_image_height); 863 } 864 } 865 }); 866 }); 867 } 868 $('li', this).not('.revealed').each(function () { 869 // Hide revealable elements 870 871 var row_number = $(this).attr('data-row-number'); 872 if (row_number && parseInt(row_number) > parseInt(initial_rows)) { 873 $(this).addClass('revealable'); 874 } 875 }); 876 }); 877 878 }, 879 880 dynamic_grid_image_size: function () { 881 // Depricated in 2.0 882 if ($('body').hasClass('responsive-layout-forced-image-lists')) { 883 var selector_context = $('body.responsive-layout-forced-image-lists .records_list.image_list, body.responsive-layout-forced-image-lists .records_list.detail_list'); 884 $(selector_context).each(function () { 885 $('li', this).each(function () { 886 887 // Save the original style as a data tag if it already has one 888 var image_span_el = $('.image > span', this); 889 if (typeof image_span_el.attr('data-style') !== typeof undefined && image_span_el.attr('data-style') !== false) { 890 var image_span_el_original_style = image_span_el.attr('data-style'); 891 } else { 892 if (typeof image_span_el.attr('style') != typeof undefined && image_span_el.attr('style') != false) { 893 var image_span_el_original_style = image_span_el.attr('style'); 894 } else { 895 var image_span_el_original_style = ''; 896 } 897 image_span_el.attr('data-style', image_span_el_original_style); 898 } 899 900 // Add the dynamic heights for each image element if required 901 if ($('.fill', this).css('display') == 'block') { 902 var image_wrapper_height = $('.image_wrapper', this).height(); 903 $('.image', this).attr('style', 'height:' + image_wrapper_height + 'px !important;'); 904 $('.image >
904 span', this).attr('style', 'height:' + image_wrapper_height + 'px !important;' + image_span_el_original_style); 905 $('.image span > img', this).attr('style', 'max-height:' + image_wrapper_height + 'px !important;'); 906 } else if ($('.image, .image > span', this).attr('style')) { 907 if ($('.image, .image > span', this).attr('style').indexOf('height') > -1) { 908 //$('.image', this).attr('style', ''); 909 //we need the min-height in .image to remain so that the image doesn't overlap when the window on load 910 //style= '' commented out by Bao 911 //probably we don't need this function anymore, not sure who is using it 912 //it also said Depricated in 2.0 at the top. 913 //we should find a solution for v1.0 rather than keep it here but running by every 2.0 site, it will overlapped the image 914 $('.image > span:not(.hover-element)', this).attr('style', image_span_el_original_style); 915 } 916 // Only remove the style if we haven't added focal point data which positions the image with object-position 917 var image_style = $('.image img', this).attr('style'); 918 if (image_style && typeof image_style !== 'undefined' && image_style.indexOf('object-position') == -1) { 919 $('.image img', this).attr('style', ''); 920 } 921 } 922 }); 923 }); 924 } 925 926 }, 927 928} 929 930window.galleries = window.galleries || {}; 931window.galleries.responsive = responsive; 932export default responsive;
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.