active Menu Entry logic for CISVUE

This commit is contained in:
SimonGschnell
2024-09-24 14:57:41 +02:00
parent 470192aabd
commit 7ed7ce1bb9
6 changed files with 159 additions and 46 deletions
+14 -6
View File
@@ -40,13 +40,21 @@ class Cms extends FHC_Controller
*/
public function content($content_id, $version = null, $sprache = null, $sichtbar = true)
{
$content = $this->ContentModel->load($content_id);
$content = $this->getDataOrTerminateWithError($content);
// return early if the content_id for the content is missing
if (!isset($content_id))
$this->terminateWithError("content_id is missing");
$content = $this->ContentModel->load($content_id);
if (isError($content))
$this->terminateWithError(getError($content));
$content = getData($content);
if (NULL === $content)
$this->terminateWithError("Content not found");
$content = current($content);
$this->load->view('CisVue/Cms/Content', ['content_id' => $content_id, 'template_kurzbz'=>$content->template_kurzbz , 'version' => $version, 'sprache' => $sprache, 'sichtbar' => $sichtbar]);
$this->load->view('CisVue/Cms/Content', ['content_id' => $content_id, 'template_kurzbz' => $content->template_kurzbz, 'version' => $version, 'sprache' => $sprache, 'sichtbar' => $sichtbar]);
}
/**
@@ -62,7 +70,7 @@ class Cms extends FHC_Controller
*/
public function news($infoscreen = false, $studiengang_kz = null, $semester = null, $mischen = true, $titel = '', $edit = false, $sichtbar = true)
{
$this->load->view('CisHtml/Cms/Content', ['infoscreen' => $infoscreen, 'studiengang_kz' => $studiengang_kz, 'semester' => $semester, 'mischen' => $mischen, 'titel' => $titel, 'edit' => $edit, 'sichtbar' => $sichtbar]);
$this->load->view('CisVue/Cms/Content', ['infoscreen' => $infoscreen, 'studiengang_kz' => $studiengang_kz, 'semester' => $semester, 'mischen' => $mischen, 'titel' => $titel, 'edit' => $edit, 'sichtbar' => $sichtbar]);
}
public function getNews($infoscreen = false, $studiengang_kz = null, $semester = null, $mischen = true, $titel = '', $edit = false, $sichtbar = true)
+2 -2
View File
@@ -8,11 +8,11 @@ $includesArray = array(
);
$this->load->view('templates/CISHTML-Header', $includesArray);
$this->load->view('templates/CISVUE-Header', $includesArray);
?>
<div id="content" >
</div>
<?php $this->load->view('templates/CISHTML-Footer', $includesArray); ?>
<?php $this->load->view('templates/CISVUE-Footer', $includesArray); ?>
+24 -8
View File
@@ -18,10 +18,18 @@ $sitesettings = array(
)
);
$this->load->view(
'templates/CISHTML-Header',
$sitesettings
);
if(defined('CIS4')){
$this->load->view(
'templates/CISVUE-Header',
$sitesettings
);
}else{
$this->load->view(
'templates/FHC-Header',
$sitesettings
);
}
?>
<div id="wrapper">
@@ -49,7 +57,15 @@ $this->load->view(
</div>
<?php
$this->load->view(
'templates/CISHTML-Footer',
$sitesettings
);
if (defined('CIS4')) {
$this->load->view(
'templates/CISVUE-Footer',
$sitesettings
);
} else {
$this->load->view(
'templates/FHC-Footer',
$sitesettings
);
}
@@ -18,7 +18,7 @@ $sitesettings = array(
);
$this->load->view(
'templates/CISHTML-Header',
'templates/CISVUE-Header',
$sitesettings
);
?>
@@ -222,6 +222,6 @@ $this->load->view(
<?php
$this->load->view(
'templates/CISHTML-Footer',
'templates/CISVUE-Footer',
$sitesettings
);
+12 -4
View File
@@ -16,19 +16,27 @@ export default {
},
data: () => {
return {
entries: []
entries: [],
activeEntry:null,
url:null,
};
},
methods:{
setActiveEntry(content_id){
this.activeEntry = content_id;
}
},
created() {
axios.get(FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + '/components/CisVue/Menu').then(res => {
this.entries = res.data.retval.childs;
});
},
template: `
template: /*html*/`
<p>CISVUE HEADER</p>
<button id="nav-main-btn" class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a id="nav-logo" :href="rootUrl">
<img :src="logoUrl" alt="Logo">
</a>
@@ -51,7 +59,7 @@ export default {
</ul>
<div id="nav-main-menu" class="collapse collapse-horizontal show">
<div>
<cis-menu-entry v-for="entry in entries" :key="entry.content_id" :entry="entry" />
<cis-menu-entry @activeEntry="setActiveEntry" :activeContent="activeEntry" v-for="entry in entries" :key="entry.content_id" :entry="entry" />
</div>
</div>
</div>
+105 -24
View File
@@ -5,14 +5,53 @@ export default {
level: {
type: Number,
default: 1
}
},
activeContent: String
},
data: () => {
return {
collapse: null
collapse: null,
url:null,
}
},
emits: ["activeEntry"],
watch:{
activeContent: function(newValue){
if(newValue == this.entry.content_id){
this.entry.menu_open = true;
}else{
if(this.entry.childs instanceof Array){
for(let child of this.entry.childs){
child.menu_open = false;
}
}
if (this.searchRecursiveChild(this.entry,newValue)){
this.entry.menu_open = true;
}else{
this.entry.menu_open = false;
}
}
},
'entry.menu_open': function (newValue,oldValue) {
if (newValue) {
console.log(this.entry.titel,"open")
this.collapse && this.collapse.show();
} else {
console.log(this.entry.titel,"close")
this.collapse && this.collapse.hide();
}
}
},
computed: {
active: function () {
if (this.activeContent) {
return this.activeContent == this.entry.content_id;
} else {
return false;
}
},
link() {
if (this.entry.template_kurzbz == 'redirect') {
if (!this.entry.content)
@@ -23,9 +62,19 @@ export default {
return '';
// TODO(chris): replace get params
url = url.childNodes[0].nodeValue + "";
url = url.replace(/^\.\.\/cms\/news\.php/, FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + '/CisVue/Cms/news');
url = url.replace(/^\.\.\//, FHC_JS_DATA_STORAGE_OBJECT.app_root);
return url;
if (url.includes("../cms/news.php")) {
let news_regex = new RegExp("^\.\./cms/news\.php");
url = url.replace(news_regex, FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + '/CisVue/Cms/news');
}
else if(url.includes("../index.ci.php")){
let index_regex = new RegExp("^\.\./index\.ci\.php");
url = url.replace(index_regex, FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router);
}
else if (url.includes("../")) {
let relative_regex = new RegExp("^\.\./");
url = url.replace(relative_regex, FHC_JS_DATA_STORAGE_OBJECT.app_root);
}
return url;
}
return FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + '/CisVue/Cms/content/' + this.entry.content_id;
},
@@ -50,11 +99,33 @@ export default {
}
},
methods: {
searchRecursiveChild(entry,child_content_id){
if (entry.childs instanceof Array) {
for (let child of entry.childs) {
if (child.content_id == child_content_id){
return true;
}
if (this.searchRecursiveChild(child, child_content_id)){
return true;
}
}
}
return false;
},
resendEmit(event){
console.log(this.entry.titel);
this.entry.menu_open = true;
this.$emit('activeEntry',event);
},
toggleCollapse(evt) {
if (this.collapse !== null) {
if (this.level > 1 && this.collapse !== null) {
this.entry.menu_open = !this.entry.menu_open;
this.collapse.toggle(evt.target);
}
}else{
this.active ?
this.$emit("activeEntry", null):
this.$emit("activeEntry", this.entry.content_id);
}
}
},
mounted() {
@@ -63,33 +134,42 @@ export default {
this.$refs.children.className += ' show';
this.collapse = new bootstrap.Collapse(this.$refs.children, { toggle: false });
}
this.url = window.location.href;
if (window.location.href == this.link) {
this.$emit("activeEntry", this.entry.content_id);
}
},
template: `
<div v-if="entry.template_kurzbz == 'include'">
template: /*html*/`
<!--<p>activeContent: {{JSON.stringify(activeContent,null,2)}}</p>
<p>entry menu: {{JSON.stringify(entry.menu_open,null,2)}}</p>-->
<div v-if="entry.template_kurzbz == 'include'">
INCLUDE
</div>
<template v-else>
<template v-if="hasChilds">
<a v-if="link.substr(0, 1) == '#'"
@click.prevent="toggleCollapse"
:aria-expanded="entry.menu_open"
:href="link"
<a v-if="link.substr(0, 1) == '#'"
@click.prevent="toggleCollapse"
:aria-expanded="entry.menu_open"
:href="link"
:class="{
'btn btn-default rounded-0 w-100 text-start dropdown-toggle': true,
['btn-level-' + level]: true,
collapsed: !entry.menu_open
}">
<span>{{ entry.titel }}</span>
<span :class="{'text-decoration-underline':active}">{{ entry.titel }}</span>
</a>
<div v-else class="btn-group w-100">
<a :href="link" :target="target"
<a :href="link" :target="target"
:class="{
'btn btn-default rounded-0 text-start': true,
['btn-level-' + level]: true
['btn-level-' + level]: true,
'text-decoration-underline':active
}">
{{ entry.titel }}
</a>
<button @click.prevent="toggleCollapse" :aria-expanded="entry.menu_open"
<button @click.prevent="toggleCollapse" :aria-expanded="entry.menu_open"
:class="{
'btn btn-default rounded-0 dropdown-toggle dropdown-toggle-split flex-grow-0': true,
collapsed: !entry.menu_open
@@ -97,17 +177,18 @@ export default {
<span class="visually-hidden">Toggle Dropdown</span>
</button>
</div>
<ul ref="children"
<ul ref="children"
class="nav w-100 collapse">
<cis-menu-entry v-for="child in entry.childs" :key="child" :entry="child" :level="level + 1"/>
<cis-menu-entry @activeEntry="resendEmit" :activeContent="activeContent" v-for="child in entry.childs" :key="child" :entry="child" :level="level + 1"/>
</ul>
</template>
<a v-else
:href="link"
:target="target"
<a v-else
:href="link"
:target="target"
:class="{
'btn btn-default rounded-0 w-100 text-start': true,
['btn-level-' + level]: true
'btn btn-default rounded-0 w-100 text-start': true,
['btn-level-' + level]: true,
'text-decoration-underline':active
}">
{{ entry.titel }}
</a>