[feat] Made JustGage AMD andCommonJS friendly

toorshia · Aug 6, 2019 · 8815ad8 · 8815ad8 · robertsLando · Aug 6, 2019
1 parent 7d21cb9
commit 8815ad8
Show file tree

Hide file tree

Showing 18 changed files with 2,011 additions and 1,909 deletions.
diff --git a/examples/animation-events-hooks.html b/examples/animation-events-hooks.html
@@ -1,11 +1,11 @@
 <!doctype html>
 <html>
 
-  <head>
-    <meta charset="utf-8" />
-    <title>Animation events hooks</title>
-    <meta name="viewport" content="width=device-width">
-    <style>
+<head>
+  <meta charset="utf-8" />
+  <title>Animation events hooks</title>
+  <meta name="viewport" content="width=device-width">
+  <style>
     .wrapper {
       position: relative;
       width: 320px;
@@ -52,24 +52,30 @@
     #log {
       color: #ccc;
     }
-    </style>
-  </head>
+  </style>
+</head>
 
-  <body>
-    <div class="wrapper">
-      <div class="box">
-        <div id="g1" class="gauge"></div>
-      </div>
+<body>
+  <div class="wrapper">
+    <div class="box">
+      <div id="g1" class="gauge"></div>
     </div>
-    <div class="container">
-      <button type="button" id="gauge_refresh">Refresh Gauge</button>
-      <p>After every animation end, function will log it below.</p>
-      <p id="log"></p>
-    </div>
-    <script src="../raphael-2.1.4.min.js"></script>
-    <script src="../justgage.js"></script>
-    <script>
-    document.addEventListener("DOMContentLoaded", function(event) {
+  </div>
+  <div class="container">
+    <button type="button" id="gauge_refresh">Refresh Gauge</button>
+    <p>After every animation end, function will log it below.</p>
+    <p id="log"></p>
+  </div>
+  <script src="../raphael-2.1.4.min.js"></script>
+  <script src="../justgage.js"></script>
+  <script>
+
+    /** Random integer  */
+    function getRandomInt(min, max) {
+      return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+
+    document.addEventListener("DOMContentLoaded", function (event) {
 
       var g1 = new JustGage({
         id: 'g1',
@@ -89,18 +95,18 @@
         },
         gaugeWidthScale: 0.6,
         counter: true,
-        onAnimationEnd: function() {
+        onAnimationEnd: function () {
           console.log('animation ended');
           var log = document.getElementById('log');
           log.innerHTML = log.innerHTML + 'Animation just ended.<br/>';
         }
       });
 
-      document.getElementById('gauge_refresh').addEventListener('click', function() {
+      document.getElementById('gauge_refresh').addEventListener('click', function () {
         g1.refresh(getRandomInt(0, 100));
       });
     });
-    </script>
-  </body>
+  </script>
+</body>
 
-</html>
+</html>
diff --git a/examples/counter.html b/examples/counter.html
@@ -6,24 +6,24 @@
     <title>Counter</title>
     <meta name="viewport" content="width=device-width">
     <style>
-    .container {
-        width: 450px;
-        margin: 0 auto;
-        text-align: center;
-    }
+        .container {
+            width: 450px;
+            margin: 0 auto;
+            text-align: center;
+        }
 
-    .gauge {
-        width: 450px;
-        height: 450px;
-    }
+        .gauge {
+            width: 450px;
+            height: 450px;
+        }
 
-    a:link.button,
-    a:active.button,
-    a:visited.button,
-    a:hover.button {
-        margin: 30px 5px 0 2px;
-        padding: 7px 13px;
-    }
+        a:link.button,
+        a:active.button,
+        a:visited.button,
+        a:hover.button {
+            margin: 30px 5px 0 2px;
+            padding: 7px 13px;
+        }
     </style>
 </head>
 
@@ -35,24 +35,28 @@
     <script src="../raphael-2.1.4.min.js"></script>
     <script src="../justgage.js"></script>
     <script>
-    var g1;
-    document.addEventListener("DOMContentLoaded", function(event) {
-        g1 = new JustGage({
-            id: "g1",
-            value: 72,
-            min: 0,
-            max: 100,
-            donut: true,
-            gaugeWidthScale: 0.6,
-            counter: true,
-            hideInnerShadow: true
-        });
+        var g1;
+        /** Random integer  */
+        function getRandomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
+        document.addEventListener("DOMContentLoaded", function (event) {
+            g1 = new JustGage({
+                id: "g1",
+                value: 72,
+                min: 0,
+                max: 100,
+                donut: true,
+                gaugeWidthScale: 0.6,
+                counter: true,
+                hideInnerShadow: true
+            });
 
-        document.getElementById('g1_refresh').addEventListener('click', function() {
-            g1.refresh(getRandomInt(0, 100));
+            document.getElementById('g1_refresh').addEventListener('click', function () {
+                g1.refresh(getRandomInt(0, 100));
+            });
         });
-    });
     </script>
 </body>
 
-</html>
+</html>
diff --git a/examples/custom-interval.htm b/examples/custom-interval.htm
@@ -5,25 +5,25 @@
     <title>Custom interval</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <style>
-    body {
-        text-align: center;
-    }
+        body {
+            text-align: center;
+        }
 
-    #g1,
-    #g2,
-    #g3 {
-        width: 200px;
-        height: 160px;
-        display: inline-block;
-        margin: 1em;
-    }
+        #g1,
+        #g2,
+        #g3 {
+            width: 200px;
+            height: 160px;
+            display: inline-block;
+            margin: 1em;
+        }
 
-    p {
-        display: block;
-        width: 450px;
-        margin: 2em auto;
-        text-align: left;
-    }
+        p {
+            display: block;
+            width: 450px;
+            margin: 2em auto;
+            text-align: left;
+        }
     </style>
 </head>
 
@@ -32,51 +32,57 @@
     <div id="g2"></div>
     <div id="g3"></div>
     <p>
-        You need to measure, say, between 350 and 980? No problem, just tell it to justGage. Displayed value and color are calculated as a percentage in defined range, with optional min and max labels shown.
+        You need to measure, say, between 350 and 980? No problem, just tell it to justGage. Displayed value and color
+        are calculated as a percentage in defined range, with optional min and max labels shown.
     </p>
     <p>
         Also, if displayed value is out of range, relax and kick your feet up - justGage will take care of it for you.
     </p>
     <script src="../raphael-2.1.4.min.js"></script>
     <script src="../justgage.js"></script>
     <script>
-    var g1, g2, g3;
+        var g1, g2, g3;
 
-    document.addEventListener("DOMContentLoaded", function(event) {
-        g1 = new JustGage({
-            id: "g1",
-            value: getRandomInt(350, 980),
-            min: 350,
-            max: 980,
-            title: "Lone Ranger",
-            label: "miles traveled"
-        });
+        /** Random integer  */
+        function getRandomInt(min, max) {
+            return Math.floor(Math.random() * (max - min + 1)) + min;
+        }
 
-        g2 = new JustGage({
-            id: "g2",
-            value: 32,
-            min: 50,
-            max: 100,
-            title: "Empty Tank",
-            label: ""
-        });
+        document.addEventListener("DOMContentLoaded", function (event) {
+            g1 = new JustGage({
+                id: "g1",
+                value: getRandomInt(350, 980),
+                min: 350,
+                max: 980,
+                title: "Lone Ranger",
+                label: "miles traveled"
+            });
 
-        g3 = new JustGage({
-            id: "g3",
-            value: 120,
-            min: 50,
-            max: 100,
-            title: "Meltdown",
-            label: ""
-        });
+            g2 = new JustGage({
+                id: "g2",
+                value: 32,
+                min: 50,
+                max: 100,
+                title: "Empty Tank",
+                label: ""
+            });
 
-        setInterval(function() {
-            g1.refresh(getRandomInt(350, 980));
-            g2.refresh(getRandomInt(0, 49));
-            g3.refresh(getRandomInt(101, 200));
-        }, 2500);
-    });
+            g3 = new JustGage({
+                id: "g3",
+                value: 120,
+                min: 50,
+                max: 100,
+                title: "Meltdown",
+                label: ""
+            });
+
+            setInterval(function () {
+                g1.refresh(getRandomInt(350, 980));
+                g2.refresh(getRandomInt(0, 49));
+                g3.refresh(getRandomInt(101, 200));
+            }, 2500);
+        });
     </script>
 </body>
 
-</html>
+</html>