Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

feat #276 custom image for Iconbutton

  • Loading branch information...
commit 5a84f9c1e130c527d4e28d2357e4003edf95dc6b 1 parent e0b0913
Srinath M authored January 11, 2013
42  src/aria/widgets/CfgBeans.js
@@ -946,6 +946,27 @@ Aria.beanDefinitions({
946 946
                     $type : "json:String",
947 947
                     $description : "The name of the sprite and the icon that is to be used in the form sprite:icon",
948 948
                     $default : null
  949
+                },
  950
+                "sourceImage" : {
  951
+                    $type : "json:Object",
  952
+                    $description : "Configuration for custom image",
  953
+                    $properties : {
  954
+                        "path" : {
  955
+                            $type : "json:String",
  956
+                            $description : "Path of the image",
  957
+                            $default : null
  958
+                        },
  959
+                        "width" : {
  960
+                            $type : "json:Integer",
  961
+                            $description : "Width of the image",
  962
+                            $default : 16
  963
+                        },
  964
+                        "height" : {
  965
+                            $type : "json:Integer",
  966
+                            $description : "Height of the image",
  967
+                            $default : 16
  968
+                        }
  969
+                    }
949 970
                 }
950 971
             }
951 972
         },
@@ -1031,6 +1052,27 @@ Aria.beanDefinitions({
1031 1052
                     $type : "json:String",
1032 1053
                     $description : "The name of the sprite and the icon that is to be used in the form sprite:icon",
1033 1054
                     $default : null
  1055
+                },
  1056
+                "sourceImage" : {
  1057
+                    $type : "json:Object",
  1058
+                    $description : "Configuration for custom image",
  1059
+                    $properties : {
  1060
+                        "path" : {
  1061
+                            $type : "json:String",
  1062
+                            $description : "Path of the image",
  1063
+                            $default : null
  1064
+                        },
  1065
+                        "width" : {
  1066
+                            $type : "json:Integer",
  1067
+                            $description : "Width of the image",
  1068
+                            $default : 16
  1069
+                        },
  1070
+                        "height" : {
  1071
+                            $type : "json:Integer",
  1072
+                            $description : "Height of the image",
  1073
+                            $default : 16
  1074
+                        }
  1075
+                    }
1034 1076
                 }
1035 1077
             }
1036 1078
         },
