defaults feature

Use defaults feature when setting up multiple gauge objects with same properties
toorshia · Nov 8, 2015 · b6de58c · b6de58c
1 parent 288b9d9
commit b6de58c
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 98 deletions.
diff --git a/examples/defaults.html b/examples/defaults.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Defaults</title>
+  <meta name="viewport" content="width=device-width">
+  <style>
+  .container {
+    width: 600px;
+    margin: 100px auto;
+    text-align: center;
+  }
+
+  .gauge {
+    width: 250px;
+    height: 250px;
+    display: inline-block;
+  }
+
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div id="gg1" class="gauge"></div>
+    <div id="gg2" class="gauge" data-value="25"></div>
+  </div>
+  <script src="../raphael-2.1.4.min.js"></script>
+  <script src="../justgage.js"></script>
+  <script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+
+    var dflt = {
+      min: 0,
+      max: 200,
+      donut: true,
+      gaugeWidthScale: 0.6,
+      counter: true,
+      hideInnerShadow: true
+    }
+
+    var gg1 = new JustGage({
+      id: 'gg1',
+      value: 125,
+      title: 'javascript call',
+      defaults: dflt
+    });
+
+    var gg2 = new JustGage({
+      id: 'gg2',
+      title: 'data-attributes',
+      defaults: dflt
+    });
+
+  });
+  </script>
+</body>
+
+</html>
diff --git a/justgage.js b/justgage.js
@@ -1,102 +1,9 @@
 /**
- * JustGage - this is work-in-progress, unreleased, unofficial code, so it might not work top-notch :)
+ * JustGage - animated gauges using RaphaelJS
  * Check http://www.justgage.com for official releases
  * Licensed under MIT.
  * @author Bojan Djuricic (@Toorshia)
- *
- * LATEST UPDATES
- *
- * -----------------------------
- * Aug 19, 2015.
- * -----------------------------
-     * fixed shadow id issue (same ids were being generated)
- *
- * -----------------------------
- * March 16, 2014.
- * -----------------------------
-     * fix - https://github.com/toorshia/justgage/issues/112
- *
- * -----------------------------
- * February 16, 2014.
- * -----------------------------
-     * fix - https://github.com/toorshia/justgage/issues/102
-
- * -----------------------------
- * April 25, 2013.
- * -----------------------------
-     * use HTML5 data-* attributes of the DOM Element to render the gauge (which overrides the constructor options).
-
- * -----------------------------
- * April 18, 2013.
- * -----------------------------
-     * parentNode - use this instead of id, to attach gauge to node which is outside of DOM tree - https://github.com/toorshia/justgage/issues/48
-     * width - force gauge width
-     * height - force gauge height
-
- * -----------------------------
- * April 17, 2013.
- * -----------------------------
-     * fix - https://github.com/toorshia/justgage/issues/49
-
- * -----------------------------
- * April 01, 2013.
- * -----------------------------
-     * fix - https://github.com/toorshia/justgage/issues/46
-
- * -----------------------------
- * March 26, 2013.
- * -----------------------------
-     * customSectors - define specific color for value range (0-10 : red, 10-30 : blue etc.)
-
- * -----------------------------
- * March 23, 2013.
- * -----------------------------
-     * counter - option to animate value  in counting fashion
-     * fix - https://github.com/toorshia/justgage/issues/45
-
- * -----------------------------
- * March 13, 2013.
- * -----------------------------
-     * refresh method - added optional 'max' parameter to use when you need to update max value
-
- * -----------------------------
- * February 26, 2013.
- * -----------------------------
-     * decimals - option to define/limit number of decimals when not using humanFriendly or customRenderer to display value
-     * fixed a missing parameters bug when calling generateShadow()  for IE < 9
-
- * -----------------------------
- * December 31, 2012.
- * -----------------------------
-     * fixed text y-position for hidden divs - workaround for Raphael <tspan> 'dy' bug - https://github.com/DmitryBaranovskiy/raphael/issues/491
-     * 'show' parameters, like showMinMax are now 'hide' because I am lame developer - please update these in your setups
-     * Min and Max labels are now auto-off when in donut mode
-     * Start angle in donut mode is now 90
-     * donutStartAngle - option to define start angle for donut
-
- * -----------------------------
- * November 25, 2012.
- * -----------------------------
-     * Option to define custom rendering function for displayed value
-
- * -----------------------------
- * November 19, 2012.
- * -----------------------------
-     * Config.value is now updated after gauge refresh
-
- * -----------------------------
- * November 13, 2012.
- * -----------------------------
-     * Donut display mode added
-     * Option to hide value label
-     * Option to enable responsive gauge size
-     * Removed default title attribute
-     * Option to accept min and max defined as string values
-     * Option to configure value symbol
-     * Fixed bad aspect ratio calculations
-     * Option to configure minimum font size for all texts
-     * Option to show shorthand big numbers (human friendly)
-     */
+ **/
 
  JustGage = function(config) {
 
@@ -125,13 +32,28 @@
 
   var dataset = node.dataset ? node.dataset : {};
 
+  // check for defaults
+  var defaults = (config.defaults !== null && config.defaults !== undefined) ? config.defaults : false;
+  if(defaults !== false) {
+    config = extend({}, config, defaults);
+    delete config.defaults;
+  }
+
   // configurable parameters
   obj.config =
   {
     // id : string
     // this is container element id
     id : config.id,
 
+    // value : float
+    // value gauge is showing
+    value : kvLookup('value', config, dataset, 0, 'float'),
+
+    // defaults : bool
+    // defaults parameter to use
+    defaults : kvLookup('defaults', config, dataset, 0, false),
+
     // parentNode : node object
     // this is container element
     parentNode : kvLookup('parentNode', config, dataset, null),
@@ -152,9 +74,6 @@
     // color of gauge title
     titleFontColor : kvLookup('titleFontColor', config, dataset,  "#999999"),
 
-    // value : float
-    // value gauge is showing
-    value : kvLookup('value', config, dataset, 0, 'float'),
 
     // valueFontColor : string
     // color of label showing current value
@@ -1054,3 +973,20 @@ var ie = (function(){
     );
     return v > 4 ? v : undef;
 }());
+
+// extend target object with second object
+function extend(out) {
+  out = out || {};
+
+  for (var i = 1; i < arguments.length; i++) {
+    if (!arguments[i])
+      continue;
+
+    for (var key in arguments[i]) {
+      if (arguments[i].hasOwnProperty(key))
+        out[key] = arguments[i][key];
+    }
+  }
+
+  return out;
+};