🎉 Initial commit

2020-08-22 13:20:08 +02:00
commit c698d944e6
69 changed files with 3781 additions and 0 deletions
@@ -0,0 +1,49 @@
+interface colorScheme {
+    DarkMuted: {
+        hex: string,
+        rgb: Number[],
+        bodyTextColor: string
+    },
+    Vibrant: {
+        hex: string,
+        rgb: Number[],
+        bodyTextColor: string
+    }
+}
+
+let colorsCache: { [key: string]: colorScheme } = {};
+
+if (localStorage.hasOwnProperty('colorsCache')) {
+    try {
+        colorsCache = JSON.parse(localStorage.getItem('colorsCache'));
+    }
+    catch (e) {
+        colorsCache = {};
+    }
+}
+
+async function getColor(imageURL: string) {
+    if (!colorsCache.hasOwnProperty(imageURL)) {
+        const palette = await Vibrant.from(imageURL).getPalette();
+
+        colorsCache[imageURL] = {
+            Vibrant: {
+                hex: palette.Vibrant.hex,
+                rgb: palette.Vibrant.rgb,
+                bodyTextColor: palette.Vibrant.bodyTextColor
+            },
+            DarkMuted: {
+                hex: palette.DarkMuted.hex,
+                rgb: palette.DarkMuted.rgb,
+                bodyTextColor: palette.DarkMuted.bodyTextColor
+            }
+        }
+
+        localStorage.setItem('colorsCache', JSON.stringify(colorsCache));
+    }
+    return colorsCache[imageURL];
+}
+
+export {
+    getColor
+}
@@ -0,0 +1,287 @@
+import { loadScript, loadStyle } from './utils';
+
+/**
+ * Init PhotoSwipe
+ * From: https://photoswipe.com/documentation/getting-started.html
+ * @param gallerySelector 
+ */
+var initPhotoSwipeFromDOM = function (gallerySelector) {
+
+    // parse slide data (url, title, size ...) from DOM elements 
+    // (children of gallerySelector)
+    var parseThumbnailElements = function (el) {
+        var thumbElements = el.childNodes,
+            numNodes = thumbElements.length,
+            items = [],
+            figureEl,
+            linkEl,
+            size,
+            item;
+
+        for (var i = 0; i < numNodes; i++) {
+
+            figureEl = thumbElements[i]; // <figure> element
+
+            // include only element nodes 
+            if (figureEl.nodeType !== 1) {
+                continue;
+            }
+
+            linkEl = figureEl.children[0]; // <a> element
+
+            size = linkEl.getAttribute('data-size').split('x');
+
+            // create slide object
+            item = {
+                src: linkEl.getAttribute('href'),
+                w: parseInt(size[0], 10),
+                h: parseInt(size[1], 10)
+            };
+
+
+
+            if (figureEl.children.length > 1) {
+                // <figcaption> content
+                item.title = figureEl.children[1].innerHTML;
+            }
+
+            if (linkEl.children.length > 0) {
+                // <img> thumbnail element, retrieving thumbnail url
+                item.msrc = linkEl.children[0].getAttribute('src');
+            }
+
+            item.el = figureEl; // save link to element for getThumbBoundsFn
+            items.push(item);
+        }
+
+        return items;
+    };
+
+    // find nearest parent element
+    var closest = function closest(el, fn) {
+        return el && (fn(el) ? el : closest(el.parentNode, fn));
+    };
+
+    // triggers when user clicks on thumbnail
+    var onThumbnailsClick = function (e) {
+        e = e || window.event;
+        e.preventDefault ? e.preventDefault() : e.returnValue = false;
+
+        var eTarget = e.target || e.srcElement;
+
+        // find root element of slide
+        var clickedListItem = closest(eTarget, function (el) {
+            return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
+        });
+
+        if (!clickedListItem) {
+            return;
+        }
+
+        // find index of clicked item by looping through all child nodes
+        // alternatively, you may define index via data- attribute
+        var clickedGallery = clickedListItem.parentNode,
+            childNodes = clickedListItem.parentNode.childNodes,
+            numChildNodes = childNodes.length,
+            nodeIndex = 0,
+            index;
+
+        for (var i = 0; i < numChildNodes; i++) {
+            if (childNodes[i].nodeType !== 1) {
+                continue;
+            }
+
+            if (childNodes[i] === clickedListItem) {
+                index = nodeIndex;
+                break;
+            }
+            nodeIndex++;
+        }
+
+        if (index >= 0) {
+            // open PhotoSwipe if valid index found
+            openPhotoSwipe(index, clickedGallery);
+        }
+        return false;
+    };
+
+    // parse picture index and gallery index from URL (#&pid=1&gid=2)
+    var photoswipeParseHash = function () {
+        var hash = window.location.hash.substring(1),
+            params = {};
+
+        if (hash.length < 5) {
+            return params;
+        }
+
+        var vars = hash.split('&');
+        for (var i = 0; i < vars.length; i++) {
+            if (!vars[i]) {
+                continue;
+            }
+            var pair = vars[i].split('=');
+            if (pair.length < 2) {
+                continue;
+            }
+            params[pair[0]] = pair[1];
+        }
+
+        if (params.gid) {
+            params.gid = parseInt(params.gid, 10);
+        }
+
+        return params;
+    };
+
+    var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
+        var pswpElement = document.querySelectorAll('.pswp')[0],
+            gallery,
+            options,
+            items;
+
+        items = parseThumbnailElements(galleryElement);
+
+        // define options (if needed)
+        options = {
+
+            // define gallery index (for URL)
+            galleryUID: galleryElement.getAttribute('data-pswp-uid'),
+
+            getThumbBoundsFn: function (index) {
+                // See Options -> getThumbBoundsFn section of documentation for more info
+                var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
+                    pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
+                    rect = thumbnail.getBoundingClientRect();
+
+                return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
+            }
+
+        };
+
+        // PhotoSwipe opened from URL
+        if (fromURL) {
+            if (options.galleryPIDs) {
+                // parse real index when custom PIDs are used 
+                // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
+                for (var j = 0; j < items.length; j++) {
+                    if (items[j].pid == index) {
+                        options.index = j;
+                        break;
+                    }
+                }
+            } else {
+                // in URL indexes start from 1
+                options.index = parseInt(index, 10) - 1;
+            }
+        } else {
+            options.index = parseInt(index, 10);
+        }
+
+        // exit if index not found
+        if (isNaN(options.index)) {
+            return;
+        }
+
+        if (disableAnimation) {
+            options.showAnimationDuration = 0;
+        }
+
+        // Pass data to PhotoSwipe and initialize it
+        gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
+        gallery.init();
+    };
+
+    // loop through all gallery elements and bind events
+    var galleryElements = document.querySelectorAll(gallerySelector);
+
+    for (var i = 0, l = galleryElements.length; i < l; i++) {
+        galleryElements[i].setAttribute('data-pswp-uid', i + 1);
+        galleryElements[i].onclick = onThumbnailsClick;
+    }
+
+    // Parse URL and open gallery if it contains #&pid=3&gid=1
+    var hashData = photoswipeParseHash();
+    if (hashData.pid && hashData.gid) {
+        openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
+    }
+};
+
+/**
+ * Wrap adjacent figure tags with div.gallery, and append style
+ * Reference: https://github.com/xieranmaya/blog/issues/6
+ * @param gallery 
+ */
+function wrap(gallery: HTMLElement[]) {
+    let galleryContainer = document.createElement('div');
+    galleryContainer.className = 'gallery';
+
+    let parentNode = gallery[0].parentNode,
+        first = gallery[0];
+
+    parentNode.insertBefore(galleryContainer, first)
+
+    for (let j = 0; j < gallery.length; ++j) {
+        const width = gallery[j].querySelector('img').width,
+            height = gallery[j].querySelector('img').height;
+
+        gallery[j].style.flexGrow = `${width * 100 / height}`;
+        gallery[j].style.flexBasis = `${width * 240 / height}px`;
+
+        galleryContainer.appendChild(gallery[j]);
+    }
+}
+
+/**
+ * Load PhotoSwipe library dynamically
+ */
+function loadPhotoSwipe() {
+    const tasks = [
+        loadScript("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.js"),
+        loadScript("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe-ui-default.min.js"),
+        loadStyle("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/photoswipe.min.css"),
+        loadStyle("https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.3/default-skin/default-skin.min.css")
+    ];
+
+    return Promise.all(tasks);
+}
+
+/**
+ * Create gallery
+ * @param selector 
+ */
+function createGallery(selector: string) {
+    const figures = document.querySelector(selector).querySelectorAll('figure');
+
+    if (figures.length) {
+        let currentGallery = [figures[0]];
+        for (let i = 1; i < figures.length; ++i) {
+            if (figures[i].previousElementSibling === currentGallery[currentGallery.length - 1]) {
+                /* Adjacent */
+                currentGallery.push(figures[i]);
+            }
+            else {
+                /* End gallery */
+                wrap(currentGallery);
+                currentGallery = [figures[i]];
+            }
+        }
+
+        if (currentGallery.length > 0) {
+            wrap(currentGallery);
+        }
+
+        /**
+         * Load PhotoSwipe library, and then initialize
+         */
+        loadPhotoSwipe().then(() => {
+            const pswp = document.querySelector('.pswp') as HTMLDivElement;
+            pswp.style.removeProperty('display');
+
+            initPhotoSwipeFromDOM(`${selector} .gallery`);
+        })
+    }
+}
+
+export {
+    createGallery
+}
@@ -0,0 +1,96 @@
+import { createGallery } from "./gallery"
+import { getColor } from './color';
+import menu from './menu';
+
+let Stack = {
+    init: () => {
+        /**
+         * Bind menu event
+         */
+        menu();
+
+        /**
+         * Add timeago
+         */
+        const timeagoElements = document.querySelectorAll('article time[data-timeago=true]');
+        if (timeagoElements.length) {
+            timeago.render(timeagoElements);
+        }
+
+        if (document.querySelector('.article-content')) {
+            createGallery('.article-content');
+        }
+
+        /**
+         * Add color to tags
+         */
+        document.querySelectorAll('.color-tag').forEach(async (tag: HTMLLinkElement) => {
+            const imageURL = tag.getAttribute('data-image');
+
+            const colors = await getColor(imageURL);
+
+            tag.style.color = colors.Vibrant.bodyTextColor;
+            tag.style.background = colors.Vibrant.hex;
+        })
+
+        /**
+         * Add linear gradient background to tile style article
+         */
+        const articleTile = document.querySelector('.article-list--tile');
+        if (articleTile) {
+            let observer = new IntersectionObserver(async (entries, observer) => {
+                entries.forEach(entry => {
+                    if (!entry.isIntersecting) return;
+                    observer.unobserve(entry.target);
+
+                    const articles = entry.target.querySelectorAll('article.has-image');
+                    articles.forEach(async articles => {
+                        const image = articles.querySelector('img'),
+                            imageURL = image.src,
+                            articleDetails: HTMLDivElement = articles.querySelector('.article-details');
+
+                        const colors = await getColor(imageURL);
+
+                        articleDetails.style.background = `
+                        linear-gradient(0deg, 
+                            rgba(${colors.DarkMuted.rgb[0]}, ${colors.DarkMuted.rgb[1]}, ${colors.DarkMuted.rgb[2]}, 0.5) 0%, 
+                            rgba(${colors.Vibrant.rgb[0]}, ${colors.Vibrant.rgb[1]}, ${colors.Vibrant.rgb[2]}, 0.75) 100%)`;
+                    })
+                })
+            });
+
+            observer.observe(articleTile)
+        }
+    },
+    alert: (content, time = 5000, animationSpeed = 500) => {
+        const alert = document.createElement('div');
+        alert.innerHTML = content;
+        alert.className = 'alert';
+        alert.style.visibility = 'hidden';
+        document.body.appendChild(alert);
+
+        alert.style.transform = `translateY(${alert.clientHeight + 50}px)`;
+        alert.style.transition = `transform ${animationSpeed / 1000}s ease`;
+
+        setTimeout(() => {
+            alert.style.removeProperty('visibility');
+            alert.style.transform = `translateY(0)`;
+        }, animationSpeed);
+
+        setTimeout(() => {
+            alert.style.transform = `translateY(${alert.clientHeight + 50}px)`;
+        }, animationSpeed + time);
+
+        setTimeout(() => {
+            alert.remove();
+        }, 2 * animationSpeed + time);
+    }
+}
+
+window.addEventListener('load', () => {
+    setTimeout(function () {
+        Stack.init();
+    }, 0);
+})
+
+window.Stack = Stack;
@@ -0,0 +1,83 @@
+/**
+ * Slide up/down
+ * Code from https://dev.to/bmsvieira/vanilla-js-slidedown-up-4dkn
+ * @param target 
+ * @param duration 
+ */
+let slideUp = (target: HTMLElement, duration = 500) => {
+    target.classList.add('transiting');
+    target.style.transitionProperty = 'height, margin, padding';
+    target.style.transitionDuration = duration + 'ms';
+    ///target.style.boxSizing = 'border-box';
+    target.style.height = target.offsetHeight + 'px';
+    target.offsetHeight;
+    target.style.overflow = 'hidden';
+    target.style.height = "0";
+    target.style.paddingTop = "0";
+    target.style.paddingBottom = "0";
+    target.style.marginTop = "0";
+    target.style.marginBottom = "0";
+    window.setTimeout(() => {
+        target.classList.remove('show')
+        target.style.removeProperty('height');
+        target.style.removeProperty('padding-top');
+        target.style.removeProperty('padding-bottom');
+        target.style.removeProperty('margin-top');
+        target.style.removeProperty('margin-bottom');
+        target.style.removeProperty('overflow');
+        target.style.removeProperty('transition-duration');
+        target.style.removeProperty('transition-property');
+        target.classList.remove('transiting');
+    }, duration);
+}
+
+let slideDown = (target: HTMLElement, duration = 500) => {
+    target.classList.add('transiting');
+    target.style.removeProperty('display');
+
+    target.classList.add('show');
+
+    let height = target.offsetHeight;
+    target.style.overflow = 'hidden';
+    target.style.height = "0";
+    target.style.paddingTop = "0";
+    target.style.paddingBottom = "0";
+    target.style.marginTop = "0";
+    target.style.marginBottom = "0";
+    target.offsetHeight;
+    ///target.style.boxSizing = 'border-box';
+    target.style.transitionProperty = "height, margin, padding";
+    target.style.transitionDuration = duration + 'ms';
+    target.style.height = height + 'px';
+    target.style.removeProperty('padding-top');
+    target.style.removeProperty('padding-bottom');
+    target.style.removeProperty('margin-top');
+    target.style.removeProperty('margin-bottom');
+    window.setTimeout(() => {
+        target.style.removeProperty('height');
+        target.style.removeProperty('overflow');
+        target.style.removeProperty('transition-duration');
+        target.style.removeProperty('transition-property');
+        target.classList.remove('transiting');
+    }, duration);
+}
+
+let slideToggle = (target, duration = 500) => {
+    if (window.getComputedStyle(target).display === 'none') {
+        return slideDown(target, duration);
+    } else {
+        return slideUp(target, duration);
+    }
+}
+
+export default function () {
+    const toggleMenu = document.getElementById('toggle-menu');
+    if (toggleMenu) {
+        toggleMenu.addEventListener('click', () => {
+            if (document.getElementById('main-menu').classList.contains('transiting')) return;
+            document.body.classList.toggle('show-menu');
+            slideToggle(document.getElementById('main-menu'), 300);
+            toggleMenu.classList.toggle('is-active');
+        });
+    }
+}
@@ -0,0 +1,43 @@
+/**
+ * Load script asynchronous
+ * @return {Promise}
+ * @param url 
+ */
+const loadScript = function (url) {
+    return new Promise(resolve => {
+        var scriptTag = document.createElement('script');
+        scriptTag.src = url;
+
+        scriptTag.onload = () => {
+            resolve();
+        };
+
+        document.head.appendChild(scriptTag);
+    })
+};
+
+/**
+ * Load style asynchronous
+ * @return {Promise}
+ * @param url 
+ */
+const loadStyle = function (url) {
+    return new Promise(resolve => {
+        var link = document.createElement('link');
+        link.href = url;
+
+        link.type = "text/css";
+        link.rel = "stylesheet";
+
+        link.onload = () => {
+            resolve();
+        };
+
+        document.head.appendChild(link);
+    });
+};
+
+export {
+    loadScript,
+    loadStyle
+}