|
1 | 1 | /*! |
2 | 2 | * @copyright Copyright © Kartik Visweswaran, Krajee.com, 2014 |
3 | | - * @version 2.7.0 |
| 3 | + * @version 2.8.0 |
4 | 4 | * |
5 | 5 | * File input styled for Bootstrap 3.0 that utilizes HTML5 File Input's advanced |
6 | 6 | * features including the FileReader API. |
|
45 | 45 | ' <div class="file-preview-status text-center text-success"></div>\n' + |
46 | 46 | ' <div class="kv-fileinput-error"></div>\n' + |
47 | 47 | '</div>', |
| 48 | + icon: '<span class="glyphicon glyphicon-file kv-caption-icon"></span>', |
48 | 49 | caption: '<div tabindex="-1" class="form-control file-caption {class}">\n' + |
49 | | - ' <span class="glyphicon glyphicon-file kv-caption-icon"></span><div class="file-caption-name"></div>\n' + |
| 50 | + ' <div class="file-caption-name"></div>\n' + |
50 | 51 | '</div>', |
51 | 52 | modal: '<div id="{id}" class="modal fade">\n' + |
52 | 53 | ' <div class="modal-dialog modal-lg">\n' + |
|
108 | 109 | '</div>', |
109 | 110 | }; |
110 | 111 | var defaultPreviewSettings = { |
111 | | - image: {width: "100%", height: "160px"}, |
| 112 | + image: {width: "auto", height: "160px"}, |
112 | 113 | html: {width: "320px", height: "180px"}, |
113 | 114 | text: {width: "160px", height: "160px"}, |
114 | 115 | video: {width: "320px", height: "240px"}, |
|
192 | 193 | self.reader = null; |
193 | 194 | self.showCaption = options.showCaption; |
194 | 195 | self.showPreview = options.showPreview; |
| 196 | + self.autoFitCaption = options.autoFitCaption; |
195 | 197 | self.maxFileSize = options.maxFileSize; |
196 | 198 | self.maxFileCount = options.maxFileCount; |
197 | 199 | self.msgSizeTooLarge = options.msgSizeTooLarge; |
|
270 | 272 | caption: self.$caption.html() |
271 | 273 | }; |
272 | 274 | self.options = options; |
| 275 | + self.autoSizeCaption(); |
273 | 276 | self.$element.removeClass('file-loading'); |
274 | 277 | }, |
275 | 278 | getLayoutTemplate: function(t) { |
|
283 | 286 | listen: function () { |
284 | 287 | var self = this, $el = self.$element, $cap = self.$captionContainer, $btnFile = self.$btnFile; |
285 | 288 | $el.on('change', $.proxy(self.change, self)); |
| 289 | + $(window).on('resize', function() { |
| 290 | + setTimeout(function() { |
| 291 | + self.autoSizeCaption(); |
| 292 | + }, 100); |
| 293 | + }); |
286 | 294 | $btnFile.on('click', function (ev) { |
287 | 295 | self.clear(false); |
288 | 296 | $cap.focus(); |
|
298 | 306 | initPreview: function () { |
299 | 307 | var self = this, html = '', content = self.initialPreview, len = self.initialPreviewCount, |
300 | 308 | cap = self.initialCaption.length, previewId = "preview-" + uniqId(), |
301 | | - caption = (cap > 0) ? self.initialCaption : self.msgSelected.replace(/\{n\}/g, len), |
302 | | - title = $(caption).text(); |
| 309 | + caption = (cap > 0) ? self.initialCaption : self.msgSelected.replace(/\{n\}/g, len); |
303 | 310 | if (isArray(content) && len > 0) { |
304 | 311 | for (var i = 0; i < len; i++) { |
305 | 312 | previewId += '-' + i; |
|
322 | 329 | } |
323 | 330 | } else { |
324 | 331 | if (cap > 0) { |
325 | | - self.$caption.html(caption); |
326 | | - self.$captionContainer.attr('title', title); |
| 332 | + self.setCaption(caption); |
327 | 333 | return; |
328 | 334 | } else { |
329 | 335 | return; |
|
332 | 338 | } |
333 | 339 | self.initialPreviewContent = html; |
334 | 340 | self.$preview.html(html); |
335 | | - self.$caption.html(caption); |
336 | | - self.$captionContainer.attr('title', title); |
| 341 | + self.setCaption(caption); |
337 | 342 | self.$container.removeClass('file-input-new'); |
338 | 343 | }, |
339 | 344 | clearObjects: function() { |
|
378 | 383 | if (self.reader instanceof FileReader) { |
379 | 384 | self.reader.abort(); |
380 | 385 | } |
| 386 | + self.autoSizeCaption(); |
381 | 387 | self.clearFileInput(); |
382 | 388 | self.resetErrors(true); |
383 | 389 |
|
|
399 | 405 | var cap = (!self.overwriteInitial && self.initialCaption.length > 0) ? |
400 | 406 | self.original.caption : ''; |
401 | 407 | self.$caption.html(cap); |
402 | | - self.$captionContainer.attr('title', ''); |
| 408 | + self.$caption.attr('title', ''); |
403 | 409 | self.$container.removeClass('file-input-new').addClass('file-input-new'); |
404 | 410 | } |
405 | 411 | self.hideFileIcon(); |
|
532 | 538 | .replace(/\{width\}/g, config.width).replace(/\{height\}/g, config.height); |
533 | 539 | } |
534 | 540 | $preview.append("\n" + content); |
| 541 | + self.autoSizeImage(previewId); |
535 | 542 | } else { |
536 | 543 | self.previewDefault(file, previewId); |
537 | 544 | } |
|
640 | 647 | slug: function (text) { |
641 | 648 | return isEmpty(text) ? '' : text.split(/(\\|\/)/g).pop().replace(/[^\w-.\\\/ ]+/g,''); |
642 | 649 | }, |
| 650 | + setCaption: function(content) { |
| 651 | + var self = this, title = $('<div>' + content + '</div>').text(), |
| 652 | + icon = self.layoutTemplates['icon'], |
| 653 | + out = icon + title; |
| 654 | + if (self.$caption.length == 0) { |
| 655 | + return; |
| 656 | + } |
| 657 | + self.$caption.html(out); |
| 658 | + self.$caption.attr('title', title); |
| 659 | + self.autoSizeCaption(); |
| 660 | + }, |
| 661 | + autoSizeImage: function(previewId) { |
| 662 | + var self = this, $preview = self.$preview, |
| 663 | + $thumb = $preview.find("#" + previewId), |
| 664 | + $img = $thumb.find('img'); |
| 665 | + if (!$img.length) { |
| 666 | + return; |
| 667 | + } |
| 668 | + $img.on('load', function() { |
| 669 | + var w1 = $thumb.width(), w2 = $preview.width(); |
| 670 | + if (w1 > w2) { |
| 671 | + $img.css('width', '100%'); |
| 672 | + $thumb.css('width', '97%'); |
| 673 | + } |
| 674 | + self.$element.trigger('fileimageloaded', previewId); |
| 675 | + }); |
| 676 | + }, |
| 677 | + autoSizeCaption: function() { |
| 678 | + var self = this; |
| 679 | + if (self.$caption.length == 0 || !self.autoFitCaption) { |
| 680 | + return; |
| 681 | + } |
| 682 | + self.$caption.css('width', 0); |
| 683 | + setTimeout(function() { |
| 684 | + var w = self.$captionContainer.width(); |
| 685 | + self.$caption.css('width', 0.98 * w); |
| 686 | + }, 100); |
| 687 | + }, |
643 | 688 | change: function (e) { |
644 | 689 | var self = this, $el = self.$element, label = self.slug($el.val()), |
645 | 690 | total = 0, $preview = self.$preview, files = $el.get(0).files, msgSelected = self.msgSelected, |
|
678 | 723 | } else { |
679 | 724 | self.showFileIcon(); |
680 | 725 | } |
681 | | - self.$caption.html(log); |
682 | | - self.$captionContainer.attr('title', $(log).text()); |
| 726 | + self.setCaption(log); |
683 | 727 | self.$container.removeClass('file-input-new'); |
684 | 728 | $el.trigger('fileselect', [numFiles, label]); |
685 | 729 | }, |
|
776 | 820 | showPreview: true, |
777 | 821 | showRemove: true, |
778 | 822 | showUpload: true, |
| 823 | + autoFitCaption: true, |
779 | 824 | mainClass: '', |
780 | 825 | previewClass: '', |
781 | 826 | captionClass: '', |
|
0 commit comments