Fix #481: Universal Module Definition for use with CommonJS, AMD or browser globals

CHANGE.md

@@ -3,7 +3,7 @@ Change Log: `bootstrap-fileinput`
 
 ## version 4.2.8
 
-**Date:** 21-Oct-2015
+**Date:** 23-Oct-2015
 
 1. Update bootstrap bower version to support only 3.x variants.
 2. Implement package.json.
@@ -12,6 +12,7 @@ Change Log: `bootstrap-fileinput`
 5. (enh #460): Update CSS selectors prefix to start with `file`.
 6. (enh #462): Responsive buttons and new property `buttonLabelClass`.
 7. (enh #474): Upload via button within each preview thumbnail skips last file for async uploads.
+8. (enh #481): Universal Module Definition for use with CommonJS, AMD or browser globals.
 
 ## version 4.2.7
 

js/fileinput.js

@@ -15,7 +15,22 @@
  * For more JQuery plugins visit http://plugins.krajee.com
  * For more Yii related demos visit http://demos.krajee.com
  */
-(function ($) {
+(function (factory) {
+    "use strict";
+    if (typeof define === 'function' && define.amd) { // jshint ignore:line
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory); // jshint ignore:line
+    } else { // noinspection JSUnresolvedVariable
+        if (typeof module === 'object' && module.exports) { // jshint ignore:line
+            // Node/CommonJS
+            // noinspection JSUnresolvedVariable
+            module.exports = factory(require('jquery')); // jshint ignore:line
+        } else {
+            // Browser globals
+            factory(window.jQuery);
+        }
+    }
+}(function ($) {
     "use strict";
 
     $.fn.fileinputLocales = {};
@@ -239,7 +254,7 @@
         /** @namespace div.ondragstart */
         /** @namespace div.ondrop */
         return !isIE(9) && !isEdge() && // Fix for MS Edge drag & drop support bug
-        (div.draggable !== undefined || (div.ondragstart !== undefined && div.ondrop !== undefined));
+            (div.draggable !== undefined || (div.ondragstart !== undefined && div.ondrop !== undefined));
     };
     hasFileUploadSupport = function () {
         return hasFileAPISupport() && window.FormData;
@@ -249,14 +264,14 @@
     };
     STYLE_SETTING = 'style="width:{width};height:{height};"';
     OBJECT_PARAMS = '      <param name="controller" value="true" />\n' +
-    '      <param name="allowFullScreen" value="true" />\n' +
-    '      <param name="allowScriptAccess" value="always" />\n' +
-    '      <param name="autoPlay" value="false" />\n' +
-    '      <param name="autoStart" value="false" />\n' +
-    '      <param name="quality" value="high" />\n';
+        '      <param name="allowFullScreen" value="true" />\n' +
+        '      <param name="allowScriptAccess" value="always" />\n' +
+        '      <param name="autoPlay" value="false" />\n' +
+        '      <param name="autoStart" value="false" />\n' +
+        '      <param name="quality" value="high" />\n';
     DEFAULT_PREVIEW = '<div class="file-preview-other">\n' +
-    '   <span class="{previewFileIconClass}">{previewFileIcon}</span>\n' +
-    '</div>';
+        '   <span class="{previewFileIconClass}">{previewFileIcon}</span>\n' +
+        '</div>';
     defaultFileActionSettings = {
         removeIcon: '<i class="glyphicon glyphicon-trash text-danger"></i>',
         removeClass: 'btn btn-xs btn-default',
@@ -274,129 +289,130 @@
         indicatorLoadingTitle: 'Uploading ...'
     };
     tMain1 = '{preview}\n' +
-    '<div class="kv-upload-progress hide"></div>\n' +
-    '<div class="input-group {class}">\n' +
-    '   {caption}\n' +
-    '   <div class="input-group-btn">\n' +
-    '       {remove}\n' +
-    '       {cancel}\n' +
-    '       {upload}\n' +
-    '       {browse}\n' +
-    '   </div>\n' +
-    '</div>';
+        '<div class="kv-upload-progress hide"></div>\n' +
+        '<div class="input-group {class}">\n' +
+        '   {caption}\n' +
+        '   <div class="input-group-btn">\n' +
+        '       {remove}\n' +
+        '       {cancel}\n' +
+        '       {upload}\n' +
+        '       {browse}\n' +
+        '   </div>\n' +
+        '</div>';
     tMain2 = '{preview}\n<div class="kv-upload-progress hide"></div>\n{remove}\n{cancel}\n{upload}\n{browse}\n';
     tPreview = '<div class="file-preview {class}">\n' +
-    '    {close}' +
-    '    <div class="{dropClass}">\n' +
-    '    <div class="file-preview-thumbnails">\n' +
-    '    </div>\n' +
-    '    <div class="clearfix"></div>' +
-    '    <div class="file-preview-status text-center text-success"></div>\n' +
-    '    <div class="kv-fileinput-error"></div>\n' +
-    '    </div>\n' +
-    '</div>';
+        '    {close}' +
+        '    <div class="{dropClass}">\n' +
+        '    <div class="file-preview-thumbnails">\n' +
+        '    </div>\n' +
+        '    <div class="clearfix"></div>' +
+        '    <div class="file-preview-status text-center text-success"></div>\n' +
+        '    <div class="kv-fileinput-error"></div>\n' +
+        '    </div>\n' +
+        '</div>';
     tClose = '<div class="close fileinput-remove">&times;</div>\n';
     tIcon = '<span class="glyphicon glyphicon-file kv-caption-icon"></span>';
     tCaption = '<div tabindex="500" class="form-control file-caption {class}">\n' +
-    '   <div class="file-caption-name"></div>\n' +
-    '</div>\n';
-    tBtnDefault = '<button type="{type}" tabindex="500" title="{title}" class="{css}"{status}>{icon}{label}</button>';
-    tBtnLink = '<a href="{href}" tabindex="500" title="{title}" class="{css}"{status}>{icon}{label}</a>';
-    tBtnBrowse = '<div tabindex="500" class="{css}"{status}>{icon}{label}</div>';
+        '   <div class="file-caption-name"></div>\n' +
+        '</div>\n';
+    //noinspection HtmlUnknownAttribute
+    tBtnDefault = '<button type="{type}" tabindex="500" title="{title}" class="{css}" {status}>{icon}{label}</button>';
+    tBtnLink = '<a href="{href}" tabindex="500" title="{title}" class="{css}" {status}>{icon}{label}</a>';
+    tBtnBrowse = '<div tabindex="500" class="{css}" {status}>{icon}{label}</div>';
     tModal = '<div id="{id}" class="file-preview-detail-modal modal fade" tabindex="-1">\n' +
-    '  <div class="modal-dialog modal-lg">\n' +
-    '    <div class="modal-content">\n' +
-    '      <div class="modal-header">\n' +
-    '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n' +
-    '        <h3 class="modal-title">{heading} <small>{title}</small></h3>\n' +
-    '      </div>\n' +
-    '      <div class="modal-body">\n' +
-    '           <pre>{body}</pre>\n' +
-    '      </div>\n' +
-    '    </div>\n' +
-    '  </div>\n' +
-    '</div>';
+        '  <div class="modal-dialog modal-lg">\n' +
+        '    <div class="modal-content">\n' +
+        '      <div class="modal-header">\n' +
+        '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\n' +
+        '        <h3 class="modal-title">{heading} <small>{title}</small></h3>\n' +
+        '      </div>\n' +
+        '      <div class="modal-body">\n' +
+        '           <pre>{body}</pre>\n' +
+        '      </div>\n' +
+        '    </div>\n' +
+        '  </div>\n' +
+        '</div>';
     tProgress = '<div class="progress">\n' +
-    '    <div class="{class}" role="progressbar"' +
-    ' aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
-    '        {percent}%\n' +
-    '     </div>\n' +
-    '</div>';
+        '    <div class="{class}" role="progressbar"' +
+        ' aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
+        '        {percent}%\n' +
+        '     </div>\n' +
+        '</div>';
     tFooter = '<div class="file-thumbnail-footer">\n' +
-    '    <div class="file-footer-caption" title="{caption}">{caption}</div>\n' +
-    '    {progress} {actions}\n' +
-    '</div>';
+        '    <div class="file-footer-caption" title="{caption}">{caption}</div>\n' +
+        '    {progress} {actions}\n' +
+        '</div>';
     tActions = '<div class="file-actions">\n' +
-    '    <div class="file-footer-buttons">\n' +
-    '        {upload}{delete}{other}' +
-    '    </div>\n' +
-    '    <div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
-    '    <div class="clearfix"></div>\n' +
-    '</div>';
+        '    <div class="file-footer-buttons">\n' +
+        '        {upload}{delete}{other}' +
+        '    </div>\n' +
+        '    <div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
+        '    <div class="clearfix"></div>\n' +
+        '</div>';
     tActionDelete = '<button type="button" class="kv-file-remove {removeClass}" ' +
-    'title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n';
+        'title="{removeTitle}"{dataUrl}{dataKey}>{removeIcon}</button>\n';
     tActionUpload = '<button type="button" class="kv-file-upload {uploadClass}" title="{uploadTitle}">' +
-    '   {uploadIcon}\n</button>\n';
+        '   {uploadIcon}\n</button>\n';
     tZoom = '<button type="button" class="btn btn-default btn-xs btn-block" title="{zoomTitle}: {caption}" onclick="{dialog}">\n' +
-    '   {zoomInd}\n' +
-    '</button>\n';
+        '   {zoomInd}\n' +
+        '</button>\n';
     tGeneric = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}">\n' +
-    '   {content}\n' +
-    '   {footer}\n' +
-    '</div>\n';
+        '   {content}\n' +
+        '   {footer}\n' +
+        '</div>\n';
     tHtml = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}">\n' +
-    '    <object class="file-object" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
-    '       ' + DEFAULT_PREVIEW + '\n' +
-    '    </object>\n' +
-    '   {footer}\n' +
-    '</div>';
+        '    <object class="file-object" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
+        '       ' + DEFAULT_PREVIEW + '\n' +
+        '    </object>\n' +
+        '   {footer}\n' +
+        '</div>';
     tImage = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}">\n' +
-    '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" ' + STYLE_SETTING + '>\n' +
-    '   {footer}\n' +
-    '</div>\n';
+        '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" ' + STYLE_SETTING + '>\n' +
+        '   {footer}\n' +
+        '</div>\n';
     tText = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}">\n' +
-    '   <pre class="file-preview-text" title="{caption}" ' + STYLE_SETTING + '>{data}</pre>\n' +
-    '   {zoom}\n' +
-    '   {footer}\n' +
-    '</div>';
+        '   <pre class="file-preview-text" title="{caption}" ' + STYLE_SETTING + '>{data}</pre>\n' +
+        '   {zoom}\n' +
+        '   {footer}\n' +
+        '</div>';
     tVideo = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
-    ' title="{caption}" ' + STYLE_SETTING + '>\n' +
-    '   <video width="{width}" height="{height}" controls>\n' +
-    '       <source src="{data}" type="{type}">\n' +
-    '       ' + DEFAULT_PREVIEW + '\n' +
-    '   </video>\n' +
-    '   {footer}\n' +
-    '</div>\n';
+        ' title="{caption}" ' + STYLE_SETTING + '>\n' +
+        '   <video width="{width}" height="{height}" controls>\n' +
+        '       <source src="{data}" type="{type}">\n' +
+        '       ' + DEFAULT_PREVIEW + '\n' +
+        '   </video>\n' +
+        '   {footer}\n' +
+        '</div>\n';
     tAudio = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
-    ' title="{caption}" ' + STYLE_SETTING + '>\n' +
-    '   <audio controls>\n' +
-    '       <source src="' + '{data}' + '" type="{type}">\n' +
-    '       ' + DEFAULT_PREVIEW + '\n' +
-    '   </audio>\n' +
-    '   {footer}\n' +
-    '</div>';
+        ' title="{caption}" ' + STYLE_SETTING + '>\n' +
+        '   <audio controls>\n' +
+        '       <source src="' + '{data}' + '" type="{type}">\n' +
+        '       ' + DEFAULT_PREVIEW + '\n' +
+        '   </audio>\n' +
+        '   {footer}\n' +
+        '</div>';
     tFlash = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
-    ' title="{caption}" ' + STYLE_SETTING + '>\n' +
-    '   <object class="file-object" type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
-    OBJECT_PARAMS + '       ' + DEFAULT_PREVIEW + '\n' +
-    '   </object>\n' +
-    '   {footer}\n' +
-    '</div>\n';
+        ' title="{caption}" ' + STYLE_SETTING + '>\n' +
+        '   <object class="file-object" type="application/x-shockwave-flash" width="{width}" height="{height}" data="{data}">\n' +
+        OBJECT_PARAMS + '       ' + DEFAULT_PREVIEW + '\n' +
+        '   </object>\n' +
+        '   {footer}\n' +
+        '</div>\n';
     tObject = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
-    ' title="{caption}" ' + STYLE_SETTING + '>\n' +
-    '   <object class="file-object" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
-    '       <param name="movie" value="{caption}" />\n' +
-    OBJECT_PARAMS + '         ' + DEFAULT_PREVIEW + '\n' +
-    '   </object>\n' +
-    '   {footer}\n' +
-    '</div>';
+        ' title="{caption}" ' + STYLE_SETTING + '>\n' +
+        '   <object class="file-object" data="{data}" type="{type}" width="{width}" height="{height}">\n' +
+        '       <param name="movie" value="{caption}" />\n' +
+        OBJECT_PARAMS + '         ' + DEFAULT_PREVIEW + '\n' +
+        '   </object>\n' +
+        '   {footer}\n' +
+        '</div>';
     tOther = '<div class="file-preview-frame{frameClass}" id="{previewId}" data-fileindex="{fileindex}"' +
-    ' title="{caption}" ' + STYLE_SETTING + '>\n' +
-    '   <div class="file-preview-other-frame">\n' +
-    '   ' + DEFAULT_PREVIEW + '\n' +
-    '   </div>\n' +
-    '   <div class="file-preview-other-footer">{footer}</div>\n' +
-    '</div>';
+        ' title="{caption}" ' + STYLE_SETTING + '>\n' +
+        '   <div class="file-preview-other-frame">\n' +
+        '   ' + DEFAULT_PREVIEW + '\n' +
+        '   </div>\n' +
+        '   <div class="file-preview-other-footer">{footer}</div>\n' +
+        '</div>';
     defaultLayoutTemplates = {
         main1: tMain1,
         main2: tMain2,
@@ -498,6 +514,7 @@
         });
         return out;
     };
+    //noinspection JSUnresolvedVariable
     objUrl = window.URL || window.webkitURL;
     FileInput = function (element, options) {
         var self = this;
@@ -524,9 +541,9 @@
                 return true;
             }
             $exception = '<div class="help-block alert alert-warning">' +
-            '<h4>Invalid Input Type</h4>' +
-            'You must set an input <code>type = file</code> for <b>bootstrap-fileinput</b> plugin to initialize.' +
-            '</div>';
+                '<h4>Invalid Input Type</h4>' +
+                'You must set an input <code>type = file</code> for <b>bootstrap-fileinput</b> plugin to initialize.' +
+                '</div>';
             self.$element.after($exception);
             return false;
         },
