1import fancybox from '../plugins/fancybox-2.1.3.js' 2 3var image_popup = { 4 5 init: function(custom_fancybox_options) { 6 7 if( $('body.prevent_user_image_save').length > 0 ){ 8 $('.image_popup').not('.fancybox-filtered').each(function(i){ 9 var image_url = $('.image_popup').eq(i).attr('href'); 10 $('.image_popup').eq(i).attr('data-fancybox-href', image_url).attr('href', "#"); 11 }); 12 } 13 var reset_hash_on_close = false; 14 var popup_has_zoom_buttons = false; 15 var original_page_hash, popup_has_zoom, has_been_clicked, big_image_link; 16 17 18 var fancybox_options = { 19 overlayShow: true, 20 overlayOpacity: 0.7, 21 overlayColor: '#d9d9d9', 22 imageScale: 'true', 23 zoomOpacity: 'true', 24 // Fancybox 2.0 and above 25 prevEffect: 'fade', 26 nextEffect: 'fade', 27 closeEffect: 'fade', 28 openEffect: 'fade', 29 padding: 40, 30 helpers : { 31 title: { 32 type: 'inside' 33 } 34 }, 35 beforeLoad:function(current, previous) { 36 window.galleries.image_popup.beforeLoad(current, previous); 37 38 // Modify the fancybox caption to the hidden .fancybox-caption element if it exists. 39 // The hidden element allows virtualurls to replace the href as the content is not encoded for use as an attribute. 40 this.title = ($(this.element).parent().find('.fancybox-caption').html() || $(this.element).data('fancybox-title')); 41 42 if (window.location.hash.indexOf('#/image_popup/') == -1) { 43 original_page_hash = window.location.hash; 44 } else { 45 original_page_hash = false; 46 } 47 }, 48 afterLoad: function(current, previous) { 49 popup_has_zoom = $(current.element).hasClass('image_popup_zoom'); 50 if (popup_has_zoom) { 51 big_image_link = current.element.attr('data-popup_zoom_image'); 52 } 53 if (current.element.attr('data-fancybox-hash')) { 54 var image_popup_hash = '#/image_popup/' + current.element.attr('data-fancybox-hash') + '/'; 55 location.replace(image_popup_hash); 56 reset_hash_on_close = true; 57 } 58 $('.fancybox-overlay').addClass('fancybox-overlay-image'); 59 window.galleries.image_popup.afterLoad(current, previous); 60 }, 61 afterShow: function() { 62 window.galleries.image_popup.afterShow(); 63 $('.zoomContainer').remove(); 64 if (popup_has_zoom) { 65 $('.fancybox-wrap').addClass('elevatezoom-enabled'); 66 $('.fancybox-image').addClass('elevatezoom').attr( "data-zoom-image", big_image_link); 67 Artlogic.import('plugins/elevateZoom.js') 68 .then(function(elevateZoom) { 69 $(".elevatezoom").elevateZoom({ 70 zoomType: "inner", 71 cursor: "default", 72 zoomWindowFadeIn: 200, 73 zoomWindowFadeOut: 200, 74 zoomWindowWidth: 0, 75 zoomWindowHeight: 0 76 }); 77 }) 78 79 } 80 // Add accessibility role and aria attributes 81 $('.fancybox-skin').attr({role: "dialog", "aria-label": "image popup", 'aria-modal'
81: true}); 82 // Make the close link element act like a button 83 $('.fancybox-skin a[title="Close"], .fancybox-skin a[title="Previous"], .fancybox-skin a[title="Next"]').attr("role", "button"); 84 h.accessibility.role_button(); 85 86 // add image alt tag 87 var imgAlt = $(this.element).find("img").attr("alt"); 88 var dataAlt = $(this.element).data("alt"); 89 if (imgAlt) { 90 $(".fancybox-image").attr("alt", imgAlt); 91 } else if (dataAlt) { 92 $(".fancybox-image").attr("alt", dataAlt); 93 } 94 95 // focus trap the popup 96 var focus_element 97 if (popup_has_zoom && $('.fancybox-skin button:first').length) { 98 focus_element = '.fancybox-skin button:first' 99 } else { 100 focus_element = '.fancybox-skin a:first' 101 } 102 h.accessibility.on_popup_opening('.fancybox-skin', focus_element, false); 103 }, 104 beforeClose: function() { 105 window.galleries.image_popup.beforeClose(); 106 if ($('.powerzoom_image').length) { 107 if ($('.fancybox-image').powerzoom) { 108 $('.powerzoom_image').hide(); 109 $('.powerzoom_image').powerzoom("destroy"); 110 } 111 } 112 113 if (reset_hash_on_close == true) { 114 if(history.pushState) { 115 var original_page_state = ((original_page_hash.length) ? original_page_hash : ' '); 116 history.pushState(null, null, original_page_state); 117 } else { 118 original_page_state = ((original_page_hash.length) ? original_page_hash : '#/'); 119 location.hash = original_page_state; 120 } 121 } 122 h.accessibility.on_popup_closing(); 123 124 }, 125 afterClose: function() { 126 window.galleries.image_popup.afterClose(); 127 $('.zoomContainer').remove(); 128 } 129 }; 130 131 // Filter out certain descendents 132 var image_popup_elements = $('a.image_popup, a.fancybox').filter(function() { 133 return !$(this).closest('.tile_list_formatted').length; 134 }); 135 136 137 $(image_popup_elements).each(function() { 138 $(this).addClass('fancybox-filtered'); 139 }); 140 141 if($("body").hasClass("page-publications")){ 142 $('#main_content .fancybox-filtered').fancybox(fancybox_options); 143 }else{ 144 $('.fancybox-filtered').fancybox(fancybox_options); 145 } 146 147 $(image_popup_elements).click(function() { 148 // For accessibility - tracks which element to refocus on 149 try { 150 h.accessibility.global_variables.element_to_refocus_to = $(this); 151 } catch(error) { 152 console.error(error); 153 } 154 }); 155 156 // Apply special rules to descendents of tile lists, so the images show in their original order 157 $('.tile_list_formatted a.image_popup').click(function() { 158 var this_href = $(this).attr('data-fancybox-href') && typeof $(this).attr('data-fancybox-href') != 'undefined' ? $(this).attr('data-fancybox-href') : $(this).attr('href'); 159 var related_element = $('.tile_list_original a.image_popup[href="' + this_href + '"], .tile_list_original a.image_popup[data-fancybox-href="' + this_href + '"]'); 160 if (related_element && typeof related_element != 'undefined') { 161 related_element.trigger('click'); 162 return false; 163 } 164 }); 165 166 has_been_clicked = false; 167 168 var fancybox_options_with_zoom = { 169 overlayShow: true, 170 overlayOpacity: 0.7, 171 overlayColor: '#d9d9d9', 172 imageScale: 'true', 173 zoomOpacity: 'true', 174 // Fancybox 2.0 and above 175 prevEffect: 'fade', 176 nextEffect: 'fade', 177 closeEffect: 'fade', 178 openEffect: 'fade', 179 margin: 0, 180 padding: 0, 181 helpers : { 182 title: { 183 type: 'inside' 184 } 185 }, 186 beforeLoad:function(current, previous) { 187 window.galleries.image_popup.beforeLoad(current, previous); 188 189 }, 190 afterLoad: function(current, previous) { 191 popup_has_zoom = $(current.element).hasClass('image_popup_zoom'); 192 if (popup_has_zoom) { 193 big_image_link = current.element.attr('data-popup_zoom_image'); 194 } 195 var popup_has_zoom_buttons = $(current.element).hasClass('image_popup_zoom_buttons'); 196 if (popup_has_zoom_buttons) { 197 $('body').addClass('fancybox-powerzoom'); 198 if ((current.element.attr('href') && current.element.attr('href') != "#")){ 199 var original_image_link = current.element.attr('href') 200 } else { 201 var original_image_link = current.element.attr('data-fancybox-href'); 202 } 203 $('.fancybox-inner').text(''); 204 $('.fancybox-inner').html('<div class="fancybox-image disabled"><span class="powerzoom-lowres" style="background-image:url(' + original_image_link +' );"><span class="powerzoom-lowres-upscale"></span></span></div>'); 205 var big_image_link = current.element.attr('data-popup_zoom_image'); 206 207 $('.fancybox-inner').append('<div class="powerzoom_controls loading powerzoom-initial"><div class="powerzoom_pan"><div class="zoom-button pz_n"><i class="fa fa-chevron-up"></i></div><div class="zoom-button pz_s"><i class="fa fa-chevron-down"></i></div><div class="zoom-button pz_e"><i class="fa fa-chevron-right"></i></div><div class="zoom-button pz_w"><i class="fa fa-chevron-left"></i></div></div><div class="powerzoom_loading_indicator zoom-button powerzoom_zoom"> <span class="loading-dots"><i class="fa fa-circle"></i><i class="fa fa-circle"></i><i class="fa fa-circle"></i></span></div> <button id="zoomOutButton" class="zoomOutButton zoom-button powerzoom_zoom" aria-label="Zoom out"><i class="fa fa-search-minus"></i></button><button id="zoomInButton" class="zoomInButton zoom-button powerzoom_zoom" aria-label="Zoom in"><i class="fa fa-search-plus"></i></button><button id="zoomResetButton" class="zoomResetButton zoom-button powerzoom_zoom" aria-label="Reset zoom"><i class="fa fa-repeat"></i></button></div>'); 208 $('.fancybox-image').append('<img src="" class="powerzoom-highres powerzoom-min powerzoom-transition preloading"/>'); 209 210 $('.powerzoom_controls .zoom-button, .powerzoom-lowres').click(function(event) { 211 if ($('.powerzoom_controls').hasClass('powerzoom-initial')) { 212 $('.powerzoom_controls').addClass('showloader'); 213 var has_been_clicked = true; 214 } 215 }); 216 $('img.powerzoom-highres').attr('src', big_image_link).on('load', function() { 217 $('.powerzoom_controls .zoom-button, .powerzoom-lowres').off('click'); 218 var original_image_width = $('img.powerzoom-highres').width(); 219 var original_image_height = $('img.powerzoom-highres').height(); 220 $(this).addClass('loaded'); 221 if ($(window).width() > 950) { 222 $('.powerzoom-lowres-upscale').css({'background-image': "url(" + big_image_link + ")"}); 223 setTimeout(function(){ 224 $('.powerzoom-lowres').css({'background-image': "none"}); 225 },3000); 226 } 227 Artlogic.import('plugins/powerzoom.js').then(function(m){ 228 window.galleries.image_popup.powerzoom(original_image_width,original_image_height); 229 }); 230 // if (has_been_clicked) { 231 // $('.powerzoom_controls #zoomInButton.zoom-button').trigger('click'); 232 // } 233 }); 234 } 235 window.galleries.image_popup.afterLoad(current, previous); 236 }, 237 afterShow: function() { 238 window.galleries.image_popup.afterShow(); 239 $('.zoomContainer').remove(); 240 if (popup_has_zoom) { 241 $('.fancybox-wrap').addClass('elevatezoom-enabled'); 242 $('.fancybox-image').addClass('elevatezoom').attr( "data-zoom-image", big_image_link); 243 $(".elevatezoom").elevateZoom({ 244 zoomType: "inner", 245 cursor: "default", 246 zoomWindowFadeIn: 200, 247 zoomWindowFadeOut: 200, 248 zoomWindowWidth: 1100, 249 zoomWindowHeight: 800 250 }); 251 } 252 if (popup_has_zoom_buttons) { 253 $('body').addClass('fancybox-powerzoom'); 254 $('.fancybox-image').css('line-height', $('.fancybox-inner').height() + 'px'); 255 //window.galleries.image_popup.powerzoom(); 256 var focus_element = '.fancybox-skin button:first' 257 } else { 258 var focus_element = '.fancybox-skin a:first' 259 } 260 // add ARIA landmark 261 $('.fancybox-overlay').attr({role: "dialog", "aria-label": "image popup", 'aria-modal'
261: true}); 262 // Make the close link element act like a button 263 $('.fancybox-skin a[title="Close"], .fancybox-skin a[title="Previous"], .fancybox-skin a[title="Next"]').attr("role", "button"); 264 h.accessibility.role_button(); 265 // add image alt tag 266 var imgAlt = $(this.element).find("img").attr("alt"); 267 var dataAlt = $(this.element).data("alt"); 268 if (imgAlt && typeof imgAlt !== 'undefined') { 269 $("img.powerzoom-highres").attr("alt", imgAlt); 270 } else if (dataAlt && typeof dataAlt !== 'undefined') { 271 $("img.powerzoom-highres").attr("alt", dataAlt); 272 } 273 // Class added to detect when fancybox is showing - this is to get around an issue where beforeClose gets called before fancybox opens 274 $('body').addClass('fancybox-visible'); 275 // focus trap the popup 276 h.accessibility.on_popup_opening('.fancybox-overlay', focus_element, '.fancybox-overlay .fancybox-close'); 277 }, 278 beforeClose: function() { 279 window.galleries.image_popup.beforeClose(); 280 // Only call on_popup_closing when the popup is actually open. (beforeClose gets called before fancybox opens) 281 if ($('body').hasClass('fancybox-visible')) { 282 h.accessibility.on_popup_closing(); 283 } 284 $('body').removeClass('fancybox-visible'); 285 }, 286 afterClose: function() { 287 window.galleries.image_popup.afterClose(); 288 $('.zoomContainer').remove(); 289 $('body').removeClass('fancybox-powerzoom'); 290 $('.powerzoom_controls').addClass('initial'); 291 $('.powerzoom-lowres').removeClass('hidden'); 292 $('.powerzoom-highres').addClass('preloading'); 293 } 294 }; 295 296 if (custom_fancybox_options && typeof custom_fancybox_options !== 'undefined') { 297 $.extend(fancybox_options, custom_fancybox_options) 298 } 299 300 //Additional fancybox settings, for powerzoom only 301 fancybox_options_with_zoom['width'] = '100%'; 302 fancybox_options_with_zoom['height'] = '100%'; 303 fancybox_options_with_zoom['autoSize'] = false; 304 fancybox_options_with_zoom['type'] = 'html'; 305 fancybox_options_with_zoom['content'] = '<div></div>'; 306 fancybox_options_with_zoom['closeClick'] = false; 307 fancybox_options_with_zoom['arrows'] = false; 308 fancybox_options_with_zoom['helpers'] = {overlay:{closeClick: false},title: null}; 309 310 $("a.image_popup_zoom_buttons").fancybox(fancybox_options_with_zoom); 311 312 if (window.location.hash.indexOf('/image_popup/') == 1) { 313 window.galleries.image_popup.detect_popup_hash(); 314 } 315 316 317 }, 318 319 beforeLoad: function(current, previous) { 320 //call this in main.js 321 }, 322 afterLoad: function(current, previous) { 323 //call this in main.js 324 }, 325 afterShow: function() { 326 //call this in main.js 327 }, 328 beforeClose: function() { 329 //call this in main.js 330 }, 331 afterClose: function() { 332 //call this in main.js 333 }, 334 335 powerzoom: function (original_image_width, original_image_height) { 336 337 $('.powerzoom_controls').addClass('loaded').removeClass('loading'); 338 var has_been_clicked; 339 340 function get_framesize() { 341 var window_width = $('.fancybox-inner').width(); 342 var window_height = $('.fancybox-inner').height();
343 return {w: window_width, h: window_height}; 344 } 345 346 function min_max_zoom() { 347 348 var powerzoom = $('.powerzoom-highres').data('powerzoom'); 349 if (powerzoom.percent > 1.99){ 350 $('.powerzoom_controls').addClass('powerzoom-max'); 351 } else { 352 $('.powerzoom_controls').removeClass('powerzoom-max'); 353 } 354 if (powerzoom.percent == powerzoom.minPercent){ 355 $('.powerzoom_controls').addClass('powerzoom-min'); 356 } else { 357 $('.powerzoom_controls').removeClass('powerzoom-min'); 358 } 359 } 360 361 $( window ).resize(function() { 362 setTimeout(function(){ 363 var new_height = get_framesize().h 364 var new_width = get_framesize().w 365 $('.powerzoom-highres').powerzoom({width: new_width, height:new_height }); 366 $('.fancybox-image').css('line-height', new_height + 'px'); 367 var powerzoom = $('.powerzoom-highres').data('powerzoom'); 368 },600); 369 }); 370 371 //CHECK FRAME SIZE TO RENDER ZOOM AREA 372 var height = get_framesize().h 373 var width = get_framesize().w 374 375 376 //RENDER ZOOM AREA AT CORRECT SIZE 377 $('.powerzoom-highres').powerzoom({ 378 zoom: 5, 379 maxZoom: 2, 380 zoomTouch: 40, 381 maxZoomTouch:2, 382 image_width: original_image_width, 383 image_height: original_image_height, 384 width: width, 385 height: height, 386 controls: '<span style="display:none;"></span>' 387 }); 388 389 $(".powerzoom-highres").mousedown(function() { 390 $(this).removeClass('powerzoom-transition'); 391 return false; 392 }); 393 //SAVE ZOOM OBJECT AS VARIABLE, AND UPDATE ALL PARAMETERS 394 var powerzoom = $('.powerzoom-highres').data('powerzoom'); 395 396 397 //LOAD HI-RES IF CLICK ON LOW-RES VERSION 398 $('.powerzoom-lowres').click(function(event) { 399 if ($('.powerzoom_controls').hasClass('powerzoom-initial')) { 400 has_been_clicked = true; 401 if ($('.powerzoom_controls').hasClass('loaded')){ 402 window.setTimeout(function() { 403 $('.powerzoom_controls').removeClass('powerzoom-initial showloader'); 404 $('.powerzoom-lowres').hide().addClass('hidden'); 405 $('.powerzoom-highres').hide().removeClass('preloading').fadeIn(); 406 }, 400); 407 } else { 408 //show loader 409 $('.powerzoom_controls').addClass('showloader'); 410 } 411 powerzoom.update(); 412 } 413 }); 414 415 $('.powerzoom_controls .zoom-button').click(function(event) { 416 417 $('.powerzoom-highres').addClass('powerzoom-transition'); 418 var powerzoom = $('.powerzoom-highres').data('powerzoom'); 419 var scrollValue = 300 420 var curX = powerzoom.img_left 421 var curY = powerzoom.img_top 422 if ($(this).hasClass('zoomInButton') && $('.powerzoom_controls').hasClass('powerzoom-initial')) { 423 has_been_clicked = true; 424 if ($('.powerzoom_controls').hasClass('loaded')){ 425 window.setTimeout(function() { 426 $('.powerzoom_controls').removeClass('powerzoom-initial showloader'); 427 $('.powerzoom-lowres').hide().addClass('hidden'); 428 $('.powerzoom-highres').hide().removeClass('preloading').fadeIn(); 429 }, 400); 430 } else { 431 //show loader 432 $('.powerzoom_controls').addClass('showloader'); 433 } 434 powerzoom.update(); 435 } else if ($(this).hasClass('pz_w')){ 436 powerzoom.drag({startX: curX, startY: curY, dx: scrollValue, dy: 0}); 437 } else if ($(this).hasClass('pz_e')) { 438 powerzoom.drag({startX: curX, startY: curY, dx: -scrollValue, dy: 0}); 439 } else if ($(this).hasClass('pz_n')) { 440 powerzoom.drag({startX: curX, startY: curY, dx: 0, dy: scrollValue}); 441 } else if ($(this).hasClass('pz_s')) { 442 powerzoom.drag({startX: curX, startY: curY , dx: 0, dy: -scrollValue}); 443 } else if ($(this).hasClass('zoomInButton')) { 444 powerzoom.zoomIn(); 445 } else if ($(this).hasClass('zoomOutButton') && $('.powerzoom_controls').hasClass('powerzoom-min')) { 446 if (!$('.powerzoom_controls').hasClass('powerzoom-initial')){ 447 $('.powerzoom_controls').addClass('powerzoom-initial'); 448 $('.powerzoom-highres').hide().addClass('hidden'); 449 $('.powerzoom-lowres').hide().fadeIn().removeClass('hidden'); 450 } 451 } else if ($(this).hasClass('zoomOutButton')) { 452 powerzoom.zoomOut(); 453 } else if ($(this).hasClass('zoomResetButton') && $('.powerzoom_controls').hasClass('powerzoom-min')) { 454 if (!$('.powerzoom_controls').hasClass('powerzoom-initial')){ 455 $('.powerzoom_controls').addClass('powerzoom-initial'); 456 $('.powerzoom-highres').hide().addClass('hidden'); 457 $('.powerzoom-lowres').hide().fadeIn().removeClass('hidden'); 458 } 459 } else if ($(this).hasClass('zoomResetButton')) { 460 powerzoom.zoom(0); 461 } 462 463 }); 464 465 $('.powerzoom-highres').powerzoom().on('powerzoom', function (e, result) { 466 min_max_zoom(); 467 }); 468
469 powerzoom.update(); 470 471 }, 472 473 detect_popup_hash: function() { 474 //detect image_popup hash on load and 475 //trigger click for relevant image popup 476 var hash_segments = window.location.hash.split('/'); 477 if (hash_segments.length >= 3 && hash_segments[1] == 'image_popup'){ 478 $('a[data-fancybox-hash="' + hash_segments[2] + '"]').trigger('click'); 479 } 480 481 } 482 483} 484 485window.galleries = window.galleries || {}; 486window.galleries.image_popup = image_popup 487export default image_popup
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.