orbit4-5/app/assets/javascripts/group.js

(function() {
    "use strict";

    // Commonly use variables
    var doc = document;

    var group = {
        // Detect and change the top position of the cycle navs
        cycleFix: function() {
            if (doc.querySelectorAll(".group-show-post-banner-image").length >= 1) {
                var imgs = doc.querySelectorAll(".group-post-banner-image"),
                    cycleNav = doc.querySelectorAll(".cycle-nav"),
                    len = cycleNav.length,
                    i = -1;


                // Hide the navs when there's noly one slide
                if (imgs.length <= 1) {
                    for (i = 0; i < len; i++) {
                        cycleNav[i].classList.add("hide");
                    }
                }

            } else if (doc.querySelectorAll(".group-show-post-banner-image").length === 0 && doc.querySelector(".group-show-post-image-wrap")) {
                doc.querySelector(".group-show-post-image-wrap").classList.add("hide");
            }
        },
        // Create scroll effect (with css)
        scrollEffect: function() {
            if (doc.querySelector(".group-post")) {
                var post = doc.querySelector(".group-post"),
                    wrap = doc.querySelector(".group-post-banner-image-wrap"),
                    scrollClass = "scroll";

                // Use pageYOffset to get the Y positoin and add scroll on it, the animation
                // is done by css transition
                window.addEventListener("scroll", function() {
                    if (window.pageYOffset > 0) {
                        post.classList.add(scrollClass);
                    } else {
                        post.classList.remove(scrollClass);
                    }
                }, false);
            }
        },
        // Equal height for card
        equalHeight: function() {
            var bigbrother = -1,
                $card = $('.group-card-inner');

            $card.each(function() {
                bigbrother = bigbrother > $(this).height() ? bigbrother : $(this).height();
            });

            $card.each(function() {
                $(this).height(bigbrother);
            });
        },
        // We want to place a dropdown in group-post-item, but link cannot be nested, hance this fix
        makePostClick: function() {
            var postLink = doc.querySelectorAll('.group-post-link');

            if (postLink) {
                Array.prototype.forEach.call(postLink, function(item) {
                    item.parentNode.classList.add('clickable');
                    item.parentNode.addEventListener('click', function(e) {
                        window.location.href = item.href;
                    });
                });
            }
        },
        // Bootstrap dropdown is too much of a hassle, using this instead
        makeDropdown: function() {
            var $post = $('.group-post'),
                $toggle = $('.group-post-dropdown-toggle'),
                $dropdown = $post.find('.group-post-dropdown'),
                klass = 'open';
            $toggle.click(function() {
                $toggle.removeClass(klass);
                $dropdown.removeClass(klass);
                $(this)
                    .addClass(klass)
                    .next('.group-post-dropdown')
                    .toggleClass(klass)
                return false;
            });
            $post.click(function() {
                $toggle.removeClass(klass)
                $dropdown.removeClass(klass);
            });
        },

        // Third-party plugin settings
        plugins: function() {
            // WOWjs
            if (typeof window.WOW !== 'undefined') {
                new WOW().init();
            }
        }
    }

    // When DOM is completely loaded, execute these functions
    document.addEventListener("DOMContentLoaded", function(event) {

        if (doc.querySelector('.group-post')) {
            group.scrollEffect();
            group.makePostClick();
            group.makeDropdown();
        }

        group.cycleFix();
        group.equalHeight();
        group.plugins();
    });

})();