We Keep Coding

How to add some page selection in js to display the block only on home page of Odoo Website Development

I'm new to Odoo .. I want to make my dropdown toggle display properties set to block only in my home page like this :
So, at other pages, it will set to none to prevent the dropdown override the content like this:
Here is what I've done so far with the code:
views/header.xml
<nav class="navbar navbar-expand-lg navbar-dark multilevel">
<ul class="navbar-nav w-100">
<li class="nav-item dropdown w-100">
<a class="nav-link dropdown-toggle nav-category" href="#"
data-bs-toggle="dropdown">
<i class="icon-view-grid"></i>
<span class="ic-category"></span>
Semua Kategori
</a>
<ul class="dropdown-menu dropdown-category show">
<div href="javascript:void(0)" class="close-category">
<i class="icon-x-circle"></i>
Tutup
</div>
<t t-foreach="product_categories" t-as="category">
<li class="has-submenu">
<a class="dropdown-item dropdown-toggle" t-attf-href="/products?categ={{ category.id }}">
<t t-if="category.image_1920">
<img class="image-category-icon" t-attf-src="/web/image/product.public.category/{{ category.id }}/image_1920"/>
</t>
<span t-esc="category.name"/>
</a>
<div class="megasubmenu dropdown-menu">
<ul class="list-unstyled">
<t t-foreach="category.child_id" t-as="second_level_category">
<t t-if="second_level_category.id">
<li>
<h3 class="content-title f-18"><a t-attf-href="/products?categ={{ second_level_category.id }}"><span t-esc="second_level_category.name"/></a></h3>
</li>
</t>
</t>
</ul>
</div>
</li>
</t>
<li>
<a class="dropdown-item text-center view-all"
href="/products">Lihat Semua Kategori
<i class="icon-arrow-right"></i>
</a>
</li>
</ul>
</li>
</ul>
</nav>
custom-style.css
.dropdown-item.active,
.dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #e5e5e5;
}
.dropdown-menu {
box-shadow: 0px 4px 35px rgba(70, 70, 70, 0.1);
border: 1px solid #d1d1d1;
}
main.js
//CATEGORY MENU
document.addEventListener("DOMContentLoaded", function () {
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function (element) {
element.addEventListener('click', function (e) {
e.stopPropagation();
});
});
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function () {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function (everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
});
});
document.querySelectorAll('.dropdown-menu a').forEach(function (element) {
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
console.log(nextEl);
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
});
} else if (window.location.pathname === '/') { // Check if the current URL is home page
// display all submenus
document.querySelectorAll('.submenu').forEach(function (everysubmenu) {
everysubmenu.style.display = 'block';
});
}
});
Is there any possible way to address this kind of stylesheet logics in JS than the built-in window.location.pathname and how to implement that, especially in Odoo, which is basicly using the markup of XML instead of HTML??
Any help would be very appreciated.
Thank a lot in advance.

Invoking JS Interop Function for DOM element located in submenu in Blazor

