"use strict"; import $ from 'jquery'; import Events from './_events'; import Consts from './_consts'; import Spinner from './_components/_ui.spinner'; // AJAX functionality import AjaxUI from './_components/_ui.ajax'; import FormBasics from './_components/_ui.form.basics'; import SmoothScroll from 'smooth-scroll'; const smoothScroll = SmoothScroll(); const MainUI = (($) => { // Constants const W = window; const D = document; const $Body = $('body'); const NAME = 'MainUI'; // get browser locale //const Locale = $('html').attr('lang').substring(0, 2); const $AlertNotify = $('#AlertNotify'); const $SiteWideMessage = $('#SiteWideMessage'); // get browser window visibility preferences // Opera 12.10, Firefox >=18, Chrome >=31, IE11 const HiddenName = 'hidden'; const VisibilityChangeEvent = 'visibilitychange'; // update visibility state D.addEventListener(VisibilityChangeEvent, () => { if (D.visibilityState === HiddenName) { console.log('Tab: hidden'); $Body.addClass('is-hidden'); $Body.trigger('tabHidden'); } else { console.log('Tab: focused'); $Body.removeClass('is-hidden'); $Body.trigger('tabFocused'); } }); // update online/offline state const updateOnlineStatus = () => { if (!navigator.onLine) { console.log('Tab: offline'); $Body.addClass('is-offline'); $Body.trigger('offline'); } else { console.log('Tab: online'); $Body.removeClass('is-offline'); $Body.trigger('online'); } }; if (typeof navigator.onLine !== 'undefined') { W.addEventListener('offline', () => { updateOnlineStatus(); }, false); W.addEventListener('online', () => { updateOnlineStatus(); }, false); W.addEventListener('load', () => { updateOnlineStatus(); }); } // scrollTo const ScrollTo = (trigger, selector) => { smoothScroll.animateScroll( D.querySelector(selector), trigger, { speed: 500, offset: -20, //easing: 'easeInOutCubic', // Callback API //before: (anchor, toggle) => {}, // Callback to run before scroll //`after: (anchor, toggle) => {} // Callback to run after scroll } ); }; // session ping setInterval(() => { if ($Body.hasClass('is-offline')) { return; } $.ajax({ sync: false, async: true, cache: false, url: '/Security/ping', global: false, type: 'POST', complete(data, datastatus) { if (datastatus !== 'success') { W.location.reload(false); } }, }); }, 300000); // 5 min in ms W.URLDetails = { 'base': $('base').attr('href'), 'relative': '/', 'hash': '', }; class MainUI { // Static methods static init() { this.dispose(); console.log(`Initializing: ${NAME}`); // update location details this.updateLocation(); // mark available offline areas if ('caches' in W) { $('a.offline').addClass('offline-available'); } this.loadImages(); // detect bootstrap screen size this.detectBootstrapScreenSize(); // mark external links $('a.external,a[rel="external"]').attr('target', '_blank'); // show encoded emails /*$(D).find('.obm').each(() => { if ($(this).attr('data-val') !== undefined) { const email = $(this).attr('data-val').split('') .reverse() .join('') .slice(0, -8) .replace(/[a-zA-Z]/g, (c) => String.fromCharCode((c <= 'Z' ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26)) .replace('#AT#', '@'); const attr = $(this).attr('data-val-append'); if (attr !== undefined && attr !== false) { $(this).append(email); } if ($(this).find('.sr-only').length > 0) { $(this).find('.sr-only').append(email); } if ($(this).attr('href') !== undefined) { $(this).attr('href', `mailto:${email}`); } } });*/ // // scroll links $('.js-scrollTo').on('click', (e) => { e.preventDefault(); const el = e.currentTarget; const $el = $(e.currentTarget); ScrollTo(el, $el.attr('data-target')); }); // load external fonts if ($('[data-extfont]').length) { $.getScript('//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', () => { const fonts = []; $('[data-extfont]').each((i, el) => { fonts[i] = $(el).attr('data-extfont'); }); W.WebFont.load({ google: { families: fonts, }, }); }); } // data-set links $('[data-set-target]').on('click', (e) => { const $el = $(e.currentTarget); const $target = $($el.data('set-target')); if (!$target.length) { return; } $target.each((i, targetEl) => { const $targetEl = $(targetEl); const tag = $targetEl.prop('tagName').toLowerCase(); if (tag === 'input' || tag === 'select') { $targetEl.val($el.data('set-val')); } else if (!$targetEl.hasClass('field')) { $targetEl.text($el.data('set-val')); } }); $el.trigger(Events.SET_TARGET_UPDATE); $target.closest('form').trigger(Events.SET_TARGET_UPDATE); }); // hide spinner Spinner.hide(() => { $Body.addClass('loaded'); }); // fire page printing if (W.URLDetails['hash'].indexOf('printpage') > -1) { W.print(); } $Body.data(NAME, this); } static detectBootstrapScreenSize() { const $el = $('
'); const envs = [...Consts.ENVS]; $Body.append($el); let curEnv = envs.shift(); for (const env of envs.reverse()) { $el.addClass(`d-${env}-none`); if ($el.is(':hidden')) { curEnv = env; break; } } $el.remove(); $Body.removeClass(envs); $Body.addClass(curEnv); return curEnv; } static updateLocation(url) { let location = url || W.location.href; location = location.replace(W.URLDetails['base'], '/'); const hash = location.indexOf('#'); W.URLDetails.relative = location.split('#')[0]; W.URLDetails.hash = (hash >= 0) ? location.substr(location.indexOf('#')) : ''; } // show site-wide alert static alert(msg, cls) { $SiteWideMessage.fadeOut('fast'); $SiteWideMessage.html(`