fixNsv

assets/bsCore/bsCore.js

@@ -1,11 +1,12 @@
 kit.PluginManager.register('bsCore', function(module, exports, require, global){
 
-    module.exports = {
+    /**
-        dom: {},
+     * @class kit.bsCore
-        util: {},
+     */
-    };
+    var bsCore = {};
-    var dom = module.exports.dom;
+    var dom = {};
-    var util = module.exports.util;
+    var util = {};
+
 
     /**
      * --------------------------------------------------------------------------
@@ -1269,7 +1270,7 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){
      * --------------------------------------------------------------------------
      */
 
-    module.exports.BaseComponent = function (Data, executeAfterTransition, getElement, EventHandler) {
+    bsCore.BaseComponent = function (Data, executeAfterTransition, getElement, EventHandler) {
 
         const VERSION = '5.0.2'
 
@@ -1333,6 +1334,11 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){
         dom.EventHandler
     );
 
+    bsCore.util = util;
+    bsCore.dom = dom;
+
+
+    module.exports = bsCore;
 
     return module.exports;
 });

assets/core/core.js

@@ -1,3 +1,8 @@
+/**
+ * @class kit
+ * @property  {kit.bsCore}
+ * @property  {kit.toolkit}
+ */
 window.kit = window.kit || {};
 (function(global){
     var stackPromise = {};
@@ -552,3 +557,4 @@ window.kit = window.kit || {};
     global.exec = manager.exec.bind(manager);
     global.require = manager.require.bind(manager);
 })(kit || window);
+

assets/core/core.register.js

@@ -76,9 +76,7 @@ kit.PluginManager.registerPlugins({
         deps: ['bsCore'],
         onRegister: function (plugin) {
             plugin.onLoadConditionHandler = function (event) {
-                console.log('1',event);
                 if(event.target && event.target.dataset && event.target.dataset.bsTarget && event.target.dataset.bsToggle === 'modal') {
-                    console.log('2');
                     kit.exec(plugin.id, function(){
                         var newEvent = new Event("click");
                         event.target.dispatchEvent(newEvent);
@@ -107,6 +105,20 @@ kit.PluginManager.registerPlugins({
         onInstall: function (plugin) {
         },
     },
+    datepicker: {
+        path: '/local/templates.dev/kit/assets/datepicker',
+        module: '/js/datepicker.js',
+        type: 'loader',
+        css: [
+            '/css/datepicker.css',
+        ],
+        deps: ['jquery'],
+        onRegister: function (plugin) {
+            kit.PluginManager.install(plugin.id)
+        },
+        onInstall: function (plugin) {
+        },
+    },
 
 });
 

assets/datepicker/js/i18n/datepicker.ru.js

@@ -0,0 +1,12 @@
+;(function ($) { $.fn.datepicker.language['ru'] =  {
+    days: ['Воскресенье','Понедельник','Вторник','Среда','Четверг','Пятница','Суббота'],
+    daysShort: ['Вос','Пон','Вто','Сре','Чет','Пят','Суб'],
+    daysMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
+    months: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
+    monthsShort: ['Янв','Фев','Мар','Апр','Май','Июн','Июл','Авг','Сен','Окт','Ноя','Дек'],
+    today: 'Сегодня',
+    clear: 'Очистить',
+    dateFormat: 'dd.mm.yyyy',
+    timeFormat: 'hh:ii',
+    firstDay: 1
+}; })(jQuery);

assets/mask/mask.js

@@ -58,6 +58,16 @@ kit.PluginManager.register('mask', function(module, exports, require){
             return this.trigger("unmask");
         },
         mask: function(mask, settings) {
+            var triggerEvent = function (el, eventName, options) {
+                var event;
+                if (window.CustomEvent) {
+                    event = new CustomEvent(eventName, options);
+                } else {
+                    event = document.createEvent('CustomEvent');
+                    event.initCustomEvent(eventName, true, true, options);
+                }
+                el.dispatchEvent(event);
+            };
             var input,
                 defs,
                 tests,
@@ -193,6 +203,7 @@ kit.PluginManager.register('mask', function(module, exports, require){
                 }
 
                 function androidInputEvent(e) {
+                    console.log('androidInputEvent');
                     var curVal = input.val();
                     var pos = input.caret();
                     if (oldVal && oldVal.length && oldVal.length > curVal.length ) {
@@ -228,6 +239,7 @@ kit.PluginManager.register('mask', function(module, exports, require){
 
 
                 function blurEvent(e) {
+                    console.log('blurEvent');
                     clearInterval(actualCaretID);
                     checkVal();
 
@@ -235,7 +247,10 @@ kit.PluginManager.register('mask', function(module, exports, require){
                         input.change();
                 }
 
+                var inputCancel = false;
+
                 function keydownEvent(e) {
+                    console.log('keydownEvent');
                     if (input.prop("readonly")){
                         return;
                     }
@@ -259,6 +274,8 @@ kit.PluginManager.register('mask', function(module, exports, require){
                         shiftL(begin, end - 1);
 
                         e.preventDefault();
+                        inputCancel = true;
+                        triggerEvent(input[0], 'input', { 'bubbles': true });
                     } else if( k === 13 ) { // enter
                         blurEvent.call(this, e);
                     } else if (k === 27) { // escape
@@ -269,6 +286,7 @@ kit.PluginManager.register('mask', function(module, exports, require){
                 }
 
                 function keypressEvent(e) {
+                    console.log('keypressEvent');
                     if (input.prop("readonly")){
                         return;
                     }
@@ -313,6 +331,8 @@ kit.PluginManager.register('mask', function(module, exports, require){
                             }
                         }
                         e.preventDefault();
+                        inputCancel = true;
+                        triggerEvent(input[0], 'input', { 'bubbles': true });
                     }
                 }
 
@@ -412,7 +432,7 @@ kit.PluginManager.register('mask', function(module, exports, require){
 
                 function getRaw()
                 {
-                    console.log('mask input.data($.mask.dataName)');
+                    checkVal();
                     return $.map(buffer, function(c, i) {
                         return tests[i]&&c!=getPlaceholder(i) ? c : null;
                     }).join('');
@@ -430,6 +450,7 @@ kit.PluginManager.register('mask', function(module, exports, require){
                 });
 
                 function focusEvent () {
+                    console.log('focusEvent');
                     if (input.prop("readonly")){
                         return;
                     }
@@ -442,20 +463,32 @@ kit.PluginManager.register('mask', function(module, exports, require){
                     pos = checkVal();
 
                     caretTimeoutId = setTimeout(function(){
+                        console.log('caretTimeoutId')
                         if(input.get(0) !== document.activeElement){
                             return;
                         }
                         writeBuffer();
                         if (pos == mask.replace("?","").length) {
-                            input.caret(0, pos);
+                            //input.caret(0, pos);
+                            input.caret(pos);
                         } else {
                             input.caret(pos);
                         }
-
                     }, 10);
 
                 }
 
+                function unmask() {
+                    // console.log('mask one unmask');
+                    input
+                        .off(".mask")
+                        .removeData($.mask.dataName);
+                    if(isInput) {
+                        input.removeData('maskCall');
+                    }
+                    delete input[0]['mask'];
+                }
+
                 function actualCaret(){
                     var pos = checkVal(true),
                         c = input.caret();
@@ -467,15 +500,7 @@ kit.PluginManager.register('mask', function(module, exports, require){
                     }
                 }
                 input
-                    .one("unmask", function() {
+                    .one("unmask", unmask);
-                        // console.log('mask one unmask');
-                        input
-                            .off(".mask")
-                            .removeData($.mask.dataName);
-                        if(isInput) {
-                            input.removeData('maskCall');
-                        }
-                    });
                 isInput && input
                     .on("focus.mask", focusEvent)
                     .on("blur.mask", blurEvent)
@@ -483,6 +508,11 @@ kit.PluginManager.register('mask', function(module, exports, require){
                     .on("keypress.mask", keypressEvent);
                 input
                     .on("input.mask paste.mask", function() {
+                        if(inputCancel) {
+                            inputCancel = false;
+                            return;
+                        }
+                        console.log('input.mask paste.mask');
                         if (input.prop("readonly")){
                             return;
                         }
@@ -510,6 +540,12 @@ kit.PluginManager.register('mask', function(module, exports, require){
                     isInput && input.on('input.mask', androidInputEvent);
                 }
                 checkVal(); //Perform initial check for existing values
+
+                this.mask = {
+                    unmask: unmask,
+                    getRaw: getRaw,
+                    isValid: isValid,
+                };
             });
         },
     });

assets/toolkit/toolkit.css

@@ -182,7 +182,9 @@
     padding-right: 10px;
     padding-left: 10px;
 }
-.kit-field.kit-field--bordered .kit-field__input:focus ~.kit-field__hr {
+.kit-field.kit-field--bordered .kit-field__input:focus ~.kit-field__hr,
+.kit-field.kit-field--bordered .kit-field__input.focus ~.kit-field__hr
+{
     border-color: var(--kit-color-primary);
 }
 .kit-field.kit-field--bordered .kit-field__input.kit-field--error ~.kit-field__hr
@@ -220,10 +222,7 @@
     overflow: hidden;
 }
 .kit-field textarea,
-.kit-field input[type='password'],
+.kit-field input,
-.kit-field input[type='email'],
-.kit-field input[type='text'],
-.kit-field input[type='tel'],
 .kit-field .kit-field__display {
     pointer-events: auto;
     background-color: transparent;
@@ -281,34 +280,24 @@
     --line-clamp-height: var(--line-height-ratio);
 }
 .kit-field textarea:focus,
-.kit-field input[type='password']:focus,
+.kit-field input:focus,
-.kit-field input[type='email']:focus,
+.kit-field textarea.focus,
-.kit-field input[type='text']:focus,
+.kit-field input.focus {
-.kit-field input[type='number']:focus,
-.kit-field input[type='tel']:focus,
-.kit-field .kit-field__display:focus {
     color: var(--kit-color-text);
 }
 .kit-field textarea:focus ~.kit-field__label,
-.kit-field input[type='password']:focus ~.kit-field__label,
-.kit-field input[type='email']:focus ~.kit-field__label,
-.kit-field input[type='text']:focus ~.kit-field__label,
-.kit-field input[type='number']:focus ~.kit-field__label,
-.kit-field input[type='tel']:focus ~.kit-field__label,
 .kit-field input:focus ~.kit-field__label,
-.kit-field .kit-field__display:focus ~.kit-field__label {
+.kit-field textarea.focus ~.kit-field__label,
+.kit-field input.focus ~.kit-field__label {
     top: 0;
     transform: translate(0, 0);
     font-size: calc(var(--font-size) * var(--kit-field-focus-label-zoom-ratio));
     color: var(--kit-color-primary);
 }
 .kit-field textarea:focus ~.kit-field__hr:after,
-.kit-field input[type='password']:focus ~.kit-field__hr:after,
+.kit-field input:focus ~.kit-field__hr:after,
-.kit-field input[type='email']:focus ~.kit-field__hr:after,
+.kit-field textarea.focus ~.kit-field__hr:after,
-.kit-field input[type='text']:focus ~.kit-field__hr:after,
+.kit-field input.focus ~.kit-field__hr:after {
-.kit-field input[type='number']:focus ~.kit-field__hr:after,
-.kit-field input[type='tel']:focus ~.kit-field__hr:after,
-.kit-field .kit-field__display:focus ~.kit-field__hr:after {
     left: 0;
     width: 100%;
 }
@@ -402,6 +391,19 @@
 .kit-field .kit-field--error ~.kit-field__hr:after {
     border-color: var(--kit-color-error) !important;
 }
+
+.kit-field .kit-field--warning ~.kit-field__message
+{
+    opacity: 1;
+    visibility: visible;
+    color: var(--kit-color-warning);
+}
+.kit-field .kit-field--warning ~.kit-field__label {
+    color: var(--kit-color-warning) !important;
+}
+.kit-field .kit-field--warning ~.kit-field__hr:after {
+    border-color: var(--kit-color-warning) !important;
+}
 .kit-field__text {
     display: block;
     -webkit-user-select: none;
@@ -1130,7 +1132,8 @@ select.kit-field__input:disabled ~.kit-field__hr {
 .kit-field--success ~.kit-field__hr {
     border-color: var(--kit-color-success) !important;
 }
-.kit-field--success:focus ~.kit-field__hr:after {
+.kit-field--success:focus ~.kit-field__hr:after,
+.kit-field--success.focus ~.kit-field__hr:after {
     border-color: var(--kit-color-success) !important;
 }
 
@@ -1186,27 +1189,15 @@ select.kit-field__input:disabled ~.kit-field__hr {
 
 
 .kit-field textarea[readonly]:focus,
-.kit-field input[type='password'][readonly]:focus,
+.kit-field input[readonly]:focus,
-.kit-field input[type='email'][readonly]:focus,
+.kit-field textarea[readonly].focus,
-.kit-field input[type='text'][readonly]:focus,
+.kit-field input[readonly].focus {
-.kit-field input[type='tel'][readonly]:focus,
-.kit-field .kit-field__display[readonly]:focus {
-    color: var(--kit-color-readonly);
-}
-.kit-field textarea[readonly]:focus,
-.kit-field input[type='password'][readonly],
-.kit-field input[type='email'][readonly],
-.kit-field input[type='text'][readonly],
-.kit-field input[type='tel'][readonly],
-.kit-field .kit-field__display[readonly] {
     color: var(--kit-color-readonly);
 }
 .kit-field textarea[readonly]:focus ~.kit-field__label,
-.kit-field input[type='password'][readonly]:focus ~.kit-field__label,
+.kit-field input[readonly]:focus ~.kit-field__label,
-.kit-field input[type='email'][readonly]:focus ~.kit-field__label,
+.kit-field textarea[readonly].focus ~.kit-field__label,
-.kit-field input[type='text'][readonly]:focus ~.kit-field__label,
+.kit-field input[readonly].focus ~.kit-field__label
-.kit-field input[type='tel'][readonly]:focus ~.kit-field__label,
-.kit-field .kit-field__display[readonly]:focus ~.kit-field__label
 {
     color: var(--kit-color-readonly);
 }

assets/toolkit/toolkit.js

@@ -3,6 +3,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
     var $ = require('jquery');
 
 
+
     var __Config = function () {
 
         function Config() {
@@ -227,7 +228,6 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
                 key;
             if (Object.keys(messageObject).length) {
 
-                console.log('1');
                 for (key in messageObject) {
                     msg = messageObject[key];
                     console.log(msg);
@@ -270,7 +270,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
         }
 
         document.addEventListener('click', clickHandler, false);
-        document.addEventListener('change', chahgeHandler, false);
+        document.addEventListener('change', changeHandler, false);
         document.addEventListener('keydown', escapeKeyHandler, false);
         window.addEventListener('resize', resizeHandler, false);
 
@@ -346,9 +346,10 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
         }
 
         // изменение инпута
-        function chahgeHandler(e) {
+        function changeHandler(e) {
             var select = e.target;
             changeSelect(select);
+            console.log('changeHandler');
         }
 
         /**
@@ -702,6 +703,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
 
             this.init();
 
+            console.log('Inputs constructor');
 
             window.addEventListener('resize', function () {
                 return _this.refresh();
@@ -716,6 +718,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
                 return _this.refresh();
             }, false);
             document.addEventListener('input', function (e) {
+                console.log('input');
                 return _this.changeFiled(e);
             }, false);
             document.addEventListener('paste', function (e) {
@@ -728,17 +731,34 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
                 return _this.changeFiled(e);
             }, false);
             document.addEventListener('change', function (e) {
+                console.log('change');
                 return _this.switchField(e);
             }, false);
 
         }
 
         Inputs.prototype.checkDirty = function checkDirty(element) {
-            return !element.value && !element.placeholder.length ? element.setAttribute('data-dirty', 'false') : element.setAttribute('data-dirty', 'true');
+            var bDirty = false;
+
+            if(element.placeholder.length) {
+                element.setAttribute('data-dirty', 'true');
+                return true;
+            }
+
+            if(element.mask) {
+                var raw = element.mask.getRaw();
+                bDirty = !!raw.length;
+            } else {
+                bDirty = !!element.value;
+            }
+
+            element.setAttribute('data-dirty', bDirty?'true':'false');
+            return bDirty;
         };
 
 
         Inputs.prototype.changeFiled = function changeFiled(e) {
+            console.log('changeFiled');
             var _this2 = this;
             var target = e.target || e;
             if (target.classList.contains('kit-field__input')) {
@@ -818,7 +838,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
             }
         };
 
-        Inputs.prototype.setMask = function setMask() {
+        Inputs.prototype.setTelMask = function () {
             var _this3 = this;
 
             $('[type=tel]').mask(Config.mask.tel, {
@@ -826,21 +846,42 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
                     _this3.fieldNormalize(this);
                 }
             }).on('blur.mask', function (e) {
-                _this3.checkDirty(e.currentTarget);
+                //_this3.checkDirty(e.currentTarget);
             });
         };
 
-        Inputs.prototype.unsetMask = function unsetMask() {
+        Inputs.prototype.setMask = function () {
+            var _this3 = this;
+
+            var node = $('[data-mask]');
+
+            node.each(function(index, item){
+                item = $(item);
+                var placeholder = item.attr('data-mask-placeholder');
+                placeholder = placeholder?placeholder:'_';
+                item.mask(item.attr('data-mask'), {
+                    placeholder: placeholder,
+                    completed: function completed() {
+                        _this3.fieldNormalize(this);
+                    }
+                }).on('blur.mask', function (e) {
+                    //_this3.checkDirty(e.currentTarget);
+                });
+            });
+        };
+
+        Inputs.prototype.unsetTelMask = function() {
             $('input[type=tel]').unmask();
         };
 
         Inputs.prototype.init = function init() {
             this.checkAllInputs();
             this.setMask();
+            this.setTelMask();
         };
 
         Inputs.prototype.refresh = function refresh() {
-            this.unsetMask();
+            this.unsetTelMask();
             this.init();
         };
 
@@ -893,11 +934,21 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
     var Inputs = new __Inputs();
 
 
-    module.exports.Helper = Helper;
+    /**
-    module.exports.Select = Select();
+     * @class kit.toolkit
-    module.exports.Config = Config;
+     */
-    module.exports.Message = Message;
+    var toolkit = {
-    module.exports.Inputs = Inputs;
+        Helper: Helper,
+        Select: Select(),
+        Config: Config,
+        Message: Message,
+        Inputs: Inputs,
+    };
+
+
+    Object.assign(module.exports, toolkit);
+
+
 
     return module.exports;
 });

templates/button.php

@@ -9,7 +9,6 @@
 
 $preloader = \Wt\Core\Tools::isTrue($arParams['PRELOADER']);
 
-use Wt\Core\Type\Str as Str;
 
 ?><button
     <?if(\Wt\Core\Tools::isTrue($arParams['DISABLED'])){?>disabled<?}?>
@@ -19,7 +18,7 @@ use Wt\Core\Type\Str as Str;
     <?if($arParams['NAME']){?>name="<?=$arParams['NAME']?>"<?}?>
     <?if($arParams['ENTITY']){?>data-entity="<?=$arParams['ENTITY']?>"<?}?>
     <?if($arParams['VALUE']){?>value="<?=$arParams['VALUE']?>"<?}?>
-    class="kit-button <?=$arParams['CLASS']?:'kit-button--material kit-button--radius'?> <?=$arParams['ADD_CLASS']?><?=(!$preloader?' not-preloader ':'')?>"
+    class="kit-button <?=$arParams['CLASS']?:app()->config()->get('templaterParams.button.class', '')?> <?=$arParams['ADD_CLASS']?><?=(!$preloader?' not-preloader ':'')?>"
     onclick="<?=\Bx\Kit\Node\Lib::safeHtmlAttr($arParams['ONCLICK'])?>"
     <?=\Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR']);?>
 ><div class="kit-button__icon kit-icon"><?=$arParams['ICON']?></div>

templates/input.php

@@ -17,10 +17,10 @@ $isDatepicker = Tools::isTrue($arParams['DATEPICKER']) || is_array($arParams['DA
 
 $label = $arParams['LABEL'];
 
-if($isDatepicker && !is_array($isDatepicker)) {
+if($isDatepicker) {
+    app()->service()->assets()->setPlugin('datepicker');
     //include ".con/datepicker.php";
     $arParams['ADD_CLASS'] .= ' datepicker-here';
-    $arParams['ATTR'] .= ' data-position="bottom left" data-timepicker="true"';
 }
 if($isHint) {
     //include ".con/hint.php";
@@ -52,7 +52,14 @@ if($isHint) {
         value="<?=Str::safeHtmlAttr($arParams['VALUE'])?>"
         maxlength="255"
         placeholder="<?=Str::safeHtmlAttr($arParams['PLACEHOLDER']).''?>"
-        <?=$arParams['ATTR']?>
+        <?
+        echo \Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR']);
+        if($isDatepicker) {
+            echo \Bx\Kit\Node\Lib::getAttrByArray([
+                'data-position' => 'bottom left'
+            ]);
+        }
+        ?>
         autocomplete="off"
     ><?
     if($isHint){?><div class="kit-field__hint kit-icon" data-toggle="tooltip" data-kit-html="true" title="<?=Str::safeHtmlAttr($arParams['HINT'])?>" data-placement="top">

tests/cheatsheet.php

@@ -100,6 +100,38 @@
 
     ?>
     <div class="flex-list" style="--col-count: 3">
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'tel',
+                'HINT' => 'phone',
+                'NAME' => 'phone',
+                'VALUE' => '',
+                'LABEL' => 'phone',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'number',
+                'HINT' => 'number',
+                'NAME' => 'number',
+                'VALUE' => '10',
+                'PLACEHOLDER' => 'number',
+                'LABEL' => 'number',
+            ]); ?>
+        </div>
+        <div class="flex-list-item"><?
+            service()->templater()->render('kit:input', [
+                'TYPE' => 'text',
+                'HINT' => 'time mask',
+                'NAME' => 'time_mask',
+                'VALUE' => '',
+                'PLACEHOLDER' => '',
+                'LABEL' => 'time mask',
+                'ATTR' => [
+                    'data-mask' => '99:99'
+                ]
+            ]); ?>
+        </div>
         <div class="flex-list-item"><?
             service()->templater()->render('kit:input', [
                 'TYPE' => 'text',
@@ -113,11 +145,15 @@
         <div class="flex-list-item"><?
             service()->templater()->render('kit:input', [
                 'TYPE' => 'text',
-                'HINT' => 'text hint',
+                'HINT' => 'air-datepicker',
-                'NAME' => 'input_name',
+                'NAME' => 'datepicker',
-                'VALUE' => '10',
+                'VALUE' => '',
-                'PLACEHOLDER' => 'number',
+                'PLACEHOLDER' => '',
-                'LABEL' => 'Test input',
+                'LABEL' => 'datepicker',
+                'DATEPICKER' => true,
+                'ATTR' => [
+                    'data-mask' => '99.99.9999'
+                ]
             ]); ?>
         </div>
         <div class="flex-list-item"><?
@@ -846,5 +882,6 @@
         ?>
     </div>
 </div>
-
+<?
+?>
 <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>