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
2021-09-05 20:17:36 +03:00
parent 7310d04755
commit 6297c67201
28 changed files with 2676 additions and 1591 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+8 -3
View File
@@ -126,11 +126,16 @@ PluginManager.ready(deps, callback)
| z-index | plugin | selector |
| --- | --- | --- |
| 100 | flex-kit | .flex-card:hover .flex-card__content |
| 1000 | bs | dropdown |
| 1020 | bs | sticky |
| 1030 | bs | fixed |
| 1040 | bs | modal-backdrop |
| 1050 | bs | offcanvas |
| 1060 | bs | modal |
| 1070 | bs | popover |
| 1080 | bs | tooltip |
## License
MIT
[//]: # (These are reference links used in the body of this note and get stripped out when the markdown processor does its job. There is no need to format nicely because it shouldn't be seen. Thanks SO - http://stackoverflow.com/questions/4823468/store-comments-in-markdown-syntax)
assets/bsCore/bsCore.js
+1 -3
View File
@@ -1,8 +1,6 @@
kit.PluginManager.register('bsCore', function(module, exports, require, global){
/**
* @class kit.bsCore
*/
/** @class kitBsCore */
var bsCore = {};
var dom = {};
var util = {};
assets/config/config.js
+9
View File
@@ -1,7 +1,16 @@
/**
* @var kit
* @type {kitCore}
*/
window.kit = window.kit || {};
/**
* @var kit.config
* @type {kitConfig}
*/
kit.config = kit.config || {};
kit.config.assetsPath = '/local/templater.dev/kit/assets';
kit.config.requiredDependencies = ['bsCore', 'toolkit'];
kit.config.autoloadPluginList = ['tooltip'];
kit.config.debug = true;
kit.config.defaultPhoneMask = '+7 (999) 999-99-99';
assets/config/toolkit.config.css
+7 -7
View File
@@ -63,13 +63,13 @@
--kit-color: #1a1a1a;
--kit-color-text-hover: var(--kit-color-primary);
--kit-color-primary-w3: hsl(22, 100%, 70%);
--kit-color-primary-w2: hsl(22, 100%, 65%);
--kit-color-primary-w1: hsl(22, 100%, 60%);
--kit-color-primary: hsl(22, 100%, 55%);
--kit-color-primary-b1: hsl(22, 100%, 50%);
--kit-color-primary-b2: hsl(22, 100%, 45%);
--kit-color-primary-b3: hsl(22, 100%, 40%);
--kit-color-primary-w3: hsl(210, 100%, 70%);
--kit-color-primary-w2: hsl(210, 100%, 65%);
--kit-color-primary-w1: hsl(210, 100%, 60%);
--kit-color-primary: hsl(210, 100%, 55%);
--kit-color-primary-b1: hsl(210, 100%, 50%);
--kit-color-primary-b2: hsl(210, 100%, 45%);
--kit-color-primary-b3: hsl(210, 100%, 40%);
--kit-color-primary-text: #FFF;
--kit-color-secondary-w3: hsl(0, 0%, 70%);
assets/cookie/cookie.js
+1 -1
View File
@@ -96,7 +96,7 @@ kit.PluginManager.register('cookie', function(module, exports, require){
/**
* @class kit.cookie
* @class kitCookie
*/
return Object.create(
{
assets/core/core.js
+20 -5
View File
@@ -1,9 +1,6 @@
/**
* @class kit
* @property {kit.bsCore}
* @property {kit.toolkit}
* @property {kit.Modal}
* @property {kit.cookie}
* @class kitCore
* @extends kitCorePlugins
*/
window.kit = window.kit || {};
(function(global){
@@ -52,6 +49,12 @@ window.kit = window.kit || {};
return this;
};
/**
*
* @param pluginId
* @param {kitModuleTypeLoader|{}} config
* @return {boolean}
*/
__proto.register = function (pluginId, config = {}) {
//console.warn('PluginManager.register: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
var defaultPlugin = {
@@ -427,6 +430,12 @@ window.kit = window.kit || {};
return this;
};
/**
* @name kitPluginManagerRequire
* @param {string} pluginId
* @param {callback} callback
* @return {boolean}
*/
__proto.require = function (pluginId, callback) {
//console.warn('PluginManager.require: plugin ' + pluginId + ' ('+(this.plugins[pluginId]?this.plugins[pluginId].state:'0')+')');
@@ -584,11 +593,15 @@ window.kit = window.kit || {};
return undefined;
};
/**
* @class kitConfig
*/
var defaultConfig = {
assetsPath: '',
requiredDependencies: [],
autoloadPluginList: [],
debug: false,
defaultPhoneMask: '+7 (999) 999-99-99',
};
var manager = new PluginManager(global);
manager.register('PluginManager', {
@@ -613,5 +626,7 @@ window.kit = window.kit || {};
global.ready = manager.ready.bind(manager);
global.exec = manager.exec.bind(manager);
global.require = manager.require.bind(manager);
/** @type {kitCore} */
window.__pmGlobal__ = global;
})(kit);
assets/core/core.register.js
+27 -10
View File
@@ -29,21 +29,12 @@ __PluginManager__.registerPlugins({
type: 'loader',
alias: '$',
},
tooltip: {
path: __pmConfig__.assetsPath + '/tooltip',
module: '/tooltip.js',
type: 'loader',
css: '/tooltip.css',
onInstall: function(){
kit.$('[data-toggle="tooltip"]').tooltip();
},
deps: ['popper', 'bsCore'],
},
popper: {
path: __pmConfig__.assetsPath + '/popper',
alias: 'popper.js',
module: '/popper.js',
type: 'loader',
css: '/popper.css',
},
bsCore: {
path: __pmConfig__.assetsPath + '/bsCore',
@@ -53,6 +44,32 @@ __PluginManager__.registerPlugins({
'/bsCore.css'
]
},
Tooltip: {
path: __pmConfig__.assetsPath + '/tooltip',
module: '/tooltip.js',
type: 'loader',
css: '/tooltip.css',
onInstall: function(){
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new __pmGlobal__.Tooltip(tooltipTriggerEl, {sanitize: false});
});
},
deps: ['popper', 'bsCore'],
},
Popover: {
path: __pmConfig__.assetsPath + '/popover',
module: '/popover.js',
type: 'loader',
css: '/popover.css',
onInstall: function(){
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new __pmGlobal__.Popover(popoverTriggerEl);
});
},
deps: ['popper', 'bsCore'],
},
mask: {
path: __pmConfig__.assetsPath + '/mask',
module: '/mask.js',
assets/core/doc.js
+20
View File
@@ -0,0 +1,20 @@
/**
* @typedef kitModuleTypeLoader
* @param module {{exports: Object}}
* @param exports {Object}
* @param require {kitPluginManagerRequire}
* @param global {kitCore}
*/
/**
* @typedef {Object} kitCorePlugins
* @property {kitPluginManagerRequire} require
* @property {kitBsCore} bsCore
* @property {kitToolkit} toolkit
* @property {kitModal} Modal
* @property {kitCookie} cookie
* @property {kitConfig} config
* @property {kitTooltip} tooltip
* @property {kitPopover} popover
* @property {kitPopper} popper
*/
assets/modal/modal.js
+1 -1
View File
@@ -74,7 +74,7 @@ kit.PluginManager.register('modal', function(module, exports, require){
* ------------------------------------------------------------------------
*/
/**
* @class kit.Modal
* @class kitModal
*/
class Modal extends BaseComponent {
constructor(element, config) {
assets/popover/popover.css
+71
View File
@@ -0,0 +1,71 @@
:root {
}
.popover {
--gap: 10px;
--popper-border-width: 1px;
--popper-border-color: #ccc;
position: absolute;
top: 0;
left: 0 /* rtl:ignore */;
z-index: 1070;
display: block;
font-family: inherit;
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: var(--popper-font-size);
word-wrap: break-word;
background-color: transparent;
background-clip: padding-box;
border: 0;
border-radius: 0;
}
.popover .popover-arrow {
}
.popover-header:empty {
display: none;
}
.popover-content {
border-radius: 3px;
overflow: hidden;
max-width: 200px;
padding: 0;
color: var(--popper-color);
text-align: center;
background-color: var(--popper-content-color);
border: var(--popper-border-width) solid var(--popper-border-color);
box-shadow: 0px 0px 5px -1px var(--popper-border-color);
}
.popover-header {
padding: calc(var(--gap) / 2) calc(var(--gap));
margin-bottom: 0;
font-size: 1em;
background-color: #f0f0f0;
border-bottom: var(--popper-border-width) solid var(--popper-border-color);
border-radius: 0;
}
.popover-body {
padding: calc(var(--gap) / 2) calc(var(--gap));
background-color: var(--popper-body-content-color);
}
.popover-footer:empty {
display: none;
}
.popover-footer {
padding: calc(var(--gap) / 2) calc(var(--gap));
background-color: var(--popper-footer-content-color);
}
assets/popover/popover.js
+185
View File
@@ -0,0 +1,185 @@
kit.PluginManager.register('popover',function(module, exports, require){
/**
* --------------------------------------------------------------------------
* Bootstrap (v5.0.2): popover.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/
/** @type {kitTooltip} */
var Tooltip = require('tooltip');
/** @type {kitBsCore} */
var bsCore = require('bsCore');
var { defineJQueryPlugin } = bsCore.util.index;
var SelectorEngine = bsCore.dom.SelectorEngine;
/**
* ------------------------------------------------------------------------
* Constants
* ------------------------------------------------------------------------
*/
const NAME = 'popover'
const DATA_KEY = 'bs.popover'
const EVENT_KEY = `.${DATA_KEY}`
const CLASS_PREFIX = 'bs-popover'
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
const Default = {
...Tooltip.Default,
placement: 'right',
offset: [0, 0],
trigger: 'click',
content: '',
template: '<div class="popover" role="tooltip">' +
'<div class="popover-arrow" data-popper-arrow="true"></div>' +
'<div class="popover-content">' +
'<h3 class="popover-header"></h3>' +
'<div class="popover-body"></div>' +
'<div class="popover-footer"></div>' +
'</div>' +
'</div>'
}
const DefaultType = {
...Tooltip.DefaultType,
content: '(string|element|function)'
}
const Event = {
HIDE: `hide${EVENT_KEY}`,
HIDDEN: `hidden${EVENT_KEY}`,
SHOW: `show${EVENT_KEY}`,
SHOWN: `shown${EVENT_KEY}`,
INSERTED: `inserted${EVENT_KEY}`,
CLICK: `click${EVENT_KEY}`,
FOCUSIN: `focusin${EVENT_KEY}`,
FOCUSOUT: `focusout${EVENT_KEY}`,
MOUSEENTER: `mouseenter${EVENT_KEY}`,
MOUSELEAVE: `mouseleave${EVENT_KEY}`
}
const CLASS_NAME_FADE = 'fade'
const CLASS_NAME_SHOW = 'show'
const SELECTOR_TITLE = '.popover-header'
const SELECTOR_CONTENT = '.popover-body'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
/** @class kitPopover */
class Popover extends Tooltip {
// Getters
static get Default() {
return Default
}
static get NAME() {
return NAME
}
static get Event() {
return Event
}
static get DefaultType() {
return DefaultType
}
// Overrides
isWithContent() {
return this.getTitle() || this._getContent()
}
getTipElement() {
if (this.tip) {
return this.tip
}
this.tip = super.getTipElement()
if (!this.getTitle()) {
SelectorEngine.findOne(SELECTOR_TITLE, this.tip).remove()
}
if (!this._getContent()) {
SelectorEngine.findOne(SELECTOR_CONTENT, this.tip).remove()
}
return this.tip
}
setContent() {
const tip = this.getTipElement()
// we use append for html objects to maintain js events
this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
let content = this._getContent()
if (typeof content === 'function') {
content = content.call(this._element)
}
this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)
}
// Private
_addAttachmentClass(attachment) {
this.getTipElement().classList.add(`${CLASS_PREFIX}-${this.updateAttachment(attachment)}`)
}
_getContent() {
return this._element.getAttribute('data-bs-content') || this._config.content
}
_cleanTipClass() {
const tip = this.getTipElement()
const tabClass = tip.getAttribute('class').match(BSCLS_PREFIX_REGEX)
if (tabClass !== null && tabClass.length > 0) {
tabClass.map(token => token.trim())
.forEach(tClass => tip.classList.remove(tClass))
}
}
// Static
static jQueryInterface(config) {
return this.each(function () {
const data = Popover.getOrCreateInstance(this, config)
if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}
data[config]()
}
})
}
}
/**
* ------------------------------------------------------------------------
* jQuery
* ------------------------------------------------------------------------
* add .Popover to jQuery only if jQuery is present
*/
defineJQueryPlugin(Popover)
module.exports = Popover;
return module.exports;
});
assets/popper/popper.2.10.1.js
+1957
View File
File diff suppressed because it is too large Load Diff
assets/popper/popper.css
+139
View File
@@ -0,0 +1,139 @@
:root {
--popper-font-size: 0.8em;
--popper-border-color: #212121fa;
--popper-border-width: 1px;
--popper-arrow-width: 0.7em;
--popper-color: #1a1a1a;
--popper-content-color: #fff;
--popper-header-color: #1a1a1a;
--popper-header-content-color: #fff;
--popper-body-color: #1a1a1a;
--popper-body-content-color: #fff;
--popper-footer-color: #1a1a1a;
--popper-footer-content-color: #fff;
--math-sqrt-2: 1.414213562373095;
}
[data-popper-arrow] {
position: absolute;
display: block;
width: 0.8rem;
height: 0.4rem;
overflow: hidden;
}
[data-popper-arrow]::before {
border-width: var(--popper-border-width) var(--popper-border-width) 0px 0px;
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
width: calc(var(--popper-arrow-width) + var(--popper-border-width));
height: calc(var(--popper-arrow-width) + var(--popper-border-width));
background-color: var(--popper-content-color);
box-shadow: 0px 0px 4px -2px var(--popper-content-color);
}
/*top*/
[data-popper-placement^="top"] {
padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
}
[data-popper-placement^="top"] [data-popper-arrow] {
bottom: 0;
width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
/* left: 50% !important; */
/* transform: translate(-50%, 0); */
}
[data-popper-placement^="top"] [data-popper-arrow]::before {
bottom: 0;
left: 50%;
transform: rotate(
225deg
) translate(0, 100%);
transform-origin: 0 100%;
border-left-color: var(
--popper-border-color);
border-top-color: var(
--popper-border-color);
border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
}
/*right*/
[data-popper-placement^="right"] {
padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
}
[data-popper-placement^="right"] [data-popper-arrow] {
left: 0;
width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
top: 50% !important;
transform: translate(0px, -50%) !important;
}
[data-popper-placement^="right"] [data-popper-arrow]::before {
left: 0px;
top: 50%;
transform: rotate(
225deg
) translate(25%, -50%);
transform-origin: 75% 0;
border-right-color: var(
--popper-border-color);
border-top-color: var(
--popper-border-color);
}
/*bottom*/
[data-popper-placement^="bottom"] {
padding: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1)) 0;
}
[data-popper-placement^="bottom"] [data-popper-arrow] {
top: 0;
width: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
height: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
/*left: 50% !important;*/
/*transform: translate(-50%, 0);*/
}
[data-popper-placement^="bottom"] [data-popper-arrow]::before {
top: 0;
left: 50%;
transform: rotate(
45deg
) translate(0, 0);
transform-origin: 0 0;
border-left-color: var(
--popper-border-color);
border-top-color: var(
--popper-border-color);
border-width: var(--popper-border-width) 0 0 var(--popper-border-width);
}
/*left*/
[data-popper-placement^="left"] {
padding: 0 calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * (var(--math-sqrt-2) - 1));
}
[data-popper-placement^="left"] [data-popper-arrow] {
right: 0;
width: calc(var(--popper-arrow-width) / var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
height: calc(var(--popper-arrow-width) * var(--math-sqrt-2) + var(--popper-border-width) * var(--math-sqrt-2));
top: 50% !important;
transform: translate(0px, -50%) !important;
}
[data-popper-placement^="left"] [data-popper-arrow]::before {
right: 0;
top: 50%;
transform: rotate(
45deg
) translate(-25%, -50%);
transform-origin: 25% 0;
border-right-color: var(
--popper-border-color);
border-top-color: var(
--popper-border-color);
}
assets/toolkit/toolkit.css
+11 -4
View File
@@ -705,12 +705,16 @@
.kit-button * {
pointer-events: none;
}
.kit-button:hover,
.kit-button:focus {
.kit-button:hover {
--kit-color-button-text: var(--kit-color-button-text-hover);
--kit-color-button-content: var(--kit-color-button-content-hover);
--kit-color-button-material: var(--kit-color-button-material-hover);
}
.kit-button:focus {
--kit-color-button-text: var(--kit-color-button-text-active);
--kit-color-button-content: var(--kit-color-button-content-active);
--kit-color-button-material: var(--kit-color-button-material-active);
}
.kit-button:active {
--kit-color-button-text: var(--kit-color-button-text-active);
--kit-color-button-content: var(--kit-color-button-content-active);
@@ -727,7 +731,7 @@
box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
}
.kit-button.kit-button--material:hover {
box-shadow: inset 0 -3px 0 var(--kit-color-button-material);
box-shadow: inset 0 -2px 0 var(--kit-color-button-material);
}
.kit-button__icon {
display: inline-block;
@@ -750,7 +754,10 @@
.kit-button:disabled,
.kit-button[disabled],
.kit-button.disabled,
.kit-button.inactive-button {
.kit-button.inactive-button,
.kit-button[loading],
.kit-button.loading {
opacity: 0.7;
--kit-color-button-content: var(--kit-color-button-content-disabled);
--kit-color-button-text:var(--kit-color-button-text-disabled);
--kit-color-button-material: var(--kit-color-button-material-disabled);
assets/toolkit/toolkit.js
+4 -30
View File
@@ -1,35 +1,10 @@
import assign from "../../../../../_utils/cookie/src/assign";
import defaultConverter from "../../../../../_utils/cookie/src/converter";
kit.PluginManager.register('toolkit',function(module, exports, require) {
kit.PluginManager.register('toolkit', function(module, exports, require, global) {
var $ = require('jquery');
var __Config = function () {
function Config() {
this.mask =
{
tel: '+375 (99) 999-99-99'
}
}
Config.prototype.test = function test() {
};
return Config;
}();
var Config = new __Config();
var __Helper = function () {
function Helper() {
}
function Helper() {}
/**
* @description Вызывает событие
@@ -859,7 +834,7 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
Inputs.prototype.setTelMask = function () {
var _this3 = this;
$('[type=tel]').mask(Config.mask.tel, {
$('[type=tel]').mask(global.config.defaultPhoneMask, {
placeholder: '_', completed: function completed() {
_this3.fieldNormalize(this);
}
@@ -953,12 +928,11 @@ kit.PluginManager.register('toolkit',function(module, exports, require) {
/**
* @class kit.toolkit
* @class kitToolkit
*/
var toolkit = {
Helper: Helper,
Select: Select(),
Config: Config,
Message: Message,
Inputs: Inputs,
device: device,
assets/tooltip/tooltip.css
+11 -146
View File
@@ -1,13 +1,10 @@
:root {
--kit-tooltip-font-size: 0.8em;
--kit-tooltip-color: #ffffff;
--kit-tooltip-content-color: #212121fa;
--kit-tooltip-border-color: #212121fa;
--kit-tooltip-border-width: 0px;
--kit-tooltip-arrow-width: 0.7em;
--math-sqrt-2: 1.414213562373095;
}
.tooltip {
--popper-border-color: #212121fa;
--popper-border-width: 0em;
--popper-arrow-width: 0.7em;
--popper-color: #ffffff;
--popper-content-color: #212121fa;
position: absolute;
z-index: 1070;
display: block;
@@ -26,7 +23,7 @@
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: var(--kit-tooltip-font-size);
font-size: var(--popper-font-size);
word-wrap: break-word;
opacity: 0;
}
@@ -35,145 +32,13 @@
opacity: 0.9;
}
.tooltip .tooltip-arrow {
position: absolute;
display: block;
width: 0.8rem;
height: 0.4rem;
overflow: hidden;
}
.tooltip .tooltip-arrow::before {
border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
width: var(--kit-tooltip-arrow-width);
height: var(--kit-tooltip-arrow-width);
background-color: var(--kit-tooltip-content-color);
box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
}
/*top*/
.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
}
.kit-tooltip-top .tooltip-arrow, .kit-tooltip-auto[x-placement^="top"] .tooltip-arrow {
bottom: 0;
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
/* left: 50% !important; */
/* transform: translate(-50%, 0); */
}
.kit-tooltip-top .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="top"] .tooltip-arrow::before {
bottom: 0;
left: 50%;
transform: rotate(
225deg
) translate(0, 100%);
transform-origin: 0 100%;
border-left-color: var(
--kit-tooltip-border-color);
border-top-color: var(
--kit-tooltip-border-color);
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
}
/*right*/
.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"], .kit-tooltip-end {
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
}
.kit-tooltip-right .arrow,
.kit-tooltip-auto[x-placement^="right"] .arrow,
.kit-tooltip-end .tooltip-arrow {
left: 0;
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
top: 50% !important;
transform: translate(0px, -50%) !important;
}
.kit-tooltip-right .arrow::before,
.kit-tooltip-auto[x-placement^="right"] .arrow::before,
.kit-tooltip-end .tooltip-arrow::before {
left: 0px;
top: 50%;
transform: rotate(
225deg
) translate(25%, -50%);
transform-origin: 75% 0;
border-right-color: var(
--kit-tooltip-border-color);
border-top-color: var(
--kit-tooltip-border-color);
}
/*bottom*/
.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
}
.kit-tooltip-bottom .tooltip-arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
top: 0;
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
/*left: 50% !important;*/
/*transform: translate(-50%, 0);*/
}
.kit-tooltip-bottom .tooltip-arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
top: 0;
left: 50%;
transform: rotate(
45deg
) translate(0, 0);
transform-origin: 0 0;
border-left-color: var(
--kit-tooltip-border-color);
border-top-color: var(
--kit-tooltip-border-color);
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
}
/*left*/
.kit-tooltip-left,
.kit-tooltip-auto[x-placement^="left"],
.kit-tooltip-start {
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
}
.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow,
.kit-tooltip-start .tooltip-arrow {
right: 0;
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
top: 50% !important;
transform: translate(0px, -50%) !important;
}
.kit-tooltip-left .arrow::before,
.kit-tooltip-auto[x-placement^="left"] .arrow::before,
.kit-tooltip-start .tooltip-arrow::before {
right: 0;
top: 50%;
transform: rotate(
45deg
) translate(-25%, -50%);
transform-origin: 25% 0;
border-right-color: var(
--kit-tooltip-border-color);
border-top-color: var(
--kit-tooltip-border-color);
}
.tooltip-inner {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: var(--kit-tooltip-color);
color: var(--popper-color);
text-align: center;
background-color: var(--kit-tooltip-content-color);
background-color: var(--popper-content-color);
border-radius: 0.25rem;
border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
border: var(--popper-border-width) solid var(--popper-border-color);
box-shadow: 0px 0px 5px -1px var(--popper-content-color);
}
assets/tooltip/tooltip.js
+8 -7
View File
@@ -25,9 +25,9 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
*/
const NAME = 'tooltip'
const DATA_KEY = 'kit.tooltip'
const DATA_KEY = 'bs.tooltip'
const EVENT_KEY = `.${DATA_KEY}`
const CLASS_PREFIX = 'kit-tooltip'
const CLASS_PREFIX = 'bs-tooltip'
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
const DISALLOWED_ATTRIBUTES = new Set(['sanitize', 'allowList', 'sanitizeFn'])
@@ -62,7 +62,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
const Default = {
animation: true,
template: '<div class="tooltip" role="tooltip">' +
'<div class="tooltip-arrow"></div>' +
'<div class="tooltip-arrow" data-popper-arrow="true"></div>' +
'<div class="tooltip-inner"></div>' +
'</div>',
trigger: 'hover focus',
@@ -76,7 +76,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
fallbackPlacements: ['top', 'right', 'bottom', 'left'],
boundary: 'clippingParents',
customClass: '',
sanitize: true,
sanitize: false,
sanitizeFn: null,
allowList: DefaultAllowlist,
popperConfig: null
@@ -115,6 +115,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
* ------------------------------------------------------------------------
*/
/** @class kitTooltip */
class Tooltip extends BaseComponent {
constructor(element, config) {
if (typeof Popper === 'undefined') {
@@ -405,7 +406,7 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
}
getTitle() {
let title = this._element.getAttribute('data-kit-original-title')
let title = this._element.getAttribute('data-bs-original-title')
if (!title) {
title = typeof this._config.title === 'function' ?
@@ -552,10 +553,10 @@ kit.PluginManager.register('tooltip',function(module, exports, require){
_fixTitle() {
const title = this._element.getAttribute('title')
const originalTitleType = typeof this._element.getAttribute('data-kit-original-title')
const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
if (title || originalTitleType !== 'string') {
this._element.setAttribute('data-kit-original-title', title || '')
this._element.setAttribute('data-bs-original-title', title || '')
if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
this._element.setAttribute('aria-label', title)
}
assets/tooltip/tooltipJq.css
-171
View File
@@ -1,171 +0,0 @@
:root {
--kit-tooltip-font-size: 0.8em;
--kit-tooltip-color: #ffffff;
--kit-tooltip-content-color: #212121fa;
--kit-tooltip-border-color: #212121fa;
--kit-tooltip-border-width: 0px;
--kit-tooltip-arrow-width: 0.8em;
--math-sqrt-2: 1.414213562373095;
}
.tooltip {
position: absolute;
z-index: 1070;
display: block;
margin: 0;
font-family: inherit;
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: var(--kit-tooltip-font-size);
word-wrap: break-word;
opacity: 0;
}
.tooltip.show {
opacity: 0.9;
}
.tooltip .arrow {
position: absolute;
display: block;
width: 0.8rem;
height: 0.4rem;
overflow: hidden;
}
.tooltip .arrow::before {
border-width: var(--kit-tooltip-border-width) var(--kit-tooltip-border-width) 0px 0px;
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
width: var(--kit-tooltip-arrow-width);
height: var(--kit-tooltip-arrow-width);
background-color: var(--kit-tooltip-content-color);
box-shadow: 0px 0px 4px -2px var(--kit-tooltip-content-color);
}
.kit-tooltip-top, .kit-tooltip-auto[x-placement^="top"] {
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
}
.kit-tooltip-top .arrow, .kit-tooltip-auto[x-placement^="top"] .arrow {
bottom: 0;
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
/* left: 50% !important; */
/* transform: translate(-50%, 0); */
}
.kit-tooltip-top .arrow::before, .kit-tooltip-auto[x-placement^="top"] .arrow::before {
bottom: 0;
left: 50%;
transform: rotate(
225deg
) translate(0, 100%);
transform-origin: 0 100%;
border-left-color: var(
--kit-tooltip-border-color);
border-top-color: var(
--kit-tooltip-border-color);
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
}
.kit-tooltip-right, .kit-tooltip-auto[x-placement^="right"] {
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
}
.kit-tooltip-right .arrow, .kit-tooltip-auto[x-placement^="right"] .arrow {
left: 0;
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
top: 50% !important;
transform: translate(0px, -50%);
}
.kit-tooltip-right .arrow::before, .kit-tooltip-auto[x-placement^="right"] .arrow::before {
left: 0px;
top: 50%;
transform: rotate(
225deg
) translate(25%, -50%);
transform-origin: 75% 0;
border-right-color: var(
--kit-tooltip-border-color);
border-top-color: var(
--kit-tooltip-border-color);
}
.kit-tooltip-bottom, .kit-tooltip-auto[x-placement^="bottom"] {
padding: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1)) 0;
}
.kit-tooltip-bottom .arrow, .kit-tooltip-auto[x-placement^="bottom"] .arrow {
top: 0;
width: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
/*left: 50% !important;*/
/*transform: translate(-50%, 0);*/
}
.kit-tooltip-bottom .arrow::before, .kit-tooltip-auto[x-placement^="bottom"] .arrow::before {
top: 0;
left: 50%;
transform: rotate(
45deg
) translate(0, 0);
transform-origin: 0 0;
border-left-color: var(
--kit-tooltip-border-color);
border-top-color: var(
--kit-tooltip-border-color);
border-width: var(--kit-tooltip-border-width) 0 0 var(--kit-tooltip-border-width);
}
::before {}
.kit-tooltip-left, .kit-tooltip-auto[x-placement^="left"] {
padding: 0 calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * (var(--math-sqrt-2) - 1));
}
.kit-tooltip-left .arrow, .kit-tooltip-auto[x-placement^="left"] .arrow {
right: 0;
width: calc(var(--kit-tooltip-arrow-width) / var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
height: calc(var(--kit-tooltip-arrow-width) * var(--math-sqrt-2) + var(--kit-tooltip-border-width) * var(--math-sqrt-2));
top: 50% !important;
transform: translate(0px, -50%);
}
.kit-tooltip-left .arrow::before, .kit-tooltip-auto[x-placement^="left"] .arrow::before {
right: 0;
top: 50%;
transform: rotate(
45deg
) translate(-25%, -50%);
transform-origin: 25% 0;
border-right-color: var(
--kit-tooltip-border-color);
border-top-color: var(
--kit-tooltip-border-color);
}
.tooltip-inner {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: var(--kit-tooltip-color);
text-align: center;
background-color: var(--kit-tooltip-content-color);
border-radius: 0.25rem;
border: var(--kit-tooltip-border-width) solid var(--kit-tooltip-border-color);
box-shadow: 0px 0px 5px -1px var(--kit-tooltip-content-color);
}
assets/tooltip/tooltipJq.js
-1074
View File
File diff suppressed because it is too large Load Diff
templates/card/block.php
+12 -1
View File
@@ -8,7 +8,7 @@
<div class="flex-card__content">
<div class="flex-card__body-shell aspect-ratio">
<div class="flex-card__body">
<div class="flex-card__picture"><?=$arParams['picture']?></div>
<div class="flex-card__picture kit-picture"><?=$arParams['picture']?></div>
<div class="flex-card__title">
<div class="kit-line-clamp">
<?=$arParams['name']?>
@@ -20,6 +20,17 @@
<div class="flex-card__header"><?=$arParams['header']?></div>
<div class="flex-card__footer"><?=$arParams['footer']?></div>
<div class="flex-card__hover"><?=$arParams['hover']?></div>
<div class="flex-list flex-list--ticket"><?
foreach ($item['tickets'] as $ticket) {
?>
<div class="flex-list-item">
<div class="ticket-item <?=$ticket['code']?>">
<div class="kit-line-clamp"><?=$ticket['name']?></div>
</div>
</div>
<?
}
?></div>
</div>
</div>
</div>
templates/field/hint.php
+1 -1
View File
@@ -1,3 +1,3 @@
<div class="kit-field__hint kit-icon" data-toggle="tooltip" title="<?=\Bx\Kit\Node\Lib::safeHtmlAttr($arParams['TITLE'])?>">
<div class="kit-field__hint kit-icon" data-bs-toggle="tooltip" title="<?=\Bx\Kit\Node\Lib::safeHtmlAttr($arParams['TITLE'])?>">
<?app()->service()->templater()->render('kit:svg/hint')?>
</div>
templates/input.php
+4 -4
View File
@@ -12,7 +12,7 @@ $arParams['TYPE'] = $arParams['TYPE']?:'hidden';
$isReadonly = Tools::isTrue($arParams['READONLY']);
$isRequired = Tools::isTrue($arParams['REQUIRED']);
$isChecked = Tools::isTrue($arParams['CHECKED']);
$isHint = boolval(strlen($arParams['HINT']));
$isHint = (string)($arParams['HINT']) !== '';
$isDatepicker = Tools::isTrue($arParams['DATEPICKER']) || is_array($arParams['DATEPICKER']);
$label = $arParams['LABEL'];
@@ -62,9 +62,9 @@ if($isHint) {
?>
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">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="14px" height="14px" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd;" viewBox="0 0 5.36 5.36"><g id="Слой_x0020_1"><path class="fil0" d="M2.68 0c1.48,0 2.68,1.2 2.68,2.68 0,1.48 -1.2,2.68 -2.68,2.68 -1.48,0 -2.68,-1.2 -2.68,-2.68 0,-1.48 1.2,-2.68 2.68,-2.68zm-0.48 2.98c0.21,-0.16 0.37,-0.34 0.5,-0.55 0.13,-0.2 0.19,-0.41 0.19,-0.62 0,-0.2 -0.08,-0.3 -0.23,-0.3 -0.07,0 -0.12,0.02 -0.16,0.06 -0.04,0.04 -0.06,0.1 -0.06,0.17 0,0.07 0.02,0.15 0.05,0.24l-0.64 0.15c-0.05,-0.14 -0.07,-0.28 -0.07,-0.41 0,-0.25 0.08,-0.45 0.23,-0.6 0.16,-0.14 0.38,-0.21 0.66,-0.21 0.29,0 0.51,0.08 0.67,0.23 0.16,0.15 0.24,0.37 0.24,0.65 0,0.26 -0.06,0.5 -0.19,0.72 -0.13,0.22 -0.31,0.42 -0.55,0.61l0 0.42 -0.64 0 0 -0.56zm-0.02 0.81l0.69 0 0 0.67 -0.69 0 0 -0.67z"/></g></svg>
</div><?}
if($isHint){
app()->service()->templater()->render('kit:field/hint', ['TITLE' => $arParams['HINT']]);
}
?>
<div class="kit-field__label"><div class="kit-field__label-content kit-line-clamp"><?=$label;?></div><?
if(in_array($arParams['TYPE'], ['radio', 'checkbox'])) {?>
templates/svg/shop/cardPictureEmpty.php
+3
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

tests/card/block.php
+72
View File
@@ -0,0 +1,72 @@
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>
<?
if(\Bitrix\Main\Loader::includeModule('wt.core')) {
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 type="text/css">
.section-product-list {
--col-count: 5;
}
.section-product-list .flex-card {
--kit-color-content: #FFF;
--aspect-ratio: calc(200 / 250);
}
.section-product-list .flex-card__picture {
flex-grow: 1;
}
.flex-card__hover {
text-align: center;
color: grey;
font-size: 0.8em;
}
</style>
<?
$items = array_fill(0, 40, [
'id' => 1,
'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit Ab accusamus aliquid, consequuntur corporis ducimus',
'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit Ab accusamus aliquid, consequuntur corporis ducimus',
'picture' => app()->service()->templater()->get('kit:svg/shop/cardPictureEmpty'),
'text_preview' => 'asdas asdas dasdasd',
'tickets' => [
[
'code' => 'news',
'name' => 'Новинка'
],
[
'code' => 'discount',
'name' => 'Скидка'
]
]
]);
?>
<div class="kit-wrapper">
<section class="section-product-list">
<div>
<h1>Каталог</h1>
</div>
<div class="flex-list flex-card-list--list-">
<?foreach($items as $item) {?>
<div class="flex-list-item">
<?
echo app()->service()->templater()->get('kit:card/block', $item);
?>
</div>
<?}?>
</div>
</section>
</div>
tests/cheatsheet.php
+103 -5
View File
@@ -15,7 +15,11 @@ if(\Bitrix\Main\Loader::includeModule('wt.core')) {
$APPLICATION->ShowHead();
?>
<script>
kit.ready(['popover', 'datepicker'], function () {
});
</script>
<div class="kit-wrapper">
<h1 style="text-align: center;">BX.KIT FRONT-END FRAMEWORK</h1>
@@ -27,6 +31,8 @@ $APPLICATION->ShowHead();
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis eos esse excepturi explicabo fugit labore laborum quaerat quasi voluptatibus? A ab earum explicabo labore nobis nostrum optio perspiciatis provident, quam.</p>
<h2>Tooltip</h2>
<div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
<div class="flex-list-item">
<?
@@ -34,7 +40,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip on top',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'top',
'title' => 'Tooltip on top'
]
@@ -47,7 +53,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip on end',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'right',
'title' => 'Tooltip on end'
]
@@ -60,7 +66,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip on bottom',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'bottom',
'title' => 'Tooltip on bottom'
]
@@ -73,7 +79,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip on start',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-placement' => 'left',
'title' => 'Tooltip on start'
]
@@ -86,7 +92,7 @@ $APPLICATION->ShowHead();
'LABEL' => 'Tooltip with HTML',
'CLASS' => '',
'ATTR' => [
'data-toggle' => 'tooltip',
'data-bs-toggle' => 'tooltip',
'data-bs-html' => 'true',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
@@ -95,6 +101,98 @@ $APPLICATION->ShowHead();
</div>
</div>
<h2>Popover</h2>
<div class="flex-line-wrap flex-col-count" style="--flex-col-count: 5">
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on top',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'top',
'data-bs-content' => 'Top popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on right',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'right',
'data-bs-content' => 'Right popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on bottom',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'bottom',
'data-bs-content' => 'Bottom popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'Popover on left',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-placement' => 'left',
'data-bs-content' => 'Left popover',
'data-bs-container' => 'body',
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => htmlspecialchars('<HTML> & header'),
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
'data-bs-container' => 'body',
'data-bs-html' => 'true',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
]);
?>
</div>
<div class="flex-list-item">
<?
service()->templater()->render('kit:button', [
'LABEL' => 'trigger focus',
'CLASS' => '',
'ATTR' => [
'data-bs-toggle' => 'popover',
'data-bs-content' => 'And here\'s some amazing content. It\'s very engaging. <em>Right</em>?',
'data-bs-container' => 'body',
'data-bs-html' => 'true',
'data-bs-trigger' => 'focus',
'title' => '<em>Tooltip</em> <u>with</u> <b>HTML</b>'
]
]);
?>
</div>
</div>
<div class="d-flex justify-content-between flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">
tests/flex-card/product-list-item.php
-49
View File
@@ -1,49 +0,0 @@
<?php
?>
<div class="flex-card aspect-ratio flex-list-item">
<div class="flex-card__section">
<div class="flex-card__content">
<div class="flex-card__body-shell aspect-ratio">
<div class="flex-card__body">
<div class="flex-card__picture">
<div class="kit-picture" style="background-image: url(<?=$item['image_preview']?>)">
</div>
</div>
<div class="flex-card__title">
<div class="kit-line-clamp">
<?=$item['name']?>
</div>
</div>
<div class="flex-card__props"></div>
</div>
</div>
<div class="flex-card__header">
<div class="flex-list flex-list--ticket">
<?
foreach ($item['tickets'] as $ticket) {
?>
<div class="flex-list-item">
<div class="ticket-item <?=$ticket['code']?>">
<div class="kit-line-clamp"><?=$ticket['name']?></div>
</div>
</div>
<?
}
?>
</div>
</div>
<div class="flex-card__footer"></div>
<div class="flex-card__hover">
<div class="flex-card__hover-content">
<?=$item['hover']?>
</div>
</div>
<div class="flex-card__border"></div>
</div>
</div>
</div>
tests/flex-card/product-list.php
-65
View File
@@ -1,65 +0,0 @@
<head>
<script src="chat.js"></script>
<link href="./../../assets/flex-kit/flex-kit.css" rel="stylesheet">
<style type="text/css">
.section-product-list {
--col-count: 4;
}
.section-product-list .flex-card {
--kit-color-content: #FFF;
--aspect-ratio: calc(200 / 250);
}
.section-product-list .flex-card__picture {
flex-grow: 1;
}
.flex-card__hover {
text-align: center;
color: grey;
font-size: 0.8em;
}
</style>
</head>
<?
$items = array_fill(0, 40, [
'id' => 1,
'name' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit Ab accusamus aliquid, consequuntur corporis ducimus',
'hover' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit Ab accusamus aliquid, consequuntur corporis ducimus',
'image_preview' => './product.svg',
'image_detail' => '',
'text_preview' => 'asdas asdas dasdasd',
'tickets' => [
[
'code' => 'news',
'name' => 'Новинка'
],
[
'code' => 'discount',
'name' => 'Скидка'
]
]
]);
?>
<body>
<div class="kit-wrapper">
<section class="section-product-list">
<div>
<h1>Каталог</h1>
</div>
<div class="flex-list flex-card-list--list-">
<?foreach($items as $item) {?>
<?
include "product-list-item.php";
?>
<?}?>
</div>
</section>
</div>
</body>
tests/flex-card/product.svg
-3
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 6.7 KiB