textarea: Resize is broken #1330

bem · Feb 12, 2015 · 6dd0284 · 6dd0284
1 parent 3a2f50e
commit 6dd0284
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 204 deletions.
diff --git a/common.blocks/textarea/__control/textarea__control.bemhtml b/common.blocks/textarea/__control/textarea__control.bemhtml
diff --git a/common.blocks/textarea/__control/textarea__control.bh.js b/common.blocks/textarea/__control/textarea__control.bh.js
diff --git a/common.blocks/textarea/textarea.bemhtml b/common.blocks/textarea/textarea.bemhtml
@@ -1,7 +1,25 @@
 block('textarea')(
     js()(true),
-    def()(function() {
-        applyNext({ _textarea : this.ctx });
+    tag()('textarea'),
+
+    // NOTE: mix below is to satisfy interface of `control`
+    mix()({ elem : 'control' }),
+
+    attrs()(function() {
+        var ctx = this.ctx,
+            attrs = {
+                id : ctx.id,
+                name : ctx.name,
+                tabindex : ctx.tabIndex,
+                placeholder : ctx.placeholder
+            };
+
+        ctx.autocomplete === false && (attrs.autocomplete = 'off');
+        ctx.mods.disabled && (attrs.disabled = 'disabled');
+
+        return attrs;
     }),
-    content()({ elem : 'control' })
+    content()(function() {
+        return this.ctx.val;
+    })
 );
diff --git a/common.blocks/textarea/textarea.bh.js b/common.blocks/textarea/textarea.bh.js
@@ -1,10 +1,23 @@
 module.exports = function(bh) {
-
     bh.match('textarea', function(ctx, json) {
+        var attrs = {
+                id : json.id,
+                name : json.name,
+                tabindex : json.tabIndex,
+                placeholder : json.placeholder
+            };
+
+        json.autocomplete === false && (attrs.autocomplete = 'off');
+
+        if(json.mods && json.mods.disabled) {
+            attrs.disabled = 'disabled';
+        }
+
         ctx
             .js(true)
-            .tParam('_textarea', json)
-            .content({ elem : 'control' }, true);
+            .tag('textarea')
+            .attrs(attrs)
+            .mix({ elem : 'control' }) // NOTE: satisfy interface of `control`
+            .content(json.val, true);
     });
-
 };
diff --git a/common.blocks/textarea/textarea.deps.js b/common.blocks/textarea/textarea.deps.js
@@ -2,8 +2,7 @@
     mustDeps : { block : 'i-bem', elems : 'dom' },
     shouldDeps : [
         {
-            mods : ['disabled', 'focused'],
-            elems : ['control']
+            mods : ['disabled', 'focused']
         },
         'control'
     ]

diff --git a/common.blocks/textarea/textarea.tests/gemini.bemjson.js b/common.blocks/textarea/textarea.tests/gemini.bemjson.js
@@ -165,12 +165,6 @@
                 mods : { theme : 'islands', size : 'm', width : 'available', disabled : true }
             },
             cls : 'islands-width-available-disabled'
-        },
-        {
-            block : 'textarea',
-            mods : { theme : 'islands', size : 'm' },
-            val : 'some val',
-            cls : 'islands-clear-enabled'
         }
     ]
 });
diff --git a/common.blocks/textarea/textarea.tests/simple.bemjson.js b/common.blocks/textarea/textarea.tests/simple.bemjson.js
@@ -39,7 +39,7 @@
         { attrs : { style : 'width: 350px;' }, content : {
             block : 'textarea',
             mods : { theme : 'simple', size : 'm', width : 'available' },
-            val : 'width',
+            val : 'width_available',
             placeholder : 'placeholder'
         } },
         { tag : 'hr' },
@@ -55,14 +55,12 @@
             mods : { theme : 'islands', size : 'm', disabled : true },
             val : 'disabled'
         } },
-
         { attrs : { style : 'width: 350px;' }, content : {
             block : 'textarea',
             mods : { theme : 'islands', size : 'm', width : 'available' },
-            val : 'width',
+            val : 'width_available',
             placeholder : 'placeholder'
         } },