I am trying to invoke a JS function that creates a modal on user click through JS Interop in Blazor. The thing is, the function is using a onclick event for a DOM element that is inside a Blazor submenu. When that DOM Element is outside the submenu in the side navbar, it works fine. When I put that element inside the submenu, Blazor complains that it cannot set property 'onclick' of null
Here is my navbar HTML and JS Interop code
#inject IJSRuntime JS;
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">Test</a>
<button class="navbar-toggler" #onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="#NavMenuCssClass" #onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="/" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" #onclick="()=>expandSubNav = !expandSubNav">
<span class="oi oi-fork" aria-hidden="true"></span> AccountPage
</NavLink>
#if (expandSubNav)
{
<ul class="nav flex-column" id="submenu">
<li class="nav-item px-3">
<a class="expand-menu" href="page">
<span>element1</span>
</a>
</li>
<li class="nav-item px-3">
<a class="expand-menu" href="page">
<span>element2</span>
</a>
</li>
<li class="nav-item px-3">
<a class="expand-menu" href="page">
<span>element3</span>
</a>
</li>
<li class="nav-item px-3">
<a class="expand-menu">
<div id="addBtn" ><span class="oi oi-plus" aria-hidden="true"></span> Add Element</div>
</a>
</li>
</ul>
}
</li>
</ul>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<h1 class="modal-title">
<b>Add Element Here</b>
</h1>
<input id="addelementtext" type="text" />
<button id="add">Add</button>
<button type="button" class="btn btn-defaultcloseissue" id="closebtn" data-dismiss="modal" onclick="">Close</button>
</div>
</div>
</div>
</div>
#code { private bool collapseNavMenu = true;
private bool expandSubNav;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JS.InvokeVoidAsync("createModal");
}
}
}
I am trying to use onclick with this id element
<li class="nav-item px-3">
<a class="expand-menu">
<div id="addBtn" ><span class="oi oi-plus" aria-hidden="true"></span> Add Element</div>
</a>
</li>
It is inside the submenu it created. When I put it outside the submenu into the main nav menu, the JS function does not complain and it works fine.
I have also tried doing this
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
if (expandSubNav)
{
await JS.InvokeVoidAsync("createModal");
}
}
}
This stops the error but clicking the element does nothing. How can I go about fixing this? I am trying to research about the Blazor LifeCycle as I feel this is a rendering issue but I am having a hard time understanding what I can do.
Here is also the JS function that I am trying to call
window.createModal = function createModal() {
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("addBtn");
var closebtn = document.getElementById("closebtn");
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
closebtn.onclick = function (event) {
modal.style.display = "none";
}
}

Your first error, cannot set property 'onclick' of null, happens because the subnav portion is not expanded when the navbar is first rendered, so the addBtn element isn't found in the DOM yet when you call var btn = document.getElementById("addBtn");
The second issue is because your if() statement only runs once, on first render, while expandSubnav is false. So your await JS.InvokeVoidAsync("createModal"); line will never get executed.
If you notice in the #code block there's a method for toggling the collapseNavMenu:
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
If you did something similar, but for expandSubnav, you could use that as an opportunity to hook in your createModal code. You only want to do it once, so you'd probably want to keep track of that too. Something like:
private bool modalCreated = false;
private void ToggleSubNav()
{
expandSubnav = !expandSubnav;
if(!modalCreated)
{
await JS.InvokeVoidAsync("createModal");
modalCreated = true;
}
}
And then hook that into your NavLink:
<NavLink class="nav-link" #onclick="ToggleSubNav">
<span class="oi oi-fork" aria-hidden="true"></span> AccountPage
</NavLink>

Reloading Angular navigation directive after login

