Skip to content

Commit 2c1004b

Browse files
JeremyFagisJeremyFagis
committed
Various fixes.
1 parent 51473a3 commit 2c1004b

File tree

7 files changed

+84
-49
lines changed

7 files changed

+84
-49
lines changed

‎README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,7 @@ $('.dropify').dropify({
158158
'default': 'Drag and drop a file here or click',
159159
'replace': 'Drag and drop or click to replace',
160160
'remove': 'Remove',
161-
'error': 'Sorry, this file is too large'
162-
161+
'error': 'Ooops, something wrong appended.'
163162
}
164163
}
165164
```
@@ -227,7 +226,7 @@ drEvent.on('dropify.afterClear', function(event, element){
227226
var drEvent = $('.dropify').dropify();
228227

229228
drEvent.on('dropify.errors', function(event, element){
230-
alert('There is error!');
229+
alert('Has Errors!');
231230
});
232231
```
233232

‎dist/css/demo.css‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1051,6 +1051,21 @@ label {
10511051
p.help {
10521052
color: #999; }
10531053

1054+
#toggleDropify {
1055+
font-size: 12px;
1056+
text-transform: uppercase;
1057+
background: #DDD;
1058+
color: #888;
1059+
font-weight: bold;
1060+
border: 0;
1061+
padding: 6px 10px;
1062+
border-radius: 4px;
1063+
margin-left: 10px;
1064+
-webkit-transition: background 0.1s linear;
1065+
transition: background 0.1s linear; }
1066+
#toggleDropify:hover {
1067+
background: #EEE; }
1068+
10541069
@media (max-width: 480px) {
10551070
header#header {
10561071
padding: 30px 15px; }

‎dist/js/dropify.js‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ function Dropify(element, options) {
7676
this.imgFileExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
7777
this.errorsEvent = $.Event('dropify.errors');
7878
this.isDisabled = false;
79+
this.isInit = false;
7980
this.file = {
8081
object: null,
8182
name: null,
@@ -94,7 +95,6 @@ function Dropify(element, options) {
9495
this.onFileReady = this.onFileReady.bind(this);
9596

9697
this.translateMessages();
97-
this.translateErrors();
9898
this.createElements();
9999
this.setContainerSize();
100100

@@ -117,6 +117,7 @@ Dropify.prototype.onChange = function()
117117
*/
118118
Dropify.prototype.createElements = function()
119119
{
120+
this.isInit = true;
120121
this.input.wrap($(this.settings.tpl.wrap));
121122
this.wrapper = this.input.parent();
122123

@@ -228,7 +229,7 @@ Dropify.prototype.onFileReady = function(event, src)
228229
var errorNamespace = this.errorsEvent.errors[i].namespace;
229230
var errorKey = errorNamespace.split('.').pop();
230231
this.showError(errorKey);
231-
};
232+
}
232233

233234
if (typeof this.errorsContainer !== "undefined") {
234235
this.errorsContainer.addClass('visible');
@@ -284,7 +285,13 @@ Dropify.prototype.setPreview = function(src)
284285
this.hideLoader();
285286

286287
if (this.isImage() === true) {
287-
$('<img />').attr('src', src).appendTo(render);
288+
var imgTag = $('<img />').attr('src', src);
289+
290+
if (this.settings.height) {
291+
imgTag.css("max-height", this.settings.height);
292+
}
293+
294+
imgTag.appendTo(render);
288295
} else {
289296
$('<i />').attr('class', 'dropify-font-file').appendTo(render);
290297
$('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
@@ -417,18 +424,6 @@ Dropify.prototype.translateMessages = function()
417424
}
418425
};
419426

420-
/**
421-
* Translate errors if needed.
422-
*/
423-
Dropify.prototype.translateErrors = function()
424-
{
425-
// for (var name in this.settings.tpl) {
426-
// for (var key in this.settings.messages) {
427-
// this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
428-
// }
429-
// }
430-
};
431-
432427
/**
433428
* Check the limit filesize.
434429
*/
@@ -576,8 +571,6 @@ Dropify.prototype.getError = function(errorKey)
576571
return error;
577572
};
578573

579-
580-
581574
/**
582575
* Show the loader
583576
*/
@@ -598,20 +591,30 @@ Dropify.prototype.hideLoader = function()
598591
}
599592
};
600593

594+
/**
595+
* Destroy dropify
596+
*/
601597
Dropify.prototype.destroy = function()
602598
{
603599
this.input.siblings().remove();
604600
this.input.unwrap();
601+
this.isInit = false;
605602
};
606603

604+
/**
605+
* Init dropify
606+
*/
607607
Dropify.prototype.init = function()
608608
{
609609
this.createElements();
610610
};
611611

612+
/**
613+
* Test if element is init
614+
*/
612615
Dropify.prototype.isDropified = function()
613616
{
614-
return this.input.parent().hasClass('dropify-wrapper');
617+
return this.isInit;
615618
};
616619

617620
$.fn[pluginName] = function(options) {

‎dist/js/dropify.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h2>Before</h2>
3030
<hr class="big" />
3131
<h2>Now</h2>
3232
<label for="input-file-now">Your so fresh input file — Default version</label>
33-
<input type="file" id="input-file-now" class="dropify" data-allowed-formats="square portrait" data-max-file-size="2M" data-max-height="1000" />
33+
<input type="file" id="input-file-now" class="dropify" />
3434
<br />
3535
<label for="input-file-now-custom-1">You can add a default value</label>
3636
<input type="file" id="input-file-now-custom-1" class="dropify" data-default-file="src/images/test-image-1.jpg" />
@@ -56,10 +56,13 @@ <h2>Now</h2>
5656
<label for="input-file-events">You can use events</label>
5757
<input type="file" id="input-file-events" class="dropify-event" data-default-file="src/images/test-image-1.jpg" />
5858
<br />
59-
<label for="input-file-to-destroy">You can destroy it</label>
60-
<button type="button" id="toggleDropify">Init/Destroy</button><br />
59+
<label for="input-file-to-destroy">You can destroy it <button type="button" id="toggleDropify">Init/Destroy</button></label>
6160
<input type="file" id="input-file-to-destroy" class="dropify" data-default-file="src/images/test-image-1.jpg" />
6261
<br />
62+
<label for="input-file-to-destroy">Multiple options are available</label>
63+
<input type="file" id="input-file-to-destroy" class="dropify" data-allowed-formats="portrait square" data-max-file-size="2M" data-max-height="2000" />
64+
<p class="help">Only portrait or square images, 2M max and 2000px max-height.</p>
65+
<br />
6366
<h2>French one</h2>
6467
<label for="input-file-french-1">"Et voilà"</label>
6568
<input type="file" id="input-file-french-1" class="dropify-fr" data-default-file="" />
@@ -76,7 +79,7 @@ <h2>French one</h2>
7679
<div class="col-sm-8 col-xs-6 no-padding-bottom">
7780
<a href="https://github.com/JeremyFagis/dropify" target="_blank">Github repository</a>
7881
</div>
79-
<div class="col-sm-4 col-xs-6 text-right no-padding-bottom">2015 &copy; <a href="http://www.fagis.fr" target="_blank">Jeremy FAGIS</a></div>
82+
<div class="col-sm-4 col-xs-6 text-right no-padding-bottom">2016 &copy; <a href="http://www.fagis.fr" target="_blank">Jeremy FAGIS</a></div>
8083
</div>
8184
</div>
8285

@@ -114,11 +117,6 @@ <h2>French one</h2>
114117
console.log('Has Errors');
115118
});
116119

