@operato/contact 8.0.0-alpha.4 → 8.0.0-beta.0
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/CHANGELOG.md +51 -0
- package/dist/src/ox-pfp-edit.d.ts +381 -12
- package/dist/src/ox-pfp-edit.js +72 -126
- package/dist/src/ox-pfp-edit.js.map +1 -1
- package/dist/src/ox-pfp.js +1 -1
- package/dist/src/ox-pfp.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +13 -17
- package/src/ox-pfp-edit.ts +64 -131
- package/src/ox-pfp.ts +1 -1
- package/themes/calendar-theme.css +3 -1
- package/dist/src/ox-zoomable-image.d.ts +0 -22
- package/dist/src/ox-zoomable-image.js +0 -155
- package/dist/src/ox-zoomable-image.js.map +0 -1
- package/dist/stories/ox-zoomable-image.stories.d.ts +0 -22
- package/dist/stories/ox-zoomable-image.stories.js +0 -27
- package/dist/stories/ox-zoomable-image.stories.js.map +0 -1
- package/src/ox-zoomable-image.ts +0 -169
- package/stories/ox-zoomable-image.stories.ts +0 -40
package/src/ox-pfp.ts
CHANGED
|
@@ -68,7 +68,7 @@ export class OxPfp extends LitElement {
|
|
|
68
68
|
|
|
69
69
|
render() {
|
|
70
70
|
return this.editMode
|
|
71
|
-
? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}
|
|
71
|
+
? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
|
|
72
72
|
<md-icon title="clear" icon="clear" @click=${() => this.edit.clear()}>delete</md-icon>
|
|
73
73
|
<md-icon
|
|
74
74
|
title="save"
|
|
@@ -9,7 +9,8 @@ body {
|
|
|
9
9
|
/* monthly layout */
|
|
10
10
|
--calendar-monthly-ol-margin: var(--margin-default) 0;
|
|
11
11
|
--calendar-monthly-ol-top-border: 2px solid var(--md-sys-color-secondary);
|
|
12
|
-
--calendar-current-
|
|
12
|
+
--calendar-current-month-background-color: var(--md-sys-color-surface-variant);
|
|
13
|
+
--calendar-current-month-color: var(--md-sys-color-on-surface);
|
|
13
14
|
--calendar-monthly-label-align: left;
|
|
14
15
|
--calendar-monthly-label-padding: var(--padding-narrow) 0;
|
|
15
16
|
--calendar-monthly-label-color: var(--md-sys-color-secondary);
|
|
@@ -35,6 +36,7 @@ body {
|
|
|
35
36
|
--calendar-weekly-ol-margin: var(--margin-default) 0;
|
|
36
37
|
--calendar-weekly-ol-top-border: 2px solid var(--md-sys-color-secondary);
|
|
37
38
|
--calendar-current-week-background-color: var(--md-sys-color-surface-variant);
|
|
39
|
+
--calendar-current-week-color: var(--md-sys-color-on-surface);
|
|
38
40
|
--calendar-weekly-label-align: center;
|
|
39
41
|
--calendar-weekly-label-padding: var(--padding-narrow) 0;
|
|
40
42
|
--calendar-weekly-label-color: var(--md-sys-color-secondary);
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
-
export declare class OxZoomableImage extends LitElement {
|
|
3
|
-
static styles: import("lit").CSSResult;
|
|
4
|
-
src?: string;
|
|
5
|
-
zoom: number;
|
|
6
|
-
left: number;
|
|
7
|
-
top: number;
|
|
8
|
-
private dragStart?;
|
|
9
|
-
private dragEndHandler;
|
|
10
|
-
private dragMoveHandler;
|
|
11
|
-
private dragStartHandler;
|
|
12
|
-
private wheelEventHandler;
|
|
13
|
-
private resetHandler;
|
|
14
|
-
connectedCallback(): void;
|
|
15
|
-
disconnectedCallback(): void;
|
|
16
|
-
updated(changes: PropertyValues<this>): void;
|
|
17
|
-
onWheelEvent(e: MouseEvent): void;
|
|
18
|
-
onDragStart(e: Event): false | undefined;
|
|
19
|
-
onDragMove(e: Event): boolean;
|
|
20
|
-
onDragEnd(e: Event): void;
|
|
21
|
-
onReset(e: Event): void;
|
|
22
|
-
}
|
|
@@ -1,155 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { css, LitElement } from 'lit';
|
|
3
|
-
import { customElement, property, state } from 'lit/decorators.js';
|
|
4
|
-
function getPoint(e) {
|
|
5
|
-
var _a;
|
|
6
|
-
if (e.button == 0) {
|
|
7
|
-
return {
|
|
8
|
-
x: e.clientX,
|
|
9
|
-
y: e.clientY
|
|
10
|
-
};
|
|
11
|
-
}
|
|
12
|
-
else if (((_a = e.touches) === null || _a === void 0 ? void 0 : _a.length) == 1) {
|
|
13
|
-
const touch = e.touches[0];
|
|
14
|
-
return {
|
|
15
|
-
x: touch.clientX,
|
|
16
|
-
y: touch.clientY
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
else {
|
|
20
|
-
return;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
let OxZoomableImage = class OxZoomableImage extends LitElement {
|
|
24
|
-
constructor() {
|
|
25
|
-
super(...arguments);
|
|
26
|
-
this.zoom = 1;
|
|
27
|
-
this.left = 0;
|
|
28
|
-
this.top = 0;
|
|
29
|
-
this.dragEndHandler = this.onDragEnd.bind(this);
|
|
30
|
-
this.dragMoveHandler = this.onDragMove.bind(this);
|
|
31
|
-
this.dragStartHandler = this.onDragStart.bind(this);
|
|
32
|
-
this.wheelEventHandler = this.onWheelEvent.bind(this);
|
|
33
|
-
this.resetHandler = this.onReset.bind(this);
|
|
34
|
-
}
|
|
35
|
-
connectedCallback() {
|
|
36
|
-
super.connectedCallback();
|
|
37
|
-
this.addEventListener('mousewheel', this.wheelEventHandler, false);
|
|
38
|
-
this.addEventListener('mousedown', this.dragStartHandler);
|
|
39
|
-
this.addEventListener('touchstart', this.dragStartHandler);
|
|
40
|
-
this.addEventListener('dblclick', this.resetHandler);
|
|
41
|
-
document.addEventListener('mouseup', this.dragEndHandler);
|
|
42
|
-
document.addEventListener('touchend', this.dragEndHandler);
|
|
43
|
-
document.addEventListener('touchcancel', this.dragEndHandler);
|
|
44
|
-
document.addEventListener('mousemove', this.dragMoveHandler);
|
|
45
|
-
document.addEventListener('touchmove', this.dragMoveHandler);
|
|
46
|
-
}
|
|
47
|
-
disconnectedCallback() {
|
|
48
|
-
this.removeEventListener('mousewheel', this.wheelEventHandler, false);
|
|
49
|
-
this.removeEventListener('mousedown', this.dragStartHandler);
|
|
50
|
-
this.removeEventListener('touchstart', this.dragStartHandler);
|
|
51
|
-
this.removeEventListener('dblclick', this.resetHandler);
|
|
52
|
-
document.removeEventListener('mouseup', this.dragEndHandler);
|
|
53
|
-
document.removeEventListener('touchend', this.dragEndHandler);
|
|
54
|
-
document.removeEventListener('touchcancel', this.dragEndHandler);
|
|
55
|
-
document.removeEventListener('mousemove', this.dragMoveHandler);
|
|
56
|
-
document.removeEventListener('touchmove', this.dragMoveHandler);
|
|
57
|
-
super.disconnectedCallback();
|
|
58
|
-
}
|
|
59
|
-
updated(changes) {
|
|
60
|
-
const style = this.style;
|
|
61
|
-
if (changes.has('src') && this.src) {
|
|
62
|
-
style.setProperty('--background-image', `url('${this.src}')`);
|
|
63
|
-
}
|
|
64
|
-
style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`);
|
|
65
|
-
}
|
|
66
|
-
onWheelEvent(e) {
|
|
67
|
-
e.preventDefault();
|
|
68
|
-
var delta = Math.max(-1, Math.min(1, e.deltaY || -e.detail));
|
|
69
|
-
this.zoom *= 1 - delta / 20;
|
|
70
|
-
}
|
|
71
|
-
onDragStart(e) {
|
|
72
|
-
const point = getPoint(e);
|
|
73
|
-
if (point) {
|
|
74
|
-
this.dragStart = point;
|
|
75
|
-
e.stopPropagation();
|
|
76
|
-
return false;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
onDragMove(e) {
|
|
80
|
-
if (!this.dragStart) {
|
|
81
|
-
return false;
|
|
82
|
-
}
|
|
83
|
-
const point = getPoint(e);
|
|
84
|
-
if (!point) {
|
|
85
|
-
return false;
|
|
86
|
-
}
|
|
87
|
-
e.stopPropagation();
|
|
88
|
-
e.preventDefault();
|
|
89
|
-
const dragStart = point;
|
|
90
|
-
var { x, y } = point;
|
|
91
|
-
x -= this.dragStart.x;
|
|
92
|
-
y -= this.dragStart.y;
|
|
93
|
-
this.dragStart = dragStart;
|
|
94
|
-
const { offsetHeight, offsetWidth } = this;
|
|
95
|
-
this.top += (y / offsetHeight) * 100;
|
|
96
|
-
this.left += (x / offsetWidth) * 100;
|
|
97
|
-
return false;
|
|
98
|
-
}
|
|
99
|
-
onDragEnd(e) {
|
|
100
|
-
if (this.dragStart) {
|
|
101
|
-
e.stopPropagation();
|
|
102
|
-
e.preventDefault();
|
|
103
|
-
delete this.dragStart;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
onReset(e) {
|
|
107
|
-
this.zoom = 1;
|
|
108
|
-
this.left = 0;
|
|
109
|
-
this.top = 0;
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
OxZoomableImage.styles = css `
|
|
113
|
-
:host {
|
|
114
|
-
display: block;
|
|
115
|
-
position: relative;
|
|
116
|
-
width: 100%;
|
|
117
|
-
height: 100%;
|
|
118
|
-
overflow: hidden;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
:host::before {
|
|
122
|
-
content: '';
|
|
123
|
-
display: block;
|
|
124
|
-
|
|
125
|
-
position: absolute;
|
|
126
|
-
top: 0;
|
|
127
|
-
right: 0;
|
|
128
|
-
width: 100%;
|
|
129
|
-
height: 100%;
|
|
130
|
-
|
|
131
|
-
background-image: var(
|
|
132
|
-
--background-image,
|
|
133
|
-
linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))
|
|
134
|
-
);
|
|
135
|
-
transform: var(--image-transform, '');
|
|
136
|
-
background-size: 100% 100%;
|
|
137
|
-
}
|
|
138
|
-
`;
|
|
139
|
-
__decorate([
|
|
140
|
-
property({ type: String })
|
|
141
|
-
], OxZoomableImage.prototype, "src", void 0);
|
|
142
|
-
__decorate([
|
|
143
|
-
state()
|
|
144
|
-
], OxZoomableImage.prototype, "zoom", void 0);
|
|
145
|
-
__decorate([
|
|
146
|
-
state()
|
|
147
|
-
], OxZoomableImage.prototype, "left", void 0);
|
|
148
|
-
__decorate([
|
|
149
|
-
state()
|
|
150
|
-
], OxZoomableImage.prototype, "top", void 0);
|
|
151
|
-
OxZoomableImage = __decorate([
|
|
152
|
-
customElement('ox-zoomable-image')
|
|
153
|
-
], OxZoomableImage);
|
|
154
|
-
export { OxZoomableImage };
|
|
155
|
-
//# sourceMappingURL=ox-zoomable-image.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-zoomable-image.js","sourceRoot":"","sources":["../../src/ox-zoomable-image.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nfunction getPoint(e: Event): { x: number; y: number } | undefined {\n if ((e as MouseEvent).button == 0) {\n return {\n x: (e as MouseEvent).clientX,\n y: (e as MouseEvent).clientY\n }\n } else if ((e as TouchEvent).touches?.length == 1) {\n const touch = (e as TouchEvent).touches[0]\n return {\n x: touch.clientX,\n y: touch.clientY\n }\n } else {\n return\n }\n}\n\n@customElement('ox-zoomable-image')\nexport class OxZoomableImage extends LitElement {\n static styles = css`\n :host {\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n overflow: hidden;\n }\n\n :host::before {\n content: '';\n display: block;\n\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n\n background-image: var(\n --background-image,\n linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))\n );\n transform: var(--image-transform, '');\n background-size: 100% 100%;\n }\n `\n\n @property({ type: String }) src?: string\n\n @state() zoom: number = 1\n @state() left: number = 0\n @state() top: number = 0\n\n private dragStart?: { x: number; y: number }\n\n private dragEndHandler = this.onDragEnd.bind(this) as EventListener\n private dragMoveHandler = this.onDragMove.bind(this) as EventListener\n private dragStartHandler = this.onDragStart.bind(this) as EventListener\n private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener\n private resetHandler = this.onReset.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n this.addEventListener('mousedown', this.dragStartHandler)\n this.addEventListener('touchstart', this.dragStartHandler)\n this.addEventListener('dblclick', this.resetHandler)\n\n document.addEventListener('mouseup', this.dragEndHandler)\n document.addEventListener('touchend', this.dragEndHandler)\n document.addEventListener('touchcancel', this.dragEndHandler)\n document.addEventListener('mousemove', this.dragMoveHandler)\n document.addEventListener('touchmove', this.dragMoveHandler)\n }\n\n disconnectedCallback() {\n this.removeEventListener('mousewheel', this.wheelEventHandler, false)\n\n this.removeEventListener('mousedown', this.dragStartHandler!)\n this.removeEventListener('touchstart', this.dragStartHandler!)\n this.removeEventListener('dblclick', this.resetHandler!)\n\n document.removeEventListener('mouseup', this.dragEndHandler!)\n document.removeEventListener('touchend', this.dragEndHandler!)\n document.removeEventListener('touchcancel', this.dragEndHandler!)\n document.removeEventListener('mousemove', this.dragMoveHandler!)\n document.removeEventListener('touchmove', this.dragMoveHandler!)\n\n super.disconnectedCallback()\n }\n\n updated(changes: PropertyValues<this>) {\n const style = this.style\n\n if (changes.has('src') && this.src) {\n style.setProperty('--background-image', `url('${this.src}')`)\n }\n\n style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`)\n }\n\n onWheelEvent(e: MouseEvent) {\n e.preventDefault()\n\n var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n this.zoom *= 1 - delta / 20\n }\n\n onDragStart(e: Event) {\n const point = getPoint(e)\n\n if (point) {\n this.dragStart = point\n e.stopPropagation()\n return false\n }\n }\n\n onDragMove(e: Event) {\n if (!this.dragStart) {\n return false\n }\n\n const point = getPoint(e)\n\n if (!point) {\n return false\n }\n\n e.stopPropagation()\n e.preventDefault()\n\n const dragStart = point\n var { x, y } = point\n\n x -= this.dragStart.x\n y -= this.dragStart.y\n\n this.dragStart = dragStart\n\n const { offsetHeight, offsetWidth } = this\n\n this.top += (y / offsetHeight) * 100\n this.left += (x / offsetWidth) * 100\n\n return false\n }\n\n onDragEnd(e: Event) {\n if (this.dragStart) {\n e.stopPropagation()\n e.preventDefault()\n\n delete this.dragStart\n }\n }\n\n onReset(e: Event) {\n this.zoom = 1\n this.left = 0\n this.top = 0\n }\n}\n"]}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import '@operato/i18n';
|
|
2
|
-
import '../src/ox-zoomable-image.js';
|
|
3
|
-
import { TemplateResult } from 'lit';
|
|
4
|
-
declare const _default: {
|
|
5
|
-
title: string;
|
|
6
|
-
component: string;
|
|
7
|
-
argTypes: {
|
|
8
|
-
src: {
|
|
9
|
-
control: string;
|
|
10
|
-
};
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
export default _default;
|
|
14
|
-
interface Story<T> {
|
|
15
|
-
(args: T): TemplateResult;
|
|
16
|
-
args?: Partial<T>;
|
|
17
|
-
argTypes?: Record<string, unknown>;
|
|
18
|
-
}
|
|
19
|
-
interface ArgTypes {
|
|
20
|
-
src?: string;
|
|
21
|
-
}
|
|
22
|
-
export declare const Regular: Story<ArgTypes>;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import '@operato/i18n';
|
|
2
|
-
import '../src/ox-zoomable-image.js';
|
|
3
|
-
import { html } from 'lit';
|
|
4
|
-
export default {
|
|
5
|
-
title: 'ox-zoomable-image',
|
|
6
|
-
component: 'ox-zoomable-image',
|
|
7
|
-
argTypes: {
|
|
8
|
-
src: { control: 'text' }
|
|
9
|
-
}
|
|
10
|
-
};
|
|
11
|
-
const Template = ({ src = '' }) => html `
|
|
12
|
-
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
13
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
|
14
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
|
15
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
16
|
-
<link href="/themes/grist-theme.css" rel="stylesheet" />
|
|
17
|
-
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
18
|
-
|
|
19
|
-
<div style="height: 300px">
|
|
20
|
-
<ox-zoomable-image src=${src} style="width: 300px; height: 300px"> </ox-zoomable-image>
|
|
21
|
-
</div>
|
|
22
|
-
`;
|
|
23
|
-
export const Regular = Template.bind({});
|
|
24
|
-
Regular.args = {
|
|
25
|
-
src: '/assets/sample-image.png'
|
|
26
|
-
};
|
|
27
|
-
//# sourceMappingURL=ox-zoomable-image.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ox-zoomable-image.stories.js","sourceRoot":"","sources":["../../stories/ox-zoomable-image.stories.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AACtB,OAAO,6BAA6B,CAAA;AAEpC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,mBAAmB;IAC9B,QAAQ,EAAE;QACR,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KACzB;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,GAAG,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;6BASrC,GAAG;;CAE/B,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,GAAG,EAAE,0BAA0B;CAChC,CAAA","sourcesContent":["import '@operato/i18n'\nimport '../src/ox-zoomable-image.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-zoomable-image',\n component: 'ox-zoomable-image',\n argTypes: {\n src: { control: 'text' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n src?: string\n}\n\nconst Template: Story<ArgTypes> = ({ src = '' }: ArgTypes) => html`\n <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/light.css\" rel=\"stylesheet\" />\n <link href=\"/themes/dark.css\" rel=\"stylesheet\" />\n <link href=\"/themes/spacing.css\" rel=\"stylesheet\" />\n <link href=\"/themes/grist-theme.css\" rel=\"stylesheet\" />\n <link href=\"/themes/form-theme.css\" rel=\"stylesheet\" />\n\n <div style=\"height: 300px\">\n <ox-zoomable-image src=${src} style=\"width: 300px; height: 300px\"> </ox-zoomable-image>\n </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n src: '/assets/sample-image.png'\n}\n"]}
|
package/src/ox-zoomable-image.ts
DELETED
|
@@ -1,169 +0,0 @@
|
|
|
1
|
-
import { css, LitElement, PropertyValues } from 'lit'
|
|
2
|
-
import { customElement, property, state } from 'lit/decorators.js'
|
|
3
|
-
|
|
4
|
-
function getPoint(e: Event): { x: number; y: number } | undefined {
|
|
5
|
-
if ((e as MouseEvent).button == 0) {
|
|
6
|
-
return {
|
|
7
|
-
x: (e as MouseEvent).clientX,
|
|
8
|
-
y: (e as MouseEvent).clientY
|
|
9
|
-
}
|
|
10
|
-
} else if ((e as TouchEvent).touches?.length == 1) {
|
|
11
|
-
const touch = (e as TouchEvent).touches[0]
|
|
12
|
-
return {
|
|
13
|
-
x: touch.clientX,
|
|
14
|
-
y: touch.clientY
|
|
15
|
-
}
|
|
16
|
-
} else {
|
|
17
|
-
return
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
@customElement('ox-zoomable-image')
|
|
22
|
-
export class OxZoomableImage extends LitElement {
|
|
23
|
-
static styles = css`
|
|
24
|
-
:host {
|
|
25
|
-
display: block;
|
|
26
|
-
position: relative;
|
|
27
|
-
width: 100%;
|
|
28
|
-
height: 100%;
|
|
29
|
-
overflow: hidden;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
:host::before {
|
|
33
|
-
content: '';
|
|
34
|
-
display: block;
|
|
35
|
-
|
|
36
|
-
position: absolute;
|
|
37
|
-
top: 0;
|
|
38
|
-
right: 0;
|
|
39
|
-
width: 100%;
|
|
40
|
-
height: 100%;
|
|
41
|
-
|
|
42
|
-
background-image: var(
|
|
43
|
-
--background-image,
|
|
44
|
-
linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))
|
|
45
|
-
);
|
|
46
|
-
transform: var(--image-transform, '');
|
|
47
|
-
background-size: 100% 100%;
|
|
48
|
-
}
|
|
49
|
-
`
|
|
50
|
-
|
|
51
|
-
@property({ type: String }) src?: string
|
|
52
|
-
|
|
53
|
-
@state() zoom: number = 1
|
|
54
|
-
@state() left: number = 0
|
|
55
|
-
@state() top: number = 0
|
|
56
|
-
|
|
57
|
-
private dragStart?: { x: number; y: number }
|
|
58
|
-
|
|
59
|
-
private dragEndHandler = this.onDragEnd.bind(this) as EventListener
|
|
60
|
-
private dragMoveHandler = this.onDragMove.bind(this) as EventListener
|
|
61
|
-
private dragStartHandler = this.onDragStart.bind(this) as EventListener
|
|
62
|
-
private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener
|
|
63
|
-
private resetHandler = this.onReset.bind(this) as EventListener
|
|
64
|
-
|
|
65
|
-
connectedCallback(): void {
|
|
66
|
-
super.connectedCallback()
|
|
67
|
-
|
|
68
|
-
this.addEventListener('mousewheel', this.wheelEventHandler, false)
|
|
69
|
-
|
|
70
|
-
this.addEventListener('mousedown', this.dragStartHandler)
|
|
71
|
-
this.addEventListener('touchstart', this.dragStartHandler)
|
|
72
|
-
this.addEventListener('dblclick', this.resetHandler)
|
|
73
|
-
|
|
74
|
-
document.addEventListener('mouseup', this.dragEndHandler)
|
|
75
|
-
document.addEventListener('touchend', this.dragEndHandler)
|
|
76
|
-
document.addEventListener('touchcancel', this.dragEndHandler)
|
|
77
|
-
document.addEventListener('mousemove', this.dragMoveHandler)
|
|
78
|
-
document.addEventListener('touchmove', this.dragMoveHandler)
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
disconnectedCallback() {
|
|
82
|
-
this.removeEventListener('mousewheel', this.wheelEventHandler, false)
|
|
83
|
-
|
|
84
|
-
this.removeEventListener('mousedown', this.dragStartHandler!)
|
|
85
|
-
this.removeEventListener('touchstart', this.dragStartHandler!)
|
|
86
|
-
this.removeEventListener('dblclick', this.resetHandler!)
|
|
87
|
-
|
|
88
|
-
document.removeEventListener('mouseup', this.dragEndHandler!)
|
|
89
|
-
document.removeEventListener('touchend', this.dragEndHandler!)
|
|
90
|
-
document.removeEventListener('touchcancel', this.dragEndHandler!)
|
|
91
|
-
document.removeEventListener('mousemove', this.dragMoveHandler!)
|
|
92
|
-
document.removeEventListener('touchmove', this.dragMoveHandler!)
|
|
93
|
-
|
|
94
|
-
super.disconnectedCallback()
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
updated(changes: PropertyValues<this>) {
|
|
98
|
-
const style = this.style
|
|
99
|
-
|
|
100
|
-
if (changes.has('src') && this.src) {
|
|
101
|
-
style.setProperty('--background-image', `url('${this.src}')`)
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
style.setProperty('--image-transform', `translate(${this.left}%, ${this.top}%) scale(${this.zoom}, ${this.zoom})`)
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
onWheelEvent(e: MouseEvent) {
|
|
108
|
-
e.preventDefault()
|
|
109
|
-
|
|
110
|
-
var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
|
|
111
|
-
|
|
112
|
-
this.zoom *= 1 - delta / 20
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
onDragStart(e: Event) {
|
|
116
|
-
const point = getPoint(e)
|
|
117
|
-
|
|
118
|
-
if (point) {
|
|
119
|
-
this.dragStart = point
|
|
120
|
-
e.stopPropagation()
|
|
121
|
-
return false
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
onDragMove(e: Event) {
|
|
126
|
-
if (!this.dragStart) {
|
|
127
|
-
return false
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
const point = getPoint(e)
|
|
131
|
-
|
|
132
|
-
if (!point) {
|
|
133
|
-
return false
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
e.stopPropagation()
|
|
137
|
-
e.preventDefault()
|
|
138
|
-
|
|
139
|
-
const dragStart = point
|
|
140
|
-
var { x, y } = point
|
|
141
|
-
|
|
142
|
-
x -= this.dragStart.x
|
|
143
|
-
y -= this.dragStart.y
|
|
144
|
-
|
|
145
|
-
this.dragStart = dragStart
|
|
146
|
-
|
|
147
|
-
const { offsetHeight, offsetWidth } = this
|
|
148
|
-
|
|
149
|
-
this.top += (y / offsetHeight) * 100
|
|
150
|
-
this.left += (x / offsetWidth) * 100
|
|
151
|
-
|
|
152
|
-
return false
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
onDragEnd(e: Event) {
|
|
156
|
-
if (this.dragStart) {
|
|
157
|
-
e.stopPropagation()
|
|
158
|
-
e.preventDefault()
|
|
159
|
-
|
|
160
|
-
delete this.dragStart
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
onReset(e: Event) {
|
|
165
|
-
this.zoom = 1
|
|
166
|
-
this.left = 0
|
|
167
|
-
this.top = 0
|
|
168
|
-
}
|
|
169
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import '@operato/i18n'
|
|
2
|
-
import '../src/ox-zoomable-image.js'
|
|
3
|
-
|
|
4
|
-
import { html, TemplateResult } from 'lit'
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: 'ox-zoomable-image',
|
|
8
|
-
component: 'ox-zoomable-image',
|
|
9
|
-
argTypes: {
|
|
10
|
-
src: { control: 'text' }
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
interface Story<T> {
|
|
15
|
-
(args: T): TemplateResult
|
|
16
|
-
args?: Partial<T>
|
|
17
|
-
argTypes?: Record<string, unknown>
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
interface ArgTypes {
|
|
21
|
-
src?: string
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const Template: Story<ArgTypes> = ({ src = '' }: ArgTypes) => html`
|
|
25
|
-
<link href="/themes/app-theme.css" rel="stylesheet" />
|
|
26
|
-
<link href="/themes/light.css" rel="stylesheet" />
|
|
27
|
-
<link href="/themes/dark.css" rel="stylesheet" />
|
|
28
|
-
<link href="/themes/spacing.css" rel="stylesheet" />
|
|
29
|
-
<link href="/themes/grist-theme.css" rel="stylesheet" />
|
|
30
|
-
<link href="/themes/form-theme.css" rel="stylesheet" />
|
|
31
|
-
|
|
32
|
-
<div style="height: 300px">
|
|
33
|
-
<ox-zoomable-image src=${src} style="width: 300px; height: 300px"> </ox-zoomable-image>
|
|
34
|
-
</div>
|
|
35
|
-
`
|
|
36
|
-
|
|
37
|
-
export const Regular = Template.bind({})
|
|
38
|
-
Regular.args = {
|
|
39
|
-
src: '/assets/sample-image.png'
|
|
40
|
-
}
|