bobjoll 0.0.4

package/ts/library/storage.ts

@@ -0,0 +1,131 @@
+function getStorage(storageType: string): Storage | null {
+    try {
+        var storage = (window as any)[storageType + 'Storage'],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return storage;
+    }
+    catch(e) {
+        return null;
+    }
+}
+
+export class ClientStorage
+{
+    private backend: Storage | null;
+    private dummy: { [key: string]: string } = {};
+
+    constructor(storageType: 'local' | 'session') {
+        this.backend = getStorage(storageType);
+        if (!this.backend) {
+            this.dummy = {};
+        }
+    }
+
+    supported(): boolean {
+        return !!this.backend;
+    }
+
+    removeItem(namespace: string, key: string) {
+        const k = namespace !== '' ? `${namespace}/${key}` : key;
+        if (this.backend) {
+            this.backend.removeItem(k);
+        }
+        else {
+            this.dummy[k];
+        }
+    }
+
+    getAll(namespace: string): {key: string; value: any}[] {
+        let namespaceStored: {key: string; value: any}[] = [];
+
+        if (this.backend) {
+            for (let i = 0; i < this.backend.length; i++) {
+                let key = this.backend.key(i);
+
+                if (key && key.match(/namespace/i)) {
+                    let value = this.get(namespace, key);
+
+                    if (value) {
+                        namespaceStored.push({key: key, value: value});
+                    }
+                }
+            }
+        }
+
+        return namespaceStored;
+    }
+
+    getAllKeys(namespace: string): string[] {
+        let namespaceKeys: string[] = [];
+
+        if (this.backend) {
+            for (let i = 0; i < this.backend.length; i++) {
+                let key = this.backend.key(i);
+
+                if (key && key.match(new RegExp(namespace, 'i'))) {
+                    namespaceKeys.push(key);
+                }
+            }
+        }
+
+        return namespaceKeys;
+    }
+
+    getItem(namespace: string, key: string): string | null {
+        const k = namespace !== '' ? `${namespace}/${key}` : key;
+        return this.backend ? this.backend.getItem(k) : this.dummy[k];
+    }
+
+    setItem(namespace: string, key: string, value: string) {
+        const k = namespace !== '' ? `${namespace}/${key}` : key;
+        if (this.backend) {
+            this.backend.setItem(k, value);
+        }
+        else {
+            this.dummy[k] = value;
+        }
+    }
+
+    remove(namespace: string, key: string): any | null {
+        this.removeItem(namespace, key);
+    }
+
+    get(namespace: string, key: string): any | null {
+        return JSON.parse(this.getItem(namespace, key) || 'null');
+    }
+
+    set(namespace: string, key: string, value: any) {
+        this.setItem(namespace, key, JSON.stringify(value));
+    }
+
+    all(namespace: string) {
+        return this.getAll(namespace);
+    }
+
+    keys(namespace: string) {
+        return this.getAllKeys(namespace);
+    }
+
+    expired(namespace: string, key: string, expire?: Date) {
+        const item = this.getItem(namespace, key);
+        const now = new Date();
+
+        if (!item || now.getTime() > parseInt(item)) {
+            if (!expire) {
+                expire = new Date();
+                expire.setDate(expire.getDate() + 1);
+                expire.setHours(0,0,0,0);
+            }
+
+            this.setItem(namespace, key, JSON.stringify(expire.getTime()));
+            return true;
+        } else {
+            return false;
+        }
+    }
+}
+
+export let localStorage = new ClientStorage('local');
+export let sessionStorage = new ClientStorage('session');

package/ts/library/svg4everybody.legacy.js

