Add preferences to editor status bar and make allow override browser keymap option

Author: jackycute

public/css/index.css

@@ -404,16 +404,28 @@ div[contenteditable]:empty:not(:focus):before{
 
 .status-bar .status-indicators .status-keymap > a,
 .status-bar .status-indicators .status-theme > a,
-.status-bar .status-indicators .status-spellcheck > a {
+.status-bar .status-indicators .status-spellcheck > a,
+.status-bar .status-indicators .status-preferences > a {
     color: inherit;
     text-decoration: none;
 }
 
 .status-bar .status-indicators .status-theme,
-.status-bar .status-indicators .status-spellcheck {
+.status-bar .status-indicators .status-spellcheck,
+.status-bar .status-indicators .status-preferences {
     padding: 0 4.3px;
 }
 
+.status-bar .status-indicators .status-preferences .dropdown-menu > li > a {
+    cursor: default;
+}
+
+.status-bar .status-indicators .status-preferences .dropdown-menu label {
+    font: inherit;
+    margin-bottom: 0;
+    cursor: pointer;
+}
+
 .ui-theme-toggle,
 .ui-spellcheck-toggle {
     opacity: 0.2;

public/js/index.js

@@ -472,6 +472,7 @@ var statusKeymap = null;
 var statusIndent = null;
 var statusTheme = null;
 var statusSpellcheck = null;
+var statusPreferences = null;
 
 function getStatusBarTemplate(callback) {
     $.get(serverurl + '/views/statusbar.html', function (template) {
@@ -495,6 +496,7 @@ function addStatusBar() {
     statusLength = statusBar.find('.status-length');
     statusTheme = statusBar.find('.status-theme');
     statusSpellcheck = statusBar.find('.status-spellcheck');
+    statusPreferences = statusBar.find('.status-preferences');
     statusPanel = editor.addPanel(statusBar[0], {
         position: "bottom"
     });
@@ -503,6 +505,7 @@ function addStatusBar() {
     setKeymap();
     setTheme();
     setSpellcheck();
+    setPreferences();
 }
 
 function setIndent() {
@@ -619,6 +622,8 @@ function setKeymap() {
             expires: 365
         });
         label.text(keymap);
+        restoreOverrideEditorKeymap();
+        setOverrideBrowserKeymap();
     }
     setKeymapLabel();
 
@@ -719,6 +724,50 @@ function setSpellcheck() {
     }
 }
 
+var jumpToAddressBarKeymapName = mac ? "Cmd-L" : "Ctrl-L";
+var jumpToAddressBarKeymapValue = null;
+function resetEditorKeymapToBrowserKeymap() {
+    var keymap = editor.getOption('keyMap');
+    if (!jumpToAddressBarKeymapValue) {
+        jumpToAddressBarKeymapValue = CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName];
+        delete CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName];
+    }
+}
+function restoreOverrideEditorKeymap() {
+    var keymap = editor.getOption('keyMap');
+    if (jumpToAddressBarKeymapValue) {
+        CodeMirror.keyMap[keymap][jumpToAddressBarKeymapName] = jumpToAddressBarKeymapValue;
+        jumpToAddressBarKeymapValue = null;
+    }
+}
+function setOverrideBrowserKeymap() {
+    var overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]');
+    if(overrideBrowserKeymap.is(":checked")) {
+        Cookies.set('preferences-override-browser-keymap', true, {
+            expires: 365
+        });
+        restoreOverrideEditorKeymap();
+    } else {
+        Cookies.remove('preferences-override-browser-keymap');
+        resetEditorKeymapToBrowserKeymap();
+    }
+}
+
+function setPreferences() {
+    var overrideBrowserKeymap = $('.ui-preferences-override-browser-keymap label > input[type="checkbox"]');
+    var cookieOverrideBrowserKeymap = Cookies.get('preferences-override-browser-keymap');
+    if (cookieOverrideBrowserKeymap && cookieOverrideBrowserKeymap === "true") {
+        overrideBrowserKeymap.prop('checked', true);
+    } else {
+        overrideBrowserKeymap.prop('checked', false);
+    }
+    setOverrideBrowserKeymap();
+
+    overrideBrowserKeymap.change(function() {
+        setOverrideBrowserKeymap();
+    });
+}
+
 var selection = null;
 
 function updateStatusBar() {
@@ -989,6 +1038,10 @@ $(document).ready(function () {
     key('ctrl+alt+b', function (e) {
         changeMode(modeType.both);
     });
+    // toggle-dropdown
+    $(document).on('click', '.toggle-dropdown .dropdown-menu', function (e) {
+        e.stopPropagation();
+    });
 });
 //when page resize
 $(window).resize(function () {

public/views/statusbar.html

@@ -5,6 +5,14 @@
     </div>
     <div class="status-indicators">
         <div class="status-length"></div>
+        <div class="status-preferences dropup toggle-dropdown pull-right">
+            <a id="preferencesLabel" class="ui-preferences-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Click to change preferences">
+                <i class="fa fa-wrench fa-fw"></i>
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="preferencesLabel">
+                <li class="ui-preferences-override-browser-keymap"><a><label>Allow override browser keymap&nbsp;&nbsp;<input type="checkbox"></label></a></li>
+            </ul>
+        </div>
         <div class="status-keymap dropup pull-right">
             <a id="keymapLabel" class="ui-keymap-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Click to change keymap">
             Sublime