TheButton Sim

Complete Sim of /r/thebutton behavior.

by Ben Wochinski

HTML

<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1.1&#39;,&#39;packages&#39;:[&#39;corechart&#39;]}]}"></script>
<script src="https://www.google.com/uds/api/visualization/1.1/8fd8705917b3fff8516953452d62ef07/format+en,default+en,ui+en,corechart+en.I.js"></script>
<div class="thebutton-wrap active">
    <form class="thebutton-form">
        <div class="thebutton-counter"><span class="thebutton-participants">7,307,562,940</span>  <span class="thebutton-participants-description"> participants</span>

        </div>
         <h1>the button</h1>

        <div class="thebutton-container locked active">
            <button id="thebutton" title="BUTTON PRESS BUTTON PRESS IT BUTTON THE BUTTON PRESS IT PRESS THE BUTTON BUTTON BUTTON PRESS IT THE BUTTON THE BUTTON PRESS BUTTON IT PRESS IT THE BUTTON PRESS IT NOW">[you feel an overwhelming urge to press the button]</button>
        </div>
        <div class="thebutton-pie-container pulse2">
            <div class="thebutton-pie">
                <div style="position: relative;">
                    <div dir="ltr" style="position: relative; width: 70px; height: 70px;">
                        <div aria-label="A chart." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                            <svg width="70" height="70" aria-label="A chart." style="overflow: hidden;">
                                <defs id="defs"></defs>
                                <rect x="0" y="0" width="70" height="70" stroke="none" stroke-width="0" fill="#ffffff"></rect>
                                <g>
                                    <path d="M35,35L35,0A35,35,0,0,1,58.959148707504106,9.486098040250596L35,35A0,0,0,0,0,35,35" stroke="none" stroke-width="0" fill="#c8c8c8"></path>
                                </g>
                                <g>
                                    <path...

CSS

.thebutton-wrap {
    text-align:center
}
.thebutton-wrap h1 {
    text-align:left;
    line-height:30px;
    margin:0;
    font-size:24px;
    padding:0
}
.active .thebutton-form {
    background-image:radial-gradient(50% 125%, #ffffff 25%, rgba(255, 255, 255, 0) 100%);
    box-shadow:0px 3px 10px 0px rgba(0, 0, 0, 0.05)
}
.thebutton-form {
    background:#FAFAFA;
    border:1px solid #E0E0E0;
    font-family:Georgia;
    color:#4A4A4A;
    display:inline-block;
    padding:20px;
    margin:10px auto
}
.thebutton-pie-container, .thebutton-container {
    position:relative;
    float:left;
    margin-top:15px;
    margin-left:15px;
    background:#eaeaea;
    border:1px solid #E0E0E0;
    box-shadow:inset 0px 1px 1px 0px rgba(73, 73, 73, 0.1);
    border-radius:5px
}
.thebutton-pie-container {
    border-radius:50%;
    margin-top:-5px
}
.thebutton-container {
    min-height:60px;
    min-width:190px
}
.thebutton-container.denied:before, .thebutton-container.locked:before, .thebutton-container.unlocking:before, .thebutton-container.denied:after, .thebutton-container.locked:after, .thebutton-container.unlocking:after {
    cursor:pointer;
    text-align:center;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border-radius:5px;
    z-index:100;
    transform:translate(0, 0) scale(1, 1);
    background-position:center center;
    background-repeat:no-repeat;
    transition:all 0.2s;
    opacity:1;
    line-height:60px;
    font-size:14px
}
.thebutton-container.denied:before, .thebutton-container.locked:before, .thebutton-container.unlocking:before {
    content:'';
    display:block
}
.thebutton-container.denied:before {
   ...

JavaScript

r = {
    debug: function (p) {
        console.log(p);
    },
    thebutton: {
        _setTimer: function (e) {
            var t = "00000",
                n = (e > 0 ? e : 0).toString(),
                i = t.substring(0, t.length - n.length) + n;
            for (var s = 0; s < 4; s++) {
                r.thebutton._timerTextNodes[s].nodeValue = i[s];
            }
            e % 100 === 0 && r.thebutton._drawPie(e, 6e4);
        },
        _countdown: function () {
            r.thebutton._setTimer(r.thebutton._msLeft);
            r.thebutton._msLeft = Math.max(0, r.thebutton._msLeft - 10);
            if (r.thebutton._msLeft == 0) {
                r.thebutton._onJustExpired(0);
                r.thebutton._onExpired(0);
            }
        },
        init: function () {
            if ($("#thebutton").length === 0) return;
            this._chart = new google.visualization.PieChart($(".thebutton-pie").get(0));
            this._msLeft = 0;
            this._msgSecondsLeft = 0;
            this._tickTime = "";
            this._tickMac = "";
            this._lastMsLeft = Infinity;
            this._timerTextNodes = [
            $("#thebutton-s-10s").get(0).childNodes[0],
            $("#thebutton-s-1s").get(0).childNodes[0],
            $("#thebutton-s-100ms").get(0).childNodes[0],
            $("#thebutton-s-10ms").get(0).childNodes[0]];
            r.debug("in r.thebutton.init()");
            this._started = !1;
            r.thebutton._drawPie(60000, 6e4);

            var e = $("#thebutton").parent();
            e.on("click", function (e) {
                var t = $(this);
                t.is(".active.locked") && (t.addClass("unlocking").removeClass("locked"), setTimeout(function () {
                    t.removeClass("unlocking").addClass("unlocked")
                }, 300))
            });
            $("#thebutton").on("click", function (t) {
                t.preventDefault(), t.stopPropagation();
                if (e.hasClass("pressed"))...