Skip to content

Commit 2a77b36

Browse files
pdgagopdgago
authored
Merge pull request #1 from sharedlabs/refactor
Refactor
2 parents 2fb7c1c + 425b882 commit 2a77b36

File tree

7 files changed

+575
-457
lines changed

7 files changed

+575
-457
lines changed

‎README.md

Lines changed: 1 addition & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1 @@
1-
# \<file-uploader\>
2-
3-
Element for multiple file upload
4-
5-
## Install the Polymer-CLI
6-
7-
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
8-
9-
## Viewing Your Application
10-
11-
```
12-
$ polymer serve
13-
```
14-
15-
## Building Your Application
16-
17-
```
18-
$ polymer build
19-
```
20-
21-
This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
22-
containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
23-
CSS, and JS optimizers.
24-
25-
You can serve the built versions by giving `polymer serve` a folder to serve
26-
from:
27-
28-
```
29-
$ polymer serve build/bundled
30-
```
31-
32-
## Running Tests
33-
34-
```
35-
$ polymer test
36-
```
37-
38-
Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
1+
# file-uploader

‎bower.json

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
"description": "Element for multiple file upload",
44
"main": "file-uploader.html",
55
"dependencies": {
6-
"polymer": "Polymer/polymer#^1.4.0",
6+
"app-localize-behavior": "PolymerElements/app-localize-behavior#^0.10.1",
77
"input-file": "git@github.com:sharedlabs/input-file.git",
8-
"overlay-container": "git@github.com:sharedlabs/overlay-container.git",
98
"iron-image": "PolymerElements/iron-image#^1.2.5",
10-
"paper-progress": "PolymerElements/paper-progress#^1.0.11"
9+
"offthread-image": "git@github.com:sharedlabs/offthread-image.git",
10+
"overlay-container": "git@github.com:sharedlabs/overlay-container.git",
11+
"paper-progress": "PolymerElements/paper-progress#^1.0.11",
12+
"polymer": "Polymer/polymer#^1.7.0"
1113
},
1214
"devDependencies": {
1315
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

‎demo/index.html

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
77
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
88
<link rel="import" href="../file-uploader.html">
9-
<link rel="import" href="../file-uploader-progress.html">
109

1110
<style is="custom-style">
1211
body {
@@ -28,35 +27,13 @@
2827
<body>
2928

3029
<file-uploader id="fileUploader"></file-uploader>
31-
<file-uploader-progress id="fileUploaderProgress"></file-uploader-progress>
32-
3330
<input type="file" multiple onchange="onInputChange(event)">
3431

3532
<script>
36-
const fileUploader = document.getElementById('fileUploader');
37-
const fileUploaderProgress = document.getElementById('fileUploaderProgress');
38-
3933
function onInputChange(event) {
34+
const fileUploader = document.getElementById('fileUploader');
4035
const files = event.target.files;
41-
const filesProgress = new WeakMap();
42-
let i = 1000;
43-
let completed = 0;
44-
45-
fileUploaderProgress.filesProgress = filesProgress;
46-
fileUploaderProgress.files = [...files];
47-
48-
for (const file of files) {
49-
filesProgress.set(file, 0);
50-
fileUploaderProgress.progress = 0;
51-
52-
setTimeout(_ => {
53-
completed ++;
54-
filesProgress.set(file, 100);
55-
fileUploaderProgress.progress = completed * 100 / files.length;
56-
}, i);
57-
58-
i += 1000;
59-
}
36+
fileUploader.addFile(files);
6037
}
6138
</script>
6239
</body>

‎file-uploader-completed-overlay.html

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
<link rel="import" href="../polymer/polymer.html">
2+
<link rel="import" href="../overlay-container/animated-overlay-behavior.html">
3+
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html">
4+
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
5+
<link rel="import" href="../offthread-image/offthread-image.html">
6+
7+
<!--
8+
`file-uploader-completed-overlay`
9+
10+
@demo demo/index.html
11+
-->
12+
<dom-module id="file-uploader-completed-overlay">
13+
<template>
14+
<style>
15+
:host {
16+
background: white;
17+
border-radius: 4px;
18+
bottom: 30px;
19+
box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.2);
20+
display: inline-block;
21+
left: 30px;
22+
overflow: hidden;
23+
position: fixed;
24+
right: 30px;
25+
width: 100%;
26+
}
27+
28+
@media(min-width: 642px) {
29+
:host {
30+
bottom: 50px;
31+
right: auto;
32+
width: 320px;
33+
}
34+
}
35+
36+
.header {
37+
@apply(--layout-horizontal);
38+
@apply(--layout-center);
39+
padding: 8px 20px;
40+
}
41+
42+
.header__title {
43+
@apply(--layout-flex);
44+
font-size: 18px;
45+
}
46+
47+
.header__close {
48+
border-radius: 50%;
49+
cursor: pointer;
50+
fill: var(--paper-grey-500);
51+
height: 22px;
52+
margin-right: -8px;
53+
padding: 8px;
54+
width: 22px;
55+
}
56+
57+
.header__close:hover {
58+
background: var(--paper-grey-200);
59+
}
60+
61+
#files {
62+
@apply(--layout-horizontal);
63+
@apply(--layout-wrap);
64+
max-height: 224px;
65+
overflow-y: auto;
66+
}
67+
68+
.file__image {
69+
height: 100%;
70+
width: 100%;
71+
}
72+
</style>
73+
74+
<div id="container">
75+
<div class="header">
76+
<div class="header__title">[[_computeHeaderTitle(_files.length, localize)]]</div>
77+
<svg class="header__close" on-tap="_closeTapped" viewBox="0 0 24 24">
78+
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
79+
</svg>
80+
</div>
81+
82+
<div id="files"></div>
83+
</div>
84+
85+
</template>
86+
</dom-module>
87+
88+
<script>
89+
(function() {
90+
'use strict';
91+
92+
Polymer({
93+
94+
is: 'file-uploader-completed-overlay',
95+
96+
properties: {
97+
98+
language: {
99+
type: String,
100+
value: 'en'
101+
},
102+
103+
resources: {
104+
value: _ => {
105+
return {
106+
'en': {
107+
'HeaderTitle': '{length, plural, one {1 item uploaded} other {{length} items uploaded}}'
108+
},
109+
'es': {
110+
'HeaderTitle': 'Se {length, plural, one {ha subido 1 elemento} other {han subido {length} elementos}}'
111+
}
112+
};
113+
}
114+
},
115+
116+
// @override AnimatedOverlayBehavior
117+
noCancelOnEscKey: {
118+
type: Boolean,
119+
value: true
120+
},
121+
122+
// @override AnimatedOverlayBehavior
123+
noCancelOnPopState: {
124+
type: Boolean,
125+
value: true
126+
},
127+
128+
_files: Array
129+
130+
},
131+
132+
behaviors: [
133+
AnimatedOverlayBehavior,
134+
Polymer.AppLocalizeBehavior
135+
],
136+
137+
listeners: {
138+
'overlay-opened': '_overlayOpened',
139+
'overlay-closed-animation-finish': '_overlayAnimatedOut',
140+
},
141+
142+
addFiles(files) {
143+
if (Array.isArray(this._files)) {
144+
this._files = this._files.concat(files).slice(0).reverse();
145+
} else {
146+
this._files = files;
147+
}
148+
},
149+
150+
_overlayOpened() {
151+
this._renderThumbnails();
152+
},
153+
154+
_overlayAnimatedOut() {
155+
this.$.files.innerHTML = '';
156+
},
157+
158+
_renderThumbnails() {
159+
if (!this._files) {
160+
return;
161+
}
162+
163+
this.$.files.innerHTML = '';
164+
const fragment = document.createDocumentFragment();
165+
166+
this._files.forEach((file, index) => {
167+
const el = document.createElement('offthread-image');
168+
169+
el.setAttribute('class', 'file');
170+
el.style = this._computeFileStyle(this._files.length, index);
171+
el.sizing = 'cover';
172+
el.src = this._computeImageUrl(file);
173+
fragment.appendChild(el);
174+
});
175+
176+
Polymer.dom(this.$.files).appendChild(fragment);
177+
},
178+
179+
_computeImageUrl(file) {
180+
const isImage = /image\/.*/.exec(file.type);
181+
182+
if (isImage) {
183+
return URL.createObjectURL(file);
184+
}
185+
},
186+
187+
_computeFileStyle(filesLength, fileIndex) {
188+
let styleAttr = '';
189+
190+
if (filesLength === 1) {
191+
styleAttr = 'height: 200px; width: 100%;'
192+
} else {
193+
styleAttr = 'width: calc(50% - 1px); height: 100px; margin-bottom: 2px;';
194+
}
195+
196+
if (filesLength > 1 && !(fileIndex % 2)) {
197+
styleAttr += ' margin-right: 2px;';
198+
}
199+
200+
return styleAttr;
201+
},
202+
203+
_computeHeaderTitle(filesLength) {
204+
return this.localize('HeaderTitle', 'length', String(filesLength));
205+
},
206+
207+
_closeTapped() {
208+
this._files = [];
209+
this.opened = false;
210+
}
211+
212+
});
213+
214+
}());
215+
</script>

0 commit comments

Comments
 (0)