(radio|checkbox)_type_button: The focus doesn't put on control (close #…

…711, close #712)
bem · Jun 24, 2014 · 5da4ae9 · 5da4ae9
1 parent c1fb66f
commit 5da4ae9
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 46 deletions.
diff --git a/common.blocks/checkbox/_type/checkbox_type_button.bemhtml b/common.blocks/checkbox/_type/checkbox_type_button.bemhtml
@@ -27,7 +27,6 @@ block('checkbox').mod('type', 'button')(
         applyCtx({
             block : 'button',
             mix : [{ block : 'checkbox', mods : mods, js : ctx.js || true }].concat(ctx.mix || []),
-            tag : 'label',
             mods : buttonMods,
             content : buttonContent
         });

diff --git a/common.blocks/checkbox/_type/checkbox_type_button.bh.js b/common.blocks/checkbox/_type/checkbox_type_button.bh.js
@@ -27,7 +27,6 @@ module.exports = function(bh) {
         return {
             block : 'button',
             mix : [{ block : 'checkbox', mods : mods, js : json.js || true }].concat(ctx.mix() || []),
-            tag : 'label',
             mods : buttonMods,
             content : buttonContent
         };

diff --git a/common.blocks/checkbox/_type/checkbox_type_button.js b/common.blocks/checkbox/_type/checkbox_type_button.js
@@ -2,23 +2,36 @@ modules.define('checkbox', function(provide, Checkbox) {
 
 provide(Checkbox.decl({ modName : 'type', modVal : 'button' }, {
     onSetMod : {
-        'checked' : proxyMod,
-        'disabled' : proxyMod
-    },
+        'js' : {
+            'inited' : function() {
+                this.__base.apply(this, arguments);
+                this._button = this.findBlockOn('button')
+                    .on(
+                        { modName : 'checked', modVal : '*' },
+                        proxyModFromButton,
+                        this)
+                    .on(
+                        { modName : 'focused', modVal : '*' },
+                        proxyModFromButton,
+                        this);
+            }
+        },
 
-    _getButton : function() {
-        return this.findBlockOn('button');
-    },
-
-    _onChange : function() {
-        this.__base.apply(this, arguments);
-        this.hasMod('disabled') || this.setMod('focused');
+        'checked' : proxyModToButton,
+        'disabled' : proxyModToButton,
+        'focused' : function(modName, modVal) {
+            proxyModToButton.call(this, modName, modVal, false);
+        }
     }
 }));
 
-function proxyMod(modName, modVal) {
-    this._getButton().setMod(modName, modVal);
-    this.__base.apply(this, arguments);
+function proxyModToButton(modName, modVal, callBase) {
+    callBase !== false && this.__base.apply(this, arguments);
+    this._button.setMod(modName, modVal);
+}
+
+function proxyModFromButton(_, data) {
+    this.setMod(data.modName, data.modVal);
 }
 
 });
diff --git a/common.blocks/checkbox/_type/checkbox_type_button.roo b/common.blocks/checkbox/_type/checkbox_type_button.roo
@@ -0,0 +1,4 @@
+.checkbox_type_button .checkbox__control
+{
+    visibility: hidden;
+}
diff --git a/common.blocks/checkbox/_type/checkbox_type_button.spec.js b/common.blocks/checkbox/_type/checkbox_type_button.spec.js
@@ -45,6 +45,16 @@ describe('checkbox_type_button', function() {
             checkbox.findBlockOn('button').hasMod('disabled').should.be.false;
         });
     });
+
+    describe('focused', function() {
+        it('should set/unset "disabled" mod for button according to self', function() {
+            checkbox.setMod('focused');
+            checkbox.findBlockOn('button').hasMod('focused').should.be.true;
+
+            checkbox.delMod('focused');
+            checkbox.findBlockOn('button').hasMod('focused').should.be.false;
+        });
+    });
 });
 
 provide();

diff --git a/common.blocks/radio/_type/radio_type_button.bemhtml b/common.blocks/radio/_type/radio_type_button.bemhtml
@@ -27,7 +27,6 @@ block('radio').mod('type', 'button')(
         applyCtx({
             block : 'button',
             mix : { block : 'radio', mods : mods, js : true },
-            tag : 'label',
             mods : buttonMods,
             content : buttonContent
         });

diff --git a/common.blocks/radio/_type/radio_type_button.bh.js b/common.blocks/radio/_type/radio_type_button.bh.js
@@ -27,7 +27,6 @@ module.exports = function(bh) {
         return {
             block : 'button',
             mix : { block : 'radio', mods : mods, js : true },
-            tag : 'label',
             mods : buttonMods,
             content : buttonContent
         };

diff --git a/common.blocks/radio/_type/radio_type_button.js b/common.blocks/radio/_type/radio_type_button.js
@@ -2,31 +2,36 @@ modules.define('radio', function(provide, Radio) {
 
 provide(Radio.decl({ modName : 'type', modVal : 'button' }, {
     onSetMod : {
-        'checked' : proxyMod,
-        'disabled' : proxyMod
-    },
+        'js' : {
+            'inited' : function() {
+                this.__base.apply(this, arguments);
+                this._button = this.findBlockOn('button')
+                    .on(
+                        { modName : 'checked', modVal : '*' },
+                        proxyModFromButton,
+                        this)
+                    .on(
+                        { modName : 'focused', modVal : '*' },
+                        proxyModFromButton,
+                        this);
+            }
+        },
 
-    _getButton : function() {
-        return this.findBlockOn('button');
-    },
-
-    _onPointerClick : function() {
-        this.hasMod('disabled') || this.setMod('focused');
-    }
-}, {
-    live : function() {
-        return this
-            .liveBindTo(
-                { modName : 'type', modVal : 'button' },
-                'pointerclick',
-                this.prototype._onPointerClick)
-            .__base.apply(this, arguments);
+        'checked' : proxyModToButton,
+        'disabled' : proxyModToButton,
+        'focused' : function(modName, modVal) {
+            proxyModToButton.call(this, modName, modVal, false);
+        }
     }
 }));
 
-function proxyMod(modName, modVal) {
-    this._getButton().setMod(modName, modVal);
-    this.__base.apply(this, arguments);
+function proxyModToButton(modName, modVal, callBase) {
+    callBase !== false && this.__base.apply(this, arguments);
+    this._button.setMod(modName, modVal);
+}
+
+function proxyModFromButton(_, data) {
+    this.setMod(data.modName, data.modVal);
 }
 
 });
diff --git a/common.blocks/radio/_type/radio_type_button.roo b/common.blocks/radio/_type/radio_type_button.roo
@@ -0,0 +1,4 @@
+.radio_type_button .radio__control
+{
+    visibility: hidden;
+}
diff --git a/common.blocks/radio/_type/radio_type_button.spec.js b/common.blocks/radio/_type/radio_type_button.spec.js
@@ -47,15 +47,12 @@ describe('radio_type_button', function() {
     });
 
     describe('focused', function() {
-        it('should set "focused" mod on click', function() {
-            radioOption.domElem.trigger('pointerclick');
-            radioOption.hasMod('focused').should.be.true;
-        });
+        it('should set/unset "disabled" mod for button according to self', function() {
+            radioOption.setMod('focused');
+            radioOption.findBlockOn('button').hasMod('focused').should.be.true;
 
-        it('should not set "focused" mod on click while disabled', function() {
-            radioOption.setMod('disabled');
-            radioOption.domElem.trigger('pointerclick');
-            radioOption.hasMod('focused').should.be.false;
+            radioOption.delMod('focused');
+            radioOption.findBlockOn('button').hasMod('focused').should.be.false;
         });
     });
 });