@@ -1933,20 +1950,20 @@
             if (isDisabled === true) {
                 if (!self.isUploadable) {
                     footer += '<div class="file-other-error" title="' + self.fileActionSettings.indicatorErrorTitle +
-                    '">' + self.fileActionSettings.indicatorError + '</div>';
+                        '">' + self.fileActionSettings.indicatorError + '</div>';
                 }
             }
             self.clearDefaultPreview();
             self.$preview.append("\n" + previewOtherTemplate
-                .replace(/\{previewId}/g, previewId)
-                .replace(/\{frameClass}/g, frameClass)
-                .replace(/\{fileindex}/g, ind)
-                .replace(/\{caption}/g, self.slug(file.name))
-                .replace(/\{width}/g, config.width)
-                .replace(/\{height}/g, config.height)
-                .replace(/\{type}/g, file.type)
-                .replace(/\{data}/g, data)
-                .replace(/\{footer}/g, footer));
+                    .replace(/\{previewId}/g, previewId)
+                    .replace(/\{frameClass}/g, frameClass)
+                    .replace(/\{fileindex}/g, ind)
+                    .replace(/\{caption}/g, self.slug(file.name))
+                    .replace(/\{width}/g, config.width)
+                    .replace(/\{height}/g, config.height)
+                    .replace(/\{type}/g, file.type)
+                    .replace(/\{data}/g, data)
+                    .replace(/\{footer}/g, footer));
             if (isDisabled === true && self.isUploadable) {
                 self.setThumbStatus($('#' + previewId), 'Error');
             }
