From 8480bd6c59dae23b316cde92e00422ef6e614875 Mon Sep 17 00:00:00 2001
From: Joshua Seigler <github@joshua.seigler.net>
Date: Sun, 8 May 2016 16:24:32 -0400
Subject: [PATCH] use new coinmarket API

---
 .gitignore |   1 +
 index.html | 235 +++++++++++++++++++++++++++++++----------------------
 2 files changed, 139 insertions(+), 97 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2ccbe46..100a0cd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 /node_modules/
+/.brackets.json
diff --git a/index.html b/index.html
index 63c7ec1..4c59218 100644
--- a/index.html
+++ b/index.html
@@ -15,114 +15,155 @@
 
     <h1>Dash Price Widget</h1>
 
-    <style type="text/css">/* Micro reset so global styles don't interfere */
+<style type="text/css">/* Micro reset so global styles don't interfere */
 
-    .dash-ticker,
-    .dash-ticker *,
-    .dash-ticker *:before,
-    .dash-ticker *:after {
-        box-sizing: inherit;
-        vertical-align: baseline;
-        font-weight: inherit;
-        font-family: inherit;
-        font-style: inherit;
-        font-size: 100%;
-        border: 0 none;
-        outline: 0;
-        padding: 0;
-        margin: 0;
-        line-height: 1;
-    }
+[data-dash-price-widget],
+[data-dash-price-widget] *,
+[data-dash-price-widget] *:before,
+[data-dash-price-widget] *:after {
+    box-sizing: inherit;
+    vertical-align: baseline;
+    font-weight: inherit;
+    font-family: inherit;
+    font-style: inherit;
+    font-size: 100%;
+    border: 0 none;
+    outline: 0;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+}
 
-    .dash-ticker {
-        display: block;
-        max-width: 20em;
-        margin: 0.5em auto;
-        border-radius: 0.5em;
-        background-color: #1D76BC;
-        box-sizing: border-box;
-        color: white;
-        padding: 0.5em;
-        font-family: serif;
-    }
+[data-dash-price-widget] {
+    display: block;
+    max-width: 18em;
+    margin: 0.5em auto;
+    border-radius: 0.5em;
+    background-color: #1D76BC;
+    box-sizing: border-box;
+    color: white;
+    padding: 0.5em;
+    font-family: serif;
+}
 
