Added "Auto close tags and special characters" to Code editor preferences.

CHANGELOG.md

@@ -1,3 +1,6 @@
+* **Build 19x** (2015-02-xx)
+  - Added "Auto close tags and special characters" to Code editor preferences.
+
 * **Build 190** (2015-02-14)
   - For security reasons a vague error message is shown when a user tries to sign in unsuccessfully and the setting `app.debug` is disabled.
 

modules/backend/formwidgets/CodeEditor.php

@@ -23,37 +23,48 @@ class CodeEditor extends FormWidgetBase
     public $language = 'php';
 
     /**
-     * @var boolean Determines whether the gutter is visible
+     * @var boolean Determines whether the gutter is visible.
      */
     public $showGutter = true;
 
     /**
-     * @var boolean Indicates whether the the word wrapping is enabled
+     * @var boolean Indicates whether the the word wrapping is enabled.
      */
     public $wordWrap = true;
 
     /**
-     * @var boolean Indicates whether the the editor uses spaces for indentation
+     * @var string Cold folding mode: manual, markbegin, markbeginend.
+     */
+    public $codeFolding = 'manual';
+
+    /**
+     * @var boolean Automatically close tags and special characters,
+     * like quotation marks, parenthesis, or brackets.
+     */
+    public $autoClosing = true;
+
+    /**
+     * @var boolean Indicates whether the the editor uses spaces for indentation.
      */
     public $useSoftTabs = true;
 
     /**
-     * @var boolean Sets the size of the indentation
+     * @var boolean Sets the size of the indentation.
      */
     public $tabSize = 4;
 
     /**
-     * @var integer Sets the font size
+     * @var integer Sets the font size.
      */
     public $fontSize = 12;
 
     /**
-     * @var integer Sets the editor margin size
+     * @var integer Sets the editor margin size.
      */
     public $margin = 10;
 
     /**
-     * @var $theme Ace Editor theme to use
+     * @var $theme Ace Editor theme to use.
      */
     public $theme = 'twilight';
 
@@ -68,6 +79,7 @@ class CodeEditor extends FormWidgetBase
         $this->fontSize = $this->getConfig('fontSize', $editorSettings->font_size);
         $this->wordWrap = $this->getConfig('wordWrap', $editorSettings->word_wrap);
         $this->codeFolding = $this->getConfig('codeFolding', $editorSettings->code_folding);
+        $this->autoClosing = $this->getConfig('autoClosing', $editorSettings->auto_closing);
         $this->tabSize = $this->getConfig('tabSize', $editorSettings->tab_size);
         $this->theme = $this->getConfig('theme', $editorSettings->theme);
         $this->showInvisibles = $this->getConfig('showInvisibles', $editorSettings->show_invisibles);
@@ -95,6 +107,7 @@ class CodeEditor extends FormWidgetBase
         $this->vars['fontSize'] = $this->fontSize;
         $this->vars['wordWrap'] = $this->wordWrap;
         $this->vars['codeFolding'] = $this->codeFolding;
+        $this->vars['autoClosing'] = $this->autoClosing;
         $this->vars['tabSize'] = $this->tabSize;
         $this->vars['theme'] = $this->theme;
         $this->vars['showInvisibles'] = $this->showInvisibles;

modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js

@@ -44,6 +44,7 @@
         showInvisibles: true,
         highlightActiveLine: true,
         useSoftTabs: true,
+        autoCloseTags: true,
         showGutter: true,
         language: 'php',
         margin: 0,
@@ -122,6 +123,7 @@
          */
         editor.wrapper = this
         editor.setShowInvisibles(options.showInvisibles)
+        editor.setBehavioursEnabled(options.autoCloseTags)
         editor.setHighlightActiveLine(options.highlightActiveLine)
         editor.renderer.setShowGutter(options.showGutter)
         editor.renderer.setShowPrintMargin(options.showPrintMargin)

modules/backend/formwidgets/codeeditor/partials/_codeeditor.htm

@@ -8,6 +8,7 @@
         data-font-size="<?= $fontSize ?>"
         data-word-wrap="<?= $wordWrap ?>"
         data-code-folding="<?= $codeFolding ?>"
+        data-auto-close-tags="<?= $autoClosing ?>"
         data-tab-size="<?= $tabSize ?>"
         data-theme="<?= $theme ?>"
         data-show-invisibles="<?= $showInvisibles ?>"

