JSFiddle - React, Tailwind, and code Playground

by dipish

HTML

<script src="//cdn.jsdelivr.net/prefixfree/1.0.7/prefixfree.dynamic-dom.min.js"></script>
<div id="conceal" class="concealjs">
    <section class="slide">
        <div class="slide-contents">
            <h1>Hello!</h1>
            In the talk:
            <ul>
                <li>Basic javascript concepts</li>
                <li>Web performance</li>
                <li>Slide show PoC</li>
                <li>GitHub viewer PoC</li>
            </ul>
        </div>
    </section>
    
    <section class="slide">
        <div class="slide-contents">
            <h1>Basic JavaScript concepts</h1>
            Prototype inheritance, this, closures, etc.
        </div>
    </section>
    
    <section class="slide">
        <div class="slide-contents">
            <h1>Web performance</h1>
            See <a href="http://bit.ly/pageload-mindmap">bit.ly/pageload-mindmap</a>
        </div>
    </section>
    
    <section class="slide">
        <div class="slide-contents">
            <h1>Slide show PoC</h1>
            You're using it right now!
        </div>
    </section>
    
    <section class="slide">
        <div class="slide-contents">
            <h1>GitHub viewer PoC</h1>
            <a href="http://jsfiddle.net/dipish/tm77k/" target="_blank">
                Organization repository lister
            </a>
        </div>
    </section>
    
    <section class="slide">
        <div class="slide-contents">
            <h1>Thank you!</h1>
            <a href="http://dpashk.com" target="_blank">Dmitry Pashkevich</a>
        </div>
    </section>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.concealjs {
    position: relative;
    width: 100%;
    height: 100%;
}
    .concealjs .slide {
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        display: none;
    }
    .concealjs .slide.active {
        display: flex;
    }

JavaScript

// RepoLister plugin
function Conceal(container) {
    this.$container = $(container);

    this.initDom();
    this.initListeners();
}
Conceal.prototype = {
    constructor: Conceal,
    
    slideSelector: '.slide',
    
    initDom: function() {
        // TODO fixme make flexible
        this.setActiveSlide($(this.slideSelector).first());
    },
    
    setActiveSlide: function($el) {
        if(typeof $el == 'number') {
            $el = $(this.slideSelector).eq($el);
            if(!$el.length) {
                return;
            }
        }
        $(this.slideSelector).removeClass('active');
        $el.addClass('active');
        this.$currentSlide = $el;
        this.currentSlideIndex = $el.index(this.slideSelector);
        window.location.hash = '#' + this.currentSlideIndex;
    },
    
    initListeners: function() {
        $('body').on('keydown', this.onKeyPress.bind(this));
        $('window').on('hashchange', this.onHashChange.bind(this));
    },
    
    onKeyPress: function(e) {
        var which = e.which,
            handleAction = true;

        if (which == 32 || which == 39 || which == 40 || which == 34) { // space or down or right
            this.nextSlide();
        } else if (which == 38 || which == 37 || which == 33) { // up or left or pgup
            this.prevSlide();
        } else if (which == 36) { // home
            this.firstSlide();
        } else if (which == 35) { // end
            this.lastSlide();
        } else {
            handleAction = false;
        }
        
        if(handleAction) {
            e.preventDefault();
        }
    },
    
    onHashChange: function(newUrl, oldUrl) {
        var hash = window.location.hash.substr(1);
        if(hash != this.currentSlideIndex) {
            this.setActiveSlide(this.currentSlideIndex);
        }
    },
    
    nextSlide: function() {
        var $slide = this.$currentSlide.next(this.slideSelector);
        $slide.length && this.setActiveSlide($slide);
    },
    ...