RanchiMall/standard-ui
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

performance improvements

Browse Source
This commit is contained in:
sairaj mote 2022-11-09 03:45:02 +05:30
parent 3c885f92c7
commit 31541982b2
3 changed files with 49 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/dist/popup.js vendored
View File

@ -279,20 +279,23 @@ customElements.define('sm-popup', class extends HTMLElement {
this.backdrop.animate([
{ opacity: 0 },
{ opacity: 1 },
], animOptions)
], animOptions).onfinish = () => {
this.dispatchEvent(
new CustomEvent("popupopened", {
bubbles: true,
})
);
document.body.style.overflow = 'hidden';
document.body.style.top = `-${window.scrollY}px`;
}
this.setStateOpen()
this.dispatchEvent(
new CustomEvent("popupopened", {
bubbles: true,
})
);
this.pinned = pinned;
this.isOpen = true;
document.body.style.overflow = 'hidden';
document.body.style.top = `-${window.scrollY}px`;
const elementToFocus = this.autoFocus || this.focusable[0];
if (elementToFocus)
elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
setTimeout(() => {
const elementToFocus = this.autoFocus || this.focusable?.[0] || this.dialogBox;
if (elementToFocus)
elementToFocus.tagName.includes('-') ? elementToFocus.focusIn() : elementToFocus.focus();
}, 0);
if (!this.hasAttribute('open')) {
this.setAttribute('open', '');
this.addEventListener('keydown', this.detectFocus);
@ -436,12 +439,21 @@ customElements.define('sm-popup', class extends HTMLElement {
this.hide();
}
}
debounce(callback, wait) {
let timeoutId = null;
return (...args) => {
window.clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => {
callback.apply(null, args);
}, wait);
};
}
connectedCallback() {
this.popupBodySlot.addEventListener('slotchange', () => {
this.popupBodySlot.addEventListener('slotchange', this.debounce(() => {
this.forms = this.querySelectorAll('sm-form');
this.updateFocusableList()
});
}, 0));
this.resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
if (entry.contentBoxSize) {

2
components/dist/popup.min.js vendored
View File

File diff suppressed because one or more lines are too long

32
components/test.html
View File

@ -34,15 +34,29 @@
</head>
<body>
<collapsed-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto minima maiores autem iusto porro, odit iure
ea eveniet enim soluta ex a nihil? Dicta ducimus dolor itaque unde sequi, reprehenderit ex aperiam dignissimos
inventore? Totam aliquid repellendus nulla culpa nemo perspiciatis tempora. Vel obcaecati asperiores nam,
ratione sint itaque temporibus incidunt officiis iusto cumque reiciendis ab repellendus quaerat ducimus
quibusdam quia maxime nostrum atque ad sequi eveniet est error ipsam voluptatem. Architecto molestiae ex et
minima praesentium quasi ea, ad enim consequuntur at nisi nostrum. Quisquam nostrum, accusamus neque, fugiat
esse deleniti ex vitae totam asperiores odit quaerat sunt voluptates.
</collapsed-text>
<button>Show popup</button>
<sm-popup>
<input type="text" placeholder="fds">
<button>dsfsd</button>
<collapsed-text>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto minima maiores autem iusto porro, odit
iure
ea eveniet enim soluta ex a nihil? Dicta ducimus dolor itaque unde sequi, reprehenderit ex aperiam
dignissimos
inventore? Totam aliquid repellendus nulla culpa nemo perspiciatis tempora. Vel obcaecati asperiores nam,
ratione sint itaque temporibus incidunt officiis iusto cumque reiciendis ab repellendus quaerat ducimus
quibusdam quia maxime nostrum atque ad sequi eveniet est error ipsam voluptatem. Architecto molestiae ex et
minima praesentium quasi ea, ad enim consequuntur at nisi nostrum. Quisquam nostrum, accusamus neque, fugiat
esse deleniti ex vitae totam asperiores odit quaerat sunt voluptates.
</collapsed-text>
</sm-popup>
</body>
<script>
const popup = document.querySelector('sm-popup');
popup.show();
document.querySelector('button').addEventListener('click', () => {
popup.show();
});
</script>
</html>