-
         { tag : 'h3', content : 'size' },
         { tag : 'p', content : {
             block : 'textarea',

diff --git a/common.blocks/textarea/textarea.tmpl-specs/10-default.html b/common.blocks/textarea/textarea.tmpl-specs/10-default.html
@@ -1 +1 @@
-<div class="textarea i-bem" data-bem="{&quot;textarea&quot;:{}}"><textarea class="textarea__control"></textarea></div>
+<textarea class="textarea textarea__control i-bem" data-bem="{&quot;textarea&quot;:{}}"></textarea>
diff --git a/common.blocks/textarea/textarea.tmpl-specs/20-default_disabled.html b/common.blocks/textarea/textarea.tmpl-specs/20-default_disabled.html
@@ -1 +1 @@
-<div class="textarea textarea_disabled i-bem" data-bem="{&quot;textarea&quot;:{}}"><textarea class="textarea__control" disabled="disabled"></textarea></div>
+<textarea class="textarea textarea__control textarea_disabled i-bem" disabled="disabled" data-bem="{&quot;textarea&quot;:{}}"></textarea>
diff --git a/common.blocks/textarea/textarea.tmpl-specs/30-params.html b/common.blocks/textarea/textarea.tmpl-specs/30-params.html
@@ -1 +1 @@
-<div class="textarea i-bem" data-bem="{&quot;textarea&quot;:{}}"><textarea class="textarea__control" id="1" name="textarea1" tabindex="1" placeholder="hint" autocomplete="off">textarea</textarea></div>
+<textarea class="textarea textarea__control i-bem" id="1" name="textarea1" tabindex="1" placeholder="hint" autocomplete="off" data-bem="{&quot;textarea&quot;:{}}">textarea</textarea>
diff --git a/common.blocks/textarea/textarea.tmpl-specs/40-content.html b/common.blocks/textarea/textarea.tmpl-specs/40-content.html
@@ -1 +1 @@
-<div class="textarea i-bem" data-bem="{&quot;textarea&quot;:{}}"><textarea class="textarea__control">textarea</textarea></div>
+<textarea class="textarea textarea__control i-bem" data-bem="{&quot;textarea&quot;:{}}">textarea</textarea>
diff --git a/design/common.blocks/textarea/_theme/textarea_theme_islands.styl b/design/common.blocks/textarea/_theme/textarea_theme_islands.styl
@@ -2,135 +2,85 @@
 {
     font-family: Arial, Helvetica, sans-serif;
 
-    position: relative;
-
     display: inline-block;
 
-    min-height: 2em;
+    background: #fff;
 
-    background: rgba(0, 0, 0, 0.2);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    min-height: 2em;
 
-    /* Decorative element (inner background) */
-    &:before
-    {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        bottom: 1px;
-        left: 1px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    outline: none;
 
-        content: '';
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-        background: #fff;
+    &::-webkit-input-placeholder
+    {
+        color: #999;
+        text-indent: 0;
     }
 
-    .textarea__control
+    &::-moz-placeholder
     {
-        font: inherit;
-        line-height: inherit;
-
-        position: relative;
-
-        display: block;
-
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-        width: 100%;
-        height: 100%;
-
-        border: 0;
-        outline: none;
-        background: none;
-
-        -webkit-appearance: none;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-        &::-webkit-input-placeholder
-        {
-            color: #999;
-            text-indent: 0;
-        }
-
-        &::-moz-placeholder
-        {
-            opacity: 1;
-            color: #999;
-        }
+        opacity: 1;
+        color: #999;
     }
 
     &.textarea_focused
     {
-        z-index: 1;
-
-        background: rgba(178, 142, 0, 0.6);
-        box-shadow: 0 0 0 1px #ffcc00, inset 0 0 0 1px #ffcc00;
+        border-color: #ffcc00;
+        box-shadow: 0 0 0 1px #ffcc00;
     }
 
     &.textarea_disabled
     {
-        background: rgba(0, 0, 0, 0.08);
-
-        &:before
-        {
-            display: none;
-        }
+      resize: none;
+      cursor: default;
 
-        .textarea__control
-        {
-            color: rgba(0, 0, 0, 0.4);
-            cursor: default;
-
-            resize: none;
-        }
+      color: rgba(0, 0, 0, .4);
+      border-color: transparent;
+      background: rgba(0, 0, 0, .08);
     }
 
     &.textarea_size_s
     {
         font-size: 13px;
         line-height: 16px;
 
-        .textarea__control
-        {
-            padding-left: 6px;
-        }
+        padding-left: 6px;
     }
 
     &.textarea_size_m
     {
         font-size: 13px;
         line-height: 18px;
 
-        .textarea__control
-        {
-            padding: 4px 6px;
-        }
+        padding: 3px 5px;
     }
 
     &.textarea_size_l
     {
         font-size: 15px;
         line-height: 20px;
 
-        .textarea__control
-        {
-            padding: 6px 8px;
-        }
+        padding: 5px 7px;
     }
 
     &.textarea_size_xl
     {
         font-size: 18px;
         line-height: 22px;
 
-        .textarea__control
-        {
-            padding-left: 12px;
-        }
+        padding-left: 11px;
     }
 
     &.textarea_width_available
     {
-      width: 100%;
+        width: 100%;
+
+        resize: vertical;
     }
 }
diff --git a/design/common.blocks/textarea/_theme/textarea_theme_simple.styl b/design/common.blocks/textarea/_theme/textarea_theme_simple.styl
@@ -1,54 +1,33 @@
 .textarea_theme_simple
 {
-    position: relative;
+    font-family: inherit;
+    font-size: 100%;
 
     display: inline-block;
 
+    box-sizing: border-box;
     min-height: 2em;
+    margin: 0;
 
-    .textarea__control
-    {
-        position: relative;
-
-        display: block;
+    cursor: auto;
 
-        font-family: inherit;
-        font-size: 100%;
-
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        margin: 0;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    background: #fff;
 
-        background: #fff;
-
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
-        user-select: none;
-
-        -webkit-appearance: none;
-    }
+    -webkit-appearance: none;
 
     &.textarea_disabled
     {
         opacity: 0.6;
-
-        .textarea__control
-        {
-            cursor: auto;
-        }
     }
 
     &.textarea_focused
     {
-        .textarea__control
-        {
-            box-shadow: 0 0 5px 1px #fc0;
+        box-shadow: 0 0 5px 1px #fc0;
 
-            &:focus
-            {
-                outline: none;
-            }
+        &:focus
+        {
+            outline: none;
         }
     }