Implemented issue #87 - added possibility to control automatic DOM do…

…cument parsing to create gauges
Mikhus · Dec 1, 2016 · 2b44193 · 2b44193
1 parent ab10951
commit 2b44193
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 6 deletions.
diff --git a/examples/no-auto-init.html b/examples/no-auto-init.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Gauge Test</title>
+    <script>var GAUGE_NO_AUTO_INIT = true;</script>
+    <script src="../gauge.min.js"></script>
+    <style>body {
+        padding: 0;
+        margin: 0;
+        background: #fff
+    }</style>
+</head>
+<body>
+
+<canvas  data-type="radial-gauge"
+         data-min-value="0"
+         data-max-value="360"
+         data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
+         data-minor-ticks="22"
+         data-ticks-angle="360"
+         data-start-angle="180"
+         data-stroke-ticks="false"
+         data-highlights="false"
+         data-color-plate="#222"
+         data-color-major-ticks="#f5f5f5"
+         data-color-minor-ticks="#ddd"
+         data-color-numbers="#ccc"
+         data-color-needle="rgba(240, 128, 128, 1)"
+         data-color-needle-end="rgba(255, 160, 122, .9)"
+         data-value-box="false"
+         data-value-text-shadow="false"
+         data-color-circle-inner="#fff"
+         data-color-needle-circle-outer="#ccc"
+         data-needle-circle-size="15"
+         data-needle-circle-outer="false"
+         data-needle-type="line"
+         data-needle-start="75"
+         data-needle-end="99"
+         data-needle-width="3"
+         data-borders="true"
+         data-border-inner-width="0"
+         data-border-middle-width="0"
+         data-border-outer-width="10"
+         data-color-border-outer="#ccc"
+         data-color-border-outer-end="#ccc"
+         data-color-needle-shadow-down="#222"
+         data-animation-target="plate"
+         data-animation-duration="1500"
+         data-animation-rule="linear"
+         data-width="500"
+         data-height="500"
+         data-units="ᵍ"
+         data-value="0"
+></canvas>
+
+<canvas data-type="radial-gauge"
+        data-width="500"
+        data-height="500"
+        data-min-value="0"
+        data-max-value="360"
+        data-major-ticks="N,NE,E,SE,S,SW,W,NW,N"
+        data-minor-ticks="22"
+        data-ticks-angle="360"
+        data-start-angle="180"
+        data-stroke-ticks="false"
+        data-highlights="false"
+        data-color-plate="#33a"
+        data-color-major-ticks="#f5f5f5"
+        data-color-minor-ticks="#ddd"
+        data-color-numbers="#ccc"
+        data-color-needle="rgba(240, 128, 128, 1)"
+        data-color-needle-end="rgba(255, 160, 122, .9)"
+        data-value-box="false"
+        data-value-text-shadow="false"
+        data-color-circle-inner="#fff"
+        data-color-needle-circle-outer="#ccc"
+        data-needle-circle-size="15"
+        data-needle-circle-outer="false"
+        data-animation-rule="linear"
+        data-needle-type="line"
+        data-needle-start="75"
+        data-needle-end="99"
+        data-needle-width="3"
+        data-borders="true"
+        data-border-inner-width="0"
+        data-border-middle-width="0"
+        data-border-outer-width="10"
+        data-color-border-outer="#ccc"
+        data-color-border-outer-end="#ccc"
+        data-color-needle-shadow-down="#222"
+        data-border-shadow-width="0"
+        data-animation-target="plate"
+        data-units="ᵍ"
+        data-title="DIRECTION"
+        data-font-title-size="19"
+        data-color-title="#f5f5f5"
+        data-animation-duration="1500"
+        data-value="45"
+        data-animate-on-init="true"
+></canvas>
+
+<script>
+var collection = document.getElementsByTagName('canvas');
+for (var i = 0, s = collection.length; i < s; i++) {
+    BaseGauge.fromElement(collection[i]);
+}
+</script>
+</body>
+</html>
diff --git a/gauge.min.js b/gauge.min.js
diff --git a/gauge.min.js.map b/gauge.min.js.map
diff --git a/lib/BaseGauge.js b/lib/BaseGauge.js
@@ -291,7 +291,27 @@ export default class BaseGauge {
      * @param {GenericOptions} options
      */
     static initialize(type, options) {
-        new DomObserver(options, 'canvas', type);
+        return new DomObserver(options, 'canvas', type);
+    }
+
+    /**
+     * Initializes gauge from a given HTML element
+     * (given element should be valid HTML canvas gauge definition)
+     *
+     * @param {HTMLElement} element
+     */
+    static fromElement(element) {
+        let type = DomObserver.toCamelCase(element.getAttribute('data-type'));
+
+        if (!type) {
+            return ;
+        }
+
+        if (!/Gauge$/.test(type)) {
+            type += 'Gauge';
+        }
+
+        new DomObserver({}, element.tagName, type).process(element);
     }
 }
 

diff --git a/lib/DomObserver.js b/lib/DomObserver.js
@@ -109,7 +109,9 @@ export default class DomObserver {
         this.isObservable = !!window.MutationObserver;
 
         /* istanbul ignore next: this should be tested with end-to-end tests */
-        DomObserver.domReady(this.traverse.bind(this));
+        if (!window['GAUGES_NO_AUTO_INIT']) {
+            DomObserver.domReady(this.traverse.bind(this));
+        }
     }
 
     /**
@@ -309,6 +311,25 @@ export default class DomObserver {
         return str;
     }
 
+    /**
+     * Transforms dashed string to camelCase representation
+     *
+     * @param {string} dashed
+     * @return {string}
+     */
+    static toCamelCase(dashed) {
+        let arr = dashed.split(/-/);
+        let i = 0;
+        let s = arr.length;
+        let str = '';
+
+        for (; i< s; i++) {
+            str += arr[i][0].toUpperCase() + arr[i].substr(1).toLowerCase();
+        }
+
+        return str;
+    }
+
     /**
      * Transforms camel case property name to dash separated attribute name
      *

diff --git a/test-coverage.svg b/test-coverage.svg