Added localization example.

Moved generic CSS style into external file. Removed Bang from jQuery UI Widget comment header, to prevent the comment from showing up in minified source code.
gawecoti · Feb 15, 2012 · 8936a91 · 8936a91
1 parent 4e2f47d
commit 8936a91
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 34 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,15 @@
+@charset 'UTF-8';
+/*
+ * jQuery File Upload Plugin CSS Example 1.0
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+body{
+  padding-top: 60px;
+}
diff --git a/index.html b/index.html
@@ -18,7 +18,8 @@
 <meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.">
 <!-- Bootstrap CSS Toolkit styles -->
 <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap.min.css">
-<style>body{padding-top:60px;}</style>
+<!-- Generic page styles -->
+<link rel="stylesheet" href="css/style.css">
 <!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
 <link rel="stylesheet" href="http://blueimp.github.com/cdn/css/bootstrap-responsive.min.css">
 <!-- Bootstrap CSS fixes for IE6 -->
@@ -125,17 +126,6 @@ <h3 class="modal-title"></h3>
         <a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
     </div>
 </div>
-<!-- Error messages for the upload/download templates -->
-<script>
-var fileUploadErrors = {
-    maxFileSize: 'File is too big',
-    minFileSize: 'File is too small',
-    acceptFileTypes: 'Filetype not allowed',
-    maxNumberOfFiles: 'Max number of files exceeded',
-    uploadedBytes: 'Uploaded bytes exceed file size',
-    emptyResult: 'Empty file upload result'
-};
-</script>
 <!-- The template to display files available for upload -->
 <script id="template-upload" type="text/x-tmpl">
 {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
@@ -144,22 +134,22 @@ <h3 class="modal-title"></h3>
         <td class="name">{%=file.name%}</td>
         <td class="size">{%=o.formatFileSize(file.size)%}</td>
         {% if (file.error) { %}
-            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
+            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
         {% } else if (o.files.valid && !i) { %}
             <td>
                 <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
             </td>
             <td class="start">{% if (!o.options.autoUpload) { %}
                 <button class="btn btn-primary">
-                    <i class="icon-upload icon-white"></i> Start
+                    <i class="icon-upload icon-white"></i> {%=locale.fileupload.start%}
                 </button>
             {% } %}</td>
         {% } else { %}
             <td colspan="2"></td>
         {% } %}
         <td class="cancel">{% if (!i) { %}
             <button class="btn btn-warning">
-                <i class="icon-ban-circle icon-white"></i> Cancel
+                <i class="icon-ban-circle icon-white"></i> {%=locale.fileupload.cancel%}
             </button>
         {% } %}</td>
     </tr>
@@ -173,7 +163,7 @@ <h3 class="modal-title"></h3>
             <td></td>
             <td class="name">{%=file.name%}</td>
             <td class="size">{%=o.formatFileSize(file.size)%}</td>
-            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
+            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
         {% } else { %}
             <td class="preview">{% if (file.thumbnail_url) { %}
                 <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
@@ -186,7 +176,7 @@ <h3 class="modal-title"></h3>
         {% } %}
         <td class="delete">
             <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
-                <i class="icon-trash icon-white"></i> Delete
+                <i class="icon-trash icon-white"></i> {%=locale.fileupload.destroy%}
             </button>
             <input type="checkbox" name="delete" value="1">
         </td>
@@ -213,6 +203,8 @@ <h3 class="modal-title"></h3>
 <script src="js/jquery.fileupload-ip.js"></script>
 <!-- The File Upload user interface plugin -->
 <script src="js/jquery.fileupload-ui.js"></script>
+<!-- The localization script -->
+<script src="js/locale.js"></script>
 <!-- The main application script -->
 <script src="js/main.js"></script>
 <!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->

diff --git a/js/locale.js b/js/locale.js
@@ -0,0 +1,27 @@
+/*
+ * jQuery File Upload Plugin Localization Example 6.5
+ * https://github.com/blueimp/jQuery-File-Upload
+ *
+ * Copyright 2012, Sebastian Tschan
+ * https://blueimp.net
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
+window.locale = {
+    "fileupload": {
+        "errors": {
+            "maxFileSize": "File is too big",
+            "minFileSize": "File is too small",
+            "acceptFileTypes": "Filetype not allowed",
+            "maxNumberOfFiles": "Max number of files exceeded",
+            "uploadedBytes": "Uploaded bytes exceed file size",
+            "emptyResult": "Empty file upload result"
+        },
+        "error": "Error",
+        "start": "Start",
+        "cancel": "Cancel",
+        "destroy": "Delete"
+    }
+};
diff --git a/js/vendor/jquery.ui.widget.js b/js/vendor/jquery.ui.widget.js
@@ -1,4 +1,4 @@
-/*!
+/*
  * jQuery UI Widget 1.8.17+amd
  * https://github.com/blueimp/jQuery-File-Upload
  *

diff --git a/test/index.html b/test/index.html
@@ -59,17 +59,6 @@ <h2 id="qunit-userAgent"></h2>
         <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
     </form>
 </div>
-<!-- Error messages for the upload/download templates -->
-<script>
-var fileUploadErrors = {
-    maxFileSize: 'File is too big',
-    minFileSize: 'File is too small',
-    acceptFileTypes: 'Filetype not allowed',
-    maxNumberOfFiles: 'Max number of files exceeded',
-    uploadedBytes: 'Uploaded bytes exceed file size',
-    emptyResult: 'Empty file upload result'
-};
-</script>
 <!-- The template to display files available for upload -->
 <script id="template-upload" type="text/x-tmpl">
 {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
@@ -78,22 +67,22 @@ <h2 id="qunit-userAgent"></h2>
         <td class="name">{%=file.name%}</td>
         <td class="size">{%=o.formatFileSize(file.size)%}</td>
         {% if (file.error) { %}
-            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
+            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
         {% } else if (o.files.valid && !i) { %}
             <td>
                 <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
             </td>
             <td class="start">{% if (!o.options.autoUpload) { %}
                 <button class="btn btn-primary">
-                    <i class="icon-upload icon-white"></i> Start
+                    <i class="icon-upload icon-white"></i> {%=locale.fileupload.start%}
                 </button>
             {% } %}</td>
         {% } else { %}
             <td colspan="2"></td>
         {% } %}
         <td class="cancel">{% if (!i) { %}
             <button class="btn btn-warning">
-                <i class="icon-ban-circle icon-white"></i> Cancel
+                <i class="icon-ban-circle icon-white"></i> {%=locale.fileupload.cancel%}
             </button>
         {% } %}</td>
     </tr>
@@ -107,7 +96,7 @@ <h2 id="qunit-userAgent"></h2>
             <td></td>
             <td class="name">{%=file.name%}</td>
             <td class="size">{%=o.formatFileSize(file.size)%}</td>
-            <td class="error" colspan="2"><span class="label label-important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td>
+            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
         {% } else { %}
             <td class="preview">{% if (file.thumbnail_url) { %}
                 <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
@@ -120,7 +109,7 @@ <h2 id="qunit-userAgent"></h2>
         {% } %}
         <td class="delete">
             <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
-                <i class="icon-trash icon-white"></i> Delete
+                <i class="icon-trash icon-white"></i> {%=locale.fileupload.destroy%}
             </button>
             <input type="checkbox" name="delete" value="1">
         </td>
@@ -136,6 +125,7 @@ <h2 id="qunit-userAgent"></h2>
 <script src="../js/jquery.fileupload.js"></script>
 <script src="../js/jquery.fileupload-ip.js"></script>
 <script src="../js/jquery.fileupload-ui.js"></script>
+<script src="../js/locale.js"></script>
 <script src="http://code.jquery.com/qunit/git/qunit.js"></script>
 <script src="test.js"></script>
 </body>