Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

feat #276 custom image for Iconbutton #324

Closed
wants to merge 1 commit into from

3 participants

Srinath M Fabio Crisci jakub-g
Srinath M

This pull request allows users to provide their own icon image for Iconbutton widget

test/aria/templates/issue276/IconButtonTestCase.js
((17 lines not shown))
+ runTemplateTest : function () {
+ this.__checkIconButtonProperties();
+ this.__finishTest();
+ },
+ __checkIconButtonProperties : function () {
+ var iconBtnId, domUtil = aria.utils.Dom, iconBtnElement, width, height, imageURL, imagename;
+ iconBtnId = this.getWidgetInstance("myid")._domId + "_iconbtn";
+ iconBtnElement = aria.utils.Dom.getElementById(iconBtnId);
+ width = domUtil.getStyle(iconBtnElement, "width");
+ height = domUtil.getStyle(iconBtnElement, "height");
+ // Background url is different for different browsers, so just checking image name
+ imageURL = domUtil.getStyle(iconBtnElement, "background").split(' ')[0].replace(/("|')/g, "");
+ imagename = imageURL.substring(imageURL.lastIndexOf('/') + 1, imageURL.lastIndexOf(')'));
+ this.assertTrue(width == "42px", "Width is not proper");
+ this.assertTrue(height == "16px", "Height is not proper");
+ this.assertTrue(imagename == "icon-check.png", "Image is not proper");
jakub-g Collaborator
jakub-g added a note

It's better to use assertEquals(a, b, msg) instead of assertTrue (you can then easier see the actual in expected value, as they'll be available in the stack trace).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
jakub-g jakub-g commented on the diff
test/aria/templates/issue276/IconButtonTestCase.js
@@ -0,0 +1,39 @@
+Aria.classDefinition({
+ $classpath : "test.aria.templates.issue276.IconButtonTestCase",
jakub-g Collaborator
jakub-g added a note

You've created a test case file but haven't added it to any test suite. Please reference this test in TemplatesTestSuite.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
src/aria/widgets/action/IconButton.js
@@ -48,7 +55,61 @@ Aria.classDefinition({
* @private
*/
_widgetMarkupContent : function (out) {
- this._icon.writeMarkup(out);
+ var cfg = this._cfg, id = this._domId+"_iconbtn", tooltip = cfg.tooltip, iconInfo, sourceImage = cfg.sourceImage;
jakub-g Collaborator
jakub-g added a note

It's better to split this into multiple lines for readability. Also for better experience with debuggers (although here's it's not the big deal as we read from cfg mostly, but this holds especially when invoking functions).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
src/aria/widgets/action/IconButton.js
@@ -48,7 +55,61 @@ Aria.classDefinition({
* @private
*/
_widgetMarkupContent : function (out) {
- this._icon.writeMarkup(out);
+ var cfg = this._cfg, id = this._domId+"_iconbtn", tooltip = cfg.tooltip, iconInfo, sourceImage = cfg.sourceImage;
+ if (sourceImage) {
+ iconInfo = {
jakub-g Collaborator
jakub-g added a note

I'd remove iconInfo completely from line 58 and put var here at the beginning.

Generally (it's a matter of personal taste though) I prefer to put var in the smallest possible scope instead of declaring all the vars at the beginning of the function -- with the notable exception like this:

var a, b;
if (something) { 
  a = 1;
  b = 2;
}
else {
  a = 3;
  b = 4;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
test/aria/templates/issue276/IconButtonTestCase.js
((7 lines not shown))
+ this.setTestEnv({
+ template : "test.aria.templates.issue276.TemplateIconBtn"
+ });
+
+ },
+
+ $prototype : {
+ tearDown : function () {
+ aria.core.IO.$unregisterListeners(this);
+ },
+ runTemplateTest : function () {
+ this.__checkIconButtonProperties();
+ this.__finishTest();
+ },
+ __checkIconButtonProperties : function () {
+ var iconBtnId, domUtil = aria.utils.Dom, iconBtnElement, width, height, imageURL, imagename;
jakub-g Collaborator
jakub-g added a note

As mentioned in the other place, I would put var just before each assignment to a variable, since the code here is linear, without if-s. Also, some newlines (e.g. before the assertions) will make the code more pleasant to read.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
src/aria/widgets/action/IconButton.js
((37 lines not shown))
+ cssClasses += " xBlock"
+ }
+ return cssClasses;
+ },
+ /**
+ * Return the icon style for a given icon
+ * @param {Object} iconInfo
+ * @return {String}
+ */
+ _getIconStyle : function (iconInfo) {
+ var cfg = this._cfg;
+ var vAlign = !iconInfo.verticalAlign ? "" : "vertical-align: " + iconInfo.verticalAlign;
+ var margins = "margin: 0 0 0 0 "; // default value
+
+ if (cfg.margins != null && cfg.margins.match(/^(\d+|x) (\d+|x) (\d+|x) (\d+|x)$/)) {
+ var margArray = cfg.margins.split(" ");
jakub-g Collaborator
jakub-g added a note

If you rename margArray to some shorter identifier, the next assignment will fit in one line. Since margArray is a local variable and is supposed to be used just in the next line, inside this short if, its name is not extremely important. You could name it even m or sth like this.

Fabio Crisci
piuccio added a note

Please don't use m, in non minified code names are meant to be read by humans, so please choose a meaningful name.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Fabio Crisci

I don't really understand why this is not done at Icon level.
IconButton is simply a button creating an Icon widget inside. We could improve both widgets reusing the same code.

Apparenlty you just copied and pasted the code from Icon.writeMarkup. This is bad both because the code is duplicated but also because you're doing more than what's needed:

  • Why are you handling the tooltip?
  • Why are you adding the cfg.margins on the image, those are for the button.
test/aria/templates/issue276/TemplateIconBtn.tpl
@@ -0,0 +1,19 @@
+{Template {
+ $classpath:'test.aria.templates.issue276.TemplateIconBtn',
+ $hasScript:false
+}}
+
+ {macro main()}
+
+ {@aria:IconButton {
+ id:"myid",
+ sourceImage:{ path:"test/aria/templates/issue276/icon-check.png", width:42},
Fabio Crisci
piuccio added a note

This path is relative, your test might fail depending on where files and images are deployed.

Please use

aria.core.DownloadMgr.resolveURL("test/aria/templates/issue276/icon-check.png")

instead. It'll give you the absolute path computed accordingly to where your test is.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
test/aria/templates/issue276/IconButtonTestCase.js
@@ -0,0 +1,40 @@
+Aria.classDefinition({
+ $classpath : "test.aria.templates.issue276.IconButtonTestCase",
+ $extends : "aria.jsunit.TemplateTestCase",
+ $constructor : function () {
+ this.$TemplateTestCase.constructor.call(this);
+
+ this.setTestEnv({
+ template : "test.aria.templates.issue276.TemplateIconBtn"
+ });
+
+ },
+
+ $prototype : {
+ tearDown : function () {
+ aria.core.IO.$unregisterListeners(this);
Fabio Crisci
piuccio added a note

Damn copy/paste! What's this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Fabio Crisci

Integrated in fc797d0

Fabio Crisci piuccio closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 30, 2013
  1. Srinath M
This page is out of date. Refresh to see the latest.
42 src/aria/widgets/CfgBeans.js
View
@@ -946,6 +946,27 @@ Aria.beanDefinitions({
$type : "json:String",
$description : "The name of the sprite and the icon that is to be used in the form sprite:icon",
$default : null
+ },
+ "sourceImage" : {
+ $type : "json:Object",
+ $description : "Configuration for custom image",
+ $properties : {
+ "path" : {
+ $type : "json:String",
+ $description : "Path of the image",
+ $default : null
+ },
+ "width" : {
+ $type : "json:Integer",
+ $description : "Width of the image",
+ $default : 16
+ },
+ "height" : {
+ $type : "json:Integer",
+ $description : "Height of the image",
+ $default : 16
+ }
+ }
}
}
},
@@ -1031,6 +1052,27 @@ Aria.beanDefinitions({
$type : "json:String",
$description : "The name of the sprite and the icon that is to be used in the form sprite:icon",
$default : null
+ },
+ "sourceImage" : {
+ $type : "json:Object",
+ $description : "Configuration for custom image",
+ $properties : {
+ "path" : {
+ $type : "json:String",
+ $description : "Path of the image",
+ $default : null
+ },
+ "width" : {
+ $type : "json:Integer",
+ $description : "Width of the image",
+ $default : 16
+ },
+ "height" : {
+ $type : "json:Integer",
+ $description : "Height of the image",
+ $default : 16
+ }
+ }
}
}
},
23 src/aria/widgets/Icon.js
View
@@ -63,8 +63,16 @@ Aria.classDefinition({
* @param {aria.templates.MarkupWriter} out the html output writer
*/
writeMarkup : function (out) {
- var cfg = this._cfg, id = this._domId, tooltip = cfg.tooltip, iconInfo;
- iconInfo = this._getIconInfo(cfg.icon);
+ var cfg = this._cfg;
+ var id = this._domId;
+ var tooltip = cfg.tooltip;
+ var sourceImage = cfg.sourceImage;
+ var iconInfo = sourceImage ? {
+ "imageURL" : sourceImage.path,
+ "width" : sourceImage.width,
+ "height" : sourceImage.height
+ } : this._getIconInfo(cfg.icon);
+
if (!iconInfo) {
tooltip = this.ERROR_ICON_TITLE.replace('%', cfg.icon);
iconInfo = this._getErrIcon();
@@ -156,10 +164,13 @@ Aria.classDefinition({
} else if (iconInfo.margins != null) {
margins = iconInfo.margins;
}
-
- return [margins, ';padding:0;background-position:-', iconInfo.iconLeft, 'px -', iconInfo.iconTop,
- 'px;width:', iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
-
+ if (cfg.sourceImage) {
+ return [margins, ';padding:0;background:url(', iconInfo.imageURL, ') no-repeat; width:',
+ iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
+ } else {
+ return [margins, ';padding:0;background-position:-', iconInfo.iconLeft, 'px -', iconInfo.iconTop,
+ 'px;width:', iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
+ }
},
/**
3  src/aria/widgets/action/IconButton.js
View
@@ -34,7 +34,8 @@ Aria.classDefinition({
* @protected
*/
this._icon = new aria.widgets.Icon({
- icon : cfg.icon
+ icon : cfg.icon,
+ sourceImage : cfg.sourceImage
}, ctxt, lineNumber);
},
$destructor : function () {
3  test/aria/templates/TemplatesTestSuite.js
View
@@ -51,6 +51,9 @@ Aria.classDefinition({
this.addTests("test.aria.templates.issue142.HtmlStyleTemplateTestCase");
this.addTests("test.aria.templates.issue279.ButtonSpacingTestCase");
+ this.addTests("test.aria.templates.issue276.IconButtonTestCase");
+
+
this.addTests("test.aria.templates.statements.StatementsTestSuite");
}
38 test/aria/templates/issue276/IconButtonTestCase.js
View
@@ -0,0 +1,38 @@
+Aria.classDefinition({
+ $classpath : "test.aria.templates.issue276.IconButtonTestCase",
jakub-g Collaborator
jakub-g added a note

You've created a test case file but haven't added it to any test suite. Please reference this test in TemplatesTestSuite.js.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ $extends : "aria.jsunit.TemplateTestCase",
+ $constructor : function () {
+ this.$TemplateTestCase.constructor.call(this);
+
+ this.setTestEnv({
+ template : "test.aria.templates.issue276.TemplateIconBtn"
+ });
+
+ },
+
+ $prototype : {
+ runTemplateTest : function () {
+ this.__checkIconButtonProperties();
+ this.__finishTest();
+ },
+ __checkIconButtonProperties : function () {
+ var iconBtnId = this.getWidgetInstance("myid")._domId;
+ var domUtil = aria.utils.Dom;
+ // for getting iconbutton image style
+ var iconBtnElement = domUtil.getDomElementsChildByTagName(domUtil.getElementById(iconBtnId), 'span')[4];
+ var width = domUtil.getStyle(iconBtnElement, "width");
+ var height = domUtil.getStyle(iconBtnElement, "height");
+ // Background url is different for different browsers, so just checking image name
+ var imageURL = domUtil.getStyle(iconBtnElement, "background").split(' ')[0].replace(/("|')/g, "");
+ var imagename = imageURL.substring(imageURL.lastIndexOf('/') + 1, imageURL.lastIndexOf(')'));;
+
+ this.assertEquals(width, "42px", "Width is not proper");
+ this.assertEquals(height, "16px", "Height is not proper");
+ this.assertEquals(imagename, "icon-check.png", "Image is not proper");
+
+ },
+ __finishTest : function () {
+ this.notifyTemplateTestEnd();
+ }
+ }
+});
19 test/aria/templates/issue276/TemplateIconBtn.tpl
View
@@ -0,0 +1,19 @@
+{Template {
+ $classpath:'test.aria.templates.issue276.TemplateIconBtn',
+ $hasScript:false
+}}
+
+ {macro main()}
+
+ {@aria:IconButton {
+ id:"myid",
+ sourceImage:{ path:aria.core.DownloadMgr.resolveURL("test/aria/templates/issue276/icon-check.png"), width:42},
+ label:"mybutton"
+ } /}
+ <br/>
+ <br/>
+
+
+ {/macro}
+
+{/Template}
BIN  test/aria/templates/issue276/icon-check.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Something went wrong with that request. Please try again.