diff --git a/Gulpfile.js b/Gulpfile.js index 6022121..1b027dc 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -25,7 +25,7 @@ var pkg = require("./package.json"), paths = widgetBuilderHelper.generatePaths(pkg), xmlversion = widgetBuilderHelper.xmlversion; -gulp.task("default", function() { +gulp.task("default", ["clean", "build"], function() { gulp.watch("./src/**/*", ["compress"]); gulp.watch("./src/**/*.js", ["copy:js"]); }); diff --git a/package.json b/package.json index dc82625..b2192cb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "DynamicImage", - "version": "5.0.0", + "version": "5.1.0", "description": "", "license": "", "author": "", @@ -34,4 +34,4 @@ "folders": "node ./node_modules/gulp/bin/gulp folders", "modeler": "node ./node_modules/gulp/bin/gulp modeler" } -} \ No newline at end of file +} diff --git a/src/DynamicImage/DynamicImage.xml b/src/DynamicImage/DynamicImage.xml index ab37964..a6a0ecf 100644 --- a/src/DynamicImage/DynamicImage.xml +++ b/src/DynamicImage/DynamicImage.xml @@ -49,12 +49,32 @@ Width Appearance - Maximum width of the image in pixels. + Maximum width of the image in pixels. + + + Width unit + Appearance + No inline style will be set on auto. Percentage relative to parent container + + Auto + Pixels + Percentage + Height Appearance - Maximum height of the image in pixels. + Maximum height of the image in pixels. + + + Height unit + Appearance + No inline style will be set on auto. Percentage is relative to parent container only when parent has an absolute height. + + Auto + Pixels + Percentage + Alt Caption diff --git a/src/DynamicImage/widget/DynamicImage.js b/src/DynamicImage/widget/DynamicImage.js index 3448afe..ebea6ff 100644 --- a/src/DynamicImage/widget/DynamicImage.js +++ b/src/DynamicImage/widget/DynamicImage.js @@ -1,45 +1,58 @@ define([ - "dojo/_base/declare", - "mxui/widget/_WidgetBase", + "dojo/_base/declare", + "mxui/widget/_WidgetBase", "dijit/_TemplatedMixin", - "dojo/dom-class", - "dojo/dom-style", - "dojo/_base/lang", - "dojo/on", - "dojo/text!DynamicImage/widget/template/DynamicImage.html" -], function (declare, _WidgetBase, _TemplatedMixin, domClass, domStyle, lang, on, widgetTemplate) { - "use strict"; - - return declare("DynamicImage.widget.DynamicImage", [_WidgetBase, _TemplatedMixin], { - - templateString: widgetTemplate, + "dojo/dom-class", + "dojo/dom-style", + "dojo/_base/lang", + "dojo/on" +], function (declare, _WidgetBase, _TemplatedMixin, domClass, domStyle, lang, on) { + return declare("DynamicImage.widget.DynamicImage", [_WidgetBase], { _contextObj: null, _clickHandler: null, + widthNumber: null, + heightNumber: null, + + postMixInProperties: function () { + // Hack around: Mendix widget will add width and height attribute to image node + // + // Rename the properties in the XML will break backward compatibility. + // Also html template could not be used. + this.widthNumber = this.width; + delete this.width; + this.heightNumber = this.height; + delete this.height; + }, + + buildRendering: function() { + var image = document.createElement("img"); + this.imageNode = image; + this.domNode = image; + this.setImageSize(false); + }, + update: function (obj, callback) { logger.debug(this.id + ".update"); this._contextObj = obj; if (obj !== null) { this._resetSubscriptions(); this._updateRendering(callback); + } else if (this.mxcontext && this.mxcontext.getTrackId()){ + mx.data.get({ + guid : this.mxcontext.getTrackId(), + callback : lang.hitch(this, function(obj) { + this._contextObj = obj; + this._updateRendering(callback); + }), + error: lang.hitch(this, function (err) { + console.warn(this.id + ".update mx.data.get failed"); + this._executeCallback(callback, "update mx.data.get errorCb"); + }) + }, this); } else { - if (this.mxcontext && this.mxcontext.getTrackId()) { - mx.data.get({ - guid : this.mxcontext.getTrackId(), - callback : lang.hitch(this, function(obj) { - this._contextObj = obj; - this._updateRendering(callback); - }), - error: lang.hitch(this, function (err) { - console.warn(this.id + ".update mx.data.get failed"); - this._executeCallback(callback, "update mx.data.get errorCb"); - }) - }, this); - } else { - logger.warn(this.id + ".update: no context object && no trackId"); - this._executeCallback(callback, "update no context"); - } + this._updateRendering(callback); } }, @@ -103,7 +116,14 @@ define([ if (url !== "" && typeof url !== "undefined" && url !== null) { this.imageNode.onerror = lang.hitch(this, this._setToDefaultImage); - this.imageNode.onload = lang.hitch(this, this._resizeImage); + // Some cases the height was rendering 0px + // With style (width: 200px; height: 20%) with context object url + // So, set the relative style after loading. + this.imageNode.onload = lang.hitch(this, function() { + if (this.imageNode) { + this.setImageSize(true); + } + }); this.imageNode.src = this.pathprefix + url + this.pathpostfix; if (this.tooltipattr) { this.imageNode.title = this._contextObj.get(this.tooltipattr); @@ -114,23 +134,24 @@ define([ return false; }, - _resizeImage: function() { + setImageSize: function(relative) { logger.debug(this.id + "._resizeImage"); - if (!this.imageNode) { - return; + // No width / height is browser default, equal to css auto + var width = ""; + if (this.widthUnit === "pixels") { + width = this.widthNumber + "px"; + } else if(this.widthUnit === "percentage" && relative) { + width = this.widthNumber + "%"; } - var origw, origh, factorw, factorh, factor; - origw = this.imageNode.width; - origh = this.imageNode.height; - if (origw > 0 && origh > 0) {//only apply if an valid image has been loaded - factorw = this.width / origw; - factorh = this.height / origh; - factor = (factorw < factorh ? factorw : factorh); - if (factor < 1) {//check prevents upscaling - domStyle.set(this.imageNode, "width", (factor * origw) + "px"); - domStyle.set(this.imageNode, "height", (factor * origh) + "px"); - } + domStyle.set(this.imageNode, "width", width); + + var height= ""; + if (this.heightUnit === "pixels") { + height = this.heightNumber + "px"; + } else if(this.heightUnit === "percentage" && relative) { + height = this.heightNumber + "%"; } + domStyle.set(this.imageNode, "height", height); }, _setToDefaultImage : function() { diff --git a/src/DynamicImage/widget/StaticImage.js b/src/DynamicImage/widget/StaticImage.js index c06e9ab..06bcabd 100644 --- a/src/DynamicImage/widget/StaticImage.js +++ b/src/DynamicImage/widget/StaticImage.js @@ -3,7 +3,7 @@ define([ "mxui/widget/_WidgetBase", "dijit/_TemplatedMixin", "dojo/_base/lang", - "dojo/text!DynamicImage/widget/template/DynamicImage.html" + "dojo/text!DynamicImage/widget/template/StaticImage.html" ], function (declare, _WidgetBase, _TemplatedMixin, lang, widgetTemplate) { "use strict"; diff --git a/src/DynamicImage/widget/template/DynamicImage.html b/src/DynamicImage/widget/template/StaticImage.html similarity index 90% rename from src/DynamicImage/widget/template/DynamicImage.html rename to src/DynamicImage/widget/template/StaticImage.html index c78c752..5f45119 100644 --- a/src/DynamicImage/widget/template/DynamicImage.html +++ b/src/DynamicImage/widget/template/StaticImage.html @@ -1 +1 @@ -${alt} \ No newline at end of file +${alt} diff --git a/src/package.xml b/src/package.xml index 367a8e0..e9e0613 100644 --- a/src/package.xml +++ b/src/package.xml @@ -1,6 +1,6 @@ - + diff --git a/test/[Test] DynamicImageViewer.mpr b/test/[Test] DynamicImageViewer.mpr index 8212be0..598b1a6 100644 Binary files a/test/[Test] DynamicImageViewer.mpr and b/test/[Test] DynamicImageViewer.mpr differ diff --git a/test/widgets/DynamicImage.mpk b/test/widgets/DynamicImage.mpk index a7a315c..55bb96d 100644 Binary files a/test/widgets/DynamicImage.mpk and b/test/widgets/DynamicImage.mpk differ