diff options
Diffstat (limited to 'addons/web_editor/static/src/js/widgets')
| -rw-r--r-- | addons/web_editor/static/src/js/widgets/widgets.js | 167 |
1 files changed, 77 insertions, 90 deletions
diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index daa5e868afd..194b7e15d4d 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -110,7 +110,7 @@ var AltDialog = Dialog.extend({ var MediaWidget = Widget.extend({ xmlDependencies: ['/web_editor/static/src/xml/editor.xml'], events: { - 'input input#icon-search': '_onSearchInput', + 'input input.o_we_search': '_onSearchInput', }, /** @@ -120,7 +120,7 @@ var MediaWidget = Widget.extend({ this._super.apply(this, arguments); this.media = media; this.$media = $(media); - this._onSearchInput = _.debounce(this._onSearchInput, 250); + this._onSearchInput = _.debounce(this._onSearchInput, 500); }, //-------------------------------------------------------------------------- @@ -137,17 +137,6 @@ var MediaWidget = Widget.extend({ this._clear(); }, /** - * @todo comment - */ - getControlPanelConfig: function () { - return { - searchEnabled: true, - pagerEnabled: true, - pagerLeftEnabled: false, - pagerRightEnabled: false, - }; - }, - /** * @abstract * @param {string} needle * @returns {Deferred} @@ -185,6 +174,7 @@ var MediaWidget = Widget.extend({ */ _onSearchInput: function (ev) { this.search($(ev.currentTarget).val() || ''); + this.hasSearched = true; }, }); @@ -198,11 +188,11 @@ var ImageWidget = MediaWidget.extend({ 'click .o_upload_media_button_no_optimization': '_onUploadButtonNoOptimizationClick', 'change input[type=file]': '_onImageSelection', 'click .o_upload_media_url_button': '_onUploadURLButtonClick', - 'input input.url': '_onChangeInputURL', + 'input input.o_we_url_input': '_onURLInputChange', 'click .existing-attachments [data-src]': '_onImageClick', 'dblclick .existing-attachments [data-src]': '_onImageDblClick', 'click .o_existing_attachment_remove': '_onRemoveClick', - 'click .o_load_more': '_onLoadMore', + 'click .o_load_more': '_onLoadMoreClick', }), IMAGES_PER_ROW: 6, @@ -214,7 +204,8 @@ var ImageWidget = MediaWidget.extend({ init: function (parent, media, options) { this._super.apply(this, arguments); - this.IMAGES_DISPLAYED_TOTAL = this.IMAGES_PER_ROW * this.IMAGES_ROWS; + this.imagesRows = this.IMAGES_ROWS; + this.IMAGES_DISPLAYED_TOTAL = this.IMAGES_PER_ROW * this.imagesRows; this.options = options; this.accept = options.accept || (options.document ? '*/*' : 'image/*'); @@ -251,7 +242,7 @@ var ImageWidget = MediaWidget.extend({ var def = this._super.apply(this, arguments); var self = this; - this._renderImages(); + this._renderImages(true); var o = { url: null, @@ -354,7 +345,7 @@ var ImageWidget = MediaWidget.extend({ search: function (needle, noRender) { var self = this; if (!noRender) { - this.$('input.url').val('').trigger('input').trigger('change'); + this.$('input.o_we_url_input').val('').trigger('input').trigger('change'); } // TODO: Expand this for adding SVG var domain = this.domain.concat(['|', ['mimetype', '=', false], ['mimetype', this.options.document ? 'not in' : 'in', ['image/gif', 'image/jpe', 'image/jpeg', 'image/jpg', 'image/gif', 'image/png']]]); @@ -403,6 +394,7 @@ var ImageWidget = MediaWidget.extend({ }); if (!noRender) { self._renderImages(); + self._adaptLoadMore(); } }); }, @@ -412,6 +404,14 @@ var ImageWidget = MediaWidget.extend({ //-------------------------------------------------------------------------- /** + * @private + */ + _adaptLoadMore: function () { + var noMoreImgToLoad = this.IMAGES_DISPLAYED_TOTAL >= this.records.length; + this.$('.o_load_more').toggleClass('d-none', noMoreImgToLoad); + this.$('.o_load_done_msg').toggleClass('d-none', !noMoreImgToLoad); + }, + /** * @override */ _clear: function () { @@ -435,30 +435,37 @@ var ImageWidget = MediaWidget.extend({ /** * @private */ - _renderImages: function () { + _loadMoreImages: function (forceSearch) { + this.imagesRows += 2; + this.IMAGES_DISPLAYED_TOTAL = this.imagesRows * this.IMAGES_PER_ROW; + if (!forceSearch) { + this._renderImages(); + this._adaptLoadMore(); + } else { + this.search(this.$('.o_we_search').val() || ''); + } + }, + /** + * @private + */ + _renderImages: function (withEffect) { var self = this; var rows = _(this.records).chain() .slice(0, this.IMAGES_DISPLAYED_TOTAL) .groupBy(function (a, index) { return Math.floor(index / self.IMAGES_PER_ROW); }) .values() .value(); - var noMoreImgToLoad = this.IMAGES_DISPLAYED_TOTAL >= this.records.length; - this.$('.o_load_more').toggleClass('d-none', noMoreImgToLoad); - this.$('.o_load_done_msg').toggleClass('d-none', !noMoreImgToLoad); this.$('.form-text').empty(); - //Rendering menu & content for 'Image' or 'Document' tab - var templateMenu = 'web_editor.dialog.files.submenu'; - var templateContent = 'web_editor.dialog.files.existing.content'; - this.$('.o_submenu').replaceWith(QWeb.render(templateMenu, { - accept: this.accept, - isDocument: this.options.document, - })); - this.$('.existing-attachments').replaceWith(QWeb.render(templateContent, { - rows: rows, - isDocument: this.options.document, - })); + // Render menu & content + this.$('.existing-attachments').replaceWith( + QWeb.render('web_editor.dialog.files.existing.content', { + rows: rows, + isDocument: this.options.document, + withEffect: withEffect, + }) + ); var $divs = this.$('.o_image'); var imageDefs = _.map($divs, function (el) { @@ -474,11 +481,13 @@ var ImageWidget = MediaWidget.extend({ return def; } }); - $.when.apply($, imageDefs).then(function () { - _.delay(function () { - $divs.removeClass('o_image_loading'); - }, 400); - }); + if (withEffect) { + $.when.apply($, imageDefs).then(function () { + _.delay(function () { + $divs.removeClass('o_image_loading'); + }, 400); + }); + } this._highlightSelectedImages(); }, /** @@ -547,17 +556,10 @@ var ImageWidget = MediaWidget.extend({ } }); this.$el.submit(); - // Emptying file inputs + + // Empty file input this.$('.o_file_input').val(''); }, - /** - * @private - */ - _loadMoreImages: function () { - this.IMAGES_ROWS += 2; - this.IMAGES_DISPLAYED_TOTAL = this.IMAGES_ROWS * this.IMAGES_PER_ROW; - this._renderImages(); - }, //-------------------------------------------------------------------------- // Handlers @@ -596,8 +598,7 @@ var ImageWidget = MediaWidget.extend({ */ _onRemoveClick: function (ev) { var self = this; - var message = _t("Are you sure you want to delete this file ?"); - DialogBase.confirm(this, message, { + DialogBase.confirm(this, _t("Are you sure you want to delete this file ?"), { confirm_callback: function () { var $helpBlock = this.$('.form-text').empty(); var $a = $(ev.currentTarget); @@ -616,7 +617,7 @@ var ImageWidget = MediaWidget.extend({ return; } $helpBlock.replaceWith(QWeb.render('web_editor.dialog.image.existing.error', { - views: prevented[id] + views: prevented[id], })); }); } @@ -625,33 +626,29 @@ var ImageWidget = MediaWidget.extend({ /** * @private */ - _onChangeInputURL: function (ev) { + _onURLInputChange: function (ev) { var $input = $(ev.currentTarget); - var $button = $input.next('.input-group-append').children(); + var $button = this.$('.o_upload_media_url_button'); + var $success = this.$('.o_we_url_success'); + var $warning = this.$('.o_we_url_warning'); + var $error = this.$('.o_we_url_error'); + var inputValue = $input.val(); var emptyValue = (inputValue === ''); - var $warning = this.$('.warning-url'); - var $success = this.$('.success-url'); - var $error = this.$('.error-url'); - var $btn = this.$('.o_upload_media_url_button'); - var regex = /^(?:https?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/; - var isURL = regex.test(inputValue); - var showWarningOrError = (inputValue.length !== 0 ? isURL : !isURL); - $button.toggleClass('btn-secondary', emptyValue).toggleClass('btn-primary', !emptyValue) - .prop('disabled', emptyValue); + var isURL = /^.+\..+$/.test(inputValue); // TODO improve + var isImage = _.any(['.gif', '.jpe', '.jpg', '.png'], function (format) { + return inputValue.endsWith(format); + }); + $button.toggleClass('btn-secondary', emptyValue).toggleClass('btn-primary', !emptyValue) + .prop('disabled', !isURL); if (!this.options.document) { - _.each(['.gif', '.jpe', '.jpg', '.png'], function (format) { - var endsWith = inputValue.endsWith(format); - $button.text(endsWith ? _t("Add image") : _t("Add as document")); - }); - } else { - $btn.prop('disabled', !isURL); + $button.text((isURL && !isImage) ? _t("Add as document") : _t("Add image")); } $success.toggleClass('d-none', !isURL); - $warning.toggleClass('d-none', showWarningOrError); - $error.toggleClass('d-none', showWarningOrError); + $warning.toggleClass('d-none', !isURL || this.options.document || isImage); + $error.toggleClass('d-none', emptyValue || isURL); }, /** * @private @@ -675,9 +672,17 @@ var ImageWidget = MediaWidget.extend({ /** * @private */ - _onLoadMore: function () { + _onLoadMoreClick: function () { this._loadMoreImages(); }, + /** + * @override + */ + _onSearchInput: function () { + this.imagesRows = this.IMAGES_ROWS; + this.IMAGES_DISPLAYED_TOTAL = this.IMAGES_PER_ROW * this.imagesRows; + this._super.apply(this, arguments); + }, }); /** @@ -728,14 +733,6 @@ var IconWidget = MediaWidget.extend({ /** * @override */ - getControlPanelConfig: function () { - return _.extend(this._super.apply(this, arguments), { - pagerEnabled: false, - }); - }, - /** - * @override - */ save: function () { var style = this.$media.attr('style') || ''; var iconFont = this._getFont(this.selectedIcon) || {base: 'fa', font: ''}; @@ -849,11 +846,11 @@ var IconWidget = MediaWidget.extend({ */ var VideoWidget = MediaWidget.extend({ template: 'web_editor.dialog.video', - events: { + events: _.extend({}, MediaWidget.prototype.events || {}, { 'change .o_video_dialog_options input': '_onUpdateVideoOption', 'input textarea#o_video_text': '_onVideoCodeInput', 'change textarea#o_video_text': '_onVideoCodeChange', - }, + }), /** * @constructor @@ -894,15 +891,6 @@ var VideoWidget = MediaWidget.extend({ /** * @override */ - getControlPanelConfig: function () { - return _.extend(this._super.apply(this, arguments), { - searchEnabled: false, - pagerEnabled: false, - }); - }, - /** - * @override - */ save: function () { this._updateVideo(); if (this.$('.o_video_dialog_iframe').is('iframe')) { @@ -1075,7 +1063,6 @@ var VideoWidget = MediaWidget.extend({ // Hide the entire options box if no options are available $optBox.toggleClass('d-none', $optBox.find('div:not(.d-none)').length === 0); - $('.option_title').toggleClass('d-none'); if (query.type === 'yt') { // Youtube only: If 'hide controls' is checked, hide 'fullscreen' |