Merge pull request #7 from mikeboy91/master

Added internationalization support and german translation
le717 · Feb 21, 2014 · 8f480af · 8f480af
2 parents 26dd421 + d04d101
commit 8f480af
Show file tree

Hide file tree

Showing 6 changed files with 217 additions and 33 deletions.
diff --git a/htmlContent/mainDialog.html b/htmlContent/mainDialog.html
@@ -1,64 +1,63 @@
 <div class="html-skeleton-dialog template modal hide">
     <!-- Dialog title -->
     <div class="modal-header">
-        <h1 class="dialog-title">HTML Skeleton</h1>
+        <h1 class="dialog-title">{{DIALOG_TITLE}}</h1>
     </div>
 
     <div class="modal-body html-skeleton-modal-body">
         <!-- What does this extension do? -->
         <p class="dialog-message">
-            HTML Skeleton allows you to add various HTML elements straight into your document,
-            freeing you from typing it yourself.
+            {{DIALOG_EXTENSION_DESCRIPTION}}
         </p>
 
         <!-- HTML Skeleton logo by http://rioforce.WordPress.com
         The `src` attribute is added through JavaScript -->
         <img class="html-skeleton" id="html-skeleton-figure" width="150" alt="HTML Skeleton logo" />
 
         <!--- Usage directions -->
-        <h3>Usage</h3>
+        <h3>{{USAGE}}</h3>
         <ol>
-            <li>Place your cursor where you want the elements to be added</li>
-            <li>Select the elements you desire</li>
-            <li>Click Done and the HTML elements will be added to your document!</li>
+            <li>{{PLACE_CURSOR}}</li>
+            <li>{{SELECT_ELEMENTS}}</li>
+            <li>{{CLICK_DONE}}</li>
         </ol>
 
         <!-- Element options -->
-        <h3>Elements</h3>
+        <h3>{{ELEMENTS}}</h3>
             <form class="html-skeleton">
                 <input type="checkbox" id="head-body" />
-                <label for="head-body">Head and Body w/ &lt;title&gt; &amp; &lt;meta&gt;<br></label>
+                <label for="head-body">{{HEAD_AND_BODY}}<br></label>
 
                 <input type="checkbox" id="extern-style-tag" />
-                <label for="extern-style-tag">External Stylesheet<br></label>
+                <label for="extern-style-tag">{{EXTERNAL_STYLESHEET}}<br></label>
 
                 <input type="checkbox" id="inline-style-tag" />
-                <label for="inline-style-tag">Inline Stylesheet<br></label>
+                <label for="inline-style-tag">{{INLINE_STYLESHEET}}<br></label>
 
                 <input type="checkbox" id="extern-script-tag" />
-                <label for="extern-script-tag">External Script<br></label>
+                <label for="extern-script-tag">{{EXTERNAL_SCRIPT}}<br></label>
 
                 <input type="checkbox" id="inline-script-tag" />
-                <label for="inline-script-tag">Inline Script<br></label>
+                <label for="inline-script-tag">{{INLINE_SCRIPT}}<br></label>
 
                 <!-- Image and image size input boxes -->
                 <input type="checkbox" id="img-tag" />
-                <label for="img-tag">Picture/Image<br></label>
+                <label for="img-tag">{{PICTURE_IMAGE}}<br></label>
 
-                <input type="number" id="img-width" min="0" placeholder="Width" /> <span class="html-skeleton" id="img-size-x">x</span>
-                <input type="number" id="img-height" min="0" placeholder="Height" />
+                <input type="number" id="img-width" min="0" placeholder="{{WIDTH}}" /> <span class="html-skeleton" id="img-size-x">x</span>
+                <input type="number" id="img-height" min="0" placeholder="{{HEIGHT}}" />
 
                 <!-- Add the entire HTML skeleton -->
                 <br>
                 <input type="checkbox" id="full-skelly" />
-                <label for="full-skelly">Full HTML skeleton<br>
-                Includes all elements above except inline stylesheet, inline script, and image</label>
+                <label for="full-skelly">{{FULL_SKELETON}}<br>
+                {{FULL_SKELETON_DESCRIPTION}}</label>
         </form>
     </div>
 
     <!-- Done button -->
     <div class="modal-footer">
-        <a href="#" class="dialog-button btn" data-button-id="cancel">Cancel</a>
-        <a href="#" class="dialog-button btn primary" data-button-id="ok">Done</a>
+        <a href="#" class="dialog-button btn" data-button-id="cancel">{{BTN_CANCEL}}</a>
+        <a href="#" class="dialog-button btn primary" data-button-id="ok">{{BTN_DONE}}</a>
     </div>
 </div>
