Custom Elements BOOM

by ddrraaggaa

HTML

<script src="https://cdn.rawgit.com/developit/a6611b33841a15c0e992/raw/0d30b8293333b599d97391b9400040fdc68760d3/custom-elements.js"></script>
<grumpy-wizard>
    <div>
        <h2>Thing 1</h2>
        <p>blah blah</p>
    </div>
    <div>
        <h2>Thing 2</h2>
        <p>foo bar</p>
    </div>
    <div>
        <h2>Thing 3</h2>
        <img width="280" src="http://slodive.com/wp-content/uploads/2014/03/funny-bab.jpg"/>
    </div>
</grumpy-wizard>


<template element="grumpy-wizard">
    <div id="root">
        <content></content>
    </div>
    <style>
        :host {
            white-space: nowrap;
            overflow: hidden;
        }

        #root {
            position: relative;
            height: 100%;
            white-space: nowrap;
            overflow: visible;
            transition: transform 200ms ease;
        }

        ::content > * {
            float: none;
            display: inline-block;
            width: 100%;
            height: 100%;
            white-space: normal;
            overflow: hidden;
        }
    </style>
    
    <script>{
        setIndex: function(index) {
            var root = this.shadowRoot.querySelector('#root'),
                count = root.children.length;
            root.style.transform = 'translateX('+(-index/count*100)+'%)';
        }
    }</script>
</template>

SCSS

html, body { background:#EEE; font-family:arial; }
template { display:none; }

grumpy-wizard {
    display: block;
    width: 300px;
    height: 300px;
    margin: auto;
    padding: 5px;
    background: #FFF;
    border: 1px solid #AAA;
    border-radius: 3px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}

JavaScript

/**
Custom Elements.
https://gist.github.com/developit/a6611b33841a15c0e992
*/

var index = 0;
setInterval(function() {
    var wiz = document.querySelector('grumpy-wizard');
    wiz.setIndex( ++index % 3 );
}, 1500);