first attempt to refactor modals, added requirejs text plugin. It sho…

…uld partialy fix adobe#258
idflood · May 17, 2012 · 8b9b3bc · 8b9b3bc
1 parent 4a50bf8
commit 8b9b3bc
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 76 deletions.
diff --git a/src/brackets.js b/src/brackets.js
@@ -35,6 +35,7 @@
  * Unlike other modules, this one can be accessed without an explicit require() because it exposes
  * a global object, window.brackets.
  */
+require.config({paths: {text: "thirdparty/text"}});
 define(function (require, exports, module) {
     'use strict';
 
@@ -175,7 +176,8 @@ define(function (require, exports, module) {
                 }
                 $("#about-build-number").text(versionLabel);
 
-                Dialogs.showModalDialog(Dialogs.DIALOG_ID_ABOUT);
+                var aboutContent = require("text!templates/about.html")
+                Dialogs.showModalDialog(Dialogs.DIALOG_ID_ABOUT, Strings.ABOUT_TITLE, aboutContent);
             });
         }
 

diff --git a/src/index.html b/src/index.html
@@ -217,85 +217,15 @@
     </div>
 
     <!-- Modal Windows -->
-    <div class="error-dialog template modal hide">
+    <div class="generic-dialog template modal hide">
         <div class="modal-header">
             <a href="#" class="close">&times;</a>
-            <h1 class="dialog-title">Error</h1>
-        </div>
-        <div class="modal-body">
-            <p class="dialog-message">Message goes here</p>
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn primary" data-button-id="ok">OK</a>
-        </div>
-    </div>
-    <div class="save-close-dialog template modal hide">
-        <div class="modal-header">
-            <a href="#" class="close">&times;</a>
-            <h1 class="dialog-title">Save Changes</h1>
-        </div>
-        <div class="modal-body">
-            <p class="dialog-message">Message goes here</p>
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn left" data-button-id="dontsave">Don't Save</a>
-            <a href="#" class="dialog-button btn primary" data-button-id="ok">Save</a>
-            <a href="#" class="dialog-button btn" data-button-id="cancel">Cancel</a>
-        </div>
-    </div>
-    <div class="ext-changed-dialog template modal hide">
-        <div class="modal-header">
             <h1 class="dialog-title">Title goes here</h1>
         </div>
         <div class="modal-body">
             <p class="dialog-message">Message goes here</p>
         </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn left" data-button-id="dontsave">Reload from Disk</a>
-            <a href="#" class="dialog-button btn primary" data-button-id="cancel">Keep Changes in Editor</a>
-        </div>
-    </div>
-    <div class="ext-deleted-dialog template modal hide">
-        <div class="modal-header">
-            <h1 class="dialog-title">Title goes here</h1>
-        </div>
-        <div class="modal-body">
-            <p class="dialog-message">Message goes here</p>
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn left" data-button-id="dontsave">Close (Don't Save)</a>
-            <a href="#" class="dialog-button btn primary" data-button-id="cancel">Keep Changes in Editor</a>
-        </div>
-    </div>
-    <div class="live-development-error-dialog template modal hide">
-        <div class="modal-header">
-            <h1 class="dialog-title">Title goes here</h1>
-        </div>
-        <div class="modal-body">
-            <p class="dialog-message">Message goes here</p>
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn left" data-button-id="cancel">Cancel</a>
-            <a href="#" class="dialog-button btn primary" data-button-id="ok">Relaunch Chrome</a>
-        </div>
-    </div>
-    <div class="about-dialog template modal hide">
-        <div class="modal-header">
-            <h1 class="dialog-title">About</h1>
-        </div>
-        <div class="modal-body">
-            <img class="about-icon" src="styles/images/brackets_icon.png">
-            <div class="about-text">
-                <h2>Brackets</h2>
-                <p class="dialog-message">sprint 9 experimental build <span id="about-build-number"><!-- populated programmatically --></span></p>
-                <p class="dialog-message">Copyright 2012 Adobe Systems Incorporated and its licensors. All rights reserved.</p>
-                <p class="dialog-message">Notices, terms and conditions pertaining to third party software are located at <span class="non-clickble-link">http://www.adobe.com/go/thirdparty/</span> and incorporated by reference herein.</p>
-                <p class="dialog-message">Documentation and source at <span class="non-clickble-link">https://github.com/adobe/brackets/</span></p>
-            </div>
-        </div>
-        <div class="modal-footer">
-            <a href="#" class="dialog-button btn primary" data-button-id="ok">Close</a>
-        </div>
+        <div class="modal-footer"></div>
     </div>
 </body>
 </html>
diff --git a/src/strings.js b/src/strings.js
@@ -115,4 +115,5 @@ define(function (require, exports, module) {
                                                 + "Do you want to keep your changes?";
 
     exports.OPEN_FILE                         = "Open File";
+    exports.ABOUT_TITLE                       = "About";
 });