23  src/aria/widgets/Icon.js
@@ -63,8 +63,16 @@ Aria.classDefinition({
63 63
          * @param {aria.templates.MarkupWriter} out the html output writer
64 64
          */
65 65
         writeMarkup : function (out) {
66  
-            var cfg = this._cfg, id = this._domId, tooltip = cfg.tooltip, iconInfo;
67  
-            iconInfo = this._getIconInfo(cfg.icon);
  66
+            var cfg = this._cfg;
  67
+            var id = this._domId;
  68
+            var tooltip = cfg.tooltip;
  69
+            var sourceImage = cfg.sourceImage;
  70
+            var iconInfo = sourceImage ? {
  71
+                "imageURL" : sourceImage.path,
  72
+                "width" : sourceImage.width,
  73
+                "height" : sourceImage.height
  74
+            } : this._getIconInfo(cfg.icon);
  75
+
68 76
             if (!iconInfo) {
69 77
                 tooltip = this.ERROR_ICON_TITLE.replace('%', cfg.icon);
70 78
                 iconInfo = this._getErrIcon();
@@ -156,10 +164,13 @@ Aria.classDefinition({
156 164
             } else if (iconInfo.margins != null) {
157 165
                 margins = iconInfo.margins;
158 166
             }
159  
-
160  
-            return [margins, ';padding:0;background-position:-', iconInfo.iconLeft, 'px -', iconInfo.iconTop,
161  
-                    'px;width:', iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
162  
-
  167
+            if (cfg.sourceImage) {
  168
+                return [margins, ';padding:0;background:url(', iconInfo.imageURL, ') no-repeat; width:',
  169
+                        iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
  170
+            } else {
  171
+                return [margins, ';padding:0;background-position:-', iconInfo.iconLeft, 'px -', iconInfo.iconTop,
  172
+                        'px;width:', iconInfo.width, 'px;height:', iconInfo.height, 'px;', vAlign].join('');
  173
+            }
163 174
         },
164 175
 
165 176
         /**
3  src/aria/widgets/action/IconButton.js
@@ -34,7 +34,8 @@ Aria.classDefinition({
34 34
          * @protected
35 35
          */
36 36
         this._icon = new aria.widgets.Icon({
37  
-            icon : cfg.icon
  37
+            icon : cfg.icon,
  38
+            sourceImage : cfg.sourceImage
38 39
         }, ctxt, lineNumber);
39 40
     },
40 41
     $destructor : function () {
3  test/aria/templates/TemplatesTestSuite.js
@@ -51,6 +51,9 @@ Aria.classDefinition({
51 51
         this.addTests("test.aria.templates.issue142.HtmlStyleTemplateTestCase");
52 52
         this.addTests("test.aria.templates.issue279.ButtonSpacingTestCase");
53 53
 
  54
+        this.addTests("test.aria.templates.issue276.IconButtonTestCase");
  55
+
  56
+
54 57
         this.addTests("test.aria.templates.statements.StatementsTestSuite");
55 58
 
56 59
     }
38  test/aria/templates/issue276/IconButtonTestCase.js
... ...
@@ -0,0 +1,38 @@
  1
+Aria.classDefinition({
  2
+    $classpath : "test.aria.templates.issue276.IconButtonTestCase",
  3
+    $extends : "aria.jsunit.TemplateTestCase",
  4
+    $constructor : function () {
  5
+        this.$TemplateTestCase.constructor.call(this);
  6
+
  7
+        this.setTestEnv({
  8
+            template : "test.aria.templates.issue276.TemplateIconBtn"
  9
+        });
  10
+
  11
+    },
  12
+
  13
+    $prototype : {
  14
+        runTemplateTest : function () {
  15
+            this.__checkIconButtonProperties();
  16
+            this.__finishTest();
  17
+        },
  18
+        __checkIconButtonProperties : function () {
  19
+            var iconBtnId = this.getWidgetInstance("myid")._domId;
  20
+            var domUtil = aria.utils.Dom;
  21
+            // for getting iconbutton image style
  22
+            var iconBtnElement = domUtil.getDomElementsChildByTagName(domUtil.getElementById(iconBtnId), 'span')[4];
  23
+            var width = domUtil.getStyle(iconBtnElement, "width");
  24
+            var height = domUtil.getStyle(iconBtnElement, "height");
  25
+            // Background url is different for different browsers, so just checking image name
  26
+            var imageURL = domUtil.getStyle(iconBtnElement, "background").split(' ')[0].replace(/("|')/g, "");
  27
+            var imagename = imageURL.substring(imageURL.lastIndexOf('/') + 1, imageURL.lastIndexOf(')'));;
  28
+
  29
+            this.assertEquals(width, "42px", "Width is not proper");
  30
+            this.assertEquals(height, "16px", "Height is not proper");
  31
+            this.assertEquals(imagename, "icon-check.png", "Image is not proper");
  32
+
  33
+        },
  34
+        __finishTest : function () {
  35
+            this.notifyTemplateTestEnd();
  36
+        }
  37
+    }
  38
+});
19  test/aria/templates/issue276/TemplateIconBtn.tpl
... ...
@@ -0,0 +1,19 @@
  1
+{Template {
  2
+	$classpath:'test.aria.templates.issue276.TemplateIconBtn',
  3
+	$hasScript:false
  4
+}}
  5
+
  6
+	{macro main()}
  7
+
  8
+		{@aria:IconButton {
  9
+			id:"myid",
  10
+			sourceImage:{ path:aria.core.DownloadMgr.resolveURL("test/aria/templates/issue276/icon-check.png"), width:42},
  11
+			label:"mybutton"
  12
+		} /}
  13
+		<br/>
  14
+		<br/>
  15
+
  16
+
  17
+	{/macro}
  18
+
  19
+{/Template}
BIN  test/aria/templates/issue276/icon-check.png

0 notes on commit 5a84f9c

Please sign in to comment.
Something went wrong with that request. Please try again.