[REF] website, web_editor: refactor ace editor
Stop using ugly code for ace editor.
* Really close the ace editor by changing its display property thanks
to the dedicated do_show and do_hide method.
* Make the common part of ace editors (website, web_studio) consistent
so that the extensions are really small.
* Do not do RPC to retrieve data already retrieved (now, there is only
one unique RPC when the editor starts an one RPC per view changed
on save).
* Fix born-dead code so that the website editor starts automatically
if the URL contains its associated hash and loads the correct view
* Better handle errors (previous behavior only worked partially and
only on chrome):
- Jump to the error line and make it red.
- Do not open a Dialog with mostly incomprehensible message but
allow to open it on click of the error marker.
- Do not save any changed file if one contains an error.
- Do not allow formatting a file if it contains an error (show the
error instead).
* Do not use different routes to get the same content (remove the
/website/customize_template_get route as it returns the same
content as /web_editor/customize_template_get route). Note: in
a further commit this route will be refactored.
* In a general way, use consistent method names and behaviors /
comment the code / lint files / ...
* Open the code to extensions (so that it may later load other data
than XML).
Note: this refactoring allowed to fix bugs in previous odoo versions
but this commit message will not detail them.
This commit is contained in:
qsm-odoo
@@ -2,8 +2,8 @@ odoo.define('web_editor.ace', function (require) {
|
||||
'use strict';
|
||||
|
||||
var ajax = require('web.ajax');
|
||||
var Class = require('web.Class');
|
||||
var core = require('web.core');
|
||||
var Dialog = require("web.Dialog");
|
||||
var Widget = require('web.Widget');
|
||||
var base = require('web_editor.base');
|
||||
var local_storage = require('web.local_storage');
|
||||
@@ -13,329 +13,414 @@ var _t = core._t;
|
||||
|
||||
ajax.loadXML('/web_editor/static/src/xml/ace.xml', qweb);
|
||||
|
||||
var XmlDocument = Class.extend({
|
||||
init: function (text) {
|
||||
this.xml = text;
|
||||
},
|
||||
isWellFormed: function () {
|
||||
var error;
|
||||
if (document.implementation.createDocument) {
|
||||
// use try catch for ie
|
||||
try {
|
||||
var dom = new DOMParser().parseFromString(this.xml, "text/xml");
|
||||
error = dom.getElementsByTagName("parsererror");
|
||||
return error.length === 0 || $(error).text();
|
||||
} catch (e) {}
|
||||
function checkXML(xml) {
|
||||
if (typeof window.DOMParser != "undefined") {
|
||||
var xmlDoc = (new window.DOMParser()).parseFromString(xml, "text/xml");
|
||||
var error = xmlDoc.getElementsByTagName("parsererror");
|
||||
if (error.length > 0) {
|
||||
return {
|
||||
isValid: false,
|
||||
error: {
|
||||
line: parseInt(error[0].innerHTML.match(/[Ll]ine[^\d]+(\d+)/)[1], 10),
|
||||
message: error[0].innerHTML
|
||||
}
|
||||
};
|
||||
}
|
||||
if (window.ActiveXObject) {
|
||||
// IE
|
||||
var msDom = new ActiveXObject("Microsoft.XMLDOM");
|
||||
msDom.async = false;
|
||||
msDom.loadXML(this.xml);
|
||||
return !msDom.parseError.errorCode || msDom.parseError.reason + "\nline " + msDom.parseError.line;
|
||||
} else if (typeof window.ActiveXObject != "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
|
||||
var xmlDocIE = new window.ActiveXObject("Microsoft.XMLDOM");
|
||||
xmlDocIE.async = "false";
|
||||
xmlDocIE.loadXML(xml);
|
||||
if (xmlDocIE.parseError.line > 0) {
|
||||
return {
|
||||
isValid: false,
|
||||
error: {
|
||||
line: xmlDocIE.parseError.line,
|
||||
message: xmlDocIE.parseError.reason
|
||||
}
|
||||
};
|
||||
}
|
||||
return true;
|
||||
},
|
||||
format: function () {
|
||||
return vkbeautify.xml(this.xml, 4);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
var ViewOption = Widget.extend({
|
||||
template: 'web_editor.ace_view_option',
|
||||
init: function (parent, options) {
|
||||
this.view_id = options.id;
|
||||
this.view_name = options.name;
|
||||
return {
|
||||
isValid: true
|
||||
};
|
||||
}
|
||||
|
||||
var indent = _.str.repeat("- ", options.level);
|
||||
this.view_name = _.str.sprintf("%s%s", indent, options.name);
|
||||
this._super(parent);
|
||||
},
|
||||
});
|
||||
function formatXML(xml) {
|
||||
return window.vkbeautify.xml(xml, 4);
|
||||
}
|
||||
|
||||
/**
|
||||
* The ViewEditor Widget allow to visualize resources (by default, XML views) and edit them.
|
||||
*/
|
||||
var ViewEditor = Widget.extend({
|
||||
resizing: false,
|
||||
refX: 0,
|
||||
minWidth: 40,
|
||||
template: 'web_editor.ace_view_editor',
|
||||
events: {
|
||||
'change #ace-view-list': 'displaySelectedView',
|
||||
'click .js_include_bundles': 'loadTemplates',
|
||||
'click button[data-action=save]': 'saveViews',
|
||||
'click button[data-action=format]': 'formatXml',
|
||||
'click button[data-action=close]': 'close',
|
||||
'change #ace-view-list': function () {
|
||||
this.displayView(this.selectedViewId());
|
||||
},
|
||||
'click .js_include_bundles': function (e) {
|
||||
this.options.includeBundles = $(e.target).prop("checked");
|
||||
this.loadResources().then(this._updateViewSelectDOM.bind(this));
|
||||
},
|
||||
'click button[data-action=save]': 'saveResources',
|
||||
'click button[data-action=format]': 'formatResource',
|
||||
'click button[data-action=close]': 'do_hide',
|
||||
},
|
||||
init: function (parent) {
|
||||
this.buffers = {};
|
||||
this.views = {};
|
||||
this._super(parent);
|
||||
},
|
||||
start: function () {
|
||||
var self = this;
|
||||
self.aceEditor = ace.edit(self.$('#ace-view-editor')[0]);
|
||||
self.aceEditor.setTheme("ace/theme/monokai");
|
||||
self.loadTemplates();
|
||||
/**
|
||||
* The init method should initialize the parameters of which information the ace editor will
|
||||
* have to load.
|
||||
* @param parent: the parent element of the editor widget.
|
||||
* @param viewKey: xml_id of the view whose linked resources are to be loaded.
|
||||
Also allow to receive the id directly.
|
||||
* @param options: an object containing some options
|
||||
* - initialViewID: a specific view ID to load on start (otherwise the main view ID
|
||||
* associated with the specified viewKey will be used).
|
||||
* - includeBundles: whether or not the assets bundles templates needs to be loaded.
|
||||
*/
|
||||
init: function (parent, viewKey, options) {
|
||||
this._super.apply(this, arguments);
|
||||
|
||||
var $editor = self.$('.ace_editor');
|
||||
function resizeEditor (target) {
|
||||
var width = Math.min(document.body.clientWidth, Math.max(parseInt(target, 10), self.minWidth));
|
||||
$editor.width(width);
|
||||
self.aceEditor.resize();
|
||||
self.$el.width(width);
|
||||
this.viewKey = viewKey;
|
||||
this.options = options || {};
|
||||
|
||||
this.views = {};
|
||||
this.buffers = {};
|
||||
},
|
||||
/**
|
||||
* The willStart method is in charge of loading everything the ace library needs to work.
|
||||
* It also loads the resources to visualize. See @loadResources.
|
||||
*/
|
||||
willStart: function () {
|
||||
var js_def = ajax.loadJS('/web/static/lib/ace/ace.odoo-custom.js').then(function () {
|
||||
return $.when(
|
||||
ajax.loadJS('/web/static/lib/ace/mode-xml.js'),
|
||||
ajax.loadJS('/web/static/lib/ace/theme-monokai.js')
|
||||
);
|
||||
});
|
||||
return $.when(this._super.apply(this, arguments), js_def, this.loadResources());
|
||||
},
|
||||
/**
|
||||
* The start method is in charge of initializing the library and initial view once the DOM is
|
||||
* ready. It also initializes the resize feature of the ace editor.
|
||||
* @return a deferred which is resolved when the widget DOM content is fully loaded.
|
||||
*/
|
||||
start: function () {
|
||||
this.$viewEditor = this.$('#ace-view-editor');
|
||||
this.$editor = this.$(".ace_editor");
|
||||
this.$viewList = this.$('#ace-view-list');
|
||||
this.$viewID = this.$('#ace-view-id');
|
||||
|
||||
this.aceEditor = window.ace.edit(this.$viewEditor[0]);
|
||||
this.aceEditor.setTheme("ace/theme/monokai");
|
||||
|
||||
var refX = 0;
|
||||
var resizing = false;
|
||||
var minWidth = 400;
|
||||
|
||||
this._updateViewSelectDOM();
|
||||
this.displayView(
|
||||
this.options.initialViewID
|
||||
|| (typeof this.viewKey === "number" ? this.viewKey : _.findWhere(this.views, {xml_id: this.viewKey}).id)
|
||||
);
|
||||
|
||||
$(document).on("mouseup.ViewEditor", stopResizing.bind(this)).on("mousemove.ViewEditor", updateWidth.bind(this));
|
||||
this.$el.on("mousedown.ViewEditor", ".ace_gutter", startResizing.bind(this));
|
||||
|
||||
resizeEditor.call(this, readEditorWidth.call(this));
|
||||
|
||||
return this._super.apply(this, arguments);
|
||||
|
||||
function resizeEditor(target) {
|
||||
var width = Math.min(document.body.clientWidth, Math.max(parseInt(target, 10), minWidth));
|
||||
this.$editor.width(width);
|
||||
this.aceEditor.resize();
|
||||
this.$el.width(width);
|
||||
}
|
||||
function storeEditorWidth() {
|
||||
local_storage.setItem('ace_editor_width', self.$el.width());
|
||||
local_storage.setItem('ace_editor_width', this.$el.width());
|
||||
}
|
||||
function readEditorWidth() {
|
||||
var width = local_storage.getItem('ace_editor_width');
|
||||
return parseInt(width || 720, 10);
|
||||
}
|
||||
function startResizing (e) {
|
||||
self.refX = e.pageX;
|
||||
self.resizing = true;
|
||||
function startResizing(e) {
|
||||
refX = e.pageX;
|
||||
resizing = true;
|
||||
}
|
||||
function stopResizing () {
|
||||
self.resizing = false;
|
||||
function stopResizing() {
|
||||
resizing = false;
|
||||
}
|
||||
function updateWidth (e) {
|
||||
if (self.resizing) {
|
||||
var offset = e.pageX - self.refX;
|
||||
var width = self.$el.width() - offset;
|
||||
self.refX = e.pageX;
|
||||
resizeEditor(width);
|
||||
storeEditorWidth();
|
||||
}
|
||||
}
|
||||
self.$('.ace_gutter').mouseup(stopResizing).mousedown(startResizing).click(stopResizing);
|
||||
$(document).on("mousemove.ViewEditor", updateWidth).on("mouseup.ViewEditor", stopResizing);
|
||||
$('button[data-action=edit]').click(function () {
|
||||
self.close();
|
||||
});
|
||||
resizeEditor(readEditorWidth());
|
||||
function updateWidth(e) {
|
||||
if (!resizing) return;
|
||||
|
||||
return this._super.apply(this, arguments);
|
||||
var offset = e.pageX - refX;
|
||||
var width = this.$el.width() - offset;
|
||||
refX = e.pageX;
|
||||
resizeEditor.call(this, width);
|
||||
storeEditorWidth.call(this);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* The destroy method unbinds custom events binded to the document element.
|
||||
*/
|
||||
destroy: function () {
|
||||
this._super.apply(this, arguments);
|
||||
this.$el.off(".ViewEditor");
|
||||
$(document).off(".ViewEditor");
|
||||
},
|
||||
/**
|
||||
* The loadResources method is in charge of loading data the ace editor will vizualize
|
||||
* and of processing them.
|
||||
* Default behavior is loading the activate views, index them and build their hierarchy.
|
||||
* @return a deferred which is resolved once everything is loaded and processed.
|
||||
*/
|
||||
loadResources: function () {
|
||||
return ajax.jsonRpc('/web_editor/customize_template_get', 'call', {
|
||||
key: this.viewKey,
|
||||
full: true,
|
||||
bundles: this.options.includeBundles
|
||||
}).then((function (views) {
|
||||
// Only keep the active views and index them by ID.
|
||||
this.views = _.indexBy(_.filter(views, function (view) {
|
||||
return view.active;
|
||||
}), "id");
|
||||
|
||||
// The 4 following methods are meant to be extended depending on the context
|
||||
open: function () {
|
||||
this.$el.removeClass('oe_ace_closed').addClass('oe_ace_open');
|
||||
},
|
||||
close: function () {
|
||||
this.$el.removeClass('oe_ace_open').addClass('oe_ace_closed');
|
||||
},
|
||||
reloadPage: function () {},
|
||||
loadTemplates: function () {},
|
||||
|
||||
loadViews: function (views) {
|
||||
var $viewList = this.$('#ace-view-list').empty();
|
||||
var viewGraph = this.buildViewGraph(views);
|
||||
_(viewGraph).each(function (view) {
|
||||
if (!view.id) { return; }
|
||||
|
||||
this.views[view.id] = view;
|
||||
new ViewOption(this, view).appendTo($viewList);
|
||||
}.bind(this));
|
||||
return this.loadView(viewGraph[0].id);
|
||||
},
|
||||
buildViewGraph: function (views) {
|
||||
var activeViews = _.uniq(_.filter(views, function (view) {
|
||||
return view.active;
|
||||
}), false, function (view) {
|
||||
return view.id;
|
||||
});
|
||||
var index = {};
|
||||
var roots = [];
|
||||
_.each(activeViews, function (view) {
|
||||
index[view.id] = view;
|
||||
view.children = [];
|
||||
});
|
||||
_.each(index, function (view) {
|
||||
var parentId = view.inherit_id[0];
|
||||
if (parentId && index[parentId]) {
|
||||
index[parentId].children.push(view);
|
||||
} else {
|
||||
roots.push(view);
|
||||
}
|
||||
});
|
||||
var result = [];
|
||||
function visit (node, level) {
|
||||
node.level = level;
|
||||
result.push(node);
|
||||
_.each(node.children, function (child) {
|
||||
visit(child, level + 1);
|
||||
// Initialize a 0 level for each view and assign them an array containing their children.
|
||||
var self = this;
|
||||
var roots = [];
|
||||
_.each(this.views, function (view) {
|
||||
view.level = 0;
|
||||
view.children = [];
|
||||
});
|
||||
_.each(this.views, function (view) {
|
||||
var parentId = view.inherit_id[0];
|
||||
var parent = parentId && self.views[parentId];
|
||||
if (parent) {
|
||||
parent.children.push(view);
|
||||
} else {
|
||||
roots.push(view);
|
||||
}
|
||||
});
|
||||
|
||||
// Assign the correct level based on children key and save a sorted array where
|
||||
// each view is followed by their children.
|
||||
this.sorted_views = [];
|
||||
function visit(view, level) {
|
||||
view.level = level;
|
||||
self.sorted_views.push(view);
|
||||
_.each(view.children, function (child) {
|
||||
visit(child, level + 1);
|
||||
});
|
||||
}
|
||||
_.each(roots, function (root) {
|
||||
visit(root, 0);
|
||||
});
|
||||
}).bind(this));
|
||||
},
|
||||
/**
|
||||
* The private _updateViewSelectDOM method purpose is to render the content of the view
|
||||
* select DOM element according to current widget data.
|
||||
*/
|
||||
_updateViewSelectDOM: function () {
|
||||
var currentId = this.selectedViewId();
|
||||
|
||||
var self = this;
|
||||
this.$viewList.empty();
|
||||
_.each(this.sorted_views, function (view) {
|
||||
self.$viewList.append($("<option/>", {
|
||||
value: view.id,
|
||||
text: _.str.sprintf("%s%s", _.str.repeat("- ", view.level), view.name),
|
||||
selected: currentId === view.id
|
||||
}));
|
||||
});
|
||||
},
|
||||
/**
|
||||
* The selectedViewId method returns the currently selected view id.
|
||||
* @return the currently selected view id.
|
||||
*/
|
||||
selectedViewId: function () {
|
||||
return parseInt(this.$viewList.val(), 10);
|
||||
},
|
||||
/**
|
||||
* The displayView method forces the view identified by its ID to be displayed in the editor.
|
||||
* The method will update the view select DOM element as well.
|
||||
* @param viewID: the ID of the view to display.
|
||||
*/
|
||||
displayView: function (viewID) {
|
||||
var editingSession = this.buffers[viewID];
|
||||
if (!editingSession) {
|
||||
editingSession = this._buildEditingSession(viewID);
|
||||
}
|
||||
this.aceEditor.setSession(editingSession);
|
||||
this.$viewID.text(_.str.sprintf(_t("Template ID: %s"), this.views[viewID].xml_id));
|
||||
|
||||
if (viewID !== this.selectedViewId()) {
|
||||
this.$viewList.val(viewID);
|
||||
}
|
||||
_.each(roots, function (node) {
|
||||
visit(node, 0);
|
||||
});
|
||||
return result;
|
||||
},
|
||||
loadView: function (id) {
|
||||
var viewId = parseInt(id, 10);
|
||||
/**
|
||||
* The private _buildEditingSession method initialize a text editor for the specified view.
|
||||
* @param viewID: the ID of the view to display.
|
||||
* @return an ace.EditSession object linked to the specified viewID.
|
||||
*/
|
||||
_buildEditingSession: function(viewID) {
|
||||
var self = this;
|
||||
return ajax.jsonRpc('/web/dataset/call', 'call', {
|
||||
model: 'ir.ui.view',
|
||||
method: 'read',
|
||||
args: [[viewId], ['arch'], _.extend(base.get_context(), {'lang': null})],
|
||||
}).then(function (result) {
|
||||
self._displayArch(result[0].arch, viewId);
|
||||
});
|
||||
},
|
||||
_displayArch: function(arch, viewId) {
|
||||
var self = this;
|
||||
var editingSession = this.buffers[viewId] = new ace.EditSession(arch);
|
||||
var editingSession = this.buffers[viewID] = new window.ace.EditSession(this.views[viewID].arch);
|
||||
editingSession.setUseWorker(false);
|
||||
editingSession.setMode("ace/mode/xml");
|
||||
editingSession.setUndoManager(new ace.UndoManager());
|
||||
editingSession.setUndoManager(new window.ace.UndoManager());
|
||||
editingSession.on("change", function () {
|
||||
setTimeout(function () {
|
||||
var $option = self.$('#ace-view-list').find('[value='+viewId+']');
|
||||
var bufferName = $option.text();
|
||||
var dirtyMarker = " (unsaved changes)";
|
||||
var isDirty = editingSession.getUndoManager().hasUndo();
|
||||
if (isDirty && bufferName.indexOf(dirtyMarker) < 0) {
|
||||
$option.text(bufferName + dirtyMarker);
|
||||
} else if (!isDirty && bufferName.indexOf(dirtyMarker) > 0) {
|
||||
$option.text(bufferName.substring(0, bufferName.indexOf(dirtyMarker)));
|
||||
}
|
||||
}, 1);
|
||||
});
|
||||
if (viewId === self.selectedViewId()) {
|
||||
self.displayView.call(self, viewId);
|
||||
}
|
||||
},
|
||||
selectedViewId: function () {
|
||||
return parseInt(this.$('#ace-view-list').val(), 10);
|
||||
},
|
||||
displayView: function (id) {
|
||||
var viewId = parseInt(id, 10);
|
||||
var editingSession = this.buffers[viewId];
|
||||
if (editingSession) {
|
||||
this.aceEditor.setSession(editingSession);
|
||||
this.$('#ace-view-id').text(_.str.sprintf(
|
||||
_t("Template ID: %s"),
|
||||
this.views[viewId].xml_id));
|
||||
}
|
||||
},
|
||||
displaySelectedView: function () {
|
||||
var self = this;
|
||||
var viewID = this.selectedViewId();
|
||||
if (this.buffers[viewID]) {
|
||||
this.displayView(viewID);
|
||||
this.updateHash();
|
||||
} else {
|
||||
this.loadView(viewID).then(function() {
|
||||
self.updateHash();
|
||||
_.defer(function () {
|
||||
self._toggleDirtyInfo(viewID);
|
||||
self._showErrorLine();
|
||||
});
|
||||
});
|
||||
return editingSession;
|
||||
},
|
||||
/**
|
||||
* The private _toggleDirtyInfo method update the select option DOM element associated with
|
||||
* a particular viewID to indicate if the option is dirty or not.
|
||||
* @param viewID: the view id whose option has to be updated
|
||||
* @param isDirty: a boolean to indicate if the view is dirty or not ; default to content of UndoManager
|
||||
*/
|
||||
_toggleDirtyInfo: function (viewID, isDirty) {
|
||||
if (!viewID || !this.buffers[viewID]) return;
|
||||
|
||||
var $option = this.$viewList.find("[value=" + viewID + "]");
|
||||
var optionName = $option.text();
|
||||
var dirtyMarker = " (" + _t("unsaved changes") + ")";
|
||||
if (isDirty === undefined) {
|
||||
isDirty = this.buffers[viewID].getUndoManager().hasUndo();
|
||||
}
|
||||
if (isDirty && optionName.indexOf(dirtyMarker) < 0) {
|
||||
$option.text(optionName + dirtyMarker);
|
||||
} else if (!isDirty && optionName.indexOf(dirtyMarker) > 0) {
|
||||
$option.text(optionName.substring(0, optionName.indexOf(dirtyMarker)));
|
||||
}
|
||||
},
|
||||
formatXml: function () {
|
||||
var xml = new XmlDocument(this.aceEditor.getValue());
|
||||
this.aceEditor.setValue(xml.format());
|
||||
/**
|
||||
* The formatResource method formats the current resource being vizualized.
|
||||
*/
|
||||
formatResource: function () {
|
||||
this._formatXML();
|
||||
},
|
||||
saveViews: function () {
|
||||
var self = this;
|
||||
var toSave = _.filter(_.map(self.buffers, function (editingSession, viewId) {
|
||||
/**
|
||||
* The private _formatXML method formats the current resource assuming it is an XML document.
|
||||
* If the xml is not valid, it shows the error instead.
|
||||
*/
|
||||
_formatXML: function () {
|
||||
var xml = this.aceEditor.getValue();
|
||||
var check = checkXML(xml);
|
||||
if (check.isValid) {
|
||||
this.aceEditor.setValue(formatXML(xml));
|
||||
} else {
|
||||
this._showErrorLine(check.error.line, check.error.message, this.selectedViewId());
|
||||
}
|
||||
},
|
||||
/**
|
||||
* The saveResources method is in charge of saving every resource that has been modified.
|
||||
* If one cannot be saved, none is saved and an error message is displayed.
|
||||
* @return a deferred whose status indicates if the save is finished or if an error occured.
|
||||
*/
|
||||
saveResources: function () {
|
||||
var dirtyBuffers = _.pick(this.buffers, function (session) {
|
||||
return session.getUndoManager().hasUndo();
|
||||
});
|
||||
var toSave = _.map(dirtyBuffers, function (editingSession, viewID) {
|
||||
return {
|
||||
id: parseInt(viewId, 10),
|
||||
isDirty: editingSession.getUndoManager().hasUndo(),
|
||||
id: parseInt(viewID, 10),
|
||||
text: editingSession.getValue(),
|
||||
};
|
||||
}), function (session) {
|
||||
return session.isDirty;
|
||||
});
|
||||
this.clearError();
|
||||
var requests = _.map(toSave, function (session) {
|
||||
return self.saveView(session);
|
||||
});
|
||||
$.when.apply($, requests).then(function () {
|
||||
self.reloadPage.call(self);
|
||||
}).fail(function (source, session, error) {
|
||||
self.displayError.call(self, source, session, error);
|
||||
|
||||
this._showErrorLine();
|
||||
for (var i = 0 ; i < toSave.length ; i++) {
|
||||
var check = checkXML(toSave[i].text);
|
||||
if (!check.isValid) {
|
||||
this._showErrorLine(check.error.line, check.error.message, toSave[i].id);
|
||||
return $.Deferred().reject(toSave[i]);
|
||||
}
|
||||
}
|
||||
|
||||
return $.when.apply($, _.map(toSave, this._saveView.bind(this))).fail(function (session, error) {
|
||||
Dialog.alert(this, "", {
|
||||
title: _t("Server error"),
|
||||
$content: $("<div/>").html(
|
||||
_t("A server error occured. Please check you correctly signed in and that the XML you are saving is well-formed.")
|
||||
+ "<br/>"
|
||||
+ error
|
||||
)
|
||||
});
|
||||
});
|
||||
},
|
||||
saveView: function (session) {
|
||||
var xml = new XmlDocument(session.text);
|
||||
var isWellFormed = xml.isWellFormed();
|
||||
/**
|
||||
* The private _saveView method is in charge of saving an unique XML view.
|
||||
* @param session: an object which contains the "id" and the "text" of the view to save.
|
||||
* @return a deferred whose status indicates if the save is finished or if an error occured.
|
||||
*/
|
||||
_saveView: function (session) {
|
||||
var def = $.Deferred();
|
||||
if (isWellFormed === true) {
|
||||
ajax.jsonRpc('/web/dataset/call', 'call', {
|
||||
model: 'ir.ui.view',
|
||||
method: 'write',
|
||||
args: [[session.id], { 'arch': xml.xml }, _.extend(base.get_context(), {'lang': null})],
|
||||
}).then(function () {
|
||||
def.resolve();
|
||||
}).fail(function (source, error) {
|
||||
def.reject("server", session, error);
|
||||
});
|
||||
} else {
|
||||
def.reject(null, session, isWellFormed);
|
||||
}
|
||||
|
||||
var self = this;
|
||||
ajax.jsonRpc('/web/dataset/call', 'call', {
|
||||
model: 'ir.ui.view',
|
||||
method: 'write',
|
||||
args: [[session.id], {arch: session.text}, _.extend(base.get_context(), {lang: null})],
|
||||
}).then(function () {
|
||||
self._toggleDirtyInfo(session.id, false);
|
||||
def.resolve();
|
||||
}, function (source, error) {
|
||||
def.reject(session, error);
|
||||
});
|
||||
|
||||
return def;
|
||||
},
|
||||
clearError: function () {
|
||||
this.$(".ace_layer.ace_text-layer .ace_line").css("background", "");
|
||||
},
|
||||
displayError: function (source, session, error) {
|
||||
var self = this;
|
||||
var line, test;
|
||||
// format error message
|
||||
var message = _.isString(error) ? error
|
||||
: (error && error.data && error.data.arguments && error.data.arguments[0] === "Access Denied") ? "Access denied: please sign in"
|
||||
: (error && error.data && error.data.message) ? error.data.message
|
||||
: (error && error.message) ? error.message
|
||||
: "Unexpected error";
|
||||
if (source == "server") {
|
||||
message = eval(message.replace(/^\(/g, '([')
|
||||
.replace(/\)$/g, '])')
|
||||
.replace(/u'/g, "'")
|
||||
.replace(/<([^>]+)>/g, '<b style="color:#661100;"><\$1></b>'))[1];
|
||||
line = -1;
|
||||
} else {
|
||||
line = message.match(/line ([0-9]+)/i);
|
||||
line = line ? parseInt(line[1],10) : -1;
|
||||
test = new RegExp("^\\s*"+line+"\\s*$");
|
||||
/**
|
||||
* The private _showErrorLine method is designed to show a line which produced an error. Red color
|
||||
* is added to the editor, the cursor move to the line and a message is opened on click on the line
|
||||
* number. If the _showErrorLine is called without argument, the effects are removed.
|
||||
* @param line: the line number to highlight
|
||||
* @param message: the message to show on click on the line number
|
||||
* @param viewID: the id of the view whose line is to highlight
|
||||
*/
|
||||
_showErrorLine: function (line, message, viewID) {
|
||||
if (line === undefined || line <= 0) {
|
||||
if (this.$errorLine) {
|
||||
this.$errorLine.removeClass("o_error");
|
||||
this.$errorLine.off(".o_error");
|
||||
this.$errorLine = undefined;
|
||||
this.$errorContent.removeClass("o_error");
|
||||
this.$errorContent = undefined;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
function gotoline() {
|
||||
self.aceEditor.gotoLine(line);
|
||||
setTimeout(function () {
|
||||
var $lines = self.$(".ace_editor .ace_gutter .ace_gutter-cell");
|
||||
var index = $lines.filter(function () {
|
||||
return test.test($(this).text());
|
||||
}).index();
|
||||
if (index>0) {
|
||||
self.$(".ace_layer.ace_text-layer .ace_line:eq(" + index + ")").css("background", "#661100");
|
||||
}
|
||||
},100);
|
||||
}
|
||||
function onchangeSession () {
|
||||
self.aceEditor.off('changeSession', onchangeSession);
|
||||
gotoline();
|
||||
if (this.selectedViewId() === viewID) {
|
||||
__showErrorLine.call(this, line);
|
||||
} else {
|
||||
var onChangeSession = (function () {
|
||||
this.aceEditor.off("changeSession", onChangeSession);
|
||||
_.delay(__showErrorLine.bind(this, line), 400);
|
||||
}).bind(this);
|
||||
this.aceEditor.on('changeSession', onChangeSession);
|
||||
this.displayView(viewID);
|
||||
}
|
||||
|
||||
var $list = this.$("#ace-view-list");
|
||||
if (+$list.val() == session.id) {
|
||||
if (line>-1) gotoline();
|
||||
} else {
|
||||
if (line) self.aceEditor.on('changeSession', onchangeSession);
|
||||
this.$("#ace-view-list").val(session.id).change();
|
||||
function __showErrorLine(line) {
|
||||
this.aceEditor.gotoLine(line);
|
||||
this.$errorLine = this.$viewEditor.find(".ace_gutter-cell").filter(function () {
|
||||
return parseInt($(this).text()) === line;
|
||||
}).addClass("o_error");
|
||||
this.$errorLine.addClass("o_error").on("click.o_error", function () {
|
||||
var $message = $("<div/>").html(message);
|
||||
$message.text($message.text());
|
||||
Dialog.alert(this, "", {$content: $message});
|
||||
});
|
||||
this.$errorContent = this.$viewEditor.find(".ace_scroller").addClass("o_error");
|
||||
}
|
||||
return {
|
||||
title: session.text.match(/\s+name=['"]([^'"]+)['"]/i)[1],
|
||||
message: "<b>Malformed XML document</b>:<br/>" + message
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
XmlDocument: XmlDocument,
|
||||
ViewOption: ViewOption,
|
||||
ViewEditor: ViewEditor,
|
||||
};
|
||||
|
||||
return ViewEditor;
|
||||
});
|
||||
|
||||
@@ -126,6 +126,7 @@
|
||||
color: white;
|
||||
.o-flex-display();
|
||||
.o-flex-flow(column, nowrap);
|
||||
opacity: 0.97;
|
||||
|
||||
.o_ace_view_editor_title {
|
||||
.o-flex(0, 0, auto);
|
||||
@@ -164,15 +165,29 @@
|
||||
.o-flex(1, 1, auto);
|
||||
.ace_gutter {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
}
|
||||
|
||||
&.oe_ace_open {
|
||||
opacity: 0.97;
|
||||
}
|
||||
&.oe_ace_closed {
|
||||
z-index: -1000;
|
||||
opacity: 0;
|
||||
.ace_gutter-cell.o_error {
|
||||
position: relative;
|
||||
&::after {
|
||||
.o-position-absolute(-100%, 0, -100%, 0);
|
||||
.ace-line-error-mixin();
|
||||
}
|
||||
}
|
||||
}
|
||||
.ace_scroller.o_error::after {
|
||||
.o-position-absolute(0, auto, 0, 0);
|
||||
width: 3px;
|
||||
.ace-line-error-mixin();
|
||||
}
|
||||
|
||||
.ace-line-error-mixin() {
|
||||
content: "";
|
||||
z-index: 1000;
|
||||
display: block;
|
||||
background-color: @brand-danger;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<templates>
|
||||
|
||||
<t t-name="web_editor.ace_view_editor">
|
||||
<div class="o_ace_view_editor oe_ace_closed">
|
||||
<div class="o_ace_view_editor">
|
||||
<div class="form-inline o_ace_view_editor_title">
|
||||
<select id="ace-view-list" class="form-control oe_view_list"/>
|
||||
<label class="oe_include_bundles">
|
||||
@@ -22,8 +22,4 @@
|
||||
</div>
|
||||
</t>
|
||||
|
||||
<t t-name="web_editor.ace_view_option">
|
||||
<option t-att-value="widget.view_id"><t t-esc="widget.view_name"/></option>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
|
||||
@@ -260,15 +260,6 @@ class Website(Home):
|
||||
modules.button_immediate_upgrade()
|
||||
return request.redirect(redirect)
|
||||
|
||||
@http.route('/website/customize_template_get', type='json', auth='user', website=True)
|
||||
def customize_template_get(self, key, full=False, bundles=False):
|
||||
""" Get inherit view's informations of the template ``key``.
|
||||
returns templates info (which can be active or not)
|
||||
``full=False`` returns only the customize_show template
|
||||
``bundles=True`` returns also the asset bundles
|
||||
"""
|
||||
return request.env["ir.ui.view"].customize_template_get(key, full=full, bundles=bundles)
|
||||
|
||||
@http.route('/website/translations', type='json', auth="public", website=True)
|
||||
def get_website_translations(self, lang, mods=None):
|
||||
Modules = request.env['ir.module.module'].sudo()
|
||||
|
||||
@@ -1,83 +1,67 @@
|
||||
odoo.define('website.ace', function (require) {
|
||||
'use strict';
|
||||
|
||||
var ajax = require('web.ajax');
|
||||
var Widget = require('web.Widget');
|
||||
var website = require('website.website');
|
||||
|
||||
var AceCommon = require('web_editor.ace');
|
||||
var ViewEditor = require('web_editor.ace');
|
||||
|
||||
var hash = "#advanced-view-editor";
|
||||
|
||||
var Ace = Widget.extend({
|
||||
events: {
|
||||
'click a[data-action=ace]': 'launchAce',
|
||||
},
|
||||
launchAce: function (e) {
|
||||
var self = this;
|
||||
if (!window.ace && !this.loadJS_def) {
|
||||
this.loadJS_def = ajax.loadJS('/web/static/lib/ace/ace.odoo-custom.js').then(function () {
|
||||
return $.when(ajax.loadJS('/web/static/lib/ace/mode-xml.js'),
|
||||
ajax.loadJS('/web/static/lib/ace/theme-monokai.js'));
|
||||
});
|
||||
}
|
||||
|
||||
if (e) {
|
||||
"click a[data-action=ace]": function (e) {
|
||||
e.preventDefault();
|
||||
this.launchAce();
|
||||
},
|
||||
},
|
||||
start: function () {
|
||||
if (window.location.hash.substr(0, hash.length) === hash) {
|
||||
this.launchAce();
|
||||
}
|
||||
|
||||
return $.when(this.loadJS_def).then(function () {
|
||||
if (self.globalEditor) {
|
||||
self.globalEditor.open();
|
||||
} else {
|
||||
self.globalEditor = new ViewEditor(self);
|
||||
self.globalEditor.appendTo($(document.body));
|
||||
return this._super.apply(this, arguments);
|
||||
},
|
||||
launchAce: function () {
|
||||
if (this.globalEditor) {
|
||||
this.globalEditor.do_show();
|
||||
} else {
|
||||
var currentHash = window.location.hash;
|
||||
var indexOfView = currentHash.indexOf("?view=");
|
||||
var initialViewID = undefined;
|
||||
if (indexOfView >= 0) {
|
||||
initialViewID = parseInt(currentHash.substr(indexOfView + 6), 10);
|
||||
}
|
||||
});
|
||||
|
||||
this.globalEditor = new ViewEditor(this, $(document.documentElement).data('view-xmlid'), {
|
||||
initialViewID: initialViewID
|
||||
});
|
||||
this.globalEditor.appendTo(document.body);
|
||||
|
||||
$("a[data-action=edit]").on("click", this.globalEditor.do_hide.bind(this.globalEditor));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
var ViewEditor = AceCommon.ViewEditor.extend({
|
||||
loadTemplates: function () {
|
||||
var self = this;
|
||||
var args = {
|
||||
key: $(document.documentElement).data('view-xmlid'),
|
||||
full: true,
|
||||
bundles: this.$('.js_include_bundles')[0].checked
|
||||
};
|
||||
return ajax
|
||||
.jsonRpc('/website/customize_template_get', 'call', args)
|
||||
.then(function (views) {
|
||||
self.loadViews.call(self, views);
|
||||
self.open.call(self);
|
||||
var curentHash = window.location.hash;
|
||||
var indexOfView = curentHash.indexOf("?view=");
|
||||
if (indexOfView >= 0) {
|
||||
var viewId = parseInt(curentHash.substring(indexOfView + 6, curentHash.length), 10);
|
||||
self.$('#ace-view-list').val(viewId).change();
|
||||
} else {
|
||||
if (views.length >= 2) {
|
||||
var mainTemplate = views[1];
|
||||
self.$('#ace-view-list').val(mainTemplate.id).trigger('change');
|
||||
}
|
||||
window.location.hash = hash;
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Extend the default view editor so that the URL hash is updated with view id.
|
||||
*/
|
||||
ViewEditor = ViewEditor.extend({
|
||||
displayView: function () {
|
||||
this._super.apply(this, arguments);
|
||||
this._updateHash();
|
||||
},
|
||||
displayError: function () {
|
||||
var error = this._super.apply(this, arguments);
|
||||
website.error(error.title, error.message);
|
||||
saveResources: function () {
|
||||
return this._super.apply(this, arguments).then((function () {
|
||||
this._updateHash();
|
||||
window.location.reload();
|
||||
}).bind(this));
|
||||
},
|
||||
updateHash: function () {
|
||||
window.location.hash = hash + "?view=" + this.selectedViewId();
|
||||
},
|
||||
reloadPage: function () {
|
||||
this.updateHash();
|
||||
window.location.reload();
|
||||
},
|
||||
close: function () {
|
||||
do_hide: function () {
|
||||
this._super.apply(this, arguments);
|
||||
window.location.hash = "";
|
||||
this.$el.removeClass('oe_ace_open').addClass('oe_ace_closed');
|
||||
},
|
||||
_updateHash: function () {
|
||||
window.location.hash = hash + "?view=" + this.selectedViewId();
|
||||
},
|
||||
});
|
||||
|
||||
@@ -86,7 +70,7 @@ website.TopBar.include({
|
||||
this.ace = new Ace();
|
||||
return $.when(
|
||||
this._super.apply(this, arguments),
|
||||
this.ace.attachTo($('#html_editor'))
|
||||
this.ace.attachTo(this.$('#html_editor'))
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -70,7 +70,7 @@ website.TopBarCustomize = Widget.extend({
|
||||
},
|
||||
load_menu: function () {
|
||||
var $menu = this.$el.children("ul");
|
||||
ajax.jsonRpc('/website/customize_template_get', 'call', {
|
||||
ajax.jsonRpc('/web_editor/customize_template_get', 'call', {
|
||||
key: this.view_name,
|
||||
full: false
|
||||
}).then(function (result) {
|
||||
|
||||
Reference in New Issue
Block a user