https://template-prestashop-video.netlify.app/js/front-end.js

1$(function() {
2  // allow HTML5 tags used by Silex to be styled with CSS (polyfill)
3  document.createElement('HEADER');
4  document.createElement('VIDEO');
5
6  // store jquery references
7  var $win = $(window);
8  var $doc = $(document);
9  var $body = $('body');
10
11  // expose data to components
12  window.silex = window.silex || {};
13  // set directcly by the script tag:
14  // window.silex.data
15
16  // init the data updated later
17  window.silex.scale = 1;
18  window.silex.scroll = {top: 0, left: 0};
19
20  // front end API
21  window.silex.getCurrentPage = function() {
22    var pageable = $body.pageable;
23    var currentPageName = pageable ? pageable().data()['silexlabs-pageable'].options.currentPage : $body.attr('data-current-page');
24    var currentPage = window.silex.data.pages.filter(function(el) { return el.id === currentPageName })[0];
25    return currentPage;
26  };
27
28  // retro compatibility with old components
29  // TODO: check if we can remove this?
30  window.silex.resizeBody = function() {};
31
32  // ************************************
33  // the page system (with hash in the URL)
34  // ************************************
35  // the page system is only for preview and inside the editor
36  if(!$body.hasClass('silex-published')) {
37    // get the first page name from silex data
38    var firstPageName = window.silex.data.pages[0].link.href;
39    /**
40     * callback for change events
41     * called when a page is opened
42     */
43    $body.on('pageChanged', function (event, pageName) {
44      // mark links to the current page as active
45      $('[data-silex-href*="#!'+pageName+'"]').addClass('page-link-active');
46      // $('[id*="'+pageName+'"]').addClass('page-link-active');
47
48      // prevent iframe content from staying in the dom
49      // this prevent a youtube video to continue playing while on another page
50      // this is useful in chrome and not firefox since display:none does not reset iframe dom in chrome
51      $('[data-silex-iframe-src]').each(function() {
52        this.setAttribute('src', this.getAttribute('data-silex-iframe-src'));
53      });
54      $('.paged-element-hidden iframe').each(function() {
55        var src = this.getAttribute('src');
56        if(src) {
57          this.setAttribute('data-silex-iframe-src', src);
58          this.setAttribute('src', '');
59        }
60      });
61    });
62    /**
63     * init page system
64     * Use deep links (hash) only when `body.silex-runtime` is defined, i.e. not while editing
65     */
66    $body.pageable({
67      currentPage: firstPageName,
68      useDeeplink: $body.hasClass('silex-runtime'),
69      pageClass: 'paged-element'
70    });
71    /**
72     * Silex links
73     * Only when `body.silex-runtime` is defined, i.e. not while editing
74     * Links are not clickable while editing
75     */
76    $('.silex-runtime [data-silex-href]').click(function () {
77      var href = this.getAttribute('data-silex-href');
78      if (href.indexOf('#') === 0){
79        window.location.href = href;
80      }
81      else {
82        window.open(href, '_blank');
83      }
84    });
85  }
86
87  // ************************************
88  // Resize system (scale down when screen is smaller than content)
89  // ************************************
90  if(!$body.hasClass('silex-editor')) {
91    onScroll();
92    onResize();
93    $win.resize(onResize);
94    $win.scroll(onScroll);
95  }
96
97  // cross browser get scroll (even IE)
98  function getScroll() {
99    var container = $(document.scrollingElement || 'html');
100    return {
101      left: container.scrollLeft(),
102      top: container.scrollTop()
103    }
104  }
105
106  function onResize() {
107    // if the site has a defined width and the window is smaller than this width, then
108    // scale the website to fit the window
109    // This happens also on mobile
110
111    // scale on mobile or on desktop only when needed
112    var ratio = getScaleRatio();
113    var scroll = getScroll();
114
115    // notify the components that the resize will occure
116    $doc.trigger('silex.preresize');
117
118    // expose computed data to components
119    window.silex.scrollTop = scroll.top/ratio;
120    window.silex.scrollLeft = scroll.left/ratio;
121    window.silex.scale = ratio;
122
123    if(ratio === 1) {
124      // reset scale
125      $body.css({
126        'transform': '',
127        'transform-origin': '',
128        'min-width': '',
129        'height': ''
130      });
131      // unscale some elements
132      $('.prevent-scale').css({
133        'transform': '',
134        'transform-origin': ''
135      })
136    }
137    else {
138      // scale the body
139      $body.css({
140        'transform': 'scale(' + ratio + ')',
141        'transform-origin': '0 0',
142        'min-width': getScaleBreakPoint() + 'px',
143        'height': Math.round(window.innerHeight * ratio), // min-height does not work here since content is bigger before transform
144      });
145      // unscale some elements
146      $('.prevent-scale').css({
147        'transform': 'scale(' + (1/ratio) + ')',
148        'transform-origin': '0 0'
149      })
150    }
151    $doc.trigger('silex.resize');
152  }
153
154  function onScroll() {
155    // simulate the fixed position
156    var ratio = getScaleRatio();
157    var scroll = getScroll();
158    $doc.trigger('silex.prescroll', {
159      scrollTop: scroll.top/ratio,
160      scrollLeft: scroll.left/ratio,
161      scale: ratio
162    });
163
164    var offsetTop = scroll.top / ratio;
165    var offsetLeft = scroll.left / ratio;
166
167    // expose computed data to components
168    window.silex.scrollTop = offsetTop;
169    window.silex.scrollLeft = offsetLeft;
170    window.silex.scale = ratio;
171
172    // update the body scale
173    $('.fixed').css({
174      'transform': 'translate(' + offsetLeft + 'px, ' + offsetTop + 'px)',
175      'transform-origin': '0 0'
176    });
177    $('.fixed.prevent-scale').css({
178      'transform': 'translate(' + offsetLeft + 'px, ' + offsetTop + 'px) scale(' + (1/ratio) + ')',
179      'transform-origin': '0 0'
180    });
181    $doc.trigger('silex.scroll');
182  }
183
184  // utility functions
185  function isBellowBreakPoint() {
186    return window.matchMedia('only screen and (max-width: 480px)').matches;
187  }
188  function getScaleRatio() {
189    var winWidth = $win.width();
190    if((window.silex.data.site.width && winWidth < window.silex.data.site.width) || isBellowBreakPoint()) {
191      // scale the site
192      var breakPoint = getScaleBreakPoint();
193      return winWidth / breakPoint;
194    }
195    return 1;
196  }
197  function getScaleBreakPoint() {
198    return isBellowBreakPoint() ? 480 : window.silex.data.site.width;
199  }
200});
201