@nyaruka/temba-components 0.118.3 → 0.118.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 +7 -0
- package/demo/index.html +1 -1
- package/dist/temba-components.js +48 -18
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/lightbox/Lightbox.js +21 -9
- package/out-tsc/src/lightbox/Lightbox.js.map +1 -1
- package/out-tsc/src/mediapicker/MediaPicker.js +1 -0
- package/out-tsc/src/mediapicker/MediaPicker.js.map +1 -1
- package/out-tsc/src/thumbnail/Thumbnail.js +62 -20
- package/out-tsc/src/thumbnail/Thumbnail.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/compose/attachments-with-files-focused.png +0 -0
- package/screenshots/truth/lightbox/img-zoomed.png +0 -0
- package/src/lightbox/Lightbox.ts +21 -9
- package/src/mediapicker/MediaPicker.ts +1 -0
- package/src/thumbnail/Thumbnail.ts +64 -20
|
@@ -17,8 +17,8 @@ export class Lightbox extends RapidElement {
|
|
|
17
17
|
this.zoom = false;
|
|
18
18
|
this.zoomPct = 0.9;
|
|
19
19
|
this.scale = 1;
|
|
20
|
-
this.xTrans =
|
|
21
|
-
this.yTrans =
|
|
20
|
+
this.xTrans = 0;
|
|
21
|
+
this.yTrans = 0;
|
|
22
22
|
}
|
|
23
23
|
static get styles() {
|
|
24
24
|
return css `
|
|
@@ -51,6 +51,19 @@ export class Lightbox extends RapidElement {
|
|
|
51
51
|
overflow: hidden;
|
|
52
52
|
box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
|
|
53
53
|
}
|
|
54
|
+
|
|
55
|
+
.download {
|
|
56
|
+
background: rgba(0, 0, 0, 0.5);
|
|
57
|
+
position: absolute;
|
|
58
|
+
display:flex;
|
|
59
|
+
align-items:center;
|
|
60
|
+
color:#fff;
|
|
61
|
+
padding:0.5em;
|
|
62
|
+
border-radius:var(--curvature);
|
|
63
|
+
background:rgba(0,0,0,0.5);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
}
|
|
54
67
|
`;
|
|
55
68
|
}
|
|
56
69
|
updated(changed) {
|
|
@@ -74,8 +87,8 @@ export class Lightbox extends RapidElement {
|
|
|
74
87
|
this.top = bounds.top;
|
|
75
88
|
this.width = bounds.width;
|
|
76
89
|
this.height = bounds.height;
|
|
77
|
-
this.xTrans =
|
|
78
|
-
this.yTrans =
|
|
90
|
+
this.xTrans = 0;
|
|
91
|
+
this.yTrans = 0;
|
|
79
92
|
this.scale = 1;
|
|
80
93
|
let desiredWidth = this.width;
|
|
81
94
|
let desiredHeight = this.height;
|
|
@@ -95,10 +108,10 @@ export class Lightbox extends RapidElement {
|
|
|
95
108
|
}
|
|
96
109
|
const xGrowth = (desiredWidth - this.width) / 2;
|
|
97
110
|
const xDest = (window.innerWidth - desiredWidth) / 2;
|
|
98
|
-
this.xTrans = xDest - this.left + xGrowth
|
|
111
|
+
this.xTrans = xDest - this.left + xGrowth;
|
|
99
112
|
const yGrowth = (desiredHeight - this.height) / 2;
|
|
100
113
|
const yDest = (window.innerHeight - desiredHeight) / 2;
|
|
101
|
-
this.yTrans = yDest - this.top + yGrowth
|
|
114
|
+
this.yTrans = yDest - this.top + yGrowth;
|
|
102
115
|
this.scale = desiredScale;
|
|
103
116
|
this.show = true;
|
|
104
117
|
}
|
|
@@ -113,10 +126,9 @@ export class Lightbox extends RapidElement {
|
|
|
113
126
|
styles['left'] = this.left + 'px';
|
|
114
127
|
styles['top'] = this.top + 'px';
|
|
115
128
|
styles['width'] = this.width + 'px';
|
|
116
|
-
styles['height'] = this.height + 'px';
|
|
117
129
|
}
|
|
118
130
|
if (this.zoom) {
|
|
119
|
-
styles['transform'] = `translate(${this.xTrans}, ${this.yTrans}) scale(${this.scale}, ${this.scale})`;
|
|
131
|
+
styles['transform'] = `translate(${this.xTrans}px, ${this.yTrans}px) scale(${this.scale}, ${this.scale})`;
|
|
120
132
|
}
|
|
121
133
|
return html `
|
|
122
134
|
<div
|
|
@@ -132,7 +144,7 @@ export class Lightbox extends RapidElement {
|
|
|
132
144
|
style="transition: all ${this.animationTime}ms; ease"
|
|
133
145
|
></div>
|
|
134
146
|
<div class=${getClasses({ matte: true })} style=${styleMap(styles)}>
|
|
135
|
-
${this.show ? this.ele : null}
|
|
147
|
+
${this.show ? html `${this.ele}` : null}
|
|
136
148
|
</div>
|
|
137
149
|
</div>
|
|
138
150
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/lightbox/Lightbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D;;;;GAIG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;
|
|
1
|
+
{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../../src/lightbox/Lightbox.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAoB,MAAM,KAAK,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAE5D;;;;GAIG;AACH,MAAM,OAAO,QAAS,SAAQ,YAAY;IAA1C;;QAiDE,kBAAa,GAAG,GAAG,CAAC;QAGpB,SAAI,GAAG,KAAK,CAAC;QAGb,SAAI,GAAG,KAAK,CAAC;QAGb,YAAO,GAAG,GAAG,CAAC;QAON,UAAK,GAAG,CAAC,CAAC;QACV,WAAM,GAAG,CAAC,CAAC;QACX,WAAM,GAAG,CAAC,CAAC;IAuGrB,CAAC;IAzKC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2CT,CAAC;IACJ,CAAC;IAuBS,OAAO,CACf,OAA0D;QAE1D,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACrC,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACnB,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACnD,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;gBACrB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YACpB,CAAC,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAEM,WAAW,CAAC,GAAgB;QACjC,mDAAmD;QACnD,MAAM,MAAM,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QAC3C,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,SAAS,EAAiB,CAAC;QACzC,IAAI,CAAC,GAAW,CAAC,IAAI,GAAG,IAAI,CAAC;QAE9B,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;QACxB,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC;QAE5B,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAChB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;QAEf,IAAI,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9B,IAAI,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;QAChC,IAAI,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAE9B,MAAM,SAAS,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;QACpD,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;QAElD,yCAAyC;QACzC,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,QAAQ,EAAE,CAAC;YACtD,aAAa,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;YAClD,YAAY,GAAG,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;YAC3C,YAAY,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QAC3C,CAAC;aAAM,CAAC;YACN,YAAY,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC;YAChD,YAAY,GAAG,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;YACzC,aAAa,GAAG,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;QAC7C,CAAC;QAED,MAAM,OAAO,GAAG,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;QACrD,IAAI,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QAE1C,MAAM,OAAO,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAClD,MAAM,KAAK,GAAG,CAAC,MAAM,CAAC,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;QACvD,IAAI,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,OAAO,CAAC;QAEzC,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;QAC1B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAEM,MAAM;QACX,MAAM,MAAM,GAAG;YACb,UAAU,EAAE,aAAa,IAAI,CAAC,aAAa,uBAAuB,IAAI,CAAC,aAAa,SAAS;SAC9F,CAAC;QAEF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YAClC,MAAM,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAChC,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACtC,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,MAAM,CACJ,WAAW,CACZ,GAAG,aAAa,IAAI,CAAC,MAAM,OAAO,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,CAAC;QAC1F,CAAC;QAED,OAAO,IAAI,CAAA;;gBAEC,UAAU,CAAC;YACjB,SAAS,EAAE,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC;iBACO,IAAI,CAAC,WAAW;;;kBAGf,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;mCACT,IAAI,CAAC,aAAa;;qBAEhC,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,UAAU,QAAQ,CAAC,MAAM,CAAC;YAC9D,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI;;;KAG3C,CAAC;IACJ,CAAC;CACF;AAzHC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACP;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sCACf;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACb","sourcesContent":["import { css, html, PropertyValueMap } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { RapidElement } from '../RapidElement';\nimport { getClasses } from '../utils';\nimport { styleMap } from 'lit-html/directives/style-map.js';\n\n/**\n * This component relies on a bit of sleight of hand magic\n * to achieve it's effect. As such, it requires the use of\n * computed animation times and window.setTimeout().\n */\nexport class Lightbox extends RapidElement {\n static get styles() {\n return css`\n :host {\n z-index: 10000;\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .mask {\n display: flex;\n opacity: 0;\n background: rgba(0, 0, 0, 0.5);\n position: absolute;\n height: 100svh;\n width: 100svw;\n pointer-events: none;\n }\n\n .zoom .mask {\n opacity: 1;\n pointer-events: auto;\n }\n\n .matte {\n position: absolute;\n transform: translate(400, 400) scale(3, 3);\n border-radius: 2%;\n overflow: hidden;\n box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);\n }\n\n .download {\n background: rgba(0, 0, 0, 0.5);\n position: absolute;\n display:flex;\n align-items:center;\n color:#fff;\n padding:0.5em;\n border-radius:var(--curvature);\n background:rgba(0,0,0,0.5);\n }\n\n }\n `;\n }\n\n @property({ type: Number })\n animationTime = 300;\n\n @property({ type: Boolean })\n show = false;\n\n @property({ type: Boolean })\n zoom = false;\n\n @property({ type: Number })\n zoomPct = 0.9;\n\n private ele: HTMLElement;\n private left: number;\n private top: number;\n private height: number;\n private width: number;\n private scale = 1;\n private xTrans = 0;\n private yTrans = 0;\n\n protected updated(\n changed: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n if (changed.has('show') && this.show) {\n window.setTimeout(() => {\n this.zoom = true;\n }, 0);\n }\n\n if (changed.has('zoom') && !this.zoom && this.show) {\n window.setTimeout(() => {\n this.show = false;\n }, this.animationTime);\n }\n }\n\n public showElement(ele: HTMLElement) {\n // size our matte according to the ele's boundaries\n const bounds = ele.getBoundingClientRect();\n this.ele = ele.cloneNode() as HTMLElement;\n (this.ele as any).zoom = true;\n\n this.left = bounds.left;\n this.top = bounds.top;\n this.width = bounds.width;\n this.height = bounds.height;\n\n this.xTrans = 0;\n this.yTrans = 0;\n this.scale = 1;\n\n let desiredWidth = this.width;\n let desiredHeight = this.height;\n let desiredScale = this.scale;\n\n const maxHeight = window.innerHeight * this.zoomPct;\n const maxWidth = window.innerWidth * this.zoomPct;\n\n // if the width fits, constrain by height\n if (this.width * (maxHeight / this.height) < maxWidth) {\n desiredHeight = window.innerHeight * this.zoomPct;\n desiredScale = desiredHeight / this.height;\n desiredWidth = this.width * desiredScale;\n } else {\n desiredWidth = window.innerWidth * this.zoomPct;\n desiredScale = desiredWidth / this.width;\n desiredHeight = this.height * desiredScale;\n }\n\n const xGrowth = (desiredWidth - this.width) / 2;\n const xDest = (window.innerWidth - desiredWidth) / 2;\n this.xTrans = xDest - this.left + xGrowth;\n\n const yGrowth = (desiredHeight - this.height) / 2;\n const yDest = (window.innerHeight - desiredHeight) / 2;\n this.yTrans = yDest - this.top + yGrowth;\n\n this.scale = desiredScale;\n this.show = true;\n }\n\n public handleClick() {\n this.zoom = false;\n }\n\n public render() {\n const styles = {\n transition: `transform ${this.animationTime}ms ease, box-shadow ${this.animationTime}ms ease`\n };\n\n if (this.show) {\n styles['left'] = this.left + 'px';\n styles['top'] = this.top + 'px';\n styles['width'] = this.width + 'px';\n }\n\n if (this.zoom) {\n styles[\n 'transform'\n ] = `translate(${this.xTrans}px, ${this.yTrans}px) scale(${this.scale}, ${this.scale})`;\n }\n\n return html`\n <div\n class=${getClasses({\n container: true,\n show: this.show,\n zoom: this.zoom\n })}\n @click=${this.handleClick}\n >\n <div\n class=${getClasses({ mask: true })}\n style=\"transition: all ${this.animationTime}ms; ease\"\n ></div>\n <div class=${getClasses({ matte: true })} style=${styleMap(styles)}>\n ${this.show ? html`${this.ele}` : null}\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/mediapicker/MediaPicker.ts"],"names":[],"mappings":"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","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType } from '../interfaces';\nimport { Icon } from '../vectoricon';\nimport {\n DEFAULT_MEDIA_ENDPOINT,\n WebResponse,\n getClasses,\n postFormData\n} from '../utils';\n\nconst verifyAccept = (type: string, accept: string): boolean => {\n if (accept) {\n const allowed = accept.split(',').map((x) => x.trim());\n return (\n allowed.includes(type) || allowed.includes(type.split('/')[0] + '/*')\n );\n }\n return true;\n};\n\nexport class MediaPicker extends RapidElement {\n static get styles() {\n return css`\n .drop-mask {\n border-radius: var(--curvature-widget);\n transition: opacity ease-in-out var(--transition-speed);\n }\n\n .highlight .drop-mask {\n background: rgba(210, 243, 184, 0.8);\n }\n\n .drop-mask > div {\n margin: auto;\n border-radius: var(--curvature-widget);\n font-weight: 400;\n color: rgba(0, 0, 0, 0.5);\n }\n\n .attachments {\n }\n\n .attachments-list {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0.2em;\n }\n\n .attachment-item {\n padding: 0.4em;\n padding-top: 1em;\n }\n\n .attachment-item.error {\n background: #fff;\n color: rgba(250, 0, 0, 0.75);\n padding: 0.2em;\n margin: 0.3em 0.5em;\n border-radius: var(--curvature);\n display: block;\n }\n\n .remove-item {\n --icon-color: #ccc;\n background: #fff;\n border-radius: 99%;\n transition: transform 200ms linear;\n transform: scale(0);\n display: block;\n margin-bottom: -24px;\n margin-left: 10px;\n width: 1em;\n height: 1em;\n }\n\n .attachment-item:hover .remove-item {\n transform: scale(1);\n }\n\n .remove-item:hover {\n --icon-color: #333;\n cursor: pointer;\n }\n\n .attachment-name {\n align-self: center;\n font-size: 12px;\n padding: 2px 8px;\n }\n\n #upload-input {\n display: none;\n }\n\n .upload-label {\n display: flex;\n align-items: center;\n }\n\n .upload-icon {\n color: rgb(102, 102, 102);\n }\n\n .add-attachment {\n padding: 1em;\n background-color: rgba(0, 0, 0, 0.05);\n border-radius: var(--curvature);\n color: #aaa;\n margin: 0.5em;\n }\n\n .add-attachment:hover {\n background-color: rgba(0, 0, 0, 0.07);\n cursor: pointer;\n }\n `;\n }\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean })\n pendingDrop: boolean;\n\n @property({ type: String })\n icon = Icon.add;\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: Number })\n max = 3;\n\n @property({ type: Array })\n attachments: Attachment[] = [];\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n if (changes.has('attachments')) {\n // wait one cycle to fire change for tests\n setTimeout(() => {\n this.dispatchEvent(new Event('change'));\n }, 0);\n }\n\n if (changes.has('uploading')) {\n this.dispatchEvent(\n new CustomEvent(CustomEventType.Loading, {\n detail: { loading: this.uploading }\n })\n );\n }\n }\n\n private getAcceptableFiles(evt: DragEvent): File[] {\n const dt = evt.dataTransfer;\n if (dt) {\n const files = [...dt.files];\n return files.filter((file) => verifyAccept(file.type, this.accept));\n }\n }\n\n private handleDragEnter(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragOver(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragLeave(evt: DragEvent): void {\n this.unhighlight(evt);\n }\n\n private handleDrop(evt: DragEvent): void {\n this.unhighlight(evt);\n if (this.canAcceptAttachments()) {\n this.uploadFiles(this.getAcceptableFiles(evt));\n }\n }\n\n public canAcceptAttachments() {\n return this.attachments.length < this.max;\n }\n\n private highlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n if (this.canAcceptAttachments()) {\n this.pendingDrop = true;\n }\n }\n\n private unhighlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n this.pendingDrop = false;\n }\n\n private addCurrentAttachment(attachmentToAdd: any) {\n this.attachments.push(attachmentToAdd);\n this.requestUpdate('attachments');\n }\n\n private removeCurrentAttachment(attachmentToRemove: any) {\n this.attachments = this.attachments.filter(\n (currentAttachment) => currentAttachment !== attachmentToRemove\n );\n this.requestUpdate('attachments');\n }\n\n private handleRemoveFileClicked(evt: Event): void {\n const target = evt.target as HTMLDivElement;\n const currentAttachmentToRemove = this.attachments.find(\n ({ url }) => url === target.id\n );\n if (currentAttachmentToRemove) {\n this.removeCurrentAttachment(currentAttachmentToRemove);\n }\n }\n\n private handleUploadFileInputChanged(evt: Event): void {\n const target = evt.target as HTMLInputElement;\n const files = target.files;\n this.uploadFiles([...files]);\n }\n\n public uploadFiles(files: File[]): void {\n let filesToUpload = [];\n\n //remove duplicate files that have already been uploaded\n filesToUpload = files.filter((file) => {\n // check our file type against accepts\n if (this.accept) {\n if (!verifyAccept(file.type, this.accept)) {\n return false;\n }\n }\n\n const index = this.attachments.findIndex(\n (value) => value.filename === file.name && value.size === file.size\n );\n if (index === -1) {\n return file;\n }\n });\n\n filesToUpload.map((fileToUpload) => {\n this.uploadFile(fileToUpload);\n });\n }\n\n private uploadFile(file: File): void {\n this.uploading = true;\n\n const url = this.endpoint;\n const payload = new FormData();\n payload.append('file', file);\n postFormData(url, payload)\n .then((response: WebResponse) => {\n if (this.attachments.length < this.max) {\n const attachment = response.json as Attachment;\n if (attachment) {\n this.addCurrentAttachment(attachment);\n }\n }\n })\n .catch((error: WebResponse) => {\n let uploadError = '';\n if (error.status === 400) {\n uploadError = error.json.file[0];\n } else {\n uploadError = 'Server failure';\n }\n console.error(uploadError);\n })\n .finally(() => {\n this.uploading = false;\n });\n }\n\n private renderUploader(): TemplateResult {\n if (this.uploading) {\n return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n } else {\n return this.attachments.length < this.max\n ? html`<input\n type=\"file\"\n id=\"upload-input\"\n ?multiple=${this.max > 1}\n accept=\"${this.accept}\"\n @change=\"${this.handleUploadFileInputChanged}\"\n />\n <label\n id=\"upload-label\"\n class=\"actions-left upload-label\"\n for=\"upload-input\"\n >\n <div class=\"add-attachment\">\n <temba-icon name=\"${this.icon}\" size=\"1.5\"></temba-icon>\n </div>\n </label>`\n : null;\n }\n }\n\n public render(): TemplateResult {\n return html` <div\n class=${getClasses({ container: true, highlight: this.pendingDrop })}\n @dragenter=\"${this.handleDragEnter}\"\n @dragover=\"${this.handleDragOver}\"\n @dragleave=\"${this.handleDragLeave}\"\n @drop=\"${this.handleDrop}\"\n >\n <div class=\"drop-mask\">\n <div class=\"attachments-list\">\n ${this.attachments.map((validAttachment) => {\n return html`<div class=\"attachment-item\">\n <temba-icon\n class=\"remove-item\"\n @click=\"${this.handleRemoveFileClicked}\"\n id=\"${validAttachment.url}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n <temba-thumbnail\n attachment=\"${validAttachment.content_type}:${validAttachment.url}\"\n ></temba-thumbnail>\n </div>`;\n })}\n ${this.renderUploader()}\n </div>\n </div>\n </div>`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../../../src/mediapicker/MediaPicker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAkB,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EACL,sBAAsB,EAEtB,UAAU,EACV,YAAY,EACb,MAAM,UAAU,CAAC;AAElB,MAAM,YAAY,GAAG,CAAC,IAAY,EAAE,MAAc,EAAW,EAAE;IAC7D,IAAI,MAAM,EAAE,CAAC;QACX,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACvD,OAAO,CACL,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CACtE,CAAC;IACJ,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,OAAO,WAAY,SAAQ,YAAY;IAA7C;;QAqGE,aAAQ,GAAG,sBAAsB,CAAC;QAMlC,SAAI,GAAG,IAAI,CAAC,GAAG,CAAC;QAGhB,WAAM,GAAG,EAAE,CAAC,CAAC,mBAAmB;QAGhC,QAAG,GAAG,CAAC,CAAC;QAGR,gBAAW,GAAiB,EAAE,CAAC;IA2MjC,CAAC;IA9TC,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FT,CAAC;IACJ,CAAC;IAuBM,OAAO,CAAC,OAAyB;QACtC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACvB,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC/B,0CAA0C;YAC1C,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC1C,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,CAAC,OAAO,EAAE;gBACvC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE;aACpC,CAAC,CACH,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,kBAAkB,CAAC,GAAc;QACvC,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,CAAC;QAC5B,IAAI,EAAE,EAAE,CAAC;YACP,MAAM,KAAK,GAAG,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC;YAC5B,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACtE,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,GAAc;QACpC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAEO,cAAc,CAAC,GAAc;QACnC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACtB,CAAC;IAEO,eAAe,CAAC,GAAc;QACpC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC;IAEO,UAAU,CAAC,GAAc;QAC/B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACtB,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAEM,oBAAoB;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC;IAC5C,CAAC;IAEO,SAAS,CAAC,GAAc;QAC9B,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,GAAc;QAChC,GAAG,CAAC,cAAc,EAAE,CAAC;QACrB,GAAG,CAAC,eAAe,EAAE,CAAC;QACtB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;IAC3B,CAAC;IAEO,oBAAoB,CAAC,eAAoB;QAC/C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACvC,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC;IAEO,uBAAuB,CAAC,kBAAuB;QACrD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CACxC,CAAC,iBAAiB,EAAE,EAAE,CAAC,iBAAiB,KAAK,kBAAkB,CAChE,CAAC;QACF,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IACpC,CAAC;IAEO,uBAAuB,CAAC,GAAU;QACxC,MAAM,MAAM,GAAG,GAAG,CAAC,MAAwB,CAAC;QAC5C,MAAM,yBAAyB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CACrD,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,MAAM,CAAC,EAAE,CAC/B,CAAC;QACF,IAAI,yBAAyB,EAAE,CAAC;YAC9B,IAAI,CAAC,uBAAuB,CAAC,yBAAyB,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAEO,4BAA4B,CAAC,GAAU;QAC7C,MAAM,MAAM,GAAG,GAAG,CAAC,MAA0B,CAAC;QAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;IAC/B,CAAC;IAEM,WAAW,CAAC,KAAa;QAC9B,IAAI,aAAa,GAAG,EAAE,CAAC;QAEvB,wDAAwD;QACxD,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YACpC,sCAAsC;YACtC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC1C,OAAO,KAAK,CAAC;gBACf,CAAC;YACH,CAAC;YAED,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CACtC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,CACpE,CAAC;YACF,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;gBACjB,OAAO,IAAI,CAAC;YACd,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE;YACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,UAAU,CAAC,IAAU;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QAEtB,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC1B,MAAM,OAAO,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC/B,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;QAC7B,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC;aACvB,IAAI,CAAC,CAAC,QAAqB,EAAE,EAAE;YAC9B,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;gBACvC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAkB,CAAC;gBAC/C,IAAI,UAAU,EAAE,CAAC;oBACf,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;gBACxC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAkB,EAAE,EAAE;YAC5B,IAAI,WAAW,GAAG,EAAE,CAAC;YACrB,IAAI,KAAK,CAAC,MAAM,KAAK,GAAG,EAAE,CAAC;gBACzB,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,CAAC;gBACN,WAAW,GAAG,gBAAgB,CAAC;YACjC,CAAC;YACD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC7B,CAAC,CAAC;aACD,OAAO,CAAC,GAAG,EAAE;YACZ,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC,CAAC,CAAC;IACP,CAAC;IAEO,cAAc;QACpB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,IAAI,CAAA,qDAAqD,CAAC;QACnE,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG;gBACvC,CAAC,CAAC,IAAI,CAAA;;;0BAGY,IAAI,CAAC,GAAG,GAAG,CAAC;wBACd,IAAI,CAAC,MAAM;yBACV,IAAI,CAAC,4BAA4B;;;;;;;;oCAQtB,IAAI,CAAC,IAAI;;qBAExB;gBACb,CAAC,CAAC,IAAI,CAAC;QACX,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;cACD,UAAU,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;oBACtD,IAAI,CAAC,eAAe;mBACrB,IAAI,CAAC,cAAc;oBAClB,IAAI,CAAC,eAAe;eACzB,IAAI,CAAC,UAAU;;;;YAIlB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,eAAe,EAAE,EAAE;YACzC,OAAO,IAAI,CAAA;;;0BAGG,IAAI,CAAC,uBAAuB;sBAChC,eAAe,CAAC,GAAG;wBACjB,IAAI,CAAC,YAAY;;;8BAGX,eAAe,CAAC,YAAY,IAAI,eAAe,CAAC,GAAG;;mBAE9D,CAAC;QACV,CAAC,CAAC;YACA,IAAI,CAAC,cAAc,EAAE;;;WAGtB,CAAC;IACV,CAAC;CACF;AA1NC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;6CACX;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDACP;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACX;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACnB;AAGR;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACK;AAG/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8CAC3B","sourcesContent":["import { TemplateResult, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { Attachment, CustomEventType } from '../interfaces';\nimport { Icon } from '../vectoricon';\nimport {\n DEFAULT_MEDIA_ENDPOINT,\n WebResponse,\n getClasses,\n postFormData\n} from '../utils';\n\nconst verifyAccept = (type: string, accept: string): boolean => {\n if (accept) {\n const allowed = accept.split(',').map((x) => x.trim());\n return (\n allowed.includes(type) || allowed.includes(type.split('/')[0] + '/*')\n );\n }\n return true;\n};\n\nexport class MediaPicker extends RapidElement {\n static get styles() {\n return css`\n .drop-mask {\n border-radius: var(--curvature-widget);\n transition: opacity ease-in-out var(--transition-speed);\n }\n\n .highlight .drop-mask {\n background: rgba(210, 243, 184, 0.8);\n }\n\n .drop-mask > div {\n margin: auto;\n border-radius: var(--curvature-widget);\n font-weight: 400;\n color: rgba(0, 0, 0, 0.5);\n }\n\n .attachments {\n }\n\n .attachments-list {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n padding: 0.2em;\n align-items: center;\n }\n\n .attachment-item {\n padding: 0.4em;\n padding-top: 1em;\n }\n\n .attachment-item.error {\n background: #fff;\n color: rgba(250, 0, 0, 0.75);\n padding: 0.2em;\n margin: 0.3em 0.5em;\n border-radius: var(--curvature);\n display: block;\n }\n\n .remove-item {\n --icon-color: #ccc;\n background: #fff;\n border-radius: 99%;\n transition: transform 200ms linear;\n transform: scale(0);\n display: block;\n margin-bottom: -24px;\n margin-left: 10px;\n width: 1em;\n height: 1em;\n }\n\n .attachment-item:hover .remove-item {\n transform: scale(1);\n }\n\n .remove-item:hover {\n --icon-color: #333;\n cursor: pointer;\n }\n\n .attachment-name {\n align-self: center;\n font-size: 12px;\n padding: 2px 8px;\n }\n\n #upload-input {\n display: none;\n }\n\n .upload-label {\n display: flex;\n align-items: center;\n }\n\n .upload-icon {\n color: rgb(102, 102, 102);\n }\n\n .add-attachment {\n padding: 1em;\n background-color: rgba(0, 0, 0, 0.05);\n border-radius: var(--curvature);\n color: #aaa;\n margin: 0.5em;\n }\n\n .add-attachment:hover {\n background-color: rgba(0, 0, 0, 0.07);\n cursor: pointer;\n }\n `;\n }\n\n @property({ type: String, attribute: false })\n endpoint = DEFAULT_MEDIA_ENDPOINT;\n\n @property({ type: Boolean })\n pendingDrop: boolean;\n\n @property({ type: String })\n icon = Icon.add;\n\n @property({ type: String })\n accept = ''; //e.g. \".xls,.xlsx\"\n\n @property({ type: Number })\n max = 3;\n\n @property({ type: Array })\n attachments: Attachment[] = [];\n\n @property({ type: Boolean, attribute: false })\n uploading: boolean;\n\n public updated(changes: Map<string, any>): void {\n super.updated(changes);\n if (changes.has('attachments')) {\n // wait one cycle to fire change for tests\n setTimeout(() => {\n this.dispatchEvent(new Event('change'));\n }, 0);\n }\n\n if (changes.has('uploading')) {\n this.dispatchEvent(\n new CustomEvent(CustomEventType.Loading, {\n detail: { loading: this.uploading }\n })\n );\n }\n }\n\n private getAcceptableFiles(evt: DragEvent): File[] {\n const dt = evt.dataTransfer;\n if (dt) {\n const files = [...dt.files];\n return files.filter((file) => verifyAccept(file.type, this.accept));\n }\n }\n\n private handleDragEnter(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragOver(evt: DragEvent): void {\n this.highlight(evt);\n }\n\n private handleDragLeave(evt: DragEvent): void {\n this.unhighlight(evt);\n }\n\n private handleDrop(evt: DragEvent): void {\n this.unhighlight(evt);\n if (this.canAcceptAttachments()) {\n this.uploadFiles(this.getAcceptableFiles(evt));\n }\n }\n\n public canAcceptAttachments() {\n return this.attachments.length < this.max;\n }\n\n private highlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n if (this.canAcceptAttachments()) {\n this.pendingDrop = true;\n }\n }\n\n private unhighlight(evt: DragEvent): void {\n evt.preventDefault();\n evt.stopPropagation();\n this.pendingDrop = false;\n }\n\n private addCurrentAttachment(attachmentToAdd: any) {\n this.attachments.push(attachmentToAdd);\n this.requestUpdate('attachments');\n }\n\n private removeCurrentAttachment(attachmentToRemove: any) {\n this.attachments = this.attachments.filter(\n (currentAttachment) => currentAttachment !== attachmentToRemove\n );\n this.requestUpdate('attachments');\n }\n\n private handleRemoveFileClicked(evt: Event): void {\n const target = evt.target as HTMLDivElement;\n const currentAttachmentToRemove = this.attachments.find(\n ({ url }) => url === target.id\n );\n if (currentAttachmentToRemove) {\n this.removeCurrentAttachment(currentAttachmentToRemove);\n }\n }\n\n private handleUploadFileInputChanged(evt: Event): void {\n const target = evt.target as HTMLInputElement;\n const files = target.files;\n this.uploadFiles([...files]);\n }\n\n public uploadFiles(files: File[]): void {\n let filesToUpload = [];\n\n //remove duplicate files that have already been uploaded\n filesToUpload = files.filter((file) => {\n // check our file type against accepts\n if (this.accept) {\n if (!verifyAccept(file.type, this.accept)) {\n return false;\n }\n }\n\n const index = this.attachments.findIndex(\n (value) => value.filename === file.name && value.size === file.size\n );\n if (index === -1) {\n return file;\n }\n });\n\n filesToUpload.map((fileToUpload) => {\n this.uploadFile(fileToUpload);\n });\n }\n\n private uploadFile(file: File): void {\n this.uploading = true;\n\n const url = this.endpoint;\n const payload = new FormData();\n payload.append('file', file);\n postFormData(url, payload)\n .then((response: WebResponse) => {\n if (this.attachments.length < this.max) {\n const attachment = response.json as Attachment;\n if (attachment) {\n this.addCurrentAttachment(attachment);\n }\n }\n })\n .catch((error: WebResponse) => {\n let uploadError = '';\n if (error.status === 400) {\n uploadError = error.json.file[0];\n } else {\n uploadError = 'Server failure';\n }\n console.error(uploadError);\n })\n .finally(() => {\n this.uploading = false;\n });\n }\n\n private renderUploader(): TemplateResult {\n if (this.uploading) {\n return html`<temba-loading units=\"3\" size=\"12\"></temba-loading>`;\n } else {\n return this.attachments.length < this.max\n ? html`<input\n type=\"file\"\n id=\"upload-input\"\n ?multiple=${this.max > 1}\n accept=\"${this.accept}\"\n @change=\"${this.handleUploadFileInputChanged}\"\n />\n <label\n id=\"upload-label\"\n class=\"actions-left upload-label\"\n for=\"upload-input\"\n >\n <div class=\"add-attachment\">\n <temba-icon name=\"${this.icon}\" size=\"1.5\"></temba-icon>\n </div>\n </label>`\n : null;\n }\n }\n\n public render(): TemplateResult {\n return html` <div\n class=${getClasses({ container: true, highlight: this.pendingDrop })}\n @dragenter=\"${this.handleDragEnter}\"\n @dragover=\"${this.handleDragOver}\"\n @dragleave=\"${this.handleDragLeave}\"\n @drop=\"${this.handleDrop}\"\n >\n <div class=\"drop-mask\">\n <div class=\"attachments-list\">\n ${this.attachments.map((validAttachment) => {\n return html`<div class=\"attachment-item\">\n <temba-icon\n class=\"remove-item\"\n @click=\"${this.handleRemoveFileClicked}\"\n id=\"${validAttachment.url}\"\n name=\"${Icon.delete_small}\"\n ></temba-icon>\n <temba-thumbnail\n attachment=\"${validAttachment.content_type}:${validAttachment.url}\"\n ></temba-thumbnail>\n </div>`;\n })}\n ${this.renderUploader()}\n </div>\n </div>\n </div>`;\n }\n}\n"]}
|
|
@@ -3,7 +3,6 @@ import { css, html } from 'lit';
|
|
|
3
3
|
import { RapidElement } from '../RapidElement';
|
|
4
4
|
import { property } from 'lit/decorators.js';
|
|
5
5
|
import { getClasses } from '../utils';
|
|
6
|
-
import { styleMap } from 'lit-html/directives/style-map.js';
|
|
7
6
|
import { WebChatIcon } from '../webchat';
|
|
8
7
|
var ThumbnailContentType;
|
|
9
8
|
(function (ThumbnailContentType) {
|
|
@@ -21,6 +20,11 @@ const ThumbnailIcons = {
|
|
|
21
20
|
[ThumbnailContentType.OTHER]: WebChatIcon.attachment
|
|
22
21
|
};
|
|
23
22
|
export class Thumbnail extends RapidElement {
|
|
23
|
+
constructor() {
|
|
24
|
+
super(...arguments);
|
|
25
|
+
this.ratio = 0;
|
|
26
|
+
this.preview = true;
|
|
27
|
+
}
|
|
24
28
|
static get styles() {
|
|
25
29
|
return css `
|
|
26
30
|
:host {
|
|
@@ -46,8 +50,7 @@ export class Thumbnail extends RapidElement {
|
|
|
46
50
|
.zoom .thumb {
|
|
47
51
|
border-radius: 0px !important;
|
|
48
52
|
width: calc(var(--thumb-size, 4em) + 0.8em);
|
|
49
|
-
height: calc(
|
|
50
|
-
max-height: calc(var(--thumb-size, 4em) + 0.8em);
|
|
53
|
+
max-height: calc(90vh - 10em);
|
|
51
54
|
}
|
|
52
55
|
|
|
53
56
|
.thumb {
|
|
@@ -55,8 +58,7 @@ export class Thumbnail extends RapidElement {
|
|
|
55
58
|
background-position: center;
|
|
56
59
|
background-repeat: no-repeat;
|
|
57
60
|
border-radius: var(--curvature);
|
|
58
|
-
max-height: var(--thumb-size, 4em);
|
|
59
|
-
height: var(--thumb-size, 4em);
|
|
61
|
+
max-height: calc(var(--thumb-size, 4em) * 2);
|
|
60
62
|
width: var(--thumb-size, 4em);
|
|
61
63
|
display: flex;
|
|
62
64
|
align-items: center;
|
|
@@ -82,13 +84,43 @@ export class Thumbnail extends RapidElement {
|
|
|
82
84
|
display: block;
|
|
83
85
|
}
|
|
84
86
|
|
|
85
|
-
.
|
|
87
|
+
.download {
|
|
86
88
|
display: none;
|
|
89
|
+
position: absolute;
|
|
90
|
+
right: 0em;
|
|
91
|
+
bottom: 0em;
|
|
92
|
+
border-radius: var(--curvature);
|
|
93
|
+
transform: scale(0.2) translate(3em, 3em);
|
|
94
|
+
padding: 0.4em;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.zoom .download {
|
|
98
|
+
display: block;
|
|
99
|
+
background: rgba(0, 0, 0, 0.5);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.zoom .download:hover {
|
|
103
|
+
background: rgba(0, 0, 0, 0.6);
|
|
104
|
+
cursor: pointer;
|
|
87
105
|
}
|
|
88
106
|
`;
|
|
89
107
|
}
|
|
90
108
|
updated(changes) {
|
|
91
109
|
super.updated(changes);
|
|
110
|
+
if (changes.has('contentType') &&
|
|
111
|
+
this.contentType === ThumbnailContentType.IMAGE) {
|
|
112
|
+
const toObserve = this.shadowRoot.querySelector('.observe');
|
|
113
|
+
if (toObserve) {
|
|
114
|
+
new ResizeObserver((e, observer) => {
|
|
115
|
+
if (toObserve.clientHeight > 0 && toObserve.clientWidth > 0) {
|
|
116
|
+
this.ratio = toObserve.clientHeight / toObserve.clientWidth;
|
|
117
|
+
this.preview =
|
|
118
|
+
this.ratio === 0 || (this.ratio > 0.25 && this.ratio <= 1.5);
|
|
119
|
+
observer.disconnect();
|
|
120
|
+
}
|
|
121
|
+
}).observe(toObserve);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
92
124
|
// convert our attachment to a url and label
|
|
93
125
|
if (changes.has('attachment')) {
|
|
94
126
|
if (this.attachment) {
|
|
@@ -119,7 +151,7 @@ export class Thumbnail extends RapidElement {
|
|
|
119
151
|
}
|
|
120
152
|
}
|
|
121
153
|
handleThumbnailClicked() {
|
|
122
|
-
if (this.contentType === ThumbnailContentType.IMAGE) {
|
|
154
|
+
if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {
|
|
123
155
|
window.setTimeout(() => {
|
|
124
156
|
const lightbox = document.querySelector('temba-lightbox');
|
|
125
157
|
lightbox.showElement(this);
|
|
@@ -129,6 +161,12 @@ export class Thumbnail extends RapidElement {
|
|
|
129
161
|
window.open(this.url, '_blank');
|
|
130
162
|
}
|
|
131
163
|
}
|
|
164
|
+
handleDownload(e) {
|
|
165
|
+
e.stopPropagation();
|
|
166
|
+
e.preventDefault();
|
|
167
|
+
// open this.url in another tab
|
|
168
|
+
window.open(this.url, '_blank');
|
|
169
|
+
}
|
|
132
170
|
render() {
|
|
133
171
|
return html `
|
|
134
172
|
<div
|
|
@@ -136,21 +174,19 @@ export class Thumbnail extends RapidElement {
|
|
|
136
174
|
class="${getClasses({ wrapper: true, zoom: this.zoom })}"
|
|
137
175
|
url=${this.url}
|
|
138
176
|
>
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
? html `<temba-icon
|
|
177
|
+
${this.contentType === ThumbnailContentType.IMAGE && this.preview
|
|
178
|
+
? html `<div class=""><div class="download" @click=${this.handleDownload.bind(this)}><temba-icon size="1" style="color:#fff;" name="download"></temba-icon></div><img
|
|
179
|
+
class="observe thumb ${this.contentType}"
|
|
180
|
+
src="${this.url}"
|
|
181
|
+
></img></div>`
|
|
182
|
+
: html `<div
|
|
183
|
+
style="padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);"
|
|
184
|
+
>
|
|
185
|
+
<temba-icon
|
|
149
186
|
size="1.5"
|
|
150
187
|
name="${ThumbnailIcons[this.contentType]}"
|
|
151
|
-
></temba-icon
|
|
152
|
-
|
|
153
|
-
</div>
|
|
188
|
+
></temba-icon>
|
|
189
|
+
</div>`}
|
|
154
190
|
</div>
|
|
155
191
|
`;
|
|
156
192
|
}
|
|
@@ -161,6 +197,12 @@ __decorate([
|
|
|
161
197
|
__decorate([
|
|
162
198
|
property({ type: String })
|
|
163
199
|
], Thumbnail.prototype, "attachment", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: Number })
|
|
202
|
+
], Thumbnail.prototype, "ratio", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property({ type: Boolean })
|
|
205
|
+
], Thumbnail.prototype, "preview", void 0);
|
|
164
206
|
__decorate([
|
|
165
207
|
property({ type: Boolean, attribute: false })
|
|
166
208
|
], Thumbnail.prototype, "zoom", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/thumbnail/Thumbnail.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValueMap, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { Lightbox } from '../lightbox/Lightbox';\nimport { styleMap } from 'lit-html/directives/style-map.js';\nimport { WebChatIcon } from '../webchat';\n\nenum ThumbnailContentType {\n IMAGE = 'image',\n AUDIO = 'audio',\n VIDEO = 'video',\n DOCUMENT = 'document',\n OTHER = 'other'\n}\n\nconst ThumbnailIcons = {\n [ThumbnailContentType.IMAGE]: WebChatIcon.attachment_image,\n [ThumbnailContentType.AUDIO]: WebChatIcon.attachment_audio,\n [ThumbnailContentType.VIDEO]: WebChatIcon.attachment_video,\n [ThumbnailContentType.DOCUMENT]: WebChatIcon.attachment_document,\n [ThumbnailContentType.OTHER]: WebChatIcon.attachment\n};\n\nexport class Thumbnail extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: inline;\n }\n\n .wrapper {\n padding: var(--thumb-padding, 0.4em);\n background: var(--thumb-background, #fff);\n box-shadow: var(--widget-box-shadow);\n cursor: pointer;\n border-radius: calc(var(--curvature) * 1.5);\n border: 0px solid #f3f3f3;\n }\n\n .wrapper.zoom {\n border: none;\n padding: 0 !important;\n border-radius: 0 !important;\n overflow: hidden !important;\n }\n\n .zoom .thumb {\n border-radius: 0px !important;\n width: calc(var(--thumb-size, 4em) + 0.8em);\n height: calc(var(--thumb-size, 4em) + 0.8em);\n max-height: calc(var(--thumb-size, 4em) + 0.8em);\n }\n\n .thumb {\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n border-radius: var(--curvature);\n max-height: var(--thumb-size, 4em);\n height: var(--thumb-size, 4em);\n width: var(--thumb-size, 4em);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 400;\n color: var(--thumb-icon, #bbb);\n }\n\n .thumb.document,\n .thumb.audio,\n .thumb.video {\n border: 1px solid #eee;\n }\n\n .wrapper:hover .thumb.icon {\n }\n\n .viewer {\n display: block;\n }\n\n .zoom .viewer {\n display: block;\n }\n\n .zoom temba-icon {\n display: none;\n }\n `;\n }\n\n @property({ type: String })\n url: string;\n\n @property({ type: String })\n attachment: string;\n\n @property({ type: Boolean, attribute: false })\n zoom: boolean;\n\n @property({ type: String, attribute: false })\n contentType: string;\n\n protected updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n\n // convert our attachment to a url and label\n if (changes.has('attachment')) {\n if (this.attachment) {\n const splitIndex = this.attachment.indexOf(':');\n if (splitIndex === -1) {\n this.url = this.attachment;\n } else {\n const contentType = this.attachment.substring(0, splitIndex);\n this.url = this.attachment.substring(splitIndex + 1);\n\n if (contentType.startsWith('image')) {\n this.contentType = ThumbnailContentType.IMAGE;\n } else if (contentType.startsWith('audio')) {\n this.contentType = ThumbnailContentType.AUDIO;\n } else if (contentType.startsWith('video')) {\n this.contentType = ThumbnailContentType.VIDEO;\n } else if (contentType.startsWith('application')) {\n this.contentType = ThumbnailContentType.DOCUMENT;\n } else {\n this.contentType = ThumbnailContentType.OTHER;\n }\n }\n }\n }\n }\n\n public handleThumbnailClicked() {\n if (this.contentType === ThumbnailContentType.IMAGE) {\n window.setTimeout(() => {\n const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n lightbox.showElement(this);\n }, 100);\n } else {\n window.open(this.url, '_blank');\n }\n }\n\n public render() {\n return html`\n <div\n @click=${this.handleThumbnailClicked.bind(this)}\n class=\"${getClasses({ wrapper: true, zoom: this.zoom })}\"\n url=${this.url}\n >\n <div\n class=\"thumb ${this.contentType} \"\n style=\"${this.url\n ? styleMap({\n backgroundImage: `url(${this.url})`\n })\n : ''}\"\n >\n ${this.contentType !== ThumbnailContentType.IMAGE\n ? html`<temba-icon\n size=\"1.5\"\n name=\"${ThumbnailIcons[this.contentType]}\"\n ></temba-icon>`\n : null}\n </div>\n </div>\n `;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../../src/thumbnail/Thumbnail.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValueMap, css, html } from 'lit';\nimport { RapidElement } from '../RapidElement';\nimport { property } from 'lit/decorators.js';\nimport { getClasses } from '../utils';\nimport { Lightbox } from '../lightbox/Lightbox';\nimport { WebChatIcon } from '../webchat';\n\nenum ThumbnailContentType {\n IMAGE = 'image',\n AUDIO = 'audio',\n VIDEO = 'video',\n DOCUMENT = 'document',\n OTHER = 'other'\n}\n\nconst ThumbnailIcons = {\n [ThumbnailContentType.IMAGE]: WebChatIcon.attachment_image,\n [ThumbnailContentType.AUDIO]: WebChatIcon.attachment_audio,\n [ThumbnailContentType.VIDEO]: WebChatIcon.attachment_video,\n [ThumbnailContentType.DOCUMENT]: WebChatIcon.attachment_document,\n [ThumbnailContentType.OTHER]: WebChatIcon.attachment\n};\n\nexport class Thumbnail extends RapidElement {\n static get styles() {\n return css`\n :host {\n display: inline;\n }\n\n .wrapper {\n padding: var(--thumb-padding, 0.4em);\n background: var(--thumb-background, #fff);\n box-shadow: var(--widget-box-shadow);\n cursor: pointer;\n border-radius: calc(var(--curvature) * 1.5);\n border: 0px solid #f3f3f3;\n }\n\n .wrapper.zoom {\n border: none;\n padding: 0 !important;\n border-radius: 0 !important;\n overflow: hidden !important;\n }\n\n .zoom .thumb {\n border-radius: 0px !important;\n width: calc(var(--thumb-size, 4em) + 0.8em);\n max-height: calc(90vh - 10em);\n }\n\n .thumb {\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n border-radius: var(--curvature);\n max-height: calc(var(--thumb-size, 4em) * 2);\n width: var(--thumb-size, 4em);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 400;\n color: var(--thumb-icon, #bbb);\n }\n\n .thumb.document,\n .thumb.audio,\n .thumb.video {\n border: 1px solid #eee;\n }\n\n .wrapper:hover .thumb.icon {\n }\n\n .viewer {\n display: block;\n }\n\n .zoom .viewer {\n display: block;\n }\n\n .download {\n display: none;\n position: absolute;\n right: 0em;\n bottom: 0em;\n border-radius: var(--curvature);\n transform: scale(0.2) translate(3em, 3em);\n padding: 0.4em;\n }\n\n .zoom .download {\n display: block;\n background: rgba(0, 0, 0, 0.5);\n }\n\n .zoom .download:hover {\n background: rgba(0, 0, 0, 0.6);\n cursor: pointer;\n }\n `;\n }\n\n @property({ type: String })\n url: string;\n\n @property({ type: String })\n attachment: string;\n\n @property({ type: Number })\n ratio: number = 0;\n\n @property({ type: Boolean })\n preview: boolean = true;\n\n @property({ type: Boolean, attribute: false })\n zoom: boolean;\n\n @property({ type: String, attribute: false })\n contentType: string;\n\n protected updated(\n changes: PropertyValueMap<any> | Map<PropertyKey, unknown>\n ): void {\n super.updated(changes);\n\n if (\n changes.has('contentType') &&\n this.contentType === ThumbnailContentType.IMAGE\n ) {\n const toObserve = this.shadowRoot.querySelector('.observe');\n if (toObserve) {\n new ResizeObserver((e, observer) => {\n if (toObserve.clientHeight > 0 && toObserve.clientWidth > 0) {\n this.ratio = toObserve.clientHeight / toObserve.clientWidth;\n this.preview =\n this.ratio === 0 || (this.ratio > 0.25 && this.ratio <= 1.5);\n observer.disconnect();\n }\n }).observe(toObserve);\n }\n }\n\n // convert our attachment to a url and label\n if (changes.has('attachment')) {\n if (this.attachment) {\n const splitIndex = this.attachment.indexOf(':');\n if (splitIndex === -1) {\n this.url = this.attachment;\n } else {\n const contentType = this.attachment.substring(0, splitIndex);\n this.url = this.attachment.substring(splitIndex + 1);\n\n if (contentType.startsWith('image')) {\n this.contentType = ThumbnailContentType.IMAGE;\n } else if (contentType.startsWith('audio')) {\n this.contentType = ThumbnailContentType.AUDIO;\n } else if (contentType.startsWith('video')) {\n this.contentType = ThumbnailContentType.VIDEO;\n } else if (contentType.startsWith('application')) {\n this.contentType = ThumbnailContentType.DOCUMENT;\n } else {\n this.contentType = ThumbnailContentType.OTHER;\n }\n }\n }\n }\n }\n\n public handleThumbnailClicked() {\n if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {\n window.setTimeout(() => {\n const lightbox = document.querySelector('temba-lightbox') as Lightbox;\n lightbox.showElement(this);\n }, 100);\n } else {\n window.open(this.url, '_blank');\n }\n }\n\n public handleDownload(e: Event) {\n e.stopPropagation();\n e.preventDefault();\n\n // open this.url in another tab\n window.open(this.url, '_blank');\n }\n\n public render() {\n return html`\n <div\n @click=${this.handleThumbnailClicked.bind(this)}\n class=\"${getClasses({ wrapper: true, zoom: this.zoom })}\"\n url=${this.url}\n >\n ${this.contentType === ThumbnailContentType.IMAGE && this.preview\n ? html`<div class=\"\"><div class=\"download\" @click=${this.handleDownload.bind(\n this\n )}><temba-icon size=\"1\" style=\"color:#fff;\" name=\"download\"></temba-icon></div><img\n class=\"observe thumb ${this.contentType}\"\n src=\"${this.url}\"\n ></img></div>`\n : html`<div\n style=\"padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);\"\n >\n <temba-icon\n size=\"1.5\"\n name=\"${ThumbnailIcons[this.contentType]}\"\n ></temba-icon>\n </div>`}\n </div>\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
Binary file
|
|
Binary file
|
package/src/lightbox/Lightbox.ts
CHANGED
|
@@ -41,6 +41,19 @@ export class Lightbox extends RapidElement {
|
|
|
41
41
|
overflow: hidden;
|
|
42
42
|
box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
|
|
43
43
|
}
|
|
44
|
+
|
|
45
|
+
.download {
|
|
46
|
+
background: rgba(0, 0, 0, 0.5);
|
|
47
|
+
position: absolute;
|
|
48
|
+
display:flex;
|
|
49
|
+
align-items:center;
|
|
50
|
+
color:#fff;
|
|
51
|
+
padding:0.5em;
|
|
52
|
+
border-radius:var(--curvature);
|
|
53
|
+
background:rgba(0,0,0,0.5);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
}
|
|
44
57
|
`;
|
|
45
58
|
}
|
|
46
59
|
|
|
@@ -62,8 +75,8 @@ export class Lightbox extends RapidElement {
|
|
|
62
75
|
private height: number;
|
|
63
76
|
private width: number;
|
|
64
77
|
private scale = 1;
|
|
65
|
-
private xTrans =
|
|
66
|
-
private yTrans =
|
|
78
|
+
private xTrans = 0;
|
|
79
|
+
private yTrans = 0;
|
|
67
80
|
|
|
68
81
|
protected updated(
|
|
69
82
|
changed: PropertyValueMap<any> | Map<PropertyKey, unknown>
|
|
@@ -92,8 +105,8 @@ export class Lightbox extends RapidElement {
|
|
|
92
105
|
this.width = bounds.width;
|
|
93
106
|
this.height = bounds.height;
|
|
94
107
|
|
|
95
|
-
this.xTrans =
|
|
96
|
-
this.yTrans =
|
|
108
|
+
this.xTrans = 0;
|
|
109
|
+
this.yTrans = 0;
|
|
97
110
|
this.scale = 1;
|
|
98
111
|
|
|
99
112
|
let desiredWidth = this.width;
|
|
@@ -116,11 +129,11 @@ export class Lightbox extends RapidElement {
|
|
|
116
129
|
|
|
117
130
|
const xGrowth = (desiredWidth - this.width) / 2;
|
|
118
131
|
const xDest = (window.innerWidth - desiredWidth) / 2;
|
|
119
|
-
this.xTrans = xDest - this.left + xGrowth
|
|
132
|
+
this.xTrans = xDest - this.left + xGrowth;
|
|
120
133
|
|
|
121
134
|
const yGrowth = (desiredHeight - this.height) / 2;
|
|
122
135
|
const yDest = (window.innerHeight - desiredHeight) / 2;
|
|
123
|
-
this.yTrans = yDest - this.top + yGrowth
|
|
136
|
+
this.yTrans = yDest - this.top + yGrowth;
|
|
124
137
|
|
|
125
138
|
this.scale = desiredScale;
|
|
126
139
|
this.show = true;
|
|
@@ -139,13 +152,12 @@ export class Lightbox extends RapidElement {
|
|
|
139
152
|
styles['left'] = this.left + 'px';
|
|
140
153
|
styles['top'] = this.top + 'px';
|
|
141
154
|
styles['width'] = this.width + 'px';
|
|
142
|
-
styles['height'] = this.height + 'px';
|
|
143
155
|
}
|
|
144
156
|
|
|
145
157
|
if (this.zoom) {
|
|
146
158
|
styles[
|
|
147
159
|
'transform'
|
|
148
|
-
] = `translate(${this.xTrans}, ${this.yTrans}) scale(${this.scale}, ${this.scale})`;
|
|
160
|
+
] = `translate(${this.xTrans}px, ${this.yTrans}px) scale(${this.scale}, ${this.scale})`;
|
|
149
161
|
}
|
|
150
162
|
|
|
151
163
|
return html`
|
|
@@ -162,7 +174,7 @@ export class Lightbox extends RapidElement {
|
|
|
162
174
|
style="transition: all ${this.animationTime}ms; ease"
|
|
163
175
|
></div>
|
|
164
176
|
<div class=${getClasses({ matte: true })} style=${styleMap(styles)}>
|
|
165
|
-
${this.show ? this.ele : null}
|
|
177
|
+
${this.show ? html`${this.ele}` : null}
|
|
166
178
|
</div>
|
|
167
179
|
</div>
|
|
168
180
|
`;
|
|
@@ -3,7 +3,6 @@ import { RapidElement } from '../RapidElement';
|
|
|
3
3
|
import { property } from 'lit/decorators.js';
|
|
4
4
|
import { getClasses } from '../utils';
|
|
5
5
|
import { Lightbox } from '../lightbox/Lightbox';
|
|
6
|
-
import { styleMap } from 'lit-html/directives/style-map.js';
|
|
7
6
|
import { WebChatIcon } from '../webchat';
|
|
8
7
|
|
|
9
8
|
enum ThumbnailContentType {
|
|
@@ -48,8 +47,7 @@ export class Thumbnail extends RapidElement {
|
|
|
48
47
|
.zoom .thumb {
|
|
49
48
|
border-radius: 0px !important;
|
|
50
49
|
width: calc(var(--thumb-size, 4em) + 0.8em);
|
|
51
|
-
height: calc(
|
|
52
|
-
max-height: calc(var(--thumb-size, 4em) + 0.8em);
|
|
50
|
+
max-height: calc(90vh - 10em);
|
|
53
51
|
}
|
|
54
52
|
|
|
55
53
|
.thumb {
|
|
@@ -57,8 +55,7 @@ export class Thumbnail extends RapidElement {
|
|
|
57
55
|
background-position: center;
|
|
58
56
|
background-repeat: no-repeat;
|
|
59
57
|
border-radius: var(--curvature);
|
|
60
|
-
max-height: var(--thumb-size, 4em);
|
|
61
|
-
height: var(--thumb-size, 4em);
|
|
58
|
+
max-height: calc(var(--thumb-size, 4em) * 2);
|
|
62
59
|
width: var(--thumb-size, 4em);
|
|
63
60
|
display: flex;
|
|
64
61
|
align-items: center;
|
|
@@ -84,8 +81,24 @@ export class Thumbnail extends RapidElement {
|
|
|
84
81
|
display: block;
|
|
85
82
|
}
|
|
86
83
|
|
|
87
|
-
.
|
|
84
|
+
.download {
|
|
88
85
|
display: none;
|
|
86
|
+
position: absolute;
|
|
87
|
+
right: 0em;
|
|
88
|
+
bottom: 0em;
|
|
89
|
+
border-radius: var(--curvature);
|
|
90
|
+
transform: scale(0.2) translate(3em, 3em);
|
|
91
|
+
padding: 0.4em;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.zoom .download {
|
|
95
|
+
display: block;
|
|
96
|
+
background: rgba(0, 0, 0, 0.5);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.zoom .download:hover {
|
|
100
|
+
background: rgba(0, 0, 0, 0.6);
|
|
101
|
+
cursor: pointer;
|
|
89
102
|
}
|
|
90
103
|
`;
|
|
91
104
|
}
|
|
@@ -96,6 +109,12 @@ export class Thumbnail extends RapidElement {
|
|
|
96
109
|
@property({ type: String })
|
|
97
110
|
attachment: string;
|
|
98
111
|
|
|
112
|
+
@property({ type: Number })
|
|
113
|
+
ratio: number = 0;
|
|
114
|
+
|
|
115
|
+
@property({ type: Boolean })
|
|
116
|
+
preview: boolean = true;
|
|
117
|
+
|
|
99
118
|
@property({ type: Boolean, attribute: false })
|
|
100
119
|
zoom: boolean;
|
|
101
120
|
|
|
@@ -107,6 +126,23 @@ export class Thumbnail extends RapidElement {
|
|
|
107
126
|
): void {
|
|
108
127
|
super.updated(changes);
|
|
109
128
|
|
|
129
|
+
if (
|
|
130
|
+
changes.has('contentType') &&
|
|
131
|
+
this.contentType === ThumbnailContentType.IMAGE
|
|
132
|
+
) {
|
|
133
|
+
const toObserve = this.shadowRoot.querySelector('.observe');
|
|
134
|
+
if (toObserve) {
|
|
135
|
+
new ResizeObserver((e, observer) => {
|
|
136
|
+
if (toObserve.clientHeight > 0 && toObserve.clientWidth > 0) {
|
|
137
|
+
this.ratio = toObserve.clientHeight / toObserve.clientWidth;
|
|
138
|
+
this.preview =
|
|
139
|
+
this.ratio === 0 || (this.ratio > 0.25 && this.ratio <= 1.5);
|
|
140
|
+
observer.disconnect();
|
|
141
|
+
}
|
|
142
|
+
}).observe(toObserve);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
|
|
110
146
|
// convert our attachment to a url and label
|
|
111
147
|
if (changes.has('attachment')) {
|
|
112
148
|
if (this.attachment) {
|
|
@@ -134,7 +170,7 @@ export class Thumbnail extends RapidElement {
|
|
|
134
170
|
}
|
|
135
171
|
|
|
136
172
|
public handleThumbnailClicked() {
|
|
137
|
-
if (this.contentType === ThumbnailContentType.IMAGE) {
|
|
173
|
+
if (this.contentType === ThumbnailContentType.IMAGE && this.preview) {
|
|
138
174
|
window.setTimeout(() => {
|
|
139
175
|
const lightbox = document.querySelector('temba-lightbox') as Lightbox;
|
|
140
176
|
lightbox.showElement(this);
|
|
@@ -144,6 +180,14 @@ export class Thumbnail extends RapidElement {
|
|
|
144
180
|
}
|
|
145
181
|
}
|
|
146
182
|
|
|
183
|
+
public handleDownload(e: Event) {
|
|
184
|
+
e.stopPropagation();
|
|
185
|
+
e.preventDefault();
|
|
186
|
+
|
|
187
|
+
// open this.url in another tab
|
|
188
|
+
window.open(this.url, '_blank');
|
|
189
|
+
}
|
|
190
|
+
|
|
147
191
|
public render() {
|
|
148
192
|
return html`
|
|
149
193
|
<div
|
|
@@ -151,21 +195,21 @@ export class Thumbnail extends RapidElement {
|
|
|
151
195
|
class="${getClasses({ wrapper: true, zoom: this.zoom })}"
|
|
152
196
|
url=${this.url}
|
|
153
197
|
>
|
|
154
|
-
|
|
155
|
-
class="
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
198
|
+
${this.contentType === ThumbnailContentType.IMAGE && this.preview
|
|
199
|
+
? html`<div class=""><div class="download" @click=${this.handleDownload.bind(
|
|
200
|
+
this
|
|
201
|
+
)}><temba-icon size="1" style="color:#fff;" name="download"></temba-icon></div><img
|
|
202
|
+
class="observe thumb ${this.contentType}"
|
|
203
|
+
src="${this.url}"
|
|
204
|
+
></img></div>`
|
|
205
|
+
: html`<div
|
|
206
|
+
style="padding:1em; background:rgba(0,0,0,.05);border-radius:var(--curvature);"
|
|
207
|
+
>
|
|
208
|
+
<temba-icon
|
|
164
209
|
size="1.5"
|
|
165
210
|
name="${ThumbnailIcons[this.contentType]}"
|
|
166
|
-
></temba-icon
|
|
167
|
-
|
|
168
|
-
</div>
|
|
211
|
+
></temba-icon>
|
|
212
|
+
</div>`}
|
|
169
213
|
</div>
|
|
170
214
|
`;
|
|
171
215
|
}
|