support closeText for overlay.Fixes #657

kissyteam · Jun 30, 2014 · 2c15583 · 2c15583
1 parent 7f80647
commit 2c15583
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 47 deletions.
diff --git a/src/overlay/demo/other/mask/hide-on-click.html b/src/overlay/demo/other/mask/hide-on-click.html
@@ -21,37 +21,35 @@ <h1>click mask to hide</h1>
 </div>
 
 <script>
-        var S = KISSY;
-        var start = (+new Date());
-        S.use("overlay,node", function (S, Overlay,$) {
-            alert("loaded: " + ((+new Date()) - start));
-            var o = new Overlay.Dialog({
-                width: 500,
-                height: 500,
-                mask: {
-                    closeOnClick: 1
-                },
+    var S = KISSY;
+    var start = (+new Date());
+    S.use("overlay,node", function (S, Overlay, $) {
+        alert("loaded: " + ((+new Date()) - start));
+        var o = new Overlay.Dialog({
+            width: 500,
+            height: 500,
+            mask: {
+                closeOnClick: 1
+            },
 //                closeAction:'destroy',
 //                effect: {
 //                    effect: 'fade'
 //                },
-                zIndex: 1000
-            });
-
-            o.on('show', function () {
-                S.log('show');
-            });
-
-            o.on('hide', function () {
-                S.log('hide');
-            });
+            zIndex: 1000
+        });
 
-            $("#t2").on("click", function () {
-                o.show().center();
-            });
+        o.on('show', function () {
+            S.log('show');
+        });
 
+        o.on('hide', function () {
+            S.log('hide');
         });
 
+        $("#t2").on("click", function () {
+            o.show().center();
+        });
+    });
 </script>
 </body>
 </html>
diff --git a/src/overlay/demo/other/mask/mask_anim.html b/src/overlay/demo/other/mask/mask_anim.html
@@ -18,36 +18,35 @@
     <button id="t2" class="ks-button">open dialog with mask anim</button>
 </div>
 <script>
-        var S=KISSY;
-        var start = (+new Date());
-        S.use("overlay,node", function (S, Overlay,$) {
-            alert("loaded: " + ((+new Date()) - start));
-            var o = new Overlay.Dialog({
-                width: 500,
-                height: 500,
-                mask: {
-                    effect: 'fade'
-                },
+    var S = KISSY;
+    var start = (+new Date());
+    S.use("overlay,node", function (S, Overlay, $) {
+        alert("loaded: " + ((+new Date()) - start));
+        var o = new Overlay.Dialog({
+            width: 500,
+            height: 500,
+            closeText:'c',
+            mask: {
+                effect: 'fade'
+            },
 //                effect: {
 //                    effect: 'fade'
 //                },
-                zIndex: 1000
-            });
-
-            o.on('show', function () {
-                S.log('show event');
-            });
-
-            o.on('hide', function () {
-                S.log('hide event');
-            });
+            zIndex: 1000
+        });
 
-            $("#t2").on("click", function () {
-                o.show().center();
-            });
+        o.on('show', function () {
+            S.log('show event');
+        });
 
+        o.on('hide', function () {
+            S.log('hide event');
         });
 
+        $("#t2").on("click", function () {
+            o.show().center();
+        });
+    });
 </script>
 </body>
 </html>
diff --git a/src/overlay/src/overlay/control.js b/src/overlay/src/overlay/control.js
@@ -127,6 +127,11 @@ module.exports = Container.extend([
             value: HIDE
         },
 
+        closeText: {
+            value: 'close',
+            render: 1
+        },
+
         visible: {
             value: false
         }

diff --git a/src/overlay/src/overlay/overlay-xtpl.html b/src/overlay/src/overlay/overlay-xtpl.html
@@ -1,9 +1,10 @@
 {{#block ('ks-overlay-closable')}}
     {{#if (closable)}}
         <a href="javascript:void('close')"
+           aria-label="Close"
            class="{{getBaseCssClasses ('close')}}"
            role='button'>
-            <span class="{{getBaseCssClasses ('close-x')}}">close</span>
+            <span class="{{getBaseCssClasses ('close-x')}}">{{{closeText}}}</span>
         </a>
     {{/if}}
 {{/block}}