Skip to content
Permalink
Browse files

[IMP] website: add header visibility options

Adding a choice of several header behavior in the customize menu (fixed,
fade out with scroll, etc.)

task-2087641
  • Loading branch information
bvr-odoo committed Nov 6, 2019
1 parent 6a9f179 commit 6dd9373bc115438f66d49d9fa8f94b13061e4cce
Showing with 172 additions and 1 deletion.
  1. +145 −0 addons/website/static/src/js/content/menu.js
  2. +27 −1 addons/website/views/website_templates.xml
@@ -4,6 +4,7 @@ odoo.define('website.content.menu', function (require) {
var dom = require('web.dom');
var publicWidget = require('web.public.widget');
var wUtils = require('website.utils');
var animationWidget = require('website.content.snippets.animation');

publicWidget.registry.affixMenu = publicWidget.Widget.extend({
selector: 'header.o_affix_enabled',
@@ -142,6 +143,7 @@ publicWidget.registry.autohideMenu = publicWidget.Widget.extend({
dom.initAutoMoreMenu(self.$el, {unfoldable: '.divider, .divider ~ li'});
}
self.$el.removeClass('o_menu_loading');
self.$el.trigger('menu_loaded');
});
},
/**
@@ -233,4 +235,147 @@ publicWidget.registry.menuDirection = publicWidget.Widget.extend({
$menu.addClass('dropdown-menu-' + alignment);
},
});

publicWidget.registry.fixedHeader = publicWidget.Widget.extend({
selector: 'header.o_header_fixed',

/**
* @override
*/
start: function () {
var menuLoading = this.$('.o_menu_loading');
if (!menuLoading.length) {
this._initializeFixedHeader();
} else {
this.$el.one('menu_loaded', () => this._initializeFixedHeader());
}
return this._super.apply(this, arguments);
},
/**
* @override
*/
destroy: function () {
$('main').css('padding-top', '');
$('.o_header_fixed').removeClass('o_header_affix affixed');
this._super.apply(this, arguments);
},

//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------

/**
* @private
*/
_initializeFixedHeader: function () {
$('main').css('padding-top', $('.o_header_fixed').height());
$('.o_header_fixed').addClass('o_header_affix affixed');
},
});

publicWidget.registry.fadeOutHeader = animationWidget.Animation.extend({
selector: 'header.o_header_fade_out',
effects: [{
startEvents: 'scroll',
update: '_onWindowScroll',
}],

/**
* @override
*/
start: function () {
this.scrollingDownwards = true;
this.hiddenHeader = false;
this.position = 0;
this.checkPoint = 0;
return this._super.apply(this, arguments);
},

//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------

/**
* Called when the window is scrolled
*
* @private
* @param {integer} scrollTop
*/
_onWindowScroll: function (scrollTop) {
var scroll = scrollTop;
if (scroll > this.position) {
if (!this.scrollingDownwards) {
this.checkPoint = scroll;
}
if (!this.hiddenHeader && scroll - this.checkPoint > 200) {
this.hiddenHeader = true;
this.$el.fadeOut();
}
this.scrollingDownwards = true;
} else {
if (this.scrollingDownwards) {
this.checkPoint = scroll;
}
if (this.hiddenHeader && scroll - this.checkPoint < -100) {
this.hiddenHeader = false;
this.$el.fadeIn();
}
this.scrollingDownwards = false;
}
this.position = scroll;
},
});

publicWidget.registry.disappearsHeader = animationWidget.Animation.extend({
selector: 'header.o_header_disappears',
effects: [{
startEvents: 'scroll',
update: '_onWindowScroll',
}],

/**
* @override
*/
start: function () {
this.scrollingDownwards = true;
this.hiddenHeader = false;
this.position = 0;
this.checkPoint = 0;
return this._super.apply(this, arguments);
},

//--------------------------------------------------------------------------
// Handlers
//--------------------------------------------------------------------------

/**
* Called when the window is scrolled
*
* @private
* @param {integer} scrollTop
*/
_onWindowScroll: function (scrollTop) {
var scroll = scrollTop;
if (scroll > this.position) {
if (!this.scrollingDownwards) {
this.checkPoint = scroll;
}
if (!this.hiddenHeader && scroll - this.checkPoint > 400) {
this.hiddenHeader = true;
this.$el.animate({top: '-=' + this.$el.height()}, "slow");
}
this.scrollingDownwards = true;
} else {
if (this.scrollingDownwards) {
this.checkPoint = scroll;
}
if (this.hiddenHeader && scroll - this.checkPoint < -100) {
this.hiddenHeader = false;
this.$el.animate({top: '+=' + this.$el.height()}, "slow");
}
this.scrollingDownwards = false;
}
this.position = scroll;
},
});
});
@@ -376,6 +376,24 @@
</xpath>
</template>

<template id="header_visibility_freeze" inherit_id="website.layout" name="Header Visibility Freeze" active="False">
<xpath expr="//header" position="attributes">
<attribute name="t-attf-class" add="o_header_fixed" separator=" "/>
</xpath>
</template>

<template id="header_visibility_disappears" inherit_id="website.layout" name="Header Visibility Disappears" active="False">
<xpath expr="//header" position="attributes">
<attribute name="t-attf-class" add="o_header_fixed o_header_disappears" separator=" "/>
</xpath>
</template>

<template id="header_visibility_fade_out" inherit_id="website.layout" name="Header Visibility Fade Out" active="False">
<xpath expr="//header" position="attributes">
<attribute name="t-attf-class" add="o_header_fixed o_header_fade_out" separator=" "/>
</xpath>
</template>

<!-- Features template -->
<template id="login_layout" inherit_id="web.login_layout" name="Website Login Layout" priority="20">
<xpath expr="t" position="replace">
@@ -755,7 +773,6 @@
<!-- Menu options -->
<content id="theme_customize_content_navbar" string="Header" title="Choose your header">
<list string="Main Layout">
<checkbox><opt data-xmlid="website.affix_top_menu" data-reload="/"/></checkbox>
<checkbox><opt data-xmlid="portal.portal_show_sign_in" data-reload="/"/></checkbox>
<opt data-widget="input" data-unit="rem" data-variable="header-font-size" string="Font Size"/>
</list>
@@ -772,6 +789,15 @@
<opt id="option_template_header_logo_hamburger" string="Logo - Hamburger" data-xmlid="website.template_header_logo_hamburger" data-widget="auto" data-variable="header-template" data-value="space" data-reload="/"/>
</selection>
</list>
<list data-depends="!option_hamburger_menu, !option_side_navigation" string="Header Visibility">
<selection>
<opt id="option_header_visibility_standard" string="Standard" data-xmlid="website.affix_top_menu" data-reload="/"/>
<opt id="option_header_visibility_scroll" string="Scroll" data-xmlid="" data-reload="/"/>
<opt id="option_header_visibility_freeze" data-depends="!option_pre_header" string="Freeze" data-xmlid="website.header_visibility_freeze" data-reload="/"/>
<opt id="option_header_visibility_disappears" data-depends="!option_pre_header" string="Disappears" data-xmlid="website.header_visibility_disappears" data-reload="/"/>
<opt id="option_header_visibility_fade_out" data-depends="!option_pre_header" string="Fade Out" data-xmlid="website.header_visibility_fade_out" data-reload="/"/>
</selection>
</list>
</content>

<!-- Footer options -->

0 comments on commit 6dd9373

Please sign in to comment.
You can’t perform that action at this time.