From ad0e8ba731553088b705f53f93683ed104bbe611 Mon Sep 17 00:00:00 2001 From: adinvadim Date: Fri, 27 May 2016 20:53:31 +0300 Subject: [PATCH 1/2] feat(form-field) Added generator for name, val, id, checked fields --- .../checkbox-group/checkbox-group.bemhtml | 6 ++++-- common.blocks/checkbox-group/checkbox-group.bh.js | 3 +++ common.blocks/checkbox/checkbox.bemhtml | 8 ++++++-- common.blocks/checkbox/checkbox.bh.js | 4 ++++ .../input/__control/input__control.bemhtml | 9 --------- .../input/__control/input__control.bh.js | 13 ------------- common.blocks/input/input.bemhtml | 9 ++++++++- common.blocks/input/input.bh.js | 15 +++++++++++++++ common.blocks/radio-group/radio-group.bemhtml | 7 +++++-- common.blocks/radio-group/radio-group.bh.js | 14 ++++++++++++++ common.blocks/radio/radio.bemhtml | 8 ++++++-- common.blocks/radio/radio.bh.js | 5 +++++ common.blocks/select/select.bemhtml | 7 +++++-- common.blocks/select/select.bh.js | 4 ++++ common.blocks/textarea/textarea.bemhtml | 8 +++++--- common.blocks/textarea/textarea.bh.js | 5 ++++- 16 files changed, 88 insertions(+), 37 deletions(-) delete mode 100644 common.blocks/input/__control/input__control.bemhtml delete mode 100644 common.blocks/input/__control/input__control.bh.js create mode 100644 common.blocks/input/input.bh.js create mode 100644 common.blocks/radio-group/radio-group.bh.js diff --git a/common.blocks/checkbox-group/checkbox-group.bemhtml b/common.blocks/checkbox-group/checkbox-group.bemhtml index 294eba2..0cdf0f5 100644 --- a/common.blocks/checkbox-group/checkbox-group.bemhtml +++ b/common.blocks/checkbox-group/checkbox-group.bemhtml @@ -1,9 +1,11 @@ block('checkbox-group')( match(function() { return this._form_field; }).def()(function() { - var ctx = this.ctx; + this.ctx = this.extend({ + name : this._form_field.name, + val : this._form_field.val, + }, this.ctx); - ctx.name || (ctx.name = this._form_field.name); this.mods.disabled = this._form_field.mods.disabled; return applyNext(); diff --git a/common.blocks/checkbox-group/checkbox-group.bh.js b/common.blocks/checkbox-group/checkbox-group.bh.js index 7ad8239..0205c23 100644 --- a/common.blocks/checkbox-group/checkbox-group.bh.js +++ b/common.blocks/checkbox-group/checkbox-group.bh.js @@ -5,6 +5,9 @@ module.exports = function(bh) { if(_form_field) { json.name = json.name || _form_field.name; + json.val = json.val || _form_field.val; + + ctx.mod('disabled', _form_field.mods.disabled); } }); diff --git a/common.blocks/checkbox/checkbox.bemhtml b/common.blocks/checkbox/checkbox.bemhtml index caf0144..bf2033d 100644 --- a/common.blocks/checkbox/checkbox.bemhtml +++ b/common.blocks/checkbox/checkbox.bemhtml @@ -1,9 +1,13 @@ block('checkbox')( match(function() { return this._form_field; }).def()(function() { - var ctx = this.ctx; + this.ctx = this.extend({ + name : this._form_field.name, + val : this._form_field.val, + id : this._form_field.id, + checked : this._form_field.checked + }, this.ctx); - ctx.name || (ctx.name = this._form_field.name); this.mods.disabled = this._form_field.mods.disabled; return applyNext(); diff --git a/common.blocks/checkbox/checkbox.bh.js b/common.blocks/checkbox/checkbox.bh.js index 1fed4ae..f92e174 100644 --- a/common.blocks/checkbox/checkbox.bh.js +++ b/common.blocks/checkbox/checkbox.bh.js @@ -5,6 +5,10 @@ module.exports = function(bh) { if(_form_field) { json.name = json.name || _form_field.name; + json.val = json.val || _form_field.val; + json.id = json.id || _form_field.id; + json.checked = json.checked || _form_field.checked; + ctx.mod('disabled', _form_field.mods.disabled); } }); diff --git a/common.blocks/input/__control/input__control.bemhtml b/common.blocks/input/__control/input__control.bemhtml deleted file mode 100644 index a61bccf..0000000 --- a/common.blocks/input/__control/input__control.bemhtml +++ /dev/null @@ -1,9 +0,0 @@ -block('input').elem('control')( - - match(function() { return this._form_field; }).def()(function() { - this._input.id = this._input.id || this._form_field.id; - this._input.name = this._input.name || this._form_field.name; - - return applyNext(); - }) -); diff --git a/common.blocks/input/__control/input__control.bh.js b/common.blocks/input/__control/input__control.bh.js deleted file mode 100644 index 681607e..0000000 --- a/common.blocks/input/__control/input__control.bh.js +++ /dev/null @@ -1,13 +0,0 @@ -module.exports = function(bh) { - - bh.match('input__control', function(ctx) { - var _input = ctx.tParam('_input'), - _form_field = ctx.tParam('_form_field'); - - if(_form_field) { - _input.id = _input.id || _form_field.id; - _input.name = _input.name || _form_field.name; - } - }); - -}; diff --git a/common.blocks/input/input.bemhtml b/common.blocks/input/input.bemhtml index e18a6fc..c574bde 100644 --- a/common.blocks/input/input.bemhtml +++ b/common.blocks/input/input.bemhtml @@ -1,8 +1,15 @@ block('input')( - match(function() { return this._form_field; }).mix()(function() { + match(function() { return this._form_field; }).def()(function() { + this.ctx = this.extend({ + name : this._form_field.name, + val : this._form_field.val, + id : this._form_field.id + }, this.ctx); + this.mods.disabled = this._form_field.mods.disabled; return applyNext(); }) + ); diff --git a/common.blocks/input/input.bh.js b/common.blocks/input/input.bh.js new file mode 100644 index 0000000..c6c2a8c --- /dev/null +++ b/common.blocks/input/input.bh.js @@ -0,0 +1,15 @@ +module.exports = function(bh) { + + bh.match('input', function(ctx, json) { + var _form_field = ctx.tParam('_form_field'); + + if(_form_field) { + json.name = json.name || _form_field.name; + json.val = json.val || _form_field.val; + json.id = json.id || _form_field.id; + + ctx.mod('disabled', _form_field.mods.disabled); + } + }); + +}; diff --git a/common.blocks/radio-group/radio-group.bemhtml b/common.blocks/radio-group/radio-group.bemhtml index e8ce541..a9ef326 100644 --- a/common.blocks/radio-group/radio-group.bemhtml +++ b/common.blocks/radio-group/radio-group.bemhtml @@ -1,11 +1,14 @@ block('radio-group')( match(function() { return this._form_field; }).def()(function() { - var ctx = this.ctx; + this.ctx = this.extend({ + name : this._form_field.name, + val : this._form_field.val, + }, this.ctx); - ctx.name || (ctx.name = this._form_field.name); this.mods.disabled = this._form_field.mods.disabled; return applyNext(); }) + ); diff --git a/common.blocks/radio-group/radio-group.bh.js b/common.blocks/radio-group/radio-group.bh.js new file mode 100644 index 0000000..485a5ab --- /dev/null +++ b/common.blocks/radio-group/radio-group.bh.js @@ -0,0 +1,14 @@ +module.exports = function(bh) { + + bh.match('radio-group', function(ctx, json) { + var _form_field = ctx.tParam('_form_field'); + + if(_form_field) { + json.name = json.name || _form_field.name; + json.val = json.val || _form_field.val; + + ctx.mod('disabled', _form_field.mods.disabled); + } + }); + +}; diff --git a/common.blocks/radio/radio.bemhtml b/common.blocks/radio/radio.bemhtml index fbd6278..d8c22ea 100644 --- a/common.blocks/radio/radio.bemhtml +++ b/common.blocks/radio/radio.bemhtml @@ -1,9 +1,13 @@ block('radio')( match(function() { return this._form_field; }).def()(function() { - var ctx = this.ctx; + this.ctx = this.extend({ + name : this._form_field.name, + val : this._form_field.val, + id : this._form_field.id, + checked : this._form_field.checked + }, this.ctx); - ctx.name || (ctx.name = this._form_field.name); this.mods.disabled = this._form_field.mods.disabled; return applyNext(); diff --git a/common.blocks/radio/radio.bh.js b/common.blocks/radio/radio.bh.js index ad9fa8c..7b53367 100644 --- a/common.blocks/radio/radio.bh.js +++ b/common.blocks/radio/radio.bh.js @@ -5,8 +5,13 @@ module.exports = function (bh) { if(_form_field) { json.name = json.name || _form_field.name; + json.val = json.val || _form_field.val; + json.id = json.id || _form_field.id; + json.checked = json.checked || _form_field.checked; + ctx.mod('disabled', _form_field.mods.disabled); } + }); }; diff --git a/common.blocks/select/select.bemhtml b/common.blocks/select/select.bemhtml index 68ab97f..91410ef 100644 --- a/common.blocks/select/select.bemhtml +++ b/common.blocks/select/select.bemhtml @@ -1,9 +1,12 @@ block('select')( match(function() { return this._form_field; }).def()(function() { - var ctx = this.ctx; + this.ctx = this.extend({ + name : this._form_field.name, + val : this._form_field.val, + id : this._form_field.id + }, this.ctx); - ctx.name || (ctx.name = this._form_field.name); this.mods.disabled = this._form_field.mods.disabled; return applyNext(); diff --git a/common.blocks/select/select.bh.js b/common.blocks/select/select.bh.js index 468db49..5539e98 100644 --- a/common.blocks/select/select.bh.js +++ b/common.blocks/select/select.bh.js @@ -5,6 +5,10 @@ module.exports = function(bh) { if(_form_field) { json.name = json.name || _form_field.name; + json.val = json.val || _form_field.val; + json.id = json.id || _form_field.id; + + ctx.mod('disabled', _form_field.mods.disabled); } }); diff --git a/common.blocks/textarea/textarea.bemhtml b/common.blocks/textarea/textarea.bemhtml index c77d0e7..0a135d8 100644 --- a/common.blocks/textarea/textarea.bemhtml +++ b/common.blocks/textarea/textarea.bemhtml @@ -1,10 +1,12 @@ block('textarea')( match(function() { return this._form_field; }).def()(function() { - var ctx = this.ctx; + this.ctx = this.extend({ + name : this._form_field.name, + val : this._form_field.val, + id : this._form_field.id + }, this.ctx); - ctx.id || (ctx.id = this._form_field.id); - ctx.name || (ctx.name = this._form_field.name); this.mods.disabled = this._form_field.mods.disabled; return applyNext(); diff --git a/common.blocks/textarea/textarea.bh.js b/common.blocks/textarea/textarea.bh.js index b42baea..3c6173e 100644 --- a/common.blocks/textarea/textarea.bh.js +++ b/common.blocks/textarea/textarea.bh.js @@ -4,8 +4,11 @@ module.exports = function (bh) { var _form_field = ctx.tParam('_form_field'); if(_form_field) { - json.id = json.id || _form_field.id; json.name = json.name || _form_field.name; + json.val = json.val || _form_field.val; + json.id = json.id || _form_field.id; + + ctx.mod('disabled', _form_field.mods.disabled); } }); From 1d45b7024be983e03dd97f8f97d00a3e2461f02c Mon Sep 17 00:00:00 2001 From: adinvadim Date: Fri, 4 Nov 2016 17:20:03 +0300 Subject: [PATCH 2/2] feat(form-field) Label and control generator --- .../form-field/form-field.bemhtml.js | 26 +++++++-- .../generator/generator.bemjson.js | 55 +++++++++++++++++++ 2 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 example.bundles/generator/generator.bemjson.js diff --git a/common.blocks/form-field/form-field.bemhtml.js b/common.blocks/form-field/form-field.bemhtml.js index 8b58f06..aed26b1 100644 --- a/common.blocks/form-field/form-field.bemhtml.js +++ b/common.blocks/form-field/form-field.bemhtml.js @@ -1,21 +1,39 @@ block('form-field')( - js()(true), - def()(function() { var _form_field = this.ctx; - _form_field.id = _form_field.id || this.generateId(); - this.ctx.js = this.extend(this.ctx.js || {}, { id : _form_field.id }); + _form_field.id = _form_field.id || this.generateId(); _form_field.mods = _form_field.mods || {}; return applyNext({ _form_field : _form_field }); }), + js()(function() { + return this.extend(applyNext(), { id : this._form_field.id }); + }), + attrs()(function () { return { 'data-name' : this.ctx.name }; + }), + + match(function() { return this.ctx.label !== undefined; }).content()(function() { + return [ + { + block : 'label', + content : this.ctx.label + }, + applyNext() + ]; + }), + + match(function() { return this.ctx.control !== undefined; }).content()(function() { + return [ + applyNext(), + this.ctx.control + ]; }) ); diff --git a/example.bundles/generator/generator.bemjson.js b/example.bundles/generator/generator.bemjson.js new file mode 100644 index 0000000..825ae07 --- /dev/null +++ b/example.bundles/generator/generator.bemjson.js @@ -0,0 +1,55 @@ +({ + block : 'page', + title : 'form', + styles : [{ elem : 'css', url : 'generator.min.css' }], + scripts : [{ elem : 'js', url : 'generator.min.js' }], + content : [ + { + block : 'form', + mods : { theme : 'islands', message : 'popup' }, + content : [ + { + block : 'form-field', + mods : { type : 'input' }, + name : 'q', + val : 'Generated val by form-field', + label : 'Label generate by form-field', + control : { + block : 'input', + mods : { theme : 'islands', size : 'l' } + } + }, + // @voischev examples + { + block : 'form-field', + mods : { type : 'input', required : true }, + val : 'type something...', + label : 'test' + }, + { + block : 'form-field', + mods : { type : 'input', required : true }, + label : 'test', + control : { + block : 'input', + mods : { 'my-super-mod' : 'ololo' }, + val : 'type something...' + } + }, + { + block : 'form-field', + mods : { type : 'input', required : true }, + content : [ + { + block : 'awsome-wrapper', + content : [ + { block : 'input', val : 'my custom content' }, + { block : 'label' } + ] + } + ] + } + ] + } + ] +})