@fluid-topics/ft-size-watcher 0.1.6 → 0.1.7
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.
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
!function(t,e,i,s){var h,r=function(t,e,i,s){for(var h,r=arguments.length,a=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,c=t.length-1;c>=0;c--)(h=t[c])&&(a=(r<3?h(a):r>3?h(e,i,a):h(e,i))||a);return r>3&&a&&Object.defineProperty(e,i,a),a};t.FtSizeCategory=void 0,(h=t.FtSizeCategory||(t.FtSizeCategory={})).S="S",h.M="M",h.L="L",h.XL="XL",h.XXL="XXL";class a extends CustomEvent{constructor(t,e){super("change",{detail:{size:t,category:e}})}}t.FtSizeWatcher=class extends s.FtLitElement{constructor(){super(...arguments),this.debounceTimeout=100,this.local=!1,this.size=0,this.category=t.FtSizeCategory.S,this.resizeObserver=new ResizeObserver((()=>this.updateSize())),this.debouncer=new s.Debouncer}getStyles(){return e.css`
|
|
2
|
+
.ft-size-watcher--pixel {
|
|
3
|
+
width: 0;
|
|
4
|
+
height: 0;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.ft-size-watcher--pixel.ft-size-watcher--local {
|
|
9
|
+
width: 100%;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ft-size-watcher--watcher {
|
|
13
|
+
height: 1px;
|
|
14
|
+
width: 100vw;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ft-size-watcher--local .ft-size-watcher--watcher {
|
|
18
|
+
width: 100%;
|
|
19
|
+
}
|
|
20
|
+
`}getTemplate(){return e.html`
|
|
21
|
+
<div class="ft-size-watcher--pixel ${this.local?"ft-size-watcher--local":""}">
|
|
22
|
+
<div class="ft-size-watcher--watcher"></div>
|
|
23
|
+
</div>
|
|
24
|
+
`}contentAvailableCallback(t){super.contentAvailableCallback(t),this.watcher&&this.resizeObserver.observe(this.watcher),this.updateSize()}updateSize(){this.debouncer.run((()=>{this.watcher&&this.size!==this.watcher.clientWidth&&(this.size=this.watcher.clientWidth,this.size<768?this.category=t.FtSizeCategory.S:this.size<976?this.category=t.FtSizeCategory.M:this.size<1024?this.category=t.FtSizeCategory.L:this.size<1440?this.category=t.FtSizeCategory.XL:this.category=t.FtSizeCategory.XXL,this.dispatchEvent(new a(this.size,this.category)))}),this.debounceTimeout)}},t.FtSizeWatcher.elementDefinitions={},r([i.property({type:Number})],t.FtSizeWatcher.prototype,"debounceTimeout",void 0),r([i.property({type:Boolean})],t.FtSizeWatcher.prototype,"local",void 0),r([i.property({type:Number,reflect:!0})],t.FtSizeWatcher.prototype,"size",void 0),r([i.property({type:String,reflect:!0})],t.FtSizeWatcher.prototype,"category",void 0),r([i.query(".ft-size-watcher--watcher")],t.FtSizeWatcher.prototype,"watcher",void 0),t.FtSizeWatcher=r([s.customElement("ft-size-watcher")],t.FtSizeWatcher),t.FtSizeChangeEvent=a,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.wcUtils);
|
|
@@ -44,7 +44,44 @@ var st;null===(st=window.HTMLSlotElement)||void 0===st||st.prototype.assignedEle
|
|
|
44
44
|
* Copyright 2021 Google LLC
|
|
45
45
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
46
46
|
*/
|
|
47
|
-
function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:i,elementDefinitions:e,shadowRootOptions:s}=t;e&&!i&&(t.registry=new CustomElementRegistry,Object.entries(e).forEach((([i,e])=>t.registry.define(i,e))));const n=this.renderOptions.creationScope=this.attachShadow({...s,customElements:t.registry});return l(n,this.constructor.elementStyles),n}}}(Y)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),L
|
|
47
|
+
function(t){return class extends t{createRenderRoot(){const t=this.constructor,{registry:i,elementDefinitions:e,shadowRootOptions:s}=t;e&&!i&&(t.registry=new CustomElementRegistry,Object.entries(e).forEach((([i,e])=>t.registry.define(i,e))));const n=this.renderOptions.creationScope=this.attachShadow({...s,customElements:t.registry});return l(n,this.constructor.elementStyles),n}}}(Y)){constructor(){super(),this.constructorName=this.constructor.name,this.proto=this.constructor.prototype}getStyles(){return[]}getTemplate(){return null}render(){let t=this.getStyles();return Array.isArray(t)||(t=[t]),L`
|
|
48
|
+
${t.map((t=>L`
|
|
49
|
+
<style>${t}</style>
|
|
50
|
+
`))}
|
|
51
|
+
${this.getTemplate()}
|
|
52
|
+
`}adoptedCallback(){Object.getPrototypeOf(this)!==this.constructorName&&Object.setPrototypeOf(this,this.proto)}updated(t){super.updated(t),setTimeout((()=>this.contentAvailableCallback(t)),0)}contentAvailableCallback(t){}}var lt,at;r`
|
|
53
|
+
.ft-no-text-select {
|
|
54
|
+
-webkit-touch-callout: none;
|
|
55
|
+
-webkit-user-select: none;
|
|
56
|
+
-khtml-user-select: none;
|
|
57
|
+
-moz-user-select: none;
|
|
58
|
+
-ms-user-select: none;
|
|
59
|
+
user-select: none;
|
|
60
|
+
}
|
|
61
|
+
`,navigator.vendor&&navigator.vendor.match(/apple/i)||(null===(at=null===(lt=window.safari)||void 0===lt?void 0:lt.pushNotification)||void 0===at||at.toString());var ht,ct,ut=function(t,i,e,s){for(var n,o=arguments.length,r=o<3?i:null===s?s=Object.getOwnPropertyDescriptor(i,e):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(i,e,r):n(i,e))||r);return o>3&&r&&Object.defineProperty(i,e,r),r};t.FtSizeCategory=void 0,(ht=t.FtSizeCategory||(t.FtSizeCategory={})).S="S",ht.M="M",ht.L="L",ht.XL="XL",ht.XXL="XXL";class dt extends CustomEvent{constructor(t,i){super("change",{detail:{size:t,category:i}})}}t.FtSizeWatcher=class extends rt{constructor(){super(...arguments),this.debounceTimeout=100,this.local=!1,this.size=0,this.category=t.FtSizeCategory.S,this.resizeObserver=new ResizeObserver((()=>this.updateSize())),this.debouncer=new nt}getStyles(){return r`
|
|
62
|
+
.ft-size-watcher--pixel {
|
|
63
|
+
width: 0;
|
|
64
|
+
height: 0;
|
|
65
|
+
overflow: hidden;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.ft-size-watcher--pixel.ft-size-watcher--local {
|
|
69
|
+
width: 100%;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.ft-size-watcher--watcher {
|
|
73
|
+
height: 1px;
|
|
74
|
+
width: 100vw;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.ft-size-watcher--local .ft-size-watcher--watcher {
|
|
78
|
+
width: 100%;
|
|
79
|
+
}
|
|
80
|
+
`}getTemplate(){return L`
|
|
81
|
+
<div class="ft-size-watcher--pixel ${this.local?"ft-size-watcher--local":""}">
|
|
82
|
+
<div class="ft-size-watcher--watcher"></div>
|
|
83
|
+
</div>
|
|
84
|
+
`}contentAvailableCallback(t){super.contentAvailableCallback(t),this.watcher&&this.resizeObserver.observe(this.watcher),this.updateSize()}updateSize(){this.debouncer.run((()=>{this.watcher&&this.size!==this.watcher.clientWidth&&(this.size=this.watcher.clientWidth,this.size<768?this.category=t.FtSizeCategory.S:this.size<976?this.category=t.FtSizeCategory.M:this.size<1024?this.category=t.FtSizeCategory.L:this.size<1440?this.category=t.FtSizeCategory.XL:this.category=t.FtSizeCategory.XXL,this.dispatchEvent(new dt(this.size,this.category)))}),this.debounceTimeout)}},t.FtSizeWatcher.elementDefinitions={},ut([et({type:Number})],t.FtSizeWatcher.prototype,"debounceTimeout",void 0),ut([et({type:Boolean})],t.FtSizeWatcher.prototype,"local",void 0),ut([et({type:Number,reflect:!0})],t.FtSizeWatcher.prototype,"size",void 0),ut([et({type:String,reflect:!0})],t.FtSizeWatcher.prototype,"category",void 0),ut([
|
|
48
85
|
/**
|
|
49
86
|
* @license
|
|
50
87
|
* Copyright 2017 Google LLC
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-size-watcher",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "Pixel component used to get viewport size",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-wc-utils": "^0.1.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "^0.1.7",
|
|
23
23
|
"lit": "^2.0.2"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "78397cca67971191c46739cfb6c87481aaa65745"
|
|
26
26
|
}
|