Repeater Sample

Using a repeater author(s): Roy Sutton

by gorillawit

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.8/TweenMax.min.js"></script>
<script>
new RepeaterSample().renderInto(document.body);
</script>

CSS

.outer{
    width: 600px;
    background: brown;
    position: relative;
    border: 5px inset pink;
    left: 0;
    overflow-x: hidden !important;
}

.card{
    border: 1px solid black;
    background: #666666;
    height: 200px;
    margin: 3%;
    width: 150px
}

.header{
    margin: 20px;
}

JavaScript

enyo.kind({
    name: "RepeaterSample",
    classes: "outer",
    kind: "Scroller",
    components: [{
        kind: "Repeater",
        count: 100,
        components: [{
            components: [
                { name: "text", components: [
                    {name: "header", classes: "header"},
                    {name: "subhead"}
                ]},
                ]
        }],
        onSetupItem: "setupItem",
        ontap: "tapped"
    }],
    setupItem: function(inSender, inEvent) {
        var a = true;
        var item = inEvent.item;
        item.$.header.setContent(inEvent.index);
        item.$.subhead.setContent("Lorem ipsum dolor aliquam expedita consectetur voluptatem impedit fug");
        item.$.text.applyStyle("float", "left");
        item.$.text.setClasses("card");
        return(true);
    },
    tapped: function(inSender, inEvent) {
        enyo.log(inEvent);
        var outerbox = document.getElementById("repeaterSample");
        var currentX = outerbox.style.left
// document.getElementById("repeaterSample_repeater_ownerProxy_text");
            if (outerbox.style.left <= "currentX"){
                outerbox.selectable = false;
                TweenLite.to(outerbox, .5, {"left":"+=20", "borderRadius":"+=10"});
            }
            else {
                outerbox.selectable = false;
                TweenLite.to(outerbox, .5, {"left":"-=20", "borderRadius":"-=10"});
// onComplete:myFunction, onCompleteParams:[photo]});
       }
    }
});