@operato/contact 2.0.0-alpha.99 → 2.0.0-beta.4
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 +154 -0
- package/assets/sample-image.png +0 -0
- package/dist/src/ox-contact-view.js +8 -5
- package/dist/src/ox-contact-view.js.map +1 -1
- package/dist/src/ox-contact.js +1 -1
- package/dist/src/ox-contact.js.map +1 -1
- package/dist/src/ox-pfp-edit.d.ts +1 -0
- package/dist/src/ox-pfp-edit.js +5 -1
- package/dist/src/ox-pfp-edit.js.map +1 -1
- package/dist/src/ox-pfp-view.js +7 -4
- package/dist/src/ox-pfp-view.js.map +1 -1
- package/dist/src/ox-zoomable-image.d.ts +22 -0
- package/dist/src/ox-zoomable-image.js +155 -0
- package/dist/src/ox-zoomable-image.js.map +1 -0
- package/dist/stories/ox-zoomable-image.stories.d.ts +21 -0
- package/dist/stories/ox-zoomable-image.stories.js +19 -0
- package/dist/stories/ox-zoomable-image.stories.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +9 -5
- package/src/ox-contact-view.ts +8 -5
- package/src/ox-contact.ts +1 -1
- package/src/ox-pfp-edit.ts +6 -1
- package/src/ox-pfp-view.ts +7 -4
- package/src/ox-zoomable-image.ts +169 -0
- package/stories/ox-zoomable-image.stories.ts +32 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,160 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [2.0.0-beta.4](https://github.com/hatiolab/operato/compare/v2.0.0-beta.3...v2.0.0-beta.4) (2024-06-04)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @operato/contact
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [2.0.0-beta.0](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.158...v2.0.0-beta.0) (2024-06-01)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @operato/contact
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [2.0.0-alpha.157](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.156...v2.0.0-alpha.157) (2024-06-01)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @operato/contact
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [2.0.0-alpha.154](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.153...v2.0.0-alpha.154) (2024-06-01)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @operato/contact
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
## [2.0.0-alpha.150](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.149...v2.0.0-alpha.150) (2024-05-30)
|
|
39
|
+
|
|
40
|
+
**Note:** Version bump only for package @operato/contact
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
## [2.0.0-alpha.149](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.148...v2.0.0-alpha.149) (2024-05-30)
|
|
47
|
+
|
|
48
|
+
**Note:** Version bump only for package @operato/contact
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
## [2.0.0-alpha.148](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.147...v2.0.0-alpha.148) (2024-05-30)
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
### :rocket: New Features
|
|
58
|
+
|
|
59
|
+
* md3 ([55b7496](https://github.com/hatiolab/operato/commit/55b7496ea46a6b65ac6ab71bc1be7c89d1ba91e5))
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
## [2.0.0-alpha.145](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.144...v2.0.0-alpha.145) (2024-05-28)
|
|
64
|
+
|
|
65
|
+
**Note:** Version bump only for package @operato/contact
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
## [2.0.0-alpha.142](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.141...v2.0.0-alpha.142) (2024-05-21)
|
|
72
|
+
|
|
73
|
+
**Note:** Version bump only for package @operato/contact
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
## [2.0.0-alpha.134](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.133...v2.0.0-alpha.134) (2024-05-13)
|
|
80
|
+
|
|
81
|
+
**Note:** Version bump only for package @operato/contact
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
## [2.0.0-alpha.129](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.128...v2.0.0-alpha.129) (2024-05-08)
|
|
88
|
+
|
|
89
|
+
**Note:** Version bump only for package @operato/contact
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
## [2.0.0-alpha.124](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.123...v2.0.0-alpha.124) (2024-05-08)
|
|
96
|
+
|
|
97
|
+
**Note:** Version bump only for package @operato/contact
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
## [2.0.0-alpha.123](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.122...v2.0.0-alpha.123) (2024-05-07)
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
### :rocket: New Features
|
|
107
|
+
|
|
108
|
+
* ox-zoomable-image ([dbeb528](https://github.com/hatiolab/operato/commit/dbeb528ca4d2afcef0ac6b365bb3c02b286211f9))
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
## [2.0.0-alpha.122](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.121...v2.0.0-alpha.122) (2024-05-06)
|
|
113
|
+
|
|
114
|
+
**Note:** Version bump only for package @operato/contact
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
## [2.0.0-alpha.118](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.117...v2.0.0-alpha.118) (2024-05-04)
|
|
121
|
+
|
|
122
|
+
**Note:** Version bump only for package @operato/contact
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
## [2.0.0-alpha.111](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.110...v2.0.0-alpha.111) (2024-05-02)
|
|
129
|
+
|
|
130
|
+
**Note:** Version bump only for package @operato/contact
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
## [2.0.0-alpha.110](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.109...v2.0.0-alpha.110) (2024-05-02)
|
|
137
|
+
|
|
138
|
+
**Note:** Version bump only for package @operato/contact
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
## [2.0.0-alpha.102](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.101...v2.0.0-alpha.102) (2024-04-22)
|
|
145
|
+
|
|
146
|
+
**Note:** Version bump only for package @operato/contact
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
## [2.0.0-alpha.100](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.99...v2.0.0-alpha.100) (2024-04-21)
|
|
153
|
+
|
|
154
|
+
**Note:** Version bump only for package @operato/contact
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|
|
6
160
|
## [2.0.0-alpha.99](https://github.com/hatiolab/operato/compare/v2.0.0-alpha.98...v2.0.0-alpha.99) (2024-04-21)
|
|
7
161
|
|
|
8
162
|
**Note:** Version bump only for package @operato/contact
|
|
Binary file
|
|
@@ -89,14 +89,17 @@ OxContactView.styles = css `
|
|
|
89
89
|
width: 100%;
|
|
90
90
|
height: 100%;
|
|
91
91
|
opacity: 0.15;
|
|
92
|
-
background-image: linear-gradient(
|
|
92
|
+
background-image: linear-gradient(
|
|
93
|
+
var(--md-sys-color-on-primary-container, gray),
|
|
94
|
+
var(--md-sys-color-on-primary-container, gray)
|
|
95
|
+
);
|
|
93
96
|
z-index: -1;
|
|
94
97
|
}
|
|
95
98
|
|
|
96
99
|
[data-item='label'] {
|
|
97
100
|
width: 80px;
|
|
98
101
|
text-align: right;
|
|
99
|
-
color: var(--
|
|
102
|
+
color: var(--md-sys-color-on-secondary-container, #017e7f);
|
|
100
103
|
}
|
|
101
104
|
|
|
102
105
|
[data-item='value'] {
|
|
@@ -149,14 +152,14 @@ OxContactView.styles = css `
|
|
|
149
152
|
top: 3px;
|
|
150
153
|
margin-right: 3px;
|
|
151
154
|
opacity: 0.5;
|
|
152
|
-
color: var(--
|
|
155
|
+
color: var(--md-sys-color-on-primary-container, #333);
|
|
153
156
|
}
|
|
154
157
|
[name-content] div {
|
|
155
|
-
color: var(--
|
|
158
|
+
color: var(--md-sys-color-on-primary-container, #333);
|
|
156
159
|
font-size: 1.2em;
|
|
157
160
|
}
|
|
158
161
|
[name-content] [company] {
|
|
159
|
-
color: var(--
|
|
162
|
+
color: var(--md-sys-color-on-secondary-container, #666);
|
|
160
163
|
font-weight: normal;
|
|
161
164
|
font-size: 0.9em;
|
|
162
165
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-contact-view.js","sourceRoot":"","sources":["../../src/ox-contact-view.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;
|
|
1
|
+
{"version":3,"file":"ox-contact-view.js","sourceRoot":"","sources":["../../src/ox-contact-view.ts"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAIpD,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAmHuB,YAAO,GAAY,EAAE,CAAA;IAoDnD,CAAC;IAlDC,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QACvE,IAAI,MAAM,GAAsC,EAAE,CAAA;QAElD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,EAAE,CAAC;gBACjC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,IAAc,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;YACxC,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAA;;gCAEiB,OAAO,UAAU,IAAI;;;;sCAIf,IAAI;;;sCAGJ,OAAO;;;;;QAKrC,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;aAC9C,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;aACzB,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;aAC1C,GAAG,CACF,KAAK,CAAC,EAAE,CACN,IAAI,CAAA,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;;gBAE/B,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACb,KAAK,CAAC,GAAG,CACT,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;gDAC0B,IAAI,CAAC,KAAK;8CACZ,IAAI,CAAC,KAAK;yBAC/B,CACV;mBACI,CACV;;;;eAIM,IAAI,IAAI,EAAE;;KAEpB,CAAA;IACH,CAAC;;AArKM,oBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgHlB,AAhHY,CAgHZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAsB;AAnHtC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CAuKzB","sourcesContent":["import './ox-pfp-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { Contact, ContactField, ContactItem } from './ox-contact'\n\n@customElement('ox-contact-view')\nexport class OxContactView extends LitElement {\n static styles = css`\n :host {\n display: block;\n --md-icon-size: 16px;\n }\n\n :host > div {\n padding: var(--padding-default, 10px);\n display: block;\n border-bottom: var(--border-dark-color, 1px solid rgba(0, 0, 0, 0.1));\n font-size: 0.9em;\n text-transform: capitalize;\n }\n\n :host > div > div {\n padding: 4px 0;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: row;\n gap: 10px;\n }\n\n :host > div > div:hover {\n position: relative;\n }\n\n :host > div > div:hover::before {\n content: '';\n display: block;\n position: absolute;\n text-align: left;\n line-height: 24px;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n opacity: 0.15;\n background-image: linear-gradient(\n var(--md-sys-color-on-primary-container, gray),\n var(--md-sys-color-on-primary-container, gray)\n );\n z-index: -1;\n }\n\n [data-item='label'] {\n width: 80px;\n text-align: right;\n color: var(--md-sys-color-on-secondary-container, #017e7f);\n }\n\n [data-item='value'] {\n flex: 1;\n text-transform: none;\n }\n\n :host > div[name] {\n display: flex;\n align-items: center;\n gap: 15px;\n font-weight: bold;\n font-size: 1.4em;\n }\n\n :host ox-pfp-view {\n display: inline-block;\n height: 75px;\n }\n\n :host > div[name] > div[name-content] {\n flex: 1;\n\n display: flex;\n flex-direction: column;\n }\n div[data-type='email'] md-icon::before {\n content: 'mail_outline';\n }\n div[data-type='phone'] md-icon::before {\n content: 'phone';\n }\n div[data-type='address'] md-icon::before {\n content: 'place';\n }\n div[data-type='company'] md-icon::before {\n content: 'business';\n }\n div[data-type='etc'] md-icon::before {\n content: 'feed';\n }\n div[note] md-icon::before {\n content: 'subject';\n }\n :host > div > [name-content] {\n gap: 3px;\n }\n div md-icon {\n position: relative;\n top: 3px;\n margin-right: 3px;\n opacity: 0.5;\n color: var(--md-sys-color-on-primary-container, #333);\n }\n [name-content] div {\n color: var(--md-sys-color-on-primary-container, #333);\n font-size: 1.2em;\n }\n [name-content] [company] {\n color: var(--md-sys-color-on-secondary-container, #666);\n font-weight: normal;\n font-size: 0.9em;\n }\n `\n\n @property({ type: Object }) contact: Contact = {}\n\n render() {\n const { profile, items = [], name, company, note } = this.contact || {}\n var sorted: { [type: string]: ContactItem[] } = {}\n\n items.forEach(item => {\n if (!sorted[item.type as string]) {\n sorted[item.type] = [item]\n } else {\n sorted[item.type as string].push(item)\n }\n })\n\n return html`\n <div name>\n <ox-pfp-view .profile=${profile} .name=${name}></ox-pfp-view>\n\n <div name-content>\n <div>\n <span data-item=\"value\">${name}</span>\n </div>\n <div company>\n <span data-item=\"value\">${company}</span>\n </div>\n </div>\n </div>\n\n ${['email', 'phone', 'address', 'company', 'etc']\n .map(type => sorted[type])\n .filter(items => items && items.length > 0)\n .map(\n items =>\n html`<div data-type=${items[0].type}>\n <md-icon></md-icon>\n ${items[0].type}\n ${items.map(\n item =>\n html`<div>\n <label data-item=\"label\"> ${item.label}</label>\n <span data-item=\"value\">${item.value}</span>\n </div>`\n )}\n </div>`\n )}\n <div note>\n <md-icon></md-icon>\n note\n <div>${note || ''}</div>\n </div>\n `\n }\n}\n"]}
|
package/dist/src/ox-contact.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-contact.js","sourceRoot":"","sources":["../../src/ox-contact.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAKvD,MAAM,CAAN,IAAY,YAUX;AAVD,WAAY,YAAY;IACtB,sCAAsB,CAAA;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;IACzB,qCAAqB,CAAA;AACvB,CAAC,EAVW,YAAY,KAAZ,YAAY,QAUvB;AAED,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,iCAAiB,CAAA;AACnB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAmBM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAkBuB,YAAO,GAAY,EAAE,CAAA;QAExC,aAAQ,GAAa,KAAK,CAAA;IA6CrC,CAAC;IAzCC,MAAM;QACJ,OAAO,IAAI,CAAA;;QAGP,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;yBACS,IAAI,CAAC,OAAO;6BACR,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;2BAC/B,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAA;gBACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;YACvB,CAAC;gCACiB;YACtB,CAAC,CAAC,IAAI,CAAA,8BAA8B,IAAI,CAAC,OAAO,sBACpD;;;;UAKI,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;kDACR,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;iCAG1C,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;6CACd,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;iCAEtC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;2CACd,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;eAEvD;YACH,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;2CAClB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;eAG3D;;WAEG,CAAA;IACT,CAAC;;AA/DM,gBAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;KAYF;CACF,AAfY,CAeZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAExC;IAAR,KAAK,EAAE;2CAA2B;AAET;IAAzB,KAAK,CAAC,iBAAiB,CAAC;yCAAuB;AAtBrC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAiErB","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-contact-edit.js'\nimport './ox-contact-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { ButtonContainerStyles } from '@operato/styles'\n\nimport { OxContactEdit } from './ox-contact-edit.js'\nimport { Profile } from './ox-pfp-view.js'\n\nexport enum ContactField {\n JobTitle = 'job-title',\n Phone = 'phone',\n Address = 'address',\n Email = 'email',\n Birthday = 'birthday',\n Profile = 'profile',\n Picture = 'picture',\n Department = 'department',\n Homepage = 'homepage'\n}\n\nexport enum ContactLabel {\n home = 'home',\n work = 'work',\n other = 'other',\n mobile = 'mobile'\n}\n\nexport type ContactItem = {\n id?: string\n type: ContactField\n label: string\n value: string\n}\n\nexport type Contact = {\n id?: string\n profile?: Profile\n name?: string\n company?: string\n items?: ContactItem[]\n note?: string\n}\n\n@customElement('ox-contact')\nexport class OxContact extends LitElement {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--
|
|
1
|
+
{"version":3,"file":"ox-contact.js","sourceRoot":"","sources":["../../src/ox-contact.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAKvD,MAAM,CAAN,IAAY,YAUX;AAVD,WAAY,YAAY;IACtB,sCAAsB,CAAA;IACtB,+BAAe,CAAA;IACf,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf,qCAAqB,CAAA;IACrB,mCAAmB,CAAA;IACnB,mCAAmB,CAAA;IACnB,yCAAyB,CAAA;IACzB,qCAAqB,CAAA;AACvB,CAAC,EAVW,YAAY,KAAZ,YAAY,QAUvB;AAED,MAAM,CAAN,IAAY,YAKX;AALD,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,+BAAe,CAAA;IACf,iCAAiB,CAAA;AACnB,CAAC,EALW,YAAY,KAAZ,YAAY,QAKvB;AAmBM,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAkBuB,YAAO,GAAY,EAAE,CAAA;QAExC,aAAQ,GAAa,KAAK,CAAA;IA6CrC,CAAC;IAzCC,MAAM;QACJ,OAAO,IAAI,CAAA;;QAGP,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;yBACS,IAAI,CAAC,OAAO;6BACR,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;2BAC/B,CAAC,CAAc,EAAE,EAAE;gBAC9B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,MAAM,CAAA;gBACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;YACvB,CAAC;gCACiB;YACtB,CAAC,CAAC,IAAI,CAAA,8BAA8B,IAAI,CAAC,OAAO,sBACpD;;;;UAKI,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;kDACR,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;;;iCAG1C,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE;6CACd,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC;;iCAEtC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;2CACd,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;eAEvD;YACH,CAAC,CAAC,IAAI,CAAA;iCACe,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;2CAClB,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;;eAG3D;;WAEG,CAAA;IACT,CAAC;;AA/DM,gBAAM,GAAG;IACd,qBAAqB;IACrB,GAAG,CAAA;;;;;;;;;;;;KAYF;CACF,AAfY,CAeZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAExC;IAAR,KAAK,EAAE;2CAA2B;AAET;IAAzB,KAAK,CAAC,iBAAiB,CAAC;yCAAuB;AAtBrC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAiErB","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-contact-edit.js'\nimport './ox-contact-view.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\nimport { ButtonContainerStyles } from '@operato/styles'\n\nimport { OxContactEdit } from './ox-contact-edit.js'\nimport { Profile } from './ox-pfp-view.js'\n\nexport enum ContactField {\n JobTitle = 'job-title',\n Phone = 'phone',\n Address = 'address',\n Email = 'email',\n Birthday = 'birthday',\n Profile = 'profile',\n Picture = 'picture',\n Department = 'department',\n Homepage = 'homepage'\n}\n\nexport enum ContactLabel {\n home = 'home',\n work = 'work',\n other = 'other',\n mobile = 'mobile'\n}\n\nexport type ContactItem = {\n id?: string\n type: ContactField\n label: string\n value: string\n}\n\nexport type Contact = {\n id?: string\n profile?: Profile\n name?: string\n company?: string\n items?: ContactItem[]\n note?: string\n}\n\n@customElement('ox-contact')\nexport class OxContact extends LitElement {\n static styles = [\n ButtonContainerStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n background-color: var(--md-sys-color-background);\n }\n\n ox-contact-view,\n ox-contact-edit {\n padding: var(--pading-default);\n flex: 1;\n }\n `\n ]\n\n @property({ type: Object }) contact: Contact = {}\n\n @state() editMode?: boolean = false\n\n @query('ox-contact-edit') editor!: OxContactEdit\n\n render() {\n return html` \n <div container>\n ${\n this.editMode\n ? html`<ox-contact-edit\n .contact=${this.contact}\n @edit-cancel=${() => (this.editMode = false)}\n @edit-done=${(e: CustomEvent) => {\n this.contact = e.detail\n this.editMode = false\n }}\n ></ox-contact-edit>`\n : html` <ox-contact-view .contact=${this.contact}></ox-contact-view> `\n }\n </div>\n \n <div class=\"button-container\" style=\"margin-left: unset;\">\n ${\n this.editMode\n ? html`\n <button @click=${() => this.editor.reset()}>\n <md-icon>restart_alt</md-icon>${i18next.t('button.reset')}\n </button>\n <div filler></div>\n <button @click=${() => this.editor.cancel()}>\n <md-icon>cancel</md-icon>${i18next.t('button.cancel')}\n </button>\n <button @click=${() => this.editor.save()}>\n <md-icon>done</md-icon>${i18next.t('button.confirm')}\n </button>\n `\n : html`\n <button @click=${() => (this.editMode = true)}>\n <md-icon>edit</md-icon>${i18next.t('button.edit')}\n </button>\n `\n }\n </div>\n </div>`\n }\n}\n"]}
|
package/dist/src/ox-pfp-edit.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
+
import '@material/web/icon/icon.js';
|
|
2
3
|
import { html, css, LitElement } from 'lit';
|
|
3
4
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
4
5
|
import { FileDropHelper } from '@operato/utils';
|
|
@@ -241,7 +242,10 @@ OxPfpEdit.styles = css `
|
|
|
241
242
|
background-repeat: no-repeat;
|
|
242
243
|
background-image: var(
|
|
243
244
|
--background-image,
|
|
244
|
-
linear-gradient(
|
|
245
|
+
linear-gradient(
|
|
246
|
+
var(--md-sys-color-on-primary-container, lightgray),
|
|
247
|
+
var(--md-sys-color-on-primary-container, lightgray)
|
|
248
|
+
)
|
|
245
249
|
);
|
|
246
250
|
transform: var(--image-transform, '');
|
|
247
251
|
background-size: 100% 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\nimport { FileDropHelper } from '@operato/utils'\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-pfp-edit')\nexport class OxPfpEdit extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n overflow: hidden;\n }\n\n [content] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n\n [circle] {\n width: 90%;\n height: 90%;\n position: relative;\n }\n\n [circle]::after {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n box-shadow: 0 0 0 1000px lightgray;\n border-radius: 50%;\n opacity: 0.9;\n }\n\n [circle]::before {\n content: '';\n display: block;\n position: absolute;\n text-align: left;\n line-height: 24px;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background-repeat: no-repeat;\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 [monogram] {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 1px solid darkgray;\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: gray;\n color: white;\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n [monogram] div {\n flex: 1;\n text-transform: uppercase;\n font-size: 2em;\n font-family: system-ui;\n text-align: center;\n vertical-align: center;\n }\n\n [file-load] {\n position: absolute;\n left: 0;\n top: 0;\n\n display: flex;\n place-content: center;\n }\n\n [file-load]:hover {\n opacity: 50%;\n }\n\n #input-file {\n display: none;\n }\n\n label {\n display: flex;\n align-content: center;\n }\n\n md-icon {\n align-self: center;\n\n color: var(--file-uploader-icon-color, black);\n --md-icon-size: var(--file-uploader-icon-size, 20px);\n }\n `\n\n @property({ type: Object }) profile: Profile = {}\n @property({ type: String }) name?: string\n\n @query('[circle]') circle!: HTMLDivElement\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 dropFileHandler = this.onDropFile.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n FileDropHelper.set(this)\n\n this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n this.addEventListener('mousedown', this.dragStartHandler)\n this.addEventListener('touchstart', this.dragStartHandler)\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 this.addEventListener('file-drop', this.dropFileHandler)\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\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 this.removeEventListener('file-drop', this.dropFileHandler)\n\n super.disconnectedCallback()\n }\n\n render() {\n return html`\n <div content>\n ${this.profile?.picture\n ? html`<div circle></div>`\n : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n </div>\n\n <div file-load>\n <label>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=\"image/*\"\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this.onChangeFile(e)}\n />\n <md-icon title=\"select image\">image_search</md-icon>\n </label>\n </div>\n\n <slot></slot>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n if (picture) {\n const style = this.style\n\n style.setProperty('--background-image', `url('${picture}')`)\n style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n }\n }\n\n get value() {\n return this.profile\n }\n\n set value(value: Profile) {\n this.profile = value\n }\n\n onWheelEvent(e: Event) {\n e.preventDefault()\n\n var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n this.profile = {\n top,\n left,\n zoom: zoom * (1 - delta / 20),\n picture,\n file\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.profile\n })\n )\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 { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n const { offsetHeight, offsetWidth } = this\n\n this.profile = {\n top: top + (y / offsetHeight) * 100,\n left: left + (x / offsetWidth) * 100,\n zoom,\n picture,\n file\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.profile\n })\n )\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 onDropFile(e: Event) {\n const dropFiles = (e as CustomEvent).detail\n const imageFile = dropFiles[0]\n if (!imageFile) {\n return\n }\n\n const picture = URL.createObjectURL(imageFile)\n\n this.profile = {\n left: 0,\n top: 0,\n zoom: 1,\n picture,\n file: imageFile\n }\n }\n\n onChangeFile(e: Event) {\n const fileInput = e.currentTarget as HTMLInputElement\n const imageFile = [...Array.from(fileInput.files as FileList)][0]\n if (!imageFile) {\n return\n }\n\n const picture = URL.createObjectURL(imageFile)\n\n this.profile = {\n left: 0,\n top: 0,\n zoom: 1,\n picture,\n file: imageFile\n }\n\n fileInput.files = null\n }\n\n fit() {\n this.profile = {\n ...this.profile,\n left: 0,\n top: 0,\n zoom: 1\n }\n }\n\n clear() {\n this.profile = {}\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"ox-pfp-edit.js","sourceRoot":"","sources":["../../src/ox-pfp-edit.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { Profile } from './ox-pfp-view'\nimport { FileDropHelper } from '@operato/utils'\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-pfp-edit')\nexport class OxPfpEdit extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n overflow: hidden;\n }\n\n [content] {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n }\n\n [circle] {\n width: 90%;\n height: 90%;\n position: relative;\n }\n\n [circle]::after {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n box-shadow: 0 0 0 1000px lightgray;\n border-radius: 50%;\n opacity: 0.9;\n }\n\n [circle]::before {\n content: '';\n display: block;\n position: absolute;\n text-align: left;\n line-height: 24px;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background-repeat: no-repeat;\n background-image: var(\n --background-image,\n linear-gradient(\n var(--md-sys-color-on-primary-container, lightgray),\n var(--md-sys-color-on-primary-container, lightgray)\n )\n );\n transform: var(--image-transform, '');\n background-size: 100% 100%;\n }\n\n [monogram] {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 1px solid darkgray;\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: gray;\n color: white;\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n [monogram] div {\n flex: 1;\n text-transform: uppercase;\n font-size: 2em;\n font-family: system-ui;\n text-align: center;\n vertical-align: center;\n }\n\n [file-load] {\n position: absolute;\n left: 0;\n top: 0;\n\n display: flex;\n place-content: center;\n }\n\n [file-load]:hover {\n opacity: 50%;\n }\n\n #input-file {\n display: none;\n }\n\n label {\n display: flex;\n align-content: center;\n }\n\n md-icon {\n align-self: center;\n\n color: var(--file-uploader-icon-color, black);\n --md-icon-size: var(--file-uploader-icon-size, 20px);\n }\n `\n\n @property({ type: Object }) profile: Profile = {}\n @property({ type: String }) name?: string\n\n @query('[circle]') circle!: HTMLDivElement\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 dropFileHandler = this.onDropFile.bind(this) as EventListener\n\n connectedCallback(): void {\n super.connectedCallback()\n\n FileDropHelper.set(this)\n\n this.addEventListener('mousewheel', this.wheelEventHandler, false)\n\n this.addEventListener('mousedown', this.dragStartHandler)\n this.addEventListener('touchstart', this.dragStartHandler)\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 this.addEventListener('file-drop', this.dropFileHandler)\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\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 this.removeEventListener('file-drop', this.dropFileHandler)\n\n super.disconnectedCallback()\n }\n\n render() {\n return html`\n <div content>\n ${this.profile?.picture\n ? html`<div circle></div>`\n : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n </div>\n\n <div file-load>\n <label>\n <input\n id=\"input-file\"\n type=\"file\"\n accept=\"image/*\"\n hidden\n capture=\"environment\"\n @change=${(e: Event) => this.onChangeFile(e)}\n />\n <md-icon title=\"select image\">image_search</md-icon>\n </label>\n </div>\n\n <slot></slot>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n if (picture) {\n const style = this.style\n\n style.setProperty('--background-image', `url('${picture}')`)\n style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n }\n }\n\n get value() {\n return this.profile\n }\n\n set value(value: Profile) {\n this.profile = value\n }\n\n onWheelEvent(e: Event) {\n e.preventDefault()\n\n var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n\n const { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n this.profile = {\n top,\n left,\n zoom: zoom * (1 - delta / 20),\n picture,\n file\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.profile\n })\n )\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 { top = 0, left = 0, zoom = 1, picture, file } = this.profile || {}\n const { offsetHeight, offsetWidth } = this\n\n this.profile = {\n top: top + (y / offsetHeight) * 100,\n left: left + (x / offsetWidth) * 100,\n zoom,\n picture,\n file\n }\n\n this.dispatchEvent(\n new CustomEvent('change', {\n detail: this.profile\n })\n )\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 onDropFile(e: Event) {\n const dropFiles = (e as CustomEvent).detail\n const imageFile = dropFiles[0]\n if (!imageFile) {\n return\n }\n\n const picture = URL.createObjectURL(imageFile)\n\n this.profile = {\n left: 0,\n top: 0,\n zoom: 1,\n picture,\n file: imageFile\n }\n }\n\n onChangeFile(e: Event) {\n const fileInput = e.currentTarget as HTMLInputElement\n const imageFile = [...Array.from(fileInput.files as FileList)][0]\n if (!imageFile) {\n return\n }\n\n const picture = URL.createObjectURL(imageFile)\n\n this.profile = {\n left: 0,\n top: 0,\n zoom: 1,\n picture,\n file: imageFile\n }\n\n fileInput.files = null\n }\n\n fit() {\n this.profile = {\n ...this.profile,\n left: 0,\n top: 0,\n zoom: 1\n }\n }\n\n clear() {\n this.profile = {}\n }\n}\n"]}
|
package/dist/src/ox-pfp-view.js
CHANGED
|
@@ -36,7 +36,7 @@ OxPfpView.styles = css `
|
|
|
36
36
|
height: 100%;
|
|
37
37
|
border-radius: 50%;
|
|
38
38
|
position: relative;
|
|
39
|
-
background-color: var(--primary-
|
|
39
|
+
background-color: var(--md-sys-color-on-primary-container, #999);
|
|
40
40
|
|
|
41
41
|
overflow: hidden;
|
|
42
42
|
}
|
|
@@ -54,7 +54,10 @@ OxPfpView.styles = css `
|
|
|
54
54
|
background-repeat: no-repeat;
|
|
55
55
|
background-image: var(
|
|
56
56
|
--background-image,
|
|
57
|
-
linear-gradient(
|
|
57
|
+
linear-gradient(
|
|
58
|
+
var(--md-sys-color-on-primary-container, #999),
|
|
59
|
+
var(--md-sys-color-on-secondary-container, #666)
|
|
60
|
+
)
|
|
58
61
|
);
|
|
59
62
|
transform: var(--image-transform, '');
|
|
60
63
|
background-size: 100% 100%;
|
|
@@ -63,11 +66,11 @@ OxPfpView.styles = css `
|
|
|
63
66
|
[monogram] {
|
|
64
67
|
height: 100%;
|
|
65
68
|
border-radius: 50%;
|
|
66
|
-
border: 1px solid rgba(0,0,0
|
|
69
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
67
70
|
box-sizing: border-box;
|
|
68
71
|
padding: 0;
|
|
69
72
|
overflow: hidden;
|
|
70
|
-
background-color: var(--primary-
|
|
73
|
+
background-color: var(--md-sys-color-on-primary-container, #999);
|
|
71
74
|
color: white;
|
|
72
75
|
|
|
73
76
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ox-pfp-view.js","sourceRoot":"","sources":["../../src/ox-pfp-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAWlE,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;
|
|
1
|
+
{"version":3,"file":"ox-pfp-view.js","sourceRoot":"","sources":["../../src/ox-pfp-view.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAS,MAAM,mBAAmB,CAAA;AAWlE,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAgEuB,YAAO,GAAY,EAAE,CAAA;IAyBnD,CAAC;IApBC,MAAM;;QACJ,OAAO,IAAI,CAAA;QACP,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,OAAO;YACrB,CAAC,CAAC,IAAI,CAAA,oBAAoB;YAC1B,CAAC,CAAC,IAAI,CAAA,sBAAsB,MAAA,IAAI,CAAC,IAAI,0CAAE,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc;;;KAGtF,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,MAAM,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,CAAA;QAEnE,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;YAExB,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,OAAO,OAAO,GAAG,CAAC,CAAA;YAC1D,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,aAAa,IAAI,MAAM,GAAG,YAAY,IAAI,KAAK,IAAI,GAAG,CAAC,CAAA;QAChG,CAAC;IACH,CAAC;;AAvFM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DlB,AA7DY,CA6DZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAc;AAEtB;IAAlB,KAAK,CAAC,UAAU,CAAC;yCAAwB;AAnE/B,SAAS;IADrB,aAAa,CAAC,aAAa,CAAC;GAChB,SAAS,CAyFrB","sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nexport type Profile = {\n left?: number\n top?: number\n zoom?: number\n picture?: string\n file?: File\n}\n\n@customElement('ox-pfp-view')\nexport class OxPfpView extends LitElement {\n static styles = css`\n :host {\n display: inline-block;\n aspect-ratio: 1 / 1;\n }\n\n [circle] {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: relative;\n background-color: var(--md-sys-color-on-primary-container, #999);\n\n overflow: hidden;\n }\n\n [circle]::before {\n content: '';\n display: block;\n position: absolute;\n text-align: left;\n line-height: 24px;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background-repeat: no-repeat;\n background-image: var(\n --background-image,\n linear-gradient(\n var(--md-sys-color-on-primary-container, #999),\n var(--md-sys-color-on-secondary-container, #666)\n )\n );\n transform: var(--image-transform, '');\n background-size: 100% 100%;\n }\n\n [monogram] {\n height: 100%;\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: var(--md-sys-color-on-primary-container, #999);\n color: white;\n\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n [monogram] div {\n flex: 1;\n text-transform: uppercase;\n font-size: 1.5em;\n font-family: system-ui;\n text-align: center;\n vertical-align: center;\n }\n `\n\n @property({ type: Object }) profile: Profile = {}\n @property({ type: String }) name?: string\n\n @query('[circle]') circle!: HTMLDivElement\n\n render() {\n return html`\n ${this.profile?.picture\n ? html`<div circle></div>`\n : html`<div monogram><div>${this.name?.replace(/\\s/g, '').slice(0, 2)}</div></div>`}\n\n <slot></slot>\n `\n }\n\n updated(changes: PropertyValues<this>) {\n const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}\n\n if (picture) {\n const style = this.style\n\n style.setProperty('--background-image', `url(${picture})`)\n style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,22 @@
|
|
|
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
|
+
}
|
|
@@ -0,0 +1,155 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ox-zoomable-image.js","sourceRoot":"","sources":["../../src/ox-zoomable-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,SAAS,QAAQ,CAAC,CAAQ;;IACxB,IAAK,CAAgB,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;QAClC,OAAO;YACL,CAAC,EAAG,CAAgB,CAAC,OAAO;YAC5B,CAAC,EAAG,CAAgB,CAAC,OAAO;SAC7B,CAAA;IACH,CAAC;SAAM,IAAI,CAAA,MAAC,CAAgB,CAAC,OAAO,0CAAE,MAAM,KAAI,CAAC,EAAE,CAAC;QAClD,MAAM,KAAK,GAAI,CAAgB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;QAC1C,OAAO;YACL,CAAC,EAAE,KAAK,CAAC,OAAO;YAChB,CAAC,EAAE,KAAK,CAAC,OAAO;SACjB,CAAA;IACH,CAAC;SAAM,CAAC;QACN,OAAM;IACR,CAAC;AACH,CAAC;AAGM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA+BI,SAAI,GAAW,CAAC,CAAA;QAChB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,CAAA;QAIhB,mBAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QAC3D,oBAAe,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QAC7D,qBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QAC/D,sBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;QACjE,iBAAY,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;IA0GjE,CAAC;IAxGC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;QAElE,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACzD,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAA;QAC1D,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;QAEpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QACzD,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QAC1D,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAc,CAAC,CAAA;QAC7D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;QAC5D,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,CAAA;IAC9D,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAA;QAErE,IAAI,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAiB,CAAC,CAAA;QAC7D,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,gBAAiB,CAAC,CAAA;QAC9D,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,YAAa,CAAC,CAAA;QAExD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;QAC7D,QAAQ,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;QAC9D,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,cAAe,CAAC,CAAA;QACjE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAgB,CAAC,CAAA;QAChE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAgB,CAAC,CAAA;QAEhE,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;YACnC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,QAAQ,IAAI,CAAC,GAAG,IAAI,CAAC,CAAA;QAC/D,CAAC;QAED,KAAK,CAAC,WAAW,CAAC,mBAAmB,EAAE,aAAa,IAAI,CAAC,IAAI,MAAM,IAAI,CAAC,GAAG,YAAY,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,GAAG,CAAC,CAAA;IACpH,CAAC;IAED,YAAY,CAAC,CAAa;QACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,CAAgB,CAAC,MAAM,IAAI,CAAE,CAAgB,CAAC,MAAM,CAAC,CAAC,CAAA;QAE5F,IAAI,CAAC,IAAI,IAAI,CAAC,GAAG,KAAK,GAAG,EAAE,CAAA;IAC7B,CAAC;IAED,WAAW,CAAC,CAAQ;QAClB,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QAEzB,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,OAAO,KAAK,CAAA;QACd,CAAC;IACH,CAAC;IAED,UAAU,CAAC,CAAQ;QACjB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,KAAK,CAAA;QACd,CAAC;QAED,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QAEzB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,KAAK,CAAA;QACd,CAAC;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,MAAM,SAAS,GAAG,KAAK,CAAA;QACvB,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAK,CAAA;QAEpB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;QACrB,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAA;QAErB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;QAE1B,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;QAE1C,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,GAAG,CAAA;QACpC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,WAAW,CAAC,GAAG,GAAG,CAAA;QAEpC,OAAO,KAAK,CAAA;IACd,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,CAAC,CAAC,cAAc,EAAE,CAAA;YAElB,OAAO,IAAI,CAAC,SAAS,CAAA;QACvB,CAAC;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,IAAI,GAAG,CAAC,CAAA;QACb,IAAI,CAAC,IAAI,GAAG,CAAC,CAAA;QACb,IAAI,CAAC,GAAG,GAAG,CAAC,CAAA;IACd,CAAC;;AAjJM,sBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BlB,AA1BY,CA0BZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAa;AAE/B;IAAR,KAAK,EAAE;6CAAiB;AAChB;IAAR,KAAK,EAAE;6CAAiB;AAChB;IAAR,KAAK,EAAE;4CAAgB;AAjCb,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAmJ3B","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"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import '../src/ox-zoomable-image.js';
|
|
2
|
+
import { TemplateResult } from 'lit';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: string;
|
|
6
|
+
argTypes: {
|
|
7
|
+
src: {
|
|
8
|
+
control: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export default _default;
|
|
13
|
+
interface Story<T> {
|
|
14
|
+
(args: T): TemplateResult;
|
|
15
|
+
args?: Partial<T>;
|
|
16
|
+
argTypes?: Record<string, unknown>;
|
|
17
|
+
}
|
|
18
|
+
interface ArgTypes {
|
|
19
|
+
src?: string;
|
|
20
|
+
}
|
|
21
|
+
export declare const Regular: Story<ArgTypes>;
|