Skip to content

Commit 4c7a102

Browse files
keithamuskeithamus
authored
Merge pull request #46 from github/upgrade-to-new-web-component-standards
upgrade to new web component standards
2 parents 37ea476 + 5488a8e commit 4c7a102

13 files changed

+7049
-6606
lines changed

‎.eslintrc.json

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,41 @@
11
{
22
"root": true,
3-
"plugins": ["github"],
43
"extends": [
5-
"plugin:github/recommended",
64
"plugin:github/browser",
7-
"plugin:github/typescript"
5+
"plugin:github/recommended",
6+
"plugin:github/typescript",
7+
"plugin:custom-elements/recommended"
88
],
9-
"globals": {
10-
"ImageCropElement": "readonly"
11-
}
9+
"rules": {
10+
"custom-elements/tag-name-matches-class": [
11+
"error",
12+
{
13+
"suffix": "Element"
14+
}
15+
],
16+
"custom-elements/define-tag-after-class-definition": "off",
17+
"custom-elements/no-method-prefixed-with-on": "off",
18+
"custom-elements/expose-class-on-global": "off",
19+
"import/extensions": ["error", "always"],
20+
"import/no-unresolved": "off"
21+
},
22+
"overrides": [
23+
{
24+
"files": "src/*-define.ts",
25+
"rules": {
26+
"@typescript-eslint/no-namespace": "off"
27+
}
28+
},
29+
{
30+
"files": "test/**/*.js",
31+
"rules": {
32+
"github/unescaped-html-literal": "off",
33+
"github/no-inner-html": "off",
34+
"i18n-text/no-en": "off"
35+
},
36+
"env": {
37+
"mocha": true
38+
}
39+
}
40+
]
1241
}

‎.github/workflows/nodejs.yml

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
11
name: Node CI
22

3-
on: [push, pull_request]
3+
on: push
44
jobs:
55
build:
6-
runs-on: ${{ matrix.os }}
7-
8-
strategy:
9-
fail-fast: false
10-
matrix:
11-
os: [ubuntu-latest, windows-latest, macos-latest]
12-
6+
runs-on: ubuntu-latest
137
steps:
14-
- uses: actions/checkout@v1
15-
- name: Use Node.js 12.x
16-
uses: actions/setup-node@v1
17-
with:
18-
node-version: 12.x
19-
- name: npm install, build, and test
20-
run: |
21-
npm install
22-
npm run build --if-present
23-
npm test
24-
env:
25-
CI: true
8+
- uses: actions/checkout@v2
9+
- name: Use Node.js 18.x
10+
uses: actions/setup-node@v1
11+
with:
12+
node-version: 18.x
13+
- name: npm install, build, and test
14+
run: |
15+
npm install
16+
npm run build --if-present
17+
npm test
18+
env:
19+
CI: true

‎.github/workflows/publish.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ jobs:
1111
- uses: actions/checkout@v3
1212
- uses: actions/setup-node@v3
1313
with:
14-
node-version: 14
14+
node-version: 18
1515
registry-url: https://registry.npmjs.org/
1616
cache: npm
1717
- run: npm ci

