'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 HeaderUI from './_components/_ui.header-footer'; import SmoothScroll from 'smooth-scroll'; const smoothScroll = SmoothScroll(); const MainUI = (($) => { // Constants const W = window; const D = document; const $Body = $('body'); const NAME = 'MainUI'; console.clear(); console.info( '%cUI Kit: https://github.com/a2nt/webpack-bootstrap-ui-kit by Tony Air (tony@twma.pro)', 'color:yellow;font-size:16px', ); console.groupCollapsed('Events'); Object.keys(Events).forEach((k) => { console.info(`${k}: ${Events[k]}`); }); console.groupEnd('Events'); console.groupCollapsed('Consts'); Object.keys(Consts).forEach((k) => { console.info(`${k}: ${Consts[k]}`); }); console.groupEnd('Events'); console.groupCollapsed('Init'); console.time('init'); $(W).on(`${Events.LODEDANDREADY}`, () => { console.groupEnd('Init'); console.timeEnd('init'); }); // 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(Events.TABHIDDEN); } else { console.log('Tab: focused'); $Body.removeClass('is-hidden'); $Body.trigger(Events.TABFOCUSED); } }); // update online/offline state const updateOnlineStatus = () => { if (typeof navigator.onLine === 'undefined') { return; } if (!navigator.onLine) { console.log('Tab: offline'); $Body.addClass('is-offline'); $Body.trigger(Events.OFFLINE); } else { console.log('Tab: online'); $Body.removeClass('is-offline'); $Body.trigger(Events.ONLINE); } }; W.addEventListener( 'offline', () => { updateOnlineStatus(); }, false, ); W.addEventListener( 'online', () => { updateOnlineStatus(); }, false, ); W.addEventListener('load', () => { updateOnlineStatus(); }); $(W).on(`${Events.AJAX}`, () => { 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 const pingInterval = 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') { clearInterval(pingInterval); $Body.addClass('is-offline'); //W.location.reload(false); } else { $Body.removeClass('is-offline'); } }, }); }, 300000); // 5 min in ms W.URLDetails = { base: $('base').attr('href'), relative: '/', hash: '', }; let eventFired = false; const setTouchScreen = (bool) => { if (W.IsTouchScreen === bool || eventFired) { return; } eventFired = true; W.IsTouchScreen = bool; $.support.touch = W.IsTouchScreen; if (bool) { console.log(`${NAME}: Touch screen enabled`); } else { console.log(`${NAME}: Touch screen disabled`); } // prevent firing touch and mouse events together setTimeout(() => { eventFired = false; }, 200); }; setTouchScreen('ontouchstart' in window || navigator.msMaxTouchPoints > 0); // disable touch on mouse events /*D.addEventListener('mousemove', () => { setTouchScreen(false); }); D.addEventListener('mousedown', () => { setTouchScreen(false); });*/ // enable touch screen on touch events D.addEventListener('touchmove', () => { setTouchScreen(true); }); D.addEventListener('touchstart', () => { setTouchScreen(true); }); 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); }); // emulate links $('.a[data-href]').on('click', (e) => { const $el = $(e.currentTarget); const href = $el.data('href'); if (!href.length) { console.warn('Missing data-href'); console.warn($el); } W.location.assign(href); }); // 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 = $('
'); let envs = [...Consts.ENVS]; $Body.append($el); let curEnv = envs.shift(); envs = envs.reverse(); for (let i = 0; i < envs.length; ++i) { const env = envs[i]; $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( `