From 343a501a7336c2b54ac42ca58cd25d9eb6fd67a5 Mon Sep 17 00:00:00 2001 From: Bojan Djuricic Date: Thu, 18 Apr 2013 21:29:48 +0200 Subject: [PATCH] new features - parentNode, width, height --- R&D/refreshmax/refreshmax.html | 70 ---------------------------------- README.md | 11 ++++-- justgage.js | 55 ++++++++++++++++++-------- 3 files changed, 47 insertions(+), 89 deletions(-) delete mode 100644 R&D/refreshmax/refreshmax.html diff --git a/R&D/refreshmax/refreshmax.html b/R&D/refreshmax/refreshmax.html deleted file mode 100644 index fbd5790..0000000 --- a/R&D/refreshmax/refreshmax.html +++ /dev/null @@ -1,70 +0,0 @@ - - - - - - Donuts, baby! - - - - - - - - - - - - - - - -
-
- Random Refresh - Refresh Maximum -
- - - - \ No newline at end of file diff --git a/README.md b/README.md index bb98728..1663628 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,11 @@ Checkout http://justgage.com for details, demos, current release and more. ###Update log + ######April 18, 2013. + * **parentNode** - use instead of id, attaches gauge to node which is outside of DOM tree - demo at http://justgage.com/demos/custom-node/ + * **width** - force gauge width + * **height** - force gauge height + ######April 17, 2013. * fix - https://github.com/toorshia/justgage/issues/49 @@ -13,13 +18,13 @@ Checkout http://justgage.com for details, demos, current release and more. * fix - https://github.com/toorshia/justgage/issues/46 ######March 26, 2013. - * **customSectors** - define one or many value ranges with custom gauge color - check demo at http://bit.ly/15RBkKe + * **customSectors** - define one or many value ranges with custom gauge color - demo at http://justgage.com/demos/custom-sectors/ ######March 23, 2013. - * **counter** - option to animate value in counting fashion - check demo at http://bit.ly/15Hw5i1 + * **counter** - option to animate value in counting fashion - check demo at http://justgage.com/demos/counter/ ######March 19, 2013. - * **refresh()** - added optional 'max' parameter to use when you need to update max value - check demo at http://bit.ly/10cdlSR + * **refresh()** - added optional 'max' parameter to use when you need to update max value - demo at http://justgage.com/demos/refreshmax/ ######February 26, 2013. * **decimals** - option to define/limit number of decimals when not using humanFriendly or customRenderer to display value diff --git a/justgage.js b/justgage.js index 81d8ab1..e0b8137 100644 --- a/justgage.js +++ b/justgage.js @@ -6,6 +6,13 @@ * * LATEST UPDATES + * ----------------------------- + * 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. * ----------------------------- @@ -73,8 +80,8 @@ JustGage = function(config) { - if (!config.id) {alert("Missing id parameter for gauge!"); return false;} - if (!document.getElementById(config.id)) {alert("No element with id: \""+config.id+"\" found!"); return false;} + // if (!config.id) {alert("Missing id parameter for gauge!"); return false;} + // if (!document.getElementById(config.id)) {alert("No element with id: \""+config.id+"\" found!"); return false;} var obj = this; @@ -85,6 +92,18 @@ // this is container element id id : config.id, + // parentNode : node object + // this is container element + parentNode : (config.parentNode) ? config.parentNode : null, + + // width : int + // gauge width + width : (config.width) ? config.width : null, + + // height : int + // gauge height + height : (config.height) ? config.height : null, + // title : string // gauge title title : (config.title) ? config.title : "", @@ -97,7 +116,6 @@ // value gauge is showing value : (config.value) ? config.value : 0, - // valueFontColor : string // color of label showing current value valueFontColor : (config.valueFontColor) ? config.valueFontColor : "#010101", @@ -269,8 +287,13 @@ if (obj.config.value < obj.config.min) obj.config.value = obj.config.min; obj.originalValue = config.value; - // canvas - obj.canvas = Raphael(obj.config.id, "100%", "100%"); + // create canvas + if (obj.config.id !== null && (document.getElementById(obj.config.id)) !== null) { + obj.canvas = Raphael(obj.config.id, "100%", "100%"); + } else if (obj.config.parentNode !== null) { + obj.canvas = Raphael(obj.config.parentNode, "100%", "100%"); + } + if (obj.config.relativeGaugeSize === true) { obj.canvas.setViewBox(0, 0, 200, 150, true); } @@ -279,6 +302,13 @@ if (obj.config.relativeGaugeSize === true) { canvasW = 200; canvasH = 150; + } else if (obj.config.width !== null && obj.config.height !== null) { + canvasW = obj.config.width; + canvasH = obj.config.height; + } else if (obj.config.parentNode !== null) { + obj.canvas.setViewBox(0, 0, 200, 150, true); + canvasW = 200; + canvasH = 150; } else { canvasW = getStyle(document.getElementById(obj.config.id), "width").slice(0, -2) * 1; canvasH = getStyle(document.getElementById(obj.config.id), "height").slice(0, -2) * 1; @@ -505,7 +535,6 @@ obj.config.donut ] }); - obj.gauge.id = obj.config.id+"-gauge"; // level obj.level = obj.canvas.path().attr({ @@ -526,7 +555,6 @@ if(obj.config.donut) { obj.level.transform("r" + obj.config.donutStartAngle + ", " + (obj.params.widgetW/2 + obj.params.dx) + ", " + (obj.params.widgetH/1.95 + obj.params.dy)); } - obj.level.id = obj.config.id+"-level"; // title obj.txtTitle = obj.canvas.text(obj.params.titleX, obj.params.titleY, obj.config.title); @@ -538,7 +566,6 @@ "fill-opacity":"1" }); setDy(obj.txtTitle, obj.params.titleFontSize, obj.params.titleY); - obj.txtTitle.id = obj.config.id+"-txttitle"; // value obj.txtValue = obj.canvas.text(obj.params.valueX, obj.params.valueY, 0); @@ -550,7 +577,6 @@ "fill-opacity":"0" }); setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY); - obj.txtValue.id = obj.config.id+"-txtvalue"; // label obj.txtLabel = obj.canvas.text(obj.params.labelX, obj.params.labelY, obj.config.label); @@ -562,7 +588,6 @@ "fill-opacity":"0" }); setDy(obj.txtLabel, obj.params.labelFontSize, obj.params.labelY); - obj.txtLabel.id = obj.config.id+"-txtlabel"; // min obj.txtMinimum = obj.config.min; @@ -576,7 +601,6 @@ "fill-opacity": (obj.config.hideMinMax || obj.config.donut)? "0" : "1" }); setDy(obj.txtMin, obj.params.minFontSize, obj.params.minY); - obj.txtMin.id = obj.config.id+"-txtmin"; // max obj.txtMaximum = obj.config.max; @@ -590,7 +614,6 @@ "fill-opacity": (obj.config.hideMinMax || obj.config.donut)? "0" : "1" }); setDy(obj.txtMax, obj.params.maxFontSize, obj.params.maxY); - obj.txtMax.id = obj.config.id+"-txtmax"; var defs = obj.canvas.canvas.childNodes[1]; var svg = "http://www.w3.org/2000/svg"; @@ -724,8 +747,8 @@ JustGage.prototype.generateShadow = function(svg, defs) { var gaussFilter, feOffset, feGaussianBlur, feComposite1, feFlood, feComposite2, feComposite3; // FILTER - gaussFilter=document.createElementNS(svg,"filter"); - gaussFilter.setAttribute("id", obj.config.id + "-inner-shadow"); + gaussFilter = document.createElementNS(svg,"filter"); + gaussFilter.setAttribute("id","inner-shadow"); defs.appendChild(gaussFilter); // offset @@ -772,8 +795,8 @@ JustGage.prototype.generateShadow = function(svg, defs) { // set shadow if (!obj.config.hideInnerShadow) { - obj.canvas.canvas.childNodes[2].setAttribute("filter", "url(#" + obj.config.id + "-inner-shadow)"); - obj.canvas.canvas.childNodes[3].setAttribute("filter", "url(#" + obj.config.id + "-inner-shadow)"); + obj.canvas.canvas.childNodes[2].setAttribute("filter", "url(#inner-shadow)"); + obj.canvas.canvas.childNodes[3].setAttribute("filter", "url(#inner-shadow)"); } // var clear