FEATURE: add binarity template - currently only homepage

templates/Binarity/Resources/assets/js/BLightBox.js

@@ -0,0 +1,289 @@
+/**
+ * Lightbox library created by binarity s.r.o.
+ * www.binarity.cz
+ * version 1.0.0
+ *
+ * Vanilla JavaScript lightbox plugin.
+ *
+ * Can use custom invoker passed as first argument or uses a default one - .b-lightbox.
+ * This allows to have more lightbox instances on one site to categorize items.
+ *
+ * Default behaviour:
+ *      - Hides on escape keydown event - settable (options.allow_escape).
+ *      - Hides on background click - settable (options.allow_backgroundclick).
+ *      - Hide button in top right corner - settable (options.close_text).
+ *      - Allows usage of arrow keys (left/right) to navigate through images - settable (option.allow_arrows).
+ *
+ * @param options
+ * @param autorun
+ * @constructor
+ */
+function BLightBox(options, autorun) {
+    // Instance and instance variables.
+    var BLightBox               = this,
+        escape_key_allowed      = (!(options !== undefined && options.allow_escape === false)),
+        hide_on_holder_allowed  = (!(options !== undefined && options.allow_backgroundclick === false)),
+        arrows_allowed  = (!(options !== undefined && options.allow_arrows === false)),
+        close_text  = (options !== undefined && options.close_text !== undefined) ? options.close_text : 'Close',
+
+        // DOM
+        lightbox_holder         = document.createElement('div'),
+        invoker_string          = (options !== undefined && options.invoker !== undefined) ? options.invoker : '.b-lightbox',
+        invokers                = document.querySelectorAll(invoker_string),
+        invokers_length         = invokers.length,
+        lightbox_image          = document.createElement('img'),
+        close_label             = document.createElement('a'),
+        previous_button         = document.createElement('a'),
+        next_button             = document.createElement('a'),
+        lightbox_label          = document.createElement('span');
+
+    // BLightBox DOM default settings.
+    lightbox_holder.className = 'b-lightbox-holder';
+    lightbox_image.className = 'b-lightbox-image';
+    close_label.className = 'b-lightbox-close-button';
+    close_label.textContent = close_text;
+    previous_button.className = 'b-lightbox-direction previous';
+    previous_button.innerHTML = '‹';
+    next_button.className = 'b-lightbox-direction next';
+    next_button.innerHTML = '›';
+    lightbox_label.className = 'b-lightbox-label';
+
+    /**
+     * Show new image according to data-newindex attribute on directional button
+     */
+    this.loadNewImage = function(event) {
+        event.stopPropagation();
+        var index = event.target.getAttribute('data-newindex'),
+            label = invokers[index].getAttribute('data-label');
+
+        if(invokers[index]) {
+            lightbox_image.style.display = 'none';
+            this.decideFromLoad(invokers[index]);
+            lightbox_image.style.display = 'block';
+            if(label != '') {
+                lightbox_label.innerHTML = label;
+            }
+        }
+
+        this.lightboxImageCenter(label != ''); // Center image.
+
+        // Change indexes to be opened.
+        previous_button.setAttribute('data-newindex', this.getPreviousIndex(index));
+        next_button.setAttribute('data-newindex', this.getNextIndex(index));
+    };
+
+    /**
+     * Returns first next index possible, or return very first index to allow rotation.
+     * @param index
+     * @returns {number}
+     */
+    this.getNextIndex = function(index) {
+        // Skip to last image if we are on the first.
+        return (index == invokers_length - 1) ? 0 : parseInt(index) + 1;
+    };
+
+    /**
+     * Returns first previous index possible, or returns last array index to allow rotation.
+     * @param index
+     * @returns {number}
+     */
+    this.getPreviousIndex = function(index) {
+        // Skip to last image if we are on the first.
+        return (index == 0) ? invokers_length - 1 : index - 1;
+    };
+
+    /**
+     *  Reset ivokers_length variable for re-use.
+     */
+    this.resetInvokersLength = function() {
+        invokers_length = invokers.length;
+    };
+
+    /**
+     * Provides code for closing a lightbox and hiding images.
+     */
+    this.listenActionClose = function(event) {
+        lightbox_holder.style.display = 'none';
+        lightbox_image.style.display = 'none';
+    };
+
+    /**
+     * Adds src to lightbox image from element's style background-image.
+     * Removes url() par of the string.
+     * @param el
+     */
+    this.loadImageFromBackgroundImage = function(el) {
+        lightbox_image.src = el.style.backgroundImage.replace(/url\("?(.*[^"])"?\)/, '$1');
+    };
+
+    /**
+     * Adds src to lightbox image from element's child img tag.
+     * @param el
+     */
+    this.loadImageFromChildImg = function(el) {
+        var img = el.querySelector('img');
+        if(img) {
+            lightbox_image.src = img.src;
+        }
+    };
+
+    /**
+     * Move lightbox image to the center of screen.
+     */
+    this.lightboxImageCenter = function(bool_label) {
+        // Image
+        lightbox_image.style.left = ((lightbox_holder.offsetWidth - lightbox_image.offsetWidth) / 2) + 'px';
+        lightbox_image.style.top = ((lightbox_holder.offsetHeight - lightbox_image.offsetHeight) / 2) + 'px';
+
+        // Image label.
+        if(bool_label === true) {
+            lightbox_label.style.width = lightbox_image.offsetWidth + 'px';
+            lightbox_label.style.left = ((lightbox_holder.offsetWidth - lightbox_image.offsetWidth) / 2) + 'px';
+            lightbox_label.style.display = 'block';
+            lightbox_label.style.top = (lightbox_image.offsetTop + lightbox_image.offsetHeight - lightbox_label.offsetHeight) + 'px';
+        }
+    };
+
+    /**
+     * Returns index in invokers array or false on unsuccessful attempt to find the element.
+     * @param el
+     * @returns {*}
+     */
+    this.getIndexInInvokers = function(el) {
+        var inv_length = invokers_length;
+        while(inv_length--) {
+            if(invokers[inv_length].isEqualNode(el)) {
+                return inv_length;
+            }
+        }
+        return false;
+    };
+
+    /**
+     * This method decides from where to load src attribute into lightbox_image.
+     * @param el
+     */
+    this.decideFromLoad = function(el) {
+        // Decide from which source to get image url.
+        if(el.hasAttribute('data-background')) {
+            this.loadImageFromBackgroundImage(el);
+        } else if(el.hasAttribute('data-img')) {
+            this.loadImageFromChildImg(el);
+        }
+
+        lightbox_label.style.display = 'none';
+        lightbox_label.innerHTML = '';
+    };
+
+    /**
+     * Provides code for opening a lightbox and displaying images.
+     */
+    this.listenActionOpen = function(el, app, event) {
+        var label = el.getAttribute('data-label');
+
+        event.stopPropagation();
+        event.preventDefault(); // If element is a-tag, prevent from href requesting.
+
+        app.decideFromLoad(el); // Load image into lightbox_image.
+
+        // Change indexes to be opened.
+        previous_button.setAttribute('data-newindex', app.getPreviousIndex(app.getIndexInInvokers(el)));
+        next_button.setAttribute('data-newindex', app.getNextIndex(app.getIndexInInvokers(el)));
+
+        // Show lightbox and image.
+        lightbox_holder.style.display = 'block';
+        lightbox_image.style.display = 'block';
+        if(label != '') {
+            lightbox_label.innerHTML = label;
+        }
+
+        // Center lightbox within the screen.
+        app.lightboxImageCenter(label != '');
+    };
+
+    /**
+     * Add lightbox closing method listener to given element.
+     * @param el
+     */
+    this.addCloseListenerFor = function(el) {
+        el.addEventListener('click', this.listenActionClose.bind(this));
+    };
+
+    /**
+     * Add lightbox opening method listener to given element.
+     * @param el
+     */
+    this.addOpenListenerFor = function(el) {
+        var app = this;
+        el.addEventListener('click', app.listenActionOpen.bind(app, el, this), true);
+    };
+
+    /**
+     * Initializes all possible listeners at once on class instance creation.
+     */
+    this.initiateListeners = function() {
+        // Open Listeners.
+        while(invokers_length--) {
+            this.addOpenListenerFor(invokers[invokers_length]);
+        }
+        this.resetInvokersLength();
+
+        // Close Listeners.
+        // On background click.
+        if(hide_on_holder_allowed){
+            this.addCloseListenerFor(lightbox_holder);
+        }
+        // On escape key hit, if requested.
+        if(escape_key_allowed) {
+            window.addEventListener('keydown', function (event) {
+                if(event.keyCode === 27) {
+                    BLightBox.listenActionClose();
+                }
+            });
+        }
+
+        // Directional buttons.
+        previous_button.addEventListener('click',this.loadNewImage.bind(this));
+        next_button.addEventListener('click',this.loadNewImage.bind(this));
+        // Allow directing with arrows when enabled.
+        if(arrows_allowed) {
+            window.addEventListener('keydown', function arrowDirections(event) {
+                if(event.keyCode === 37) {
+                    previous_button.click();
+                } else if(event.keyCode === 39) {
+                    next_button.click();
+                }
+            });
+        }
+    };
+
+    /**
+     * Initialization method that starts BLightBox instance.
+     * @returns {*}
+     */
+    this.init = function() {
+        // Append lightbox background.
+        document.body.appendChild(lightbox_holder);
+        lightbox_holder.appendChild(previous_button);
+        lightbox_holder.appendChild(lightbox_image);
+        lightbox_holder.appendChild(next_button);
+        lightbox_holder.appendChild(close_label);
+        lightbox_holder.appendChild(lightbox_label);
+        // Add event listeners for invokers.
+        this.initiateListeners();
+
+        // Auto centering on window.resize;
+        window.addEventListener('resize', function() {
+            BLightBox.lightboxImageCenter(true);
+        });
+
+        return BLightBox;
+    };
+
+    // If autorun is requested, create instance.
+    if(autorun !== undefined && autorun === true) {
+        return this.init();
+    } else {
+        return this;
+    }
+}

