Your IP : 18.219.40.177


Current Path : /usr/local/mgr5/skins/orion/src/
Upload File :
Current File : //usr/local/mgr5/skins/orion/src/App.AceEditor.js

/**
 * App.AceEditor модуль подключения подстветки синтаксиса
 *
 * http://ace.c9.io/
 *
 * скрипты либы лежат в /common/ace
 *  @param {object} window  global object
 *  @param {function} $ jQuery library
 *  @param {object} EventMgr EventMgr library
 *  @param {object} App Application
 *  @param {object} doT doT template
 */
App.AceEditor = function(window, $, EventMgr, App, doT) {
  'use strict';
  var init = function() {
    EventMgr.bind('appendForm', loadEditor);
    EventMgr.bind('gotToolbarEditorTemplate', setToolbarEditorTemplate);
    EventMgr.on(mainWrapperSelector, fontSizeSetSelector,
        'change', setFontSize);
    EventMgr.on(mainWrapperSelector, themeSetSelector, 'change', setTheme);
    EventMgr.on(mainWrapperSelector, modeSetSelector, 'change', setMode);
    EventMgr.on(mainWrapperSelector, keyBindingSetSelector,
        'change', setKeyBinding);
    EventMgr.on(mainWrapperSelector, showHiddenSetSelector,
        'change', setShowHidden);
    EventMgr.on(mainWrapperSelector, showGutterSetSelector,
        'change', setShowGutter);
    EventMgr.on(mainWrapperSelector, softWrapSetSelector,
        'change', setSoftWrap);
    EventMgr.on(mainWrapperSelector, fullscreenSetSelector,
        'click', setFullscreen);
    EventMgr.on(mainWrapperSelector, fullscreenExitSelector,
        'click', exitFullscreen);
    EventMgr.on(mainWrapperSelector,
        '.i-button_type_ok, .i-button_type_setvalue', 'click', syncContent);
    EventMgr.bind('preSetValues', syncContent);
    EventMgr.bind('resizeEditor', resizeEditor);
    EventMgr.on(mainWrapperSelector, '.b-textarea.editor',
        'change', updateContent);
  },
      //selectors
      mainWrapperSelector = '#main-wrapper',

      fontSizeSetSelector = '.toolbar-editor .editor-set-font',

      themeSetSelector = '.toolbar-editor .editor-set-theme',

      modeSetSelector = '.toolbar-editor .editor-set-mode',

      keyBindingSetSelector = '.toolbar-editor .editor-set-keybinding',

      showHiddenSetSelector = '.toolbar-editor .editor-set-show_hidden',

      showGutterSetSelector = '.toolbar-editor .editor-set-show_gutter',

      softWrapSetSelector = '.toolbar-editor .editor-set-soft_wrap',

      fullscreenSetSelector = '.toolbar-editor .editor-set-fullscreen',

      fullscreenExitSelector = '.toolbar-editor .editor-exit-fullscreen',
      //keybining variables
      keybindings = {
        ace: null, // Null = use "default" keymapping
        vim: 'ace/keyboard/vim',
        emacs: 'ace/keyboard/emacs'
        /*custom: new HashHandler({
        "gotoright":      "Tab",
        "indent":         "]",
        "outdent":        "[",
        "gotolinestart":  "^",
        "gotolineend":    "$"
        })*/
      },
      editors = {},
      //save settings object
      saveConf = function(data) {
        if (typeof localStorage !== 'undefined') {
          var dataStr = JSON.stringify(data),
              productId = pageInfo.product + '_5_' +
                  pageInfo.user + '_' + pageInfo.hostName,
              itemId = productId + '_toolbar_ide';
          localStorage.setItem(itemId, dataStr);
          return true;
        }
        return false;
      },
      //get saved settings
      readConf = function() {
        if (typeof localStorage !== 'undefined') {
          var productId = pageInfo.product + '_5_' +
                  pageInfo.user + '_' + pageInfo.hostName,
              itemId = productId + '_toolbar_ide',
              dataStr = localStorage.getItem(itemId);
          return JSON.parse(dataStr) || {};
        }
        return false;
      },
      //save one setting
      preSaveConf = function(name, value) {
        var dataObj = readConf();
        if (dataObj) {
          dataObj[name] = value;
          saveConf(dataObj);
        }
      },
      //set font size from toolbar controller
      setFontSize = function() {
        var value = this.value,
            id = this.getAttribute('data-tabid');
        editors[id].setFontSize(value + 'px');
        preSaveConf('font', value);
      },
      //set theme by toolbar controller
      setTheme = function() {
        var value = this.value,
            id = this.getAttribute('data-tabid');
        editors[id].setTheme(value);
        preSaveConf('theme', value);
      },
      //set lang by toolbar controller
      setMode = function() {
        var value = this.value,
            id = this.getAttribute('data-tabid');
        editors[id].getSession().setMode('ace/mode/' + value);
      },
      //set key binding by toolbar controller
      setKeyBinding = function() {
        var value = this.value,
            id = this.getAttribute('data-tabid');
        editors[id].setKeyboardHandler(keybindings[value]);
        preSaveConf('keybinding', value);
      },
      //set invisibles by toolbar controller
      setShowHidden = function() {
        var value = this.value === 'on',
            id = this.getAttribute('data-tabid');
        editors[id].setShowInvisibles(value);
        preSaveConf('invisibles', value);
      },
      //set gutter by toolbar controller
      setShowGutter = function() {
        var value = this.value === 'on',
            id = this.getAttribute('data-tabid');
        editors[id].renderer.setShowGutter(value);
        editors[id].renderer.updateFull();
      },
      //set soft wrap by toolbar controller
      setSoftWrap = function() {
        var value = this.value,
            id = this.getAttribute('data-tabid'),
            session = editors[id].session,
            renderer = editors[id].renderer;

        switch (value) {
          case 'off':
            session.setUseWrapMode(false);
            renderer.setPrintMarginColumn(80);
            break;
          case 'free':
            session.setUseWrapMode(true);
            session.setWrapLimitRange(null, null);
            renderer.setPrintMarginColumn(80);
            break;
          default:
            session.setUseWrapMode(true);
            var col = parseInt(value, 10);
            session.setWrapLimitRange(col, col);
            renderer.setPrintMarginColumn(col);
        }
        preSaveConf('soft_wrap', value);
      },
      //set fullwidth screen editor
      setFullscreen = function() {
        var id = this.getAttribute('data-tabid');
        App.Dom.byId(id + '-editor').className += ' fullscreen';
        App.Dom.byId('exit-fullscreen-' + id)
            .parentNode.className += ' fullscreen';
        editors[id].resize();
        editors[id].focus();
        editors[id].renderer.updateFull();
      },
      exitFullscreen = function() {
        var id = this.getAttribute('data-tabid'),
            editorElem = App.Dom.byId(id + '-editor'),
            btnElem = App.Dom.byId('exit-fullscreen-' + id).parentNode;

        editorElem.className = editorElem.className.replace(/fullscreen/g, '');
        btnElem.className = btnElem.className.replace(/\sfullscreen/g, '');
        editors[id].resize();
        editors[id].focus();
      },
      //load editor if need
      loadEditor = function(e, data) {
        var tabId = data.tabId,
            editor, textareas;
        textareas = $('#cont-' + tabId + ' .editor');
        if (textareas.length > 0) {
          if (typeof window.ace !== 'undefined') {
            appendEditor(textareas);
          } else {
            loadEditorScript(textareas);
          }
        }
      },
      //load editor scripts
      loadEditorScript = function(elems) {
        var file = '/manimg/common/ace/ace.js';
        App.Common.required(file, initEditor, elems);
        var url = pageInfo.host + pageInfo.theme +
            'templates/toolbar-editor.html';
        EventMgr.trigger('ajaxRequest', {
          url: url,
          trfunc: 'gotToolbarEditorTemplate',
          outtype: 'html',
          type: 'get',
          queue: 'templates' });
      },
      //init editor and setup fullwidth handler
      initEditor = function(elems) {
        if (typeof require !== 'undefined') {
          //keybindings.vim = require("ace/keyboard/vim");
          var commands = require('ace/commands/default_commands').commands;
          // add command for all new editors
          commands.push({
            name: 'Toggle Fullscreen',
            bindKey: 'Esc',
            exec: function(editor) {
              editor.container.className =
                  editor.container.className.replace(/fullscreen/g, '');
              var id = editor.container.getAttribute('data-id'),
                  elem = App.Dom.byId('exit-fullscreen-' + id).parentNode;
              elem.className = elem.className.replace(/\sfullscreen/g, '');
              editor.resize();
              editor.focus();
            }
          });
        }
        appendEditor(elems);
      },
      //insert editor and setup it
      appendEditor = function(elems) {
        var editor, id, editArea, tabId, name,
            dataObj = readConf();
        //set default settings
        dataObj.theme = dataObj.theme || 'ace/theme/eclipse';
        dataObj.font = dataObj.font || 11;
        dataObj.keybinding = dataObj.keybinding ?
            dataObj.keybinding === null ? null : dataObj.keybinding : null;
        dataObj.invisibles = dataObj.invisibles === undefined ?
            false : dataObj.invisibles;
        saveConf(dataObj);

        elems.each(function() {
          var codelang = this.getAttribute('data-codelang'),
              readOnly = this.getAttribute('readonly'),
              highlight = this.getAttribute('data-highlight'),
              highlightString;
          codelang = codelang || 'text';
          id = this.id;
          tabId = this.getAttribute('data-tabid');
          name = this.name;
          editArea = App.Dom.byId(id + '-editor');
          if (!editArea) {
            return true;
          }
          editArea.style.width = '100%';
          editArea.style.height = this.offsetHeight + 'px';
          editor = window.ace.edit(id + '-editor');
          editors[id] = editor;
          editor.getSession().setMode('ace/mode/' + codelang);
          editor.getSession().setNewLineMode('unix');
          editor.getSession().setValue(this.value);
          editor.focus();
          //editor.getHighlightSelectedWord(true);
          if (readOnly !== null) {
            editor.setReadOnly(true);
          }
          //set hifglight string
          if (highlight) {
            setTimeout(function() {
              var highlightField = App.Dom.byId(highlight + '-' + tabId);
              highlightString = highlightField ? highlightField.value : null;
              if (highlightString) {
                var found = editor.find({needle: highlightString, wrap: true });
                if (found) {
                  editor.session.addMarker(found, 'ace_orion_highlight_red', 'background');
                  editor.scrollToLine(found.start.row, true, true);
                }
              }
            }, 1);
          }
          this.style.display = 'none';
          appendToolbar(id, tabId, this, codelang);
        });
      },

      syncContent = function(e, self) {
        var tabId = this.getAttribute('data-tabid') ||
                self.getAttribute('data-tabid'),
            elems = $('#frm-' + tabId + ' .editor'),
            l = elems.length, id;
        while (l--) {
          id = elems[l].id;
          elems[l].value = editors[id].getValue();
        }
      },

      updateContent = function() {
        var id = this.id;
        editors[id].setValue(this.value);
      },
      //set variable with html template of toolbar
      setToolbarEditorTemplate = function(e, data) {
        toolbarEditorTemplate = doT.template(data);
      },
      //foreach all elemems and set saved values
      setToolbarVal = function(savedObj, tabId) {
        for (var keyVar in savedObj) {
          if (typeof savedObj[keyVar] === 'boolean') {
            if (savedObj[keyVar]) {
              $('#' + tabId + '-' + keyVar).trigger('click');
            }
          } else {
            $('#' + tabId + '-' + keyVar +
                ' li[data-val="' + savedObj[keyVar] + '"]').trigger('click');
          }
        }
      },
      //toolbar template variable
      toolbarEditorTemplate = '',
      //append toolbar and set saved values in elems
      appendToolbar = function(id, tabId, elem, codelang) {
        if (toolbarEditorTemplate === '') {
          setTimeout(function() {
            appendToolbar(id, tabId, elem, codelang); }, 300);
        } else {
          var savedData = readConf(),
              msg = App.Common.msg,
              dataObj = {
                tabId: id,
                fontMsg: msg.fontMsg || 'Font',
                modeMsg: msg.modeMsg || 'Mode',
                themeMsg: msg.themeMsg || 'Theme',
                keyBindMsg: msg.keyBindMsg || 'Key Binding',
                showInvMsg: msg.showInvMsg || 'Show Invisibles',
                showGutMsg: msg.showGutMsg || 'Show Gutter',
                softWrapMsg: msg.softWrapMsg || 'Soft Wrap',
                fullscreenMsg: msg.fullscreenMsg || 'Fullscreen',
                exitFullscreenMsg: msg.exitFullscreenMsg || 'Exit Fullscreen',
                darkMsg: 'Dark',
                brightMsg: 'Bright',
                modeValue: codelang
              },
              //@TODO!!!
              toolbarHTML = toolbarEditorTemplate(dataObj);
          var elemeId = elem.id;
          $(elem).after(toolbarHTML);
          App.Dom.removeClass(App.Dom.byId('resizer_editor-' + elemeId),
              'b-resizer_for_editor');
          savedData.mode = codelang;
          setToolbarVal(savedData, id);
          setTimeout(function() {
            EventMgr.trigger('appendToolbarAce', { tabId: tabId });
            EventMgr.trigger('updateScroll', { id: 'form-scroll-' + tabId });
          }, 100);
        }
      },

      resizeEditor = function(e, data) {
        var id = (data.id) ? data.id.replace('-editor', '') : undefined;
        if (editors[id]) {
          editors[id].resize();
        }
      };


  return {
    init: init
  };
}(window, $, EventMgr, App, doT);