@webqit/webflo 0.20.31 → 0.20.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/runtime-pi/webflo-client/webflo-elements.js +17 -14
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "vanila-javascript"
13
13
  ],
14
14
  "homepage": "https://webqit.io/tooling/webflo",
15
- "version": "0.20.31",
15
+ "version": "0.20.32",
16
16
  "license": "MIT",
17
17
  "repository": {
18
18
  "type": "git",
package/src/runtime-pi/webflo-client/webflo-elements.js CHANGED
@@ -330,13 +330,13 @@ export class ModalElement extends HTMLElement {
330
330
 
331
331
  updateScrollViewDimensions() {
332
332
  const viewElement = this.shadowRoot.querySelector('.view');
333
- const beaderBoxElement = this.shadowRoot.querySelector('.header-box');
334
- const beaderBarElement = this.shadowRoot.querySelector('.header-bar');
335
- const footerBarElement = this.shadowRoot.querySelector('.footer-bar');
333
+ const headerElement = this.shadowRoot.querySelector('header');
334
+ const headerBoxElement = this.shadowRoot.querySelector('.header-box');
335
+ const footerElement = this.shadowRoot.querySelector('footer');
336
336
  requestAnimationFrame(() => {
337
- viewElement.style.setProperty('--header-box-height', beaderBoxElement.offsetHeight + 'px');
338
- viewElement.style.setProperty('--header-bar-height', beaderBarElement.offsetHeight + 'px');
339
- viewElement.style.setProperty('--footer-bar-height', footerBarElement.offsetHeight + 'px');
337
+ viewElement.style.setProperty('--header-box-height', headerBoxElement.offsetHeight + 'px');
338
+ viewElement.style.setProperty('--header-max-height', headerElement.offsetHeight + 'px');
339
+ viewElement.style.setProperty('--footer-max-height', footerElement.offsetHeight + 'px');
340
340
  if (this.classList.contains('_container')) return;
341
341
  viewElement.style.setProperty('--view-width', viewElement.clientWidth/* instead of offsetHeight; safari reasons */ + 'px');
342
342
  viewElement.style.setProperty('--view-height', viewElement.clientHeight/* instead of offsetHeight; safari reasons */ + 'px');
@@ -480,7 +480,7 @@ export class ModalElement extends HTMLElement {
480
480
  <div class="_content" style="flex-grow: 1">
481
481
  <slot
482
482
  name="header"
483
- onslotchange="this.closest('.view').style.setProperty('--header-bar-height', this.closest('.header-bar').offsetHeight + 'px');"
483
+ onslotchange="this.closest('.view').style.setProperty('--header-max-height', this.closest('header').offsetHeight + 'px');"
484
484
  >${this.headerHTML}</slot>
485
485
  </div>
486
486
  </div>
@@ -513,7 +513,7 @@ export class ModalElement extends HTMLElement {
513
513
  <div class="footer-bar" part="footer-bar">
514
514
  <slot
515
515
  name="footer"
516
- onslotchange="this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--footer-bar-height', this.closest('.footer-bar').offsetHeight + 'px');"
516
+ onslotchange="this.classList.toggle('has-slotted', !!this.assignedElements().length); this.closest('.view').style.setProperty('--footer-max-height', this.closest('footer').offsetHeight + 'px');"
517
517
  >${this.footerHTML}</slot>
518
518
  </div>
519
519
  </footer>
@@ -620,11 +620,14 @@ export class ModalElement extends HTMLElement {
620
620
  /* -------- internal, dynamic props (view) -------- */
621
621
 
622
622
  .view {
623
+ --header-max-height: 1.6rem;
623
624
  --header-box-height: 0px;
624
- --header-bar-height: 1.6rem;
625
- --footer-bar-height: 0px;
625
+ --footer-max-height: 0px;
626
626
 
627
- --view-inner-height: calc(var(--view-height) - var(--header-bar-height) - var(--footer-bar-height));
627
+ --header-min-height: calc(var(--header-max-height) - var(--header-box-height));
628
+ --footer-min-height: var(--footer-max-height);
629
+
630
+ --view-inner-height: calc(var(--view-height) - var(--header-min-height) - var(--footer-min-height));
628
631
  --total-minmax-length: calc(var(--minmax-length) + var(--swipe-dismiss-length));
629
632
 
630
633
  --y-scroll-effect-exclude: var(--total-minmax-length);
@@ -997,8 +1000,8 @@ export class ModalElement extends HTMLElement {
997
1000
 
998
1001
  .main {
999
1002
  flex-grow: 1;
1000
- scroll-margin-top: var(--header-bar-height);
1001
- scroll-margin-bottom: var(--footer-bar-height);
1003
+ scroll-margin-top: var(--header-min-height);
1004
+ scroll-margin-bottom: var(--footer-min-height);
1002
1005
  scroll-snap-align: var(--scroll-snap-start);
1003
1006
  }
1004
1007
 
@@ -1032,7 +1035,7 @@ export class ModalElement extends HTMLElement {
1032
1035
 
1033
1036
  .scrollport {
1034
1037
  position: sticky;
1035
- top: var(--header-bar-height);
1038
+ top: var(--header-min-height);
1036
1039
  left: 0;
1037
1040
  right: 0;
1038
1041