@@ -0,0 +1,122 @@
+!function(root, factory) {
+    "function" == typeof define && define.amd ? // AMD. Register as an anonymous module unless amdModuleId is set
+    define([], function() {
+        return root.svg4everybody = factory();
+    }) : "object" == typeof module && module.exports ? // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    module.exports = factory() : root.svg4everybody = factory();
+}(this, function() {
+    /*! svg4everybody v2.1.4 | github.com/jonathantneal/svg4everybody */
+    function embed(parent, svg, target) {
+        // if the target exists
+        if (target) {
+            // create a document fragment to hold the contents of the target
+            var fragment = document.createDocumentFragment(), viewBox = !svg.hasAttribute("viewBox") && target.getAttribute("viewBox");
+            // conditionally set the viewBox on the svg
+            viewBox && svg.setAttribute("viewBox", viewBox);
+            // copy the contents of the clone into the fragment
+            for (// clone the target
+            var clone = target.cloneNode(!0); clone.childNodes.length; ) {
+                fragment.appendChild(clone.firstChild);
+            }
+            // append the fragment into the svg
+            parent.appendChild(fragment);
+        }
+    }
+    function loadreadystatechange(xhr) {
+        // listen to changes in the request
+        xhr.onreadystatechange = function() {
+            // if the request is ready
+            if (4 === xhr.readyState) {
+                // get the cached html document
+                var cachedDocument = xhr._cachedDocument;
+                // ensure the cached html document based on the xhr response
+                cachedDocument || (cachedDocument = xhr._cachedDocument = document.implementation.createHTMLDocument(""), 
+                cachedDocument.body.innerHTML = xhr.responseText, xhr._cachedTarget = {}), // clear the xhr embeds list and embed each item
+                xhr._embeds.splice(0).map(function(item) {
+                    // get the cached target
+                    var target = xhr._cachedTarget[item.id];
+                    // ensure the cached target
+                    target || (target = xhr._cachedTarget[item.id] = cachedDocument.getElementById(item.id)), 
+                    // embed the target into the svg
+                    embed(item.parent, item.svg, target);
+                });
+            }
+        }, // test the ready state change immediately
+        xhr.onreadystatechange();
+    }
+    function svg4everybody(rawopts) {
+        function oninterval() {
+            // while the index exists in the live <use> collection
+            for (// get the cached <use> index
+            var index = 0; index < uses.length; ) {
+                // get the current <use>
+                var use = uses[index], parent = use.parentNode, svg = getSVGAncestor(parent);
+                if (svg) {
+                    var src = use.getAttribute("xlink:href") || use.getAttribute("href");
+                    // if running with legacy support
+                    if (nosvg) {
+                        // create a new fallback image
+                        var img = document.createElement("img");
+                        // force display in older IE
+                        img.style.cssText = "display:inline-block;height:100%;width:100%", // set the fallback size using the svg size
+                        img.setAttribute("width", svg.getAttribute("width") || svg.clientWidth), img.setAttribute("height", svg.getAttribute("height") || svg.clientHeight), 
+                        // set the fallback src
+                        img.src = fallback(src, svg, use), // replace the <use> with the fallback image
+                        parent.replaceChild(img, use);
+                    } else {
+                        if (polyfill && (!opts.validate || opts.validate(src, svg, use))) {
+                            // remove the <use> element
+                            parent.removeChild(use);
+                            // parse the src and get the url and id
+                            var srcSplit = src.split("#"), url = srcSplit.shift(), id = srcSplit.join("#");
+                            // if the link is external
+                            if (url.length) {
+                                // get the cached xhr request
+                                var xhr = requests[url];
+                                // ensure the xhr request exists
+                                xhr || (xhr = requests[url] = new XMLHttpRequest(), xhr.open("GET", url), xhr.send(), 
+                                xhr._embeds = []), // add the svg and id as an item to the xhr embeds list
+                                xhr._embeds.push({
+                                    parent: parent,
+                                    svg: svg,
+                                    id: id
+                                }), // prepare the xhr ready state change event
+                                loadreadystatechange(xhr);
+                            } else {
+                                // embed the local id into the svg
+                                embed(parent, document.getElementById(id));
+                            }
+                        }
+                    }
+                } else {
+                    // increase the index when the previous value was not "valid"
+                    ++index;
+                }
+            }
+            // continue the interval
+            requestAnimationFrame(oninterval, 67);
+        }
+        var nosvg, fallback, opts = Object(rawopts);
+        // configure the fallback method
+        fallback = opts.fallback || function(src) {
+            return src.replace(/\?[^#]+/, "").replace("#", ".").replace(/^\./, "") + ".png" + (/\?[^#]+/.exec(src) || [ "" ])[0];
+        }, // set whether to shiv <svg> and <use> elements and use image fallbacks
+        nosvg = "nosvg" in opts ? opts.nosvg : /\bMSIE [1-8]\b/.test(navigator.userAgent), 
+        // conditionally shiv <svg> and <use>
+        nosvg && (document.createElement("svg"), document.createElement("use"));
+        // set whether the polyfill will be activated or not
+        var polyfill, olderIEUA = /\bMSIE [1-8]\.0\b/, newerIEUA = /\bTrident\/[567]\b|\bMSIE (?:9|10)\.0\b/, webkitUA = /\bAppleWebKit\/(\d+)\b/, olderEdgeUA = /\bEdge\/12\.(\d+)\b/;
+        polyfill = "polyfill" in opts ? opts.polyfill : olderIEUA.test(navigator.userAgent) || newerIEUA.test(navigator.userAgent) || (navigator.userAgent.match(olderEdgeUA) || [])[1] < 10547 || (navigator.userAgent.match(webkitUA) || [])[1] < 537;
+        // create xhr requests object
+        var requests = {}, requestAnimationFrame = window.requestAnimationFrame || setTimeout, uses = document.getElementsByTagName("use");
+        // conditionally start the interval if the polyfill is active
+        polyfill && oninterval();
+    }
+    function getSVGAncestor(node) {
+        for (var svg = node; "svg" !== svg.nodeName.toLowerCase() && (svg = svg.parentNode); ) {}
+        return svg;
+    }
+    return svg4everybody;
+});

package/ts/partials/accordion-v1.0.ts

@@ -0,0 +1,104 @@
+import 'bobjoll/ts/library/common';
+import { delegate, delegateRemove, qq } from 'bobjoll/ts/library/dom';
+import { IsUrlValid } from 'bobjoll/ts/library/helpers';
+
+class Accordion {
+    private static instance: Accordion | null;
+
+    constructor() {
+        if (!Accordion.instance) {
+            Accordion.instance = this;
+            this.setup();
+        }
+
+        return Accordion.instance;
+    }
+
+    private static addEventListeners() {
+        delegate('.accordion__link', 'click', Accordion.eventClickHandler);
+    }
+
+    private static setupMobileNavigation() {
+        qq('.accordion:not(.accordion--ready)').forEach(element => {
+            const options = qq('.accordion__container > a, .accordion__container > button', element).reduce((acc, link, index) => {
+                if (!('' == element.dataset.disableMobileSelect)) {
+                    link.classList.add('hide-tablet');
+                }
+                acc += `<option value="${index}">${link.innerHTML}</option>`;
+                return acc;
+            }, '');
+
+            if (!('' == element.dataset.disableMobileSelect)) {
+                element.insertAdjacentHTML(
+                    'afterbegin',
+                    `
+					<li class="accordion__mobile-nav show-tablet">
+						<div class="accordion__select__wrapper">
+							<select class="accordion__select">${options}</select>
+						</div>
+					</li>
+				`,
+                );
+            }
+
+            element.classList.add('accordion--ready');
+        });
+
+        qq('.accordion__select').forEach(select => select.addEventListener('change', Accordion.eventSelectChangeHandler));
+    }
+
+    private static eventClickHandler(this: HTMLElement) {
+        const wrapper = <HTMLElement | undefined>this.parent('.accordion');
+
+        if (wrapper) {
+            const collapsible = 'true' === (wrapper.dataset.collapsible || wrapper.dataset.closable);
+
+            qq('.accordion__link', wrapper).forEach(item => (item !== this ? item.classList.remove('active') : null));
+
+            (wrapper.classList as any)[collapsible ? 'toggle' : 'add']('active');
+            (this.classList as any)[collapsible ? 'toggle' : 'add']('active');
+        }
+    }
+
+    private static eventSelectChangeHandler(this: HTMLSelectElement) {
+        const indexActive = parseFloat(this.value);
+        const wrapper = this.parent('.accordion');
+
+        if (wrapper && 'number' === typeof indexActive) {
+            qq('.accordion__container > a, .accordion__container > button', wrapper as HTMLElement).forEach((button, index) => {
+                const href = button.getAttribute('href');
+
+                if (button.classList.contains('accordion__link')) {
+                    if (indexActive === index) {
+                        button.click();
+                    }
+
+                    button.classList[indexActive === index ? 'add' : 'remove']('active');
+                } else if (href && indexActive === index && IsUrlValid(href)) {
+                    window.location.href = href;
+                }
+            });
+        }
+    }
+
+    public refresh() {
+        Accordion.setupMobileNavigation();
+    }
+
+    public destroy() {
+        qq('.accordion__select').forEach(select => select.removeEventListener('change', Accordion.eventSelectChangeHandler));
+
+        delegateRemove('.accordion__link', 'click', Accordion.addEventListeners);
+
+        Accordion.instance = null;
+    }
+
+    private setup() {
+        Accordion.setupMobileNavigation();
+        Accordion.addEventListeners();
+    }
+}
+
+const accordion = new Accordion();
+
+export default accordion;

package/ts/partials/accordionTabs-v1.0.ts

@@ -0,0 +1,27 @@
+import { delegate, qq } from "../library/delegate";
+
+const getActiveIndex = (parent: HTMLElement): number => {
+    return qq('header li', parent).reduce((acc, link, index) => 
+        ((acc = link.classList.contains('active') ? index : acc), acc), 
+        0
+    );
+}
+
+const showActiveTab = (parent: HTMLElement) => {
+    const index = getActiveIndex(parent);
+    qq('header ~ .content', parent).forEach((element, i) => 
+        element.classList[i === index ? 'add' : 'remove']('show')
+    );
+    window.dispatchEvent(new Event('resize'));
+}
+
+const handlerHeaderLink = function(this: HTMLElement) {
+    const accordionTabElement = this.parent('.accordion-tabs') as HTMLElement|undefined;
+    if (accordionTabElement) {
+        qq('header li.active', accordionTabElement).forEach(element => element.classList.remove('active'));
+        this.classList.add('active');
+        showActiveTab(accordionTabElement);
+    }
+}
+
+delegate('.accordion-tabs header li', 'click', handlerHeaderLink);

package/ts/partials/alert-v1.0.ts

@@ -0,0 +1,51 @@
+// tslint:disable-next-line:import-name
+import Notification, { Position } from 'BobjollNotifications';
+import View from 'BobjollView';
+
+const EXT = View.ext;
+const extend = require('bobjoll/ts/library/extend');
+
+type AlertType = 'success' | 'warning' | 'error';
+
+export interface InsertSettings {
+    fixed?: boolean;
+    class: AlertType;
+    html: string;
+}
+
+export interface DefaultSettings {
+    fixed: boolean;
+    recurrent: boolean;
+    timeout: number;
+    template: Function;
+    position: keyof Position;
+}
+
+export interface Settings {
+    fixed?: boolean;
+    timeout?: number;
+    template?: Function;
+    position?: keyof Position;
+}
+
+export default class Alert extends Notification {
+    constructor(settings?: Settings) {
+        const defaultSettings = {
+            recurrent: false,
+            fixed: false,
+            timeout: 5000,
+            template: require(`BobjollTemplate/alert-v1.0/element.${EXT}`),
+            position: 'top-right'
+        };
+
+        super(extend(defaultSettings, settings));
+    }
+
+    public new(html: string, type: AlertType, fixed = false) {
+        return super.insert({
+            fixed: fixed,
+            html: html,
+            class: `notification--${type}`
+        });
+    }
+}

package/ts/partials/copy-v1.0.ts

@@ -0,0 +1,17 @@
+export default function(text: string) {
+    const textarea = document.createElement('textarea');
+
+    textarea.textContent = text;
+    textarea.style.position = 'fixed';
+
+    document.body.appendChild(textarea);
+
+    try {
+        textarea.select();
+        document.execCommand('copy');
+    } catch(err) {
+        console.warn('Copy to clipboard failed.', err);
+    } finally {
+        document.body.removeChild(textarea);
+    }
+}

package/ts/partials/countdown-v1.0.ts

@@ -0,0 +1,119 @@
+import { q } from 'bobjoll/ts/library/gr/dom.q';
+
+export default class Countdown {
+    private static readonly outer: Function = require('BobjollTemplate/countdown-v1.0/countdown.hbs');
+    private static readonly inner: Function = require('BobjollTemplate/countdown-v1.0/countdown-inner.hbs');
+
+    private element: HTMLElement;
+    private settings: CountdownSettings;
+    private interval: any;
+
+    constructor(settings: CountdownSettings) {
+        this.settings = settings;
+
+        if (this.settings.container.classList.contains('countdown')) {
+            this.element = this.settings.container;
+        } else {
+            this.settings.container.insertAdjacentHTML('beforeend', Countdown.outer());
+
+            this.element = q('.countdown', this.settings.container) || document.createElement('div');
+        }
+
+        this.setup();
+    }
+
+    private static normalize(number: number) {
+        if (number < 10) {
+            return '0' + number;
+        }
+
+        return number;
+    }
+
+    private static count(options: CountdownSettings) {
+        const _distance = options.dateEnd.getTime() - new Date().getTime();
+        const _second = 1000;
+        const _minute = _second * 60;
+        const _hour = _minute * 60;
+        const _day = _hour * 24;
+
+        let date: {
+            Days?: number | string;
+            Hours?: number | string;
+            Mins?: number | string;
+            Secs?: number | string;
+        } = {};
+        let days = Countdown.normalize(Math.floor(_distance / _day));
+
+        if (days > 0) {
+            date.Days = days;
+        }
+
+        date.Hours = Countdown.normalize(Math.floor((_distance % _day) / _hour));
+        date.Mins = Countdown.normalize(Math.floor((_distance % _hour) / _minute));
+        date.Secs = Countdown.normalize(Math.floor((_distance % _minute) / _second));
+
+        if (_distance < 0) return;
+
+        return date;
+    }
+
+    private static countLeft(options: CountdownSettings) {
+        if (!options.dateStart || !options.total) return;
+
+        const dateCurrent = new Date();
+        const timeTotal = options.dateEnd.getTime() - options.dateStart.getTime();
+        const timeLeft = options.dateEnd.getTime() - dateCurrent.getTime();
+        const total = Math.round(Math.abs((timeLeft / timeTotal) * options.total))
+            .toString()
+            .split('');
+
+        if (timeLeft <= 0 || !(dateCurrent >= options.dateStart && dateCurrent <= options.dateEnd)) {
+            return '0000'.toString().split('');
+        }
+
+        if (total.length < options.total.toString().length) {
+            const loop = options.total.toString().length - total.length;
+            for (let i = 0; i < loop; i++) {
+                total.unshift('0');
+            }
+        }
+
+        return total;
+    }
+
+    private setup() {
+        let method: Function = Countdown.count;
+
+        if (this.settings.dateStart && this.settings.total) {
+            method = Countdown.countLeft;
+        }
+
+        this.element.innerHTML = Countdown.inner({
+            date: method(this.settings),
+        });
+
+        this.interval = setInterval(() => {
+            const date = method(this.settings);
+
+            let data: any = {};
+
+            if (date) {
+                data['date'] = date;
+            }
+
+            this.element.innerHTML = Countdown.inner(data);
+
+            if (new Date().getTime() >= this.settings.dateEnd.getTime()) {
+                clearInterval(this.interval);
+            }
+        }, 1000);
+    }
+}
+
+export interface CountdownSettings {
+    container: HTMLElement;
+    dateStart?: Date;
+    dateEnd: Date;
+    total?: number;
+}