modules/backend/models/EditorPreferences.php

@@ -30,6 +30,7 @@ class EditorPreferences extends Model
         $this->highlight_active_line = $config->get('editor.highlight_active_line', true);
         $this->use_hard_tabs = $config->get('editor.use_hard_tabs', false);
         $this->show_gutter = $config->get('editor.show_gutter', true);
+        $this->auto_closing = $config->get('editor.auto_closing', true);
     }
 
     public static function applyConfigValues()
@@ -45,6 +46,7 @@ class EditorPreferences extends Model
         $config->set('editor.highlight_active_line', $settings->highlight_active_line);
         $config->set('editor.use_hard_tabs', $settings->use_hard_tabs);
         $config->set('editor.show_gutter', $settings->show_gutter);
+        $config->set('editor.auto_closing', $settings->auto_closing);
     }
 
     public function getThemeOptions()

modules/backend/models/editorpreferences/fields.yaml

@@ -4,66 +4,70 @@
 
 fields:
 
-  font_size:
+    font_size:
-    label: backend::lang.editor.font_size
+        label: backend::lang.editor.font_size
-    span: auto
+        span: auto
-    type: dropdown
+        type: dropdown
-    options:
+        options:
-      11: 11px
+            11: 11px
-      12: 12px
+            12: 12px
-      13: 13px
+            13: 13px
-      14: 14px
+            14: 14px
-      15: 15px
+            15: 15px
-      16: 16px
+            16: 16px
 
-  word_wrap:
+    word_wrap:
-    label: backend::lang.editor.word_wrap
+        label: backend::lang.editor.word_wrap
-    type: dropdown
+        type: dropdown
-    span: auto
+        span: auto
-    options:
+        options:
-      off: Off
+            off: Off
-      40: 40 Characters
+            40: 40 Characters
-      80: 80 Characters
+            80: 80 Characters
-      fluid: Fluid
+            fluid: Fluid
 
-  code_folding:
+    code_folding:
-    label: backend::lang.editor.code_folding
+        label: backend::lang.editor.code_folding
-    type: dropdown
+        type: dropdown
-    span: auto
+        span: auto
-    options:
+        options:
-      manual: Off
+            manual: Off
-      markbegin: Mark begin
+            markbegin: Mark begin
-      markbeginend: Mark begin and end
+            markbeginend: Mark begin and end
 
-  tab_size:
+    tab_size:
-    label: backend::lang.editor.tab_size
+        label: backend::lang.editor.tab_size
-    span: auto
+        span: auto
-    type: dropdown
+        type: dropdown
-    options:
+        options:
-      2: 2
+            2: 2
-      3: 3
+            3: 3
-      4: 4
+            4: 4
-      5: 5
+            5: 5
-      6: 6
+            6: 6
-      7: 7
+            7: 7
-      8: 8
+            8: 8
 
-  theme:
+    theme:
-    label: backend::lang.editor.theme
+        label: backend::lang.editor.theme
-    type: dropdown
+        type: dropdown
 
-  show_invisibles:
+    auto_closing:
-    label: backend::lang.editor.show_invisibles
+        label: Auto close tags and special characters
-    type: checkbox
+        type: checkbox
 
-  highlight_active_line:
+    show_invisibles:
-    label: backend::lang.editor.highlight_active_line
+        label: backend::lang.editor.show_invisibles
-    type: checkbox
+        type: checkbox
 
-  use_hard_tabs:
+    highlight_active_line:
-    label: backend::lang.editor.use_hard_tabs
+        label: backend::lang.editor.highlight_active_line
-    type: checkbox
+        type: checkbox
 
-  show_gutter:
+    use_hard_tabs:
-    label: backend::lang.editor.show_gutter
+        label: backend::lang.editor.use_hard_tabs
-    type: checkbox
+        type: checkbox
+
+    show_gutter:
+        label: backend::lang.editor.show_gutter
+        type: checkbox

modules/system/controllers/settings/mysettings.htm

@@ -9,7 +9,7 @@
         <div class="settings-items row">
 
             <?php foreach ($items as $item): ?>
-                <div class="settings-item col-xs-12 col-sm-6 col-md-4">
+                <div class="settings-item col-xs-12 col-md-6 col-lg-4">
                     <a href="<?= $item->url ?>">
                         <div class="item-icon"><i class="<?= $item->icon ?>"></i></div>
                         <h5><?= e(trans($item->label)) ?></h5>