Working on editor

Author: andrewbrg

README.md

@@ -1,2 +1,2 @@
-# Code Pad - A Chrome IDE
-An awesome multi-language IDE crafted for Chrome OS
+# Code Pad - Chrome based multi-lingual IDE
+An awesome multi-language IDE crafted for Chrome OS written in Vanilla JS and released under the GNU general public license!

manifest.json

@@ -4,6 +4,7 @@
   "minimum_chrome_version": "31",
   "name": "Code Pad",
   "description": "An awesome multi-language IDE crafted for Chrome OS",
+  "author": "Andrew Borg",
   "app": {
     "background": {
       "scripts": [

src/html/app.html

@@ -240,33 +240,31 @@
                          Editor
                     </a>
                     <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-                        <a class="dropdown-item modal-appearance" href="#"
-                           data-toggle="modal"
-                           data-target=".modal-lg-container">
+                        <a class="dropdown-item modal-appearance" href="#" data-toggle="modal" data-target=".modal-lg-container">
                             <i class="fa fa-fw fa-magic"></i>
                             &nbsp;Appearance & fonts
                         </a>
 
-                        <a class="dropdown-item modal-ide-settings" href="#"
-                           data-toggle="modal"
-                           data-target=".modal-lg-container">
+                        <a class="dropdown-item modal-ide-settings" href="#" data-toggle="modal" data-target=".modal-lg-container">
                             <i class="fa fa-fw fa-cogs"></i>
                             &nbsp;IDE preferences
                         </a>
                     </div>
                 </li>
+
+                <li class="nav-item dropdown">
+                    <a class="nav-link modal-content-help" href="#" data-toggle="modal" data-target=".modal-md-container">
+                        <i class="fa fa-fw fa-life-ring"></i>
+                        &nbsp;About
+                    </a>
             </ul>
         </div>
     </nav>
 
     <!-- Code navigation tabs -->
     <div class="nav-tabs bg-dark text-white add-file-container">
         <div class="dropdown pull-right" data-toggle="tooltip" title="Add file">
-            <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
-                    type="button"
-                    data-toggle="dropdown"
-                    aria-haspopup="true"
-                    aria-expanded="false">
+            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="fa fa-fw fa-plus"></i> New
             </button>
             <div class="dropdown-menu add-tab-dropdown"></div>
@@ -281,10 +279,7 @@
 </main>
 
 <!-- Modals -->
-<div class="modal fade modal-sm-container"
-     tabindex="-1"
-     role="dialog"
-     aria-hidden="true">
+<div class="modal fade modal-sm-container" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-sm">
         <div class="modal-content bg-dark text-white">
             <div class="modal-header">
@@ -298,10 +293,7 @@ <h4 class="modal-title"></h4>
     </div>
 </div>
 
-<div class="modal fade modal-md-container"
-     tabindex="-1"
-     role="dialog"
-     aria-hidden="true">
+<div class="modal fade modal-md-container" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-md">
         <div class="modal-content bg-dark text-white">
             <div class="modal-header">
@@ -315,10 +307,7 @@ <h4 class="modal-title"></h4>
     </div>
 </div>
 
-<div class="modal fade modal-lg-container"
-     tabindex="-1"
-     role="dialog"
-     aria-hidden="true">
+<div class="modal fade modal-lg-container" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content bg-dark text-white">
             <div class="modal-header">

src/html/modals/content/help.html

@@ -0,0 +1,8 @@
+<div class="container-fluid">
+    <h4 class="text-center app-name"></h4>
+    <p class="text-center">An awesome multi-language IDE written in Vanilla JS and released under the GNU general public license!</p>
+    <p class="text-center"></p>
+    <p class="text-center">Crafted with <i class='fa fa-heart text-danger'></i> by <span class="app-author"></span>, available on <a href="https://github.com/andrewbrg/codepad-chrome-app" target="_blank"><i class="fa fa-github"></i> GitHub</a></p>
+    <p class="text-center">Current application version is <strong>v<span class="app-version"></span></strong>.</p>
+
+</div>

src/js/app.js

@@ -98,9 +98,26 @@ $(document).ready(function () {
 
     // Push the template into the modal before showing it
     $(document).on('show.bs.modal', '.modal', function (e) {
-        Modals.onShowBs(e.relatedTarget, function () {
-            IdeSettings.decorateView();
-        });
+
+        var $el      = $(e.relatedTarget);
+        var callback = function () {
+        };
+
+        if ($el.hasClass('modal-ide-settings') || $el.hasClass('modal-appearance')) {
+            callback = function () {
+                IdeSettings.decorateView();
+            };
+        }
+
+        if ($el.hasClass('modal-content-help')) {
+            callback = function () {
+                $(document).find('.app-name').html(chrome.runtime.getManifest().name);
+                $(document).find('.app-author').html(chrome.runtime.getManifest().author);
+                $(document).find('.app-version').html(chrome.runtime.getManifest().version);
+            };
+        }
+
+        Modals.onShowBs(e.relatedTarget, callback);
     });
 
     // Remove the template from the modal after closing it

src/js/handlers/modals.js

@@ -25,23 +25,24 @@ var ModalsHandler = function () {
 
         var $el      = $(el);
         var deferred = $.Deferred();
+        var callback = function (data) {
+            deferred.resolve({html: data, idx: $el.attr('data-idx')});
+        };
 
         if ($el.hasClass('modal-appearance')) {
-            $.get('/src/html/modals/editor/appearance.html').done(function (data) {
-                deferred.resolve({html: data, idx: $el.attr('data-idx')});
-            });
+            $.get('/src/html/modals/editor/appearance.html').done(callback);
         }
 
         if ($el.hasClass('modal-ide-settings')) {
-            $.get('/src/html/modals/editor/ide.settings.html').done(function (data) {
-                deferred.resolve({html: data, idx: $el.attr('data-idx')});
-            });
+            $.get('/src/html/modals/editor/ide.settings.html').done(callback);
         }
 
         if ($el.hasClass('modal-confirm-close-tab')) {
-            $.get('/src/html/modals/file/confirm.close.tab.html').done(function (data) {
-                deferred.resolve({html: data, idx: $el.attr('data-idx')});
-            });
+            $.get('/src/html/modals/file/confirm.close.tab.html').done(callback);
+        }
+
+        if ($el.hasClass('modal-content-help')) {
+            $.get('/src/html/modals/content/help.html').done(callback);
         }
 
         return deferred.promise();