@blockquote-web-components/blockquote-base-embedded-webview 1.10.3 → 1.11.1
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.
package/README.md
CHANGED
|
@@ -51,36 +51,36 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
|
|
|
51
51
|
|
|
52
52
|
##### Fields
|
|
53
53
|
|
|
54
|
-
| Name | Privacy | Type | Default
|
|
55
|
-
| --------------------- | ------- | --------- |
|
|
56
|
-
| `
|
|
57
|
-
| `
|
|
58
|
-
| `
|
|
59
|
-
| `
|
|
60
|
-
| `
|
|
61
|
-
| `
|
|
62
|
-
| `
|
|
63
|
-
| `
|
|
64
|
-
| `
|
|
65
|
-
| `
|
|
66
|
-
| `
|
|
67
|
-
| `
|
|
68
|
-
| `
|
|
69
|
-
| `
|
|
70
|
-
| `
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
73
|
-
| `
|
|
74
|
-
| `
|
|
75
|
-
| `
|
|
76
|
-
| `
|
|
77
|
-
| `
|
|
54
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
55
|
+
| --------------------- | ------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- | -------------- |
|
|
56
|
+
| `_updateSize` | | | | | |
|
|
57
|
+
| `_headingLevel` | | | | | |
|
|
58
|
+
| `_lightDomTpl` | | | | | |
|
|
59
|
+
| `_headerTpl` | | | | | |
|
|
60
|
+
| `_headingTpl` | | | | | |
|
|
61
|
+
| `_navigationDemosTpl` | | | | | |
|
|
62
|
+
| `_selectTpl` | | | | | |
|
|
63
|
+
| `_externalLinkTpl` | | | | | |
|
|
64
|
+
| `_descriptionTpl` | | | | | |
|
|
65
|
+
| `_readDataPosTpl` | | | | | |
|
|
66
|
+
| `_screenSizeTpl` | | | | | |
|
|
67
|
+
| `_mainTpl` | | | | | |
|
|
68
|
+
| `_embeddedSlotTpl` | | | | | |
|
|
69
|
+
| `selected` | public | `number` | `0` | Index of currently srcset file | |
|
|
70
|
+
| `screenSizeSelected` | public | `number` | `0` | Index of currently screen size selected | |
|
|
71
|
+
| `headingLevel` | public | `number` | `1` | Heading level from 1 to 6 | |
|
|
72
|
+
| `heading` | public | `string` | `''` | The heading of the webview. | |
|
|
73
|
+
| `__resetResizing` | | `boolean` | `false` | | |
|
|
74
|
+
| `__selectArrow` | | | `` html` <svg aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentcolor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9" /> </svg> ` `` | | |
|
|
75
|
+
| `__readDataPos` | | `object` | `{ x: '0', y: '0', resizing: false, cursor: '' }` | | |
|
|
76
|
+
| `limitHeight` | public | `boolean` | `false` | Limit height to 100% available | |
|
|
77
|
+
| `_sources` | | `array` | `[{ src: '', option: '', description: '' }]` | | |
|
|
78
|
+
| `_embeddedResizeRef` | | | | | |
|
|
78
79
|
|
|
79
80
|
##### Methods
|
|
80
81
|
|
|
81
82
|
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
82
83
|
| ---------------- | ------- | ----------- | ------------ | ------ | -------------- |
|
|
83
|
-
| `_updateSize` | | | `{ detail }` | | |
|
|
84
84
|
| `_litHtmlRender` | | | | | |
|
|
85
85
|
| `_onChangeFile` | | | `{ target }` | | |
|
|
86
86
|
|
|
@@ -113,22 +113,22 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
|
|
|
113
113
|
|
|
114
114
|
##### Fields
|
|
115
115
|
|
|
116
|
-
| Name
|
|
117
|
-
|
|
|
118
|
-
| `_lightDomTpl`
|
|
119
|
-
| `_loadResource`
|
|
120
|
-
| `_embeddedTpl`
|
|
121
|
-
| `
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
116
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
117
|
+
| ---------------- | ------- | -------- | ---------- | --------------------------------------------------------- | -------------- |
|
|
118
|
+
| `_lightDomTpl` | | | | | |
|
|
119
|
+
| `_loadResource` | | | | | |
|
|
120
|
+
| `_embeddedTpl` | | | | | |
|
|
121
|
+
| `_onLoadElement` | | | | | |
|
|
122
|
+
| `embeddedTitle` | public | `string` | `''` | The title attribute on an \<element> to label its content | |
|
|
123
|
+
| `src` | public | `string` | `''` | The URL of the page to embed | |
|
|
124
|
+
| `type` | public | `string` | `'iframe'` | The type of the tag to embed - iframe or object | |
|
|
124
125
|
|
|
125
126
|
##### Methods
|
|
126
127
|
|
|
127
|
-
| Name | Privacy | Description | Parameters
|
|
128
|
-
| ---------------- | ------- | ----------- |
|
|
129
|
-
| `_litHtmlRender` | | |
|
|
130
|
-
| `_fetch` | | | `resource`
|
|
131
|
-
| `_onLoadElement` | | | `{ target }` | | |
|
|
128
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
129
|
+
| ---------------- | ------- | ----------- | ---------- | ------ | -------------- |
|
|
130
|
+
| `_litHtmlRender` | | | | | |
|
|
131
|
+
| `_fetch` | | | `resource` | | |
|
|
132
132
|
|
|
133
133
|
##### Attributes
|
|
134
134
|
|
|
@@ -157,27 +157,27 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
|
|
|
157
157
|
|
|
158
158
|
##### Fields
|
|
159
159
|
|
|
160
|
-
| Name
|
|
161
|
-
|
|
|
162
|
-
| `_resizersTpl`
|
|
163
|
-
| `
|
|
164
|
-
| `
|
|
165
|
-
| `
|
|
166
|
-
| `
|
|
167
|
-
| `
|
|
168
|
-
| `
|
|
169
|
-
| `
|
|
170
|
-
| `
|
|
160
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
161
|
+
| ------------------------------- | ------- | -------- | ------- | ----------- | -------------- |
|
|
162
|
+
| `_resizersTpl` | | | | | |
|
|
163
|
+
| `_doubleclickForCssInitialSize` | | | | | |
|
|
164
|
+
| `_cursor` | | `string` | `''` | | |
|
|
165
|
+
| `_createResizerLeft` | | | | | |
|
|
166
|
+
| `_createResizerRight` | | | | | |
|
|
167
|
+
| `_createResizerBottom` | | | | | |
|
|
168
|
+
| `_createResizerBottomLeft` | | | | | |
|
|
169
|
+
| `_createResizerBottomRight` | | | | | |
|
|
170
|
+
| `_getBoundingClientRectWidth` | | `number` | `0` | | |
|
|
171
|
+
| `_getBoundingClientRectHeight` | | `number` | `0` | | |
|
|
171
172
|
|
|
172
173
|
##### Methods
|
|
173
174
|
|
|
174
|
-
| Name
|
|
175
|
-
|
|
|
176
|
-
| `
|
|
177
|
-
| `
|
|
178
|
-
| `
|
|
179
|
-
| `
|
|
180
|
-
| `_getBoundingClientRect` | | | `DOMRect: !string` | | |
|
|
175
|
+
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
176
|
+
| ------------------------ | ------- | ----------- | ------------------------------------ | ------ | -------------- |
|
|
177
|
+
| `_createResizer` | | | `DOMRect: !string, ev: PointerEvent` | | |
|
|
178
|
+
| `_resize` | | | `{ detail }` | | |
|
|
179
|
+
| `_dispatchResizeEvent` | | | | | |
|
|
180
|
+
| `_getBoundingClientRect` | | | `DOMRect: !string` | | |
|
|
181
181
|
|
|
182
182
|
##### Events
|
|
183
183
|
|
|
@@ -201,17 +201,16 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
|
|
|
201
201
|
```html
|
|
202
202
|
<blockquote-base-embedded-webview-size
|
|
203
203
|
screen-sizes="[
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
]"
|
|
214
|
-
></blockquote-base-embedded-webview-size>
|
|
204
|
+
{ width: 360, height: 800, id: '360x800' },
|
|
205
|
+
{ width: 390, height: 864, id: '390x864' },
|
|
206
|
+
{ width: 414, height: 896, id: '414x896' },
|
|
207
|
+
{ width: 768, height: 1024, id: '768x1024' },
|
|
208
|
+
{ width: 810, height: 1080, id: '810x1080' },
|
|
209
|
+
{ width: 1280, height: 720, id: '1280x800' },
|
|
210
|
+
{ width: 1366, height: 768, id: '1366x768' },
|
|
211
|
+
{ width: 1536, height: 864, id: '1536x864' },
|
|
212
|
+
{ width: 1920, height: 1080, id: '1920x1080' },
|
|
213
|
+
]"></blockquote-base-embedded-webview-size>
|
|
215
214
|
```
|
|
216
215
|
|
|
217
216
|
|
|
@@ -221,24 +220,24 @@ It will create a `select` tag with the provided demo HTML files and add the `[da
|
|
|
221
220
|
|
|
222
221
|
##### Fields
|
|
223
222
|
|
|
224
|
-
| Name | Privacy | Type | Default
|
|
225
|
-
| -------------------------- | ------- | --------- |
|
|
226
|
-
| `selectedSize` | | |
|
|
227
|
-
| `selectedDetail` | | |
|
|
228
|
-
| `computedStyleWidth` | | |
|
|
229
|
-
| `_toolbarTpl` | | |
|
|
230
|
-
| `_visualTextTpl` | | |
|
|
231
|
-
| `
|
|
232
|
-
| `
|
|
233
|
-
| `
|
|
234
|
-
| `
|
|
235
|
-
| `
|
|
223
|
+
| Name | Privacy | Type | Default | Description | Inherited From |
|
|
224
|
+
| -------------------------- | ------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | -------------- |
|
|
225
|
+
| `selectedSize` | | | | | |
|
|
226
|
+
| `selectedDetail` | | | | | |
|
|
227
|
+
| `computedStyleWidth` | | | | | |
|
|
228
|
+
| `_toolbarTpl` | | | | | |
|
|
229
|
+
| `_visualTextTpl` | | | | | |
|
|
230
|
+
| `_onResize` | | | | | |
|
|
231
|
+
| `showOverflowSize` | public | `boolean` | `false` | Show screen size options that are too large for the container | |
|
|
232
|
+
| `selected` | public | `number` | `0` | The screen size option selected | |
|
|
233
|
+
| `disabledSelectedSizeText` | public | `boolean` | `false` | If true, selected size text is disabled | |
|
|
234
|
+
| `screenSizes` | public | `array` | `[ { width: 360, height: 800, id: '360x800' }, { width: 390, height: 864, id: '390x864' }, { width: 414, height: 896, id: '414x896' }, { width: 768, height: 1024, id: '768x1024' }, { width: 810, height: 1080, id: '810x1080' }, { width: 1280, height: 720, id: '1280x800' }, { width: 1366, height: 768, id: '1366x768' }, { width: 1536, height: 864, id: '1536x864' }, { width: 1920, height: 1080, id: '1920x1080' }, ]` | The screen size options to display | |
|
|
235
|
+
| `widthInPercent` | public | `boolean` | `false` | Percentage value for the width | |
|
|
236
236
|
|
|
237
237
|
##### Methods
|
|
238
238
|
|
|
239
239
|
| Name | Privacy | Description | Parameters | Return | Inherited From |
|
|
240
240
|
| -------------- | ------- | ----------- | ---------- | ------ | -------------- |
|
|
241
|
-
| `_onResize` | | | `ev` | | |
|
|
242
241
|
| `_setSelected` | | | `ev` | | |
|
|
243
242
|
|
|
244
243
|
##### Attributes
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockquote-web-components/blockquote-base-embedded-webview",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.11.1",
|
|
4
4
|
"description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -134,5 +134,5 @@
|
|
|
134
134
|
"access": "public"
|
|
135
135
|
},
|
|
136
136
|
"customElements": "custom-elements.json",
|
|
137
|
-
"gitHead": "
|
|
137
|
+
"gitHead": "6fe48d5f8dc077b549d3c11ab3541a0a1fe84d58"
|
|
138
138
|
}
|
|
@@ -146,12 +146,12 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
146
146
|
this.__readDataPos = { x: '0', y: '0', resizing: false, cursor: '' };
|
|
147
147
|
this.limitHeight = false;
|
|
148
148
|
this._sources = [{ src: '', option: '', description: '' }];
|
|
149
|
-
this._updateSize = this._updateSize.bind(this);
|
|
150
149
|
this._embeddedResizeRef = createRef();
|
|
151
150
|
}
|
|
152
151
|
|
|
153
|
-
connectedCallback() {
|
|
154
|
-
super.connectedCallback
|
|
152
|
+
async connectedCallback() {
|
|
153
|
+
super.connectedCallback?.();
|
|
154
|
+
await this.updateComplete;
|
|
155
155
|
|
|
156
156
|
this.shadowRoot?.addEventListener('webviewresize', ev => {
|
|
157
157
|
const { detail } = /** @type {CustomEvent} */ (ev);
|
|
@@ -184,10 +184,6 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
184
184
|
|
|
185
185
|
this._src = this._sources[this.selected].src;
|
|
186
186
|
}
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
firstUpdated(props) {
|
|
190
|
-
super.firstUpdated && super.firstUpdated(props);
|
|
191
187
|
|
|
192
188
|
this.embedded = this.shadowRoot?.querySelector('[slot="embedded"]');
|
|
193
189
|
if (this._embeddedResizeRef.value) {
|
|
@@ -197,7 +193,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
197
193
|
}
|
|
198
194
|
}
|
|
199
195
|
|
|
200
|
-
_updateSize({ detail }) {
|
|
196
|
+
_updateSize = ({ detail }) => {
|
|
201
197
|
/** @type {HTMLElement} */ (this._embeddedResizeRef?.value)?.style.setProperty(
|
|
202
198
|
'--blockquote-base-embedded-webview-resize-rect-width',
|
|
203
199
|
`${detail.width}px`,
|
|
@@ -209,7 +205,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
209
205
|
|
|
210
206
|
this.__resetResizing = false;
|
|
211
207
|
this.requestUpdate();
|
|
212
|
-
}
|
|
208
|
+
};
|
|
213
209
|
|
|
214
210
|
get _headingLevel() {
|
|
215
211
|
return this.headingLevel >= 1 && this.headingLevel <= 6 ? this.headingLevel : 2;
|
|
@@ -46,7 +46,6 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
|
|
|
46
46
|
this.embeddedTitle = '';
|
|
47
47
|
this.src = '';
|
|
48
48
|
this.type = 'iframe';
|
|
49
|
-
this._onLoadElement = this._onLoadElement.bind(this);
|
|
50
49
|
}
|
|
51
50
|
|
|
52
51
|
connectedCallback() {
|
|
@@ -123,7 +122,7 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
|
|
|
123
122
|
}
|
|
124
123
|
}
|
|
125
124
|
|
|
126
|
-
_onLoadElement({ target }) {
|
|
125
|
+
_onLoadElement = ({ target }) => {
|
|
127
126
|
if (!target.contentDocument || !target.contentDocument.head.childNodes.length) {
|
|
128
127
|
return;
|
|
129
128
|
}
|
|
@@ -145,5 +144,5 @@ export class BlockquoteBaseEmbeddedWebviewElement extends LitElement {
|
|
|
145
144
|
detail: target,
|
|
146
145
|
});
|
|
147
146
|
this.dispatchEvent(event);
|
|
148
|
-
}
|
|
147
|
+
};
|
|
149
148
|
}
|
|
@@ -27,14 +27,14 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
|
|
|
27
27
|
this._createResizerBottom = this._createResizer.bind(this, 'top');
|
|
28
28
|
this._createResizerBottomLeft = this._createResizer.bind(this, 'scaleTopRight');
|
|
29
29
|
this._createResizerBottomRight = this._createResizer.bind(this, 'scaleTopLeft');
|
|
30
|
-
this._doubleclickForCssInitialSize = this._doubleclickForCssInitialSize.bind(this);
|
|
31
30
|
|
|
32
31
|
this._getBoundingClientRectWidth = 0;
|
|
33
32
|
this._getBoundingClientRectHeight = 0;
|
|
34
33
|
}
|
|
35
34
|
|
|
36
|
-
|
|
37
|
-
super.
|
|
35
|
+
async connectedCallback() {
|
|
36
|
+
super.connectedCallback?.();
|
|
37
|
+
await this.updateComplete;
|
|
38
38
|
|
|
39
39
|
this.rect = this.shadowRoot?.querySelector('.rect');
|
|
40
40
|
this.bottomRightResizerElement = this.shadowRoot?.querySelector('.resizer-se');
|
|
@@ -72,9 +72,9 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
|
|
|
72
72
|
`;
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
-
_doubleclickForCssInitialSize() {
|
|
75
|
+
_doubleclickForCssInitialSize = () => {
|
|
76
76
|
this.removeAttribute('style');
|
|
77
|
-
}
|
|
77
|
+
};
|
|
78
78
|
|
|
79
79
|
/**
|
|
80
80
|
* @param {!string} DOMRect
|
|
@@ -11,17 +11,16 @@ import { styles } from './styles/blockquote-base-embedded-webview-size-styles.cs
|
|
|
11
11
|
* ```html
|
|
12
12
|
* <blockquote-base-embedded-webview-size
|
|
13
13
|
* screen-sizes="[
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
* ]"
|
|
24
|
-
* ></blockquote-base-embedded-webview-size>
|
|
14
|
+
* { width: 360, height: 800, id: '360x800' },
|
|
15
|
+
* { width: 390, height: 864, id: '390x864' },
|
|
16
|
+
* { width: 414, height: 896, id: '414x896' },
|
|
17
|
+
* { width: 768, height: 1024, id: '768x1024' },
|
|
18
|
+
* { width: 810, height: 1080, id: '810x1080' },
|
|
19
|
+
* { width: 1280, height: 720, id: '1280x800' },
|
|
20
|
+
* { width: 1366, height: 768, id: '1366x768' },
|
|
21
|
+
* { width: 1536, height: 864, id: '1536x864' },
|
|
22
|
+
* { width: 1920, height: 1080, id: '1920x1080' },
|
|
23
|
+
* ]"></blockquote-base-embedded-webview-size>
|
|
25
24
|
* ```
|
|
26
25
|
*
|
|
27
26
|
* @attribute screen-sizes
|
|
@@ -82,19 +81,17 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
|
|
|
82
81
|
this.selected = 0;
|
|
83
82
|
this.disabledSelectedSizeText = false;
|
|
84
83
|
this.screenSizes = [
|
|
85
|
-
{ width: 360, height: 640, id: '360x640' },
|
|
86
84
|
{ width: 360, height: 800, id: '360x800' },
|
|
85
|
+
{ width: 390, height: 864, id: '390x864' },
|
|
87
86
|
{ width: 414, height: 896, id: '414x896' },
|
|
88
87
|
{ width: 768, height: 1024, id: '768x1024' },
|
|
89
88
|
{ width: 810, height: 1080, id: '810x1080' },
|
|
90
|
-
{ width: 1280, height:
|
|
89
|
+
{ width: 1280, height: 720, id: '1280x800' },
|
|
91
90
|
{ width: 1366, height: 768, id: '1366x768' },
|
|
92
91
|
{ width: 1536, height: 864, id: '1536x864' },
|
|
93
92
|
{ width: 1920, height: 1080, id: '1920x1080' },
|
|
94
93
|
];
|
|
95
94
|
this.widthInPercent = false;
|
|
96
|
-
|
|
97
|
-
this._onResize = this._onResize.bind(this);
|
|
98
95
|
}
|
|
99
96
|
|
|
100
97
|
get selectedSize() {
|
|
@@ -188,13 +185,13 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
|
|
|
188
185
|
`;
|
|
189
186
|
}
|
|
190
187
|
|
|
191
|
-
_onResize
|
|
188
|
+
_onResize = ev => {
|
|
192
189
|
ev.preventDefault();
|
|
193
190
|
ev.stopPropagation();
|
|
194
191
|
window.requestAnimationFrame(() => {
|
|
195
192
|
this.requestUpdate();
|
|
196
193
|
});
|
|
197
|
-
}
|
|
194
|
+
};
|
|
198
195
|
|
|
199
196
|
_setSelected(ev) {
|
|
200
197
|
ev.preventDefault();
|