[MODIFY] website_search_header: Improve scalability in js code

website_search_header/README.rst

@@ -1,3 +1,84 @@
-======================
-Website Search Header
-======================
+========================
+Website Search in Header
+========================
+
+.. 
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+   !! This file is generated by oca-gen-addon-readme !!
+   !! changes will be overwritten.                   !!
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+   !! source digest: sha256:d16cfb3e2bf08f7b6803f08d17d302e2ee86b04c1e4296db2ea051d1cb3dec43
+   !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
+    :target: https://odoo-community.org/page/development-status
+    :alt: Beta
+.. |badge2| image:: https://img.shields.io/badge/licence-LGPL--3-blue.png
+    :target: http://www.gnu.org/licenses/lgpl-3.0-standalone.html
+    :alt: License: LGPL-3
+.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fwebsite-lightgray.png?logo=github
+    :target: https://github.com/OCA/website/tree/16.0/website_search_header
+    :alt: OCA/website
+.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
+    :target: https://translation.odoo-community.org/projects/website-16-0/website-16-0-website_search_header
+    :alt: Translate me on Weblate
+.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png
+    :target: https://runboat.odoo-community.org/builds?repo=OCA/website&target_branch=16.0
+    :alt: Try me on Runboat
+
+|badge1| |badge2| |badge3| |badge4| |badge5|
+
+This module allows to restrict access to specific website pages to logged users.
+
+**Table of contents**
+
+.. contents::
+   :local:
+
+Usage
+=====
+
+Website > Configuration > Authorization required URLs: select a website and enter a relative path, eg: /shop
+
+When public user will try to access mywebsite.com/shop or any of its child pages, they will be requested to login.
+
+Bug Tracker
+===========
+
+Bugs are tracked on `GitHub Issues <https://github.com/OCA/website/issues>`_.
+In case of trouble, please check there if your issue has already been reported.
+If you spotted it first, help us to smash it by providing a detailed and welcomed
+`feedback <https://github.com/OCA/website/issues/new?body=module:%20website_search_header%0Aversion:%2016.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+
+Do not contact contributors directly about support or help with technical issues.
+
+Credits
+=======
+
+Authors
+~~~~~~~
+
+* ForgeFlow
+* Ooops
+
+Contributors
+~~~~~~~~~~~~
+
+* Ooops404 <https://ooops404.com>
+
+Maintainers
+~~~~~~~~~~~
+
+This module is maintained by the OCA.
+
+.. image:: https://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: https://odoo-community.org
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+This module is part of the `OCA/website <https://github.com/OCA/website/tree/16.0/website_search_header>`_ project on GitHub.
+
+You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

website_search_header/__manifest__.py

@@ -4,7 +4,7 @@
 {
     "name": "Website Search in Header",
     "category": "Website",
-    "version": "16.0.1.0.0",
+    "version": "16.0.1.1.0",
     "author": "ForgeFlow, Ooops, Odoo Community Association (OCA)",
     "website": "https://github.com/OCA/website",
     "license": "LGPL-3",
@@ -17,6 +17,7 @@
     ],
     "assets": {
         "web.assets_frontend": [
+            "website_search_header/static/src/js/website.js",
             "website_search_header/static/src/scss/website_search_header.scss",
         ],
     },

website_search_header/readme/CONTRIBUTORS.rst

@@ -1 +1,2 @@
+
 * ForgeFlow <https://www.forgeflow.com>

website_search_header/readme/USAGE.rst

@@ -0,0 +1 @@
+On desktop, the user will be able to show and hide the search input in the website header. While on mobile our searchbox will behave by default.

website_search_header/static/description/index.html

@@ -1,20 +1,20 @@
-<?xml version="1.0" encoding="utf-8" ?>
+<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
-<title>Website Login Required</title>
+<meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
+<title>Website Search in Header</title>
 <style type="text/css">
 
 /*
 :Author: David Goodger ([email protected])
-:Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $
+:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
 :Copyright: This stylesheet has been placed in the public domain.
 
 Default cascading style sheet for the HTML output of Docutils.
 
-See http://docutils.sf.net/docs/howto/html-stylesheets.html for how to
+See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
 customize this style sheet.
 */
 
@@ -360,64 +360,66 @@
 </style>
 </head>
 <body>
-<div class="document" id="website-login-required">
-<h1 class="title">Website Login Required</h1>
+<div class="document" id="website-search-in-header">
+<h1 class="title">Website Search in Header</h1>
 
 <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+!! source digest: sha256:d16cfb3e2bf08f7b6803f08d17d302e2ee86b04c1e4296db2ea051d1cb3dec43
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/website/tree/16.0/website_require_login"><img alt="OCA/website" src="https://img.shields.io/badge/github-OCA%2Fwebsite-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/website-16-0/website-16-0-website_require_login"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/186/16.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/website/tree/16.0/website_search_header"><img alt="OCA/website" src="https://img.shields.io/badge/github-OCA%2Fwebsite-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/website-16-0/website-16-0-website_search_header"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/website&amp;target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>This module allows to restrict access to specific website pages to logged users.</p>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
-<li><a class="reference internal" href="#usage" id="id1">Usage</a></li>
-<li><a class="reference internal" href="#bug-tracker" id="id2">Bug Tracker</a></li>
-<li><a class="reference internal" href="#credits" id="id3">Credits</a><ul>
-<li><a class="reference internal" href="#authors" id="id4">Authors</a></li>
-<li><a class="reference internal" href="#contributors" id="id5">Contributors</a></li>
-<li><a class="reference internal" href="#maintainers" id="id6">Maintainers</a></li>
+<li><a class="reference internal" href="#usage" id="toc-entry-1">Usage</a></li>
+<li><a class="reference internal" href="#bug-tracker" id="toc-entry-2">Bug Tracker</a></li>
+<li><a class="reference internal" href="#credits" id="toc-entry-3">Credits</a><ul>
+<li><a class="reference internal" href="#authors" id="toc-entry-4">Authors</a></li>
+<li><a class="reference internal" href="#contributors" id="toc-entry-5">Contributors</a></li>
+<li><a class="reference internal" href="#maintainers" id="toc-entry-6">Maintainers</a></li>
 </ul>
 </li>
 </ul>
 </div>
 <div class="section" id="usage">
