docs: improved destroy example

toorshia · Mar 21, 2023 · d62b827 · d62b827
1 parent c95ea1c
commit d62b827
Showing 1 changed file with 45 additions and 34 deletions.
diff --git a/docs/examples/destroy-object.html b/docs/examples/destroy-object.html
@@ -6,54 +6,65 @@
     <title>Refresh object</title>
     <meta name="viewport" content="width=device-width">
     <style>
-    .container {
-        width: 450px;
-        margin: 50px auto 0 auto;
-        text-align: center;
-    }
-
-    .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;
-    }
+        .container {
+            width: 450px;
+            margin: 50px auto 0 auto;
+            text-align: center;
+        }
+
+        .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;
+        }
     </style>
 </head>
 
 <body>
     <div class="container">
         <div id="g1" class="gauge"></div>
-        <a href="#" id="g1_destroy" class="button grey">Destroy Object</a>
+        <a href="#" id="g1_destroy" class="button grey">Destroy/Recreate Object</a>
     </div>
     <script src="../raphael.min.js"></script>
     <script src="../justgage.js"></script>
     <script>
+        document.addEventListener("DOMContentLoaded", function (event) {
+            var g1
 
-    document.addEventListener("DOMContentLoaded", function(event) {
+            function create() {
 
-        var g1 = new JustGage({
-            id: "g1",
-            title: "Max is 100.",
-            value: 50,
-            min: 0,
-            max: 100,
-            decimals: 0,
-            gaugeWidthScale: 0.6
-        });
+                g1 = new JustGage({
+                    id: "g1",
+                    title: "Max is 100.",
+                    value: 50,
+                    min: 0,
+                    max: 100,
+                    decimals: 0,
+                    gaugeWidthScale: 0.6
+                });
 
-        document.getElementById('g1_destroy').addEventListener('click', function() {
-            g1.destroy()
-        });
+            }
 
-    });
+            document.getElementById('g1_destroy').addEventListener('click', function () {
+                if(g1) {
+                    g1.destroy()
+                    g1 = null
+                } else {
+                    create()
+                }
+            });
+
+            create()
+
+        });
     </script>
 </body>
 
-</html>
+</html>