Skip to content
Permalink
Browse files

m

  • Loading branch information...
kea14 committed Mar 22, 2019
1 parent eff31f5 commit 6be6cdabb28a0cf233521d2cd558193ac0e85409
@@ -566,6 +566,7 @@ var SnippetsMenu = Widget.extend({
remove_snippet: '_onRemoveSnippet',
snippet_removed: '_onSnippetRemoved',
reload_snippet_dropzones: '_disableUndroppableSnippets',
toggle_mega_menu_snippets: '_toggleMegaMenuSnippets',
},

/**
@@ -1431,6 +1432,14 @@ var SnippetsMenu = Widget.extend({
return this.nodeType === 3 && this.textContent.match(/\S/);
}).parent().addClass('o_default_snippet_text');
},
/**
* Toggle visibility of Mega Menu snippets when mega menu dropdown is shown/hidden
*
* @private
*/
_toggleMegaMenuSnippets: function () {
console.log('toggle mega menu snippets div');
},

//--------------------------------------------------------------------------
// Handlers
@@ -26,6 +26,7 @@ def _default_sequence(self):
child_id = fields.One2many('website.menu', 'parent_id', string='Child Menus')
parent_path = fields.Char(index=True)
is_visible = fields.Boolean(compute='_compute_visible', string='Is Visible')
mega_menu_content = fields.Html('Mega Menu Content')

@api.multi
def name_get(self):
@@ -114,6 +115,7 @@ def make_tree(node):
parent_id=node.parent_id.id,
children=[],
is_homepage=is_homepage,
is_mega_menu=bool(node.mega_menu_content),
)
for child in node.child_id:
menu_node['children'].append(make_tree(child))
@@ -158,3 +160,18 @@ def replace_id(old_id, new_id):
menu_id.write(menu)

return True

@api.model
def toggle_mega_menu(self, data):
menu_item = self.browse(data['data']['id'])
if menu_item.mega_menu_content:
content = False
else:
content = """
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
"""
menu_item.write({'mega_menu_content': content})
@@ -215,6 +215,8 @@ var EditorMenu = Widget.extend({
* @private
*/
_onSaveClick: function () {
// Close all dropdowns menu to avoid saving opened + edited dropdown
$('.dropdown-menu').dropdown('hide');
this.save();
},
});
@@ -1539,4 +1539,11 @@ options.registry.anchorName = options.Class.extend({
this.$target.trigger('content_changed');
},
});

options.registry.megaMenu = options.Class.extend({

start: function () {
console.log('start');
},
});
});
@@ -106,6 +106,12 @@ var WysiwygMultizone = Wysiwyg.extend({
ev.preventDefault();
}
},
'click div.dropdown-menu': function (ev) {
ev.stopPropagation();
},
'show.bs.dropdown .dropdown': function (ev) {
this.snippets.trigger('toggle_mega_menu_snippets');
},
}),
custom_events: _.extend({}, Wysiwyg.prototype.custom_events, {
activate_snippet: '_onActivateSnippet',
@@ -453,6 +453,7 @@ var EditMenuDialog = weWidgets.Dialog.extend({
'click a.js_add_menu': '_onAddMenuButtonClick',
'click button.js_delete_menu': '_onDeleteMenuButtonClick',
'click button.js_edit_menu': '_onEditMenuButtonClick',
'click button.js_convert_mega_menu': '_onConvertMegaMenuButtonClick',
}),

/**
@@ -643,6 +644,19 @@ var EditMenuDialog = weWidgets.Dialog.extend({
Dialog.alert(null, "Could not find menu entry");
}
},
/**
* @private
*/
_onConvertMegaMenuButtonClick: function (ev) {
var $menu = $(ev.currentTarget).closest('[data-menu-id]');
var menuID = $menu.data('menu-id') | 0;
this._rpc({
model: 'website.menu',
method: 'toggle_mega_menu',
args: [{ data: this.flat[menuID] }],
});
$(ev.currentTarget).removeClass('btn-info').addClass('btn-success');
},
});

