Permalink
Browse files

feat #276 custom image for Iconbutton

  • Loading branch information...
1 parent e0b0913 commit 5a84f9c1e130c527d4e28d2357e4003edf95dc6b smadapathi committed Jan 11, 2013
@@ -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
+ }
+ }
}
}
},
@@ -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('');
+ }
},
/**
@@ -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 () {
@@ -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");
}
@@ -0,0 +1,38 @@
+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 : {
+ 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();
+ }
+ }
+});
@@ -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}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5a84f9c

Please sign in to comment.