templates/Binarity/Resources/assets/js/app.js

@@ -0,0 +1,57 @@
+$(document).foundation();
+
+new CookiePolicy();
+
+window.addEventListener('load', function() {
+    var lightbox = new BLightBox({
+        invoker: '.b-invo',
+        close_text: 'Zavřít'
+    }, true);
+
+    var gallery_links = document.querySelectorAll('.b-invo'),
+        gallery_links_i = gallery_links.length;
+});
+
+function switchResponsiveMenu() {
+    var menuHolder = document.getElementById('responsive-menu');
+    if(menuHolder.style.width == "100%") {
+        hideResponsiveMenu();
+    } else {
+        showResponsiveMenu();
+    }
+}
+
+function showResponsiveMenu() {
+    var menuHolder = document.getElementById('responsive-menu'),
+        titleBar = document.getElementsByClassName('title-bar')[0],
+        titleBarCS = window.getComputedStyle(titleBar);
+    menuHolder.style.display="block";
+    menuHolder.style.height = document.documentElement.clientHeight + 'px';
+    menuHolder.style.height = window.innerHeight + 'px';
+    menuHolder.style.left = "0";
+    menuHolder.style.width = "100%";
+    menuHolder.style.zIndex = 1000;
+    menuHolder.style.top = titleBarCS.height;
+    menuHolder.style.height = '100%;';
+    titleBar.style.position = 'fixed';
+}
+
+function hideResponsiveMenu() {
+    var menuHolder = document.getElementById('responsive-menu'),
+        titleBar = document.getElementsByClassName('title-bar')[0];
+    menuHolder.style.display = "none";
+    menuHolder.style.width = "250px";
+    titleBar.style.position = 'initial';
+    document.body.style.paddingTop = '0';
+}
+
+window.addEventListener('resize', function() {
+    var menuHolder = document.getElementById('responsive-menu');
+    hideResponsiveMenu();
+    if(window.innerWidth >= 1023) {
+        menuHolder.style.display="block";
+        menuHolder.style.height = "auto";
+        menuHolder.style.top = "0";
+    }
+});
+