var PageOption = Class.extend({
@@ -1154,3 +1154,45 @@ table.table_desc tr td {
.modal-footer > .float-left {
margin-right: auto;
}

// .dropdown-menu {
// min-width: 200px;
// }

// .dropdown-menu.columns-2 {
// min-width: 400px;
// }

// .dropdown-menu.columns-3 {
// min-width: 600px;
// }

// .dropdown-menu li a {
// padding: 5px 15px;
// }

// .multi-column-dropdown {
// list-style: none;
// margin: 0px;
// padding: 0px;
// }

// .multi-column-dropdown li a {
// display: block;
// clear: both;
// line-height: 1.428571429;
// color: #333;
// white-space: normal;
// }

// .multi-column-dropdown li a:hover {
// text-decoration: none;
// color: #262626;
// }

// @media (max-width: 767px) {
// .dropdown-menu.multi-column {
// min-width: 240px !important;
// overflow-x: hidden;
// }
// }
@@ -10,9 +10,11 @@
<span class="js_menu_label o_text_overflow flex-grow-1">
<t t-esc="submenu.name"/>
</span>
<span t-if="submenu.is_mega_menu" class="badge badge-primary">Mega Menu</span>
<i t-if="submenu.is_homepage" class="fa fa-home ml-3" role="img" aria-label="Home" title="Home"/>
</span>
<span class="input-group-append">
<button type="button" t-attf-class="btn btn-info js_convert_mega_menu fa fa-sitemap" t-attf-aria-label="#{submenu.is_mega_menu ? 'Remove Mega Menu' : 'Convert into Mega Menu'}" t-attf-title="#{submenu.is_mega_menu ? 'Remove Mega Menu' : 'Convert into Mega Menu'}"/>
<button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit menu" title="Edit menu"/>
<button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete menu" title="Delete menu"/>
</span>
@@ -818,6 +818,59 @@
</div>
</template>

<template id="s_link_menu" name="Link">
<div class="o_link_menu">
<a class="dropdown-item" href="#">New menu item</a>
</div>
</template>

<template id="s_sublink_menu" name="Sublink">
<div class="o_sublink_menu">
<a class="dropdown-item" href="#">New menu item</a>
</div>
</template>

<template id="s_dropdown_menu" name="Dropdown">
<div class="o_dropdown_menu dropdown">
<a class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</template>

<template id="s_title_menu" name="Title">
<div class="o_title_menu">
<h3 class="dropdown-item">Title</h3>
</div>
</template>

<template id="s_subtitle_menu" name="Subtitle">
<div class="o_subtitle_menu">
<h5 class="dropdown-item">Subtitle</h5>
</div>
</template>

<template id="s_image_menu" name="Image">
<div class="o_image_menu">
<img src="..." class="img-fluid" alt="Responsive image"/>
</div>
</template>

<template id="s_column_menu" name="Column">
<div class="o_column_menu col">
column
</div>
</template>

<template id="s_divider_menu" name="Divider">
<div class="o_divider_menu dropdown-divider"></div>
</template>

<!-- Snippets menu -->
<template id="snippets" inherit_id="web_editor.snippets" primary="True">
<xpath expr="//div[@id='o_scroll']" position="replace">
@@ -882,6 +935,23 @@
</div>
</div>

<div id="snippet_mega_menu" class="o_panel">
<div class="o_panel_header">
<i class="fa fa-puzzle-piece"/> Mega Menu
</div>
<div class="o_panel_body">
<!-- TODO: change images! -->
<t t-snippet="website.s_link_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_sublink_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_dropdown_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_title_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_subtitle_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_image_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_column_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
<t t-snippet="website.s_divider_menu" t-thumbnail="/website/static/src/img/snippets_thumbs/s_card.png"/>
</div>
</div>

</div>
</xpath>

@@ -1354,5 +1424,13 @@
data-selector=":not(p).oe_structure > *, :not(p)[data-oe-type=html] > *, .row > div">
<a tabindex="-1" href="#" class="dropdown-item" data-no-preview="true" data-open-anchor-dialog=""><i class="fa fa-anchor"/>Anchor Name</a>
</div>

<div id="mega_menu_snippets"
data-selector=".o_link_menu, .o_sublink_menu, .o_dropdown_menu, .o_title_menu, .o_subtitle_menu, .o_image_menu, .o_column_menu, .o_divider_menu"
data-drop-near="ul.dropdown-menu, div.dropdown-menu, li.dropdown, a.dropdown-item"
data-drop-in=".o_mega_menu"/>

<div data-js="megaMenu"
data-selector="#top_menu div.dropdown-menu"/>
</template>
</odoo>
@@ -131,7 +131,8 @@
<!-- Layout -->
<template id="submenu" name="Submenu">
<t t-set="has_visible_submenu" t-value="submenu.child_id.filtered(lambda menu: menu.is_visible)"/>
<li t-if="submenu.is_visible and not has_visible_submenu" t-attf-class="#{item_class or ''}">
<t t-set="has_mega_menu_content" t-value="submenu.mega_menu_content"/>
<li t-if="submenu.is_visible and not has_visible_submenu and not has_mega_menu_content" t-attf-class="#{item_class or ''}">
<a t-att-href="submenu.clean_url()"
t-attf-class="#{link_class or ''} #{'active' if submenu.clean_url() and unslug_url(request.httprequest.path) == unslug_url(submenu.clean_url()) else ''}"
role="menuitem"
@@ -140,7 +141,7 @@
<span t-field="submenu.name"/>
</a>
</li>
<li t-if="has_visible_submenu" t-attf-class="#{item_class or ''} dropdown #{
<li t-if="has_visible_submenu and not has_mega_menu_content" t-attf-class="#{item_class or ''} dropdown #{
(submenu.clean_url() and submenu.clean_url() != '/' and any([request.httprequest.path == child.url for child in submenu.child_id if child.url]) or
(submenu.clean_url() and request.httprequest.path == submenu.clean_url())) and 'active'
}">
@@ -156,6 +157,34 @@
</t>
</ul>
</li>
<li t-if="has_mega_menu_content" t-attf-class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<span t-field="submenu.name"/><b class="caret"></b>
</a>
<span t-field="submenu.mega_menu_content" class="o_mega_menu"/>
<!-- <ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</ul> -->
</li>
</template>

<template id="layout" name="Main layout" inherit_id="portal.frontend_layout">

0 comments on commit 6be6cda

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