This commit is contained in:
2021-08-20 11:18:47 +03:00
parent b31226635c
commit ff5f1770ad
9 changed files with 117 additions and 58 deletions
+5
View File
@@ -0,0 +1,5 @@
window.kit = window.kit || {};
kit.config = kit.config || {};
kit.config.defaultPath = '/local/templates.dev/kit/assets';
kit.config.requiredDependencies = ['bsCore', 'toolkit'];
+30 -2
View File
@@ -5,7 +5,6 @@
*/
window.kit = window.kit || {};
(function(global){
var stackPromise = {};
var stateList = {
undefined: 0,
registered: 1,
@@ -464,9 +463,23 @@ window.kit = window.kit || {};
};
__proto.exec = function (deps, callback, argArr = []) {
if(!Array.isArray(deps)) {
if(typeof deps === 'function') {
argArr = callback;
callback = deps;
deps = [];
}
if(!Array.isArray(deps) ) {
deps = [deps];
}
if(typeof argArr === 'undefined') {
argArr = [];
}
deps = Array.from(new Set(deps.concat(global.config.requiredDependencies)));
if(typeof callback !== 'function') {
return undefined;
}
@@ -544,6 +557,10 @@ window.kit = window.kit || {};
return undefined;
};
var defaultConfig = {
defaultPath: '',
requiredDependencies: [],
};
var manager = new PluginManager(global);
manager.register('PluginManager', {
alias: 'pm',
@@ -553,6 +570,17 @@ window.kit = window.kit || {};
}
});
manager.install('PluginManager');
manager.register('config', {
alias: 'pm',
type: moduleTypeList.loader,
loader: function(module, exports, require, global) {
console.warn('global.config', JSON.stringify(global.config));
global.config = global.config || {};
global.config = Object.assign(defaultConfig, global.config);
}
});
manager.install('config');
global.PluginManager = manager;
global.exec = manager.exec.bind(manager);
global.require = manager.require.bind(manager);
+22 -14
View File
@@ -1,6 +1,6 @@
kit.PluginManager.registerPlugins({
menu: {
path: '/local/templates.dev/kit/assets/menu',
path: kit.config.defaultPath + '/menu',
module: '/menu.js',
css: [
'/menu.css'
@@ -9,28 +9,28 @@ kit.PluginManager.registerPlugins({
deps: ['lib', 'align', 'utils']
},
lib: {
path: '/local/templates.dev/kit/assets/lib',
path: kit.config.defaultPath + '/lib',
module: '/lib.js',
type: 'loader',
},
align: {
path: '/local/templates.dev/kit/assets/align',
path: kit.config.defaultPath + '/align',
module: '/align.js',
type: 'loader',
},
utils: {
path: '/local/templates.dev/kit/assets/utils',
path: kit.config.defaultPath + '/utils',
module: '/utils.js',
type: 'loader',
},
jquery: {
path: '/local/templates.dev/kit/assets/jquery',
path: kit.config.defaultPath + '/jquery',
module: '/jquery.min.js',
type: 'loader',
alias: '$',
},
tooltip: {
path: '/local/templates.dev/kit/assets/tooltip',
path: kit.config.defaultPath + '/tooltip',
module: '/tooltip.js',
type: 'loader',
css: '/tooltip.css',
@@ -40,13 +40,13 @@ kit.PluginManager.registerPlugins({
deps: ['popper', 'bsCore'],
},
popper: {
path: '/local/templates.dev/kit/assets/popper',
path: kit.config.defaultPath + '/popper',
alias: 'popper.js',
module: '/popper.js',
type: 'loader',
},
bsCore: {
path: '/local/templates.dev/kit/assets/bsCore',
path: kit.config.defaultPath + '/bsCore',
module: '/bsCore.js',
type: 'loader',
css: [
@@ -54,20 +54,20 @@ kit.PluginManager.registerPlugins({
]
},
mask: {
path: '/local/templates.dev/kit/assets/mask',
path: kit.config.defaultPath + '/mask',
module: '/mask.js',
type: 'loader',
deps: ['jquery'],
},
toolkit: {
path: '/local/templates.dev/kit/assets/toolkit',
path: kit.config.defaultPath + '/toolkit',
module: '/toolkit.js',
type: 'loader',
css: ['/toolkit.css'],
deps: ['jquery', 'mask'],
},
modal: {
path: '/local/templates.dev/kit/assets/modal',
path: kit.config.defaultPath + '/modal',
module: '/modal.js',
type: 'loader',
css: [
@@ -92,7 +92,7 @@ kit.PluginManager.registerPlugins({
},
},
collapse: {
path: '/local/templates.dev/kit/assets/collapse',
path: kit.config.defaultPath + '/collapse',
module: '/collapse.js',
type: 'loader',
css: [
@@ -106,7 +106,7 @@ kit.PluginManager.registerPlugins({
},
},
datepicker: {
path: '/local/templates.dev/kit/assets/datepicker',
path: kit.config.defaultPath + '/datepicker',
module: '/js/datepicker.js',
type: 'loader',
css: [
@@ -136,10 +136,18 @@ kit.exec([], function () {
if (/complete|interactive|loaded/.test(document.readyState)) {
// In case the document has finished parsing, document's readyState will
// be one of "complete", "interactive" or (non-standard) "loaded".
console.log('1');
_init();
} else {
console.log('2');
// The document is not ready yet, so wait for the DOMContentLoaded event
document.addEventListener("DOMContentLoaded", _init);
}
console.log('readyState', document.readyState);
document.addEventListener("DOMContentLoaded", function () {
console.log('DOMContentLoaded', document.readyState);
});
$(function(){
console.log('$', document.readyState, typeof kit.toolkit);
});
});
+8 -5
View File
@@ -105,12 +105,15 @@
padding-left: calc(var(--gap) / 2);
padding-right: calc(var(--gap) / 2);
}
.flex-list > .flex-list-item {
.flex-list-item {
--gap-row: var(--gap);
--col-width: calc((100%) / var(--col-count));
width: var(--col-width) !important;
max-width: var(--col-width) !important;
flex-basis: var(--col-width) !important;
margin-bottom: var(--gap);
}
.flex-list > .flex-list-item {
width: var( --col-width) !important;
max-width: var( --col-width) !important;
flex-basis: var( --col-width) !important;
margin-bottom: var(--gap-row) !important;
}
.flex-list-item:before,
.flex-list-item:after {
+21 -5
View File
@@ -91,7 +91,7 @@
}
* {
*, :after, :before {
box-sizing: border-box;
}
@@ -670,7 +670,7 @@
-moz-animation: ball-clip-rotate 0.75s linear infinite;
animation: ball-clip-rotate 0.75s linear infinite;
}
.kit-button,
.kit-button.kit-button--secondary {
--kit-color-button-text-disabled: var(--kit-color-secondary-text, var(--kit-color-text));
--kit-color-button-content-disabled: var(--kit-color-secondary-w1, var(--kit-color-secondary));
@@ -692,7 +692,7 @@
.kit-button.kit-button--primary {
--kit-color-button-text-disabled: var(--kit-color-primary-text, var(--kit-color-text));
--kit-color-button-content-disabled: var(--kit-color-primary-w1, var(--kit-color-primary));
--kit-color-button-content-disabled: var(--kit-color-primary-w3, var(--kit-color-primary));
--kit-color-button-material-disabled: var(--kit-color-primary);
--kit-color-button-text-default: var(--kit-color-primary-text, var(--kit-color-text));
@@ -795,6 +795,9 @@
transition: background 0.3s, box-shadow 0.3s, color 0.3s;
position: relative;
}
.kit-button * {
pointer-events: none;
}
.kit-button:hover,
.kit-button:focus {
--kit-color-button-text: var(--kit-color-button-text-hover);
@@ -832,6 +835,8 @@
.kit-button__label {
--line-clamp: 1;
white-space: normal;
text-transform: uppercase;
font-size: 0.9em;
}
.kit-button.kit-disabled,
.kit-button:disabled,
@@ -863,7 +868,7 @@
}
.kit-button.kit-button--radius,
.kit-button.kit-button--radius:after {
border-radius: 3px;
border-radius: 2px;
}
.kit-button.kit-button--round,
.kit-button.kit-button--round:after {
@@ -1025,10 +1030,21 @@ select.kit-field__input:disabled ~.kit-field__hr {
.kit-dropdown__option:hover {
background: #e5e5e5;
}
.kit-dropdown__option.kit-active {
.kit-dropdown__option.kit-active:not(.kit-select-placeholder) {
background: #2074e7;
color: #fff;
}
.kit-dropdown__option.kit-select-placeholder {
color: #919191;
cursor: auto;
font-style: italic;
font-size: 0.8em;
padding: 5px 10px;
pointer-events: none;
}
.kit-dropdown__option.kit-select-hidden {
display: none;
}
.kit-select--open .kit-select__dropdown {
opacity: 1;
visibility: visible;
+27 -25
View File
@@ -349,7 +349,17 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
function changeHandler(e) {
var select = e.target;
changeSelect(select);
console.log('changeHandler');
}
function __dirtyTests(value, dirtyValidTestData) {
var r = true;
dirtyValidTestData.forEach(function(attr, i){
if(attr.name === 'data-dirty-min') {
r = r && (Number(value) >= Number(attr.value))
}
});
return r;
}
/**
@@ -357,7 +367,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
* @param select {HTMLElement}
*/
function changeSelect(select) {
if (hasClass(select, 'kit-field__input') && select.tagName == 'SELECT') {
if (hasClass(select, 'kit-field__input') && select.tagName === 'SELECT') {
var selected = select.querySelectorAll('option:checked')[0];
var data = {};
var dataAttrs = [];
@@ -368,32 +378,35 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
});
}
var dirtyValidTestData = [];
dirtyValidTestData = dirtyValidTestData.filter.call(select.attributes, function (attr) {
return (/^data-dirty-/.test(attr.name)
);
});
var isMultiple = select.hasAttribute('multiple');
var parent = select.parentNode;
var display = select.parentNode.querySelector('.kit-field__display');
var bDisplay = true;
//if(parent && parent.classList.contains('kit-field--select-link') && isMultiple) {
var bDirty = !!selected;
if(isMultiple) {
bDisplay = false;
bDirty = false;
}
if(!isMultiple) {
bDirty = bDirty && __dirtyTests(select.value, dirtyValidTestData);
}
display.textContent = '';
if(bDisplay && selected) {
if(bDirty) {
display.textContent = selected.textContent;
}
removeClass(parent, 'kit-select--open');
if(selected) {
select.setAttribute('data-dirty', 'true');
} else {
select.setAttribute('data-dirty', 'false');
}
select.setAttribute('data-dirty', bDirty?'true':'false');
removeClass(select, 'kit-field--error');
@@ -468,28 +481,18 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
var textContent = item.textContent;
var dropdownInnerIcon = document.createElement('span');
var dropdownInnerIconCheck = '<svg viewBox="0 0 24 24"><path d="M9.001,16.212l-4.199-4.2l-1.4,1.4l5.6,5.6l12-12l-1.4-1.4L9.001,16.212z"></path></svg>';
var dataClass = String(item.getAttribute('data-class'));
addClass(dropdownInnerIcon, 'kit-field__icon');
$(dropdownInnerIcon).append(dropdownInnerIconCheck);
dropdownInner.textContent = textContent;
dropdownInner.setAttribute('data-index', i);
addClass(dropdownInner, 'kit-dropdown__option');
addClass(dropdownInner, dataClass);
if (isMultiple) {
dropdownInner.appendChild(dropdownInnerIcon);
}
// if (item.getAttribute( "block_selected_off" ) == "active") {
// addClass(dropdownInner, 'block_selected_off');
// dropdownInner.appendChild(dropdownInnerIcon);
// }
// if (item.getAttribute( "block_selected" ) == "active") {
// addClass(dropdownInner, 'block_selected');
// dropdownInner.appendChild(dropdownInnerIcon);
// }
// if (item.getAttribute( "block_selected" ) == "noActive") {
// addClass(dropdownInner, 'block_selected_no');
// dropdownInner.appendChild(dropdownInnerIcon);
// }
if (item.disabled) {
addClass(dropdownInner, 'kit-disabled');
}
@@ -731,7 +734,6 @@ 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);
+1
View File
@@ -14,6 +14,7 @@ $preloader = \Wt\Core\Tools::isTrue($arParams['PRELOADER']);
<?if(\Wt\Core\Tools::isTrue($arParams['DISABLED'])){?>disabled<?}?>
aria-label="<?=$arParams['LABEL']?>"
type="<?=$arParams['TYPE']?:'button'?>"
<?if($arParams['ID']){?>id="<?=$arParams['ID']?>"<?}?>
<?if($arParams['TITLE']){?>title="<?=$arParams['TITLE']?>"<?}?>
<?if($arParams['NAME']){?>name="<?=$arParams['NAME']?>"<?}?>
<?if($arParams['ENTITY']){?>data-entity="<?=$arParams['ENTITY']?>"<?}?>
+2 -2
View File
@@ -2,12 +2,12 @@
?>
<div class="modal fade" id="<?=$arParams['ID']?>" tabindex="-1" aria-labelledby="<?=$arParams['ID']?>" aria-hidden="true">
<div class="modal fade <?=$arParams['WRAP_CLASS']?>" id="<?=$arParams['ID']?>" tabindex="-1" aria-labelledby="<?=$arParams['ID']?>" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><?=$arParams['TITLE']?></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
<button type="button" class="btn-close kit-icon" data-bs-dismiss="modal" aria-label="Close">
<svg class xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
</button>
<?=$arParams['HEADER']?>
+1 -5
View File
@@ -109,11 +109,7 @@ foreach ($arParams['OPTIONS'] as $option) {
class="kit-field__input <?=$arParams['CLASS']?> <?=$arParams['ADD_CLASS']?>"
<?=\Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR'])?>
<?if($arParams['PLACEHOLDER']){?>data-placeholder="<?=$arParams['PLACEHOLDER']?>"<?}?>
>
<?
echo $optionsHtml?:$arParams['OPTIONS_HTML'];
?>
</select>
><?echo $optionsHtml?:$arParams['OPTIONS_HTML']; ?></select>
<?
if($arParams['HINT']){
app()->service()->templater()->render('kit:field/hint', ['TITLE' => $arParams['HINT']]);