Added prototype.destroy()

toorshia · Sep 22, 2016 · b1b6f47 · b1b6f47
1 parent acef5aa
commit b1b6f47
Show file tree

Hide file tree

Showing 3 changed files with 196 additions and 10 deletions.
diff --git a/examples/object-destroy.html b/examples/object-destroy.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Object destroy</title>
+    <meta name="viewport" content="width=device-width">
+    <style>
+    .container {
+        width: 450px;
+        margin: 50px auto 0 auto;
+        text-align: center;
+    }
+
+    .gauge {
+        width: 450px;
+        height: 350px;
+        border: 1px solid grey;
+    }
+
+    a:link.button,
+    a:active.button,
+    a:visited.button,
+    a:hover.button {
+        margin: 30px auto 0 auto;
+        padding: 10px 13px;
+        display: block;
+        font-family: 'Arial';
+        width: 200px;
+        border-radius: 3px;
+        cursor: pointer;
+    }
+    </style>
+</head>
+
+<body>
+    <div class="container" id="container">
+        <div id="jg1" class="gauge"></div>
+        <a href="#" id="jg1_create" class="button grey">Create object</a>
+        <a href="#" id="jg1_destroy" class="button grey" style="display:none">Destroy object</a>
+    </div>
+    <script src="../raphael-2.1.4.min.js"></script>
+    <script src="../justgage.js"></script>
+    <script>
+
+    document.addEventListener("DOMContentLoaded", function(event) {
+
+        var jg1;
+
+        document.getElementById('jg1_create').addEventListener('click', function() {
+            jg1 = new JustGage({
+                id: "jg1",
+                title: "",
+                value: 50,
+                min: 0,
+                max: 100,
+                decimals: 0,
+                gaugeWidthScale: 0.6
+            });
+            document.getElementById('jg1_create').style.display = 'none';
+            document.getElementById('jg1_destroy').style.display = 'block';
+
+        });
+
+        document.getElementById('jg1_destroy').addEventListener('click', function() {
+            jg1.destroy();
+            document.getElementById('jg1_create').style.display = 'block';
+            document.getElementById('jg1_destroy').style.display = 'none';
+        });
+
+    });
+    </script>
+</body>
+
+</html>
diff --git a/examples/text-renderer-2.html b/examples/text-renderer-2.html
@@ -0,0 +1,114 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Custom Render Function</title>
+    <style>
+    .container {
+        margin: 0 auto;
+        text-align: center;
+    }
+
+    .gauge_container {
+        text-align: left;
+        height: 450px;
+        display: inline-block;
+        border: 1px solid #ccc;
+        margin: 40px 5px 0 5px;
+    }
+
+    .gauge {
+        width: 300px;
+        height: 200px;
+        display: inline-block;
+        -webkit-transform: translate3d(0, 0, 0);
+    }
+
+    .controls {
+        text-align: left;
+    }
+
+    li {
+        padding: 10px 0 0 0;
+    }
+
+    li.refresh {
+        border-top: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+        padding-top: 15px;
+        padding-bottom: 15px;
+    }
+
+    label {
+        font-family: Arial;
+        display: inline-block;
+        width: 65px;
+        margin: 0 0 5px 0;
+        text-align: right;
+        padding: 5px;
+        color: #919191;
+    }
+
+    input {
+        font-weight: bold;
+        font-size: 13px;
+        padding: 10px;
+        border: 1px solid #ccc;
+        margin: 5px;
+    }
+
+    input[disabled=disabled] {
+        font-weight: normal;
+        font-size: 11px;
+        padding: 0 0 0 10px;
+        margin: 0px;
+        color: #777777;
+        border-color: transparent;
+        background: #fff;
+    }
+
+    a:link.button,
+    a:active.button,
+    a:visited.button,
+    a:hover.button {
+        margin: 0px 5px 0 2px;
+        padding: 7px 13px;
+    }
+    </style>
+</head>
+
+<body>
+    <div id="jg1" style="width: 200px; height: 150px;"></div>
+    <a href="#" id="jg1_refresh" class="button grey">Random Refresh</a>
+    <script src="../raphael-2.1.4.min.js"></script>
+    <script src="../justgage.js"></script>
+    <script>
+    document.addEventListener("DOMContentLoaded", function(event) {
+        var maxx = 100;
+
+        var jg1 = new JustGage({
+            id: "jg1",
+            value: 50,
+            min: 0,
+            max: maxx,
+            title: "Score",
+            label: "",
+            pointer: true,
+            textRenderer: function(val) {
+                return (val + '/' + maxx);
+            },
+            onAnimationEnd: function() {
+                console.log('f: onAnimationEnd()');
+            }
+        });
+
+        document.getElementById('jg1_refresh').addEventListener('click', function() {
+            jg1.refresh(getRandomInt(0, 100));
+            return false;
+        });
+    });
+    </script>
+</body>
+
+</html>
diff --git a/justgage.js b/justgage.js
@@ -857,20 +857,11 @@ JustGage = function(config) {
 };
 
 /** Refresh gauge level */
-JustGage.prototype.refresh = function(val, max, config) {
+JustGage.prototype.refresh = function(val, max) {
 
   var obj = this;
   var displayVal, color, max = max || null;
 
-  if(config && (typeof config  === "object")) {
-    for(var key in config) {
-      if(!config.hasOwnProperty(key)) {
-        continue;
-      }
-      obj.config[key] = config[key];
-    }
-  }
-
   // set new max
   if (max !== null) {
     obj.config.max = max;
@@ -935,6 +926,7 @@ JustGage.prototype.refresh = function(val, max, config) {
   if (obj.config.reverse) {
     rvl = (obj.config.max * 1) + (obj.config.min * 1) - (obj.config.value * 1);
   }
+
   obj.level.animate({
     pki: [
       rvl,
@@ -971,6 +963,11 @@ JustGage.prototype.refresh = function(val, max, config) {
   obj, displayVal, color, max = null;
 };
 
+/** Update gauge object */
+JustGage.prototype.destroy = function() {
+  document.getElementById(this.config.id).innerHTML = '';
+};
+
 /** Generate shadow */
 JustGage.prototype.generateShadow = function(svg, defs) {