jekyll-theme-ricky 0.1.0

data/assets/js/card-modern-blog.js

@@ -0,0 +1,277 @@
+'use strict';
+
+/**
+ * Card.
+ */
+var Card = (function (window) {
+
+    /**
+     * Enum of CSS selectors.
+     */
+    var SELECTORS = {
+        container: '.card__container',
+        content: '.card__content',
+        clip: '.clip'
+    };
+
+    /**
+     * Enum of CSS classes.
+     */
+    var CLASSES = {
+        containerClosed: 'card__container--closed',
+        bodyHidden: 'body--hidden'
+    };
+
+    /**
+     * Card.
+     */
+    var Card = function (id, el) {
+
+        this.id = id;
+
+        this._el = el;
+
+        // Get elements.
+        this._container = $(this._el).find(SELECTORS.container)[0];
+        this._clip = $(this._el).find(SELECTORS.clip)[0];
+        this._content = $(this._el).find(SELECTORS.content)[0];
+
+        this.isOpen = false;
+
+        this._TL = null;
+    };
+
+    /**
+     * Open card.
+     * @param {Function} callback The callback `onCardMove`.
+     */
+    Card.prototype.openCard = function (callback) {
+
+        this._TL = new TimelineLite;
+
+        var slideContentDown = this._slideContentDown();
+        var clipImageIn = this._clipImageIn();
+        var floatContainer = this._floatContainer(callback);
+        var clipImageOut = this._clipImageOut();
+        var slideContentUp = this._slideContentUp();
+
+        // Compose sequence and use duration to overlap tweens.
+        this._TL.add(slideContentDown);
+        this._TL.add(clipImageIn, 0);
+        this._TL.add(floatContainer, '-=' + clipImageIn.duration() * 0.6);
+        // this._TL.add(clipImageOut, '-=' + floatContainer.duration() * 0.3);
+        this._TL.add(slideContentUp/*, '-=' + clipImageOut.duration() * 0.6*/);
+
+        this.isOpen = true;
+
+        return this._TL;
+    };
+
+    /**
+     * Slide content down.
+     * @private
+     */
+    Card.prototype._slideContentDown = function () {
+
+        var tween = TweenLite.to(this._content, 0.8, {
+            y: window.innerHeight,
+            ease: Expo.easeInOut
+        });
+
+        return tween;
+    };
+
+    /**
+     * Clip image in.
+     * @private
+     */
+    Card.prototype._clipImageIn = function () {
+
+        // Polygon.
+        var TL = new TimelineLite;
+
+        var start = [
+            [0, 1200],
+            [0, 0],
+            [1920, 0],
+            [1920, 1200]
+        ];
+
+        var end = [
+            [916, 430],
+            [1125, 643],
+            [960, 607],
+            [793, 570]
+        ];
+
+        var points = [];
+
+        // Create a tween for each point.
+        start.forEach(function (point, i) {
+
+            var tween = TweenLite.to(point, 1.5, end[i]);
+
+            end[i].onUpdate = function () {
+
+                points.push(point.join());
+
+                // Every 4 point update clip-path.
+                if (points.length === end.length) {
+                    $(this._clip).attr('points', points.join(' '));
+                    // Reset.
+                    points = [];
+                }
+
+            }.bind(this);
+
+            tween.vars.ease = Expo.easeInOut;
+
+            // Add at position 0.
+            TL.add(tween, 0);
+
+        }, this);
+
+        return TL;
+    };
+
+    /**
+     * Float card to final position.
+     * @param {Function} callback The callback `onCardMove`.
+     * @private
+     */
+    Card.prototype._floatContainer = function (callback) {
+
+        $(document.body).addClass(CLASSES.bodyHidden);
+
+        var TL = new TimelineLite;
+
+        var rect = this._container.getBoundingClientRect();
+        var windowW = window.innerWidth;
+
+        var track = {
+            width: 0,
+            x: rect.left + (rect.width / 2),
+            y: rect.top + (rect.height / 2)
+        };
+
+        TL.set(this._container, {
+            width: rect.width,
+            height: rect.height,
+            x: rect.left,
+            y: rect.top,
+            position: 'fixed',
+            overflow: 'hidden'
+        });
+
+        TL.to([this._container, track], 2, {
+            width: windowW,
+            height: '100%',
+            x: windowW / 2,
+            y: 0,
+            xPercent: -50,
+            ease: Expo.easeInOut,
+            clearProps: 'all',
+            className: '-=' + CLASSES.containerClosed,
+            onUpdate: callback.bind(this, track),
+            // Fix IE: if the image is set to fixed when CLASSES.containerClosed
+            // is removed IE doesn't follow the tween, fix by setting
+            // the image position to fixed when tween is completed.
+            onComplete: function () {
+                $(this._container).addClass('card__container--fix-image');
+            }.bind(this)
+        });
+
+        return TL;
+    };
+
+    /**
+     * Clip image out.
+     * @private
+     */
+    Card.prototype._clipImageOut = function () {
+
+        var tween = this._clipImageIn();
+
+        tween.reverse();
+
+        return tween;
+    };
+
+    /**
+     * Slide content up.
+     * @private
+     */
+    Card.prototype._slideContentUp = function () {
+
+        var tween = TweenLite.to(this._content, 1, {
+            y: 0,
+            clearProps: 'all',
+            ease: Expo.easeInOut
+        });
+
+        return tween;
+    };
+
+    /**
+     * Close card.
+     */
+    Card.prototype.closeCard = function () {
+
+        TweenLite.to(this._container, 0.4, {
+            scrollTo: {
+                y: 0
+            },
+            onComplete: function () {
+                $(this._container).css('overflow', 'hidden');
+            }.bind(this),
+            ease: Power2.easeOut
+        });
+
+        this._TL.eventCallback('onReverseComplete', function () {
+
+            TweenLite.set([this._container, this._content], {
+                clearProps: 'all'
+            });
+
+            $(document.body).removeClass(CLASSES.bodyHidden);
+
+            this.isOpen = false;
+
+        }.bind(this));
+
+        return this._TL.reverse();
+    };
+
+    /**
+     * Hide card, called for all cards except the selected one.
+     */
+    Card.prototype.hideCard = function () {
+
+        var tween = TweenLite.to(this._el, 0.4, {
+            scale: 0.8,
+            autoAlpha: 0,
+            transformOrigin: 'center bottom',
+            ease: Expo.easeInOut
+        });
+
+        return tween;
+    };
+
+    /**
+     * Show card, called for all cards except the selected one.
+     */
+    Card.prototype.showCard = function () {
+
+        var tween = TweenLite.to(this._el, 0.5, {
+            scale: 1,
+            autoAlpha: 1,
+            clearProps: 'all',
+            ease: Expo.easeInOut
+        });
+
+        return tween;
+    };
+
+    return Card;
+
+})(window);

