pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_editor, *: introduce wysiwyg frontend loader

Browse Source 
* website_forum, website_profile

- Share some code between website_forum and website_profile by exposing
  a function in web_editor to instantiate a wysiwyg instance on a
  textarea

- Use no-lazy loaded JS to add a visual loading effect while the
  wysiwyg is not yet available.

This is made in preparation of task-2024197
(see https://github.com/odoo/odoo/pull/35749)

Thanks to @stefanorigano

closes odoo/odoo#36581

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2019-09-10 12:12:28 +00:00
parent 50d2f188f8
commit 8025205bb4
8 changed files with 99 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/frontend/loader.js
+28
View File
@@ -0,0 +1,28 @@
odoo.define('web_editor.loader', function (require) {
'use strict';
var Wysiwyg = require('web_editor.wysiwyg.root');
function load(parent, textarea, options) {
var loading = textarea.nextElementSibling;
if (loading && !loading.classList.contains('o_wysiwyg_loading')) {
loading = null;
}
if (!textarea.value.match(/\S/)) {
textarea.value = '<p><br/></p>';
}
var wysiwyg = new Wysiwyg(parent, options);
return wysiwyg.attachTo(textarea).then(() => {
if (loading) {
loading.parentNode.removeChild(loading);
}
return wysiwyg;
});
}
return {
load: load,
};
});
addons/web_editor/static/src/js/frontend/loader_loading.js
+30
View File
@@ -0,0 +1,30 @@
(function () {
'use strict';
/**
* This file makes sure textarea elements with a specific editor class are
* tweaked as soon as the DOM is ready so that they appear to be loading.
*
* They must then be loaded using standard Odoo modules system. In particular,
* @see web_editor.loader
*/
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('textarea.o_wysiwyg_loader').forEach(textarea => {
var wrapper = document.createElement('div');
wrapper.classList.add('position-relative', 'o_wysiwyg_wrapper');
var loadingElement = document.createElement('div');
loadingElement.classList.add('o_wysiwyg_loading');
var loadingIcon = document.createElement('i');
loadingIcon.classList.add('text-600', 'text-center',
'fa', 'fa-circle-o-notch', 'fa-spin', 'fa-2x');
loadingElement.appendChild(loadingIcon);
wrapper.appendChild(loadingElement);
textarea.parentNode.insertBefore(wrapper, textarea);
wrapper.insertBefore(textarea, loadingElement);
});
});
})();
addons/web_editor/static/src/scss/web_editor.frontend.scss
+11
View File
@@ -3,3 +3,14 @@
transform: none !important;
}
}
.o_wysiwyg_loader {
@extend .form-control:disabled;
pointer-events: none;
min-height: 100px;
color: transparent;
}
.o_wysiwyg_loading {
@include o-position-absolute($top: 50%, $left: 50%);
transform: translate(-50%, -50%)
}
addons/web_editor/views/editor.xml
+9
View File
@@ -157,11 +157,20 @@
</xpath>
</template>
<template id="_assets_frontend_minimal_js" inherit_id="web._assets_frontend_minimal_js">
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="/web_editor/static/src/js/frontend/loader_loading.js"/>
</xpath>
</template>
<template id="assets_frontend" inherit_id="web.assets_frontend" name="Web Editor Frontend Assets (used in public odoo)" priority="15">
<xpath expr="//link[last()]" position="after">
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/web_editor.common.scss"/> <!-- not in common because compiled differently with context -->
<link rel="stylesheet" type ="text/scss" href="/web_editor/static/src/scss/web_editor.frontend.scss"/>
</xpath>
<xpath expr="//script[last()]" position="after">
<script type="text/javascript" src="/web_editor/static/src/js/frontend/loader.js"/>
</xpath>
</template>
<template id="qunit_suite" inherit_id="web.qunit_suite">
addons/website_forum/static/src/js/website_forum.js
+5 -10
View File
@@ -2,10 +2,9 @@ odoo.define('website_forum.website_forum', function (require) {
'use strict';
var core = require('web.core');
var Wysiwyg = require('web_editor.wysiwyg.root');
var wysiwygLoader = require('web_editor.loader');
var publicWidget = require('web.public.widget');
var session = require('web.session');
var utils = require('web.utils');
var qweb = core.qweb;
var _t = core._t;
@@ -111,12 +110,9 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
},
});
_.each($('textarea.load_editor'), function (textarea) {
_.each($('textarea.o_wysiwyg_loader'), function (textarea) {
var $textarea = $(textarea);
var editorKarma = $textarea.data('karma') || 0; // default value for backward compatibility
if (!$textarea.val().match(/\S/)) {
$textarea.val('<p><br/></p>');
}
var $form = $textarea.closest('form');
var hasFullEdit = parseInt($("#karma").val()) >= editorKarma;
var toolbar = [
@@ -146,12 +142,11 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
MediaPlugin: false,
};
}
var wysiwyg = new Wysiwyg(self, options);
wysiwyg.attachTo($textarea).then(function () {
wysiwygLoader.load(self, $textarea[0], options).then(wysiwyg => {
// float-left class messes up the post layout OPW 769721
$form.find('.note-editable').find('img.float-left').removeClass('float-left');
$form.on('click', 'button .a-submit', function () {
$form.find('textarea').data('wysiwyg').save();
$form.on('click', 'button .a-submit', () => {
wysiwyg.save();
});
});
});
addons/website_forum/views/website_forum.xml
+4 -4
View File
@@ -523,7 +523,7 @@
class="form-control mb16" placeholder="Your Question Title..." title="Title must not be empty"/>
<input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
<textarea name="content" required="True" id="content" class="form-control load_editor"
<textarea name="content" required="True" id="content" class="form-control o_wysiwyg_loader"
t-att-data-karma="forum.karma_editor">
<t t-esc="question_content"/>
</textarea>
@@ -554,7 +554,7 @@
</div>
<input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
<input type="hidden" name="karma_tag_create" t-attf-value="#{forum.karma_tag_create}" id="karma_tag_create"/>
<textarea name="content" id="content" required="True" class="form-control load_editor"
<textarea name="content" id="content" required="True" class="form-control o_wysiwyg_loader"
t-att-data-karma="forum.karma_editor">
<t t-esc="post.content"/>
</textarea>
@@ -632,7 +632,7 @@
<h3 class="mt8">Your Reply</h3>
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
<textarea name="content" t-attf-id="content-#{str(object.id)}" class="form-control load_editor" required="True"
<textarea name="content" t-attf-id="content-#{str(object.id)}" class="form-control o_wysiwyg_loader" required="True"
t-att-data-karma="forum.karma_editor"/>
<button type="submit" class="btn btn-primary mb16">Post Answer</button>
</form>
@@ -654,7 +654,7 @@
<form t-attf-action="/forum/#{ slug(forum) }/#{slug(question)}/reply" method="post" class="js_website_submit_form" role="form">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/>
<textarea name="content" t-attf-id="content-#{str(question.id)}" class="form-control load_editor" required="True"
<textarea name="content" t-attf-id="content-#{str(question.id)}" class="form-control o_wysiwyg_loader" required="True"
t-att-data-karma="forum.karma_editor"/>
<button type="submit" t-attf-class="btn btn-primary #{forum.allow_share and 'oe_social_share_call' or ''} my-3 #{not question.can_answer and 'karma_required' or ''}"
t-att-data-karma="question.forum_id.karma_answer"
addons/website_profile/static/src/js/website_profile.js
+11 -8
View File
@@ -2,7 +2,8 @@ odoo.define('website_profile.website_profile', function (require) {
'use strict';
var publicWidget = require('web.public.widget');
var Wysiwyg = require('web_editor.wysiwyg.root');
var wysiwygLoader = require('web_editor.loader');
publicWidget.registry.websiteProfile = publicWidget.Widget.extend({
selector: '.o_wprofile_email_validation_container',
read_events: {
@@ -58,19 +59,19 @@ publicWidget.registry.websiteProfileEditor = publicWidget.Widget.extend({
if (this.editableMode) {
return def;
}
var $textarea = this.$('textarea.load_editor');
var wysiwyg = new Wysiwyg(this, {
var $textarea = this.$('textarea.o_wysiwyg_loader');
var loadProm = wysiwygLoader.load(this, $textarea[0], {
recordInfo: {
context: this._getContext(),
res_model: 'res.users',
res_id: parseInt(this.$('input[name=user_id]').val()),
},
}).then(wysiwyg => {
this._wysiwyg = wysiwyg;
});
if (!$textarea.val().match(/\S/)) {
$textarea.val('<p><br/></p>');
}
return Promise.all([def, wysiwyg.attachTo($textarea)]);
return Promise.all([def, loadProm]);
},
//--------------------------------------------------------------------------
@@ -118,7 +119,9 @@ publicWidget.registry.websiteProfileEditor = publicWidget.Widget.extend({
* @private
*/
_onSubmitClick: function () {
this.$('textarea.load_editor').data('wysiwyg').save();
if (this._wysiwyg) {
this._wysiwyg.save();
}
},
});
addons/website_profile/views/website_profile.xml
+1 -1
View File
@@ -171,7 +171,7 @@
<div class="form-group col-12">
<label class="mb-1 text-primary" for="description"><span class="font-weight-bold">Biography</span></label>
<textarea name="description" id="description" style="min-height: 120px"
class="form-control load_editor"><t t-esc="user.partner_id.website_description"/></textarea>
class="form-control o_wysiwyg_loader"><t t-esc="user.partner_id.website_description"/></textarea>
</div>
<div class="col">
<button type="submit" class="btn btn-primary o_wprofile_submit_btn">Update</button>