JSFiddle - React, Tailwind, and code Playground

by craigm

HTML

<script src="http://fairwaylabs.com/wp-content/themes/woop/js/jquery.hammer.min.js?ver=1.0.4"></script>
<div id="container">
    <div class="page-header">
         <h1>jquery.hammer.js</h1>

    </div>
    <div class="hero-unit">
        <div class="toucharea">
             <h1>Touch me</h1>

            <p>The tap event will be fired. Notice in the sourcecode that event delegation
                is also supported.
                <br>In the console you can see the event data.</p>
             <h4>List items with stopPropagation</h4>

            <ul id="items">
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
                <li>List item 4</li>
                <li>List item 5</li>
            </ul>
            <p> <a href="#" id="add-list-item" class="btn btn-success">Add list item</a>

            </p>
        </div>
    </div>
</div>

CSS

@keyframes highlight {
            0% {
                background: rgba(255, 240, 140, 1);
            }
            100% {
                background: rgba(255, 240, 140, 0);
            }
        }
        @-moz-keyframes highlight {
            0% {
                background: rgba(255, 240, 140, 1);
            }
            100% {
                background: rgba(255, 240, 140, 0);
            }
        }
        @-webkit-keyframes highlight {
            0% {
                background: rgba(255, 240, 140, 1);
            }
            100% {
                background: rgba(255, 240, 140, 0);
            }
        }
        body {
            padding: 0;
        }
        #container {
            padding: 20px;
        }
        .highlight {
            background: #fff68d;
        }
        .hero-unit {
            padding: 0;
        }
        .toucharea {
            padding: 30px;
        }

JavaScript

function highlight(el) {
    setTimeout(function () {
        el.className = el.className.replace("highlight", "");
    }, 100);
    el.className = el.className + " highlight";
}

var hammertime = $(".toucharea").hammer();
console.log(hammertime);

// the whole area
hammertime.on("touch", function (ev) {
    if (window.console) {
        console.log(ev);
    }
    highlight(this);
});

// on elements in the toucharea, with a stopPropagation
hammertime.on("touch", "li", function (ev) {
    if (window.console) {
        console.log('nested', ev);
    }
    highlight(this);
    ev.stopPropagation();
});


// on dynamic items
$("#add-list-item").on("touch", function (ev) {
    $("#items").append("<li>Dynamic added listitem</li>");
    ev.gesture.preventDefault();
    ev.stopPropagation();
});