Skip to content

Commit d5589c8

Browse files
adamlacombeadamlacombe
committed
first commit
0 parents  commit d5589c8

File tree

13 files changed

+808
-0
lines changed

13 files changed

+808
-0
lines changed

‎.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
dist/
2+
www/
3+
4+
*~
5+
*.sw[mnpcod]
6+
*.log
7+
*.lock
8+
*.tmp
9+
*.tmp.*
10+
log.txt
11+
*.sublime-project
12+
*.sublime-workspace
13+
14+
.stencil/
15+
.idea/
16+
.vscode/
17+
.sass-cache/
18+
.versions/
19+
node_modules/
20+
$RECYCLE.BIN/
21+
22+
.DS_Store
23+
Thumbs.db
24+
UserInterfaceState.xcuserstate
25+
.env

‎.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
package-lock=false
2+
@interactivetraining:registry=https://npm.pkg.github.com/

‎package.json‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
"name": "@interactivetraining/image-editor",
3+
"version": "0.0.1",
4+
"description": "Interactive.Training Component: image-editor",
5+
"main": "dist/index.js",
6+
"types": "dist/types/components.d.ts",
7+
"collection": "dist/collection/collection-manifest.json",
8+
"module": "dist/index.mjs",
9+
"files": [
10+
"dist/"
11+
],
12+
"license": "MIT",
13+
"scripts": {
14+
"build": "stencil build --es5 --docs",
15+
"start": "stencil build --dev --watch --serve",
16+
"test": "stencil test --spec --e2e"
17+
},
18+
"dependencies": {
19+
"@ionic/core": "^4.6.0",
20+
"ionicons": "4.5.10-2",
21+
"jimp": "^0.6.4"
22+
},
23+
"devDependencies": {
24+
"@stencil/core": "^1.1.3",
25+
"@stencil/sass": "^1.0.1",
26+
"@stencil/utils": "^0.0.5",
27+
"@types/jest": "23.3.14",
28+
"@types/puppeteer": "1.12.3",
29+
"puppeteer": "1.11.0"
30+
},
31+
"author": "Interactive Training",
32+
"maintainers": [
33+
{
34+
"name": "Adam LaCombe",
35+
"email": "[email protected]",
36+
"url": "https://github.com/adamlacombe"
37+
}
38+
],
39+
"repository": {
40+
"type": "git",
41+
"url": "git://github.com/InteractiveTraining/image-editor.git"
42+
},
43+
"bugs": {
44+
"url": "https://github.com/InteractiveTraining/image-editor/issues"
45+
},
46+
"homepage": "https://github.com/InteractiveTraining/image-editor"
47+
}

‎readme.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
2+
3+
# Example
4+
```html
5+
<script src='https://unpkg.com/@interactivetraining/it-image-editor@latest/dist/it-image-editor.js'></script>
6+
<it-image-editor></it-image-editor>
7+
```
8+
9+
# Example 2
10+
```html
11+
<script src='https://unpkg.com/@interactivetraining/it-image-editor@latest/dist/it-image-editor.js'></script>
12+
```
13+
14+
```javascript
15+
function addImageEditor() {
16+
const editor = document.createElement('it-image-editor');
17+
editor.addEventListener('save', (e) => {
18+
console.log('save image', e.detail);
19+
});
20+
document.body.appendChild(editor);
21+
}
22+
23+
if (document.readyState === "interactive") {
24+
addImageEditor();
25+
} else {
26+
document.addEventListener('DOMContentLoaded', () => addImageEditor());
27+
}
28+
```