diff --git a/main.js b/main.js
@@ -1,5 +1,5 @@
 /* jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
-/* global define, brackets, $ */
+/* global define, brackets, $, require, Mustache */
 
 /*
     HTML Skeleton
@@ -17,22 +17,24 @@ define(function (require, exports, module) {
     "use strict";
 
     // Import the required Brackets modules
-    var AppInit = brackets.getModule("utils/AppInit"),
-        CommandManager = brackets.getModule("command/CommandManager"),
-        Dialogs = brackets.getModule("widgets/Dialogs"),
-        Document = brackets.getModule("document/Document"),
-        EditorManager = brackets.getModule("editor/EditorManager"),
-        ExtensionUtils = brackets.getModule("utils/ExtensionUtils"),
-        Menus = brackets.getModule("command/Menus"),
+    var AppInit         = brackets.getModule("utils/AppInit"),
+        CommandManager  = brackets.getModule("command/CommandManager"),
+        Dialogs         = brackets.getModule("widgets/Dialogs"),
+        Document        = brackets.getModule("document/Document"),
+        EditorManager   = brackets.getModule("editor/EditorManager"),
+        ExtensionUtils  = brackets.getModule("utils/ExtensionUtils"),
+        Menus           = brackets.getModule("command/Menus"),
+
+        Strings         = require("strings"),
 
         // Pull in the entire dialog
-        skellyDialogHtml = require("text!htmlContent/mainDialog.html"),
+        skellyDialogHtml    = require("text!htmlContent/mainDialog.html"),
 
         // Grab our logo to display in the dialog
-        skellyLogo = require.toUrl("img/HTML-Skeleton.svg"),
+        skellyLogo      = require.toUrl("img/HTML-Skeleton.svg"),
 
         // The extension ID
-        EXTENSION_ID = "le717.html-skeleton";
+        EXTENSION_ID    = "le717.html-skeleton";
 
 
     /* ------- End Module Importing ------- */