‎custom-elements.json

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
{
2+
"schemaVersion": "1.0.0",
3+
"readme": "",
4+
"modules": [
5+
{
6+
"kind": "javascript-module",
7+
"path": "dist/bundle.js",
8+
"declarations": [
9+
{
10+
"kind": "variable",
11+
"name": "ImageCropElement",
12+
"default": "class extends HTMLElement {\n static define(tag = \"image-crop\", registry = customElements) {\n registry.define(tag, this);\n return this;\n }\n connectedCallback() {\n if (constructedElements.has(this))\n return;\n const shadowRoot = this.attachShadow({ mode: \"open\" });\n shadowRoot.innerHTML = `\n<style>\n :host { touch-action: none; display: block; }\n :host(.nesw) { cursor: nesw-resize; }\n :host(.nwse) { cursor: nwse-resize; }\n :host(.nesw) .crop-box, :host(.nwse) .crop-box { cursor: inherit; }\n :host([loaded]) .crop-image { display: block; }\n :host([loaded]) ::slotted([data-loading-slot]), .crop-image { display: none; }\n\n .crop-wrapper {\n position: relative;\n font-size: 0;\n }\n .crop-container {\n user-select: none;\n -ms-user-select: none;\n -moz-user-select: none;\n -webkit-user-select: none;\n position: absolute;\n overflow: hidden;\n z-index: 1;\n top: 0;\n width: 100%;\n height: 100%;\n }\n\n :host([rounded]) .crop-box {\n border-radius: 50%;\n box-shadow: 0 0 0 4000px rgba(0, 0, 0, 0.3);\n }\n .crop-box {\n position: absolute;\n border: 1px dashed #fff;\n box-sizing: border-box;\n cursor: move;\n }\n\n :host([rounded]) .crop-outline {\n outline: none;\n }\n .crop-outline {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n outline: 4000px solid rgba(0, 0, 0, .3);\n }\n\n .handle { position: absolute; }\n :host([rounded]) .handle::before { border-radius: 50%; }\n .handle:before {\n position: absolute;\n display: block;\n padding: 4px;\n transform: translate(-50%, -50%);\n content: ' ';\n background: #fff;\n border: 1px solid #767676;\n }\n .ne { top: 0; right: 0; cursor: nesw-resize; }\n .nw { top: 0; left: 0; cursor: nwse-resize; }\n .se { bottom: 0; right: 0; cursor: nwse-resize; }\n .sw { bottom: 0; left: 0; cursor: nesw-resize; }\n</style>\n<slot></slot>\n<div class=\"crop-wrapper\">\n <img width=\"100%\" class=\"crop-image\" alt=\"\">\n <div class=\"crop-container\">\n <div data-crop-box class=\"crop-box\">\n <div class=\"crop-outline\"></div>\n <div data-direction=\"nw\" class=\"handle nw\"></div>\n <div data-direction=\"ne\" class=\"handle ne\"></div>\n <div data-direction=\"sw\" class=\"handle sw\"></div>\n <div data-direction=\"se\" class=\"handle se\"></div>\n </div>\n </div>\n</div>\n`;\n const box = shadowRoot.querySelector(\"[data-crop-box]\");\n if (!(box instanceof HTMLElement))\n return;\n const image = shadowRoot.querySelector(\"img\");\n if (!(image instanceof HTMLImageElement))\n return;\n constructedElements.set(this, { box, image });\n image.addEventListener(\"load\", () => {\n this.loaded = true;\n setInitialPosition(this);\n });\n this.addEventListener(\"mouseleave\", stopUpdate);\n this.addEventListener(\"touchend\", stopUpdate);\n this.addEventListener(\"mouseup\", stopUpdate);\n box.addEventListener(\"mousedown\", startUpdate);\n box.addEventListener(\"touchstart\", startUpdate, { passive: true });\n this.addEventListener(\"keydown\", moveCropArea);\n this.addEventListener(\"keydown\", updateCropArea);\n if (this.src)\n image.src = this.src;\n }\n static get observedAttributes() {\n return [\"src\"];\n }\n get src() {\n return this.getAttribute(\"src\");\n }\n set src(val) {\n if (val) {\n this.setAttribute(\"src\", val);\n } else {\n this.removeAttribute(\"src\");\n }\n }\n get loaded() {\n return this.hasAttribute(\"loaded\");\n }\n set loaded(val) {\n if (val) {\n this.setAttribute(\"loaded\", \"\");\n } else {\n this.removeAttribute(\"loaded\");\n }\n }\n attributeChangedCallback(attribute, oldValue, newValue) {\n const { image } = constructedElements.get(this) || {};\n if (attribute === \"src\") {\n this.loaded = false;\n if (image)\n image.src = newValue;\n }\n }\n}"
13+
},
14+
{
15+
"kind": "variable",
16+
"name": "dist_default",
17+
"default": "ImageCropElement"
18+
}
19+
],
20+
"exports": [
21+
{
22+
"kind": "js",
23+
"name": "ImageCropElement",
24+
"declaration": {
25+
"name": "ImageCropElement",
26+
"module": "dist/bundle.js"
27+
}
28+
},
29+
{
30+
"kind": "js",
31+
"name": "default",
32+
"declaration": {
33+
"name": "dist_default",
34+
"module": "dist/bundle.js"
35+
}
36+
}
37+
]
38+
},
39+
{
40+
"kind": "javascript-module",
41+
"path": "dist/image-crop-element-define.js",
42+
"declarations": [],
43+
"exports": [
44+
{
45+
"kind": "js",
46+
"name": "default",
47+
"declaration": {
48+
"name": "ImageCropElement",
49+
"module": "dist/image-crop-element-define.js"
50+
}
51+
},
52+
{
53+
"kind": "js",
54+
"name": "*",
55+
"declaration": {
56+
"name": "*",
57+
"package": "./image-crop-element.js"
58+
}
59+
}
60+
]
61+
},
62+
{
63+
"kind": "javascript-module",
64+
"path": "dist/image-crop-element.js",
65+
"declarations": [
66+
{
67+
"kind": "class",
68+
"description": "",
69+
"name": "ImageCropElement",
70+
"members": [
71+
{
72+
"kind": "method",
73+
"name": "define",
74+
"static": true,
75+
"parameters": [
76+
{
77+
"name": "tag",
78+
"default": "'image-crop'"
79+
},
80+
{
81+
"name": "registry",
82+
"default": "customElements"
83+
}
84+
]
85+
},
86+
{
87+
"kind": "field",
88+
"name": "src"
89+
},
90+
{
91+
"kind": "field",
92+
"name": "loaded"
93+
}
94+
],
95+
"attributes": [
96+
{
97+
"name": "src"
98+
}
99+
],
100+
"superclass": {
101+
"name": "HTMLElement"
102+
},
103+
"customElement": true
104+
}
105+
],
106+
"exports": [
107+
{
108+
"kind": "js",
109+
"name": "ImageCropElement",
110+
"declaration": {
111+
"name": "ImageCropElement",
112+
"module": "dist/image-crop-element.js"
113+
}
114+
}
115+
]
116+
},
117+
{
118+
"kind": "javascript-module",
119+
"path": "dist/index.js",
120+
"declarations": [],
121+
"exports": [
122+
{
123+
"kind": "js",
124+
"name": "ImageCropElement",
125+
"declaration": {
126+
"name": "ImageCropElement",
127+
"module": "dist/index.js"
128+
}
129+
},
130+
{
131+
"kind": "js",
132+
"name": "default",
133+
"declaration": {
134+
"name": "ImageCropElement",
135+
"module": "dist/index.js"
136+
}
137+
},
138+
{
139+
"kind": "js",
140+
"name": "*",
141+
"declaration": {
142+
"name": "*",
143+
"package": "./image-crop-element-define.js"
144+
}
145+
}
146+
]
147+
},
148+
{
149+
"kind": "javascript-module",
150+
"path": "src/image-crop-element-define.ts",
151+
"declarations": [],
152+
"exports": [
153+
{
154+
"kind": "js",
155+
"name": "default",
156+
"declaration": {
157+
"name": "ImageCropElement",
158+
"module": "src/image-crop-element-define.ts"
159+
}
160+
},
161+
{
162+
"kind": "js",
163+
"name": "*",
164+
"declaration": {
165+
"name": "*",
166+
"package": "./image-crop-element.js"
167+
}
168+
}
169+
]
170+
},
171+
{
172+
"kind": "javascript-module",
173+
"path": "src/image-crop-element.ts",
174+
"declarations": [
175+
{
176+
"kind": "class",
177+
"description": "",
178+
"name": "ImageCropElement",
179+
"members": [
180+
{
181+
"kind": "method",
182+
"name": "define",
183+
"static": true,
184+
"parameters": [
185+
{
186+
"name": "tag",
187+
"default": "'image-crop'"
188+
},
189+
{
190+
"name": "registry",
191+
"default": "customElements"
192+
}
193+
]
194+
},
195+
{
196+
"kind": "field",
197+
"name": "src",
198+
"type": {
199+
"text": "string | null"
200+
}
201+
},
202+
{
203+
"kind": "field",
204+
"name": "loaded",
205+
"type": {
206+
"text": "boolean"
207+
}
208+
}
209+
],
210+
"attributes": [
211+
{
212+
"name": "src"
213+
}
214+
],
215+
"superclass": {
216+
"name": "HTMLElement"
217+
},
218+
"customElement": true
219+
}
220+
],
221+
"exports": [
222+
{
223+
"kind": "js",
224+
"name": "ImageCropElement",
225+
"declaration": {
226+
"name": "ImageCropElement",
227+
"module": "src/image-crop-element.ts"
228+
}
229+
}
230+
]
231+
},
232+
{
233+
"kind": "javascript-module",
234+
"path": "src/index.ts",
235+
"declarations": [],
236+
"exports": [
237+
{
238+
"kind": "js",
239+
"name": "ImageCropElement",
240+
"declaration": {
241+
"name": "ImageCropElement",
242+
"module": "src/index.ts"
243+
}
244+
},
245+
{
246+
"kind": "js",
247+
"name": "default",
248+
"declaration": {
249+
"name": "ImageCropElement",
250+
"module": "src/index.ts"
251+
}
252+
},
253+
{
254+
"kind": "js",
255+
"name": "*",
256+
"declaration": {
257+
"name": "*",
258+
"package": "./image-crop-element-define.js"
259+
}
260+
}
261+
]
262+
},
263+
{
264+
"kind": "javascript-module",
265+
"path": "test/test.js",
266+
"declarations": [],
267+
"exports": []
268+
}
269+
]
270+
}

0 commit comments

Comments
 (0)