I'm just learning angularjs and working on my first "real" project. I've spent a couple hours searching online for an answer, but can't seem to find anything relevant in simple enough terms for me to understand.
I have a directive that just loads a navigation header:
app.directive('navDirective', function() {
return {
templateUrl: '../../views/nav.html'
};
});
And in my index.html file I have simply
<nav-directive> </nav-directive>
Initially I was working with Auth0 and got that working, and then added an ng-show to the nav items so that only login shows when there's no user, and all the others appear when there is a user.
Now, I am trying to get local authentication working, instead of using Auth0. It works, but I have to hit the brower's reload button after logging in before I see the navigation template update.
I think I've figured out that when using Auth0, I actually leave my website to go to Auth0, and then the callback causes my page to reload - so I see my nav items.
When I login locally using passport's local strategy, how can I force the navigation template to reload? Or become aware there is now a user, so change the ng-show's on the list items in the template?
Reading tonight, it seems like I can use $watch to do this, but I can't find a "$watch-for-dummies" page and am confused as to how that works exactly, what I would put in the link function and how I would trigger it.
My nav.html template is
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" ng-controller="NavCtrl">
<a class="navbar-brand" href="#" ng-show="currentUser">User: {{ currentUser.username }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbarCollapse justify-content-end" id="navbarNavDropdown">
<ul class="nav navbar-nav ">
<li class="nav-item" ng-show="currentUser">
<a class="nav-link nav-item-colapse" ui-sref="home">Home </a>
</li>
<li class="nav-item" ng-show="currentUser">
<a class="nav-link nav-item-colapse" ui-sref="view2">View 2</a>
</li>
<li class="nav-item" ng-show="currentUser">
<a class="nav-link nav-item-colapse" ui-sref="view3">View 3</a>
</li>
<li class="nav-item" ng-show="currentUser">
<a class="nav-link nav-item-colapse" ui-sref="reports">Reports</a>
</li>
<li class="nav-item dropdown" ng-show="currentUser">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" style="right: 0; left: auto;" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item nav-item-colapse" ui-sref="sub1">Sub Task1</a>
<a class="dropdown-item nav-item-colapse" ui-sref="sub2">Sub Task2</a>
<a class="dropdown-item nav-item-colapse" href="http://www.google.com">Do Something Else</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link active" ui-sref="login" ng-show="!currentUser">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" ng-click="logout()" ng-show="currentUser">Logout</a>
</li>
</ul>
</div>
</nav>
and navCtrl is:
app.controller("navCtrl", function($scope, mainSrvc) {
mainSrvc.getUser().then(function(user){
$scope.user = (user.data);
console.log('nav ctrl ran') //except it doesn't when logging in locally
console.log(($scope.user));
});
});
And this point I'm not sure if I'm going about this completely wrong or what.
Any suggestions or pointers?

You can use ng-if="vm.isLoggedIn()" to know if a user is present or not.
<nav ng-controller="LoginController as vm" ng-if="vm.isLoggedIn()"
class="navbar navbar-inverse navbar-static-top" ng-init="vm.init()">
In your login controller return wheather a user is logged in or not after authentication
function LoginController($http, $location, $window, AuthFactory, jwtHelper) {
var vm = this;
vm.isLoggedIn = function () {
if (AuthFactory.isLoggedIn) {
return true;
}
else {
return false;
}
};
vm.login = function () {
if (vm.username && vm.password) {
var user = {
username: vm.username,
password: vm.password
};
$http.post('/api/users/login', user).then(function (response) {
if (response.data.success) {
$window.sessionStorage.token = response.data.token;
AuthFactory.isLoggedIn = true;
var token =$window.sessionStorage.token;
var decodedToken = jwtHelper.decodeToken(token);
vm.loggedInUser = decodedToken.username;
}
}).catch(function (error) {
console.log(error);
})
}
}

Bootstrap 4 - Link to specific tab

I have a Bootstrap 4 tabs set in a Wordpress website and want to link to a specific tab from another page link:
Index.php:
Discover More
Services.php:
<!-- Nav tabs -->
<ul class="nav nav-tabs text-xs-center" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#innovation" role="tab" aria-expanded="true">
<h4>Innovation &<br/>Investigation</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#electronic-engineering" role="tab" aria-expanded="false">
<h4>Electronic<br/>Engineering</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link manufacturing" data-toggle="tab" href="#manufacturing" role="tab" aria-expanded="false">
<h4>Manufacturing</h4>
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content clearfix">
<!-- Innovation -->
<div class="tab-pane active" id="innovation" role="tabpanel" aria-expanded="true">
<div data-aos="fade" data-aos-duration="2000" class="col-sm-5">
Content
</div>
</div>
<!-- Electronic Engineering -->
<div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="electronic-engineering" role="tabpanel" aria-expanded="false">
<div class="col-sm-5">
Content
</div>
</div>
<!-- Manufacturing -->
<div data-aos="fade" data-aos-duration="2000" class="tab-pane" id="manufacturing" role="tabpanel" aria-expanded="false">
<div class="col-sm-5">
Content
</div>
</div>
</div>
Javascript:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '-tab"]').tab('show');
} //add a suffix
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
I had tried this solutions but without success:
- Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
Thanks

