Complete code editor customization

2014-06-12 18:29:12 +10:00 · 2014-06-12 18:29:12 +10:00 · ef1c91c10d
parent d19716ce30
commit ef1c91c10d
7 changed files with 94 additions and 65 deletions
--- a/modules/backend/assets/js/editorsettings/editorsettings.js
+++ b/modules/backend/assets/js/editorsettings/editorsettings.js
@ -16,27 +16,7 @@ $(document).ready(function(){
    })

    $('#Form-form-field-EditorSettings-word_wrap').on('change', function(){
-        switch ($(this).val()) {
-            case "off":
-                session.setUseWrapMode(false)
-                renderer.setPrintMarginColumn(80)
-            break
-            case "40":
-                session.setUseWrapMode(true)
-                session.setWrapLimitRange(40, 40)
-                renderer.setPrintMarginColumn(40)
-            break
-            case "80":
-                session.setUseWrapMode(true)
-                session.setWrapLimitRange(80, 80)
-                renderer.setPrintMarginColumn(80)
-            break
-            case "fluid":
-                session.setUseWrapMode(true)
-                session.setWrapLimitRange(null, null)
-                renderer.setPrintMarginColumn(80)
-            break
-        }
+        editorEl.codeEditor('setWordWrap', $(this).val())
    })

    $('#Form-form-field-EditorSettings-code_folding').on('change', function(){
--- a/modules/backend/controllers/EditorSettings.php
+++ b/modules/backend/controllers/EditorSettings.php
@ -41,18 +41,27 @@ class EditorSettings extends Controller
        // Load the editor system settings
        $editorSettings = EditorSettingsModel::instance();

-        $this->vars['showGutter'] = true;
-        $this->vars['theme'] = $editorSettings->theme;
-        $this->vars['wrapWords'] = $editorSettings->word_wrap !== 'off';
        $this->vars['fontSize'] = $editorSettings->font_size;
+        $this->vars['wordWrap'] = $editorSettings->word_wrap;
+        $this->vars['codeFolding'] = $editorSettings->code_folding;
        $this->vars['tabSize'] = $editorSettings->tab_size;
+        $this->vars['theme'] = $editorSettings->theme;
+        $this->vars['showInvisibles'] = $editorSettings->show_invisibles;
+        $this->vars['highlightActiveLine'] = $this->highlight_active_line;
        $this->vars['useSoftTabs'] = !$editorSettings->use_hard_tabs;
+        $this->vars['showGutter'] = true;
+        $this->vars['language'] = 'css';
        $this->vars['margin'] = 0;

        $this->getClassExtension('Backend.Behaviors.FormController')->update();
        $this->pageTitle = Lang::get('backend::lang.editor.menu_label');
    }

+    public function index_onSave()
+    {
+        return $this->getClassExtension('Backend.Behaviors.FormController')->update_onSave();
+    }
+
    public function formFindModelObject()
    {
        return EditorSettingsModel::instance();
--- a/modules/backend/controllers/editorsettings/index.htm
+++ b/modules/backend/controllers/editorsettings/index.htm
@ -21,14 +21,17 @@
                    id="editorsettingsCodeeditor"
                    class="field-codeeditor size-large layout-relative"
                    data-control="codeeditor"
-                    data-language="css"
-                    data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
-                    data-wrap-mode="<?= $wrapWords ? 'true' : 'false' ?>"
-                    data-theme="<?= $theme ?>"
-                    data-margin="<?= $margin ?>"
                    data-font-size="<?= $fontSize ?>"
+                    data-word-wrap="<?= $wordWrap ?>"
+                    data-code-folding="<?= $codeFolding ?>"
                    data-tab-size="<?= $tabSize ?>"
+                    data-theme="<?= $theme ?>"
+                    data-show-invisibles="<?= $showInvisibles ?>"
+                    data-highlight-active-line="<?= $highlightActiveLine ?>"
                    data-use-soft-tabs="<?= $useSoftTabs ?>"
+                    data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
+                    data-language="<?= $language ?>"
+                    data-margin="<?= $margin ?>"
                    data-vendor-path="<?= URL::to('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>/">
                    <textarea name="editorsettings_codeeditor"><?= e($this->makePartial('example_code')) ?></textarea>
                </div>
--- a/modules/backend/formwidgets/CodeEditor.php
+++ b/modules/backend/formwidgets/CodeEditor.php
@ -30,7 +30,7 @@ class CodeEditor extends FormWidgetBase
    /**
     * @var boolean Indicates whether the the word wrapping is enabled
     */
-    public $wrapWords = true;
+    public $wordWrap = true;

    /**
     * @var boolean Indicates whether the the editor uses spaces for indentation
@ -65,13 +65,16 @@ class CodeEditor extends FormWidgetBase
        // Load the editor system settings
        $editorSettings = EditorSettings::instance();

-        $this->language = $this->getConfig('language', 'php');
-        $this->showGutter = $this->getConfig('showGutter', true);
-        $this->theme = $this->getConfig('theme', $editorSettings->theme);
-        $this->wrapWords = $this->getConfig('wrapWords', $editorSettings->use_wrap);
        $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->tabSize = $this->getConfig('tabSize', $editorSettings->tab_size);
+        $this->theme = $this->getConfig('theme', $editorSettings->theme);
+        $this->showInvisibles = $this->getConfig('showInvisibles', $editorSettings->show_invisibles);
+        $this->highlightActiveLine = $this->getConfig('highlightActiveLine', $editorSettings->highlight_active_line);
        $this->useSoftTabs = $this->getConfig('useSoftTabs', !$editorSettings->use_hard_tabs);
+        $this->showGutter = $this->getConfig('showGutter', $editorSettings->show_gutter);
+        $this->language = $this->getConfig('language', 'php');
        $this->margin = $this->getConfig('margin', 0);
    }

@ -89,18 +92,21 @@ class CodeEditor extends FormWidgetBase
     */
    public function prepareVars()
    {
+        $this->vars['fontSize'] = $this->fontSize;
+        $this->vars['wordWrap'] = $this->wordWrap;
+        $this->vars['codeFolding'] = $this->codeFolding;
+        $this->vars['tabSize'] = $this->tabSize;
+        $this->vars['theme'] = $this->theme;
+        $this->vars['showInvisibles'] = $this->showInvisibles;
+        $this->vars['highlightActiveLine'] = $this->highlightActiveLine;
+        $this->vars['useSoftTabs'] = $this->useSoftTabs;
+        $this->vars['showGutter'] = $this->showGutter;
+        $this->vars['language'] = $this->language;
+        $this->vars['margin'] = $this->margin;
        $this->vars['stretch'] = $this->formField->stretch;
        $this->vars['size'] = $this->formField->size;
-        $this->vars['language'] = $this->language;
-        $this->vars['showGutter'] = $this->showGutter;
-        $this->vars['wrapWords'] = $this->wrapWords;
-        $this->vars['fontSize'] = $this->fontSize;
-        $this->vars['tabSize'] = $this->tabSize;
-        $this->vars['useSoftTabs'] = $this->useSoftTabs;
-        $this->vars['theme'] = $this->theme;
        $this->vars['name'] = $this->formField->getName();
        $this->vars['value'] = $this->model->{$this->columnName};
-        $this->vars['margin'] = $this->margin;
    }

    /**
--- a/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
+++ b/modules/backend/formwidgets/codeeditor/assets/js/codeeditor.js
@ -36,22 +36,22 @@
    }

    CodeEditor.DEFAULTS = {
-        vendorPath: '/',
+        fontSize: 12,
+        wordWrap: 'off',
+        codeFolding: 'manual',
+        tabSize: 4,
+        theme: 'textmate',
        showInvisibles: true,
        highlightActiveLine: true,
+        useSoftTabs: true,
        showGutter: true,
+        language: 'php',
+        margin: 0,
+        vendorPath: '/',
        showPrintMargin: true,
        highlightSelectedWord: false,
        hScrollBarAlwaysVisible: false,
-        useSoftTabs: true,
-        tabSize: 4,
-        fontSize: 12,
-        wrapMode: false,
-        readOnly: false,
-        theme: 'textmate',
-        folding: 'manual',
-        language: 'php',
-        margin: 0
+        readOnly: false
    }

    CodeEditor.prototype.init = function (){
@ -130,11 +130,11 @@
        editor.getSession().setUseSoftTabs(options.useSoftTabs)
        editor.getSession().setTabSize(options.tabSize)
        editor.setReadOnly(options.readOnly)
-        editor.getSession().setFoldStyle(options.folding)
-        editor.getSession().setUseWrapMode(options.wrapMode)
+        editor.getSession().setFoldStyle(options.codeFolding)
        editor.setFontSize(options.fontSize)
        editor.on('blur', function(){ self.$el.removeClass('editor-focus') })
        editor.on('focus', function(){ self.$el.addClass('editor-focus') })
+        this.setWordWrap(options.wordWrap)

        editor.renderer.setScrollMargin(options.margin, options.margin, 0, 0)
        editor.renderer.setPadding(options.margin) 
@ -178,6 +178,34 @@
        })
    }

+    CodeEditor.prototype.setWordWrap = function(mode) {
+        var session = this.editor.getSession(),
+            renderer = this.editor.renderer
+
+        switch (mode + '') {
+            default:
+            case "off":
+                session.setUseWrapMode(false)
+                renderer.setPrintMarginColumn(80)
+            break
+            case "40":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(40, 40)
+                renderer.setPrintMarginColumn(40)
+            break
+            case "80":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(80, 80)
+                renderer.setPrintMarginColumn(80)
+            break
+            case "fluid":
+                session.setUseWrapMode(true)
+                session.setWrapLimitRange(null, null)
+                renderer.setPrintMarginColumn(80)
+            break
+        }
+    }
+
    CodeEditor.prototype.setTheme = function(theme) {
        var self = this
        assetManager.load({
--- a/modules/backend/formwidgets/codeeditor/partials/_codeeditor.htm
+++ b/modules/backend/formwidgets/codeeditor/partials/_codeeditor.htm
@ -5,14 +5,17 @@
        id="<?= $this->getId() ?>"
        class="field-codeeditor size-<?= $size ?> <?= $stretch?'layout-relative':'' ?>"
        data-control="codeeditor"
-        data-language="<?= $language ?>"
-        data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
-        data-wrap-mode="<?= $wrapWords ? 'true' : 'false' ?>"
-        data-theme="<?= $theme ?>"
-        data-margin="<?= $margin ?>"
        data-font-size="<?= $fontSize ?>"
+        data-word-wrap="<?= $wordWrap ?>"
+        data-code-folding="<?= $codeFolding ?>"
        data-tab-size="<?= $tabSize ?>"
+        data-theme="<?= $theme ?>"
+        data-show-invisibles="<?= $showInvisibles ?>"
+        data-highlight-active-line="<?= $highlightActiveLine ?>"
        data-use-soft-tabs="<?= $useSoftTabs ?>"
+        data-show-gutter="<?= $showGutter ? 'true' : 'false' ?>"
+        data-language="<?= $language ?>"
+        data-margin="<?= $margin ?>"
        data-vendor-path="<?= URL::to('/modules/backend/formwidgets/codeeditor/assets/vendor/ace') ?>/">
        <div class="editor-toolbar">
            <ul>
--- a/modules/backend/models/EditorSettings.php
+++ b/modules/backend/models/EditorSettings.php
@ -16,14 +16,14 @@ class EditorSettings extends Model
    {
        $config = App::make('config');
        $this->font_size = $config->get('editor.font_size', 12);
-        $this->tab_size = $config->get('editor.tab_size', 4);
-        $this->use_hard_tabs = $config->get('editor.use_hard_tabs', false);
        $this->word_wrap = $config->get('editor.word_wrap', 'off');
        $this->code_folding = $config->get('editor.code_folding', 'manual');
+        $this->tab_size = $config->get('editor.tab_size', 4);
+        $this->theme = $config->get('editor.theme', static::DEFAULT_THEME);
        $this->show_invisibles = $config->get('editor.show_invisibles', true);
        $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->theme = $config->get('editor.theme', static::DEFAULT_THEME);
    }

    public static function applyConfigValues()
@ -31,14 +31,14 @@ class EditorSettings extends Model
        $config = App::make('config');
        $settings = self::instance();
        $config->set('editor.font_size', $settings->font_size);
-        $config->set('editor.tab_size', $settings->tab_size);
-        $config->set('editor.use_hard_tabs', $settings->use_hard_tabs);
        $config->set('editor.word_wrap', $settings->word_wrap);
        $config->set('editor.code_folding', $settings->code_folding);
+        $config->set('editor.tab_size', $settings->tab_size);
+        $config->set('editor.theme', $settings->theme);
        $config->set('editor.show_invisibles', $settings->show_invisibles);
        $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.theme', $settings->theme);
    }

    public function getThemeOptions()