Merge pull request #4 from i1group/develop

Merge changes from @i1group with fixes for text rendering/styling issues.
Move data-attribute options gathering inside main prototype.

Resolves #2 
Resolves #3

dist/donutty-jquery.js

@@ -41,6 +41,18 @@
 
         }
 
+        if ( !this.$wrapper ) {
+
+            return this;
+
+        }
+
+        if ( !isDefined( options ) ) {
+
+            options = this.getOptionsFromTag();
+
+        }
+
         this.state =               {};
         this.options =             options || {};
         this.options.min =         isDefined( this.options.min ) ? float( this.options.min ) : 0;
@@ -54,16 +66,24 @@
         this.options.bg =          this.options.bg || "rgba(70, 130, 180, 0.15)";
         this.options.color =       this.options.color || "mediumslateblue";
         this.options.transition =  this.options.transition || "all 1.2s cubic-bezier(0.57, 0.13, 0.18, 0.98)";
-        this.options.text =        false;
+        this.options.text =        isDefined( this.options.text ) ? this.options.text : false;
 
         this.init();
 
         return this;
 
     };
 
+    donutty.prototype.getOptionsFromTag = function() {
+
+        return JSON.parse(JSON.stringify(this.$wrapper.dataset));
+
+    };
+
     donutty.prototype.init = function() {
 
+        this.$wrapper.donutty = this;
+
         var values;
 
         // create the state object from the options,
@@ -174,8 +194,8 @@
 
     donutty.prototype.insertFragments = function( values ) {
 
-        this.$svg.appendChild( this.$donut );
         this.$svg.appendChild( this.$bg );
+        this.$svg.appendChild( this.$donut );
         this.$html.appendChild( this.$svg );
 
         if ( this.$text ) {
@@ -232,7 +252,9 @@
         // the transition
         _this.$bg.style.transition = this.options.transition;
         _this.$donut.style.transition = this.options.transition;
-        _this.$text.style.transition = this.options.transition;
+        if ( _this.$text ) {
+            _this.$text.style.transition = this.options.transition;
+        }
 
         // use a short timeout (~60fps) to simulate a new
         // animation frame (not using rAF due to ie9 problems)
@@ -246,7 +268,9 @@
             _this.$donut.setAttribute( "stroke", _this.state.color );
             _this.$donut.style.opacity = 1;
 
-            _this.$text.style.opacity = 1;
+            if ( _this.$text ) {
+                _this.$text.style.opacity = 1;
+            }
 
         }, 16 );
 
@@ -343,12 +367,9 @@
 
             $.fn.donutty = function( options ) {
 
-                return $( this ).each( function( k, el ) {
-
-                    var $el = $( el ),
-                        instance = new Donutty( el, $.extend( {}, $el.data(), options ) );
+                return $( this ).each( function() {
 
-                    $el.data( "donutty", instance );
+                    new Donutty( this, options );
 
                 });
 

dist/donutty.js

@@ -41,6 +41,18 @@
 
         }
 
+        if ( !this.$wrapper ) {
+
+            return this;
+
+        }
+
+        if ( !isDefined( options ) ) {
+
+            options = this.getOptionsFromTag();
+
+        }
+
         this.state =               {};
         this.options =             options || {};
         this.options.min =         isDefined( this.options.min ) ? float( this.options.min ) : 0;
@@ -54,16 +66,24 @@
         this.options.bg =          this.options.bg || "rgba(70, 130, 180, 0.15)";
         this.options.color =       this.options.color || "mediumslateblue";
         this.options.transition =  this.options.transition || "all 1.2s cubic-bezier(0.57, 0.13, 0.18, 0.98)";
-        this.options.text =        false;
+        this.options.text =        isDefined( this.options.text ) ? this.options.text : false;
 
         this.init();
 
         return this;
 
     };
 
+    donutty.prototype.getOptionsFromTag = function() {
+
+        return JSON.parse(JSON.stringify(this.$wrapper.dataset));
+
+    };
+
     donutty.prototype.init = function() {
 
+        this.$wrapper.donutty = this;
+
         var values;
 
         // create the state object from the options,
@@ -174,8 +194,8 @@
 
     donutty.prototype.insertFragments = function( values ) {
 
-        this.$svg.appendChild( this.$donut );
         this.$svg.appendChild( this.$bg );
+        this.$svg.appendChild( this.$donut );
         this.$html.appendChild( this.$svg );
 
         if ( this.$text ) {
@@ -232,7 +252,9 @@
         // the transition
         _this.$bg.style.transition = this.options.transition;
         _this.$donut.style.transition = this.options.transition;
-        _this.$text.style.transition = this.options.transition;
+        if ( _this.$text ) {
+            _this.$text.style.transition = this.options.transition;
+        }
 
         // use a short timeout (~60fps) to simulate a new
         // animation frame (not using rAF due to ie9 problems)
@@ -246,7 +268,9 @@
             _this.$donut.setAttribute( "stroke", _this.state.color );
             _this.$donut.style.opacity = 1;
 
-            _this.$text.style.opacity = 1;
+            if ( _this.$text ) {
+                _this.$text.style.opacity = 1;
+            }
 
         }, 16 );
 
@@ -344,17 +368,14 @@
 
             Array.prototype.forEach.call( $donuts , function( $el ) {
 
-                var options = JSON.parse( JSON.stringify( $el.dataset ) ),
-                    instance = new Donutty( $el, options );
-
-                $el.dataset.donutty = instance;
+                new Donutty( $el );
 
             });
 
         };
 
 
-    if (  doc.readyState === "complete" || ( doc.readyState !== "loading" && !doc.documentElement.doScroll ) ) {
+    if ( doc.readyState === "complete" || ( doc.readyState !== "loading" && !doc.documentElement.doScroll ) ) {
         initialise();
     } else {
         doc.addEventListener("DOMContentLoaded", initialise );