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

@@ -52,6 +52,10 @@ fields:
         label: backend::lang.editor.theme
         type: dropdown
 
+    auto_closing:
+        label: Auto close tags and special characters
+        type: checkbox
+
     show_invisibles:
         label: backend::lang.editor.show_invisibles
         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>