‎src/components.d.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* tslint:disable */
2+
/**
3+
* This is an autogenerated file created by the Stencil compiler.
4+
* It contains typing information for all components that exist in this project.
5+
*/
6+
7+
8+
import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
9+
10+
11+
export namespace Components {
12+
interface ItImageEditor {
13+
'src': string;
14+
}
15+
}
16+
17+
declare global {
18+
19+
20+
interface HTMLItImageEditorElement extends Components.ItImageEditor, HTMLStencilElement {}
21+
var HTMLItImageEditorElement: {
22+
prototype: HTMLItImageEditorElement;
23+
new (): HTMLItImageEditorElement;
24+
};
25+
interface HTMLElementTagNameMap {
26+
'it-image-editor': HTMLItImageEditorElement;
27+
}
28+
}
29+
30+
declare namespace LocalJSX {
31+
interface ItImageEditor extends JSXBase.HTMLAttributes<HTMLItImageEditorElement> {
32+
/**
33+
* Emitted when the save button is clicked.
34+
*/
35+
'onSave'?: (event: CustomEvent<{ base64: string }>) => void;
36+
'src'?: string;
37+
}
38+
39+
interface IntrinsicElements {
40+
'it-image-editor': ItImageEditor;
41+
}
42+
}
43+
44+
export { LocalJSX as JSX };
45+
46+
47+
declare module "@stencil/core" {
48+
export namespace JSX {
49+
interface IntrinsicElements extends LocalJSX.IntrinsicElements {}
50+
}
51+
}
52+
53+

‎src/global-script.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import 'ionicons';
2+
import '@ionic/core';

