From fb9aab745b01cf3afaf986162899efc605e46e15 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Wed, 22 Jan 2020 14:37:09 +0000 Subject: [MOV] website: add s_progress_bar snippet from themes repo Part of https://github.com/odoo/odoo/pull/42937 task-2088157 --- .../src/img/snippets_thumbs/s_progress_bar.png | Bin 0 -> 325 bytes .../static/src/snippets/s_progress_bar/options.js | 113 +++++++++++++++++++++ 2 files changed, 113 insertions(+) create mode 100644 addons/website/static/src/img/snippets_thumbs/s_progress_bar.png create mode 100644 addons/website/static/src/snippets/s_progress_bar/options.js (limited to 'addons/website/static/src') diff --git a/addons/website/static/src/img/snippets_thumbs/s_progress_bar.png b/addons/website/static/src/img/snippets_thumbs/s_progress_bar.png new file mode 100644 index 00000000000..21a9a948a71 Binary files /dev/null and b/addons/website/static/src/img/snippets_thumbs/s_progress_bar.png differ diff --git a/addons/website/static/src/snippets/s_progress_bar/options.js b/addons/website/static/src/snippets/s_progress_bar/options.js new file mode 100644 index 00000000000..06644e3f168 --- /dev/null +++ b/addons/website/static/src/snippets/s_progress_bar/options.js @@ -0,0 +1,113 @@ +odoo.define('website.s_progress_bar_options', function (require) { +'use strict'; + +const core = require('web.core'); +const options = require('web_editor.snippets.options'); + +const _t = core._t; + +options.registry.progress = options.Class.extend({ + /** + * @override + */ + start: function () { + if (this.$overlay) { + this._bindMoveProgress(); + } + this._super(); + }, + + //-------------------------------------------------------------------------- + // Options + //-------------------------------------------------------------------------- + + /** + * Changes the position of the progressbar text. + * + * @see this.selectClass for parameters + */ + display: function (previewMode, widgetValue, params) { + // retro-compatibility + if (this.$target.hasClass('progress')) { + this.$target.removeClass('progress'); + this.$target.find('.progress-bar').wrap($('
', { + class: 'progress', + })); + this.$target.find('.progress-bar span').addClass('s_progress_bar_text'); + } + + let $text = this.$target.find('.s_progress_bar_text'); + if (!$text.length) { + $text = $('').addClass('s_progress_bar_text').html(_t('80% Development')); + } + + if (widgetValue === 'inline') { + $text.appendTo(this.$target.find('.progress-bar')); + } else { + $text.insertBefore(this.$target.find('.progress')); + } + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _computeWidgetState: function (methodName, params) { + switch (methodName) { + case 'display': { + const isInline = this.$target.find('.s_progress_bar_text') + .parent('.progress-bar').length; + return isInline ? 'inline' : 'below'; + } + } + return this._super(...arguments); + }, + /** + * Binds the editor padding feature to the progress bar width. + */ + _bindMoveProgress: function () { + var self = this; + var $e = this.$overlay.find(".o_handle.e").removeClass("readonly"); + const $progressBar = this.$target.find('.progress-bar'); + const $parent = $progressBar.parent(); + var pos = $parent.offset(); + var width = $parent.width(); + var time; + function move(event) { + clearTimeout(time); + time = setTimeout(function () { + var value = (event.clientX - pos.left) / width * 100 | 0; + if (value > 100) { + value = 100; + } + if (value < 0) { + value = 0; + } + const $progressBarText = self.$target.find('.s_progress_bar_text'); + // Target precisely the XX% not only XX to not replace wrong element + // eg 'Since 1978 we have completed 45%' <- don't replace 1978 + $progressBarText.text($progressBarText.text().replace(/[0-9]+%/, value + '%')); + $progressBar.attr("data-value", value); + $progressBar.attr("aria-valuenow", value); + if (value < 3) { + value = 3; + } + $progressBar.css("width", value + "%"); + }, 5); + } + $e.on("mousedown", function () { + self.$overlay.addClass('d-none'); + $(document) + .on("mousemove", move) + .one("mouseup", function () { + self.$overlay.removeClass('d-none'); + $(document).off("mousemove", move); + self.trigger_up('cover_update'); + }); + }); + }, +}); +}); -- cgit v1.2.3