-    .dash-ticker .dash-ticker--title {
-        font-size: 2em;
-        float: left;
-        height: 1em;
-        width: 1em;
-        overflow: hidden;
-        text-indent: -999px;
-        background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjI2Ljc3N3B4IiBoZWlnaHQ9IjIyNi43NzdweCIgdmlld0JveD0iMCAwIDIyNi43NzcgMjI2Ljc3NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjI2Ljc3NyAyMjYuNzc3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTEzLjM4OCwwQzUwLjc2NiwwLDAsNTAuNzY2LDAsMTEzLjM4OGMwLDYyLjYyMyw1MC43NjYsMTEzLjM4OSwxMTMuMzg5LDExMy4zODkKCWM2Mi42MjMsMCwxMTMuMzg5LTUwLjc2NiwxMTMuMzg5LTExMy4zODlDMjI2Ljc3Nyw1MC43NjYsMTc2LjAxMSwwLDExMy4zODgsMHogTTU2LjU2MiwxMDQuODAyaDQ1LjI2NmwtNS4yMzgsMTcuMDI0SDUxLjMyNgoJTDU2LjU2MiwxMDQuODAyeiBNMTczLjgzLDk2Ljc3M2MtMS44MDEsNi41MDYtNy42NTYsMjYuMDIzLTEwLjA1OSwzMi45NDVjLTIuNCw2LjkyMi02LjgyOSwxMi43MzQtMTIuNTA2LDE2LjA1NwoJYy01LjY3NiwzLjMyMy03Ljc5Nyw0LjcxMi0xNS43MzEsNC43MTJINTQuMzAzbDUuNzIxLTE4LjU0Mmg3Ni4zOTVsMTEuNDE0LTM3LjEwOWgtNzUuNzlsNS43MjItMTguNTQxYzAsMCw4My42OTgsMCw4NC41NzcsMAoJYzMuODc1LDAsOC45OTYsMS43OTIsMTEuNDg4LDYuNjM5QzE3Ni4zMjEsODcuNzc1LDE3NS42MjksOTAuMjY3LDE3My44Myw5Ni43NzN6Ii8+Cjwvc3ZnPgo=");
-        background-size: 100% 100%;
-    }
+[data-dash-price-widget] .dash-ticker--title {
+    font-size: 3em;
+    float: left;
+    height: 1em;
+    width: 1em;
+    overflow: hidden;
+    text-indent: -999px;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iMjI2Ljc3N3B4IiBoZWlnaHQ9IjIyNi43NzdweCIgdmlld0JveD0iMCAwIDIyNi43NzcgMjI2Ljc3NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjI2Ljc3NyAyMjYuNzc3IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMTEzLjM4OCwwQzUwLjc2NiwwLDAsNTAuNzY2LDAsMTEzLjM4OGMwLDYyLjYyMyw1MC43NjYsMTEzLjM4OSwxMTMuMzg5LDExMy4zODkKCWM2Mi42MjMsMCwxMTMuMzg5LTUwLjc2NiwxMTMuMzg5LTExMy4zODlDMjI2Ljc3Nyw1MC43NjYsMTc2LjAxMSwwLDExMy4zODgsMHogTTU2LjU2MiwxMDQuODAyaDQ1LjI2NmwtNS4yMzgsMTcuMDI0SDUxLjMyNgoJTDU2LjU2MiwxMDQuODAyeiBNMTczLjgzLDk2Ljc3M2MtMS44MDEsNi41MDYtNy42NTYsMjYuMDIzLTEwLjA1OSwzMi45NDVjLTIuNCw2LjkyMi02LjgyOSwxMi43MzQtMTIuNTA2LDE2LjA1NwoJYy01LjY3NiwzLjMyMy03Ljc5Nyw0LjcxMi0xNS43MzEsNC43MTJINTQuMzAzbDUuNzIxLTE4LjU0Mmg3Ni4zOTVsMTEuNDE0LTM3LjEwOWgtNzUuNzlsNS43MjItMTguNTQxYzAsMCw4My42OTgsMCw4NC41NzcsMAoJYzMuODc1LDAsOC45OTYsMS43OTIsMTEuNDg4LDYuNjM5QzE3Ni4zMjEsODcuNzc1LDE3NS42MjksOTAuMjY3LDE3My44Myw5Ni43NzN6Ii8+Cjwvc3ZnPgo=");
+    background-size: 100% 100%;
+}
 
-    #dash-ticker--price-container {
-        font-size: 2em;
-        text-align: center;
-    }
+[data-dash-price-widget]  .dash-ticker--wrapper {
+    margin-left: 3.5em;
+}
 
-    #dash-ticker--price-container > input {
-        position: fixed;
-        right: -200px;
-    }
+[data-dash-price-widget] .dash-ticker--usd {
+    font-size: 2em;
+    text-align: center;
+}
 
-    #dash-ticker--price-container > input + label {
-        display: none;
-        cursor: pointer;
-    }
+[data-dash-price-widget] .dash-ticker--usd-change {
+    text-align: right;
+}
 
