Update
This commit is contained in:
root
@@ -13,8 +13,10 @@ return [
|
||||
'clipboard',
|
||||
'ui.fonts.opensans',
|
||||
'popup',
|
||||
'ui.design-tokens.air',
|
||||
'ui.icon-set.actions',
|
||||
'ui.icon-set.main',
|
||||
'ui.icon-set.outline',
|
||||
],
|
||||
'skip_core' => false,
|
||||
];
|
||||
|
||||
@@ -81,39 +81,107 @@
|
||||
z-index: 1;
|
||||
transform: translateX(-100%);
|
||||
transition: all 300ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.side-panel-extra-labels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-top: 10px;
|
||||
|
||||
transition-property: opacity, display, transform;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
|
||||
.side-panel-extra-labels.--hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.side-panel-label {
|
||||
display: inline-flex;
|
||||
min-width: 37px;
|
||||
height: 38px;
|
||||
padding-right: 5px;
|
||||
align-items: center;
|
||||
min-width: 36px;
|
||||
height: 28px;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(47, 198, 246, 0.95);
|
||||
border-top-left-radius: 19px;
|
||||
border-bottom-left-radius: 19px;
|
||||
position: relative;
|
||||
|
||||
background: var(--sidepanel-label-background, var(--ui-color));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
/*overflow: hidden;*/
|
||||
transition: top 0.3s;
|
||||
box-shadow: inset -6px 0 8px -10px rgba(0, 0, 0, 0.95);
|
||||
box-shadow: var(--sidepanel-label-box-shadow, inset -6px 0 8px -10px rgba(0, 0, 0, 0.95));
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
|
||||
transition-property: opacity, display, transform;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-behavior: allow-discrete;
|
||||
|
||||
box-sizing: border-box;
|
||||
border-top-left-radius: 18px;
|
||||
border-bottom-left-radius: 18px;
|
||||
|
||||
border: var(--sidepanel-label-border);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.side-panel-label.--ui-hoverable {
|
||||
--ui-color: var(--ui-color-base-6);
|
||||
}
|
||||
|
||||
.side-panel-label.--close-label.--ui-hoverable {
|
||||
--ui-color: #0075FF;
|
||||
}
|
||||
|
||||
.side-panel-label:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: -5px 0 -5px -5px;
|
||||
}
|
||||
|
||||
.side-panel-label:hover {
|
||||
background: var(--sidepanel-label-background-hover, var(--ui-color-hover));
|
||||
border: var(--sidepanel-label-border-hover);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.side-panel-label.--close-label {
|
||||
min-width: 43px;
|
||||
height: 36px;
|
||||
|
||||
background: var(--sidepanel-close-label-background, var(--sidepanel-label-background, var(--ui-color)));
|
||||
border: var(--sidepanel-close-label-border, var(--sidepanel-label-border));
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.side-panel-label:hover.--close-label {
|
||||
background: var(--sidepanel-close-label-background-hover, var(--sidepanel-label-background-hover, var(--ui-color-hover)));
|
||||
border: var(--sidepanel-close-label-border-hover, var(--sidepanel-label-border-hover));
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.side-panel-label.--hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.side-panel-label:not(.--visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side-panel-label-icon-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 34px;
|
||||
height: 38px;
|
||||
vertical-align: top;
|
||||
border-radius: 19px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
@@ -121,43 +189,27 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 9px;
|
||||
border-radius: 50%;
|
||||
transition: all 300ms ease;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 7px;
|
||||
transition: all 150ms ease;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
box-sizing: content-box;
|
||||
--ui-icon-set__icon-color: var(--sidepanel-label-icon-color, var(--ui-color-base-2));
|
||||
}
|
||||
|
||||
.side-panel-label-icon-close:before {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 5px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M11.381 1.746L7.138 5.988l4.248 4.249-1.151 1.152L5.986 7.14l-4.242 4.244-1.147-1.146L4.84 5.994.592 1.747 1.744.595l4.248 4.247L10.235.6z'/%3E%3C/svg%3E");
|
||||
opacity: 0.85;
|
||||
.side-panel-label:hover .side-panel-label-icon {
|
||||
--ui-icon-set__icon-color: var(--sidepanel-label-icon-color-hover, var(--ui-color-base-2));
|
||||
}
|
||||
|
||||
.side-panel-label-icon-minimize {
|
||||
opacity: 0.5;
|
||||
/*--ui-icon-set__icon-color: #878f98;*/
|
||||
.side-panel-label.--close-label .side-panel-label-icon {
|
||||
margin-left: 13px;
|
||||
--ui-icon-set__icon-color: var(--sidepanel-close-label-icon-color, #ffffff);
|
||||
}
|
||||
|
||||
.side-panel-label:hover .side-panel-label-icon-minimize {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.side-panel-label-icon-new-window {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.991.065v1.67H2.17a.5.5 0 00-.492.41l-.008.09v8.651a.5.5 0 00.41.492l.09.008h8.65a.5.5 0 00.493-.41l.008-.09-.001-2.846 1.67.001v4.015a1 1 0 01-1 1H1a1 1 0 01-1-1V1.066a1 1 0 011-1h3.991zm7 0a1 1 0 011 1l-.001 3.987h-1.67V3.035l-4.39 4.39-1.28-1.28 4.409-4.41H7.998V.065h3.992z' fill='%23878F98' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.side-panel-label-icon-copy-link {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.467 5.728c.182.183.34.38.473.59L9.674 7.584a1.91 1.91 0 00-3.015-.741l-.11.1L2.694 10.8a1.91 1.91 0 002.592 2.804l.11-.102 1.309-1.308c.703.25 1.42.257 2.149.019l-2.508 2.505A3.442 3.442 0 111.478 9.85l4.12-4.12a3.442 3.442 0 014.869 0zm4.426-4.425a3.442 3.442 0 010 4.868l-4.12 4.12a3.442 3.442 0 01-5.341-.59l1.265-1.265a1.91 1.91 0 003.015.741l.11-.101 3.856-3.856a1.91 1.91 0 00-2.592-2.803l-.11.102-1.31 1.308a3.232 3.232 0 00-2.148-.019l2.507-2.505a3.442 3.442 0 014.868 0z' fill='%23878F98' fill-rule='evenodd'/%3E%3C/svg%3E");
|
||||
opacity: 0.6;
|
||||
.side-panel-label.--close-label:hover .side-panel-label-icon {
|
||||
--ui-icon-set__icon-color: var(--sidepanel-close-label-icon-color-hover, #ffffff);
|
||||
}
|
||||
|
||||
.side-panel-label-icon--hide .side-panel-label-icon-box {
|
||||
@@ -169,32 +221,14 @@
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.side-panel-label:hover .side-panel-label-icon:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.side-panel-label:hover .side-panel-label-icon-close:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.771C6.35 1.771 1.771 6.351 1.771 12c0 5.65 4.58 10.229 10.229 10.229 5.65 0 10.229-4.58 10.229-10.229 0-5.65-4.58-10.229-10.229-10.229z'/%3E%3C/svg%3E");
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.side-panel-label-text {
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0;
|
||||
height: 100%;
|
||||
margin-left: 2px;
|
||||
margin-right: 8px;
|
||||
line-height: 38px;
|
||||
vertical-align: top;
|
||||
font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
|
||||
font-weight: var(--ui-font-weight-bold, 700);
|
||||
font-size: 11px;
|
||||
@@ -380,41 +414,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.side-panel-print {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -64px;
|
||||
bottom: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.side-panel-print-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.side-panel-print:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
right: 24px;
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTIuODk1IDMuMjI1aDEwLjExN2MuMTcgMCAuMzA4LS4xNC4zMDgtLjMxN1YuMzg1YS4zMTIuMzEyIDAgMDAtLjMwOC0uMzE3SDIuODk1YS4zMTQuMzE0IDAgMDAtLjMwOC4zMTd2Mi41MjZjMCAuMTc0LjEzOS4zMTQuMzA4LjMxNHptMTIuMTc3IDEuNTc5SDEuMTVhLjc3MS43NzEgMCAwMC0uNzczLjc2NnY1LjM2N2MwIC40MjIuMzQ3Ljc2Ny43NzMuNzY3aC43NzR2My4wNjZjMCAuNDIzLjM0Ny43NjcuNzczLjc2N2gxMC44MjhhLjc3MS43NzEgMCAwMC43NzQtLjc2N3YtMy4wNjZoLjc3M2EuNzcxLjc3MSAwIDAwLjc3NC0uNzY3VjUuNTdhLjc3MS43NzEgMCAwMC0uNzc0LS43NjZ6bS0yLjMyIDkuMkgzLjQ3di0zLjA2N2g5LjI4djMuMDY3em0uNzczLTYuMTM0YS43NzEuNzcxIDAgMDEtLjc3My0uNzY2YzAtLjQyMy4zNDctLjc2Ny43NzMtLjc2Ny40MjcgMCAuNzc0LjM0NC43NzQuNzY3YS43NzEuNzcxIDAgMDEtLjc3NC43NjZ6IiBmaWxsPSIjRkZGIiBvcGFjaXR5PSIuNiIvPjwvc3ZnPg==);
|
||||
opacity: 0.2;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.side-panel-print-visible:after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.side-panel-print:hover:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.side-panel-toolbar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
||||
@@ -66,16 +66,22 @@ this.BX = this.BX || {};
|
||||
babelHelpers.defineProperty(this, "slider", null);
|
||||
babelHelpers.defineProperty(this, "color", null);
|
||||
babelHelpers.defineProperty(this, "bgColor", null);
|
||||
babelHelpers.defineProperty(this, "className", '');
|
||||
babelHelpers.defineProperty(this, "iconClass", '');
|
||||
babelHelpers.defineProperty(this, "iconTitle", '');
|
||||
babelHelpers.defineProperty(this, "onclick", null);
|
||||
babelHelpers.defineProperty(this, "text", null);
|
||||
babelHelpers.defineProperty(this, "hidden", false);
|
||||
babelHelpers.defineProperty(this, "visible", true);
|
||||
babelHelpers.defineProperty(this, "cache", new main_core.Cache.MemoryCache());
|
||||
this.slider = slider;
|
||||
const options = main_core.Type.isPlainObject(labelOptions) ? labelOptions : {};
|
||||
this.setBgColor(options.bgColor);
|
||||
this.hidden = main_core.Type.isBoolean(options.hidden) ? options.hidden : this.hidden;
|
||||
this.visible = main_core.Type.isBoolean(options.visible) ? options.visible : this.visible;
|
||||
this.setColor(options.color);
|
||||
this.setBgColor(options.bgColor);
|
||||
this.setText(options.text);
|
||||
this.setClassName(options.className);
|
||||
this.setIconClass(options.iconClass);
|
||||
this.setIconTitle(options.iconTitle);
|
||||
this.setOnclick(options.onclick);
|
||||
@@ -84,9 +90,19 @@ this.BX = this.BX || {};
|
||||
key: "getContainer",
|
||||
value: function getContainer() {
|
||||
return this.cache.remember('container', () => {
|
||||
const classes = ['side-panel-label'];
|
||||
if (this.getClassName()) {
|
||||
classes.push(this.getClassName());
|
||||
}
|
||||
if (this.isHidden()) {
|
||||
classes.push('--hidden');
|
||||
}
|
||||
if (this.isVisible()) {
|
||||
classes.push('--visible');
|
||||
}
|
||||
return main_core.Dom.create('div', {
|
||||
props: {
|
||||
className: 'side-panel-label'
|
||||
className: classes.join(' ')
|
||||
},
|
||||
children: [this.getIconBox(), this.getTextContainer()],
|
||||
events: {
|
||||
@@ -180,9 +196,10 @@ this.BX = this.BX || {};
|
||||
}, {
|
||||
key: "setColor",
|
||||
value: function setColor(color) {
|
||||
if (main_core.Type.isStringFilled(color)) {
|
||||
if (main_core.Type.isStringFilled(color) || color === null) {
|
||||
this.color = color;
|
||||
main_core.Dom.style(this.getTextContainer(), 'color', color);
|
||||
main_core.Dom.style(this.getTextContainer(), 'color', this.color);
|
||||
main_core.Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', this.color);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
@@ -207,10 +224,14 @@ this.BX = this.BX || {};
|
||||
bgColor = `#${hex}${alfaHex}`;
|
||||
}
|
||||
this.bgColor = bgColor;
|
||||
main_core.Dom.style(this.getContainer(), 'background-color', bgColor);
|
||||
main_core.Dom.style(this.getContainer(), '--ui-color', bgColor);
|
||||
if (this.getColor() === null) {
|
||||
main_core.Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', '#fff');
|
||||
}
|
||||
} else if (bgColor === null) {
|
||||
this.bgColor = null;
|
||||
main_core.Dom.style(this.getContainer(), 'background-color', null);
|
||||
main_core.Dom.style(this.getContainer(), '--ui-color', null);
|
||||
main_core.Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', null);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
@@ -234,6 +255,23 @@ this.BX = this.BX || {};
|
||||
value: function getText() {
|
||||
return this.text;
|
||||
}
|
||||
}, {
|
||||
key: "setClassName",
|
||||
value: function setClassName(className) {
|
||||
if (main_core.Type.isStringFilled(className)) {
|
||||
main_core.Dom.removeClass(this.getContainer(), this.className);
|
||||
this.className = className;
|
||||
main_core.Dom.addClass(this.getContainer(), this.className);
|
||||
} else if (className === null) {
|
||||
main_core.Dom.removeClass(this.getContainer(), this.className);
|
||||
this.className = className;
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "getClassName",
|
||||
value: function getClassName() {
|
||||
return this.className;
|
||||
}
|
||||
}, {
|
||||
key: "setIconClass",
|
||||
value: function setIconClass(iconClass) {
|
||||
@@ -264,6 +302,33 @@ this.BX = this.BX || {};
|
||||
value: function getIconTitle() {
|
||||
return this.iconTitle;
|
||||
}
|
||||
}, {
|
||||
key: "isHidden",
|
||||
value: function isHidden() {
|
||||
return this.hidden;
|
||||
}
|
||||
}, {
|
||||
key: "hide",
|
||||
value: function hide() {
|
||||
this.hidden = true;
|
||||
main_core.Dom.addClass(this.getContainer(), '--hidden');
|
||||
}
|
||||
}, {
|
||||
key: "show",
|
||||
value: function show() {
|
||||
this.hidden = false;
|
||||
main_core.Dom.removeClass(this.getContainer(), '--hidden');
|
||||
}
|
||||
}, {
|
||||
key: "isVisible",
|
||||
value: function isVisible() {
|
||||
return this.visible;
|
||||
}
|
||||
}, {
|
||||
key: "setVisible",
|
||||
value: function setVisible(isVisible = true) {
|
||||
main_core.Dom.toggleClass(this.getContainer(), '--visible', isVisible);
|
||||
}
|
||||
}, {
|
||||
key: "setOnclick",
|
||||
value: function setOnclick(fn) {
|
||||
@@ -423,6 +488,7 @@ this.BX = this.BX || {};
|
||||
var _designSystemContext = /*#__PURE__*/new WeakMap();
|
||||
var _zIndexComponent = /*#__PURE__*/new WeakMap();
|
||||
var _autoOffset = /*#__PURE__*/new WeakMap();
|
||||
var _subscribeEvents = /*#__PURE__*/new WeakSet();
|
||||
var _getAnimationState = /*#__PURE__*/new WeakSet();
|
||||
var _calculateOuterBoundary = /*#__PURE__*/new WeakSet();
|
||||
let Slider = /*#__PURE__*/function () {
|
||||
@@ -430,6 +496,7 @@ this.BX = this.BX || {};
|
||||
babelHelpers.classCallCheck(this, Slider);
|
||||
_classPrivateMethodInitSpec$1(this, _calculateOuterBoundary);
|
||||
_classPrivateMethodInitSpec$1(this, _getAnimationState);
|
||||
_classPrivateMethodInitSpec$1(this, _subscribeEvents);
|
||||
_classPrivateFieldInitSpec$1(this, _refs, {
|
||||
writable: true,
|
||||
value: new main_core_cache.MemoryCache()
|
||||
@@ -483,7 +550,7 @@ this.BX = this.BX || {};
|
||||
this.cacheable = options.cacheable !== false;
|
||||
this.autoFocus = options.autoFocus !== false;
|
||||
this.printable = options.printable === true;
|
||||
this.allowChangeHistory = options.allowChangeHistory !== false;
|
||||
this.allowChangeHistory = main_core.Type.isBoolean(options.allowChangeHistory) ? options.allowChangeHistory : null;
|
||||
this.allowChangeTitle = main_core.Type.isBoolean(options.allowChangeTitle) ? options.allowChangeTitle : null;
|
||||
this.allowCrossOrigin = options.allowCrossOrigin === true;
|
||||
this.data = new Dictionary(main_core.Type.isPlainObject(options.data) ? options.data : {});
|
||||
@@ -535,15 +602,13 @@ this.BX = this.BX || {};
|
||||
this.animationName = 'sliding';
|
||||
this.animationOptions = {};
|
||||
this.minimizeOptions = null;
|
||||
const minimizeOptions = options.minimizeOptions;
|
||||
if (main_core.Type.isPlainObject(minimizeOptions) && main_core.Type.isStringFilled(minimizeOptions.entityType) && (main_core.Type.isStringFilled(minimizeOptions.entityId) || main_core.Type.isNumber(minimizeOptions.entityId)) && main_core.Type.isStringFilled(minimizeOptions.url)) {
|
||||
this.minimizeOptions = minimizeOptions;
|
||||
}
|
||||
this.setMinimizeOptions(options.minimizeOptions);
|
||||
this.setToolbarOnOpen(options.hideToolbarOnOpen);
|
||||
this.setDesignSystemContext(options.designSystemContext);
|
||||
this.setAutoOffset(options.autoOffset);
|
||||
this.label = new Label(this, {
|
||||
iconClass: 'side-panel-label-icon-close',
|
||||
className: '--close-label --ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-close ui-icon-set --cross-l',
|
||||
iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_CLOSE'),
|
||||
onclick(label, slider) {
|
||||
slider.close();
|
||||
@@ -553,26 +618,25 @@ this.BX = this.BX || {};
|
||||
this.label.setText(labelOptions.text);
|
||||
this.label.setColor(labelOptions.color);
|
||||
this.label.setBgColor(labelOptions.bgColor, labelOptions.opacity);
|
||||
this.minimizeLabel = null;
|
||||
this.minimizeLabel = new Label(this, {
|
||||
className: '--ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-minimize ui-icon-set --o-minimize',
|
||||
iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_MINIMIZE'),
|
||||
onclick: (label, slider) => {
|
||||
if (this.isLoaded()) {
|
||||
this.minimize();
|
||||
}
|
||||
},
|
||||
visible: this.areMinimizeOptionsValid(this.minimizeOptions)
|
||||
});
|
||||
this.newWindowLabel = null;
|
||||
this.copyLinkLabel = null;
|
||||
if (!this.isSelfContained() && this.minimizeOptions !== null) {
|
||||
this.minimizeLabel = new Label(this, {
|
||||
iconClass: 'side-panel-label-icon-minimize ui-icon-set --arrow-line',
|
||||
iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_MINIMIZE'),
|
||||
bgColor: ['#d9dcdf', 100],
|
||||
onclick: (label, slider) => {
|
||||
if (this.isLoaded()) {
|
||||
this.minimize();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
if (options.newWindowLabel === true && (!this.isSelfContained() || main_core.Type.isStringFilled(options.newWindowUrl))) {
|
||||
this.printLabel = null;
|
||||
if (options.newWindowLabel === true && (this.canChangeHistory() || main_core.Type.isStringFilled(options.newWindowUrl))) {
|
||||
this.newWindowLabel = new Label(this, {
|
||||
iconClass: 'side-panel-label-icon-new-window',
|
||||
className: '--ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-new-window ui-icon-set --go-to-l',
|
||||
iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_NEW_WINDOW'),
|
||||
bgColor: ['#d9dcdf', 100],
|
||||
onclick(label, slider) {
|
||||
const newWindowUrl = main_core.Type.isStringFilled(options.newWindowUrl) ? options.newWindowUrl : slider.getUrl();
|
||||
Object.assign(document.createElement('a'), {
|
||||
@@ -582,11 +646,11 @@ this.BX = this.BX || {};
|
||||
}
|
||||
});
|
||||
}
|
||||
if (options.copyLinkLabel === true && (!this.isSelfContained() || main_core.Type.isStringFilled(options.newWindowUrl))) {
|
||||
if (options.copyLinkLabel === true && (this.canChangeHistory() || main_core.Type.isStringFilled(options.newWindowUrl))) {
|
||||
this.copyLinkLabel = new Label(this, {
|
||||
iconClass: 'side-panel-label-icon-copy-link',
|
||||
iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_COPY_LINK'),
|
||||
bgColor: ['#d9dcdf', 100]
|
||||
className: '--ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-copy-link ui-icon-set --o-link',
|
||||
iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_COPY_LINK')
|
||||
});
|
||||
BX.clipboard.bindCopyClick(this.copyLinkLabel.getIconBox(), {
|
||||
text: () => {
|
||||
@@ -596,6 +660,13 @@ this.BX = this.BX || {};
|
||||
}
|
||||
});
|
||||
}
|
||||
this.printLabel = new Label(this, {
|
||||
hidden: !this.isPrintable(),
|
||||
className: '--side-panel-label-print --ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-print ui-icon-set --o-printer',
|
||||
iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_PRINT'),
|
||||
onclick: this.handlePrintBtnClick.bind(this)
|
||||
});
|
||||
|
||||
// Compatibility
|
||||
if (this.url.includes('crm.activity.planner/slider.php') && options.events && main_core.Type.isFunction(options.events.onOpen) && options.events.compatibleEvents !== false) {
|
||||
@@ -605,15 +676,7 @@ this.BX = this.BX || {};
|
||||
onOpen(event.getSlider());
|
||||
};
|
||||
}
|
||||
if (main_core.Type.isPlainObject(options.events)) {
|
||||
for (const [eventName, fn] of Object.entries(options.events)) {
|
||||
if (main_core.Type.isFunction(fn)) {
|
||||
main_core_events.EventEmitter.subscribe(this, Slider.getEventFullName(eventName), fn, {
|
||||
compatMode: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
[options.events].flat().forEach(events => _classPrivateMethodGet$1(this, _subscribeEvents, _subscribeEvents2).call(this, events));
|
||||
}
|
||||
babelHelpers.createClass(Slider, [{
|
||||
key: "open",
|
||||
@@ -725,6 +788,19 @@ this.BX = this.BX || {};
|
||||
this.animationName = type === 'scale' ? type : 'sliding';
|
||||
this.animationOptions = main_core.Type.isPlainObject(options) ? options : {};
|
||||
}
|
||||
}, {
|
||||
key: "setMinimizeOptions",
|
||||
value: function setMinimizeOptions(minimizeOptions) {
|
||||
var _this$minimizeLabel;
|
||||
const showMinimizeLabel = this.areMinimizeOptionsValid(minimizeOptions);
|
||||
this.minimizeOptions = minimizeOptions;
|
||||
(_this$minimizeLabel = this.minimizeLabel) === null || _this$minimizeLabel === void 0 ? void 0 : _this$minimizeLabel.setVisible(showMinimizeLabel);
|
||||
}
|
||||
}, {
|
||||
key: "areMinimizeOptionsValid",
|
||||
value: function areMinimizeOptionsValid(minimizeOptions) {
|
||||
return main_core.Type.isPlainObject(minimizeOptions) && main_core.Type.isStringFilled(minimizeOptions.entityType) && (main_core.Type.isStringFilled(minimizeOptions.entityId) || main_core.Type.isNumber(minimizeOptions.entityId)) && main_core.Type.isStringFilled(minimizeOptions.url);
|
||||
}
|
||||
}, {
|
||||
key: "getMinimizeOptions",
|
||||
value: function getMinimizeOptions() {
|
||||
@@ -934,7 +1010,13 @@ this.BX = this.BX || {};
|
||||
}, {
|
||||
key: "canChangeHistory",
|
||||
value: function canChangeHistory() {
|
||||
return this.allowChangeHistory && !this.allowCrossOrigin && !this.isSelfContained() && !/^\/bitrix\/(components|tools)\//i.test(this.getUrl());
|
||||
if (this.allowCrossOrigin || /^\/bitrix\/(components|tools)\//i.test(this.getUrl())) {
|
||||
return false;
|
||||
}
|
||||
if (this.allowChangeHistory === null) {
|
||||
return !this.isSelfContained();
|
||||
}
|
||||
return this.allowChangeHistory;
|
||||
}
|
||||
}, {
|
||||
key: "canChangeTitle",
|
||||
@@ -1001,12 +1083,12 @@ this.BX = this.BX || {};
|
||||
}, {
|
||||
key: "showCloseBtn",
|
||||
value: function showCloseBtn() {
|
||||
this.getLabel().showIcon();
|
||||
this.getLabel().show();
|
||||
}
|
||||
}, {
|
||||
key: "hideCloseBtn",
|
||||
value: function hideCloseBtn() {
|
||||
this.getLabel().hideIcon();
|
||||
this.getLabel().hide();
|
||||
}
|
||||
}, {
|
||||
key: "showOrLightenCloseBtn",
|
||||
@@ -1029,22 +1111,26 @@ this.BX = this.BX || {};
|
||||
}, {
|
||||
key: "showPrintBtn",
|
||||
value: function showPrintBtn() {
|
||||
main_core.Dom.addClass(this.getPrintBtn(), 'side-panel-print-visible');
|
||||
if (this.printLabel !== null) {
|
||||
this.printLabel.show();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "hidePrintBtn",
|
||||
value: function hidePrintBtn() {
|
||||
main_core.Dom.removeClass(this.getPrintBtn(), 'side-panel-print-visible');
|
||||
if (this.printLabel !== null) {
|
||||
this.printLabel.hide();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "showExtraLabels",
|
||||
value: function showExtraLabels() {
|
||||
main_core.Dom.style(this.getExtraLabelsContainer(), 'display', null);
|
||||
main_core.Dom.removeClass(this.getExtraLabelsContainer(), '--hidden');
|
||||
}
|
||||
}, {
|
||||
key: "hideExtraLabels",
|
||||
value: function hideExtraLabels() {
|
||||
main_core.Dom.style(this.getExtraLabelsContainer(), 'display', 'none');
|
||||
main_core.Dom.addClass(this.getExtraLabelsContainer(), '--hidden');
|
||||
}
|
||||
}, {
|
||||
key: "setContentClass",
|
||||
@@ -1438,7 +1524,7 @@ this.BX = this.BX || {};
|
||||
<div class="side-panel side-panel-container">
|
||||
${0}
|
||||
</div>
|
||||
`), this.hideControls ? content : [content, this.getLabelsContainer(), this.getPrintBtn()]);
|
||||
`), this.hideControls ? content : [content, this.getLabelsContainer()]);
|
||||
main_core.Dom.addClass(this.layout.container, this.getDesignSystemContext());
|
||||
main_core.Dom.addClass(this.layout.container, this.containerClassName);
|
||||
return this.layout.container;
|
||||
@@ -1477,7 +1563,7 @@ this.BX = this.BX || {};
|
||||
props: {
|
||||
className: 'side-panel-extra-labels'
|
||||
},
|
||||
children: [this.minimizeLabel ? this.minimizeLabel.getContainer() : null, this.newWindowLabel ? this.newWindowLabel.getContainer() : null, this.copyLinkLabel ? this.copyLinkLabel.getContainer() : null]
|
||||
children: [this.minimizeLabel.getContainer(), this.newWindowLabel ? this.newWindowLabel.getContainer() : null, this.copyLinkLabel ? this.copyLinkLabel.getContainer() : null, this.printLabel ? this.printLabel.getContainer() : null]
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -1507,19 +1593,9 @@ this.BX = this.BX || {};
|
||||
return this.minimizeLabel;
|
||||
}
|
||||
}, {
|
||||
key: "getPrintBtn",
|
||||
value: function getPrintBtn() {
|
||||
return babelHelpers.classPrivateFieldGet(this, _refs).remember('print-btn', () => {
|
||||
return main_core.Dom.create('span', {
|
||||
props: {
|
||||
className: 'side-panel-print',
|
||||
title: main_core.Loc.getMessage('MAIN_SIDEPANEL_PRINT')
|
||||
},
|
||||
events: {
|
||||
click: this.handlePrintBtnClick.bind(this)
|
||||
}
|
||||
});
|
||||
});
|
||||
key: "getPrintLabel",
|
||||
value: function getPrintLabel() {
|
||||
return this.printLabel;
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
@@ -1775,9 +1851,6 @@ this.BX = this.BX || {};
|
||||
}, {
|
||||
key: "animateOpening",
|
||||
value: function animateOpening() {
|
||||
if (this.isPrintable()) {
|
||||
this.showPrintBtn();
|
||||
}
|
||||
if (this.animation) {
|
||||
this.animation.stop();
|
||||
}
|
||||
@@ -2176,6 +2249,17 @@ this.BX = this.BX || {};
|
||||
this.firePageEvent('onEscapePress');
|
||||
this.fireFrameEvent('onEscapePress');
|
||||
}
|
||||
}, {
|
||||
key: "isOnTopOfPopup",
|
||||
value: function isOnTopOfPopup(popup) {
|
||||
const sameStack = this.getZIndexComponent().getStack() === popup.getZIndexComponent().getStack();
|
||||
const popupOnTop = sameStack && popup.getZindex() > this.getZindex();
|
||||
let popupInside = this.getContainer().contains(popup.getPopupContainer());
|
||||
if (this.getFrameWindow()) {
|
||||
popupInside = this.getFrameWindow().document.contains(popup.getPopupContainer());
|
||||
}
|
||||
return !(popup.isShown() && (popupOnTop || popupInside));
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
* @param {BaseEvent} event
|
||||
@@ -2292,6 +2376,17 @@ this.BX = this.BX || {};
|
||||
}]);
|
||||
return Slider;
|
||||
}();
|
||||
function _subscribeEvents2(events) {
|
||||
if (main_core.Type.isPlainObject(events)) {
|
||||
for (const [eventName, fn] of Object.entries(events)) {
|
||||
if (main_core.Type.isFunction(fn)) {
|
||||
main_core_events.EventEmitter.subscribe(this, Slider.getEventFullName(eventName), fn, {
|
||||
compatMode: true
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function _getAnimationState2(mode) {
|
||||
const states = {
|
||||
right: {
|
||||
@@ -2356,18 +2451,6 @@ this.BX = this.BX || {};
|
||||
return main_core.Runtime.merge(main_core.Type.isPlainObject(outerBoundary) ? outerBoundary : {}, this.getOuterBoundary());
|
||||
}
|
||||
|
||||
let instance = null;
|
||||
function getInstance() {
|
||||
const topWindow = main_pageobject.PageObject.getRootWindow();
|
||||
if (topWindow !== window) {
|
||||
return topWindow.BX.SidePanel.Instance;
|
||||
}
|
||||
if (instance === null) {
|
||||
instance = new SliderManager();
|
||||
}
|
||||
return instance;
|
||||
}
|
||||
|
||||
let _$1 = t => t,
|
||||
_t$1,
|
||||
_t2$1,
|
||||
@@ -2384,7 +2467,7 @@ this.BX = this.BX || {};
|
||||
_this.title = '';
|
||||
_this.url = '';
|
||||
_this.entityType = '';
|
||||
_this.entityId = 0;
|
||||
_this.entityId = '0';
|
||||
_this.entityName = '';
|
||||
_this.refs = new main_core.Cache.MemoryCache();
|
||||
_this.rendered = false;
|
||||
@@ -2450,7 +2533,7 @@ this.BX = this.BX || {};
|
||||
key: "setEntityId",
|
||||
value: function setEntityId(entityId) {
|
||||
if (main_core.Type.isNumber(entityId) || main_core.Type.isStringFilled(entityId)) {
|
||||
this.entityId = entityId;
|
||||
this.entityId = String(entityId);
|
||||
}
|
||||
}
|
||||
}, {
|
||||
@@ -2470,8 +2553,8 @@ this.BX = this.BX || {};
|
||||
value: function getContainer() {
|
||||
return this.refs.remember('container', () => {
|
||||
return main_core.Tag.render(_t$1 || (_t$1 = _$1`
|
||||
<div class="side-panel-toolbar-item"
|
||||
onclick="${0}"
|
||||
<div
|
||||
class="side-panel-toolbar-item"
|
||||
onmouseenter="${0}"
|
||||
onmouseleave="${0}"
|
||||
>
|
||||
@@ -2480,7 +2563,7 @@ this.BX = this.BX || {};
|
||||
<div class="ui-icon-set --cross-20" style="--ui-icon-set__icon-size: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`), this.handleClick.bind(this), this.handleMouseEnter.bind(this), this.handleMouseLeave.bind(this), this.getTitleContainer(), this.handleRemoveBtnClick.bind(this));
|
||||
`), this.handleMouseEnter.bind(this), this.handleMouseLeave.bind(this), this.getTitleContainer(), this.handleRemoveBtnClick.bind(this));
|
||||
});
|
||||
}
|
||||
}, {
|
||||
@@ -2496,7 +2579,7 @@ this.BX = this.BX || {};
|
||||
<a
|
||||
class="side-panel-toolbar-item-title"
|
||||
href="${0}"
|
||||
data-slider-ignore-autobinding="true"
|
||||
data-slider-maximize="true"
|
||||
>${0}</a>
|
||||
`), encodeURI(this.getUrl()), main_core.Text.encode(this.getTitle()));
|
||||
});
|
||||
@@ -2590,15 +2673,6 @@ this.BX = this.BX || {};
|
||||
hint.close();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: "handleClick",
|
||||
value: function handleClick(event) {
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
getInstance().maximize(this.getUrl());
|
||||
}
|
||||
}, {
|
||||
key: "handleMouseEnter",
|
||||
value: function handleMouseEnter() {
|
||||
@@ -2629,6 +2703,18 @@ this.BX = this.BX || {};
|
||||
return ToolbarItem;
|
||||
}(main_core_events.EventEmitter);
|
||||
|
||||
let instance = null;
|
||||
function getInstance() {
|
||||
const topWindow = main_pageobject.PageObject.getRootWindow();
|
||||
if (topWindow !== window) {
|
||||
return topWindow.BX.SidePanel.Instance;
|
||||
}
|
||||
if (instance === null) {
|
||||
instance = new SliderManager();
|
||||
}
|
||||
return instance;
|
||||
}
|
||||
|
||||
let _$2 = t => t,
|
||||
_t$2,
|
||||
_t2$2,
|
||||
@@ -3090,7 +3176,9 @@ this.BX = this.BX || {};
|
||||
}, {
|
||||
key: "getItem",
|
||||
value: function getItem(entityType, entityId) {
|
||||
return this.items.find(item => item.getEntityType() === entityType && item.getEntityId() === entityId) || null;
|
||||
return this.items.find(item => {
|
||||
return item.getEntityType() === entityType && item.getEntityId() === String(entityId);
|
||||
}) || null;
|
||||
}
|
||||
}, {
|
||||
key: "getItemByUrl",
|
||||
@@ -3845,6 +3933,7 @@ this.BX = this.BX || {};
|
||||
console.trace();
|
||||
}
|
||||
parameters.rules.forEach(rule => {
|
||||
var _rule$options;
|
||||
if (main_core.Type.isArray(rule.condition)) {
|
||||
for (let m = 0; m < rule.condition.length; m++) {
|
||||
if (main_core.Type.isString(rule.condition[m])) {
|
||||
@@ -3852,11 +3941,7 @@ this.BX = this.BX || {};
|
||||
}
|
||||
}
|
||||
}
|
||||
rule.options = main_core.Type.isPlainObject(rule.options) ? rule.options : {};
|
||||
if (main_core.Type.isStringFilled(rule.loader) && !main_core.Type.isStringFilled(rule.options.loader)) {
|
||||
rule.options.loader = rule.loader;
|
||||
delete rule.loader;
|
||||
}
|
||||
(_rule$options = rule.options) !== null && _rule$options !== void 0 ? _rule$options : rule.options = {};
|
||||
this.anchorRules.push(rule);
|
||||
});
|
||||
}
|
||||
@@ -3906,16 +3991,16 @@ this.BX = this.BX || {};
|
||||
if (!sameWidth) {
|
||||
this.getTopSlider().showShadow();
|
||||
}
|
||||
this.getTopSlider().hideOrDarkenCloseBtn();
|
||||
this.getTopSlider().hidePrintBtn();
|
||||
this.getTopSlider().hideCloseBtn();
|
||||
this.getTopSlider().hideExtraLabels();
|
||||
} else {
|
||||
slider.setOverlayAnimation(true);
|
||||
}
|
||||
_classPrivateMethodGet$2(this, _addOpenSlider, _addOpenSlider2).call(this, slider);
|
||||
this.getOpenSliders().forEach((currentSlider, index, openSliders) => {
|
||||
currentSlider.getLabel().moveAt(openSliders.length - index - 1); // move down
|
||||
});
|
||||
|
||||
// this.getOpenSliders().forEach((currentSlider: Slider, index: number, openSliders: Slider[]) => {
|
||||
// currentSlider.getLabel().moveAt(openSliders.length - index - 1); // move down
|
||||
// });
|
||||
|
||||
this.losePageFocus();
|
||||
if (!this.opened) {
|
||||
@@ -3963,9 +4048,10 @@ this.BX = this.BX || {};
|
||||
const previousSlider = this.getPreviousSlider();
|
||||
const topSlider = this.getTopSlider();
|
||||
this.exitFullScreen();
|
||||
this.getOpenSliders().forEach((slider, index, openSliders) => {
|
||||
slider.getLabel().moveAt(openSliders.length - index - 2); // move up
|
||||
});
|
||||
|
||||
// this.getOpenSliders().forEach((slider, index, openSliders) => {
|
||||
// slider.getLabel().moveAt(openSliders.length - index - 2); // move up
|
||||
// });
|
||||
|
||||
let visibleSlider = null;
|
||||
const openSliders = this.getOpenSliders();
|
||||
@@ -3982,7 +4068,8 @@ this.BX = this.BX || {};
|
||||
if (previousSlider) {
|
||||
previousSlider.unhideOverlay();
|
||||
previousSlider.hideShadow();
|
||||
previousSlider.showOrLightenCloseBtn();
|
||||
previousSlider.showCloseBtn();
|
||||
previousSlider.showExtraLabels();
|
||||
if (topSlider) {
|
||||
topSlider.hideOverlay();
|
||||
topSlider.hideShadow();
|
||||
@@ -4033,7 +4120,7 @@ this.BX = this.BX || {};
|
||||
entityType,
|
||||
entityId,
|
||||
url
|
||||
} = minimizeOptions || slider.getMinimizeOptions() || {};
|
||||
} = slider.getMinimizeOptions() || minimizeOptions || {};
|
||||
const item = this.getToolbar().minimizeItem({
|
||||
title,
|
||||
url: main_core.Type.isStringFilled(url) ? url : slider.getUrl(),
|
||||
@@ -4086,8 +4173,9 @@ this.BX = this.BX || {};
|
||||
}, {
|
||||
key: "handleEscapePress",
|
||||
value: function handleEscapePress(event) {
|
||||
if (this.isOnTop() && this.getTopSlider() && this.getTopSlider().canCloseByEsc()) {
|
||||
this.getTopSlider().close();
|
||||
const topSlider = this.getTopSlider();
|
||||
if (topSlider !== null && topSlider !== void 0 && topSlider.canCloseByEsc() && this.isOnTop(topSlider)) {
|
||||
topSlider.close();
|
||||
}
|
||||
}
|
||||
/**
|
||||
@@ -4099,18 +4187,16 @@ this.BX = this.BX || {};
|
||||
_classPrivateMethodGet$2(this, _removeOpenSlider, _removeOpenSlider2).call(this, slider);
|
||||
slider.unhideOverlay();
|
||||
slider.hideShadow();
|
||||
this.getOpenSliders().forEach((slider, index, openSliders) => {
|
||||
slider.getLabel().moveAt(openSliders.length - index - 1); //update position
|
||||
});
|
||||
|
||||
// this.getOpenSliders().forEach((slider, index, openSliders) => {
|
||||
// slider.getLabel().moveAt(openSliders.length - index - 1); //update position
|
||||
// });
|
||||
|
||||
if (this.getTopSlider()) {
|
||||
this.getTopSlider().showOrLightenCloseBtn();
|
||||
this.getTopSlider().unhideOverlay();
|
||||
this.getTopSlider().hideShadow();
|
||||
this.getTopSlider().showCloseBtn();
|
||||
this.getTopSlider().showExtraLabels();
|
||||
if (this.getTopSlider().isPrintable()) {
|
||||
this.getTopSlider().showPrintBtn();
|
||||
}
|
||||
this.getTopSlider().focus();
|
||||
} else {
|
||||
window.focus();
|
||||
@@ -4271,9 +4357,7 @@ this.BX = this.BX || {};
|
||||
}
|
||||
event.preventDefault(); // otherwise an iframe loading can be cancelled by a browser
|
||||
|
||||
if (this.isOnTop() && this.getTopSlider() && this.getTopSlider().canCloseByEsc()) {
|
||||
this.getTopSlider().close();
|
||||
}
|
||||
this.handleEscapePress();
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
@@ -4306,7 +4390,15 @@ this.BX = this.BX || {};
|
||||
*/
|
||||
}, {
|
||||
key: "isOnTop",
|
||||
value: function isOnTop() {
|
||||
value: function isOnTop(slider) {
|
||||
if (slider) {
|
||||
const popups = main_popup.PopupManager.getPopups();
|
||||
const isOnTopOfAllPopups = popups.every(popup => slider.isOnTopOfPopup(popup));
|
||||
if (!isOnTopOfAllPopups) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo Slider or something else can cover Side Panel.
|
||||
const centerX = document.documentElement.clientWidth / 2;
|
||||
const centerY = document.documentElement.clientHeight / 2;
|
||||
@@ -4367,7 +4459,11 @@ this.BX = this.BX || {};
|
||||
rule.handler(event, link);
|
||||
} else {
|
||||
event.preventDefault();
|
||||
this.open(link.url, rule.options);
|
||||
if (main_core.Dom.attr(event.target, 'data-slider-maximize') === null) {
|
||||
this.open(link.url, rule.options);
|
||||
} else {
|
||||
this.maximize(link.url, rule.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
@@ -4386,7 +4482,7 @@ this.BX = this.BX || {};
|
||||
if (!this.isValidLink(rule, link)) {
|
||||
BX.reload(url);
|
||||
} else if (main_core.Type.isFunction(rule.handler)) {
|
||||
rule.handler(new main_core.Event('slider', {
|
||||
rule.handler(new MouseEvent('slider', {
|
||||
bubbles: false,
|
||||
cancelable: true
|
||||
}), link);
|
||||
@@ -4421,17 +4517,25 @@ this.BX = this.BX || {};
|
||||
const matches = href.match(rule.condition[m]);
|
||||
if (matches && !this.hasStopParams(href, rule.stopParameters)) {
|
||||
link.matches = matches;
|
||||
let options = main_core.Type.isFunction(rule.options) ? rule.options(link) : rule.options;
|
||||
const minimizeOptions = main_core.Type.isFunction(rule.minimizeOptions) ? rule.minimizeOptions(link) : null;
|
||||
if (main_core.Type.isPlainObject(minimizeOptions)) {
|
||||
if (main_core.Type.isPlainObject(rule.options)) {
|
||||
rule.options.minimizeOptions = minimizeOptions;
|
||||
if (main_core.Type.isPlainObject(options)) {
|
||||
options.minimizeOptions = minimizeOptions;
|
||||
} else {
|
||||
rule.options = {
|
||||
options = {
|
||||
minimizeOptions
|
||||
};
|
||||
}
|
||||
}
|
||||
return rule;
|
||||
if (main_core.Type.isStringFilled(rule.loader) && !main_core.Type.isStringFilled(options.loader)) {
|
||||
options.loader = rule.loader;
|
||||
delete rule.loader;
|
||||
}
|
||||
return {
|
||||
...rule,
|
||||
options
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4595,6 +4699,7 @@ this.BX = this.BX || {};
|
||||
return SliderManager;
|
||||
}();
|
||||
function _createSlider2(sliderUrl, sliderOptions) {
|
||||
var _ref, _sliderOptions$useGlo;
|
||||
if (!main_core.Type.isStringFilled(sliderUrl)) {
|
||||
return null;
|
||||
}
|
||||
@@ -4611,13 +4716,13 @@ this.BX = this.BX || {};
|
||||
}
|
||||
const rule = this.getUrlRule(url);
|
||||
const ruleOptions = rule !== null && main_core.Type.isPlainObject(rule.options) ? rule.options : {};
|
||||
const options = main_core.Type.isPlainObject(sliderOptions) ? sliderOptions : ruleOptions;
|
||||
if (main_core.Type.isPlainObject(ruleOptions.minimizeOptions) && main_core.Type.isPlainObject(sliderOptions) && !main_core.Type.isPlainObject(sliderOptions.minimizeOptions)) {
|
||||
options.minimizeOptions = ruleOptions.minimizeOptions;
|
||||
}
|
||||
if (this.getToolbar() === null && options.minimizeOptions) {
|
||||
options.minimizeOptions = null;
|
||||
}
|
||||
const useGlobalOptions = (_ref = (_sliderOptions$useGlo = sliderOptions === null || sliderOptions === void 0 ? void 0 : sliderOptions.useGlobalOptions) !== null && _sliderOptions$useGlo !== void 0 ? _sliderOptions$useGlo : ruleOptions.useGlobalOptions) !== null && _ref !== void 0 ? _ref : true;
|
||||
const useRuleOptions = sliderOptions !== ruleOptions && useGlobalOptions;
|
||||
const options = {
|
||||
...(useRuleOptions ? ruleOptions : {}),
|
||||
...sliderOptions,
|
||||
events: [useRuleOptions && ruleOptions.events, sliderOptions === null || sliderOptions === void 0 ? void 0 : sliderOptions.events]
|
||||
};
|
||||
const defaultOptions = SliderManager.getSliderDefaultOptions();
|
||||
const priorityOptions = SliderManager.getSliderPriorityOptions();
|
||||
const SliderClass = SliderManager.getSliderClass();
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -81,39 +81,107 @@
|
||||
z-index: 1;
|
||||
transform: translateX(-100%);
|
||||
transition: all 300ms ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.side-panel-extra-labels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-top: 10px;
|
||||
|
||||
transition-property: opacity, display, transform;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
|
||||
.side-panel-extra-labels.--hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.side-panel-label {
|
||||
display: inline-flex;
|
||||
min-width: 37px;
|
||||
height: 38px;
|
||||
padding-right: 5px;
|
||||
align-items: center;
|
||||
min-width: 36px;
|
||||
height: 28px;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(47, 198, 246, 0.95);
|
||||
border-top-left-radius: 19px;
|
||||
border-bottom-left-radius: 19px;
|
||||
position: relative;
|
||||
|
||||
background: var(--sidepanel-label-background, var(--ui-color));
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
/*overflow: hidden;*/
|
||||
transition: top 0.3s;
|
||||
box-shadow: inset -6px 0 8px -10px rgba(0, 0, 0, 0.95);
|
||||
box-shadow: var(--sidepanel-label-box-shadow, inset -6px 0 8px -10px rgba(0, 0, 0, 0.95));
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
|
||||
transition-property: opacity, display, transform;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-behavior: allow-discrete;
|
||||
|
||||
box-sizing: border-box;
|
||||
border-top-left-radius: 18px;
|
||||
border-bottom-left-radius: 18px;
|
||||
|
||||
border: var(--sidepanel-label-border);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.side-panel-label.--ui-hoverable {
|
||||
--ui-color: var(--ui-color-base-6);
|
||||
}
|
||||
|
||||
.side-panel-label.--close-label.--ui-hoverable {
|
||||
--ui-color: #0075FF;
|
||||
}
|
||||
|
||||
.side-panel-label:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: -5px 0 -5px -5px;
|
||||
}
|
||||
|
||||
.side-panel-label:hover {
|
||||
background: var(--sidepanel-label-background-hover, var(--ui-color-hover));
|
||||
border: var(--sidepanel-label-border-hover);
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.side-panel-label.--close-label {
|
||||
min-width: 43px;
|
||||
height: 36px;
|
||||
|
||||
background: var(--sidepanel-close-label-background, var(--sidepanel-label-background, var(--ui-color)));
|
||||
border: var(--sidepanel-close-label-border, var(--sidepanel-label-border));
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.side-panel-label:hover.--close-label {
|
||||
background: var(--sidepanel-close-label-background-hover, var(--sidepanel-label-background-hover, var(--ui-color-hover)));
|
||||
border: var(--sidepanel-close-label-border-hover, var(--sidepanel-label-border-hover));
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.side-panel-label.--hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.side-panel-label:not(.--visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.side-panel-label-icon-box {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: 34px;
|
||||
height: 38px;
|
||||
vertical-align: top;
|
||||
border-radius: 19px;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
@@ -121,43 +189,27 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 9px;
|
||||
border-radius: 50%;
|
||||
transition: all 300ms ease;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 7px;
|
||||
transition: all 150ms ease;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
box-sizing: content-box;
|
||||
--ui-icon-set__icon-color: var(--sidepanel-label-icon-color, var(--ui-color-base-2));
|
||||
}
|
||||
|
||||
.side-panel-label-icon-close:before {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-left: 5px;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3e%3cpath fill='%23FFF' fill-rule='evenodd' d='M11.381 1.746L7.138 5.988l4.248 4.249-1.151 1.152L5.986 7.14l-4.242 4.244-1.147-1.146L4.84 5.994.592 1.747 1.744.595l4.248 4.247L10.235.6z'/%3e%3c/svg%3e");
|
||||
opacity: 0.85;
|
||||
.side-panel-label:hover .side-panel-label-icon {
|
||||
--ui-icon-set__icon-color: var(--sidepanel-label-icon-color-hover, var(--ui-color-base-2));
|
||||
}
|
||||
|
||||
.side-panel-label-icon-minimize {
|
||||
opacity: 0.5;
|
||||
/*--ui-icon-set__icon-color: #878f98;*/
|
||||
.side-panel-label.--close-label .side-panel-label-icon {
|
||||
margin-left: 13px;
|
||||
--ui-icon-set__icon-color: var(--sidepanel-close-label-icon-color, #ffffff);
|
||||
}
|
||||
|
||||
.side-panel-label:hover .side-panel-label-icon-minimize {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.side-panel-label-icon-new-window {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='14' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.991.065v1.67H2.17a.5.5 0 00-.492.41l-.008.09v8.651a.5.5 0 00.41.492l.09.008h8.65a.5.5 0 00.493-.41l.008-.09-.001-2.846 1.67.001v4.015a1 1 0 01-1 1H1a1 1 0 01-1-1V1.066a1 1 0 011-1h3.991zm7 0a1 1 0 011 1l-.001 3.987h-1.67V3.035l-4.39 4.39-1.28-1.28 4.409-4.41H7.998V.065h3.992z' fill='%23878F98' fill-rule='evenodd'/%3e%3c/svg%3e");
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.side-panel-label-icon-copy-link {
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.467 5.728c.182.183.34.38.473.59L9.674 7.584a1.91 1.91 0 00-3.015-.741l-.11.1L2.694 10.8a1.91 1.91 0 002.592 2.804l.11-.102 1.309-1.308c.703.25 1.42.257 2.149.019l-2.508 2.505a3.442 3.442 0 11-4.868-4.868l4.12-4.12a3.442 3.442 0 014.869 0zm4.426-4.425a3.442 3.442 0 010 4.868l-4.12 4.12a3.442 3.442 0 01-5.341-.59l1.265-1.265a1.91 1.91 0 003.015.741l.11-.101 3.856-3.856a1.91 1.91 0 00-2.592-2.803l-.11.102-1.31 1.308a3.232 3.232 0 00-2.148-.019l2.507-2.505a3.442 3.442 0 014.868 0z' fill='%23878F98' fill-rule='evenodd'/%3e%3c/svg%3e");
|
||||
opacity: 0.6;
|
||||
.side-panel-label.--close-label:hover .side-panel-label-icon {
|
||||
--ui-icon-set__icon-color: var(--sidepanel-close-label-icon-color-hover, #ffffff);
|
||||
}
|
||||
|
||||
.side-panel-label-icon--hide .side-panel-label-icon-box {
|
||||
@@ -169,32 +221,14 @@
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.side-panel-label:hover .side-panel-label-icon:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.side-panel-label:hover .side-panel-label-icon-close:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='%23FFF' fill-rule='evenodd' d='M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.771C6.35 1.771 1.771 6.351 1.771 12c0 5.65 4.58 10.229 10.229 10.229 5.65 0 10.229-4.58 10.229-10.229 0-5.65-4.58-10.229-10.229-10.229z'/%3e%3c/svg%3e");
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.side-panel-label-text {
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0;
|
||||
height: 100%;
|
||||
margin-left: 2px;
|
||||
margin-right: 8px;
|
||||
line-height: 38px;
|
||||
vertical-align: top;
|
||||
font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
|
||||
font-weight: var(--ui-font-weight-bold, 700);
|
||||
font-size: 11px;
|
||||
@@ -406,41 +440,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.side-panel-print {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: -64px;
|
||||
bottom: 0;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.side-panel-print-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.side-panel-print:after {
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 22px;
|
||||
right: 24px;
|
||||
width: 16px;
|
||||
height: 17px;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMi44OTUgMy4yMjVoMTAuMTE3Yy4xNyAwIC4zMDgtLjE0LjMwOC0uMzE3Vi4zODVhLjMxMi4zMTIgMCAwIDAtLjMwOC0uMzE3SDIuODk1YS4zMTQuMzE0IDAgMCAwLS4zMDguMzE3djIuNTI2YzAgLjE3NC4xMzkuMzE0LjMwOC4zMTR6bTEyLjE3NyAxLjU3OUgxLjE1YS43NzEuNzcxIDAgMCAwLS43NzMuNzY2djUuMzY3YzAgLjQyMi4zNDcuNzY3Ljc3My43NjdoLjc3NHYzLjA2NmMwIC40MjMuMzQ3Ljc2Ny43NzMuNzY3aDEwLjgyOGEuNzcxLjc3MSAwIDAgMCAuNzc0LS43Njd2LTMuMDY2aC43NzNhLjc3MS43NzEgMCAwIDAgLjc3NC0uNzY3VjUuNTdhLjc3MS43NzEgMCAwIDAtLjc3NC0uNzY2em0tMi4zMiA5LjJIMy40N3YtMy4wNjdoOS4yOHYzLjA2N3ptLjc3My02LjEzNGEuNzcxLjc3MSAwIDAgMS0uNzczLS43NjZjMC0uNDIzLjM0Ny0uNzY3Ljc3My0uNzY3LjQyNyAwIC43NzQuMzQ0Ljc3NC43NjdhLjc3MS43NzEgMCAwIDEtLjc3NC43NjZ6IiBmaWxsPSIjRkZGIiBvcGFjaXR5PSIuNiIvPjwvc3ZnPg==);
|
||||
opacity: 0.2;
|
||||
transition: opacity .3s;
|
||||
}
|
||||
|
||||
.side-panel-print-visible:after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.side-panel-print:hover:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.side-panel-toolbar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
|
||||
@@ -12,19 +12,27 @@ export class Label
|
||||
slider: Slider = null;
|
||||
color = null;
|
||||
bgColor = null;
|
||||
className = '';
|
||||
iconClass = '';
|
||||
iconTitle = '';
|
||||
onclick = null;
|
||||
text = null;
|
||||
hidden: boolean = false;
|
||||
visible: boolean = true;
|
||||
cache = new Cache.MemoryCache();
|
||||
|
||||
constructor(slider: Slider, labelOptions: LabelOptions)
|
||||
{
|
||||
this.slider = slider;
|
||||
const options = Type.isPlainObject(labelOptions) ? labelOptions : {};
|
||||
this.setBgColor(options.bgColor);
|
||||
|
||||
this.hidden = Type.isBoolean(options.hidden) ? options.hidden : this.hidden;
|
||||
this.visible = Type.isBoolean(options.visible) ? options.visible : this.visible;
|
||||
|
||||
this.setColor(options.color);
|
||||
this.setBgColor(options.bgColor);
|
||||
this.setText(options.text);
|
||||
this.setClassName(options.className);
|
||||
this.setIconClass(options.iconClass);
|
||||
this.setIconTitle(options.iconTitle);
|
||||
this.setOnclick(options.onclick);
|
||||
@@ -33,9 +41,25 @@ export class Label
|
||||
getContainer(): HTMLElement
|
||||
{
|
||||
return this.cache.remember('container', () => {
|
||||
const classes = ['side-panel-label'];
|
||||
if (this.getClassName())
|
||||
{
|
||||
classes.push(this.getClassName());
|
||||
}
|
||||
|
||||
if (this.isHidden())
|
||||
{
|
||||
classes.push('--hidden');
|
||||
}
|
||||
|
||||
if (this.isVisible())
|
||||
{
|
||||
classes.push('--visible');
|
||||
}
|
||||
|
||||
return Dom.create('div', {
|
||||
props: {
|
||||
className: 'side-panel-label',
|
||||
className: classes.join(' '),
|
||||
},
|
||||
children: [
|
||||
this.getIconBox(),
|
||||
@@ -150,11 +174,12 @@ export class Label
|
||||
|
||||
setColor(color: string): void
|
||||
{
|
||||
if (Type.isStringFilled(color))
|
||||
if (Type.isStringFilled(color) || color === null)
|
||||
{
|
||||
this.color = color;
|
||||
|
||||
Dom.style(this.getTextContainer(), 'color', color);
|
||||
Dom.style(this.getTextContainer(), 'color', this.color);
|
||||
Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', this.color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -186,12 +211,18 @@ export class Label
|
||||
}
|
||||
|
||||
this.bgColor = bgColor;
|
||||
Dom.style(this.getContainer(), 'background-color', bgColor);
|
||||
Dom.style(this.getContainer(), '--ui-color', bgColor);
|
||||
|
||||
if (this.getColor() === null)
|
||||
{
|
||||
Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', '#fff');
|
||||
}
|
||||
}
|
||||
else if (bgColor === null)
|
||||
{
|
||||
this.bgColor = null;
|
||||
Dom.style(this.getContainer(), 'background-color', null);
|
||||
Dom.style(this.getContainer(), '--ui-color', null);
|
||||
Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', null);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -219,6 +250,26 @@ export class Label
|
||||
return this.text;
|
||||
}
|
||||
|
||||
setClassName(className: string | null): void
|
||||
{
|
||||
if (Type.isStringFilled(className))
|
||||
{
|
||||
Dom.removeClass(this.getContainer(), this.className);
|
||||
this.className = className;
|
||||
Dom.addClass(this.getContainer(), this.className);
|
||||
}
|
||||
else if (className === null)
|
||||
{
|
||||
Dom.removeClass(this.getContainer(), this.className);
|
||||
this.className = className;
|
||||
}
|
||||
}
|
||||
|
||||
getClassName(): string
|
||||
{
|
||||
return this.className;
|
||||
}
|
||||
|
||||
setIconClass(iconClass: string | null): void
|
||||
{
|
||||
if (Type.isStringFilled(iconClass))
|
||||
@@ -253,6 +304,33 @@ export class Label
|
||||
return this.iconTitle;
|
||||
}
|
||||
|
||||
isHidden(): boolean
|
||||
{
|
||||
return this.hidden;
|
||||
}
|
||||
|
||||
hide(): void
|
||||
{
|
||||
this.hidden = true;
|
||||
Dom.addClass(this.getContainer(), '--hidden');
|
||||
}
|
||||
|
||||
show(): void
|
||||
{
|
||||
this.hidden = false;
|
||||
Dom.removeClass(this.getContainer(), '--hidden');
|
||||
}
|
||||
|
||||
isVisible(): boolean
|
||||
{
|
||||
return this.visible;
|
||||
}
|
||||
|
||||
setVisible(isVisible: boolean = true): void
|
||||
{
|
||||
Dom.toggleClass(this.getContainer(), '--visible', isVisible);
|
||||
}
|
||||
|
||||
setOnclick(fn: Function): void
|
||||
{
|
||||
if (Type.isFunction(fn) || fn === null)
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { JsonObject } from 'main.core';
|
||||
import { Type, Dom, Event, Runtime, Reflection, Browser, ajax as Ajax, Uri } from 'main.core';
|
||||
import { EventEmitter, BaseEvent } from 'main.core.events';
|
||||
import { PopupManager } from 'main.popup';
|
||||
|
||||
import { Slider } from './slider';
|
||||
import type { SliderEvent } from './slider-event';
|
||||
@@ -156,21 +157,14 @@ export class SliderManager
|
||||
|
||||
const rule = this.getUrlRule(url);
|
||||
const ruleOptions = rule !== null && Type.isPlainObject(rule.options) ? rule.options : {};
|
||||
const options = Type.isPlainObject(sliderOptions) ? sliderOptions : ruleOptions;
|
||||
|
||||
if (
|
||||
Type.isPlainObject(ruleOptions.minimizeOptions)
|
||||
&& Type.isPlainObject(sliderOptions)
|
||||
&& !Type.isPlainObject(sliderOptions.minimizeOptions)
|
||||
)
|
||||
{
|
||||
options.minimizeOptions = ruleOptions.minimizeOptions;
|
||||
}
|
||||
|
||||
if (this.getToolbar() === null && options.minimizeOptions)
|
||||
{
|
||||
options.minimizeOptions = null;
|
||||
}
|
||||
const useGlobalOptions = sliderOptions?.useGlobalOptions ?? ruleOptions.useGlobalOptions ?? true;
|
||||
const useRuleOptions = sliderOptions !== ruleOptions && useGlobalOptions;
|
||||
const options: SliderOptions = {
|
||||
...(useRuleOptions ? ruleOptions : {}),
|
||||
...sliderOptions,
|
||||
events: [useRuleOptions && ruleOptions.events, sliderOptions?.events],
|
||||
};
|
||||
|
||||
const defaultOptions = SliderManager.getSliderDefaultOptions();
|
||||
const priorityOptions = SliderManager.getSliderPriorityOptions();
|
||||
@@ -803,12 +797,7 @@ export class SliderManager
|
||||
}
|
||||
}
|
||||
|
||||
rule.options = Type.isPlainObject(rule.options) ? rule.options : {};
|
||||
if (Type.isStringFilled(rule.loader) && !Type.isStringFilled(rule.options.loader))
|
||||
{
|
||||
rule.options.loader = rule.loader;
|
||||
delete rule.loader;
|
||||
}
|
||||
rule.options ??= {};
|
||||
|
||||
this.anchorRules.push(rule);
|
||||
});
|
||||
@@ -873,8 +862,7 @@ export class SliderManager
|
||||
this.getTopSlider().showShadow();
|
||||
}
|
||||
|
||||
this.getTopSlider().hideOrDarkenCloseBtn();
|
||||
this.getTopSlider().hidePrintBtn();
|
||||
this.getTopSlider().hideCloseBtn();
|
||||
this.getTopSlider().hideExtraLabels();
|
||||
}
|
||||
else
|
||||
@@ -884,9 +872,9 @@ export class SliderManager
|
||||
|
||||
this.#addOpenSlider(slider);
|
||||
|
||||
this.getOpenSliders().forEach((currentSlider: Slider, index: number, openSliders: Slider[]) => {
|
||||
currentSlider.getLabel().moveAt(openSliders.length - index - 1); // move down
|
||||
});
|
||||
// this.getOpenSliders().forEach((currentSlider: Slider, index: number, openSliders: Slider[]) => {
|
||||
// currentSlider.getLabel().moveAt(openSliders.length - index - 1); // move down
|
||||
// });
|
||||
|
||||
this.losePageFocus();
|
||||
|
||||
@@ -951,9 +939,9 @@ export class SliderManager
|
||||
|
||||
this.exitFullScreen();
|
||||
|
||||
this.getOpenSliders().forEach((slider, index, openSliders) => {
|
||||
slider.getLabel().moveAt(openSliders.length - index - 2); // move up
|
||||
});
|
||||
// this.getOpenSliders().forEach((slider, index, openSliders) => {
|
||||
// slider.getLabel().moveAt(openSliders.length - index - 2); // move up
|
||||
// });
|
||||
|
||||
let visibleSlider = null;
|
||||
const openSliders = this.getOpenSliders();
|
||||
@@ -976,7 +964,8 @@ export class SliderManager
|
||||
{
|
||||
previousSlider.unhideOverlay();
|
||||
previousSlider.hideShadow();
|
||||
previousSlider.showOrLightenCloseBtn();
|
||||
previousSlider.showCloseBtn();
|
||||
previousSlider.showExtraLabels();
|
||||
|
||||
if (topSlider)
|
||||
{
|
||||
@@ -1035,7 +1024,7 @@ export class SliderManager
|
||||
this.getToolbar().expand(true);
|
||||
|
||||
const minimizeOptions = this.getMinimizeOptions(slider.getUrl());
|
||||
const { entityType, entityId, url } = minimizeOptions || slider.getMinimizeOptions() || {};
|
||||
const { entityType, entityId, url } = slider.getMinimizeOptions() || minimizeOptions || {};
|
||||
|
||||
const item = this.getToolbar().minimizeItem({
|
||||
title,
|
||||
@@ -1111,9 +1100,10 @@ export class SliderManager
|
||||
|
||||
handleEscapePress(event)
|
||||
{
|
||||
if (this.isOnTop() && this.getTopSlider() && this.getTopSlider().canCloseByEsc())
|
||||
const topSlider = this.getTopSlider();
|
||||
if (topSlider?.canCloseByEsc() && this.isOnTop(topSlider))
|
||||
{
|
||||
this.getTopSlider().close();
|
||||
topSlider.close();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1127,21 +1117,16 @@ export class SliderManager
|
||||
slider.unhideOverlay();
|
||||
slider.hideShadow();
|
||||
|
||||
this.getOpenSliders().forEach((slider, index, openSliders) => {
|
||||
slider.getLabel().moveAt(openSliders.length - index - 1); //update position
|
||||
});
|
||||
// this.getOpenSliders().forEach((slider, index, openSliders) => {
|
||||
// slider.getLabel().moveAt(openSliders.length - index - 1); //update position
|
||||
// });
|
||||
|
||||
if (this.getTopSlider())
|
||||
{
|
||||
this.getTopSlider().showOrLightenCloseBtn();
|
||||
this.getTopSlider().unhideOverlay();
|
||||
this.getTopSlider().hideShadow();
|
||||
this.getTopSlider().showCloseBtn();
|
||||
this.getTopSlider().showExtraLabels();
|
||||
|
||||
if (this.getTopSlider().isPrintable())
|
||||
{
|
||||
this.getTopSlider().showPrintBtn();
|
||||
}
|
||||
this.getTopSlider().focus();
|
||||
}
|
||||
else
|
||||
@@ -1337,10 +1322,7 @@ export class SliderManager
|
||||
|
||||
event.preventDefault(); // otherwise an iframe loading can be cancelled by a browser
|
||||
|
||||
if (this.isOnTop() && this.getTopSlider() && this.getTopSlider().canCloseByEsc())
|
||||
{
|
||||
this.getTopSlider().close();
|
||||
}
|
||||
this.handleEscapePress();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1372,8 +1354,18 @@ export class SliderManager
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
isOnTop(): boolean
|
||||
isOnTop(slider: Slider): boolean
|
||||
{
|
||||
if (slider)
|
||||
{
|
||||
const popups = PopupManager.getPopups();
|
||||
const isOnTopOfAllPopups = popups.every((popup) => slider.isOnTopOfPopup(popup));
|
||||
if (!isOnTopOfAllPopups)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo Slider or something else can cover Side Panel.
|
||||
const centerX = document.documentElement.clientWidth / 2;
|
||||
const centerY = document.documentElement.clientHeight / 2;
|
||||
@@ -1456,7 +1448,14 @@ export class SliderManager
|
||||
else
|
||||
{
|
||||
event.preventDefault();
|
||||
this.open(link.url, rule.options);
|
||||
if (Dom.attr(event.target, 'data-slider-maximize') === null)
|
||||
{
|
||||
this.open(link.url, rule.options);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.maximize(link.url, rule.options);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1481,7 +1480,7 @@ export class SliderManager
|
||||
else if (Type.isFunction(rule.handler))
|
||||
{
|
||||
rule.handler(
|
||||
new Event(
|
||||
new MouseEvent(
|
||||
'slider',
|
||||
{
|
||||
bubbles: false,
|
||||
@@ -1530,20 +1529,28 @@ export class SliderManager
|
||||
if (matches && !this.hasStopParams(href, rule.stopParameters))
|
||||
{
|
||||
link.matches = matches;
|
||||
|
||||
let options = Type.isFunction(rule.options) ? rule.options(link) : rule.options;
|
||||
const minimizeOptions = Type.isFunction(rule.minimizeOptions) ? rule.minimizeOptions(link) : null;
|
||||
if (Type.isPlainObject(minimizeOptions))
|
||||
{
|
||||
if (Type.isPlainObject(rule.options))
|
||||
if (Type.isPlainObject(options))
|
||||
{
|
||||
rule.options.minimizeOptions = minimizeOptions;
|
||||
options.minimizeOptions = minimizeOptions;
|
||||
}
|
||||
else
|
||||
{
|
||||
rule.options = { minimizeOptions };
|
||||
options = { minimizeOptions };
|
||||
}
|
||||
}
|
||||
|
||||
return rule;
|
||||
if (Type.isStringFilled(rule.loader) && !Type.isStringFilled(options.loader))
|
||||
{
|
||||
options.loader = rule.loader;
|
||||
delete rule.loader;
|
||||
}
|
||||
|
||||
return { ...rule, options };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,13 +2,14 @@ import { Type, Loc, Dom, Event, Runtime, Text, Browser, Uri, Tag, type JsonObjec
|
||||
import { BaseEvent, EventEmitter } from 'main.core.events';
|
||||
import { MemoryCache, type BaseCache } from 'main.core.cache';
|
||||
import { ZIndexManager, type ZIndexComponent } from 'main.core.z-index-manager';
|
||||
import type { Popup } from 'main.popup';
|
||||
|
||||
import { Dictionary } from './dictionary';
|
||||
import { Label } from './label';
|
||||
import { MessageEvent } from './message-event';
|
||||
import { SliderEvent } from './slider-event';
|
||||
|
||||
import { type SliderOptions } from './types/slider-options';
|
||||
import type { SliderOptions, SliderEvents } from './types/slider-options';
|
||||
import { type MinimizeOptions } from './types/minimize-options';
|
||||
import { type OuterBoundary } from './types/outer-boundary';
|
||||
|
||||
@@ -44,7 +45,7 @@ export class Slider
|
||||
this.cacheable = options.cacheable !== false;
|
||||
this.autoFocus = options.autoFocus !== false;
|
||||
this.printable = options.printable === true;
|
||||
this.allowChangeHistory = options.allowChangeHistory !== false;
|
||||
this.allowChangeHistory = Type.isBoolean(options.allowChangeHistory) ? options.allowChangeHistory : null;
|
||||
this.allowChangeTitle = Type.isBoolean(options.allowChangeTitle) ? options.allowChangeTitle : null;
|
||||
this.allowCrossOrigin = options.allowCrossOrigin === true;
|
||||
this.data = new Dictionary(Type.isPlainObject(options.data) ? options.data : {});
|
||||
@@ -128,23 +129,14 @@ export class Slider
|
||||
this.animationOptions = {};
|
||||
|
||||
this.minimizeOptions = null;
|
||||
const minimizeOptions = options.minimizeOptions;
|
||||
if (
|
||||
Type.isPlainObject(minimizeOptions)
|
||||
&& Type.isStringFilled(minimizeOptions.entityType)
|
||||
&& (Type.isStringFilled(minimizeOptions.entityId) || Type.isNumber(minimizeOptions.entityId))
|
||||
&& (Type.isStringFilled(minimizeOptions.url))
|
||||
)
|
||||
{
|
||||
this.minimizeOptions = minimizeOptions;
|
||||
}
|
||||
|
||||
this.setMinimizeOptions(options.minimizeOptions);
|
||||
this.setToolbarOnOpen(options.hideToolbarOnOpen);
|
||||
this.setDesignSystemContext(options.designSystemContext);
|
||||
this.setAutoOffset(options.autoOffset);
|
||||
|
||||
this.label = new Label(this, {
|
||||
iconClass: 'side-panel-label-icon-close',
|
||||
className: '--close-label --ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-close ui-icon-set --cross-l',
|
||||
iconTitle: Loc.getMessage('MAIN_SIDEPANEL_CLOSE'),
|
||||
onclick(label, slider)
|
||||
{
|
||||
@@ -157,31 +149,28 @@ export class Slider
|
||||
this.label.setColor(labelOptions.color);
|
||||
this.label.setBgColor(labelOptions.bgColor, labelOptions.opacity);
|
||||
|
||||
this.minimizeLabel = null;
|
||||
this.minimizeLabel = new Label(this, {
|
||||
className: '--ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-minimize ui-icon-set --o-minimize',
|
||||
iconTitle: Loc.getMessage('MAIN_SIDEPANEL_MINIMIZE'),
|
||||
onclick: (label, slider) => {
|
||||
if (this.isLoaded())
|
||||
{
|
||||
this.minimize();
|
||||
}
|
||||
},
|
||||
visible: this.areMinimizeOptionsValid(this.minimizeOptions),
|
||||
});
|
||||
this.newWindowLabel = null;
|
||||
this.copyLinkLabel = null;
|
||||
this.printLabel = null;
|
||||
|
||||
if (!this.isSelfContained() && this.minimizeOptions !== null)
|
||||
{
|
||||
this.minimizeLabel = new Label(this, {
|
||||
iconClass: 'side-panel-label-icon-minimize ui-icon-set --arrow-line',
|
||||
iconTitle: Loc.getMessage('MAIN_SIDEPANEL_MINIMIZE'),
|
||||
bgColor: ['#d9dcdf', 100],
|
||||
onclick: (label, slider) => {
|
||||
if (this.isLoaded())
|
||||
{
|
||||
this.minimize();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (options.newWindowLabel === true && (!this.isSelfContained() || Type.isStringFilled(options.newWindowUrl)))
|
||||
if (options.newWindowLabel === true && (this.canChangeHistory() || Type.isStringFilled(options.newWindowUrl)))
|
||||
{
|
||||
this.newWindowLabel = new Label(this, {
|
||||
iconClass: 'side-panel-label-icon-new-window',
|
||||
className: '--ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-new-window ui-icon-set --go-to-l',
|
||||
iconTitle: Loc.getMessage('MAIN_SIDEPANEL_NEW_WINDOW'),
|
||||
bgColor: ['#d9dcdf', 100],
|
||||
onclick(label, slider)
|
||||
{
|
||||
const newWindowUrl = Type.isStringFilled(options.newWindowUrl) ? options.newWindowUrl : slider.getUrl();
|
||||
@@ -193,12 +182,12 @@ export class Slider
|
||||
});
|
||||
}
|
||||
|
||||
if (options.copyLinkLabel === true && (!this.isSelfContained() || Type.isStringFilled(options.newWindowUrl)))
|
||||
if (options.copyLinkLabel === true && (this.canChangeHistory() || Type.isStringFilled(options.newWindowUrl)))
|
||||
{
|
||||
this.copyLinkLabel = new Label(this, {
|
||||
iconClass: 'side-panel-label-icon-copy-link',
|
||||
className: '--ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-copy-link ui-icon-set --o-link',
|
||||
iconTitle: Loc.getMessage('MAIN_SIDEPANEL_COPY_LINK'),
|
||||
bgColor: ['#d9dcdf', 100],
|
||||
});
|
||||
|
||||
BX.clipboard.bindCopyClick(
|
||||
@@ -214,6 +203,14 @@ export class Slider
|
||||
);
|
||||
}
|
||||
|
||||
this.printLabel = new Label(this, {
|
||||
hidden: !this.isPrintable(),
|
||||
className: '--side-panel-label-print --ui-hoverable',
|
||||
iconClass: 'side-panel-label-icon-print ui-icon-set --o-printer',
|
||||
iconTitle: Loc.getMessage('MAIN_SIDEPANEL_PRINT'),
|
||||
onclick: this.handlePrintBtnClick.bind(this),
|
||||
});
|
||||
|
||||
// Compatibility
|
||||
if (
|
||||
this.url.includes('crm.activity.planner/slider.php')
|
||||
@@ -229,9 +226,14 @@ export class Slider
|
||||
};
|
||||
}
|
||||
|
||||
if (Type.isPlainObject(options.events))
|
||||
[options.events].flat().forEach((events: SliderEvents) => this.#subscribeEvents(events));
|
||||
}
|
||||
|
||||
#subscribeEvents(events: SliderEvents): void
|
||||
{
|
||||
if (Type.isPlainObject(events))
|
||||
{
|
||||
for (const [eventName, fn] of Object.entries(options.events))
|
||||
for (const [eventName, fn] of Object.entries(events))
|
||||
{
|
||||
if (Type.isFunction(fn))
|
||||
{
|
||||
@@ -397,7 +399,24 @@ export class Slider
|
||||
this.animationOptions = Type.isPlainObject(options) ? options : {};
|
||||
}
|
||||
|
||||
getMinimizeOptions(): MinimizeOptions
|
||||
setMinimizeOptions(minimizeOptions: MinimizeOptions | null): void
|
||||
{
|
||||
const showMinimizeLabel = this.areMinimizeOptionsValid(minimizeOptions);
|
||||
|
||||
this.minimizeOptions = minimizeOptions;
|
||||
this.minimizeLabel?.setVisible(showMinimizeLabel);
|
||||
}
|
||||
|
||||
areMinimizeOptionsValid(minimizeOptions: ?MinimizeOptions): boolean
|
||||
{
|
||||
return Type.isPlainObject(minimizeOptions)
|
||||
&& Type.isStringFilled(minimizeOptions.entityType)
|
||||
&& (Type.isStringFilled(minimizeOptions.entityId) || Type.isNumber(minimizeOptions.entityId))
|
||||
&& Type.isStringFilled(minimizeOptions.url)
|
||||
;
|
||||
}
|
||||
|
||||
getMinimizeOptions(): MinimizeOptions | null
|
||||
{
|
||||
return this.minimizeOptions;
|
||||
}
|
||||
@@ -678,12 +697,17 @@ export class Slider
|
||||
|
||||
canChangeHistory(): boolean
|
||||
{
|
||||
return (
|
||||
this.allowChangeHistory
|
||||
&& !this.allowCrossOrigin
|
||||
&& !this.isSelfContained()
|
||||
&& !/^\/bitrix\/(components|tools)\//i.test(this.getUrl())
|
||||
);
|
||||
if (this.allowCrossOrigin || /^\/bitrix\/(components|tools)\//i.test(this.getUrl()))
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.allowChangeHistory === null)
|
||||
{
|
||||
return !this.isSelfContained();
|
||||
}
|
||||
|
||||
return this.allowChangeHistory;
|
||||
}
|
||||
|
||||
canChangeTitle(): boolean
|
||||
@@ -754,12 +778,12 @@ export class Slider
|
||||
|
||||
showCloseBtn(): void
|
||||
{
|
||||
this.getLabel().showIcon();
|
||||
this.getLabel().show();
|
||||
}
|
||||
|
||||
hideCloseBtn(): void
|
||||
{
|
||||
this.getLabel().hideIcon();
|
||||
this.getLabel().hide();
|
||||
}
|
||||
|
||||
showOrLightenCloseBtn(): void
|
||||
@@ -788,22 +812,28 @@ export class Slider
|
||||
|
||||
showPrintBtn(): void
|
||||
{
|
||||
Dom.addClass(this.getPrintBtn(), 'side-panel-print-visible');
|
||||
if (this.printLabel !== null)
|
||||
{
|
||||
this.printLabel.show();
|
||||
}
|
||||
}
|
||||
|
||||
hidePrintBtn(): void
|
||||
{
|
||||
Dom.removeClass(this.getPrintBtn(), 'side-panel-print-visible');
|
||||
if (this.printLabel !== null)
|
||||
{
|
||||
this.printLabel.hide();
|
||||
}
|
||||
}
|
||||
|
||||
showExtraLabels(): void
|
||||
{
|
||||
Dom.style(this.getExtraLabelsContainer(), 'display', null);
|
||||
Dom.removeClass(this.getExtraLabelsContainer(), '--hidden');
|
||||
}
|
||||
|
||||
hideExtraLabels(): void
|
||||
{
|
||||
Dom.style(this.getExtraLabelsContainer(), 'display', 'none');
|
||||
Dom.addClass(this.getExtraLabelsContainer(), '--hidden');
|
||||
}
|
||||
|
||||
setContentClass(className: string): void
|
||||
@@ -1268,7 +1298,7 @@ export class Slider
|
||||
${
|
||||
this.hideControls
|
||||
? content
|
||||
: [content, this.getLabelsContainer(), this.getPrintBtn()]
|
||||
: [content, this.getLabelsContainer()]
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
@@ -1321,9 +1351,10 @@ export class Slider
|
||||
className: 'side-panel-extra-labels',
|
||||
},
|
||||
children: [
|
||||
this.minimizeLabel ? this.minimizeLabel.getContainer() : null,
|
||||
this.minimizeLabel.getContainer(),
|
||||
this.newWindowLabel ? this.newWindowLabel.getContainer() : null,
|
||||
this.copyLinkLabel ? this.copyLinkLabel.getContainer() : null,
|
||||
this.printLabel ? this.printLabel.getContainer() : null,
|
||||
],
|
||||
});
|
||||
});
|
||||
@@ -1354,19 +1385,9 @@ export class Slider
|
||||
return this.minimizeLabel;
|
||||
}
|
||||
|
||||
getPrintBtn(): HTMLElement
|
||||
getPrintLabel(): Label | null
|
||||
{
|
||||
return this.#refs.remember('print-btn', () => {
|
||||
return Dom.create('span', {
|
||||
props: {
|
||||
className: 'side-panel-print',
|
||||
title: Loc.getMessage('MAIN_SIDEPANEL_PRINT'),
|
||||
},
|
||||
events: {
|
||||
click: this.handlePrintBtnClick.bind(this),
|
||||
},
|
||||
});
|
||||
});
|
||||
return this.printLabel;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1733,11 +1754,6 @@ export class Slider
|
||||
*/
|
||||
animateOpening()
|
||||
{
|
||||
if (this.isPrintable())
|
||||
{
|
||||
this.showPrintBtn();
|
||||
}
|
||||
|
||||
if (this.animation)
|
||||
{
|
||||
this.animation.stop();
|
||||
@@ -2258,6 +2274,19 @@ export class Slider
|
||||
this.fireFrameEvent('onEscapePress');
|
||||
}
|
||||
|
||||
isOnTopOfPopup(popup: Popup): boolean
|
||||
{
|
||||
const sameStack = this.getZIndexComponent().getStack() === popup.getZIndexComponent().getStack();
|
||||
const popupOnTop = sameStack && popup.getZindex() > this.getZindex();
|
||||
let popupInside = this.getContainer().contains(popup.getPopupContainer());
|
||||
if (this.getFrameWindow())
|
||||
{
|
||||
popupInside = this.getFrameWindow().document.contains(popup.getPopupContainer());
|
||||
}
|
||||
|
||||
return !(popup.isShown() && (popupOnTop || popupInside));
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* @param {BaseEvent} event
|
||||
|
||||
@@ -2,7 +2,6 @@ import { Type, Cache, Text, Tag, Dom, type JsonObject } from 'main.core';
|
||||
import { EventEmitter } from 'main.core.events';
|
||||
import { PopupManager, Popup } from 'main.popup';
|
||||
|
||||
import { getInstance } from './get-instance';
|
||||
import { type ToolbarItemOptions } from './types/toolbar-item-options';
|
||||
|
||||
export class ToolbarItem extends EventEmitter
|
||||
@@ -18,7 +17,7 @@ export class ToolbarItem extends EventEmitter
|
||||
this.title = '';
|
||||
this.url = '';
|
||||
this.entityType = '';
|
||||
this.entityId = 0;
|
||||
this.entityId = '0';
|
||||
this.entityName = '';
|
||||
|
||||
this.refs = new Cache.MemoryCache();
|
||||
@@ -91,7 +90,7 @@ export class ToolbarItem extends EventEmitter
|
||||
{
|
||||
if (Type.isNumber(entityId) || Type.isStringFilled(entityId))
|
||||
{
|
||||
this.entityId = entityId;
|
||||
this.entityId = String(entityId);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -112,8 +111,8 @@ export class ToolbarItem extends EventEmitter
|
||||
{
|
||||
return this.refs.remember('container', () => {
|
||||
return Tag.render`
|
||||
<div class="side-panel-toolbar-item"
|
||||
onclick="${this.handleClick.bind(this)}"
|
||||
<div
|
||||
class="side-panel-toolbar-item"
|
||||
onmouseenter="${this.handleMouseEnter.bind(this)}"
|
||||
onmouseleave="${this.handleMouseLeave.bind(this)}"
|
||||
>
|
||||
@@ -138,7 +137,7 @@ export class ToolbarItem extends EventEmitter
|
||||
<a
|
||||
class="side-panel-toolbar-item-title"
|
||||
href="${encodeURI(this.getUrl())}"
|
||||
data-slider-ignore-autobinding="true"
|
||||
data-slider-maximize="true"
|
||||
>${Text.encode(this.getTitle())}</a>
|
||||
`;
|
||||
});
|
||||
@@ -237,17 +236,6 @@ export class ToolbarItem extends EventEmitter
|
||||
}
|
||||
}
|
||||
|
||||
handleClick(event): void
|
||||
{
|
||||
if (event.ctrlKey || event.metaKey)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
getInstance().maximize(this.getUrl());
|
||||
}
|
||||
|
||||
handleMouseEnter(): void
|
||||
{
|
||||
this.showTooltip();
|
||||
|
||||
@@ -276,7 +276,7 @@ export class Toolbar extends EventEmitter
|
||||
return this.collapsed;
|
||||
}
|
||||
|
||||
getItems()
|
||||
getItems(): ToolbarItem[]
|
||||
{
|
||||
return this.items;
|
||||
}
|
||||
@@ -571,7 +571,9 @@ export class Toolbar extends EventEmitter
|
||||
|
||||
getItem(entityType: string, entityId: string | number): ToolbarItem | null
|
||||
{
|
||||
return this.items.find((item) => item.getEntityType() === entityType && item.getEntityId() === entityId) || null;
|
||||
return this.items.find((item) => {
|
||||
return item.getEntityType() === entityType && item.getEntityId() === String(entityId);
|
||||
}) || null;
|
||||
}
|
||||
|
||||
getItemByUrl(url: string): ToolbarItem | null
|
||||
|
||||
@@ -5,7 +5,10 @@ export type LabelOptions = {
|
||||
bgColor?: string | [string, number],
|
||||
color?: string,
|
||||
text?: string,
|
||||
className?: string,
|
||||
iconClass?: string,
|
||||
iconTitle?: string,
|
||||
hidden?: boolean,
|
||||
visible?: boolean,
|
||||
onclick?: (label: Label, slider: Slider) => void,
|
||||
};
|
||||
|
||||
@@ -10,6 +10,6 @@ export type RuleOptions = {
|
||||
allowCrossDomain?: boolean,
|
||||
mobileFriendly?: boolean,
|
||||
loader?: string,
|
||||
options?: SliderOptions,
|
||||
options?: SliderOptions | (link: LinkOptions) => SliderOptions,
|
||||
minimizeOptions: (link: LinkOptions) => MinimizeOptions,
|
||||
};
|
||||
|
||||
@@ -45,5 +45,8 @@ export type SliderOptions = {
|
||||
copyLinkLabel?: boolean,
|
||||
minimizeLabel?: boolean,
|
||||
designSystemContext?: string,
|
||||
events?: { [eventName: string]: (event: SliderEvent) => void },
|
||||
events?: SliderEvents | SliderEvents[],
|
||||
useGlobalOptions?: boolean,
|
||||
};
|
||||
|
||||
export type SliderEvents = { [eventName: string]: (event: SliderEvent) => void };
|
||||
|
||||
Reference in New Issue
Block a user