@@ -1972,12 +1989,12 @@
                         .replace(/\{title}/g, caption)
                         .replace(/\{body}/g, strText).replace(/\{heading}/g, self.msgZoomModalHeading);
                     content = content.replace(/\{previewId}/g, previewId).replace(/\{caption}/g, caption)
-                        .replace(/\{width}/g, config.width).replace(/\{height}/g, config.height)
-                        .replace(/\{frameClass}/g, '').replace(/\{zoomInd}/g, self.zoomIndicator)
-                        .replace(/\{footer}/g, footer).replace(/\{fileindex}/g, ind)
-                        .replace(/\{type}/g, file.type).replace(/\{zoomTitle}/g, self.msgZoomTitle)
-                        .replace(/\{dialog}/g, "$('#" + id + "').modal('show')")
-                        .replace(/\{data}/g, strText) + modal;
+                            .replace(/\{width}/g, config.width).replace(/\{height}/g, config.height)
+                            .replace(/\{frameClass}/g, '').replace(/\{zoomInd}/g, self.zoomIndicator)
+                            .replace(/\{footer}/g, footer).replace(/\{fileindex}/g, ind)
+                            .replace(/\{type}/g, file.type).replace(/\{zoomTitle}/g, self.msgZoomTitle)
+                            .replace(/\{dialog}/g, "$('#" + id + "').modal('show')")
+                            .replace(/\{data}/g, strText) + modal;
                 } else {
                     content = tmplt.replace(/\{previewId}/g, previewId).replace(/\{caption}/g, caption)
                         .replace(/\{frameClass}/g, '').replace(/\{type}/g, file.type).replace(/\{fileindex}/g, ind)
@@ -2407,7 +2424,7 @@
             if (isError) {
                 title = $('<div>' + self.msgValidationError + '</div>').text();
                 out = '<span class="' + self.msgValidationErrorClass + '">' +
-                self.msgValidationErrorIcon + title + '</span>';
+                    self.msgValidationErrorIcon + title + '</span>';
             } else {
                 if (isEmpty(content) || self.$caption.length === 0) {
                     return;
@@ -2677,5 +2694,4 @@
             $input.fileinput();
         }
     });
-})
-(window.jQuery);
+}));