From 7afabe0f34e8413228454e767979b922cf0ff8c9 Mon Sep 17 00:00:00 2001
From: Joshua Seigler <github@joshua.seigler.net>
Date: Sun, 8 May 2016 16:23:26 -0400
Subject: [PATCH] use new coinmarketcap API

---
 assets/index.html        |  11 +---
 assets/scripts/app.js    |  73 +++++++++++++++++++----
 assets/styles/styles.css |  37 ++++++------
 dist/index.html          | 121 ++++++++++++++++++++++++++-------------
 package.json             |   2 +-
 5 files changed, 163 insertions(+), 81 deletions(-)

diff --git a/assets/index.html b/assets/index.html
index 0b7e281..93b2674 100644
--- a/assets/index.html
+++ b/assets/index.html
@@ -1,12 +1,3 @@
 <link rel="stylesheet" type="text/css" href="styles/styles.css" />
-<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>
+<div data-dash-price-widget=""></div>
 <script type="application/javascript" src="scripts/app.js"></script>
diff --git a/assets/scripts/app.js b/assets/scripts/app.js
index 0e0afa1..61d6eb2 100644
--- a/assets/scripts/app.js
+++ b/assets/scripts/app.js
@@ -15,22 +15,73 @@
         httpRequest.send();
     }
 
+    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));
+    }
+
     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>';
+        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;
             }
-            document.getElementById('dash-ticker--price-container').innerHTML = currencyListHTML;
         });
     }
 
     updatePrices(); // update prices now
     setInterval(updatePrices, 5 * 60 * 1000); // ...and every five minutes after this
-})();
+}());
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 611ff7d..169e956 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -1,9 +1,9 @@
 /* Micro reset so global styles don't interfere */
 
-.dash-ticker,
-.dash-ticker *,
-.dash-ticker *:before,
-.dash-ticker *:after {
+[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;
@@ -17,9 +17,9 @@
     line-height: 1;
 }
 
-.dash-ticker {
+[data-dash-price-widget] {
     display: block;
-    max-width: 20em;
+    max-width: 18em;
     margin: 0.5em auto;
     border-radius: 0.5em;
     background-color: #1D76BC;
@@ -29,8 +29,8 @@
     font-family: serif;
 }
 
-.dash-ticker .dash-ticker--title {
-    font-size: 2em;
+[data-dash-price-widget] .dash-ticker--title {
+    font-size: 3em;
     float: left;
     height: 1em;
     width: 1em;
@@ -40,21 +40,20 @@
     background-size: 100% 100%;
 }
 
-#dash-ticker--price-container {
+[data-dash-price-widget]  .dash-ticker--wrapper {
+    margin-left: 3.5em;
+}
+
+[data-dash-price-widget] .dash-ticker--usd {
     font-size: 2em;
     text-align: center;
 }
 
-#dash-ticker--price-container > input {
-    position: fixed;
-    right: -200px;
+[data-dash-price-widget] .dash-ticker--usd-change {
+    text-align: right;
 }
 
-#dash-ticker--price-container > input + label {
-    display: none;
-    cursor: pointer;
-}
-
-#dash-ticker--price-container > input:checked + label {
-    display: block;
+[data-dash-price-widget] .dash-ticker--btc {
+    text-align: left;
+    margin-top: -1em;
 }
diff --git a/dist/index.html b/dist/index.html
index 653880a..ed058d8 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -1,9 +1,9 @@
 <style type="text/css">/* Micro reset so global styles don't interfere */
 
-.dash-ticker,
-.dash-ticker *,
-.dash-ticker *:before,
-.dash-ticker *:after {
+[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;
@@ -17,9 +17,9 @@
     line-height: 1;
 }
 
-.dash-ticker {
+[data-dash-price-widget] {
     display: block;
-    max-width: 20em;
+    max-width: 18em;
     margin: 0.5em auto;
     border-radius: 0.5em;
     background-color: #1D76BC;
@@ -29,8 +29,8 @@
     font-family: serif;
 }
 
-.dash-ticker .dash-ticker--title {
-    font-size: 2em;
+[data-dash-price-widget] .dash-ticker--title {
+    font-size: 3em;
     float: left;
     height: 1em;
     width: 1em;
@@ -40,35 +40,25 @@
     background-size: 100% 100%;
 }
 
-#dash-ticker--price-container {
+[data-dash-price-widget]  .dash-ticker--wrapper {
+    margin-left: 3.5em;
+}
+
+[data-dash-price-widget] .dash-ticker--usd {
     font-size: 2em;
     text-align: center;
 }
 
-#dash-ticker--price-container > input {
-    position: fixed;
-    right: -200px;
+[data-dash-price-widget] .dash-ticker--usd-change {
+    text-align: right;
 }
 
-#dash-ticker--price-container > input + label {
-    display: none;
-    cursor: pointer;
-}
-
-#dash-ticker--price-container > input:checked + label {
-    display: block;
+[data-dash-price-widget] .dash-ticker--btc {
+    text-align: left;
+    margin-top: -1em;
 }
 </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>
+<div data-dash-price-widget=""></div>
 <script type="application/javascript">(function () {
     "use strict";
 
@@ -86,23 +76,74 @@
         httpRequest.send();
     }
 
+    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));
+    }
+
     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>';
+        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;
             }
-            document.getElementById('dash-ticker--price-container').innerHTML = currencyListHTML;
         });
     }
 
     updatePrices(); // update prices now
     setInterval(updatePrices, 5 * 60 * 1000); // ...and every five minutes after this
-})();
+}());
 </script>
diff --git a/package.json b/package.json
index 8b57b7e..89fe02d 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "dash-price-ticker",
+  "name": "dash-price-widget",
   "version": "1.0.0",
   "description": "Embeddable dash price widget",
   "scripts": {