-    #dash-ticker--price-container > input:checked + label {
-        display: block;
-    }
-    </style>
-    <form class="dash-ticker">
-        <div class="dash-ticker--title">Dash Price</div>
-        <div id="dash-ticker--price-container" title="Click to change currency">
-            <input type="radio" name="currency" id="USD" checked />
-            <label>
-                <span class="dash-ticker--price">Loading...</span>
-                <span class="dash-ticker--currency"></span>
-            </label>
-        </div>
-    </form>
-    <script type="application/javascript">(function () {
-        "use strict";
+[data-dash-price-widget] .dash-ticker--btc {
+    text-align: left;
+    margin-top: -1em;
+}
+</style>
+<div data-dash-price-widget=""></div>
+<script type="application/javascript">(function () {
+    "use strict";
 
-        function fetchJSONFile(path, callback) {
-            var httpRequest = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
-            httpRequest.onreadystatechange = function () {
-                if (httpRequest.readyState === 4) {
-                    if (httpRequest.status === 200) {
-                        var data = JSON.parse(httpRequest.responseText);
-                        if (callback) { callback(data); }
-                    }
+    function fetchJSONFile(path, callback) {
+        var httpRequest = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
+        httpRequest.onreadystatechange = function () {
+            if (httpRequest.readyState === 4) {
+                if (httpRequest.status === 200) {
+                    var data = JSON.parse(httpRequest.responseText);
+                    if (callback) { callback(data); }
                 }
-            };
-            httpRequest.open('GET', path);
-            httpRequest.send();
-        }
+            }
+        };
+        httpRequest.open('GET', path);
+        httpRequest.send();
+    }
 
-        function updatePrices() {
-            // this requests the Dash price JSON and executes a callback with the parsed result once it is available
-            fetchJSONFile('https://coinmarketcap-nexuist.rhcloud.com/api/dash/price', function (data) {
-                var keys = Object.keys(data),
-                    currencyListHTML = "";
-                for (var i = 0; i < keys.length; i++) {
-                    var thisCurrency = keys[i];
-                    var nextCurrency = keys[(i < keys.length - 1 ? i + 1 : 0)];
-                    var currencyValue = data[keys[i]];
-                    var currencyString = (currencyValue.toPrecision(3).length > currencyValue.toFixed(2) ? currencyValue.toPrecision(3) : currencyValue.toFixed(2));
-                    currencyListHTML += '<input type="radio" name="currency" id="dash-ticker-currencies-' + thisCurrency + '"' + (i === 0 ? ' checked' : '') + ' /><label for="dash-ticker-currencies-' + nextCurrency + '"><span class="dash-ticker--price">' + currencyString + '</span> <span class="dash-ticker--currency">' + thisCurrency.toUpperCase() + '</span></label>';
-                }
-                document.getElementById('dash-ticker--price-container').innerHTML = currencyListHTML;
-            });
-        }
+    function makeCurrencyString(number) {
+        // return 3 significant figures or two decimal places, whichever is longer.
+        return (number.toPrecision(3).length > number.toFixed(2) ? number.toPrecision(3) : number.toFixed(2));
+    }
 
-        updatePrices(); // update prices now
-        setInterval(updatePrices, 5 * 60 * 1000); // ...and every five minutes after this
-    })();
-    </script>
+    function updatePrices() {
+        // this requests the Dash price JSON and executes a callback with the parsed result once it is available
+        fetchJSONFile('https://coinmarketcap-nexuist.rhcloud.com/api/dash/', function (data) {
+            var markup = '<div class="dash-ticker--title">Dash Price</div><div class="dash-ticker--wrapper"><div class="dash-ticker--usd">!price_usd</div><div class="dash-ticker--usd-change">!percent_change_24h</div><div class="dash-ticker--btc">!price_btc</div></div>';
+
+/*
+{
+    "symbol":"dash",
+    "position":"5",
+    "name":"Dash",
+    "market_cap":{
+        "usd":42443061.2936,
+        "eur":37214670.34508659,
+        "cny":275818610.627892,
+        "gbp":29413847.89462938,
+        "cad":54771497.307551995,
+        "rub":2800409354.958081,
+        "hkd":329415538.6572049,
+        "jpy":4545448180.293412,
+        "aud":57612508.5013617,
+        "btc":92474.6576981
+    },
+    "price":{
+        "usd":6.59801,
+        "eur":5.78522754014,
+        "cny":42.87753747356,
+        "gbp":4.572546292190001,
+        "cad":8.5145339647,
+        "rub":435.33921364181,
+        "hkd":51.20947810952,
+        "jpy":706.6152071500101,
+        "aud":8.95618496007,
+        "btc":0.0143757
+    },
+    "supply":"6432706",
+    "volume":{
+        "usd":300399,
+        "eur":263394.048786,
+        "cny":1952159.723844,
+        "gbp":208182.21458100004,
+        "cad":387655.89753,
+        "rub":19820440.472018998,
+        "hkd":2331502.379448,
+        "jpy":32171291.285198998,
+        "aud":407763.70539300004,
+        "btc":654.506
+    },
+    "change":"-3.01",
+    "timestamp":"1462626382.036"
+}
+*/
+
+            console.log(data);
+            if (data) {
+                markup = markup.replace(/!price_usd/g, makeCurrencyString(data.price.usd) + " USD");
+                markup = markup.replace(/!percent_change_24h/g, data.change + "%");
+                markup = markup.replace(/!price_btc/g, makeCurrencyString(data.price.btc) + " BTC");
+                document.querySelector('[data-dash-price-widget]').innerHTML = markup;
+            }
+        });
+    }
+
+    updatePrices(); // update prices now
+    setInterval(updatePrices, 5 * 60 * 1000); // ...and every five minutes after this
+}());
+</script>
 
     <script src="http://gist-it.appspot.com/https://github.com/seigler/Dash-html-ticker/blob/master/dist/index.html"></script>