1// overlay 2// v1.0 3 4(function ($) { 5 // custom select class 6 function overlay(item, options) { 7 this.item = $(item); 8 9 // options 10 const defaults = { 11 open: false, 12 current: null, 13 position: 'top', 14 opacity: 0.6, 15 debug: true, 16 elements: {} 17 }; 18 19 this.options = $.extend(true, defaults, options); 20 this.init(); 21 } 22 23 overlay.prototype = { 24 // init 25 init: function () { 26 const plugin_instance = this; 27 const plugin_item = plugin_instance.item; 28 const plugin_settings = plugin_instance.options; 29 const plugin_elements = plugin_settings.elements; 30 31 if (plugin_settings.debug === true) { 32 // console.log('overlay'); 33 } 34 35 // 36 // ELEMENTS 37 // 38 plugin_item.addClass('overlay-initialized'); 39 40 plugin_elements.overlay = plugin_item.find('.overlay-content-wrap'); 41 42 //plugin_elements.position = $('<div id="overlay" class="overlay-position"></div>').appendTo('body'); 43 plugin_elements.wrap = $('<div class="overlay-wrap container-fluid"></div>').appendTo('body');
44 //plugin_elements.container = $('<div class="overlay row" data-position="' + plugin_settings.position + '"></div>'); 45 46 // 47 // ACTIONS 48 // 49 $('body').on('click', '.overlay-toggle', function (e) { 50 e.preventDefault(); 51 52 let show_overlay = true; 53 54 const link_href = $(this).attr('href'); 55 const overlay_content = $(this).attr('data-overlay-content'); 56 57 // if the clicked link is already open 58 59 if ( 60 plugin_settings.open === true && 61 plugin_settings.current.href === link_href && 62 plugin_settings.current.content === overlay_content 63 ) { 64 show_overlay = false 65 } 66 67 if (show_overlay === true) { 68 const show_options = { 69 href: link_href, 70 content: overlay_content, 71 position: 'top', 72 title: $(this).attr('data-overlay-title'), 73 caption: $(this).attr('data-overlay-caption') 74 }; 75 76 if (typeof $(this).attr('data-overlay-position') !== 'undefined') { 77 show_options.position = $(this).attr('data-overlay-position'); 78 } 79 80 if (typeof $(this).attr('data-overlay-opacity') !== 'undefined') { 81 plugin_settings.opacity = $(this).attr('data-overlay-opacity'); 82 } else { 83 plugin_settings.opacity = 0.6; 84 } 85 86 if (plugin_settings.debug === true) { 87 console.log('overlay', link_href, overlay_content); 88 } 89 90 if (typeof $(this).attr('data-overlay-ajax-target') !== 'undefined' && $(this).attr('data-overlay-ajax-target') !== '') { 91 92 show_options.ajax_target = $(this).attr('data-overlay-ajax-target') 93 94 } 95 96 plugin_instance.show(show_options) 97 } 98 }); 99 100 // close 101 $('body').on('click', '.overlay-close', function () { 102 plugin_instance.hide(); 103 }); 104 105 // 'esc' key 106 $('body').keypress(function (e) { 107 if ($('body').hasClass('overlay-open') && e.which === 27) { 108 plugin_instance.hide(); 109 } 110 }); 111 112 if (plugin_settings.debug === true) { 113 console.log('overlay', 'initialized'); 114 } 115 116 }, 117 118 hide: function (fn_options) { 119 const plugin_instance = this; 120 const plugin_item = this.item; 121 const plugin_settings = plugin_instance.options; 122 const plugin_elements = plugin_settings.elements; 123 124 // options 125 126 const defaults = { 127 href: null, 128 slug: null, 129 timeout: 0, 130 complete: null 131 }; 132 133 const settings = $.extend(true, defaults, fn_options); 134 135 if (plugin_settings.debug === true) { 136 console.log('hide overlay'); 137 } 138 139 plugin_item.find('.overlay').removeClass('current'); 140 141 $('body').removeClass('overlay-open').removeClass('overlay-position-right').removeClass('overlay-position-top'); 142 143 $('body').attr('data-overlay-content', ''); 144 145 setTimeout(function () { 146 plugin_item.find('.overlay').remove(); 147 plugin_elements.wrap.find('.overlay-close').remove(); 148 }, 400); 149 150 plugin_settings.open = false; 151 plugin_settings.current = null; 152 153 // $('#supermenu').supermenu('enable'); 154 155 $(document).trigger('overlay_hide') 156 }, 157 158 show: function (fn_options) { 159 const plugin_instance = this; 160 const plugin_item = this.item; 161 const plugin_settings = plugin_instance.options; 162 const plugin_elements = plugin_settings.elements; 163 164 // options 165 166 const settings = $.extend(true, { 167 href: null, 168 data: null, 169 content: null, 170 position: plugin_settings.position, 171 ajax_target: null, 172 callback: null 173 }, fn_options); 174 175 // adjust content 176 177 if (settings.href.charAt(0) === '#') { 178 settings.content = 'inline' 179 } 180 181 // ajax stuff 182 183 let ajax_data = { 184 content: settings.content 185 }; 186 187 ajax_data = $.extend(ajax_data, settings.data); 188 189 // containers 190 191 let new_container, new_content; 192 193 // if the overlay is already open, 194 // hide it and delay showing the new overlay 195 196 let show_timeout = 0; 197 198 if (plugin_settings.open === true) { 199 plugin_instance.hide(); 200 show_timeout = 400; 201 } 202 203 plugin_elements.wrap.css('background-color', 'rgba(0,0,0,' + plugin_settings.opacity + ')'); 204 205 setTimeout(function () { 206 207 // open the overlay 208 209 console.log('show'); 210
211 new_container = $('<div class="overlay" data-content="' + settings.content + '" data-position="' + settings.position + '">').appendTo(plugin_elements.wrap); 212 213 $('<div class="overlay-close"><i class="fas fa-times"></i></div>').insertBefore(new_container); 214 215 // 216 // CONTENT TYPES 217 // 218 219 if (settings.content === 'image') { 220 221 // add the image to the container 222 223 new_content = $('<div class="overlay-image"><img src="' + settings.href + '"></div>').appendTo(new_container); 224 225 if (settings.title || settings.caption) { 226 227 let caption_markup = '<div class="overlay-caption">'; 228 229 if (settings.title) { 230 caption_markup += '<h5 class="overlay-caption-title">' + settings.title + '</h5>' 231 } 232 233 if (settings.caption) { 234 caption_markup += '<p class="overlay-caption-text">' + settings.caption + '</p>' 235 } 236 237 caption_markup += '</div>' 238 239 $(caption_markup).insertAfter(new_content) 240 241 } 242 243 // add body classes 244 setTimeout(function () { 245 $('body').addClass('overlay-open').removeClass('spinner-on'); 246 $('body').addClass('overlay-position-' + settings.position); 247 $('body').attr('data-overlay-content', settings.content); 248 }, 1); 249 250 } else if (settings.content === 'inline') { 251 252 // inline content 253 254 if (plugin_settings.debug === true) { 255 console.log('inline'); 256 } 257 258 // find the div 259 260 if ($(settings.href).length) { 261 262 new_content = $('<div class="overlay-content">').appendTo(new_container) 263 $(settings.href).appendTo(new_content) 264 265 } 266 267 // add body classes 268 setTimeout(function () { 269 $('body').addClass('overlay-open').removeClass('spinner-on'); 270 $('body').addClass('overlay-position-' + settings.position); 271 $('body').attr('data-overlay-content', settings.content); 272 }, 1); 273 274 } else { 275 276 // ajax 277 $('body').addClass('spinner-on'); 278 279 let ajax_html = ''; 280 281 $.ajax({ 282 url: settings.href, 283 data: ajax_data, 284 success: function (data, textStatus, jqXHR) { 285 286 ajax_html = data 287 288 if ( 289 settings.ajax_target != null && 290 $(ajax_html).find(settings.ajax_target).length 291 ) { 292 ajax_html = $(ajax_html).find(settings.ajax_target) 293 } 294 295 ajax_html.appendTo(new_container) 296 297 // if (settings.position === 'right') { 298 // $('<div class="overlay-close bg-primary text-white"><i class="fas fa-times"></i></div>').insertBefore(new_container); 299 // } 300 301 }, 302 complete: function () { 303 304 let callback_data = ''; 305 306 if (plugin_settings.debug === true) { 307 console.log($(ajax_html).find('#callback-data')); 308 } 309 310 if ($(ajax_html).find('#callback-data').length) { 311 callback_data = JSON.parse($(ajax_html).find('#callback-data').html()); 312 } 313 314 if (typeof (settings.callback) === 'function') { 315 settings.callback(callback_data); 316 } 317 318 // $('#supermenu').supermenu('disable'); 319 320 // add body classes 321 322 setTimeout(function () { 323 $('body').addClass('overlay-open').removeClass('spinner-on'); 324 $('body').addClass('overlay-position-' + settings.position); 325 $('body').attr('data-overlay-content', settings.content); 326 327 $(document).trigger('overlay_show') 328 329 }, 1); 330 331 } 332 }); 333 334 } 335 336 plugin_settings.open = true; 337 338 plugin_settings.current = { 339 href: settings.href, 340 content: settings.content 341 }; 342 343 }, show_timeout); 344 345 }, 346 347 _set_position: function (new_position) { 348 349 const plugin_instance = this; 350 const plugin_item = this.item; 351 const plugin_settings = plugin_instance.options; 352 const plugin_elements = plugin_settings.elements; 353 354 if (plugin_settings.debug === true) { 355 console.log('set position to ' + new_position); 356 } 357 358 plugin_settings.position = new_position; 359 //plugin_elements.position.attr('data-position', new_position); 360 361 } 362 363 } 364 365 // jQuery plugin interface
366 $.fn.overlay = function (opt) { 367 const args = Array.prototype.slice.call(arguments, 1); 368 369 return this.each(function () { 370 const item = $(this); 371 const instance = item.data('overlay'); 372 373 if (!instance) { 374 // create plugin instance if not created 375 item.data('overlay', new overlay(this, opt)); 376 } else { 377 // otherwise check arguments for method call 378 if (typeof opt === 'string') { 379 instance[opt].apply(instance, args); 380 } 381 } 382 }); 383 } 384}(jQuery));
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.