testing issue with prototype reference

toorshia · Aug 19, 2015 · 4732dd8 · 4732dd8
1 parent c27622c
commit 4732dd8
Show file tree

Hide file tree

Showing 3 changed files with 613 additions and 1 deletion.
diff --git a/issues/customize-style.htm b/issues/customize-style.htm
@@ -0,0 +1,135 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Customize style</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+    <style>
+      body {
+        text-align: center;
+      }
+
+      #g1, #g2, #g3, #g4, #g5, #g6 {
+        width:200px; height:160px;
+        display: inline-block;
+        margin: 1em;
+      }
+
+      p {
+        display: block;
+        width: 450px;
+        margin: 2em auto;
+        text-align: left;
+      }
+    </style>
+
+	</head>
+  <body>
+    <div id="g1"></div>
+    <div id="g2"></div>
+    <div id="g3"></div>
+    <div id="g4"></div>
+    <div id="g5"></div>
+    <div id="g6"></div>
+    <p>
+      Not digging default style? Then mock your own, Picasso! JustGage features bunch of styling options including gauge width, gauge color and shadow, gauge level colors, colors for title, value, min &amp; max etc.
+    </p>
+    <p>
+      Check non-minified version of justgage.js for list of all setup parameters.
+    </p>
+    <script src="../raphael-2.1.4.min.js"></script>
+    <!--<script src="../justgage-1.0.1.js"></script>-->
+    <script src="../justgage.js"></script>
+    <script>
+      var g1, g2, g3, g4, g5, g6;
+
+      window.onload = function(){
+      var g1 = new JustGage({
+        id: "g1",
+        value: getRandomInt(0, 100),
+        min: 0,
+        max: 100,
+        title: "Custom Width",
+        label: "",
+        gaugeWidthScale: 0.2
+      });
+
+      var g2 = new JustGage({
+        id: "g2",
+        value: getRandomInt(0, 100),
+        min: 0,
+        max: 100,
+        title: "Custom Shadow",
+        label: "",
+        shadowOpacity: 1,
+        shadowSize: 0,
+        shadowVerticalOffset: 10
+      });
+
+      var g3 = new JustGage({
+        id: "g3",
+        value: getRandomInt(0, 100),
+        min: 0,
+        max: 100,
+        title: "Custom Colors",
+        label: "",
+        levelColors: [
+          "#00fff6",
+          "#ff00fc",
+          "#1200ff"
+        ]
+      });
+
+      var g4 = new JustGage({
+        id: "g4",
+        value: getRandomInt(0, 100),
+        min: 0,
+        max: 100,
+        title: "Hide Labels",
+        showMinMax: false
+      });
+
+
+      var g5 = new JustGage({
+        id: "g5",
+        value: getRandomInt(0, 100),
+        min: 0,
+        max: 100,
+        title: "Animation Type",
+        label: "",
+        startAnimationTime: 2000,
+        startAnimationType: ">",
+        refreshAnimationTime: 1000,
+        refreshAnimationType: "bounce"
+      });
+
+      var g6 = new JustGage({
+        id: "g6",
+        value: getRandomInt(0, 100),
+        min: 0,
+        max: 100,
+        title: "Minimal",
+        label: "",
+        showMinMax: false,
+        gaugeColor: "#fff",
+        levelColors: ["#000"],
+        showInnerShadow: false,
+        startAnimationTime: 1,
+        startAnimationType: "linear",
+        refreshAnimationTime: 1,
+        refreshAnimationType: "linear"
+      });
+
+        setInterval(function() {
+          g1.refresh(getRandomInt(0, 100));
+          g2.refresh(getRandomInt(0, 100));
+          g3.refresh(getRandomInt(0, 100));
+          g4.refresh(getRandomInt(0, 100));
+          g5.refresh(getRandomInt(0, 100));
+          g6.refresh(getRandomInt(0, 100));
+        }, 2500);
+      };
+    </script>
+  </body>
+</html>