JSFiddle - React, Tailwind, and code Playground

by Ryan Duffy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js???"></script>

JavaScript

enyo.kind({
    name:"Verse",
    kind:"Control",
    published:{
        words:"",
        index:-1
    }
    // var stuff = "<span class='quote current'>"+words.join("</span><span class='quote future'>")+"</span>";
});

enyo.kind({
    name:"Isotope",
    kind:"Control",
    published:{
        words:"",
        index:-1
    },
    rendered:function() {
        this.inherited(arguments);
        
        var n = this.hasNode();
        if(n) {
            this.$container = $(n);
            this.$container.isotope({
                masonry: {
                    columnWidth: 6
                },
                getSortData: {
                    index: function($item) {
                        return $item.index();
                    }
                },
                sortBy: 'index'
            });
            
            this.wordsChanged();
        }
    },
    wordsChanged:function() {
        if(!this.$container || !this.words) return;
        
        var $items = $('<div class="item">'+this.words.join('</div><div class="item">') +'</div>');
        // load clickable words
        $container.prepend($items).isotope('reloadItems').isotope({
            sortBy: 'original-order'
        });

       $items.click(wordClicked);
    }
});

enyo.kind({
    name:"Memorizer",
    kind:"Control",
    published:{
        verse:"This is a test of the emergency broadcast system I repeat this is only a test",
    },
    components:[
        {name:"verse", kind:"Verse"},
        {name:"iso", kind:"Isotope"}
    ],
    create:function() {
        this.inherited(arguments);
        
        this.verseChanged();
    },
    verseChanged:function() {
        if(!this.verse) return;
        
        var words = this.verse.split(" ");
        
    }
});

/*
        $('#prepend-items').click(function() {

    });


    $('#shuffle-items').click(function() {

        $container.isotope('reloadItems').isotope({
            sortBy: 'random'
        });

    });
*/
   ...