summaryrefslogtreecommitdiff
path: root/addons/web_editor/static/src/js/widgets/ace.js
diff options
context:
space:
mode:
authorqsm-odoo <qsm@odoo.com>2018-03-13 15:20:20 +0100
committerqsm-odoo <qsm@odoo.com>2018-04-18 15:59:25 +0200
commite5b268827f2d8176d8b34b415a764d7e025dbd70 (patch)
treedcd652c5c60d412b07eb7bcaf36b98cf908f7890 /addons/web_editor/static/src/js/widgets/ace.js
parent6713d03ac838494cee62df3b2cd362364d21e2bd (diff)
[REF] web, web_editor, website: convert LESS editor to SCSS editor
Diffstat (limited to 'addons/web_editor/static/src/js/widgets/ace.js')
-rw-r--r--addons/web_editor/static/src/js/widgets/ace.js186
1 files changed, 93 insertions, 93 deletions
diff --git a/addons/web_editor/static/src/js/widgets/ace.js b/addons/web_editor/static/src/js/widgets/ace.js
index d5da96d2977..a92c56cae05 100644
--- a/addons/web_editor/static/src/js/widgets/ace.js
+++ b/addons/web_editor/static/src/js/widgets/ace.js
@@ -12,7 +12,7 @@ var session = require('web.session');
var _t = core._t;
/**
- * Formats a content-check result (@see checkXML, checkLESS).
+ * Formats a content-check result (@see checkXML, checkSCSS).
*
* @param {boolean} isValid
* @param {integer} [errorLine] needed if isValid is false
@@ -65,12 +65,12 @@ function formatXML(xml) {
return window.vkbeautify.xml(xml, 4);
}
/**
- * Checks the syntax validity of some LESS.
+ * Checks the syntax validity of some SCSS.
*
- * @param {string} less
+ * @param {string} scss
* @returns {Object} @see _getCheckReturn
*/
-var checkLESS = (function () {
+var checkSCSS = (function () {
var mapping = {
'{': '}', '}': '{',
'(': ')', ')': '(',
@@ -79,17 +79,17 @@ var checkLESS = (function () {
var openings = ['{', '(', '['];
var closings = ['}', ')', ']'];
- return function (less) {
+ return function (scss) {
var stack = [];
var line = 1;
- for (var i = 0 ; i < less.length ; i++) {
- if (_.contains(openings, less[i])) {
- stack.push(less[i]);
- } else if (_.contains(closings, less[i])) {
- if (stack.pop() !== mapping[less[i]]) {
- return _getCheckReturn(false, line, _t("Unexpected ") + less[i]);
+ for (var i = 0 ; i < scss.length ; i++) {
+ if (_.contains(openings, scss[i])) {
+ stack.push(scss[i]);
+ } else if (_.contains(closings, scss[i])) {
+ if (stack.pop() !== mapping[scss[i]]) {
+ return _getCheckReturn(false, line, _t("Unexpected ") + scss[i]);
}
- } else if (less[i] === '\n') {
+ } else if (scss[i] === '\n') {
line++;
}
}
@@ -100,14 +100,14 @@ var checkLESS = (function () {
};
})();
/**
- * Formats some LESS so that it has proper indentation and structure.
+ * Formats some SCSS so that it has proper indentation and structure.
*
- * @todo Right now, this does return the given LESS content, untouched.
- * @param {string} less
- * @returns {string} formatted less
+ * @todo Right now, this does return the given SCSS content, untouched.
+ * @param {string} scss
+ * @returns {string} formatted scss
*/
-function formatLESS(less) {
- return less;
+function formatSCSS(scss) {
+ return scss;
}
/**
@@ -120,7 +120,7 @@ var ViewEditor = Widget.extend({
'/web/static/lib/ace/ace.js',
[
'/web/static/lib/ace/mode-xml.js',
- '/web/static/lib/ace/mode-less.js',
+ '/web/static/lib/ace/mode-scss.js',
'/web/static/lib/ace/theme-monokai.js'
]
],
@@ -128,7 +128,7 @@ var ViewEditor = Widget.extend({
'click .o_ace_type_switcher_choice': '_onTypeChoice',
'change .o_res_list': '_onResChange',
'click .js_include_bundles': '_onIncludeBundlesChange',
- 'click .js_include_all_less': '_onIncludeAllLessChange',
+ 'click .js_include_all_scss': '_onIncludeAllSCSSChange',
'click button[data-action=save]': '_onSaveClick',
'click button[data-action=reset]': '_onResetClick',
'click button[data-action=format]': '_onFormatClick',
@@ -145,13 +145,13 @@ var ViewEditor = Widget.extend({
* xml_id or id of the view whose linked resources have to be loaded.
* @param {Object} [options]
* @param {string|integer} [options.initialResID]
- * a specific view ID / LESS URL to load on start (otherwise the main
+ * a specific view ID / SCSS URL to load on start (otherwise the main
* view ID associated with the specified viewKey will be used)
* @param {string} [options.position=right]
* @param {boolean} [options.doNotLoadViews=false]
- * @param {boolean} [options.doNotLoadLess=false]
+ * @param {boolean} [options.doNotLoadSCSS=false]
* @param {boolean} [options.includeBundles=false]
- * @param {boolean} [options.includeAllLess=false]
+ * @param {boolean} [options.includeAllSCSS=false]
* @param {string[]} [options.defaultBundlesRestriction]
*/
init: function (parent, viewKey, options) {
@@ -161,19 +161,19 @@ var ViewEditor = Widget.extend({
this.options = _.defaults({}, options, {
position: 'right',
doNotLoadViews: false,
- doNotLoadLess: false,
+ doNotLoadSCSS: false,
includeBundles: false,
- includeAllLess: false,
+ includeAllSCSS: false,
defaultBundlesRestriction: [],
});
- this.resources = {xml: {}, less: {}};
- this.editingSessions = {xml: {}, less: {}};
+ this.resources = {xml: {}, scss: {}};
+ this.editingSessions = {xml: {}, scss: {}};
this.currentType = 'xml';
// Alias
this.views = this.resources.xml;
- this.less = this.resources.less;
+ this.scss = this.resources.scss;
},
/**
* Loads everything the ace library needs to work.
@@ -202,10 +202,10 @@ var ViewEditor = Widget.extend({
this.$lists = {
xml: this.$('#ace-view-list'),
- less: this.$('#ace-less-list')
+ scss: this.$('#ace-scss-list')
};
this.$includeBundlesArea = this.$('.oe_include_bundles');
- this.$includeAllLessArea = this.$('.o_include_all_less');
+ this.$includeAllSCSSArea = this.$('.o_include_all_scss');
this.$viewID = this.$('#ace-view-id > span');
this.$formatButton = this.$('button[data-action=format]');
@@ -226,11 +226,11 @@ var ViewEditor = Widget.extend({
var initType;
if (this.options.initialResID) {
initResID = this.options.initialResID;
- initType = (_.isString(initResID) && initResID[0] === '/') ? 'less' : 'xml';
+ initType = (_.isString(initResID) && initResID[0] === '/') ? 'scss' : 'xml';
} else {
- if (!this.options.doNotLoadLess) {
- initResID = this.sorted_less[0][1][0].url; // first bundle, less files, first one
- initType = 'less';
+ if (!this.options.doNotLoadSCSS) {
+ initResID = this.sortedSCSS[0][1][0].url; // first bundle, scss files, first one
+ initType = 'scss';
}
if (!this.options.doNotLoadViews) {
if (typeof this.viewKey === "number") {
@@ -249,9 +249,9 @@ var ViewEditor = Widget.extend({
this._displayResource(initResID, initType);
}
- if (!this.sorted_views.length || !this.sorted_less.length) {
+ if (!this.sortedViews.length || !this.sortedSCSS.length) {
_.defer((function () {
- this._switchType(this.sorted_views.length ? 'xml' : 'less');
+ this._switchType(this.sortedViews.length ? 'xml' : 'scss');
this.$typeSwitcherBtn.parent('.btn-group').addClass('hidden');
}).bind(this));
}
@@ -319,7 +319,7 @@ var ViewEditor = Widget.extend({
* Initializes a text editor for the specified resource.
*
* @private
- * @param {integer|string} resID - the ID/URL of the view/less file
+ * @param {integer|string} resID - the ID/URL of the view/scss file
* @param {string} [type] (default to the currently selected one)
* @returns {ace.EditSession}
*/
@@ -339,13 +339,13 @@ var ViewEditor = Widget.extend({
return editingSession;
},
/**
- * Forces the view/less file identified by its ID/URL to be displayed in the
+ * Forces the view/scss file identified by its ID/URL to be displayed in the
* editor. The method will update the resource select DOM element as well if
* necessary.
*
* @private
* @param {integer|string} resID
- * @param {string} [type] - the type of resource (either 'xml' or 'less')
+ * @param {string} [type] - the type of resource (either 'xml' or 'scss')
*/
_displayResource: function (resID, type) {
if (type) {
@@ -361,23 +361,23 @@ var ViewEditor = Widget.extend({
if (this.currentType === 'xml') {
this.$viewID.text(_.str.sprintf(_t("Template ID: %s"), this.views[resID].xml_id));
} else {
- this.$viewID.text(_.str.sprintf(_t("Less file: %s"), resID));
+ this.$viewID.text(_.str.sprintf(_t("SCSS file: %s"), resID));
}
this.$lists[this.currentType].select2('val', resID);
- this.$resetButton.toggleClass('hidden', this.currentType === 'xml' || !this.less[resID].customized);
+ this.$resetButton.toggleClass('hidden', this.currentType === 'xml' || !this.scss[resID].customized);
},
/**
* Formats the current resource being vizualized.
- * (@see formatXML, formatLESS)
+ * (@see formatXML, formatSCSS)
*
* @private
*/
_formatResource: function () {
var res = this.aceEditor.getValue();
- var check = (this.currentType === 'xml' ? checkXML : checkLESS)(res);
+ var check = (this.currentType === 'xml' ? checkXML : checkSCSS)(res);
if (check.isValid) {
- this.aceEditor.setValue((this.currentType === 'xml' ? formatXML : formatLESS)(res));
+ this.aceEditor.setValue((this.currentType === 'xml' ? formatXML : formatSCSS)(res));
} else {
this._showErrorLine(check.error.line, check.error.message, this._getSelectedResource());
}
@@ -386,7 +386,7 @@ var ViewEditor = Widget.extend({
* Returns the currently selected resource data.
*
* @private
- * @returns {integer|string} view ID or less file URL
+ * @returns {integer|string} view ID or scss file URL
*/
_getSelectedResource: function () {
var value = this.$lists[this.currentType].select2('val');
@@ -401,10 +401,10 @@ var ViewEditor = Widget.extend({
*/
_loadResources: function () {
// Reset resources
- this.resources = {xml: {}, less: {}};
- this.editingSessions = {xml: {}, less: {}};
+ this.resources = {xml: {}, scss: {}};
+ this.editingSessions = {xml: {}, scss: {}};
this.views = this.resources.xml;
- this.less = this.resources.less;
+ this.scss = this.resources.scss;
// Load resources
return this._rpc({
@@ -412,16 +412,16 @@ var ViewEditor = Widget.extend({
params: {
key: this.viewKey,
get_views: !this.options.doNotLoadViews,
- get_less: !this.options.doNotLoadLess,
+ get_scss: !this.options.doNotLoadSCSS,
bundles: this.options.includeBundles,
- bundles_restriction: this.options.includeAllLess ? [] : this.options.defaultBundlesRestriction,
+ bundles_restriction: this.options.includeAllSCSS ? [] : this.options.defaultBundlesRestriction,
},
}).then((function (resources) {
- _process_views.call(this, resources.views);
- _process_less.call(this, resources.less);
+ _processViews.call(this, resources.views || []);
+ _processSCSS.call(this, resources.scss || []);
}).bind(this));
- function _process_views(views) {
+ function _processViews(views) {
// Only keep the active views and index them by ID.
_.extend(this.views, _.indexBy(_.filter(views, function (view) {
return view.active;
@@ -446,10 +446,10 @@ var ViewEditor = Widget.extend({
// Assign the correct level based on children key and save a sorted array where
// each view is followed by their children.
- this.sorted_views = [];
+ this.sortedViews = [];
function visit(view, level) {
view.level = level;
- self.sorted_views.push(view);
+ self.sortedViews.push(view);
_.each(view.children, function (child) {
visit(child, level + 1);
});
@@ -459,20 +459,20 @@ var ViewEditor = Widget.extend({
});
}
- function _process_less(less) {
- // The received less data is already sorted by bundle and DOM order
- this.sorted_less = less;
+ function _processSCSS(scss) {
+ // The received scss data is already sorted by bundle and DOM order
+ this.sortedSCSS = scss;
// Store the URL ungrouped by bundle and use the URL as key (resource ID)
var self = this;
- _.each(less, function (bundleInfos) {
+ _.each(scss, function (bundleInfos) {
_.each(bundleInfos[1], function (info) { info.bundle_xmlid = bundleInfos[0].xmlid; });
- _.extend(self.less, _.indexBy(bundleInfos[1], 'url'));
+ _.extend(self.scss, _.indexBy(bundleInfos[1], 'url'));
});
}
},
/**
- * Forces the view/less file identified by its ID/URL to be reset to the way
+ * Forces the view/scss file identified by its ID/URL to be reset to the way
* it was before the user started editing it.
*
* @todo views reset is not supported yet
@@ -490,36 +490,36 @@ var ViewEditor = Widget.extend({
return $.Defered().reject(_t("Reseting views is not supported yet"));
} else {
return this._rpc({
- route: '/web_editor/reset_less',
+ route: '/web_editor/reset_scss',
params: {
url: resID,
- bundle_xmlid: this.less[resID].bundle_xmlid,
+ bundle_xmlid: this.scss[resID].bundle_xmlid,
},
});
}
},
/**
- * Saves an unique LESS file.
+ * Saves an unique SCSS file.
*
* @private
* @param {Object} session - contains the 'id' (url) and the 'text' of the
- * LESS file to save.
+ * SCSS file to save.
* @return {Deferred} status indicates if the save is finished or if an
* error occured.
*/
- _saveLess: function (session) {
+ _saveSCSS: function (session) {
var def = $.Deferred();
var self = this;
this._rpc({
- route: '/web_editor/save_less',
+ route: '/web_editor/save_scss',
params: {
url: session.id,
- bundle_xmlid: this.less[session.id].bundle_xmlid,
+ bundle_xmlid: this.scss[session.id].bundle_xmlid,
content: session.text,
},
}).then(function () {
- self._toggleDirtyInfo(session.id, 'less', false);
+ self._toggleDirtyInfo(session.id, 'scss', false);
def.resolve();
}, function (source, error) {
def.reject(session, error);
@@ -553,7 +553,7 @@ var ViewEditor = Widget.extend({
this._showErrorLine();
for (var i = 0 ; i < toSave[type].length && !errorFound ; i++) {
- var check = (type === 'xml' ? checkXML : checkLESS)(toSave[type][i].text);
+ var check = (type === 'xml' ? checkXML : checkSCSS)(toSave[type][i].text);
if (!check.isValid) {
this._showErrorLine(check.error.line, check.error.message, toSave[type][i].id, type);
errorFound = toSave[type][i];
@@ -564,7 +564,7 @@ var ViewEditor = Widget.extend({
var defs = [];
_.each(toSave, (function (_toSave, type) {
- defs = defs.concat(_.map(_toSave, (type === 'xml' ? this._saveView : this._saveLess).bind(this)));
+ defs = defs.concat(_.map(_toSave, (type === 'xml' ? this._saveView : this._saveSCSS).bind(this)));
}).bind(this));
return $.when.apply($, defs).fail((function (session, error) {
@@ -653,11 +653,11 @@ var ViewEditor = Widget.extend({
}
},
/**
- * Switches to the LESS or XML edition. Calling this method will adapt all
+ * Switches to the SCSS or XML edition. Calling this method will adapt all
* DOM elements to keep the editor consistent.
*
* @private
- * @param {string} type - either 'xml' or 'less'
+ * @param {string} type - either 'xml' or 'scss'
*/
_switchType: function (type) {
this.currentType = type;
@@ -665,9 +665,9 @@ var ViewEditor = Widget.extend({
_.each(this.$lists, function ($list, _type) { $list.toggleClass('hidden', type !== _type); });
this.$lists[type].change();
- this.$includeBundlesArea.toggleClass('hidden', this.currentType === 'less' || !session.debug);
- this.$includeAllLessArea.toggleClass('hidden', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0);
- this.$formatButton.toggleClass('hidden', this.currentType === 'less');
+ this.$includeBundlesArea.toggleClass('hidden', this.currentType === 'scss' || !session.debug);
+ this.$includeAllSCSSArea.toggleClass('hidden', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0);
+ this.$formatButton.toggleClass('hidden', this.currentType === 'scss');
},
/**
* Updates the select option DOM element associated with a particular resID
@@ -701,7 +701,7 @@ var ViewEditor = Widget.extend({
var self = this;
this.$lists.xml.empty();
- _.each(this.sorted_views, function (view) {
+ _.each(this.sortedViews, function (view) {
self.$lists.xml.append($('<option/>', {
value: view.id,
text: view.name,
@@ -711,19 +711,19 @@ var ViewEditor = Widget.extend({
}));
});
- this.$lists.less.empty();
- _.each(this.sorted_less, function (bundleInfos) {
+ this.$lists.scss.empty();
+ _.each(this.sortedSCSS, function (bundleInfos) {
var $optgroup = $('<optgroup/>', {
label: bundleInfos[0].name,
- }).appendTo(self.$lists.less);
- _.each(bundleInfos[1], function (lessInfo) {
- var name = lessInfo.url.substring(_.lastIndexOf(lessInfo.url, '/') + 1, lessInfo.url.length - 5);
+ }).appendTo(self.$lists.scss);
+ _.each(bundleInfos[1], function (scssInfo) {
+ var name = scssInfo.url.substring(_.lastIndexOf(scssInfo.url, '/') + 1, scssInfo.url.length - 5);
$optgroup.append($('<option/>', {
- value: lessInfo.url,
+ value: scssInfo.url,
text: name,
- selected: currentId === lessInfo.url,
- 'data-debug': lessInfo.url,
- 'data-customized': lessInfo.customized
+ selected: currentId === scssInfo.url,
+ 'data-debug': scssInfo.url,
+ 'data-customized': scssInfo.customized
}));
});
});
@@ -734,12 +734,12 @@ var ViewEditor = Widget.extend({
formatSelection: _formatDisplay.bind(this, true),
});
this.$lists.xml.data('select2').dropdown.addClass('o_ace_select2_dropdown');
- this.$lists.less.select2('destroy');
- this.$lists.less.select2({
+ this.$lists.scss.select2('destroy');
+ this.$lists.scss.select2({
formatResult: _formatDisplay.bind(this, false),
formatSelection: _formatDisplay.bind(this, true),
});
- this.$lists.less.data('select2').dropdown.addClass('o_ace_select2_dropdown');
+ this.$lists.scss.data('select2').dropdown.addClass('o_ace_select2_dropdown');
function _formatDisplay(isSelected, data) {
var $elem = $(data.element);
@@ -791,14 +791,14 @@ var ViewEditor = Widget.extend({
this._formatResource();
},
/**
- * Called when the checkbox which indicates if all LESS should be included
+ * Called when the checkbox which indicates if all SCSS should be included
* is toggled -> reloads the resources accordingly.
*
* @private
* @param {Event} ev
*/
- _onIncludeAllLessChange: function (ev) {
- this.options.includeAllLess = $(ev.target).prop('checked');
+ _onIncludeAllSCSSChange: function (ev) {
+ this.options.includeAllSCSS = $(ev.target).prop('checked');
this._loadResources().then(this._updateViewSelectDOM.bind(this));
},
/**
@@ -845,7 +845,7 @@ var ViewEditor = Widget.extend({
this._saveResources();
},
/**
- * Called when the user wants to switch from xml to less or vice-versa ->
+ * Called when the user wants to switch from xml to scss or vice-versa ->
* adapt resources choices and displays a resource of that type.
*
* @private