-<h1><a class="toc-backref" href="#id1">Usage</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-1">Usage</a></h1>
 <p>Website &gt; Configuration &gt;&nbsp;Authorization required URLs: select a website and enter a relative path, eg: /shop</p>
 <p>When public user will try to access mywebsite.com/shop or any of its child pages, they will be requested to login.</p>
 </div>
 <div class="section" id="bug-tracker">
-<h1><a class="toc-backref" href="#id2">Bug Tracker</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-2">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/website/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
-If you spotted it first, help us smashing it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/OCA/website/issues/new?body=module:%20website_require_login%0Aversion:%2016.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+If you spotted it first, help us to smash it by providing a detailed and welcomed
+<a class="reference external" href="https://github.com/OCA/website/issues/new?body=module:%20website_search_header%0Aversion:%2016.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
-<h1><a class="toc-backref" href="#id3">Credits</a></h1>
+<h1><a class="toc-backref" href="#toc-entry-3">Credits</a></h1>
 <div class="section" id="authors">
-<h2><a class="toc-backref" href="#id4">Authors</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-4">Authors</a></h2>
 <ul class="simple">
-<li>Advitus MB</li>
+<li>ForgeFlow</li>
 <li>Ooops</li>
 </ul>
 </div>
 <div class="section" id="contributors">
-<h2><a class="toc-backref" href="#id5">Contributors</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-5">Contributors</a></h2>
 <ul class="simple">
 <li>Ooops404 &lt;<a class="reference external" href="https://ooops404.com">https://ooops404.com</a>&gt;</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
-<h2><a class="toc-backref" href="#id6">Maintainers</a></h2>
+<h2><a class="toc-backref" href="#toc-entry-6">Maintainers</a></h2>
 <p>This module is maintained by the OCA.</p>
 <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
 <p>OCA, or the Odoo Community Association, is a nonprofit organization whose
 mission is to support the collaborative development of Odoo features and
 promote its widespread use.</p>
-<p>This module is part of the <a class="reference external" href="https://github.com/OCA/website/tree/16.0/website_require_login">OCA/website</a> project on GitHub.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/website/tree/16.0/website_search_header">OCA/website</a> project on GitHub.</p>
 <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
 </div>
 </div>

website_search_header/static/src/js/website.js

@@ -0,0 +1,61 @@
+odoo.define("website_search_header.search_header", function (require) {
+    "use strict";
+
+    const publicWidget = require("web.public.widget");
+
+    publicWidget.registry.SearchHeader = publicWidget.Widget.extend({
+        selector: "#div_search_button",
+
+        events: {
+            "click  #search_btn_toggle_search": "_onClickSearchBtn",
+        },
+
+        start: function () {
+            const def = this._super.apply(this, arguments);
+            this.$boxInput = this.$el.find(".o_search_header");
+            return def;
+        },
+
+        mobileSearch: function () {
+            if (!this.$boxInput.hasClass("d-none")) {
+                this.$boxInput.addClass("d-none");
+            }
+            var searchQuery = document.querySelector("input[name='search']").value;
+            var encodedQuery = encodeURIComponent(searchQuery);
+            var searchURL = this._getSearchUrl(encodedQuery);
+            window.location.href = searchURL;
+        },
+
+        desktopSearch: function () {
+            if ($(".o_search_header").hasClass("d-lg-none")) {
+                $(".o_search_header").removeClass("d-lg-none");
+                $("#search_btn_toggle_search i").removeClass("oi-search");
+                $("#search_btn_toggle_search i").addClass("oi-close");
+                $("#div_search_header").removeClass("ms-lg-0");
+                $("#div_search_button").removeClass("ms-lg-2");
+            } else {
+                $(".o_search_header").addClass("d-lg-none");
+                $("#search_btn_toggle_search i").removeClass("oi-close");
+                $("#search_btn_toggle_search i").addClass("oi-search");
+                $("#div_search_header").addClass("ms-lg-0");
+                $("#div_search_button").addClass("ms-lg-2");
+            }
+        },
+
+        _onClickSearchBtn: function () {
+            var screenWidth =
+                window.innerWidth ||
+                document.documentElement.clientWidth ||
+                document.body.clientWidth;
+            if (screenWidth < 992) {
+                this.mobileSearch();
+            } else {
+                this.desktopSearch();
+            }
+        },
+
+        _getSearchUrl: function (encodedQuery) {
+            return "/website/search?search=" + encodedQuery + "&amp;order=name+asc";
+        },
+    });
+});