I would recommend something like this / use pushState - otherwise your browser scrolls to your ID:
$(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
history.pushState({}, '', e.target.hash);
});
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
});

It's not working because you need to attach the shown.bs.tab handler before calling .tab('show') on page load.
// wire up shown event
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log("tab shown...");
});
// read hash from page load and change tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
Bootstrap 4 - Active Tab on Page Load
Code: http://www.codeply.com/go/Yu8wbjeGMZ
Demo: http://www.codeply.com/render/Yu8wbjeGMZ#tab2

This is where I landed with Bootstrap 4. You just need to make sure your hash it the id of the anchor (a href) tag.
$(function() {
$(document.location.hash).tab('show');
});

Bootstrap - Toggle navigation and accordion panel simultaneously

I'd like to have a menu button that opens a custom slide-in nav and a specific bootstrap accordion panel (within the nav) simultaneously on one click. I have the slide-in menu and accordion working independently. The button currently opens the menu but can't figure out how to have it also expand a panel. Ideally I'd like the panel to open after the menu opens with a slight delay.
Please check this working JSFIDDLE for details
Thanks!
jQuery(document).ready(function($) {
var open = false;
var openSidebar = function() {
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
open = true;
}
var closeSidebar = function() {
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
open = false;
}
$('.toggle-menu').click(function(event) {
event.stopPropagation();
var toggle = open ? closeSidebar : openSidebar;
toggle();
});
$(document).click(function(event) {
if (!$(event.target).closest('.menu--slide-right').length) {
closeSidebar();
}
});
});
<header class="navbar nav-main navbar-fixed-top" role="banner">
<ul class="nav nav--right">
<li class="v-button--slide-right" id="toggle-menu">
<button class="mpp-menu-icon mpp-menu-icon--cross toggle-menu">
<span class="toggle"></span>
<span class="menu">menu</span>
</button>
</li>
</ul>
<nav id="menu--slide-right" class="nav menu--slide-right">
<ul class="main-menu">
<li>Home</li>
<ul aria-multiselectable="true" role="tablist" id="accordion" class="panel-group">
<li class="panel">
<a aria-controls="dropdown-menu--resources" aria-expanded="false" data-target="#dropdown-menu--resources" data-parent="#accordion" data-toggle="collapse">Resources <span class="expand-icon fa fa-angle-down"></span></a>
<div aria-labelledby="headingOne" role="tabpanel" class="panel-collapse collapse" id="dropdown-menu--resources">
<ul class="v-dropdown-menu">
<li><span class="link-icon fa fa-angle-right"></span> Blog</li>
<li><span class="link-icon fa fa-angle-right"></span> FAQ</li>
<li><span class="link-icon fa fa-angle-right"></span> Glossary</li>
<li><span class="link-icon fa fa-angle-right"></span> Shipping info</li>
</ul>
</div>
</li>
</ul>
<!-- end panel-group -->
<li>Capabilities</li>
<li>Contact</li>
</ul>
</nav>
</header>

use the in and collapse classes
var openSidebar = function(){
...
$('#dropdown-menu--resources').addClass('in');
open = true;
}
var closeSidebar = function(){
...
$('#dropdown-menu--resources').removeClass('collapse');
open = false;
}

Try this
Added $(".collapse").collapse('show'); in openSidebar and $(".collapse").collapse('hide'); in closeSidebar.
var openSidebar = function(){
$('.menu--slide-right').addClass('is-active');
$('.toggle-menu').addClass('is-active');
$('#toggle-menu').addClass('toggle-close');
$(".collapse").collapse('show');
open = true;
}
var closeSidebar = function(){
$('.menu--slide-right').removeClass('is-active');
$('.toggle-menu').removeClass('is-active');
$('#toggle-menu').removeClass('toggle-close');
$(".collapse").collapse('hide');
open = false;
}