https://fromatour.uk/externals/smoothbox/smoothbox4.js?c=34

1
2(function(){
3  this.Smoothbox = {
4  instance : false,
5  bind : function(selector)
6  {
7    // All children of element
8    var elements;
9    if( $type(selector) == 'element' ){
10      elements = selector.find('a.smoothbox');
11    } else if( $type(selector) == 'string' ){
12      elements = scriptJquery(selector);
13    } else {
14      elements = scriptJquery("a.smoothbox");
15    }
16    elements.each(function(el)
17    {
18      if( scriptJquery(this).prop("tagName") != 'A' || typeof scriptJquery(this).data('smoothboxed') !=="undefined")
19      {
20        return;
21      }
22      var params = {};
23      params.title = scriptJquery(this).attr('title');
24      params.url = scriptJquery(this).attr('href');
25      scriptJquery(this).data('smoothbox', params);
26      scriptJquery(this).data('smoothboxed', true);
27      scriptJquery(this).on('click', function(event)
28      {
29        event.preventDefault(); // Maybe move this to after next line when done debugging
30        Smoothbox.open(scriptJquery(this));
31      });
32    });
33  },
34  close : function()
35  {
36    if( this.instance )
37    {
38      this.instance.close();
39    }
40  },
41  open : function(spec, options)
42  {
43    if(this.instance )
44    {
45      this.instance.close();
46    } 
47    // Check the options array
48    if( $type(options) == 'object' ) {
49      options = new Hash(options);
50    } else if( $type(options) != 'hash' ) {
51      options = new Hash();
52    }
53    // Check the arguments
54    // Spec as element
55    if( $type(spec) == 'object' && Object.getPrototypeOf(spec) === scriptJquery.prototype) {
56      // This is a link
57      if(spec.prop("tagName").toLowerCase() == 'a' ) {
58        spec = new Hash({
59          'mode' : 'Iframe',
60          'link' : spec,
61          'element' : spec,
62          'url' : spec.attr('href'),
63          'title' : spec.attr('title')
64        });
65      }
66      // This is some other element
67      else {
68        spec = new Hash({
69          'mode' : 'Inline',
70          'title' : spec.attr('title'),
71          'element' : spec
72        });
73      }
74    }
75    // Spec as string
76    else if( $type(spec) == 'string' ) {
77      // Spec is url
78      if( spec.length < 4000 && (spec.substring(0, 1) == '/' ||
79          spec.substring(0, 1) == '.' ||
80          spec.substring(0, 4) == 'http' ||
81          !spec.match(/[ <>"'{}|^~\[\]`]/)
82        )
83      ) {
84        spec = new Hash({
85          'mode' : 'Iframe',
86          'url' : spec
87        });
88      }
89      // Spec is a string
90      else {
91        spec = new Hash({
92          'mode' : 'String',
93          'bodyText' : spec
94        });
95      }
96    }
97    // Spec as object or hash
98    else if( $type(spec) == 'object' || $type(spec) == 'hash' ) {
99      // Don't do anything?
100    }
101    // Unknown spec
102    else {
103      spec = new Hash();
104    }
105    // Now lets start the fun stuff
106    spec.extend(options);
107    var mode = spec.get('mode');
108    spec.erase('mode');
109    if( !mode ) {
110      if( spec.has('url') ) {
111        //if( spec.get('url').match(/\.(jpe?g|png|gif|bmp)/gi) ) {
112          //mode = 'Image';
113        //} else {
114          mode = 'Iframe';
115        //}
116      }
117      else if( spec.has('element') ) {
118        mode = 'Inline';
119      }
120      else if( spec.has('bodyText') ) {
121        mode = 'String';
122      }
123      else {
124        return;
125      }
126    }
127    if( !$type(Smoothbox.Modal[mode]) )
128    {
129      //mode = 'Iframe';
130      return;
131    }
132    this.instance = new Smoothbox.Modal[mode](spec.getClean());
133    this.instance.load(spec);
134  }
135};
136
137class Modal {
138  options =  {
139    url : null,
140    width : 480,
141    height : 320,
142
143    // Do or do not
144    transitions : false,
145    overlay : true,
146    loading : true,
147    
148    noOverlayClose : false,
149
150    autoResize : true,
151    autoFormat : 'smoothbox'
152
153    //useFixed : false
154  }
155
156  eventProto = {};
157
158  overlay = false;
159
160  window = false;
161
162  content = false;
163
164  loading = false;
165  constructor(options)
166  {
167    scriptJquery.extend(this.options,options);
168    if($type(this.options.url)){
169      this.options.url = this.getAbsoluteURL(this.options.url);
170    }
171  }
172  getAbsoluteURL(url){
173    let urlObj = new URL(window.location.href);
174    if(url.indexOf(urlObj.host) === -1){
175      return urlObj.origin+url;
176    }  
177    return url;    
178  }
179  close()
180  {
181    this.onClose();
182
183    if(this.window){
184      window.removeEventListener('scroll', this.eventProto.scroll);
185      window.removeEventListener('resize', this.eventProto.resize);
186    }
187    if( this.window ) this.window.remove();
188    if( this.overlay ) this.overlay.remove();
189    if( this.loading ) this.loading.remove();
190    Smoothbox.instance = false;

191  }
192
193  load()
194  {
195    this.create();
196    
197    // Add Events
198    var bind = this;
199    this.eventProto.resize = function() {
200      bind.positionOverlay();
201      bind.positionWindow();
202    }
203
204    this.eventProto.scroll = function()
205    {
206      bind.positionOverlay();
207      bind.positionWindow();
208    };
209
210    window.addEventListener('resize', this.eventProto.resize);
211    window.addEventListener('scroll', this.eventProto.scroll);
212
213    this.position();
214    this.showOverlay();
215    this.showLoading();
216  }
217
218  create()
219  {
220    this.createOverlay();
221    this.createLoading();
222    this.createWindow();
223  }
224
225  createLoading()
226  {
227    if( this.loading || !this.options.loading ) {
228      return;
229    }
230
231    var bind = this;
232    
233    this.loading = scriptJquery.crtEle('div', {
234      id : 'TB_load'
235    });
236    this.loading.appendTo(document.body);
237
238    var loadingImg = scriptJquery.crtEle('img', {
239      src : 'externals/smoothbox/loading.gif' // @todo Move to CSS
240    });
241    loadingImg.appendTo(this.loading);
242  }
243
244  createOverlay()
245  {
246    if( this.overlay || !this.options.overlay ) {
247      return;
248    }
249    var bind = this;
250    this.overlay = scriptJquery.crtEle('div', {
251      'id' : 'TB_overlay',
252      'style':`'position'='absolute';'top'='0px';'left'='0px';'visibility'='visible`,
253      'opacity' : 0
254    });
255    this.overlay.appendTo(document.body);
256
257    if( !this.options.noOverlayClose ) {
258      this.overlay.on('click', function() {
259        bind.close();
260      }.bind(bind));
261    }
262  }
263
264  createWindow()
265  {
266    if( this.window ) {
267      return;
268    }
269
270    var bind = this;
271    
272    this.window = scriptJquery.crtEle('div', {
273      'id' : 'TB_window',
274    }).css('opacity',0);
275    this.window.appendTo(scriptJquery(document.body));
276
277    var title = scriptJquery.crtEle('div', {
278      id : 'TB_title'
279    });
280    title.appendTo(this.window);
281
282    var titleText = scriptJquery.crtEle('div', {
283      id : 'TB_ajaxWindowTitle',
284      html : this.options.title
285    });
286    titleText.appendTo(title);
287
288    var titleClose = scriptJquery.crtEle('div', {
289      id : 'TB_closeAjaxWindow',
290    });
291    titleClose.on("click",function() {
292         bind.close();
293    });
294    titleClose.appendTo(title);
295
296    var titleCloseLink = scriptJquery.crtEle('a',{
297      id : 'TB_title',
298      href : 'javascript:void(0);',
299      title : 'close',
300      html : 'close',
301    })
302    titleCloseLink.on("click",function() {
303         bind.close();
304    });
305    titleCloseLink.appendTo(titleClose);
306  }
307
308  position()
309  {
310    this.positionOverlay();
311    this.positionWindow();
312    this.positionLoading();
313  }
314
315  positionLoading()
316  {
317    if(!this.loading)
318    {
319      return;
320    }
321    this.loading.css({
322        "left": (this.getScroll(window).x + (this.getSize().x - 56) / 2) + 'px',
323        "top": (this.getScroll(window).y + ((this.getSize().y - 20) / 2)) + 'px',
324        "display": "block"
325    });
326  }
327
328  positionOverlay()
329  {
330    if( !this.overlay )
331    {
332      return;
333    }
334    this.overlay.css({
335        "height" : '0px',
336        "width" : '0px'
337    });
338    
339    if( !this.options.noOverlay )
340    {
341      this.overlay.css({
342          "height" : this.getScrollSize().y + 'px',
343          "width" : this.getScrollSize().x + 'px'
344      }); 
345    }
346  }
347
348  positionWindow()
349  {
350    if( !this.window ) {
351      return;
352    }
353    this.window.css({
354      "width" : this.options.width + 'px',
355      "left" : (this.getScroll(window).x + (this.getSize().x - this.options.width) / 2) + 'px',
356      "top" : (this.getScroll(window).y + (this.getSize().y - this.options.height) / 2) + 'px'
357    });
358  }
359
360  show()
361  {
362    this.showOverlay();
363    this.showLoading();
364    this.showWindow();
365  }
366
367  showLoading()
368  {
369    if( !this.loading )
370    {
371      return;
372    }
373
374    if( this.options.transitions )
375    {
376      //this.loading.tween('opacity', [0, 1]);
377    }
378    else
379    {
380      this.loading.css('opacity', 1);
381      this.loading.css('visibility', 'visible');
382    }
383  }
384  
385  showOverlay()
386  {
387    if( !this.overlay ) {
388      return;
389    }
390
391    // if( Browser.Engine.trident /*&& this.overlay.style.visibility == 'hidden'*/ ){
392    //   //this.overlay.style.visibility = 'visible';
393    //   this.overlay.style.display = '';
394    // }
395
396    if( this.options.transitions )
397    {
398      //this.overlay.tween('opacity', [0, 0.6]);
399    }
400    else
401    {
402      this.overlay.css('opacity', 0.6);
403      this.overlay.css('visibility', 'visible');
404    }
405  }
406
407  showWindow()
408  {
409    if( !this.window )
410    {
411      return;
412    }
413
414    // if( Browser.Engine.trident /* && this.window.style.visibility == 'hidden'*/ ){
415    //   //this.window.style.visibility = 'visible';
416    //   this.window.style.display = '';
417    // }
418    // Try to autoresize the window
419    if( typeof(this.doAutoResize) == 'function' )
420    {
421      this.doAutoResize();
422    }
423
424    if(this.options.transitions ) {
425      //this.window.tween('opacity', [0, 1]);
426    } else {
427      this.window.css('opacity', 1);
428      this.window.css('visibility', 'visible');
429    }
430  }
431
432  hide()
433  {
434    this.hideLoading();
435    this.hideOverlay();
436    this.hideWindow();
437  }
438
439  hideLoading()
440  {
441    if( !this.loading ) {
442      return;
443    }
444
445    if( this.options.transitions ) {
446      //this.loading.tween('opacity', [1, 0]);
447    } else {
448      this.loading.css('opacity', 0);
449    }
450  }
451
452  hideOverlay()
453  {
454    if( !this.overlay )
455    {
456      return;
457    }
458    
459    if( this.options.transitions ) {
460      //this.overlay.tween('opacity', [0.6, 0]);
461    } else {
462      this.overlay.css('opacity', 0);
463    }
464  }
465
466  hideWindow()
467  {
468    if( !this.window )
469    {
470      return;
471    }
472    
473    if( this.options.transitions ) {
474     /* var bind = this;
475      this.window.tween('opacity', [1, 0]);
476      this.window.get('tween').addEventListener('complete', function() {
477        bind.fireEvent('closeafter');
478      }); */
479    }
480    else
481    {
482      this.window.css('opacity', 0);
483    }
484  }
485
486  getCoordinates(element){
487    return {
488      x : element["clientWidth"],
489      y : element["clientHeight"]
490    }
491  }
492  getScrollSize(element){
493    return {x: Math.max(
494        document.body.scrollWidth, document.documentElement.scrollWidth,
495        document.body.offsetWidth, document.documentElement.offsetWidth,
496        document.body.clientWidth, document.documentElement.clientWidth
497      ),
498      y: Math.max(
499      document.body.scrollHeight, document.documentElement.scrollHeight,
500      document.body.offsetHeight, document.documentElement.offsetHeight,
501      document.body.clientHeight, document.documentElement.clientHeight
502    )};
503  }
504  getSize(){
505    return {x:document.documentElement.clientWidth,y:document.documentElement.clientHeight};
506  }
507  getScroll(n){
508    let m = scriptJquery(n)
509    return {x:n.pageXOffset|| m.scrollLeft(),y:n.pageYOffset||m.scrollTop()};
510  }
511  doAutoResize(element)
512  {
513    if( !element || !this.options.autoResize )
514    {
515      return;
516    }
517
518    var size = ({x:element.width(),y:element.height()}

518 || this.getScrollSize(element)); 
519    var winSize = this.getCoordinates(document.documentElement);
520    if( size.x + 70 > winSize.x ) size.x = winSize.x - 70;
521    if( size.y + 70 > winSize.y ) size.y = winSize.y - 70;
522
523    this.content.css({
524      'width' : (size.x + 20) + 'px',
525      'height' : (size.y + 20) + 'px'
526    });
527
528    this.options.width = this.content.width();
529    this.options.height = this.content.height();
530    this.positionWindow();
531  }
532  // events
533  onLoad()
534  {
535    //this.fireEvent('load', this);
536  }
537
538  onOpen()
539  {
540    //this.fireEvent('open', this);
541  }
542
543  onClose()
544  {
545    //this.fireEvent('close', this);
546  }
547
548  onCloseAfter()
549  {
550    //this.fireEvent('closeafter', this);
551  }
552}
553Smoothbox.Modal = Modal;
554
555class Iframe extends Modal{
556  constructor(options){
557    super(options);
558  }
559  load()
560  {
561    super.load();
562    if( this.content ) {
563      return;
564    }
565    var bind = this;
566    var loadIsOkay = true;
567    var uriSrc = new URL(this.options.url);
568    if( this.options.autoFormat ) {
569      uriSrc.searchParams.set('format',this.options.autoFormat);
570    }
571    this.content = scriptJquery.crtEle('iframe',{
572      src : uriSrc.toString(),
573      id : 'TB_iframeContent',
574      name : 'TB_iframeContent',
575      frameborder : '0',
576      width : this.options.width,
577      height : this.options.height,
578    });
579    this.content.load(function() {
580      if( loadIsOkay ) {
581        loadIsOkay = false;
582        this.hideLoading();
583        this.showWindow();
584        this.onLoad();
585      } else {
586        this.doAutoResize();
587      }
588    }.bind(bind));
589    this.content.appendTo(this.window);
590  }
591  doAutoResize()
592  {
593    if(!this.options.autoResize ) {
594      return;
595    }
596    // Check if from same host
597    var iframe = this.content;
598    var host = (new URL(iframe.attr("src"))).host;
599  
600    if( !host || host != window.location.host ) {
601      return;
602    }
603    // Try to get element
604    if( this.options.autoResize == true ) {
605      var element = iframe.contents().find('body').children().eq(0) || iframe.contents().find('body')
606       || iframe.contents()[0].documentElement;
607      return super.doAutoResize( element );
608    }
609    else if( $type(this.options.autoResize) == 'element' )
610    {
611      return super.doAutoResize(this.options.autoResize);
612    }
613  }
614}
615Smoothbox.Modal.Iframe = Iframe;
616class Inline extends Modal{
617  Extends = Smoothbox.Modal
618  element = false;
619  cloneElement = false;
620  load(spec)
621  {
622    if( this.content )
623    {
624      return;
625    }
626    super.load();
627    this.content = scriptJquery.crtEle('div', {
628      id : 'TB_ajaxContent',
629      width : this.options.width,
630      height : this.options.height
631    });
632    this.content.appendTo(this.window);
633    this.cloneElement = scriptJquery(spec.element);
634    scriptJquery(this.cloneElement).appendTo(this.content);
635    // scriptJquery(this.content).append(spec);
636        
637    this.hideLoading();
638   this.showWindow();
639    this.onLoad();
640  }
641  setOptions(options)
642  {
643    this.element = scriptJquery(options.element);
644    this.parent(options);
645  }
646  doAutoResize()
647  {
648    super.doAutoResize(this.cloneElement);
649  } 
650}
651Smoothbox.Modal.Inline = Inline;
652class Modal_String extends Modal{
653  constructor(options){
654    super(options);
655    this.load();
656  }
657  load()
658  {
659    if( this.content )
660    {
661      return;
662    }
663    super.load();
664    this.content = scriptJquery.crtEle('div', {
665      id : 'TB_ajaxContent',
666      width : this.options.width,
667      height : this.options.height,
668    }).html('<div>' + this.options.bodyText + '</div>');
669    this.content.appendTo(this.window);
670    
671    this.hideLoading();
672    this.showWindow();
673    this.onLoad();
674  }
675  doAutoResize()
676  {
677    if( !this.options.autoResize )
678    {
679      return;
680    }
681    var bind = this;
682    var element = bind.content.children().eq(0);
683    return super.doAutoResize( element );
684  } 
685}
686Smoothbox.Modal.String = Modal_String;
687})();
688window.addEventListener('DOMContentLoaded', function()
689{
690  Smoothbox.bind();
691})
692
693window.addEventListener('load', function()
694{
695  Smoothbox.bind();
696})