diff --git a/src/templates/about.html b/src/templates/about.html
@@ -0,0 +1,8 @@
+<img class="about-icon" src="styles/images/brackets_icon.png">
+<div class="about-text">
+    <h2>Brackets</h2>
+    <p class="dialog-message">sprint 9 experimental build <span id="about-build-number"><!-- populated programmatically --></span></p>
+    <p class="dialog-message">Copyright 2012 Adobe Systems Incorporated and its licensors. All rights reserved.</p>
+    <p class="dialog-message">Notices, terms and conditions pertaining to third party software are located at <span class="non-clickble-link">http://www.adobe.com/go/thirdparty/</span> and incorporated by reference herein.</p>
+    <p class="dialog-message">Documentation and source at <span class="non-clickble-link">https://github.com/adobe/brackets/</span></p>
+</div>
diff --git a/src/thirdparty/text.js b/src/thirdparty/text.js
diff --git a/src/widgets/Dialogs.js b/src/widgets/Dialogs.js
@@ -47,6 +47,48 @@ define(function (require, exports, module) {
         DIALOG_ID_LIVE_DEVELOPMENT = "live-development-error-dialog",
         DIALOG_ID_ABOUT = "about-dialog";
 
+    function _getDefaultButtons(dlgClass) {
+      switch (dlgClass) {
+        case DIALOG_ID_ERROR:
+          return {
+            ok: {text: "ok", class: "primary"}
+          };
+
+        case DIALOG_ID_SAVE_CLOSE:
+          return {
+            dontsave: {text: "Don't Save", class: "left"},
+            ok: {text: "Save", class: "primary"},
+            cancel: {text: "Cancel"}
+          };
+
+        case DIALOG_ID_EXT_CHANGED:
+          return {
+            dontsave: {text: "Reload from Disk", class: "left"},
+            cancel: {text: "Keep Changes in Editor", class: "primary"}
+          };
+
+        case DIALOG_ID_EXT_DELETED:
+          return {
+            dontsave: {text: "Close (Don't Save)", class: "left"},
+            cancel: {text: "Keep Changes in Editor", class: "primary"}
+          };
+
+        case DIALOG_ID_LIVE_DEVELOPMENT:
+          return {
+            cancel: {text: "Cancel", class: "left"},
+            ok: {text: "Relaunch Chrome", class: "primary"}
+          };
+
+        case DIALOG_ID_ABOUT:
+          return {
+            ok: {text: "Close", class: "primary"}
+          };
+
+        default:
+          return false;
+      }
+    }
+
     function _dismissDialog(dlg, buttonId) {
         dlg.data("buttonId", buttonId);
         dlg.modal(true).hide();
@@ -101,6 +143,18 @@ define(function (require, exports, module) {
         }
     };
 
+    function _createModalButtons($dlg, buttons) {
+      for (var key in buttons) {
+        var btn = buttons[key];
+        var $bt = $('<a href="#" class="dialog-button btn" data-button-id="' + key + '">' + btn.text + '</a>');
+        // Add optionnal class if needed ("primary", "left", ...)
+        if (btn.class) {
+          $bt.addClass(btn.class);
+        }
+        $bt.appendTo($(".modal-footer", $dlg));
+      }
+    }
+
     /**
      * General purpose modal dialog. Assumes that:
      * -- the root tag of the dialog is marked with a unique class name (passed as dlgClass), as well as the
@@ -116,30 +170,38 @@ define(function (require, exports, module) {
      * @return {$.Promise} a promise that will be resolved with the ID of the clicked button when the dialog
      *     is dismissed. Never rejected.
      */
-    function showModalDialog(dlgClass, title, message) {
+    function showModalDialog(dlgClass, title, message, buttons) {
         var result = $.Deferred();
 
         // We clone the HTML rather than using it directly so that if two dialogs of the same
         // type happen to show up, they can appear at the same time. (This is an edge case that
         // shouldn't happen often, but we can't prevent it from happening since everything is
         // asynchronous.)
-        var $dlg = $("." + dlgClass + ".template")
+        var $dlg = $(".generic-dialog.template")
             .clone()
             .removeClass("template")
             .addClass("instance")
+            .addClass(dlgClass)
             .appendTo(window.document.body);
 
         if ($dlg.length === 0) {
             throw new Error("Dialog id " + dlgClass + " does not exist");
         }
+        // If buttons are not defined try to get defaults by dialog class
+        if (!buttons) {
+          buttons = _getDefaultButtons(dlgClass);
+        }
 
-        // Set title and message
+        // Set title, message and buttons
         if (title) {
             $(".dialog-title", $dlg).html(title);
         }
         if (message) {
             $(".dialog-message", $dlg).html(message);
         }
+        if (buttons) {
+            _createModalButtons($dlg, buttons);
+        }
 
         var handleKeyDown = _handleKeyDown.bind($dlg);
 

diff --git a/test/spec/ProjectManager-test-files/Untitled.js b/test/spec/ProjectManager-test-files/Untitled.js