From ec646fad1528fe5c6bcd0b74e52a9df529cf37a4 Mon Sep 17 00:00:00 2001 From: bellord13 Date: Mon, 14 Aug 2023 15:18:42 +0300 Subject: [PATCH] fix --- assets/toolkit/toolkit.css | 18 +++++++++++++++--- assets/toolkit/toolkit.js | 27 +++++++++++++++++---------- tests/cheatsheetTest.php | 21 ++++++++++++++++++++- 3 files changed, 52 insertions(+), 14 deletions(-) diff --git a/assets/toolkit/toolkit.css b/assets/toolkit/toolkit.css index ed4b22c..a778f78 100644 --- a/assets/toolkit/toolkit.css +++ b/assets/toolkit/toolkit.css @@ -73,7 +73,7 @@ input[type="color"] ~ .kit-field__color { padding: 1.5em 0 0 0; margin: 0 0 var(--kit-field-gap, 1.5em) 0; } -.kit-field .kit-field__hr { +.kit-field__hr { display: block; position: absolute; bottom: 0; @@ -82,7 +82,7 @@ input[type="color"] ~ .kit-field__color { border-top: 1px solid var(--kit-color-text); z-index: 0; } -.kit-field .kit-field__hr:after { +.kit-field__hr:after { content: ''; position: absolute; bottom: 0; @@ -164,6 +164,7 @@ input[type="color"] ~ .kit-field__color { font-family: var(--kit-font-family); list-style-type: none; } + .kit-field textarea[data-dirty='true'], .kit-field input[data-dirty='true'], .kit-field [data-dirty='true'] ~ .kit-field__display{ @@ -218,6 +219,7 @@ input[type="color"] ~ .kit-field__color { .kit-field textarea.focus, .kit-field input.focus { color: var(--kit-color-text); + border-color: transparent; } .kit-field textarea:focus ~.kit-field__label, .kit-field input:focus ~.kit-field__label, @@ -985,6 +987,7 @@ select.kit-field__input:disabled ~.kit-field__hr { -moz-transition: opacity 0.15s; transition: opacity 0.15s; min-width: 200px; + padding: 4px 4px 2px 4px; } .kit-dropdown.kit-active { opacity: 1; @@ -996,6 +999,8 @@ select.kit-field__input:disabled ~.kit-field__hr { -ms-user-select: none; user-select: none; cursor: pointer; + border-radius: 2px; + margin-bottom: 2px; } .kit-dropdown__option:hover { background: #e5e5e5; @@ -1110,11 +1115,18 @@ select.kit-field__input:disabled ~.kit-field__hr { } .kit-field--success ~.kit-field__label, -.kit-field--success ~.kit-field__error { +.kit-field--success ~.kit-field__error, +.kit-field--success ~.kit-field__message { opacity: 1; visibility: visible; color: var(--kit-color-success) !important; } +.kit-field--error ~.kit-field__error, +.kit-field--error ~.kit-field__message { + opacity: 1; + visibility: visible; + color: var(--kit-color-error) !important; +} .kit-field--success ~.kit-field__hr { border-color: var(--kit-color-success) !important; } diff --git a/assets/toolkit/toolkit.js b/assets/toolkit/toolkit.js index c44acbd..18529c6 100644 --- a/assets/toolkit/toolkit.js +++ b/assets/toolkit/toolkit.js @@ -341,7 +341,7 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) // изменение инпута function changeHandler(e) { - var select = e.target; + var select = e.target || e; changeSelect(select); } @@ -561,7 +561,7 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) } function escapeKeyHandler(e) { - if (e.keyCode == 27) { + if (e.keyCode === 27) { closeAll(null); } } @@ -752,8 +752,9 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) Inputs.prototype.changeFiled = function changeFiled(e) { var _this2 = this; var target = e.target || e; + var isInput = target.tagName === 'INPUT', isTextarea = target.tagName === 'TEXTAREA'; if (target.classList.contains('kit-field__input')) { - if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') { + if (isInput || isTextarea) { this.setDirty(target); var value_min = $(target).attr('value_min'); @@ -791,15 +792,21 @@ kit.PluginManager.register('toolkit', function(module, exports, require, global) }); }; - Inputs.prototype.calcAutoHeight = function calcAutoHeight(target) { - target.style.height = target.style.minHeight = 'auto'; - var h; - if (target.scrollHeight < 30) { - h = '30' + 'px'; + Inputs.prototype.calcAutoHeight = function calcAutoHeight(node) { + node.style.height = node.style.minHeight = 'auto'; + node.rows = 1; + var h, styles = getComputedStyle(node); + + var minH = support.toNumber(styles.getPropertyValue('padding-top').trim().replace('px', '')) + + support.toNumber(styles.getPropertyValue('padding-bottom').trim().replace('px', '')) + + support.toNumber(styles.getPropertyValue('line-height').trim().replace('px', '')); + + if (node.scrollHeight < minH) { + h = '' + minH + 'px'; } else { - h = target.scrollHeight + 'px'; + h = node.scrollHeight + 'px'; } - target.style.height = target.style.minHeight = h; + node.style.height = node.style.minHeight = h; }; diff --git a/tests/cheatsheetTest.php b/tests/cheatsheetTest.php index 177beee..84168f9 100644 --- a/tests/cheatsheetTest.php +++ b/tests/cheatsheetTest.php @@ -435,13 +435,32 @@ $APPLICATION->ShowHead();
templater()->render('kit:textarea', [ 'CLASS' => 'kit-field--check-mark-stroke', - //'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.', + 'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.', 'NAME' => 'textarea', 'VALUE' => '', 'MAXLENGTH' => 1000, 'LABEL' => 'textarea label', ]); ?>
+
templater()->render('kit:textarea', [ + 'CLASS' => 'kit-field--check-mark-stroke', + //'HINT' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.', + 'NAME' => 'textarea', + 'VALUE' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut blanditiis, consectetur hic illum in itaque, labore libero molestiae nisi, placeat possimus quasi quia quis ratione tempora voluptas voluptatum? Eaque, voluptatem.', + 'MAXLENGTH' => 1000, + 'LABEL' => 'textarea label', + ]); ?> +
+
templater()->render('kit:input', [ + 'TYPE' => 'tel', + 'HINT' => 'phone', + 'NAME' => 'phone', + 'VALUE' => '+7800', + 'LABEL' => 'phone', + ]); ?> +
multiple = true;