VAADIN.addons.masonry.js.masonry_connector.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of vaadin-masonry-cards Show documentation

A Vaadin 7 component for displaying Image Cards in a Masonry Layout

There is a newer version: 1.2

window.com_github_lotsabackscatter_masonry_Masonry = function() {
    var that = this;
    var thisElement = $(this.getElement());
    var animated = [];

    var $container = $('');
    $container.appendTo(thisElement);

    this.addCard = function(id, title, description, href, colour) {
        if(!colour) colour = '#FFF';
        var card = $('');
        card.appendTo($container);

        var cardimage = $('');
        card.click(function() {
            that.onClick(id);
        });
        cardimage.appendTo(card);

        $('').appendTo(cardimage);
        var summary = $('' + title + '');
        summary.appendTo(cardimage);

        var desc = $('' +  description +'');
        desc.appendTo(card);

        that.reMasonry();
    };

    this.reMasonry = function () {
        $(document).ready(function () {
            try {
                new Masonry('.content');
                doScrollAnimation(null);
                setupScrolling();
            } catch (e) {
                console.log('Could not find the masonry component. Trying again.')
                setTimeout(that.reMasonry, 100);
            }
        });
    };

    $(document).ready(function () {
        that.reMasonry();
    });

    this.onStateChange = this.reMasonry;

    /***** Animation Setup *****/
    function addAnimation(el, animation) {
        if(!animation){
            return;
        }

        el.addClass("animated " + animation);
        el.attr("visibility", "visible");
        el.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
            el.removeClass("animated " + animation);
        });
    }

    function setupScrolling() {
        var lastScrollTop = 0;
        // TODO Will get events for any scroll pane. Probably overkill :S
        $('.v-scrollable').scroll(function(event){
           var st = $(this).scrollTop();
           if (st > lastScrollTop){
               // downscroll code
               doScrollAnimation("fadeInUp");
           } else {
              // upscroll code
               //doScrollAnimation("fadeInDown");
               doScrollAnimation(null);
           }
           lastScrollTop = st;
        });
    }

    function doScrollAnimation(animation) {
        $(".card").each(function (i, oel) {
            var el = $(oel);
            if (el.visible(true)) {
                if(!animated.contains(oel)) {
                    animated.push(oel);
                    addAnimation(el, animation);
                }
            } else {
                animated.removeAll(oel);
            }
        });
    }

};