diff options
Diffstat (limited to 'web_responsive/static/src/js/web_responsive.js')
| -rw-r--r-- | web_responsive/static/src/js/web_responsive.js | 629 |
1 files changed, 629 insertions, 0 deletions
diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js new file mode 100644 index 0000000..5151a30 --- /dev/null +++ b/web_responsive/static/src/js/web_responsive.js @@ -0,0 +1,629 @@ +/* Copyright 2018 Tecnativa - Jairo Llopis + * Copyright 2018 Tecnativa - Sergey Shebanin + * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ + +odoo.define("web_responsive", function (require) { + "use strict"; + + const ActionManager = require("web.ActionManager"); + const AbstractWebClient = require("web.AbstractWebClient"); + const AppsMenu = require("web.AppsMenu"); + const BasicController = require("web.BasicController"); + const config = require("web.config"); + const core = require("web.core"); + const FormRenderer = require("web.FormRenderer"); + const Menu = require("web.Menu"); + const RelationalFields = require("web.relational_fields"); + const ListRenderer = require("web.ListRenderer"); + const CalendarRenderer = require("web.CalendarRenderer"); + const patchMixin = require("web.patchMixin"); + const AttachmentViewer = require("mail/static/src/components/attachment_viewer/attachment_viewer.js"); + const PatchableAttachmentViewer = patchMixin(AttachmentViewer); + const ControlPanel = require("web.ControlPanel"); + const SearchPanel = require("web/static/src/js/views/search_panel.js"); + /* global owl */ + const {QWeb, Context} = owl; + const {useState, useContext} = owl.hooks; + + /* Hide AppDrawer in desktop and mobile modes. + * To avoid delays in pages with a lot of DOM nodes we make + * sub-groups' with 'querySelector' to improve the performance. + */ + function closeAppDrawer() { + _.defer(function () { + // Need close AppDrawer? + var menu_apps_dropdown = document.querySelector(".o_menu_apps .dropdown"); + $(menu_apps_dropdown) + .has(".dropdown-menu.show") + .find("> a") + .dropdown("toggle"); + // Need close Sections Menu? + // TODO: Change to 'hide' in modern Bootstrap >4.1 + var menu_sections = document.querySelector( + ".o_menu_sections li.show .dropdown-toggle" + ); + $(menu_sections).dropdown("toggle"); + // Need close Mobile? + var menu_sections_mobile = document.querySelector(".o_menu_sections.show"); + $(menu_sections_mobile).collapse("hide"); + }); + } + + /** + * Reduce menu data to a searchable format understandable by fuzzy.js + * + * `AppsMenu.init()` gets `menuData` in a format similar to this (only + * relevant data is shown): + * + * ```js + * { + * [...], + * children: [ + * // This is a menu entry: + * { + * action: "ir.actions.client,94", // Or `false` + * children: [... similar to above "children" key], + * name: "Actions", + * parent_id: [146, "Settings/Technical/Actions"], // Or `false` + * }, + * ... + * ] + * } + * ``` + * + * This format is very hard to process to search matches, and it would + * slow down the search algorithm, so we reduce it with this method to be + * able to later implement a simpler search. + * + * @param {Object} memo + * Reference to current result object, passed on recursive calls. + * + * @param {Object} menu + * A menu entry, as described above. + * + * @returns {Object} + * Reduced object, without entries that have no action, and with a + * format like this: + * + * ```js + * { + * "Discuss": {Menu entry Object}, + * "Settings": {Menu entry Object}, + * "Settings/Technical/Actions/Actions": {Menu entry Object}, + * ... + * } + * ``` + */ + function findNames(memo, menu) { + if (menu.action) { + var key = menu.parent_id ? menu.parent_id[1] + "/" : ""; + memo[key + menu.name] = menu; + } + if (menu.children.length) { + _.reduce(menu.children, findNames, memo); + } + return memo; + } + + AppsMenu.include({ + events: _.extend( + { + "keydown .search-input input": "_searchResultsNavigate", + "input .search-input input": "_searchMenusSchedule", + "click .o-menu-search-result": "_searchResultChosen", + "shown.bs.dropdown": "_searchFocus", + "hidden.bs.dropdown": "_searchReset", + "hide.bs.dropdown": "_hideAppsMenu", + }, + AppsMenu.prototype.events + ), + + /** + * Rescue some menu data stripped out in original method. + * + * @override + */ + init: function (parent, menuData) { + this._super.apply(this, arguments); + // Keep base64 icon for main menus + for (const n in this._apps) { + this._apps[n].web_icon_data = menuData.children[n].web_icon_data; + } + // Store menu data in a format searchable by fuzzy.js + this._searchableMenus = _.reduce(menuData.children, findNames, {}); + // Search only after timeout, for fast typers + this._search_def = false; + }, + + /** + * @override + */ + start: function () { + this.$search_container = this.$(".search-container"); + this.$search_input = this.$(".search-input input"); + this.$search_results = this.$(".search-results"); + return this._super.apply(this, arguments); + }, + + /** + * Prevent the menu from being opened twice + * + * @override + */ + _onAppsMenuItemClicked: function (ev) { + this._super.apply(this, arguments); + ev.preventDefault(); + ev.stopPropagation(); + }, + + /** + * Get all info for a given menu. + * + * @param {String} key + * Full path to requested menu. + * + * @returns {Object} + * Menu definition, plus extra needed keys. + */ + _menuInfo: function (key) { + const original = this._searchableMenus[key]; + return _.extend( + { + action_id: parseInt(original.action.split(",")[1], 10), + }, + original + ); + }, + + /** + * Autofocus on search field on big screens. + */ + _searchFocus: function () { + if (!config.device.isMobile) { + // This timeout is necessary since the menu has a 100ms fading animation + setTimeout(() => this.$search_input.focus(), 100); + } + }, + + /** + * Reset search input and results + */ + _searchReset: function () { + this.$search_container.removeClass("has-results"); + this.$search_results.empty(); + this.$search_input.val(""); + }, + + /** + * Schedule a search on current menu items. + */ + _searchMenusSchedule: function () { + this._search_def = new Promise((resolve) => { + setTimeout(resolve, 50); + }); + this._search_def.then(this._searchMenus.bind(this)); + }, + + /** + * Search among available menu items, and render that search. + */ + _searchMenus: function () { + const query = this.$search_input.val(); + if (query === "") { + this.$search_container.removeClass("has-results"); + this.$search_results.empty(); + return; + } + var results = fuzzy.filter(query, _.keys(this._searchableMenus), { + pre: "<b>", + post: "</b>", + }); + this.$search_container.toggleClass("has-results", Boolean(results.length)); + this.$search_results.html( + core.qweb.render("web_responsive.MenuSearchResults", { + results: results, + widget: this, + }) + ); + }, + + /** + * Use chooses a search result, so we navigate to that menu + * + * @param {jQuery.Event} event + */ + _searchResultChosen: function (event) { + event.preventDefault(); + event.stopPropagation(); + const $result = $(event.currentTarget), + text = $result.text().trim(), + data = $result.data(), + suffix = ~text.indexOf("/") ? "/" : ""; + // Load the menu view + this.trigger_up("menu_clicked", { + action_id: data.actionId, + id: data.menuId, + previous_menu_id: data.parentId, + }); + // Find app that owns the chosen menu + const app = _.find(this._apps, function (_app) { + return text.indexOf(_app.name + suffix) === 0; + }); + // Update navbar menus + core.bus.trigger("change_menu_section", app.menuID); + }, + + /** + * Navigate among search results + * + * @param {jQuery.Event} event + */ + _searchResultsNavigate: function (event) { + // Find current results and active element (1st by default) + const all = this.$search_results.find(".o-menu-search-result"), + pre_focused = all.filter(".active") || $(all[0]); + let offset = all.index(pre_focused), + key = event.key; + // Keyboard navigation only supports search results + if (!all.length) { + return; + } + // Transform tab presses in arrow presses + if (key === "Tab") { + event.preventDefault(); + key = event.shiftKey ? "ArrowUp" : "ArrowDown"; + } + switch (key) { + // Pressing enter is the same as clicking on the active element + case "Enter": + pre_focused.click(); + break; + // Navigate up or down + case "ArrowUp": + offset--; + break; + case "ArrowDown": + offset++; + break; + default: + // Other keys are useless in this event + return; + } + // Allow looping on results + if (offset < 0) { + offset = all.length + offset; + } else if (offset >= all.length) { + offset -= all.length; + } + // Switch active element + const new_focused = $(all[offset]); + pre_focused.removeClass("active"); + new_focused.addClass("active"); + this.$search_results.scrollTo(new_focused, { + offset: { + top: this.$search_results.height() * -0.5, + }, + }); + }, + + /* + * Control if AppDrawer can be closed + */ + _hideAppsMenu: function () { + return !this.$("input").is(":focus"); + }, + }); + + BasicController.include({ + /** + * Close the AppDrawer if the data set is dirty and a discard dialog + * is opened + * + * @override + */ + canBeDiscarded: function (recordID) { + if (this.model.isDirty(recordID || this.handle)) { + closeAppDrawer(); + } + return this._super.apply(this, arguments); + }, + }); + + Menu.include({ + events: _.extend( + { + // Clicking a hamburger menu item should close the hamburger + "click .o_menu_sections [role=menuitem]": "_onClickMenuItem", + // Opening any dropdown in the navbar should hide the hamburger + "show.bs.dropdown .o_menu_systray, .o_menu_apps": "_hideMobileSubmenus", + }, + Menu.prototype.events + ), + + start: function () { + this.$menu_toggle = this.$(".o-menu-toggle"); + return this._super.apply(this, arguments); + }, + + /** + * Hide menus for current app if you're in mobile + */ + _hideMobileSubmenus: function () { + if ( + config.device.isMobile && + this.$menu_toggle.is(":visible") && + this.$section_placeholder.is(":visible") + ) { + this.$section_placeholder.collapse("hide"); + } + }, + + /** + * Prevent hide the menu (should be closed when action is loaded) + * + * @param {ClickEvent} ev + */ + _onClickMenuItem: function (ev) { + ev.stopPropagation(); + }, + + /** + * No menu brand in mobiles + * + * @override + */ + _updateMenuBrand: function () { + if (!config.device.isMobile) { + return this._super.apply(this, arguments); + } + }, + }); + + RelationalFields.FieldStatus.include({ + /** + * Fold all on mobiles. + * + * @override + */ + _setState: function () { + this._super.apply(this, arguments); + if (config.device.isMobile) { + _.map(this.status_information, (value) => { + value.fold = true; + }); + } + }, + }); + + // Sticky Column Selector + ListRenderer.include({ + _renderView: function () { + const self = this; + return this._super.apply(this, arguments).then(() => { + const $col_selector = self.$el.find( + ".o_optional_columns_dropdown_toggle" + ); + if ($col_selector.length !== 0) { + const $th = self.$el.find("thead>tr:first>th:last"); + $col_selector.appendTo($th); + } + }); + }, + + _onToggleOptionalColumnDropdown: function (ev) { + // FIXME: For some strange reason the 'stopPropagation' call + // in the main method don't work. Invoking here the same method + // does the expected behavior... O_O! + // This prevents the action of sorting the column from being + // launched. + ev.stopPropagation(); + this._super.apply(this, arguments); + }, + }); + + // Responsive view "action" buttons + FormRenderer.include({ + /** + * In mobiles, put all statusbar buttons in a dropdown. + * + * @override + */ + _renderHeaderButtons: function () { + const $buttons = this._super.apply(this, arguments); + if ( + !config.device.isMobile || + $buttons.children("button:not(.o_invisible_modifier)").length <= 2 + ) { + return $buttons; + } + + // $buttons must be appended by JS because all events are bound + const $dropdown = $( + core.qweb.render("web_responsive.MenuStatusbarButtons") + ); + $buttons.addClass("dropdown-menu").appendTo($dropdown); + return $dropdown; + }, + }); + + CalendarRenderer.include({ + _getFullCalendarOptions: function () { + var options = this._super.apply(this, arguments); + if (config.device.isMobile) { + options.views.dayGridMonth.columnHeaderFormat = "ddd"; + } + return options; + }, + }); + + // Hide AppDrawer or Menu when the action has been completed + ActionManager.include({ + /** + * @override + */ + _appendController: function () { + this._super.apply(this, arguments); + closeAppDrawer(); + }, + }); + + /** + * Use ALT+SHIFT instead of ALT as hotkey triggerer. + * + * HACK https://github.com/odoo/odoo/issues/30068 - See it to know why. + * + * Cannot patch in `KeyboardNavigationMixin` directly because it's a mixin, + * not a `Class`, and altering a mixin's `prototype` doesn't alter it where + * it has already been used. + * + * Instead, we provide an additional mixin to be used wherever you need to + * enable this behavior. + */ + var KeyboardNavigationShiftAltMixin = { + /** + * Alter the key event to require pressing Shift. + * + * This will produce a mocked event object where it will seem that + * `Alt` is not pressed if `Shift` is not pressed. + * + * The reason for this is that original upstream code, found in + * `KeyboardNavigationMixin` is very hardcoded against the `Alt` key, + * so it is more maintainable to mock its input than to rewrite it + * completely. + * + * @param {keyEvent} keyEvent + * Original event object + * + * @returns {keyEvent} + * Altered event object + */ + _shiftPressed: function (keyEvent) { + const alt = keyEvent.altKey || keyEvent.key === "Alt", + newEvent = _.extend({}, keyEvent), + shift = keyEvent.shiftKey || keyEvent.key === "Shift"; + // Mock event to make it seem like Alt is not pressed + if (alt && !shift) { + newEvent.altKey = false; + if (newEvent.key === "Alt") { + newEvent.key = "Shift"; + } + } + return newEvent; + }, + + _onKeyDown: function (keyDownEvent) { + return this._super(this._shiftPressed(keyDownEvent)); + }, + + _onKeyUp: function (keyUpEvent) { + return this._super(this._shiftPressed(keyUpEvent)); + }, + }; + + // Include the SHIFT+ALT mixin wherever + // `KeyboardNavigationMixin` is used upstream + AbstractWebClient.include(KeyboardNavigationShiftAltMixin); + + // TODO: use default odoo device context when it will be realized + const deviceContext = new Context({ + isMobile: config.device.isMobile, + size_class: config.device.size_class, + SIZES: config.device.SIZES, + }); + window.addEventListener( + "resize", + owl.utils.debounce(() => { + const state = deviceContext.state; + if (state.isMobile !== config.device.isMobile) { + state.isMobile = !state.isMobile; + } + if (state.size_class !== config.device.size_class) { + state.size_class = config.device.size_class; + } + }, 15) + ); + // Patch attachment viewer to add min/max buttons capability + PatchableAttachmentViewer.patch("web_responsive.AttachmentViewer", (T) => { + class AttachmentViewerPatchResponsive extends T { + constructor() { + super(...arguments); + this.state = useState({ + maximized: false, + }); + } + // Disable auto-close to allow to use form in edit mode. + isCloseable() { + return false; + } + } + return AttachmentViewerPatchResponsive; + }); + QWeb.components.AttachmentViewer = PatchableAttachmentViewer; + + // Patch control panel to add states for mobile quick search + ControlPanel.patch("web_responsive.ControlPanelMobile", (T) => { + class ControlPanelPatchResponsive extends T { + constructor() { + super(...arguments); + this.state = useState({ + mobileSearchMode: "", + }); + this.device = useContext(deviceContext); + } + } + return ControlPanelPatchResponsive; + }); + // Patch search panel to add functionality for mobile view + SearchPanel.patch("web_responsive.SearchPanelMobile", (T) => { + class SearchPanelPatchResponsive extends T { + constructor() { + super(...arguments); + this.state.mobileSearch = false; + this.device = useContext(deviceContext); + } + getActiveSummary() { + const selection = []; + for (const filter of this.model.get("sections")) { + let filterValues = []; + if (filter.type === "category") { + if (filter.activeValueId) { + const parentIds = this._getAncestorValueIds( + filter, + filter.activeValueId + ); + filterValues = [...parentIds, filter.activeValueId].map( + (valueId) => filter.values.get(valueId).display_name + ); + } + } else { + let values = []; + if (filter.groups) { + values = [ + ...filter.groups.values().map((g) => g.values), + ].flat(); + } + if (filter.values) { + values = [...filter.values.values()]; + } + filterValues = values + .filter((v) => v.checked) + .map((v) => v.display_name); + } + if (filterValues.length) { + selection.push({ + values: filterValues, + icon: filter.icon, + color: filter.color, + type: filter.type, + }); + } + } + return selection; + } + } + return SearchPanelPatchResponsive; + }); + return { + deviceContext: deviceContext, + }; +}); |