@blockquote-web-components/blockquote-base-embedded-webview 1.1.2 → 1.2.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 +11 -10
- package/package.json +3 -3
- package/src/BlockquoteBaseEmbeddedWebview.js +15 -2
- package/src/BlockquoteBaseEmbeddedWebviewResize.js +10 -3
- package/src/BlockquoteBaseEmbeddedWebviewSize.js +13 -1
- package/src/styles/BlockquoteBaseEmbeddedWebview-styles.js +3 -1
- package/src/styles/BlockquoteBaseEmbeddedWebviewResize-styles.js +5 -2
- package/src/styles/BlockquoteBaseEmbeddedWebviewSize-styles.js +14 -16
package/README.md
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
| Event | Type |
|
|
45
45
|
|-----------------|--------------------------------------------------|
|
|
46
|
-
| `webviewresize` | `CustomEvent<{ x: string; y: string; resizing: boolean; }>` |
|
|
46
|
+
| `webviewresize` | `CustomEvent<{ x: string; y: string; resizing: boolean; cursor: string; }>` |
|
|
47
47
|
|
|
48
48
|
|
|
49
49
|
# blockquote-base-embedded-webview-size
|
|
@@ -74,15 +74,16 @@ screen-sizes="[
|
|
|
74
74
|
|
|
75
75
|
## Properties
|
|
76
76
|
|
|
77
|
-
| Property
|
|
78
|
-
|
|
79
|
-
| `computedStyleWidth`
|
|
80
|
-
| `
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `
|
|
77
|
+
| Property | Attribute | Modifiers | Type | Default | Description |
|
|
78
|
+
|----------------------------|-------------------------------|-----------|--------------------------------------------------|--------------------------------------------------|--------------------------------------------------|
|
|
79
|
+
| `computedStyleWidth` | | readonly | `number` | | |
|
|
80
|
+
| `disabledSelectedSizeText` | `disabled-selected-size-text` | | `Boolean` | false | If true, selected size text is disabled |
|
|
81
|
+
| `screenSizes` | `screen-sizes` | | `Array` | [{"width":360,"height":640,"id":"360x640"},{"width":360,"height":800,"id":"360x800"},{"width":414,"height":896,"id":"414x896"},{"width":768,"height":1024,"id":"768x1024"},{"width":810,"height":1080,"id":"810x1080"},{"width":1280,"height":800,"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 |
|
|
82
|
+
| `selected` | `selected` | | `Number` | 0 | The screen size option selected |
|
|
83
|
+
| `selectedDetail` | | readonly | `{ index: number; width: number; height: number; id: string; }` | | |
|
|
84
|
+
| `selectedSize` | | readonly | `{ width: number; height: number; id: string; }` | | |
|
|
85
|
+
| `showOverflowSize` | `show-overflow-size` | | `Boolean` | false | Show screen size options that are too large for the container |
|
|
86
|
+
| `widthInPercent` | `width-in-percent` | | `Boolean` | false | Percentage value for the width |
|
|
86
87
|
|
|
87
88
|
## Methods
|
|
88
89
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockquote-web-components/blockquote-base-embedded-webview",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Webcomponent blockquote-base-embedded-webview following open-wc recommendations",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
"lit": "^2.0.2"
|
|
130
130
|
},
|
|
131
131
|
"devDependencies": {
|
|
132
|
-
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.3.
|
|
132
|
+
"@blockquote-web-components/blockquote-base-common-dev-dependencies": "^1.3.7",
|
|
133
133
|
"@blockquote-web-components/blockquote-foundations-sass": "^1.0.0",
|
|
134
134
|
"@polymer/iron-test-helpers": "^3.0.1"
|
|
135
135
|
},
|
|
@@ -137,5 +137,5 @@
|
|
|
137
137
|
"access": "public"
|
|
138
138
|
},
|
|
139
139
|
"customElements": "custom-elements.json",
|
|
140
|
-
"gitHead": "
|
|
140
|
+
"gitHead": "e2cffaf05ced35ce5696669fc483e1b9f259204a"
|
|
141
141
|
}
|
|
@@ -124,7 +124,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
124
124
|
this.heading = '';
|
|
125
125
|
this.__resetResizing = false;
|
|
126
126
|
this.__selectArrow = chevronDownIcon;
|
|
127
|
-
this.__readDataPos = { x: 0, y: 0, resizing: false };
|
|
127
|
+
this.__readDataPos = { x: 0, y: 0, resizing: false, cursor: '' };
|
|
128
128
|
this.limitHeight = false;
|
|
129
129
|
this._sources = [{ file: '', option: '', description: '' }];
|
|
130
130
|
this._updateSize = this._updateSize.bind(this);
|
|
@@ -137,6 +137,15 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
137
137
|
this.shadowRoot.addEventListener('webviewresize', ({ detail }) => {
|
|
138
138
|
Object.assign(this.__readDataPos, detail);
|
|
139
139
|
this.__resetResizing = true;
|
|
140
|
+
if (detail.cursor === 'n' || detail.cursor === 'ne' || detail.cursor === 'nw') {
|
|
141
|
+
// http://makeseleniumeasy.com/2018/03/14/part-7-usages-of-javascripts-in-selenium-difference-among-scrollby-scrollto-and-scroll-methods-of-javascript/
|
|
142
|
+
window.scroll({
|
|
143
|
+
top: Math.abs(parseInt(this.__readDataPos.y, 10) + this._controlBottom),
|
|
144
|
+
left: 0,
|
|
145
|
+
behavior: 'smooth',
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
|
|
140
149
|
this.requestUpdate();
|
|
141
150
|
});
|
|
142
151
|
|
|
@@ -159,6 +168,9 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
159
168
|
super.firstUpdated && super.firstUpdated(props);
|
|
160
169
|
|
|
161
170
|
this.embedded = this.shadowRoot.querySelector('[slot="embedded"]');
|
|
171
|
+
this._controlBottom = parseFloat(
|
|
172
|
+
window.getComputedStyle(this._embeddedResizeRef.value).paddingBottom,
|
|
173
|
+
);
|
|
162
174
|
this.append(this.embedded);
|
|
163
175
|
}
|
|
164
176
|
|
|
@@ -171,6 +183,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
171
183
|
'--blockquote-base-embedded-webview-resize-rect-height',
|
|
172
184
|
this.limitHeight ? '100%' : `${detail.height}px`,
|
|
173
185
|
);
|
|
186
|
+
|
|
174
187
|
this.__resetResizing = false;
|
|
175
188
|
this.requestUpdate();
|
|
176
189
|
}
|
|
@@ -239,7 +252,7 @@ export class BlockquoteBaseEmbeddedWebview extends LitElement {
|
|
|
239
252
|
|
|
240
253
|
get _screenSizeTpl() {
|
|
241
254
|
return html` <blockquote-base-embedded-webview-size
|
|
242
|
-
|
|
255
|
+
.disabledSelectedSizeText="${this.__resetResizing}"
|
|
243
256
|
@click="${this._updateSize}"
|
|
244
257
|
@selectedchange="${this._updateSize}"
|
|
245
258
|
.selected="${this.screenSizeSelected}"
|
|
@@ -28,6 +28,7 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
|
|
|
28
28
|
|
|
29
29
|
constructor() {
|
|
30
30
|
super();
|
|
31
|
+
this._cursor = '';
|
|
31
32
|
this._resizer = this._resizer.bind(this);
|
|
32
33
|
this._removeResizer = this._removeResizer.bind(this);
|
|
33
34
|
this._createResizerLeft = this._createResizer.bind(this, 'right');
|
|
@@ -102,29 +103,34 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
|
|
|
102
103
|
_resizer({ detail }) {
|
|
103
104
|
let cssOffsetX;
|
|
104
105
|
let cssOffsetY;
|
|
105
|
-
const dx = Math.floor(detail.dx * 2);
|
|
106
|
-
const dy = Math.floor(detail.dy * 1.
|
|
107
|
-
|
|
106
|
+
const dx = Math.floor(detail.dx * 2.02);
|
|
107
|
+
const dy = Math.floor(detail.dy * 1.02);
|
|
108
|
+
// http://jsfiddle.net/MissoulaLorenzo/gfn6ob3j/
|
|
108
109
|
switch (this._getBoundingClientRecDOMRect) {
|
|
109
110
|
case 'right':
|
|
111
|
+
this._cursor = 'w';
|
|
110
112
|
cssOffsetX = `${this._getBoundingClientRectWidth - dx}px`;
|
|
111
113
|
this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-width', cssOffsetX);
|
|
112
114
|
break;
|
|
113
115
|
case 'left':
|
|
116
|
+
this._cursor = 'e';
|
|
114
117
|
cssOffsetX = `${this._getBoundingClientRectWidth + dx}px`;
|
|
115
118
|
this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-width', cssOffsetX);
|
|
116
119
|
break;
|
|
117
120
|
case 'top':
|
|
121
|
+
this._cursor = 'n';
|
|
118
122
|
cssOffsetY = `${this._getBoundingClientRectHeight + dy * 1}px`;
|
|
119
123
|
this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-height', cssOffsetY);
|
|
120
124
|
break;
|
|
121
125
|
case 'scaleTopLeft':
|
|
126
|
+
this._cursor = 'ne';
|
|
122
127
|
cssOffsetX = `${this._getBoundingClientRectWidth + dx}px`;
|
|
123
128
|
cssOffsetY = `${this._getBoundingClientRectHeight + dy * 1}px`;
|
|
124
129
|
this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-width', cssOffsetX);
|
|
125
130
|
this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-height', cssOffsetY);
|
|
126
131
|
break;
|
|
127
132
|
case 'scaleTopRight':
|
|
133
|
+
this._cursor = 'nw';
|
|
128
134
|
cssOffsetX = `${this._getBoundingClientRectWidth - dx}px`;
|
|
129
135
|
cssOffsetY = `${this._getBoundingClientRectHeight + dy * 1}px`;
|
|
130
136
|
this.style.setProperty('--blockquote-base-embedded-webview-resize-rect-width', cssOffsetX);
|
|
@@ -153,6 +159,7 @@ export class BlockquoteBaseEmbeddedWebviewResize extends LitElement {
|
|
|
153
159
|
'--blockquote-base-embedded-webview-resize-rect-height',
|
|
154
160
|
),
|
|
155
161
|
resizing: this.hasAttribute('resizing'),
|
|
162
|
+
cursor: this._cursor,
|
|
156
163
|
},
|
|
157
164
|
});
|
|
158
165
|
this.dispatchEvent(event);
|
|
@@ -73,6 +73,15 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
|
|
|
73
73
|
type: Boolean,
|
|
74
74
|
attribute: 'show-overflow-size',
|
|
75
75
|
},
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* If true, selected size text is disabled
|
|
79
|
+
* @type {Boolean}
|
|
80
|
+
*/
|
|
81
|
+
disabledSelectedSizeText: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
attribute: 'disabled-selected-size-text',
|
|
84
|
+
},
|
|
76
85
|
};
|
|
77
86
|
}
|
|
78
87
|
|
|
@@ -80,6 +89,7 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
|
|
|
80
89
|
super();
|
|
81
90
|
this.showOverflowSize = false;
|
|
82
91
|
this.selected = 0;
|
|
92
|
+
this.disabledSelectedSizeText = false;
|
|
83
93
|
this.screenSizes = [
|
|
84
94
|
{ width: 360, height: 640, id: '360x640' },
|
|
85
95
|
{ width: 360, height: 800, id: '360x800' },
|
|
@@ -179,7 +189,9 @@ export class BlockquoteBaseEmbeddedWebviewSize extends LitElement {
|
|
|
179
189
|
}
|
|
180
190
|
|
|
181
191
|
get _visualTextTpl() {
|
|
182
|
-
return html` <span aria-disabled="
|
|
192
|
+
return html` <span aria-disabled="${this.disabledSelectedSizeText}" aria-hidden="true"
|
|
193
|
+
>${this.selectedSize.id}</span
|
|
194
|
+
>`;
|
|
183
195
|
}
|
|
184
196
|
|
|
185
197
|
_onResize(ev) {
|
|
@@ -22,6 +22,7 @@ export default css`:host {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
.main {
|
|
25
|
+
contain: content;
|
|
25
26
|
flex: 1;
|
|
26
27
|
background-color: var(--_main-bgcolor);
|
|
27
28
|
}
|
|
@@ -99,7 +100,8 @@ header > div {
|
|
|
99
100
|
.read-data-pos {
|
|
100
101
|
font-size: 0.875rem;
|
|
101
102
|
letter-spacing: 0.0156rem;
|
|
102
|
-
position:
|
|
103
|
+
position: fixed;
|
|
104
|
+
z-index: 1;
|
|
103
105
|
right: 0.375rem;
|
|
104
106
|
top: 0.3125rem;
|
|
105
107
|
opacity: 0;
|
|
@@ -2,7 +2,6 @@ import { css } from 'lit';
|
|
|
2
2
|
|
|
3
3
|
export default css`:host {
|
|
4
4
|
--__resizer-factor: calc(1.25rem * var(--blockquote-base-embedded-webview-resize-factor, 1));
|
|
5
|
-
--_rect-transition: var(--blockquote-base-embedded-webview-resize-rect-transition, width 90ms cubic-bezier(0.25, 0.46, 0.45, 0.94), height 90ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
|
|
6
5
|
--_rect-min-width: var(--blockquote-base-embedded-webview-resize-rect-min-width, 18.75rem);
|
|
7
6
|
--_rect-min-height: var(--blockquote-base-embedded-webview-resize-rect-min-height, 9.375rem);
|
|
8
7
|
--_rect-max-width: var(--blockquote-base-embedded-webview-resize-rect-max-width, 100%);
|
|
@@ -13,6 +12,7 @@ export default css`:host {
|
|
|
13
12
|
--_resizer-bgcolor-hover: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover, rgb(220, 220, 220));
|
|
14
13
|
--_resizer-bgimage-ew-hover: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover, linear-gradient(0deg, rgba(220, 220, 220, 0.2), rgba(220, 220, 220, 1) 50%, rgba(220, 220, 220, 0.2)));
|
|
15
14
|
--_resizer-bgimage-s-hover: var(--blockquote-base-embedded-webview-resize-resizer-bgcolor-hover, linear-gradient(90deg, rgba(220, 220, 220, 0.2), rgba(220, 220, 220, 1) 50%, rgba(220, 220, 220, 0.2)));
|
|
15
|
+
contain: content;
|
|
16
16
|
display: flex;
|
|
17
17
|
flex-direction: column;
|
|
18
18
|
align-items: center;
|
|
@@ -41,7 +41,6 @@ export default css`:host {
|
|
|
41
41
|
width: var(--_rect-width);
|
|
42
42
|
height: var(--_rect-height);
|
|
43
43
|
transform: translateZ(0);
|
|
44
|
-
transition: var(--_rect-transition);
|
|
45
44
|
}
|
|
46
45
|
|
|
47
46
|
.resizer {
|
|
@@ -64,18 +63,22 @@ export default css`:host {
|
|
|
64
63
|
top: calc(var(--__resizer-factor) / 4 * -1);
|
|
65
64
|
left: calc(var(--__resizer-factor) * -1);
|
|
66
65
|
width: calc(100% + var(--__resizer-factor) * 2);
|
|
66
|
+
border-top-left-radius: calc(var(--__resizer-factor) / 10);
|
|
67
|
+
border-top-right-radius: calc(var(--__resizer-factor) / 10);
|
|
67
68
|
}
|
|
68
69
|
.resizer-n::after {
|
|
69
70
|
content: none;
|
|
70
71
|
}
|
|
71
72
|
.resizer-se {
|
|
72
73
|
cursor: nwse-resize;
|
|
74
|
+
border-bottom-right-radius: calc(var(--__resizer-factor) / 10);
|
|
73
75
|
}
|
|
74
76
|
.resizer-se::after {
|
|
75
77
|
transform: translate(-50%, -50%);
|
|
76
78
|
}
|
|
77
79
|
.resizer-sw {
|
|
78
80
|
cursor: nesw-resize;
|
|
81
|
+
border-bottom-left-radius: calc(var(--__resizer-factor) / 10);
|
|
79
82
|
}
|
|
80
83
|
.resizer-sw::after {
|
|
81
84
|
transform: translate(-50%, -50%) translateY(-0.0938rem) rotate(90deg);
|
|
@@ -19,22 +19,6 @@ export default css`:host {
|
|
|
19
19
|
display: none !important;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
:host([data-resizing]) [aria-hidden=true] {
|
|
23
|
-
opacity: 0.4;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
:host([data-resizing]) [aria-hidden=true]::after {
|
|
27
|
-
content: "";
|
|
28
|
-
display: block;
|
|
29
|
-
height: 1px;
|
|
30
|
-
width: calc(100% + 2rem);
|
|
31
|
-
position: absolute;
|
|
32
|
-
left: 50%;
|
|
33
|
-
top: 50%;
|
|
34
|
-
transform: translate(-50%, -50%);
|
|
35
|
-
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0));
|
|
36
|
-
}
|
|
37
|
-
|
|
38
22
|
*,
|
|
39
23
|
*::before,
|
|
40
24
|
*::after {
|
|
@@ -82,6 +66,20 @@ button {
|
|
|
82
66
|
letter-spacing: inherit;
|
|
83
67
|
position: absolute;
|
|
84
68
|
}
|
|
69
|
+
.rect [aria-disabled=true] {
|
|
70
|
+
opacity: 0.4;
|
|
71
|
+
}
|
|
72
|
+
.rect [aria-disabled=true]::after {
|
|
73
|
+
content: "";
|
|
74
|
+
display: block;
|
|
75
|
+
height: 1px;
|
|
76
|
+
width: calc(100% + 2rem);
|
|
77
|
+
position: absolute;
|
|
78
|
+
left: 50%;
|
|
79
|
+
top: 50%;
|
|
80
|
+
transform: translate(-50%, -50%);
|
|
81
|
+
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0), rgba(0, 0, 0, 0));
|
|
82
|
+
}
|
|
85
83
|
|
|
86
84
|
button {
|
|
87
85
|
position: absolute;
|