@huluvu424242/honey-slideshow
Version:
Text to Speech component wich is reading texts from DOM elements.
147 lines (142 loc) • 9.09 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2883912.js';
import { g as getIonMode } from './ionic-global-c170bb31.js';
const splitPaneIosCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none !important;box-shadow:none !important;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){-ms-flex:1;flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){-ms-flex-order:-1;order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host{--border:0.55px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:0;border-right:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:unset;border-right:unset;-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border)}}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:var(--border);border-right:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:unset;border-right:unset;-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0}}";
const splitPaneMdCss = ":host{--side-width:100%;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;contain:strict}::slotted(ion-menu.menu-pane-visible){-ms-flex:0 1 auto;flex:0 1 auto;width:var(--side-width);min-width:var(--side-min-width);max-width:var(--side-max-width)}:host(.split-pane-visible) ::slotted(.split-pane-side),:host(.split-pane-visible) ::slotted(.split-pane-main){left:0;right:0;top:0;bottom:0;position:relative;-webkit-box-shadow:none !important;box-shadow:none !important;z-index:0}:host(.split-pane-visible) ::slotted(.split-pane-main){-ms-flex:1;flex:1}:host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),:host(.split-pane-visible) ::slotted(ion-menu.split-pane-side.menu-enabled){display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0}::slotted(.split-pane-side:not(ion-menu)){display:none}:host(.split-pane-visible) ::slotted(.split-pane-side){-ms-flex-order:-1;order:-1}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){-ms-flex-order:1;order:1}:host{--border:1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))));--side-min-width:270px;--side-max-width:28%}:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:0;border-right:var(--border);border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side){border-left:unset;border-right:unset;-webkit-border-start:0;border-inline-start:0;-webkit-border-end:var(--border);border-inline-end:var(--border)}}:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:var(--border);border-right:0;border-top:0;border-bottom:0;min-width:var(--side-min-width);max-width:var(--side-max-width)}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.split-pane-visible) ::slotted(.split-pane-side[side=end]){border-left:unset;border-right:unset;-webkit-border-start:var(--border);border-inline-start:var(--border);-webkit-border-end:0;border-inline-end:0}}";
const SPLIT_PANE_MAIN = 'split-pane-main';
const SPLIT_PANE_SIDE = 'split-pane-side';
const QUERY = {
'xs': '(min-width: 0px)',
'sm': '(min-width: 576px)',
'md': '(min-width: 768px)',
'lg': '(min-width: 992px)',
'xl': '(min-width: 1200px)',
'never': ''
};
const SplitPane = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.ionSplitPaneVisible = createEvent(this, "ionSplitPaneVisible", 7);
this.visible = false;
/**
* If `true`, the split pane will be hidden.
*/
this.disabled = false;
/**
* When the split-pane should be shown.
* Can be a CSS media query expression, or a shortcut expression.
* Can also be a boolean expression.
*/
this.when = QUERY['lg'];
}
visibleChanged(visible) {
const detail = { visible, isPane: this.isPane.bind(this) };
this.ionSplitPaneVisible.emit(detail);
}
connectedCallback() {
this.styleChildren();
this.updateState();
}
disconnectedCallback() {
if (this.rmL) {
this.rmL();
this.rmL = undefined;
}
}
updateState() {
if (this.rmL) {
this.rmL();
this.rmL = undefined;
}
// Check if the split-pane is disabled
if (this.disabled) {
this.visible = false;
return;
}
// When query is a boolean
const query = this.when;
if (typeof query === 'boolean') {
this.visible = query;
return;
}
// When query is a string, let's find first if it is a shortcut
const mediaQuery = QUERY[query] || query;
// Media query is empty or null, we hide it
if (mediaQuery.length === 0) {
this.visible = false;
return;
}
if (window.matchMedia) {
// Listen on media query
const callback = (q) => {
this.visible = q.matches;
};
const mediaList = window.matchMedia(mediaQuery);
mediaList.addListener(callback);
this.rmL = () => mediaList.removeListener(callback);
this.visible = mediaList.matches;
}
}
isPane(element) {
if (!this.visible) {
return false;
}
return element.parentElement === this.el
&& element.classList.contains(SPLIT_PANE_SIDE);
}
styleChildren() {
const contentId = this.contentId;
const children = this.el.children;
const nu = this.el.childElementCount;
let foundMain = false;
for (let i = 0; i < nu; i++) {
const child = children[i];
const isMain = contentId !== undefined && child.id === contentId;
if (isMain) {
if (foundMain) {
console.warn('split pane cannot have more than one main node');
return;
}
foundMain = true;
}
setPaneClass(child, isMain);
}
if (!foundMain) {
console.warn('split pane does not have a specified main node');
}
}
render() {
const mode = getIonMode(this);
return (h(Host, { class: {
[mode]: true,
// Used internally for styling
[`split-pane-${mode}`]: true,
'split-pane-visible': this.visible
} }, h("slot", null)));
}
get el() { return getElement(this); }
static get watchers() { return {
"visible": ["visibleChanged"],
"disabled": ["updateState"],
"when": ["updateState"]
}; }
};
const setPaneClass = (el, isMain) => {
let toAdd;
let toRemove;
if (isMain) {
toAdd = SPLIT_PANE_MAIN;
toRemove = SPLIT_PANE_SIDE;
}
else {
toAdd = SPLIT_PANE_SIDE;
toRemove = SPLIT_PANE_MAIN;
}
const classList = el.classList;
classList.add(toAdd);
classList.remove(toRemove);
};
SplitPane.style = {
ios: splitPaneIosCss,
md: splitPaneMdCss
};
export { SplitPane as ion_split_pane };