data/assets/js/modern-blog.js

@@ -0,0 +1,309 @@
+'use strict';
+
+/**
+ * Demo.
+ */
+var demo = (function (window) {
+
+    /**
+     * Enum of CSS selectors.
+     */
+    var SELECTORS = {
+        pattern: '.pattern',
+        card: '.card',
+        cardImage: '.card__image',
+        cardClose: '.card__btn-close'
+    };
+
+    /**
+     * Enum of CSS classes.
+     */
+    var CLASSES = {
+        patternHidden: 'pattern--hidden',
+        polygon: 'polygon',
+        polygonHidden: 'polygon--hidden'
+    };
+
+    var ATTRIBUTES = {
+        index: 'data-index',
+        id: 'data-id'
+    };
+
+    /**
+     * Map of svg paths and points.
+     */
+    var polygonMap = {
+        paths: null,
+        points: null
+    };
+
+    /**
+     * Container of Card instances.
+     */
+    var layout = {};
+
+    /**
+     * Initialise demo.
+     */
+    var init = function () {
+
+        // For options see: https://github.com/qrohlf/Trianglify
+        var pattern = Trianglify({
+            width: window.innerWidth,
+            height: window.innerHeight,
+            cell_size: 90,
+            variance: 1,
+            stroke_width: 1,
+            x_colors: 'random',
+            y_colors: 'random'
+        }).svg(); // Render as SVG.
+
+        _mapPolygons(pattern);
+
+        _bindCards();
+
+        _bindHashChange();
+
+        _triggerOpenCard('', _getHashFromURL(location.href));
+    };
+
+    /**
+     * Store path elements, map coordinates and sizes.
+     * @param {Element} pattern The SVG Element generated with Trianglify.
+     * @private
+     */
+    var _mapPolygons = function (pattern) {
+
+        // Append SVG to pattern container.
+        $(SELECTORS.pattern).append(pattern);
+
+        // Convert nodelist to array,
+        // Used `.childNodes` because IE doesn't support `.children` on SVG.
+        polygonMap.paths = [].slice.call(pattern.childNodes);
+
+        polygonMap.points = [];
+
+        polygonMap.paths.forEach(function (polygon) {
+
+            // Hide polygons by adding CSS classes to each svg path (used attrs because of IE).
+            $(polygon).attr('class', CLASSES.polygon);
+
+            var rect = polygon.getBoundingClientRect();
+
+            var point = {
+                x: rect.left + rect.width / 2,
+                y: rect.top + rect.height / 2
+            };
+
+            polygonMap.points.push(point);
+        });
+
+        // All polygons are hidden now, display the pattern container.
+        $(SELECTORS.pattern).removeClass(CLASSES.patternHidden);
+    };
+
+    /**
+     * Bind Card elements.
+     * @private
+     */
+    var _bindCards = function () {
+
+        var elements = $(SELECTORS.card);
+
+        $.each(elements, function (card, i) {
+
+            var instance = new Card(i, card);
+
+            layout[i] = {
+                card: instance
+            };
+
+            var $card = $(card);
+            $card.attr(ATTRIBUTES.index, i + '');
+
+            var cardImage = $card.find(SELECTORS.cardImage);
+            var cardClose = $card.find(SELECTORS.cardClose);
+
+            $(cardImage).on('click', function () {
+                location.hash = $card.attr(ATTRIBUTES.id);
+            });
+            $(cardClose).on('click', function () {
+                location.hash = '';
+            });
+        });
+    };
+
+    /**
+     * Create a sequence for the open or close animation and play.
+     * @param {boolean} isOpenClick Flag to detect when it's a click to open.
+     * @param {number} id The id of the clicked card.
+     * @private
+     *
+     */
+    var _playSequence = function (isOpenClick, id) {
+
+        var card = layout[id].card;
+
+        // Prevent when card already open and user click on image.
+        if (card.isOpen && isOpenClick) {
+            return;
+        }
+
+        // Create timeline for the whole sequence.
+        var sequence = new TimelineLite({paused: true});
+
+        var tweenOtherCards = _showHideOtherCards(id);
+
+        if (!card.isOpen) {
+            // Open sequence.
+
+            _setPatternBgImg($(this).find(SELECTORS.cardImage).find('image'));
+
+            sequence.add(tweenOtherCards);
+            sequence.add(card.openCard(_onCardMove), 0);
+
+        } else {
+            // Close sequence.
+
+            var closeCard = card.closeCard();
+            var position = closeCard.duration() * 0.8; // 80% of close card tween.
+
+            sequence.add(closeCard);
+            sequence.add(tweenOtherCards, position);
+        }
+
+        sequence.play();
+    };
+
+    /**
+     * Show/Hide all other cards.
+     * @param {number} id The id of the clcked card to be avoided.
+     * @private
+     */
+    var _showHideOtherCards = function (id) {
+
+        var TL = new TimelineLite;
+
+        var selectedCard = layout[id].card;
+
+        for (var i in layout) {
+
+            if (layout.hasOwnProperty(i)) {
+                var card = layout[i].card;
+
+                // When called with `openCard`.
+                if (card.id !== id && !selectedCard.isOpen) {
+                    TL.add(card.hideCard(), 0);
+                }
+
+                // When called with `closeCard`.
+                if (card.id !== id && selectedCard.isOpen) {
+                    TL.add(card.showCard(), 0);
+                }
+            }
+        }
+
+        return TL;
+    };
+
+    /**
+     * Add card image to pattern background.
+     * @param {Element} image The clicked SVG Image Element.
+     * @private
+     */
+    var _setPatternBgImg = function (image) {
+
+        var imagePath = $(image).attr('xlink:href');
+
+        $(SELECTORS.pattern).css('background-image', 'url(' + imagePath + ')');
+    };
+
+    /**
+     * Callback to be executed on Tween update, whatever a polygon
+     * falls into a circular area defined by the card width the path's
+     * CSS class will change accordingly.
+     * @param {Object} track The card sizes and position during the floating.
+     * @private
+     */
+    var _onCardMove = function (track) {
+
+        var radius = track.width / 2;
+
+        var center = {
+            x: track.x,
+            y: track.y
+        };
+
+        polygonMap.points.forEach(function (point, i) {
+
+            if (_detectPointInCircle(point, radius, center)) {
+                $(polygonMap.paths[i]).attr('class', CLASSES.polygon + ' ' + CLASSES.polygonHidden);
+            } else {
+                $(polygonMap.paths[i]).attr('class', CLASSES.polygon);
+            }
+        });
+    };
+
+    /**
+     * Detect if a point is inside a circle area.
+     * @private
+     */
+    var _detectPointInCircle = function (point, radius, center) {
+
+        var xp = point.x;
+        var yp = point.y;
+
+        var xc = center.x;
+        var yc = center.y;
+
+        var d = radius * radius;
+
+        return Math.pow(xp - xc, 2) + Math.pow(yp - yc, 2) <= d;
+    };
+
+    /**
+     * initialize page view according to hash
+     * @private
+     */
+    var _triggerOpenCard = function (fromId, toId) {
+        var getIndex = function (card) {
+            var index = $(card).attr(ATTRIBUTES.index);
+            return parseInt(index, 10);
+        };
+        if (fromId) {
+            var fromBlogCard = $('[' + ATTRIBUTES.id + '="' + fromId + '"]')[0];
+            if (fromBlogCard) {
+                _playSequence.call(fromBlogCard, false, getIndex(fromBlogCard));
+            }
+        }
+        if (toId) {
+            var toBlogCard = $('[' + ATTRIBUTES.id + '="' + toId + '"]')[0];
+            if (toBlogCard) {
+                _playSequence.call(toBlogCard, true, getIndex(toBlogCard));
+            }
+        }
+    };
+
+    var _getHashFromURL = function (url) {
+        var a = document.createElement('a');
+        a.href = url;
+        return a.hash.slice(1);
+    };
+
+    var _bindHashChange = function () {
+        window.addEventListener('hashchange', function (e) {
+            var newHash = _getHashFromURL(e.newURL);
+            var oldHash = _getHashFromURL(e.oldURL);
+            _triggerOpenCard(oldHash, newHash);
+        });
+    };
+
+    // Expose methods.
+    return {
+        init: init
+    };
+
+})(window);
+
+// Kickstart Demo.
+window.onload = demo.init;