‎src/image-editor/image-editor.scss‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
@import "~@ionic/core/css/core.css";
2+
@import "~@ionic/core/css/normalize.css";
3+
@import "~@ionic/core/css/structure.css";
4+
@import "~@ionic/core/css/typography.css";
5+
@import "~@ionic/core/css/padding.css";
6+
@import "~@ionic/core/css/float-elements.css";
7+
@import "~@ionic/core/css/text-alignment.css";
8+
@import "~@ionic/core/css/text-transformation.css";
9+
@import "~@ionic/core/css/flex-utils.css";
10+
11+
:host {
12+
display: block;
13+
padding: 0rem;
14+
margin: -0.5rem;
15+
16+
--height: 100vh;
17+
18+
--ion-color-primary: #3880ff;
19+
--ion-color-primary-rgb: 56, 128, 255;
20+
--ion-color-primary-contrast: #ffffff;
21+
--ion-color-primary-contrast-rgb: 255, 255, 255;
22+
--ion-color-primary-shade: #3171e0;
23+
--ion-color-primary-tint: #4c8dff;
24+
25+
--ion-color-secondary: #0cd1e8;
26+
--ion-color-secondary-rgb: 12, 209, 232;
27+
--ion-color-secondary-contrast: #ffffff;
28+
--ion-color-secondary-contrast-rgb: 255, 255, 255;
29+
--ion-color-secondary-shade: #0bb8cc;
30+
--ion-color-secondary-tint: #24d6ea;
31+
32+
--ion-color-tertiary: #7044ff;
33+
--ion-color-tertiary-rgb: 112, 68, 255;
34+
--ion-color-tertiary-contrast: #ffffff;
35+
--ion-color-tertiary-contrast-rgb: 255, 255, 255;
36+
--ion-color-tertiary-shade: #633ce0;
37+
--ion-color-tertiary-tint: #7e57ff;
38+
39+
--ion-color-success: #10dc60;
40+
--ion-color-success-rgb: 16, 220, 96;
41+
--ion-color-success-contrast: #ffffff;
42+
--ion-color-success-contrast-rgb: 255, 255, 255;
43+
--ion-color-success-shade: #0ec254;
44+
--ion-color-success-tint: #28e070;
45+
46+
--ion-color-warning: #ffce00;
47+
--ion-color-warning-rgb: 255, 206, 0;
48+
--ion-color-warning-contrast: #ffffff;
49+
--ion-color-warning-contrast-rgb: 255, 255, 255;
50+
--ion-color-warning-shade: #e0b500;
51+
--ion-color-warning-tint: #ffd31a;
52+
53+
--ion-color-danger: #f04141;
54+
--ion-color-danger-rgb: 245, 61, 61;
55+
--ion-color-danger-contrast: #ffffff;
56+
--ion-color-danger-contrast-rgb: 255, 255, 255;
57+
--ion-color-danger-shade: #d33939;
58+
--ion-color-danger-tint: #f25454;
59+
60+
--ion-color-dark: #222428;
61+
--ion-color-dark-rgb: 34, 34, 34;
62+
--ion-color-dark-contrast: #ffffff;
63+
--ion-color-dark-contrast-rgb: 255, 255, 255;
64+
--ion-color-dark-shade: #1e2023;
65+
--ion-color-dark-tint: #383a3e;
66+
67+
--ion-color-medium: #989aa2;
68+
--ion-color-medium-rgb: 152, 154, 162;
69+
--ion-color-medium-contrast: #ffffff;
70+
--ion-color-medium-contrast-rgb: 255, 255, 255;
71+
--ion-color-medium-shade: #86888f;
72+
--ion-color-medium-tint: #a2a4ab;
73+
74+
--ion-color-light: #f4f5f8;
75+
--ion-color-light-rgb: 244, 244, 244;
76+
--ion-color-light-contrast: #000000;
77+
--ion-color-light-contrast-rgb: 0, 0, 0;
78+
--ion-color-light-shade: #d7d8da;
79+
--ion-color-light-tint: #f5f6f9;
80+
81+
82+
--ion-item-background: var(--ion-color-dark);
83+
--ion-background-color: var(--ion-color-dark-shade);
84+
}
85+
86+
.original-image-container {
87+
display: flex;
88+
justify-content: center;
89+
align-content: flex-start;
90+
overflow: auto;
91+
92+
height: var(--height);
93+
94+
position: relative;
95+
background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
96+
background-size: 20px 20px;
97+
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
98+
99+
img {
100+
filter: blur(var(--img-blur)) brightness(var(--crop-focus));
101+
}
102+
103+
> div {
104+
position: relative;
105+
pointer-events: none;
106+
user-select: none;
107+
}
108+
}
109+
110+
.resize-canvas {
111+
resize: both;
112+
width: 500px;
113+
height: 200px;
114+
overflow: auto;
115+
position: absolute !important;
116+
left: 0;
117+
top: 0;
118+
z-index: 4;
119+
border: 4px dashed rgba(255, 255, 255, 0.65);
120+
user-select: none;
121+
pointer-events: all !important;
122+
border-radius: 0.1rem;
123+
backdrop-filter: blur(var(--img-blur)) brightness(150%);
124+
}
125+
126+
img {
127+
user-select: none;
128+
max-width: initial;
129+
pointer-events: none;
130+
}
131+
132+
133+
.image-editor-container {
134+
display: flex;
135+
flex-direction: row;
136+
justify-content: space-between;
137+
align-content: space-between;
138+
width: 100%;
139+
140+
141+
> div:first-child {
142+
width: 80%;
143+
max-width: 80%;
144+
border: 1px solid #000;
145+
}
146+
147+
> div:last-child {
148+
width: 20%;
149+
max-width: 20%;
150+
border: 1px solid #000;
151+
display: flex;
152+
flex-direction: column;
153+
justify-content: space-between;
154+
}
155+
}
156+
157+
ion-range {
158+
--height: 26px;
159+
padding: 0px !important;
160+
margin-top: 0px;
161+
padding-right: 1rem !important;
162+
}
163+
164+
.settings-nav {
165+
--inner-padding-start: 0px;
166+
--inner-padding-end: 0px;
167+
168+
ion-label {
169+
margin: 0px !important;
170+
margin-top: -4px !important;
171+
172+
ion-tab-bar {
173+
height: 38px;
174+
}
175+
}
176+
}
177+
178+
.history-container {
179+
display: grid;
180+
width: 100%;
181+
max-width: 100%;
182+
overflow-y: auto;
183+
grid-template-columns: repeat(2, 1fr);
184+
grid-column-gap: 0.5rem;
185+
grid-row-gap: 0.5rem;
186+
187+
.history-image {
188+
height: 150px;
189+
cursor: pointer;
190+
}
191+
}
192+

0 commit comments

Comments
 (0)