bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Bellord
2026-05-31 13:36:28 +03:00
parent f98cfc62a7
commit 1c882ba7f3
27 changed files with 349 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+196 -73
View File
@@ -1,5 +1,10 @@
# wt.core assets source [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://bitbucket.org/bellord13/kit/) # wt.core assets source
## is a dependency wt.core [![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://bitbucket.org/andreyleoua/wt.core/)
Источник: https://bitbucket.org/bellord13/kit/
## is a dependency wt.core
Репозиторий wt.core: https://bitbucket.org/andreyleoua/wt.core/
Предназначен для асинхронной работы с ресурсами на веб-проектах. Предназначен для асинхронной работы с ресурсами на веб-проектах.
@@ -20,6 +25,8 @@ git clone https://bellord@bitbucket.org/bellord13/kit.git ./
`PluginManager` - класс для работы с плагинами `PluginManager` - класс для работы с плагинами
`window.kit` - объект, который изолирует все плагины
## Базовые принципы ## Базовые принципы
✨ Инициализация ✨ Инициализация
@@ -27,84 +34,200 @@ git clone https://bellord@bitbucket.org/bellord13/kit.git ./
Выдержка из плагина `core`: Выдержка из плагина `core`:
```js ```js
manager = new PluginManager(global, plugins = {}); manager = new PluginManager(global);
manager.register('PluginManager', { manager.register('PluginManager', {
alias: 'pm', alias: 'pm',
type: moduleTypeList.loader, type: MD_TYPE.HMD,
loader: function(module, exports, require, global) { handler: function(require, exports, module, global) {
// return определяет, что выкинуть в global return module.exports = manager;
return module.exports = manager; }
});
manager.register('config', {
type: MD_TYPE.HMD,
handler: function(require, exports, module, global) {
global.config = Object.assign({}, defaultConfig, config);
} }
}); });
manager.install('PluginManager'); manager.install('PluginManager');
``` ```
Создается экземпляр класса PluginManager и регистрирует сам себя. Создается экземпляр класса `PluginManager` и регистрирует сам себя.
Переменная `global` выполняем роль фасада для все установленных плагинов с допустимостью использования `alias`. Это позволит использовать функционал вне ядра. В качестве глобальной переменной используется `window.kit`. Переменная `global` выполняем роль фасада для всех установленных плагинов. В качестве глобальной переменной используется `window.kit`. В паре с менеджером сразу инициализируется `config` доступный из `window.kit.config`.
Пример вызова
```js
kit.$
kit.jquery
```
✨ Основные этапы работы с плагином: ✨ Основные этапы работы с плагином:
| этап | метод | | этап | метод |
| ------ | ------ | |-------------|--------------------------------------------------------------|
| Регистрация | register(`pluginId`, `config`) или registerPlugins(`object`) | | Регистрация | register(`pluginId`, `config`) или registerPlugins(`object`) |
| Загрузка | load(`pluginId`, `callback`) | | Загрузка | load(`pluginId`, `callback`) |
| Установка | install(`pluginId`, `callback`) | | Установка | install(`pluginId`, `callback`) |
| Запрос | require(`pluginId`, `callback`) | | Запрос | require(`pluginId`, `callback`) |
## Пример конфигурации ## Примеры регистрации
### Пример регистрации Стандартного плагина (Тип default)
```js ```js
__PluginManager__.register('menu', { __PluginManager__.register('menu', {
path: kit.config.assetsPath + '/menu', path: kit.config.assetsPath + '/menu',
module: '/menu.js', module: '/menu.js',
type: 'loader', type: 'loader',
css: [ css: [
'/menu.css' '/menu.css'
], ],
deps: ['lib', 'align', 'utils'] deps: ['lib', 'align', 'utils']
} });
);
kit.pm.register('UserCart', {
path: '/assets/plugins/cart/',
module: 'main.js',
js: ['jquery.min.js', ['utils.js', 'api.js']], // jquery -> (utils + api вместе)
css: ['style.css'],
autoRequire: true
});
``` ```
### Пример регистрации HMD-плагина
```js
kit.pm.register('Logger', {
type: 'HMD',
alias: ['AltLogger'],
handler: function(require, module, exports, global) {
var object = {
log: function(msg) { console.log('[Logger]: ' + msg); }
};
// kit.require('Logger') вернет module
module.exports = object;
// return задает, что определить в global.Logger и global.AltLogger
return object.log;
},
onInstall: function(p) {
console.log('Logger готов!');
}
});
```
### Пример регистрации UMD-плагина
```js
kit.pm.register('MyUmdModule', {
type: 'UMD',
path: '/js/plugins/',
module: 'my-plugin.umd.js', // Файл с UMD-оберткой
deps: ['jquery'], // Если плагину нужен jQuery
autoRequire: true,
onInstall: function(plugin) {
console.log('UMD модуль успешно инициализирован');
}
});
```
### Пример регистрации ES-плагина
```js
kit.pm.register('UserDashboard', {
type: 'ES', // Указываем тип ES (ECMAScript)
path: '/assets/modules/', // Базовый путь
module: 'dashboard.js', // Файл, содержащий "export default"
autoRequire: true, // Начать загрузку сразу
onInstall: function(plugin) {
// В plugin.module.exports попадет то, что экспортировано из файла
console.log('ES-модуль загружен:', plugin.module.exports);
}
});
```
> Особенности работы с типом ES в твоем скрипте:
- Нативная загрузка: Вместо создания обычного тега `<script>`, менеджер использует динамический импорт `import(url)`.
- Строгий режим: Все ES-модули по умолчанию работают в use strict.
- CORS: Если модули загружаются с другого домена, сервер обязательно должен отдавать заголовок `Access-Control-Allow-Origin`, иначе браузер заблокирует загрузку.
## Описание параметров конфига для плагина ## Описание параметров конфига для плагина
| name | value | description | | Параметр | Тип | По умолчанию | Описание |
| --- | --- | --- | |:----------------------|:----------------|:------------:|:----------------------------------------------------------------------------------------------|
| type | import | Значение по умолчанию. Нативный загрузчик модулей. Файл модуля содержит ключевые фразы "export" и "export default" | | **type** | `string` | `default` | Тип плагина. |
| * | loader | Файл модуля содержит функцию kit.PluginManager.register(pluginId, function(module, exports, require, global){}) | | **handler** | `callback` | — | Используется в связке с типом `HMD`. Имеет вид `function(r, m, e, g){m.e = {}; return {};}`. |
| alias | Array string | Список ключей, которые могут быть использованы вместо pluginId, как и в require() так и в global | | **path** | `string` | `""` | Базовый префикс пути для модуля, скриптов и стилей. |
| import | string | Ссылка на файл с модулем | | **alias** | `Array string` | `[]` | Псевдонимы для `pluginId`, доступные в `require()` и `global`. |
| loader | callback | Используется для загрузки модулей типа loader | | **module** | `string` | — | Прямая ссылка на файл с основным модулем. |
| deps | Array string | Зависимости, Id плагинов | | **deps** | `Array string` | `[]` | Список ID плагинов-зависимостей, которые должны быть загружены ранее. |
| css | Array string | Массив путей к стилям. Стили грузятся синхронно при загрузке плагина. Без событий | | **css** | `Array string` | `[]` | Массив путей к стилям. Загружаются параллельно. |
| js | Array string | Массив путей к скриптам. Загрузка идет по цепочке. Для синхронной загрузки скрипты ложатся в массив. пр: [1.js, [1.1.js, 1.2.js]] | | **js** | `Array string` | `[]` | Цепочка скриптов. Массив в массиве (напр. `[1.js, [2.1, 2.2]]`) задает параллельную загрузку. |
| loadJsAfterModule | bool | default: false. Определяет порядок загрузки скриптов и модуля | | **loadJsAfterModule** | `bool` | `false` | Если `true`, то внешние JS-скрипты загрузятся строго после основного модуля. |
| onRegister | callback | функция выполняемая после регистрации плагина (однократно) | | **isSetTimestamp** | `bool` | `true` | Добавит к загружаемым файлам параметр __pm который позволит установить кеш на 1 час. |
| onLoad | callback | функция выполняемая после загрузки плагина (однократно) | | **onRegister** | `callback` | — | Функция, выполняемая однократно сразу после регистрации плагина. |
| onInstall | callback | функция выполняемая после установки плагина (однократно) | | **onLoad** | `callback` | — | Функция, выполняемая однократно после завершения загрузки всех ресурсов. |
| path | string | префикс пути для модуля, скриптов и стилей | | **onInstall** | `callback` | — | Функция, выполняемая однократно после финальной установки (выполнения handler). |
| modulePath | string | префикс пути для модуля. если не указан, то берется config.path |
## Использование ## Использование
### Методы управления модулями
| Метод | Аргументы | Вернет | Описание |
|:------------|:--------------------------------|:-------:|:--------------------------------------------------------------------------------------------------------------------------------------|
| **require** | `pluginId, callback` | * | Вызывает метод `callback` после установки `pluginId`. Возвращает модуль, если плагин установлен. |
| **get** | `pluginId, callback` | * | Вызывает метод `callback` после установки `pluginId`. Возвращает модуль, если плагин установлен. |
| **define** | `deps, callback` | Promise | Организаует вызов метода в стиле https://requirejs.org/. В качестве аргументов в метод `callback` будут проброшены экспорты плагинов. |
| **require** | `deps, callback` | Promise | Организаует вызов метода в стиле https://requirejs.org/. В качестве аргументов в метод `callback` будут проброшены экспорты плагинов. |
| **ready** | `deps, callback` | Promise | Вызывает метод `callback` после установки зависимостей `deps` и отработки события `document.DOMContentLoaded`. |
| **exec** | `deps, callback, args, context` | Promise | Вызывает метод `callback` после установки зависимостей `deps`. |
| **loaded** | `deps, callback` | Promise | Вызывает метод `callback` после установки зависимостей `deps` и отработки события `window.load`. |
---
Запуск исполняемого кода после установки зависимостей: Запуск исполняемого кода после установки зависимостей:
```js ```js
PluginManager.exec(deps, callback, argArr, context) kit.exec(deps, callback, argArr, context)
```
```js
kit.define(['UserAPI', 'Logger'], function(api, log) {
log.info('Start');
});
``` ```
Запуск исполняемого кода после установки зависимостей и при загруженной странице:
```js ```js
PluginManager.ready(deps, callback) kit.ready(['UserAPI', 'Logger'], function() {
kit.logger.info('Start');
kit.require('UserAPI').do();
});
``` ```
> `kit.config.requiredDependencies` определяет зависимости (deps) по умолчанию
```js
kit.exec(['UserAPI', 'Logger'], function() {
kit.logger.info('Start');
});
```
```js
kit.require('Product').then(function(){
kit.Product.make(productId).then(function(product){
product.setXData('.catalog-page');
kit.require('alpine');
})
})
```
# State list
| Значение | Состояние | Описание |
|:---------|:---------------|:-------------------------------------------------------------------------|
| `0` | `undefined` | Начальное состояние, плагин только что создан. |
| `1` | `registered` | Плагин зарегистрирован в системе, конфиг проверен. |
| `3` | `loading` | Идет активная загрузка файлов (JS, CSS, зависимости). |
| `4` | `loaded` | Все внешние ресурсы успешно загружены. |
| `5` | `installing` | Выполняется основной код плагина (`handler`). |
| `6` | `installed` | Плагин полностью готов к работе, экспорт завершен. |
## Глобальный конфиг ## Глобальный конфиг
@@ -112,12 +235,12 @@ PluginManager.ready(deps, callback)
> Параметры допустимо определять до загрузки `PluginManager` > Параметры допустимо определять до загрузки `PluginManager`
| name | default | description | | name | default | description |
| --- | --- | --- | |----------------------|---------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| assetsPath | /local/templater.dev/kit/assets | | | assetsPath | /local/templater.dev/kit/assets | Если не указывать, то определится автоматически при инициализации PluginManager |
| requiredDependencies | ['bsCore', 'toolkit'] | дополнительно определяет список зависимостей для любого колбека вызванного функциями `exec` и `ready` | | requiredDependencies | ['bsCore', 'toolkit'] | дополнительно определяет список зависимостей для любого колбека вызванного функциями `exec` и `ready` |
| autoloadPluginList | ['tooltip'] | Автоматически загрузит ресурсы указанных плагинов. В случае модуля с типом `loader` код не будет исполнен сразу после загрузки. Исполнение бдует определятся функций `install` | | autoloadPluginList | ['tooltip'] | Автоматически загрузит ресурсы указанных плагинов. В случае модуля с типом `HMD` код не будет исполнен сразу после загрузки. Исполнение бдует определятся функций `install` |
| debug | false | Расширит список выводимой в консоль информации | | debug | false | Расширит список выводимой в консоль информации |
@@ -125,26 +248,26 @@ PluginManager.ready(deps, callback)
переменная kit может быть задана любой, поэтому в некоторых местах корректно будет использовать универсальные глобальные переменные переменная kit может быть задана любой, поэтому в некоторых местах корректно будет использовать универсальные глобальные переменные
| name | link | description | | name | link | description |
| --- | --- | --- | |---------------------|---------------------------------|---------------|
| `__pmGlobal__` | аналог window.kit | | | `__pmGlobal__` | аналог window.kit | |
| `__PluginManager__` |аналог window.kit.PluginManager | | | `__PluginManager__` | аналог window.kit.PluginManager | |
| `__pmConfig__` | аналог window.kit.config | | | `__pmConfig__` | аналог window.kit.config | |
## z-index map ## z-index map
| z-index | plugin | selector | | z-index | plugin | selector |
| --- | --- | --- | |-----------|----------|--------------------------------------|
| 100 | flex-kit | .flex-card:hover .flex-card__content | | 100 | flex-kit | .flex-card:hover .flex-card__content |
| 1000 | bs | dropdown | | 1000 | bs | dropdown |
| 1020 | bs | sticky | | 1020 | bs | sticky |
| 1030 | bs | fixed | | 1030 | bs | fixed |
| 1040 | bs | modal-backdrop | | 1040 | bs | modal-backdrop |
| 1050 | bs | offcanvas | | 1050 | bs | offcanvas |
| 1060 | bs | modal | | 1060 | bs | modal |
| 1070 | bs | popover | | 1070 | bs | popover |
| 1080 | bs | tooltip | | 1080 | bs | tooltip |
assets/config/config.js
+1 -1
View File
@@ -17,6 +17,6 @@ Object.assign(kit.config, {
debug: true, debug: true,
assetsPath: '/local/templater.dev/kit/assets', assetsPath: '/local/templater.dev/kit/assets',
requiredDependencies: [], requiredDependencies: [],
autoloadPluginList: ['tooltip'], autoloadPluginList: [],
defaultPhoneMask: '+7 (999) 999-99-99', defaultPhoneMask: '+7 (999) 999-99-99',
}); });
assets/config/config.min.js
Vendored
+1
View File
@@ -0,0 +1 @@
window.kit=window.kit||{};kit.service=kit.service||{};kit.config=kit.config||{};Object.assign(kit.config,{debug:true,assetsPath:"/local/templater.dev/kit/assets",requiredDependencies:[],autoloadPluginList:[],defaultPhoneMask:"+7 (999) 999-99-99"});
assets/core/core.js
+11 -8
View File
@@ -1014,6 +1014,13 @@ kit.config = kit.config || {};
function init(global){ function init(global){
document.addEventListener("DOMContentLoaded", function () {
console.log('%cDOMContentLoaded', 'color:#2053ff');
});
window.addEventListener("load", (event) => {
console.log('%cWindowLoaded', 'color:#2053ff');
});
var manager = new PluginManager(global); var manager = new PluginManager(global);
/** /**
* @type {PluginManager.ready} * @type {PluginManager.ready}
@@ -1054,7 +1061,6 @@ kit.config = kit.config || {};
window.__PluginManager__ = manager; window.__PluginManager__ = manager;
/** /**
* @type {kit} * @type {kit}
* @global
*/ */
window.__pmGlobal__ = global; window.__pmGlobal__ = global;
} }
@@ -1066,6 +1072,10 @@ kit.config = kit.config || {};
manager.install('pluginManager'); manager.install('pluginManager');
/**
* Создаем плагин который выполняет функцию глобального конфига
* PluginManager тоже использует его в своей работе
*/
manager.register('config', { manager.register('config', {
type: MD_TYPE.HMD, type: MD_TYPE.HMD,
handler: function(require, exports, module, global) { handler: function(require, exports, module, global) {
@@ -1086,13 +1096,6 @@ kit.config = kit.config || {};
if(typeof window === 'object'){ if(typeof window === 'object'){
window.__pmConfig__ = global.config; window.__pmConfig__ = global.config;
} }
document.addEventListener("DOMContentLoaded", function () {
console.log('%cDOMContentLoaded', 'color:#2053ff');
});
window.addEventListener("load", (event) => {
console.log('%cWindowLoaded', 'color:#2053ff');
});
}, },
onInstall: function(plugin){ onInstall: function(plugin){
if(typeof window === 'object'){ if(typeof window === 'object'){
assets/core/core.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/core/core.plugins.config.js
+14 -67
View File
@@ -36,72 +36,16 @@ var __PluginManagerConfigHandler__ = function() {
type: 'HMD', type: 'HMD',
}, },
jQueryProxy: { jQueryProxy: {
path: root + '/jquery/proxy',
js: '/jquery-proxy.min.js',
type: 'HMD', type: 'HMD',
handler: function(require, exports, module, global){ alias: [],
init = function(c, prop = '$', args = []){ deps: [],
c.push([prop, args]); onInstall: function(plugin){
var jQueryPlugin = __pmGlobal__.pm.plugins.jQuery
if(jQueryPlugin.isInstalled()){
return new Proxy({}, {
get(target, prop) {
return function(){
return init(c, prop, arguments)
}
}
});
};
var J = function(){
if(!J.init){
J.init = true;
__PluginManager__.ready('jQuery');
}
var c = [];
J.queue.push(c);
return init(c, '$', arguments);
} }
J.queue = [];
J.init = false;
function JQueryProxy(){}
JQueryProxy.prototype.J = J;
JQueryProxy.prototype.hasJQuery = function(){
return window.hasOwnProperty('jQuery') && window.jQuery.hasOwnProperty('fn');
};
JQueryProxy.prototype.hasJQueryIniter = function(){
return window.hasOwnProperty('jQuery') && Object.is(window.jQuery, J);
};
JQueryProxy.prototype.onJQueryRegister = function(plugin){
if(!this.hasJQuery()){
(function(w){
w.$ = w.jQuery = J;
plugin.module.initer = J;
})(window);
}
};
JQueryProxy.prototype.onJQueryInstall = function(plugin){
var self = this;
if(!plugin.module.initer){
return;
}
(function(w){
var q = plugin.module.initer.queue;
if(self.hasJQueryIniter()){
w.$ = w.jQuery = plugin.module.exports;
for (var ch of q){
var root = w;
for (var c of ch){
try {
root = root[c[0]].apply(root, c[1]);
} catch (e){
console.warn(ch, e);
break;
}
}
}
}
})(window);
};
module.exports = new JQueryProxy();
}, },
}, },
jQuery: { jQuery: {
@@ -114,13 +58,16 @@ var __PluginManagerConfigHandler__ = function() {
plugin.module.exports = window.jQuery; plugin.module.exports = window.jQuery;
plugin.config.module = ''; plugin.config.module = '';
} else { } else {
plugin.proxy = kit.require('jQueryProxy'); var jQueryProxyPlugin = __pmGlobal__.pm.plugins.jQueryProxy;
plugin.proxy.onJQueryRegister(plugin); if(jQueryProxyPlugin.isInstalled()){
jQueryProxyPlugin.module.exports.onJQueryRegister(plugin);
}
} }
}, },
onInstall: function(plugin){ onInstall: function(plugin){
if(plugin.proxy){ var jQueryProxyPlugin = __pmGlobal__.pm.plugins.jQueryProxy;
plugin.proxy.onJQueryInstall(plugin); if(jQueryProxyPlugin.isInstalled()){
jQueryProxyPlugin.module.exports.onJQueryInstall(plugin);
} }
}, },
}, },
assets/core/core.plugins.config.min.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/flex-kit/flex-kit.css
+1
View File
@@ -173,6 +173,7 @@ script, style {
.flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child .flex-col-wrap.flex-aspect-ratio:not(.owl-loaded) > *:not(.flex-cell-aspect-auto) > :first-child
{ {
padding: var(--flex-padding); padding: var(--flex-padding);
box-sizing: border-box;
} }
.flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child, .flex-list.flex-aspect-ratio:not(.owl-loaded) > * > :first-child,
assets/flex-kit/flex-kit.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/jquery/proxy/jquery-proxy.js
Vendored
+68
View File
@@ -0,0 +1,68 @@
/** @module jQueryProxy */
__PluginManager__.register('jQueryProxy',function(require, exports, module, global) {
var init = function(c, prop = '$', args = []){
c.push([prop, args]);
return new Proxy({}, {
get(target, prop) {
return function(){
return init(c, prop, arguments)
}
}
});
};
var J = function(){
if(!J.init){
J.init = true;
__PluginManager__.ready('jQuery');
}
var c = [];
J.queue.push(c);
return init(c, '$', arguments);
}
J.queue = [];
J.init = false;
function JQueryProxy(){}
JQueryProxy.prototype.J = J;
JQueryProxy.prototype.hasJQuery = function(){
return window.hasOwnProperty('jQuery') && window.jQuery.hasOwnProperty('fn');
};
JQueryProxy.prototype.hasJQueryIniter = function(){
return window.hasOwnProperty('jQuery') && Object.is(window.jQuery, J);
};
JQueryProxy.prototype.onJQueryRegister = function(plugin){
if(!this.hasJQuery()){
(function(w){
w.$ = w.jQuery = J;
plugin.module.initer = J;
})(window);
}
};
JQueryProxy.prototype.onJQueryInstall = function(plugin){
var self = this;
if(!plugin.module.initer){
return;
}
(function(w){
var q = plugin.module.initer.queue;
if(self.hasJQueryIniter()){
w.$ = w.jQuery = plugin.module.exports;
for (var ch of q){
var root = w;
for (var c of ch){
try {
root = root[c[0]].apply(root, c[1]);
} catch (e){
console.warn(ch, e);
break;
}
}
}
}
})(window);
};
module.exports = new JQueryProxy();
});
assets/jquery/proxy/jquery-proxy.min.js
Vendored
+1
View File
@@ -0,0 +1 @@
__PluginManager__.register("jQueryProxy",function(require,exports,module,global){var init=function(c,prop="$",args=[]){c.push([prop,args]);return new Proxy({},{get(target,prop){return function(){return init(c,prop,arguments)}}})};var J=function(){if(!J.init){J.init=true;__PluginManager__.ready("jQuery")}var c=[];J.queue.push(c);return init(c,"$",arguments)};J.queue=[];J.init=false;function JQueryProxy(){}JQueryProxy.prototype.J=J;JQueryProxy.prototype.hasJQuery=function(){return window.hasOwnProperty("jQuery")&&window.jQuery.hasOwnProperty("fn")};JQueryProxy.prototype.hasJQueryIniter=function(){return window.hasOwnProperty("jQuery")&&Object.is(window.jQuery,J)};JQueryProxy.prototype.onJQueryRegister=function(plugin){if(!this.hasJQuery()){(function(w){w.$=w.jQuery=J;plugin.module.initer=J})(window)}};JQueryProxy.prototype.onJQueryInstall=function(plugin){var self=this;if(!plugin.module.initer){return}(function(w){var q=plugin.module.initer.queue;if(self.hasJQueryIniter()){w.$=w.jQuery=plugin.module.exports;for(var ch of q){var root=w;for(var c of ch){try{root=root[c[0]].apply(root,c[1])}catch(e){console.warn(ch,e);break}}}}})(window)};module.exports=new JQueryProxy});
assets/menu/menu.css
+1
View File
@@ -150,6 +150,7 @@
display: block; display: block;
flex: 0 0 1.5em; flex: 0 0 1.5em;
order: 1000; order: 1000;
box-sizing: border-box;
} }
.kit-menu[data-kit-align-horizontal-align="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow { .kit-menu[data-kit-align-horizontal-align="left"] > .kit-menu-item > .kit-menu ~ .kit-menu-item__arrow {
/*order: 10;*/ /*order: 10;*/
assets/menu/menu.min.css
Vendored
+1
View File
@@ -0,0 +1 @@
:root{--kit-menu-border-width:4px;--kit-menu-hover-label-size:calc(3 * 0.1em);--kit-color-menu-content:#212121fa;--kit-color-menu-item-content-hover:#ffffff1a;--kit-color-menu-content-text:#FFFFFF;--kit-color-menu-content-text-hover:var(--kit-color-primary-w2, #67b2e4)}.kit-menu{background:var(--kit-color-menu-content);display:none}.kit-menu[data-kit-align-horizontal-align=right]{border-left:var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);box-shadow:0 0 10px 0#00000033,inset 5px 0 5px -5px var(--kit-color-primary-b2, #2283c3)}.kit-menu[data-kit-align-horizontal-align=left]{border-right:var(--kit-menu-border-width) solid var(--kit-color-primary, #3c9cdd);box-shadow:0 0 10px 0#00000033,inset -5px 0 5px -5px var(--kit-color-primary-b2, #2283c3)}.kit-menu.active,.kit-menu.show{display:block;z-index:1000}.kit-text-debug{position:absolute;background-color:#363636;pointer-events:none;color:#ddd;font-size:12px;font-family:monospace;line-height:1.1em}.kit-menu-item{display:flex;flex-direction:row;align-items:center;cursor:pointer;padding-left:.5em;padding-right:.5em;min-width:calc(15*1em);text-decoration:none}.kit-menu-item>:not(.kit-menu){margin-left:.5em;margin-right:.5em}.kit-menu-item:hover{background-color:var(--kit-color-menu-item-content-hover)}.kit-menu-item:first-child{border-top:0}.kit-menu>*>.kit-menu{z-index:20}.kit-menu>.kit-menu-item:hover>.kit-menu{z-index:21}.kit-menu-item__label{flex:1 1 100%;order:500;display:block;padding-top:.715em;padding-bottom:.715em;color:var(--kit-color-menu-content-text);position:relative;user-select:none}.kit-menu-item__icon{flex:0 0 1.5em;height:1.5em;width:1.5em;order:100;color:var(--kit-color-menu-icon, var(--kit-color-icon, #8c8c8c))}.kit-menu-item__icon:empty{display:none}.kit-menu-item__icon img,.kit-menu-item__icon picture,.kit-menu-item__icon svg,.kit-menu~.kit-menu-item__arrow img,.kit-menu~.kit-menu-item__arrow picture,.kit-menu~.kit-menu-item__arrow svg{width:100%;height:100%;max-width:100%;max-height:100%;display:block;fill:currentColor;transition:inherit;object-fit:contain;object-position:center}.kit-menu-item__label>a{color:var(--kit-color-menu-content-text)}.kit-menu-item__label:hover>a{color:var(--kit-color-menu-content-text-hover)}.kit-menu[data-kit-align-horizontal-align=left] .kit-menu-item:before,.kit-menu[data-kit-align-horizontal-align=right] .kit-menu-item:before{content:"";position:absolute;width:var(--kit-menu-hover-label-size);height:calc(100% - .6em);background:var(--kit-color-primary, #3c9cdd);top:.3em;transition:.3s;opacity:0;pointer-events:none;left:0;right:unset}.kit-menu[data-kit-align-horizontal-align=left]>.kit-menu-item:before{right:0;left:unset}.kit-menu .kit-menu-item:hover:before{opacity:1}.kit-menu-item__arrow{display:none;color:var(--kit-color-menu-icon, var(--kit-color-icon, #8c8c8c))}.kit-menu-item__arrow:empty{display:none!important}.kit-menu-item>.kit-menu~.kit-menu-item__arrow{width:1.5em;height:1.5em;background:0 0;padding:calc(3*.1em);display:block;flex:0 0 1.5em;order:1000;box-sizing:border-box}
tests/alignTest.php
+3 -17
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<style> <style>
.hide { .hide {
display: none; display: none;
tests/bsToastsTest.php
+3 -17
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script> <script>
kit.ready(['bsToastService', 'testing', 'date', ], function () { kit.ready(['bsToastService', 'testing', 'date', ], function () {
tests/bsTooltipTest.php
+3 -17
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<button aria-label="Tooltip on top" type="button" title="" class="kit-button kit-button--primary kit-button--radius not-preloader " onclick="" <button aria-label="Tooltip on top" type="button" title="" class="kit-button kit-button--primary kit-button--radius not-preloader " onclick=""
data-bs-toggle="tooltip" data-bs-toggle="tooltip"
tests/chosenTest.php
+3 -17
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script> <script>
kit.ready(['Chosen', 'testing'], function () { kit.ready(['Chosen', 'testing'], function () {
tests/dateTest.php
+3 -19
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script> <script>
kit.ready(['date', 'testing'], function () { kit.ready(['date', 'testing'], function () {
@@ -39,5 +25,3 @@ $APPLICATION->ShowHead();
<div class="kit-wrapper"> <div class="kit-wrapper">
<div class="kit-logger"></div> <div class="kit-logger"></div>
</div> </div>
<?
?>
tests/flex-kitTest.php
+1 -3
View File
@@ -1,5 +1,3 @@
<?php
?>
<style> <style>
div { div {
border: 1px solid hsl(195, 100%, 50%); border: 1px solid hsl(195, 100%, 50%);
@@ -263,7 +261,7 @@ overflow
</div> </div>
<div class="flex-cell-full-content flex-col" style="overflow-y: scroll;"> <div class="flex-cell-full-content flex-col" style="overflow-y: scroll;">
<div class="flex-col"> <div class="flex-col">
<? <?php
foreach (range(1, 20) as $i) { foreach (range(1, 20) as $i) {
echo "<div>text $i</div>"; echo "<div>text $i</div>";
} }
tests/index.php
+1 -1
View File
@@ -22,7 +22,7 @@
iframe: iframe, iframe: iframe,
}); });
</script> </script>
<? <?php
} }
?> ?>
</div> </div>
tests/loggerTest.php
+3 -19
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script> <script>
kit.ready(['testing', 'date', 'log'], function () { kit.ready(['testing', 'date', 'log'], function () {
var unit = new kit.testing.Unit(); var unit = new kit.testing.Unit();
@@ -84,5 +70,3 @@ $APPLICATION->ShowHead();
<div class="kit-wrapper"> <div class="kit-wrapper">
</div> </div>
<?
?>
tests/makeCSSAnimationsTest.php
+3 -19
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script> <script>
kit.ready(['makeCSSAnimations', 'animations'], __handler = function () { kit.ready(['makeCSSAnimations', 'animations'], __handler = function () {
@@ -88,5 +74,3 @@ $APPLICATION->ShowHead();
} }
</style> </style>
</div> </div>
<?
?>
tests/menuTest.php
+6 -16
View File
@@ -1,19 +1,9 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([ <script>
'kit:config', kit.require('flexkit');
'kit:flex-kit', </script>
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<div style="width: 2000px; height: 1000px"></div> <div style="width: 2000px; height: 1000px"></div>
<style type="text/css"> <style type="text/css">
.chat-message { .chat-message {
tests/mustacheTest.php
+3 -19
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script> <script>
kit.ready(['mustache', 'testing'], function () { kit.ready(['mustache', 'testing'], function () {
const view = { const view = {
@@ -32,5 +18,3 @@ $APPLICATION->ShowHead();
<div class="kit-wrapper"> <div class="kit-wrapper">
<div class="kit-logger"></div> <div class="kit-logger"></div>
</div> </div>
<?
?>
tests/templates.svgTest.php
+7 -4
View File
@@ -1,5 +1,5 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <?php require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<? <?php
if(\Bitrix\Main\Loader::includeModule('wt.core')) { if(\Bitrix\Main\Loader::includeModule('wt.core')) {
app()->service()->assets()->setPlugins([ app()->service()->assets()->setPlugins([
'kit:config', 'kit:config',
@@ -12,6 +12,9 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
'kit:theme', 'kit:theme',
])->render(); ])->render();
} }
/**
* @global CMain $APPLICATION
*/
$APPLICATION->ShowHead(); $APPLICATION->ShowHead();
//$templatePath = app()->service()->templater()->getComponent('kit')->getTemplatePath(); //$templatePath = app()->service()->templater()->getComponent('kit')->getTemplatePath();
@@ -24,7 +27,7 @@ function scanTemplates($path, $basePath, $recursive = false){
$tree = glob($path . '/*.php'); $tree = glob($path . '/*.php');
?><div class="flex-list"><? ?><div class="flex-list"><?
foreach ((array)$tree as $t) { foreach ((array)$tree as $t) {
$templateName = ltrim(substr($t, strlen($basePath), strlen($t) - strlen($basePath) - 4), "/"); $templateName = ltrim(substr($t, strlen($basePath), strlen($t) - strlen($basePath) - 4), '/');
echo '<div class="flex-list-item">' . app()->service()->templater()->get('kit:card/block', [ echo '<div class="flex-list-item">' . app()->service()->templater()->get('kit:card/block', [
'name' => $templateName, 'name' => $templateName,
'picture' => '<div class="kit-picture">'.app()->service()->templater()->get('kit:'.$templateName).'</div>', 'picture' => '<div class="kit-picture">'.app()->service()->templater()->get('kit:'.$templateName).'</div>',
@@ -43,7 +46,7 @@ function scanTemplates($path, $basePath, $recursive = false){
?> ?>
<div class="kit-wrapper"> <div class="kit-wrapper">
<? <?php
scanTemplates($templateSvgPath, $templatePath, true); scanTemplates($templateSvgPath, $templatePath, true);
?> ?>
</div> </div>
tests/tooltip2Test.php
+3 -19
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script> <script>
kit.ready(['Tooltip2', 'testing'], function () { kit.ready(['Tooltip2', 'testing'], function () {
@@ -183,5 +169,3 @@ $APPLICATION->ShowHead();
</div> </div>
<div style="width: 3000px; height: 3000px"></div> <div style="width: 3000px; height: 3000px"></div>
<?
?>
tests/userActionTest.php
+3 -19
View File
@@ -1,20 +1,6 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?> <script src="../assets/config/config.js"></script>
<? <script src="../assets/core/core.plugins.config.js"></script>
if(\Bitrix\Main\Loader::includeModule('wt.core')) { <script src="../assets/core/core.js"></script>
app()->service()->assets()->setPlugins([
'kit:config',
'kit:flex-kit',
'kit:core',
'kit:bsCore',
'kit:collapse',
'kit:site',
'kit:toolkit',
'kit:theme',
])->render();
}
$APPLICATION->ShowHead();
?>
<script> <script>
kit.ready(['userAction', 'animations'], function () { kit.ready(['userAction', 'animations'], function () {
var m1 = new kit.userAction.Popover('#object1', '#object2'); var m1 = new kit.userAction.Popover('#object1', '#object2');
@@ -86,5 +72,3 @@ $APPLICATION->ShowHead();
</div> </div>
<?
?>