@@ -178,7 +180,8 @@ define(function (require, exports, module) {
     function _showSkellyDialog() {
         /* Display the HTML Skeleton box */
 
-        var skellyDialog = Dialogs.showModalDialogUsingTemplate(skellyDialogHtml),
+        var localized = Mustache.render(skellyDialogHtml, Strings);
+        var skellyDialog = Dialogs.showModalDialogUsingTemplate(localized),
             $doneButton = skellyDialog.getElement().find('.dialog-button[data-button-id="ok"]');
 
         // Upon closing the dialog, run function to gather and apply choices
@@ -212,7 +215,7 @@ define(function (require, exports, module) {
         ExtensionUtils.loadStyleSheet(module, "css/style.css");
 
         // Assign a keyboard shortcut and item in Edit menu
-        CommandManager.register("Insert HTML elements\u2026", EXTENSION_ID, _showSkellyDialog);
+        CommandManager.register(Strings.INSERT_HTML_ELEMENTS, EXTENSION_ID, _showSkellyDialog);
         var menu = Menus.getMenu(Menus.AppMenuBar.EDIT_MENU);
         menu.addMenuItem(EXTENSION_ID, "Ctrl-Shift-N");
     });

diff --git a/nls/de/strings.js b/nls/de/strings.js
@@ -0,0 +1,51 @@
+/*
+* Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a
+* copy of this software and associated documentation files (the "Software"),
+* to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense,
+* and/or sell copies of the Software, and to permit persons to whom the
+* Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in
+* all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+* DEALINGS IN THE SOFTWARE.
+*
+*/
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define */
+
+define({
+    // menu
+    "INSERT_HTML_ELEMENTS" : "HTML Elemente einfügen\u2026",
+
+    // mainDialog
+    "DIALOG_TITLE" : "HTML Skeleton",
+    "DIALOG_EXTENSION_DESCRIPTION" : "HTML Skeleton erlaubt Ihnen, verschiedene HTML-Elemente schnell und einfach in Ihr Dokument einzufügen.",
+    "USAGE" : "Benutzung",
+    "PLACE_CURSOR" : "Platzieren Sie den Cursor dort, wo die Elemente platziert werden sollen.",
+    "SELECT_ELEMENTS" : "Wählen Sie die benötigten Elemente aus.",
+    "CLICK_DONE" : "Klicken Sie auf 'Fertig' und die HTML-Elemente werden in Ihr Dokument eingefügt.",
+    "ELEMENTS" : "Elemente",
+    "HEAD_AND_BODY" : "Head- und Bodytag mit <title> und <meta>",
+    "EXTERNAL_STYLESHEET" : "externes Stylesheet",
+    "INLINE_STYLESHEET" : "Inline-Stylesheet",
+    "EXTERNAL_SCRIPT" : "externes Script",
+    "INLINE_SCRIPT" : "Inline-Script",
+    "PICTURE_IMAGE" : "Grafik/Bild",
+    "WIDTH" : "Breite",
+    "HEIGHT"  : "Höhe",
+    "FULL_SKELETON" : "Komplettes HTML Grundgerüst",
+    "FULL_SKELETON_DESCRIPTION" : "Enthält alle obigen Elemente, außer Inline-Stylesheet, Inline-Script und Grafik/Bild",
+    "BTN_CANCEL" : "Abbrechen",
+    "BTN_DONE" : "Fertig",
+});
diff --git a/nls/root/strings.js b/nls/root/strings.js
@@ -0,0 +1,51 @@
+/*
+* Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a
+* copy of this software and associated documentation files (the "Software"),
+* to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense,
+* and/or sell copies of the Software, and to permit persons to whom the
+* Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in
+* all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+* DEALINGS IN THE SOFTWARE.
+*
+*/
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define */
+
+define({
+    // menu
+    "INSERT_HTML_ELEMENTS" : "Insert HTML elements\u2026",
+
+    // mainDialog
+    "DIALOG_TITLE" : "HTML Skeleton",
+    "DIALOG_EXTENSION_DESCRIPTION" : "HTML Skeleton allows you to add various HTML elements straight into your document, freeing you from typing it yourself.",
+    "USAGE" : "Usage",
+    "PLACE_CURSOR" : "Place your cursor where you want the elements to be added.",
+    "SELECT_ELEMENTS" : "Select the elements you desire",
+    "CLICK_DONE" : "Click Done and the HTML elements will be added to your document!",
+    "ELEMENTS" : "Elements",
+    "HEAD_AND_BODY" : "Head and Body with <title> and <meta>",
+    "EXTERNAL_STYLESHEET" : "External Stylesheet",
+    "INLINE_STYLESHEET" : "Inline Stylesheet",
+    "EXTERNAL_SCRIPT" : "External Script",
+    "INLINE_SCRIPT" : "Inline Script",
+    "PICTURE_IMAGE" : "Picture/Image",
+    "WIDTH" : "Width",
+    "HEIGHT"  : "Height",
+    "FULL_SKELETON" : "Full HTML skeleton",
+    "FULL_SKELETON_DESCRIPTION" : "Includes all elements above except inline stylesheet, inline script, and image",
+    "BTN_CANCEL" : "Cancel",
+    "BTN_DONE" : "Done",
+});
diff --git a/nls/strings.js b/nls/strings.js
@@ -0,0 +1,42 @@
+/*
+* Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a
+* copy of this software and associated documentation files (the "Software"),
+* to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense,
+* and/or sell copies of the Software, and to permit persons to whom the
+* Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in
+* all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+* DEALINGS IN THE SOFTWARE.
+*
+*/
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define */
+
+define(function (require, exports, module) {
+
+    'use strict';
+
+    // Code that needs to display user strings should call require("strings") to load
+    // strings.js. This file will dynamically load strings.js for the specified by bracketes.locale.
+    //
+    // Translations for other locales should be placed in nls/<locale<optional country code>>/strings.js
+    // Localization is provided via the i18n plugin.
+    // All other bundles for languages need to add a prefix to the exports below so i18n can find them.
+    // TODO: dynamically populate the local prefix list below?
+    module.exports = {
+        root : true,
+        "de": true
+    };
+});
diff --git a/strings.js b/strings.js
@@ -0,0 +1,38 @@
+/*
+* Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a
+* copy of this software and associated documentation files (the "Software"),
+* to deal in the Software without restriction, including without limitation
+* the rights to use, copy, modify, merge, publish, distribute, sublicense,
+* and/or sell copies of the Software, and to permit persons to whom the
+* Software is furnished to do so, subject to the following conditions:
+*
+* The above copyright notice and this permission notice shall be included in
+* all copies or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+* DEALINGS IN THE SOFTWARE.
+*
+*/
+
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global define */
+
+/**
+* This file provides the interface to user visible strings in Brackets. Code that needs
+* to display strings should should load this module by calling var Strings = require("strings").
+* The i18n plugin will dynamically load the strings for the right locale and populate
+* the exports variable. See src\nls\strings.js for the master file of English strings.
+*/
+define(function (require, exports, module) {
+    "use strict";
+
+    module.exports = require("i18n!nls/strings");
+
+});