Skip to content

Commit f41175c

Browse files
RubaXaRubaXa
committed
* example v0.2.2
1 parent 9efa9c6 commit f41175c

File tree

1 file changed

+87
-38
lines changed

1 file changed

+87
-38
lines changed

‎index.html

Lines changed: 87 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -108,13 +108,17 @@
108108
border-radius: 3px;
109109
}
110110
.b-file {
111+
height: 40px;
111112
padding: 5px;
113+
position: relative;
112114
overflow: hidden;
113115
border-radius: 3px;
116+
background-color: #fcfcfc;
114117
background: -webkit-linear-gradient(top, #fcfcfc 0%, #f6f6f6 100%);
115118
background: -moz-linear-gradient(top, #fcfcfc 0%, #f6f6f6 100%);
116119
background: -o-linear-gradient(top, #fcfcfc 0%, #f6f6f6 100%);
117120
background: linear-gradient(to bottom, #fcfcfc 0%, #f6f6f6 100%);
121+
clear: both;
118122
}
119123
.b-file__left {
120124
float: left;
@@ -147,7 +151,6 @@
147151
font-size: 12px;
148152
margin-top: 3px;
149153
}
150-
.b-file_upload .b-file__info { display: none; }
151154

152155
.b-file__bar {
153156
padding-top: 4px;
@@ -159,6 +162,18 @@
159162
.b-file__done {
160163
color: #458383;
161164
}
165+
.b-file__abort {
166+
top: 10px;
167+
right: 20px;
168+
width: 15px;
169+
height: 15px;
170+
position: absolute;
171+
color: #c00;
172+
cursor: pointer;
173+
font-size: 20px;
174+
display: none;
175+
}
176+
.b-file_upload .b-file__abort { display: block; }
162177

163178
.b-progress {
164179
width: 200px;
@@ -281,7 +296,7 @@
281296
<div id="preview" style="margin-top: 30px"></div>
282297

283298
<script id="b-file-ejs" type="text/ejs">
284-
<div id="file-<%=FileAPI.uid(file)%>" class="b-file b-file_<%=file.type.split('/')[0]%>">
299+
<div id="file-<%=FileAPI.uid(file)%>" class="js-file b-file b-file_<%=file.type.split('/')[0]%>">
285300
<div class="js-left b-file__left">
286301
<img src="<%=icon[file.type.split('/')[0]]||icon.def%>" width="32" height="32" style="margin: 2px 0 0 3px"/>
287302
</div>
@@ -292,15 +307,14 @@
292307
<div class="b-progress"><div class="js-bar b-progress__bar"></div></div>
293308
</div>
294309
</div>
310+
<i class="js-abort b-file__abort" title="abort">&times;</i>
295311
</div>
296312
</script>
297313

298314
<script id="b-layer-ejs" type="text/ejs">
299315
<div class="b-layer">
300316
<div class="b-layer__h1"><%=file.name%></div>
301-
<% if( info.exif ){ %>
302-
<div class="js-img b-layer__img"></div>
303-
<% } %>
317+
<div class="js-img b-layer__img"></div>
304318
<div class="b-layer__info">
305319
<%
306320
FileAPI.each(info, function(val, key){
@@ -360,6 +374,7 @@
360374
},
361375

362376
files: [],
377+
index: 0,
363378
active: false,
364379

365380
add: function (file){
@@ -368,44 +383,53 @@
368383
if( /^image/.test(file.type) ){
369384
FileAPI.Image(file).preview(35).get(function (err, img){
370385
if( !err ){
371-
372386
FU._getEl(file, '.js-left')
373387
.addClass('b-file__left_border')
374388
.html(img)
375389
;
376-
377-
FU._getEl(file).click(function (){
378-
FU.showLayer(file);
379-
return false;
380-
});
381390
}
382391
});
383392
}
384-
else {
385-
FU._getEl(file).click(function (){
386-
FU.showLayer(file);
387-
return false;
388-
});
393+
},
394+
395+
getFileById: function (id){
396+
var i = FU.files.length;
397+
while( i-- ){
398+
if( FileAPI.uid(FU.files[i]) == id ){
399+
return FU.files[i];
400+
}
389401
}
390402
},
391403

392-
showLayer: function (file){
393-
var $Layer = $('#layer-'+FileAPI.uid(file));
404+
showLayer: function (id){
405+
var $Layer = $('#layer-'+id), file = this.getFileById(id);
394406

395407
if( !$Layer[0] ){
396-
$Layer = $('<div/>').appendTo('body').attr('id', 'layer-'+FileAPI.uid(file));
408+
$Layer = $('<div/>').appendTo('body').attr('id', 'layer-'+id);
397409
}
398410

411+
$Layer.css('top', $(window).scrollTop() + 30);
412+
399413
FileAPI.getInfo(file, function (err, info){
400414
$Layer
401415
.click(function (){ $(document).click(); })
402-
.html(tmpl($('#b-layer-ejs').html(), { file: file, info: err ? {} : info }))
416+
.html(tmpl($('#b-layer-ejs').html(), {
417+
file: file
418+
, info: $.extend(err ? {} : info, { size: (file.size/1024).toFixed(3) + ' KB' })
419+
}))
403420
;
404421

405422
if( /image/i.test(file.type) ){
406-
FileAPI.Image(file).preview(300).get(function (err, img){
407-
$Layer.find('.js-img').append(img);
408-
});
423+
if( err ){
424+
$Layer.find('.js-img').html('Ooops.');
425+
}
426+
else {
427+
FileAPI.Image(file).preview(300).get(function (err, img){
428+
$Layer.find('.js-img').append(img);
429+
});
430+
}
431+
} else {
432+
$Layer.find('.js-img').remove();
409433
}
410434

411435
$(document).off('click.layer keyup.layer').one('click.layer keyup.layer', function (evt){
@@ -414,18 +438,16 @@
414438
});
415439
},
416440

417-
clone: function (el){
418-
if( /canvas/i.test(el.nodeName) ){
419-
var newEl = $(el).clone()[0];
420-
newEl.getContext('2d').drawImage(el, 0, 0);
421-
el = newEl;
441+
start: function (){
442+
if( !FU.active && (FU.active = FU.files.length > FU.index) ){
443+
FU._upload(FU.files[FU.index]);
422444
}
423-
return $(el);
424445
},
425446

426-
start: function (){
427-
if( !FU.active && (FU.active = FU.files.length > 0) ){
428-
FU._upload(FU.files.shift());
447+
abort: function (id){
448+
var file = this.getFileById(id);
449+
if( file.xhr ){
450+
file.xhr.abort();
429451
}
430452
},
431453

@@ -436,10 +458,11 @@
436458

437459
_upload: function (file){
438460
if( file ){
439-
FileAPI.upload({
440-
url: 'http://rubaxa.org/index.php',
461+
file.xhr = FileAPI.upload({
462+
url: 'http://www.rubaxa.org/index.php',
441463
files: { file: file },
442464
upload: function (){
465+
FU._getEl(file).addClass('b-file_upload');
443466
FU._getEl(file, '.js-progress')
444467
.css({ opacity: 0 }).show()
445468
.animate({ opacity: 1 }, 100)
@@ -451,10 +474,13 @@
451474
complete: function (err, xhr){
452475
var state = err ? 'error' : 'done';
453476

477+
FU._getEl(file).removeClass('b-file_upload');
454478
FU._getEl(file, '.js-progress').animate({ opacity: 0 }, 200, function (){ $(this).hide() });
455-
FU._getEl(file, '.js-info').append(', <b class="b-file__'+state+'">'+state+'</b>');
479+
FU._getEl(file, '.js-info').append(', <b class="b-file__'+state+'">'+(err ? (xhr.statusText || err) : state)+'</b>');
456480

481+
FU.index++;
457482
FU.active = false;
483+
458484
FU.start();
459485
}
460486
});
@@ -466,12 +492,35 @@
466492
var $Queue = $('<div/>').prependTo('#preview');
467493

468494
FileAPI.each(files, function (file){
469-
$Queue.append(tmpl($('#b-file-ejs').html(), { file: file, icon: FU.icon }));
495+
if( file.size >= 25*FileAPI.MB ){
496+
alert('Sorrow.\nMax size 25MB')
497+
}
498+
else if( file.size === void 0 ){
499+
$('#oooops').show();
500+
$('#buttons-panel').hide();
501+
}
502+
else {
503+
$Queue.append(tmpl($('#b-file-ejs').html(), { file: file, icon: FU.icon }));
470504

471-
FU.add(file);
472-
FU.start();
505+
FU.add(file);
506+
FU.start();
507+
}
473508
});
474509
}
510+
511+
512+
$(document)
513+
.on('click', '.js-file', function (evt){
514+
if( !evt.isDefaultPrevented() ){
515+
FU.showLayer(evt.currentTarget.id.split('-')[1]);
516+
evt.preventDefault();
517+
}
518+
})
519+
.on('click', '.js-abort', function (evt){
520+
FU.abort($(evt.target).closest('.js-file').attr('id').split('-')[1]);
521+
evt.preventDefault();
522+
})
523+
;
475524
}); // ready
476525
</script>
477526

0 commit comments

Comments
 (0)