Your IP : 18.219.40.177
/**
* 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);