Skip to content
This repository has been archived by the owner on May 25, 2019. It is now read-only.

Commit

Permalink
added internationalization support and german translation
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikeboy91
mikeboy91 committed Feb 21, 2014
1 parent 26dd421 commit 666f669
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 33 deletions.
39 changes: 19 additions & 20 deletions htmlContent/mainDialog.html
View file
Original file line number Diff line number Diff line change
@@ -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_SKELLETON}}<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>
29 changes: 16 additions & 13 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 ------- */
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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");
});
Expand Down

0 comments on commit 666f669

Please sign in to comment.