From 451c7442285ff90b6afd6574b3c09849cb240c24 Mon Sep 17 00:00:00 2001
From: Triangle717 <le717@users.sourceforge.net>
Date: Tue, 11 Mar 2014 12:48:11 -0400
Subject: [PATCH] Update HTML dialog elements according to previous style
 rules,

Indent JS using two space soft tabs, per GitHub JavaScript guidelines
https://github.com/styleguide/javascript
---
 NEWS.md                     |   9 ++
 htmlContent/mainDialog.html |  10 +-
 main.js                     | 306 ++++++++++++++++++------------------
 3 files changed, 166 insertions(+), 159 deletions(-)

diff --git a/NEWS.md b/NEWS.md
index 10ed3d0..a7bc0b0 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -1,5 +1,14 @@
 # News #
 
+## 1.1.4 ##
+
+### 3/??/14 ###
+
+* Replace `transform` CSS properties ([#8](https://github.com/le717/brackets-html-skeleton/issues/8))
+* Removed duplicate value assignments
+* Indent HTML and CSS using two space soft tabs ([http://mdo.github.io/code-guide/#html-syntax](http://mdo.github.io/code-guide/#html-syntax)
+[http://mdo.github.io/code-guide/#css-syntax](http://mdo.github.io/code-guide/#css-syntax))
+
 ## 1.1.3 ##
 
 ### 2/22/14 ###
diff --git a/htmlContent/mainDialog.html b/htmlContent/mainDialog.html
index db4a8df..6959a04 100644
--- a/htmlContent/mainDialog.html
+++ b/htmlContent/mainDialog.html
@@ -39,11 +39,11 @@ <h3>{{ELEMENTS}}</h3>
         <input type="checkbox" id="img-tag" />
         <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 id="img-width" type="number" min="0" placeholder="{{WIDTH}}" /><span class="html-skeleton" id="img-size-x"> x </span>
+        <input id="img-height" type="number" min="0" placeholder="{{HEIGHT}}" />
 
         <br>
-        <input type="checkbox" id="full-skelly" />
+        <input id="full-skelly" type="checkbox" />
 
         <label for="full-skelly">{{FULL_SKELETON}}<br>
           <span id="full-skelly-description">{{FULL_SKELETON_DESCRIPTION}}</span>
@@ -53,7 +53,7 @@ <h3>{{ELEMENTS}}</h3>
   </div>  <!-- .html-skeleton-modal-body -->
 
   <div class="modal-footer">
-    <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>
+    <a class="dialog-button btn" data-button-id="cancel" href="#">{{BTN_CANCEL}}</a>
+    <a class="dialog-button btn primary" data-button-id="ok" href="#">{{BTN_DONE}}</a>
   </div>
 </div>
diff --git a/main.js b/main.js
index 712e9b6..68d75a2 100644
--- a/main.js
+++ b/main.js
@@ -1,229 +1,227 @@
-/* jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/* jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 2, maxerr: 50 */
 /* global define, brackets, $, require, Mustache */
 
 /*
-    HTML Skeleton
-    Created 2014 Triangle717
-    <http://Triangle717.WordPress.com/>
+  HTML Skeleton
+  Created 2014 Triangle717
+  <http://Triangle717.WordPress.com/>
 
-    Licensed under The MIT License
-    <http://opensource.org/licenses/MIT/>
+  Licensed under The MIT License
+  <http://opensource.org/licenses/MIT/>
 */
 
 
-    /* ------- Begin Module Importing ------- */
+/* ------- Begin Module Importing ------- */
 
 
 define(function (require, exports, module) {
-    "use strict";
+  "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"),
-        ImageViewer     = brackets.getModule("editor/ImageViewer"),
-        Menus           = brackets.getModule("command/Menus"),
-        ProjectManager  = brackets.getModule("project/ProjectManager"),
+  // 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"),
+      ImageViewer     = brackets.getModule("editor/ImageViewer"),
+      Menus           = brackets.getModule("command/Menus"),
+      ProjectManager  = brackets.getModule("project/ProjectManager"),
 
-        // Import dialog localization
-        Strings         = require("strings"),
+      // Import dialog localization
+      Strings         = require("strings"),
 
-        // Pull in the extension dialog
-        skellyDialogHtml    = require("text!htmlContent/mainDialog.html"),
+      // Pull in the extension dialog
+      skellyDialogHtml    = require("text!htmlContent/mainDialog.html"),
 
-        // Grab the logo to display in the dialog
-        skellyLogo      = require.toUrl("img/HTML-Skeleton.svg"),
+      // Grab the logo to display in the dialog
+      skellyLogo      = require.toUrl("img/HTML-Skeleton.svg"),
+      EXTENSION_ID    = "le717.html-skeleton";
 
-        // The extension ID
-        EXTENSION_ID    = "le717.html-skeleton";
 
+  /* ------- End Module Importing ------- */
 
-    /* ------- End Module Importing ------- */
 
+  /* ------- Begin Available HTML Elements ------- */
 
-    /* ------- Begin Available HTML Elements ------- */
+  // Assign a variable for 4 space indentation for easier coding
+  var fourSpaceIndent = "\u0020\u0020\u0020\u0020";
 
-    // Assign a variable for 4 space indentation for easier coding
-    var fourSpaceIndent = "\u0020\u0020\u0020\u0020";
+  // Placeholder variables for image size
+  var $imgWidth = 0,
+      $imgHeight = 0;
 
-    // Placeholder variables for image size
-    var $imgWidth = 0,
-        $imgHeight = 0;
-
-    var skellyBones = [
-            // Only the head and body tags + title and meta
-            '<!DOCTYPE html>\n<html lang="">\n<head>\n' + fourSpaceIndent +
-                '<meta charset="UTF-8">\n' + fourSpaceIndent + '<title></title>\n' +
-                '\n</head>\n\n<body>\n' + fourSpaceIndent + '\n</body>\n</html>\n',
+  var skellyBones = [
+    // Only the head and body tags + title and meta
+    '<!DOCTYPE html>\n<html lang="">\n<head>\n' + fourSpaceIndent +
+    '<meta charset="UTF-8">\n' + fourSpaceIndent + '<title></title>\n' +
+    '\n</head>\n\n<body>\n' + fourSpaceIndent + '\n</body>\n</html>\n',
 
-            // External stylesheet
-            '<link rel="stylesheet" type="text/css" href="">',
+    // External stylesheet
+    '<link rel="stylesheet" href="">',
 
-            // Inline stylesheet
-            '<style type="text/css"></style>',
+    // Inline stylesheet
+    '<style></style>',
 
-            // External script
-            '<script src=""></script>',
+    // External script
+    '<script src=""></script>',
 
-            // Inline script
-            '<script></script>',
+    // Inline script
+    '<script></script>',
 
-            // Full HTML skeleton
-            '<!DOCTYPE html>\n<html lang="">\n<head>\n' + fourSpaceIndent +
-                '<meta charset="UTF-8">\n' + fourSpaceIndent + '<title></title>\n' +
-                fourSpaceIndent + '<link rel="stylesheet" type="text/css" href="">' + '\n</head>\n\n<body>\n' +
-                fourSpaceIndent + '<script src=""></script>\n</body>\n</html>\n'
-        ];
+    // Full HTML skeleton
+    '<!DOCTYPE html>\n<html lang="">\n<head>\n' + fourSpaceIndent +
+    '<meta charset="UTF-8">\n' + fourSpaceIndent + '<title></title>\n' +
+    fourSpaceIndent + '<link rel="stylesheet" href="">' + '\n</head>\n\n<body>\n' +
+    fourSpaceIndent + '<script src=""></script>\n</body>\n</html>\n'
+  ];
 
-    // Picture/Image
-    var imageCode = '<img width="size-x" height="size-y" src="" />';
+  // Picture/Image
+  var imageCode = '<img src="" alt="" width="size-x" height="size-y" />';
 
 
-    /* ------- End Available HTML Elements ------- */
+  /* ------- End Available HTML Elements ------- */
 
 
-    /* ------- Begin HTML Element Adding ------- */
+  /* ------- Begin HTML Element Adding ------- */
 
-    function _insertAllTheCodes(finalElements) {
-        /* Inter the selected elements into the document */
+  function _insertAllTheCodes(finalElements) {
+    /* Inter the selected elements into the document */
 
-        // Get the last active editor because the dialog steals focus
-        var editor = EditorManager.getActiveEditor();
-        if (editor) {
-            // Get the cursor position
-            var cursor = editor.getCursorPos();
+    // Get the last active editor because the dialog steals focus
+    var editor = EditorManager.getActiveEditor();
+    if (editor) {
+      // Get the cursor position
+      var cursor = editor.getCursorPos();
 
-            // Get the elements from the list in reverse so everything is added in the proper order
-            finalElements.reverse().forEach(function (value) {
-                //  Wrap the actions in a `batchOperation` call, per guidelines
-                editor.document.batchOperation(function() {
+      // Get the elements from the list in reverse so everything is added in the proper order
+      finalElements.reverse().forEach(function (value) {
+        //  Wrap the actions in a `batchOperation` call, per guidelines
+        editor.document.batchOperation(function() {
 
-                    // Insert the selected elements at the current cursor position
-                    editor.document.replaceRange(value, cursor);
-                });
-            });
-        }
+          // Insert the selected elements at the current cursor position
+          editor.document.replaceRange(value, cursor);
+        });
+      });
     }
+  }
 
 
-    /* ------- End HTML Element Adding ------- */
+  /* ------- End HTML Element Adding ------- */
 
 
-    /* ------- Begin HTML Element Choices ------- */
+  /* ------- Begin HTML Element Choices ------- */
 
 
-    function _getOptions() {
-        /* Get element choices */
+  function _getOptions() {
+    /* Get element choices */
 
-        var imageCodeNew,
-            // Stores the elements to be added
-            finalElements = [],
+    var imageCodeNew,
+        // Stores the elements to be added
+        finalElements = [],
 
-            // Store all the option IDs for easier access
-            optionIDs = ["#head-body", "#extern-style-tag", "#inline-style-tag",
-                         "#extern-script-tag", "#inline-script-tag", "#full-skelly"
-                        ],
+        // Store all the option IDs for easier access
+        optionIDs = ["#head-body", "#extern-style-tag", "#inline-style-tag",
+                     "#extern-script-tag", "#inline-script-tag", "#full-skelly"
+                    ],
 
-            // Shortcuts to the image size input boxes
-            $imgWidthID = $("#img-width"),
-            $imgHeightID = $("#img-height");
-
-        // For each option that is checked, add the corresponding element
-        // to `finalElements` for addition in document
-        optionIDs.forEach(function (value, index) {
-            if ($(value + ":checked").val() === "on") {
-                finalElements.push(skellyBones[index]);
-            }
-        });
+        // Shortcuts to the image size input boxes
+        $imgWidthID = $("#img-width"),
+        $imgHeightID = $("#img-height");
 
-        // The picture/image box is checked
-        if ($("#img-tag:checked").val() === "on") {
+    // For each option that is checked, add the corresponding element
+    // to `finalElements` for addition in document
+    optionIDs.forEach(function (value, index) {
+      if ($(value + ":checked").val() === "on") {
+        finalElements.push(skellyBones[index]);
+      }
+    });
 
-            // The width box was filled out, use that value
-            if ($imgWidthID.val()) {
-                $imgWidth = $imgWidthID.val();
+    // The picture/image box is checked
+    if ($("#img-tag:checked").val() === "on") {
 
-            } else {
-                // The width box was empty, reset to 0
-                $imgWidth = 0;
-            }
+      // The width box was filled out, use that value
+      if ($imgWidthID.val()) {
+        $imgWidth = $imgWidthID.val();
 
-            // The height box was filled out, use that value
-            if ($imgHeightID.val()) {
-                $imgHeight = $imgHeightID.val();
+      } else {
+        // The width box was empty, reset to 0
+        $imgWidth = 0;
+      }
 
-            } else {
-                // The height box was empty, reset to 0
-                $imgHeight = 0;
-            }
+      // The height box was filled out, use that value
+      if ($imgHeightID.val()) {
+        $imgHeight = $imgHeightID.val();
 
-            // Add the image tag to `finalElements` for addition in document,
-            // replacing the invalid values with valid ones
-            imageCodeNew = imageCode.replace(/size-x/, $imgWidth);
-            imageCodeNew = imageCodeNew.replace(/size-y/, $imgHeight);
-            finalElements.push(imageCodeNew);
-        }
+      } else {
+        // The height box was empty, reset to 0
+        $imgHeight = 0;
+      }
 
-        // Finally, run process to add the selected elements
-        _insertAllTheCodes(finalElements);
+      // Add the image tag to `finalElements` for addition in document,
+      // replacing the invalid values with valid ones
+      imageCodeNew = imageCode.replace(/size-x/, $imgWidth);
+      imageCodeNew = imageCodeNew.replace(/size-y/, $imgHeight);
+      finalElements.push(imageCodeNew);
     }
 
+    // Finally, run process to add the selected elements
+    _insertAllTheCodes(finalElements);
+  }
 
-    /* ------- End HTML Element Choices ------- */
 
+  /* ------- End HTML Element Choices ------- */
 
-    /* ------- Begin HTML Skeleton Dialog Box ------- */
 
+  /* ------- Begin HTML Skeleton Dialog Box ------- */
 
-    function _showSkellyDialog() {
-        /* Display the HTML Skeleton box */
 
-        var localized = Mustache.render(skellyDialogHtml, Strings);
-        var skellyDialog = Dialogs.showModalDialogUsingTemplate(localized),
-            $doneButton = skellyDialog.getElement().find('.dialog-button[data-button-id="ok"]');
+  function _showSkellyDialog() {
+    /* Display the HTML Skeleton box */
 
-        // Display logo using Bracket's viewer
-        ImageViewer.render(skellyLogo, $(".html-skeleton-image"));
+    var localized = Mustache.render(skellyDialogHtml, Strings);
+    var skellyDialog = Dialogs.showModalDialogUsingTemplate(localized),
+        $doneButton = skellyDialog.getElement().find('.dialog-button[data-button-id="ok"]');
 
-        // Hide image stats
-        $("#img-tip").remove();
-        $("#img-scale").remove();
+    // Display logo using Bracket's viewer
+    ImageViewer.render(skellyLogo, $(".html-skeleton-image"));
 
-        // Upon closing the dialog, run function to gather and apply choices
-        $doneButton.on("click", _getOptions);
+    // Hide image stats
+    $("#img-tip").remove();
+    $("#img-scale").remove();
 
-        /* FUTURE Disabled unless persistent values are a good thing to have */
-        // If the width and height boxes are not the default size (0), reuse the previous value.
-        // Technically, the values are already reused, but this makes it more obvious.
-        //        if ($imgWidth !== 0) {
-        //            $("#img-width").val($imgWidth);
-        //        }
-        //        if ($imgHeight !== 0) {
-        //           $("#img-height").val($imgHeight);
-        //        }
-    }
+    // Upon closing the dialog, run function to gather and apply choices
+    $doneButton.on("click", _getOptions);
 
+    /* FUTURE Disabled unless persistent values are a good thing to have */
+    // If the width and height boxes are not the default size (0), reuse the previous value.
+    // Technically, the values are already reused, but this makes it more obvious.
+    //        if ($imgWidth !== 0) {
+    //            $("#img-width").val($imgWidth);
+    //        }
+    //        if ($imgHeight !== 0) {
+    //           $("#img-height").val($imgHeight);
+    //        }
+  }
 
-    /* ------- End HTML Skeleton Dialog Box ------- */
 
+  /* ------- End HTML Skeleton Dialog Box ------- */
 
-    /* ------- Begin Extension Initialization ------- */
 
+  /* ------- Begin Extension Initialization ------- */
 
-    AppInit.appReady(function () {
-        /* Load the extension after Brackets itself has finished loading */
 
-        // Load extension CSS
-        ExtensionUtils.loadStyleSheet(module, "css/style.css");
+  AppInit.appReady(function () {
+    /* Load the extension after Brackets itself has finished loading */
 
-        // Assign a keyboard shortcut and item in Edit menu
-        CommandManager.register(Strings.INSERT_HTML_ELEMENTS, EXTENSION_ID, _showSkellyDialog);
-        var menu = Menus.getMenu(Menus.AppMenuBar.EDIT_MENU);
-        menu.addMenuItem(EXTENSION_ID, "Ctrl-Shift-N");
-    });
+    // Load extension CSS
+    ExtensionUtils.loadStyleSheet(module, "css/style.css");
+
+    // Assign a keyboard shortcut and item in Edit menu
+    CommandManager.register(Strings.INSERT_HTML_ELEMENTS, EXTENSION_ID, _showSkellyDialog);
+    var menu = Menus.getMenu(Menus.AppMenuBar.EDIT_MENU);
+    menu.addMenuItem(EXTENSION_ID, "Ctrl-Shift-N");
+  });
 });