templates/Binarity/Resources/assets/js/cookie.policy.js

@@ -0,0 +1,150 @@
+/**
+ * Cookie handling mini framework &
+ * EU Cookie policy information layer
+ *
+ * created by binarity s.r.o
+ * www.binarity.cz
+ *
+ * @returns {*}
+ * @constructor
+ */
+var Cookies = {
+    read: function(sKey) {
+        return !sKey ? null : decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
+    },
+    set: function(sKey, sValue, vEnd, sPath, sDomain, bSecure) {
+        if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
+        var sExpires = "";
+        if (vEnd) {
+            switch (vEnd.constructor) {
+                case Number:
+                    sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
+                    break;
+                case String:
+                    sExpires = "; expires=" + vEnd;
+                    break;
+                case Date:
+                    sExpires = "; expires=" + vEnd.toUTCString();
+                    break;
+            }
+        }
+        document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
+        return true;
+    },
+    remove: function (sKey, sPath, sDomain) {
+        if (!this.has(sKey)) { return false; }
+        document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
+        return true;
+    },
+    has: function (sKey) {
+        if (!sKey) { return false; }
+        return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
+    },
+    keys: function () {
+        var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
+        for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
+        return aKeys;
+    }
+};
+
+function CookiePolicy(sPrefix, sText, sMore, sMoreURL, sUnderstand, sCookieName) {
+    'use strict';
+
+    var prefix      = sPrefix || 'bineucookie_',
+        cookieName  = sCookieName || 'allowed_eu',
+        text        = sText || 'Tyto webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookie. Informace o tom, jak tyto webové stránky používáte, jsou sdíleny se společností Google. Používáním těchto webových stránek souhlasíte s použitím souborů cookie.',
+        more        = sMore || 'Další informace',
+        more_url    = sMoreURL || 'https://www.google.com/policies/technologies/cookies/',
+        understand  = sUnderstand || 'Rozumím',
+        // DOM
+        layerHolder = document.createElement('div'),
+        textElement = document.createElement('p'),
+        moreInfoButton = document.createElement('a'),
+        okButton = document.createElement('a');
+
+    /**
+     * This method checks whether cookie about cookies was set or not.
+     * If it was set, this method additionally checks for its validity.
+     */
+    this.isValidCookie = function(sKey) {
+        return Cookies.has(prefix + sKey);
+    };
+
+    /**
+     * This method just adds custom styles to page header so it does not need to be all inline/
+     */
+    this.addStyle = function() {
+        var styleElement = document.createElement('style');
+
+        styleElement.id = prefix + 'style';
+        styleElement.innerHTML += '#bin_eu_cookie_layer {opacity:1; position:fixed; padding:16px; left:0; top:0; width:100%; display:block; color:#f4f4f4; background-color:rgba(0,0,0,0.8); z-index:1000;}\r\n';
+        styleElement.innerHTML += '#bin_eu_cookie_layer #bin-cookie-text {width:80%; float:left; display:inline-block;}\r\n';
+        styleElement.innerHTML += '#bin_eu_cookie_layer .bin-button {padding: 8px; float:right;}\r\n';
+
+        // Responsive version
+        styleElement.innerHTML += '@media screen and (max-width:980px) {\r\n';
+        styleElement.innerHTML += '\t#bin_eu_cookie_layer #bin-cookie-text {width:100%;}';
+        styleElement.innerHTML += '}\r\n';
+
+        document.head.appendChild(styleElement);
+    };
+
+    /**
+     * This method accepts eu cookie policy by setting up a cookie that will inform the script next time that the policy
+     * was already accepted.
+     */
+    this.acceptCookiePolicy = function() {
+        var date = new Date();
+        date.setFullYear(date.getFullYear() + 25);
+        Cookies.set(prefix + cookieName, 1, date.toGMTString(), '/');
+
+        layerHolder.parentNode.removeChild(layerHolder);
+    };
+
+    /**
+     * This method adds necessary elements to the DOM
+     */
+    this.addElements = function() {
+        layerHolder.id = "bin_eu_cookie_layer";
+
+        textElement.id = "bin-cookie-text";
+        textElement.textContent = text;
+
+        moreInfoButton.className = 'bin-button';
+        moreInfoButton.textContent = more;
+        moreInfoButton.href = more_url;
+        moreInfoButton.target = '_blank';
+
+        okButton.id = 'bin-cookie-ok';
+        okButton.className = 'bin-button';
+        okButton.textContent = understand;
+        okButton.href = 'javascript:void(0);';
+
+        layerHolder.appendChild(textElement);
+        layerHolder.appendChild(moreInfoButton);
+        layerHolder.appendChild(okButton);
+
+        document.body.appendChild(layerHolder);
+
+        okButton.addEventListener('click', this.acceptCookiePolicy);
+    };
+
+    /**
+     * Method for adding complete DOM layer to the DOM.
+     */
+    this.addDOMLayer = function() {
+        this.addStyle();
+        this.addElements();
+    };
+
+    /**
+     * This method initializes the whole process of drawing eu cookie policy layer.
+     */
+    this.init = function() {
+        if(!this.isValidCookie(cookieName)) {
+            this.addDOMLayer();
+        }
+    };
+
+    return this.init(); // Auto-run on setup.
+}