117-
drEvent.on('dropify.error.maxHeight', function(event, element){
118-
console.log('Image trop grande !');
119-
});
120-
121-
122120
var drDestroy = $('#input-file-to-destroy').dropify();
123121
drDestroy = drDestroy.data('dropify')
124122
$('#toggleDropify').on('click', function(e){

‎src/js/dropify.js‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ function Dropify(element, options) {
5858
this.imgFileExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp'];
5959
this.errorsEvent = $.Event('dropify.errors');
6060
this.isDisabled = false;
61+
this.isInit = false;
6162
this.file = {
6263
object: null,
6364
name: null,
@@ -76,7 +77,6 @@ function Dropify(element, options) {
7677
this.onFileReady = this.onFileReady.bind(this);
7778

7879
this.translateMessages();
79-
this.translateErrors();
8080
this.createElements();
8181
this.setContainerSize();
8282

@@ -99,6 +99,7 @@ Dropify.prototype.onChange = function()
9999
*/
100100
Dropify.prototype.createElements = function()
101101
{
102+
this.isInit = true;
102103
this.input.wrap($(this.settings.tpl.wrap));
103104
this.wrapper = this.input.parent();
104105

@@ -210,7 +211,7 @@ Dropify.prototype.onFileReady = function(event, src)
210211
var errorNamespace = this.errorsEvent.errors[i].namespace;
211212
var errorKey = errorNamespace.split('.').pop();
212213
this.showError(errorKey);
213-
};
214+
}
214215

215216
if (typeof this.errorsContainer !== "undefined") {
216217
this.errorsContainer.addClass('visible');
@@ -266,7 +267,13 @@ Dropify.prototype.setPreview = function(src)
266267
this.hideLoader();
267268

268269
if (this.isImage() === true) {
269-
$('<img />').attr('src', src).appendTo(render);
270+
var imgTag = $('<img />').attr('src', src);
271+
272+
if (this.settings.height) {
273+
imgTag.css("max-height", this.settings.height);
274+
}
275+
276+
imgTag.appendTo(render);
270277
} else {
271278
$('<i />').attr('class', 'dropify-font-file').appendTo(render);
272279
$('<span class="dropify-extension" />').html(this.getFileType()).appendTo(render);
@@ -399,18 +406,6 @@ Dropify.prototype.translateMessages = function()
399406
}
400407
};
401408

402-
/**
403-
* Translate errors if needed.
404-
*/
405-
Dropify.prototype.translateErrors = function()
406-
{
407-
// for (var name in this.settings.tpl) {
408-
// for (var key in this.settings.messages) {
409-
// this.settings.tpl[name] = this.settings.tpl[name].replace('{{ ' + key + ' }}', this.settings.messages[key]);
410-
// }
411-
// }
412-
};
413-
414409
/**
415410
* Check the limit filesize.
416411
*/
@@ -558,8 +553,6 @@ Dropify.prototype.getError = function(errorKey)
558553
return error;
559554
};
560555

561-
562-
563556
/**
564557
* Show the loader
565558
*/
@@ -580,20 +573,30 @@ Dropify.prototype.hideLoader = function()
580573
}
581574
};
582575

576+
/**
577+
* Destroy dropify
578+
*/
583579
Dropify.prototype.destroy = function()
584580
{
585581
this.input.siblings().remove();
586582
this.input.unwrap();
583+
this.isInit = false;
587584
};
588585

586+
/**
587+
* Init dropify
588+
*/
589589
Dropify.prototype.init = function()
590590
{
591591
this.createElements();
592592
};
593593

594+
/**
595+
* Test if element is init
596+
*/
594597
Dropify.prototype.isDropified = function()
595598
{
596-
return this.input.parent().hasClass('dropify-wrapper');
599+
return this.isInit;
597600
};
598601

599602
$.fn[pluginName] = function(options) {

‎src/sass/demo.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,23 @@ p.help {
6565
color: #999;
6666
}
6767

68+
#toggleDropify {
69+
font-size: 12px;
70+
text-transform: uppercase;
71+
background: #DDD;
72+
color: #888;
73+
font-weight: bold;
74+
border: 0;
75+
padding: 6px 10px;
76+
border-radius: 4px;
77+
margin-left: 10px;
78+
transition: background 0.1s linear;
79+
80+
&:hover {
81+
background: #EEE;
82+
}
83+
}
84+
6885
@media (max-width: 480px) {
6986
header#header {
7087
padding: 30px 15px;

0 commit comments

Comments
 (0)