started to implement blabla : menu block, link vuejsed, route, component
This commit is contained in:
parent
3a594202b8
commit
a8027261e3
|
|
@ -0,0 +1,27 @@
|
|||
uuid: d16db992-5c92-4832-a386-69b50313a3e9
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- system.menu.header
|
||||
module:
|
||||
- menu_block
|
||||
theme:
|
||||
- materiotheme
|
||||
id: header
|
||||
theme: materiotheme
|
||||
region: header_right
|
||||
weight: -1
|
||||
provider: null
|
||||
plugin: 'menu_block:header'
|
||||
settings:
|
||||
id: 'menu_block:header'
|
||||
label: Header
|
||||
provider: menu_block
|
||||
label_display: '0'
|
||||
level: 1
|
||||
depth: 0
|
||||
expand: 0
|
||||
parent: 'header:'
|
||||
suggestion: header
|
||||
visibility: { }
|
||||
|
|
@ -9,7 +9,7 @@ dependencies:
|
|||
id: languageswitcher
|
||||
theme: materiotheme
|
||||
region: header_right
|
||||
weight: -1
|
||||
weight: 0
|
||||
provider: null
|
||||
plugin: 'language_block:language_interface'
|
||||
settings:
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
uuid: b00f8fd5-4940-4760-abeb-39cdb74ec895
|
||||
langcode: und
|
||||
status: true
|
||||
dependencies: { }
|
||||
id: header
|
||||
label: Header
|
||||
description: ''
|
||||
locked: false
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
uuid: e116ba1e-828b-40a6-80e1-b7b2e9b4d37b
|
||||
langcode: en
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- core.entity_view_mode.node.teaser
|
||||
- node.type.article
|
||||
- system.menu.header
|
||||
module:
|
||||
- node
|
||||
- rest
|
||||
- serialization
|
||||
- user
|
||||
id: blabla
|
||||
label: Blabla
|
||||
module: views
|
||||
description: ''
|
||||
tag: ''
|
||||
base_table: node_field_data
|
||||
base_field: nid
|
||||
core: 8.x
|
||||
display:
|
||||
default:
|
||||
display_plugin: default
|
||||
id: default
|
||||
display_title: Master
|
||||
position: 0
|
||||
display_options:
|
||||
access:
|
||||
type: perm
|
||||
options:
|
||||
perm: 'access content'
|
||||
cache:
|
||||
type: tag
|
||||
options: { }
|
||||
query:
|
||||
type: views_query
|
||||
options:
|
||||
disable_sql_rewrite: false
|
||||
distinct: false
|
||||
replica: false
|
||||
query_comment: ''
|
||||
query_tags: { }
|
||||
exposed_form:
|
||||
type: basic
|
||||
options:
|
||||
submit_button: Apply
|
||||
reset_button: false
|
||||
reset_button_label: Reset
|
||||
exposed_sorts_label: 'Sort by'
|
||||
expose_sort_order: true
|
||||
sort_asc_label: Asc
|
||||
sort_desc_label: Desc
|
||||
pager:
|
||||
type: mini
|
||||
options:
|
||||
items_per_page: 10
|
||||
offset: 0
|
||||
id: 0
|
||||
total_pages: null
|
||||
expose:
|
||||
items_per_page: false
|
||||
items_per_page_label: 'Items per page'
|
||||
items_per_page_options: '5, 10, 25, 50'
|
||||
items_per_page_options_all: false
|
||||
items_per_page_options_all_label: '- All -'
|
||||
offset: false
|
||||
offset_label: Offset
|
||||
tags:
|
||||
previous: ‹‹
|
||||
next: ››
|
||||
style:
|
||||
type: default
|
||||
row:
|
||||
type: 'entity:node'
|
||||
options:
|
||||
view_mode: teaser
|
||||
fields:
|
||||
title:
|
||||
id: title
|
||||
table: node_field_data
|
||||
field: title
|
||||
entity_type: node
|
||||
entity_field: title
|
||||
label: ''
|
||||
alter:
|
||||
alter_text: false
|
||||
make_link: false
|
||||
absolute: false
|
||||
trim: false
|
||||
word_boundary: false
|
||||
ellipsis: false
|
||||
strip_tags: false
|
||||
html: false
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
settings:
|
||||
link_to_entity: true
|
||||
plugin_id: field
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
exclude: false
|
||||
element_type: ''
|
||||
element_class: ''
|
||||
element_label_type: ''
|
||||
element_label_class: ''
|
||||
element_label_colon: true
|
||||
element_wrapper_type: ''
|
||||
element_wrapper_class: ''
|
||||
element_default_classes: true
|
||||
empty: ''
|
||||
hide_alter_empty: true
|
||||
click_sort_column: value
|
||||
type: string
|
||||
group_column: value
|
||||
group_columns: { }
|
||||
group_rows: true
|
||||
delta_limit: 0
|
||||
delta_offset: 0
|
||||
delta_reversed: false
|
||||
delta_first_last: false
|
||||
multi_type: separator
|
||||
separator: ', '
|
||||
field_api_classes: false
|
||||
filters:
|
||||
status:
|
||||
value: '1'
|
||||
table: node_field_data
|
||||
field: status
|
||||
plugin_id: boolean
|
||||
entity_type: node
|
||||
entity_field: status
|
||||
id: status
|
||||
expose:
|
||||
operator: ''
|
||||
group: 1
|
||||
type:
|
||||
id: type
|
||||
table: node_field_data
|
||||
field: type
|
||||
value:
|
||||
article: article
|
||||
entity_type: node
|
||||
entity_field: type
|
||||
plugin_id: bundle
|
||||
langcode:
|
||||
id: langcode
|
||||
table: node_field_data
|
||||
field: langcode
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
operator: in
|
||||
value:
|
||||
'***LANGUAGE_language_interface***': '***LANGUAGE_language_interface***'
|
||||
group: 1
|
||||
exposed: false
|
||||
expose:
|
||||
operator_id: ''
|
||||
label: ''
|
||||
description: ''
|
||||
use_operator: false
|
||||
operator: ''
|
||||
identifier: ''
|
||||
required: false
|
||||
remember: false
|
||||
multiple: false
|
||||
remember_roles:
|
||||
authenticated: authenticated
|
||||
reduce: false
|
||||
is_grouped: false
|
||||
group_info:
|
||||
label: ''
|
||||
description: ''
|
||||
identifier: ''
|
||||
optional: true
|
||||
widget: select
|
||||
multiple: false
|
||||
remember: false
|
||||
default_group: All
|
||||
default_group_multiple: { }
|
||||
group_items: { }
|
||||
entity_type: node
|
||||
entity_field: langcode
|
||||
plugin_id: language
|
||||
sorts:
|
||||
created:
|
||||
id: created
|
||||
table: node_field_data
|
||||
field: created
|
||||
order: DESC
|
||||
entity_type: node
|
||||
entity_field: created
|
||||
plugin_id: date
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
exposed: false
|
||||
expose:
|
||||
label: ''
|
||||
granularity: second
|
||||
title: Blabla
|
||||
header: { }
|
||||
footer: { }
|
||||
empty: { }
|
||||
relationships: { }
|
||||
arguments: { }
|
||||
display_extenders: { }
|
||||
cache_metadata:
|
||||
max-age: -1
|
||||
contexts:
|
||||
- 'languages:language_content'
|
||||
- 'languages:language_interface'
|
||||
- url.query_args
|
||||
- 'user.node_grants:view'
|
||||
- user.permissions
|
||||
tags: { }
|
||||
page_1:
|
||||
display_plugin: page
|
||||
id: page_1
|
||||
display_title: Page
|
||||
position: 1
|
||||
display_options:
|
||||
display_extenders:
|
||||
views_ef_fieldset: { }
|
||||
path: blabla
|
||||
menu:
|
||||
type: normal
|
||||
title: Blabla
|
||||
description: ''
|
||||
expanded: false
|
||||
parent: ''
|
||||
weight: 0
|
||||
context: '0'
|
||||
menu_name: header
|
||||
cache_metadata:
|
||||
max-age: -1
|
||||
contexts:
|
||||
- 'languages:language_content'
|
||||
- 'languages:language_interface'
|
||||
- url.query_args
|
||||
- 'user.node_grants:view'
|
||||
- user.permissions
|
||||
tags: { }
|
||||
rest_export_1:
|
||||
display_plugin: rest_export
|
||||
id: rest_export_1
|
||||
display_title: 'REST export'
|
||||
position: 2
|
||||
display_options:
|
||||
display_extenders:
|
||||
views_ef_fieldset: { }
|
||||
path: blabla_rest
|
||||
style:
|
||||
type: serializer
|
||||
defaults:
|
||||
style: false
|
||||
row: false
|
||||
row:
|
||||
type: data_entity
|
||||
options: { }
|
||||
pager:
|
||||
type: some
|
||||
options:
|
||||
items_per_page: 10
|
||||
offset: 0
|
||||
cache_metadata:
|
||||
max-age: -1
|
||||
contexts:
|
||||
- 'languages:language_content'
|
||||
- 'languages:language_interface'
|
||||
- request_format
|
||||
- 'user.node_grants:view'
|
||||
- user.permissions
|
||||
tags: { }
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -28,7 +28,9 @@ import 'theme/assets/styles/main.scss'
|
|||
|
||||
var MaterioTheme = function(){
|
||||
|
||||
var _v_sitebranding_block, _v_pagetitle_block, _v_user_block, _v_main_content, _v_search_block;
|
||||
var _v_sitebranding_block, _v_user_block, _v_header_menu
|
||||
, _v_pagetitle_block, _v_search_block
|
||||
, _v_main_content;
|
||||
var _is_front = drupalSettings.path.isFront;
|
||||
|
||||
console.log('drupalSettings', drupalSettings);
|
||||
|
|
@ -43,13 +45,29 @@ import 'theme/assets/styles/main.scss'
|
|||
}
|
||||
|
||||
function initVues(){
|
||||
initVRouter();
|
||||
initVSiteBrandingBlock()
|
||||
initVPagetitleBlock()
|
||||
initVUserBlock()
|
||||
initVHeaderMenu()
|
||||
initVMainContent()
|
||||
initVSearchBlock()
|
||||
}
|
||||
|
||||
function initVRouter(){
|
||||
// we need this to update the title while using history nav
|
||||
router.beforeEach((to, from, next) => {
|
||||
|
||||
// console.log('router beforeEach');
|
||||
// console.log(to);
|
||||
// console.log(from);
|
||||
// console.log(next);
|
||||
|
||||
store.commit('Common/setPagetitle', to.name)
|
||||
next();
|
||||
})
|
||||
}
|
||||
|
||||
function initVSiteBrandingBlock(){
|
||||
_v_sitebranding_block = new Vue({
|
||||
store,
|
||||
|
|
@ -61,7 +79,8 @@ import 'theme/assets/styles/main.scss'
|
|||
let href = event.target.getAttribute('href');
|
||||
// console.log("Clicked on logo href", href);
|
||||
this.$router.push(href)
|
||||
this.$store.commit('Common/setPagetitle', null)
|
||||
// replaced by router.beforeEach
|
||||
// this.$store.commit('Common/setPagetitle', null)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -127,6 +146,33 @@ import 'theme/assets/styles/main.scss'
|
|||
// console.log('initVUserBlock', _v_user_block);
|
||||
}
|
||||
|
||||
function initVHeaderMenu(){
|
||||
// console.log('initVHeaderMenu');
|
||||
// adding vuejs attributes has it wont work on twig template (see menu--header.html.twig)
|
||||
// not working : String contains an invalid character
|
||||
// document.querySelectorAll(`#block-header a`).forEach(link => {
|
||||
// console.log(link);
|
||||
// link.setAttribute('@click.prevent', 'onclick')
|
||||
// });
|
||||
|
||||
_v_header_menu = new Vue({
|
||||
store,
|
||||
router,
|
||||
el: `#block-header`,
|
||||
methods: {
|
||||
onclick(event){
|
||||
// console.log("Clicked on header menu link", event);
|
||||
let href = event.target.getAttribute('href');
|
||||
let title = event.target.innerText;
|
||||
// console.log("Clicked on header menu link : href", href);
|
||||
this.$router.push(href)
|
||||
// replaced by router.beforeEach
|
||||
// this.$store.commit('Common/setPagetitle', title)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function initVMainContent(){
|
||||
let id = "main-content"
|
||||
let $main_content = document.querySelector('#'+id)
|
||||
|
|
@ -136,7 +182,6 @@ import 'theme/assets/styles/main.scss'
|
|||
store,
|
||||
render: h => h(VMainContent, {props:{id:id, html:main_html, isfront:drupalSettings.path.isFront}})
|
||||
}).$mount('#'+id)
|
||||
// console.log('initTestVContent', v_test_content);
|
||||
}
|
||||
|
||||
function initVSearchBlock(){
|
||||
|
|
|
|||
|
|
@ -117,6 +117,18 @@ header[role="banner"]{
|
|||
}
|
||||
}
|
||||
|
||||
#block-header{
|
||||
margin-right: 1em;
|
||||
padding-left: 1em;
|
||||
border-left: 1px solid #000;
|
||||
ul.menu{
|
||||
margin:0;
|
||||
li{
|
||||
padding:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#block-languageswitcher{
|
||||
text-align: right;
|
||||
h2{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
{#
|
||||
/**
|
||||
* @file
|
||||
* Theme override to display a menu.
|
||||
*
|
||||
* Available variables:
|
||||
* - menu_name: The machine name of the menu.
|
||||
* - items: A nested list of menu items. Each menu item contains:
|
||||
* - attributes: HTML attributes for the menu item.
|
||||
* - below: The menu item child items.
|
||||
* - title: The menu link title.
|
||||
* - url: The menu link url, instance of \Drupal\Core\Url
|
||||
* - localized_options: Menu link localized options.
|
||||
* - is_expanded: TRUE if the link has visible children within the current
|
||||
* menu tree.
|
||||
* - is_collapsed: TRUE if the link has children within the current menu tree
|
||||
* that are not currently visible.
|
||||
* - in_active_trail: TRUE if the link is in the active trail.
|
||||
*/
|
||||
#}
|
||||
{% import _self as menus %}
|
||||
|
||||
{#
|
||||
We call a macro which calls itself to render the full tree.
|
||||
@see https://twig.symfony.com/doc/1.x/tags/macro.html
|
||||
#}
|
||||
{{ menus.menu_links(items, attributes, 0) }}
|
||||
|
||||
{% macro menu_links(items, attributes, menu_level) %}
|
||||
{% import _self as menus %}
|
||||
{% if items %}
|
||||
{% if menu_level == 0 %}
|
||||
<ul{{ attributes.addClass('menu') }}>
|
||||
{% else %}
|
||||
<ul class="menu">
|
||||
{% endif %}
|
||||
{% for item in items %}
|
||||
{%
|
||||
set classes = [
|
||||
'menu-item',
|
||||
item.is_expanded ? 'menu-item--expanded',
|
||||
item.is_collapsed ? 'menu-item--collapsed',
|
||||
item.in_active_trail ? 'menu-item--active-trail',
|
||||
]
|
||||
%}
|
||||
<li{{ item.attributes.addClass(classes) }}>
|
||||
{# this does not work because of the '@' #}
|
||||
{# we have to do it via js | not working neither #}
|
||||
{#{{ link(item.title, item.url, {'@click.prevent':['onclick']}) }}#}
|
||||
<a href="{{ item.url }}" @click.prevent='onclick'>{{ item.title }}</a>
|
||||
{% if item.below %}
|
||||
{{ menus.menu_links(item.below, attributes, menu_level + 1) }}
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<div id="blabla">
|
||||
<h1>Blabla</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Blabla",
|
||||
data: () => ({
|
||||
|
||||
}),
|
||||
beforeMount(){
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
|
|
@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
|
|||
|
||||
import Home from 'vuejs/components/Content/Home'
|
||||
import Base from 'vuejs/components/Content/Base'
|
||||
import Blabla from 'vuejs/components/Content/Blabla'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
|
|
@ -36,6 +37,16 @@ const routes = [
|
|||
// 'base': Base
|
||||
// }
|
||||
},
|
||||
{
|
||||
name:'blabla',
|
||||
path: `${basePath}blabla`,
|
||||
// path: `/base`,
|
||||
// alias: (() => languages.map(l => `/${l}/base`))(),
|
||||
component: Blabla,
|
||||
// components: {
|
||||
// 'base': Base
|
||||
// }
|
||||
},
|
||||
// {
|
||||
// path: '*',
|
||||
// name: 'notfound',
|
||||
|
|
|
|||
Loading…
Reference in New Issue