diff --git a/src/components/ocfp-news/Agenda.vue b/src/components/ocfp-news/Agenda.vue new file mode 100644 index 0000000..59136cb --- /dev/null +++ b/src/components/ocfp-news/Agenda.vue @@ -0,0 +1,199 @@ + + + + + + + diff --git a/src/components/ocfp-news/Header.vue b/src/components/ocfp-news/Header.vue new file mode 100644 index 0000000..6ba2878 --- /dev/null +++ b/src/components/ocfp-news/Header.vue @@ -0,0 +1,124 @@ + + + + + diff --git a/src/components/ocfp-news/Navbar.vue b/src/components/ocfp-news/Navbar.vue new file mode 100644 index 0000000..8735248 --- /dev/null +++ b/src/components/ocfp-news/Navbar.vue @@ -0,0 +1,116 @@ + + + + + \ No newline at end of file diff --git a/src/components/ocfp-news/Schedule.vue b/src/components/ocfp-news/Schedule.vue new file mode 100644 index 0000000..c9f0731 --- /dev/null +++ b/src/components/ocfp-news/Schedule.vue @@ -0,0 +1,67 @@ + + + + + \ No newline at end of file diff --git a/src/components/ocfp-news/ScrollSpyDirective.ts b/src/components/ocfp-news/ScrollSpyDirective.ts new file mode 100644 index 0000000..5797b30 --- /dev/null +++ b/src/components/ocfp-news/ScrollSpyDirective.ts @@ -0,0 +1,37 @@ +import Vue, { DirectiveOptions, VNode, VNodeDirective } from 'vue'; + +let selectors!: string[]; +let observer!: IntersectionObserver; + +const ScrollSpyDirective: DirectiveOptions = { + inserted (el: Element, binding: VNodeDirective, vnode: VNode) { + selectors = binding.value.selectors; + + // highlight first element + el.querySelector(`[href="${selectors[0] || ''}"]`)?.classList.toggle('active', true); + + const config = { + rootMargin: '-5% 0px -85% 0px', + threshold: 0 + }; + + observer = new IntersectionObserver((entries, observer) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + selectors.forEach((selector: string) => { + el.querySelector(`[href="${selector}"`)?.classList.toggle('active', selector === `#${entry.target.id}`); + }); + } + }); + }, config); + + selectors.forEach((selector: string) => { + observer.observe(document.querySelector(selector) as Element); + }); + }, + unbind () { + observer.disconnect(); + } +}; + +export default ScrollSpyDirective; diff --git a/src/components/ocfp-news/Topic.vue b/src/components/ocfp-news/Topic.vue new file mode 100644 index 0000000..d181c5b --- /dev/null +++ b/src/components/ocfp-news/Topic.vue @@ -0,0 +1,25 @@ + + + + + \ No newline at end of file diff --git a/src/pages/OCFP.vue b/src/pages/OCFP.vue new file mode 100644 index 0000000..f4be476 --- /dev/null +++ b/src/pages/OCFP.vue @@ -0,0 +1,26 @@ + + + diff --git a/src/router/index.ts b/src/router/index.ts index d9f00c0..58ecd28 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -3,6 +3,7 @@ import VueRouter, { RouteConfig } from 'vue-router'; // components import CFP from '../pages/CFP.vue'; import News from '../pages/News.vue'; +import OCFP from '../pages/OCFP.vue'; Vue.use(VueRouter); @@ -25,6 +26,14 @@ export const routes: RouteConfig[] = [ menuItem: false } }, + { + path: '/cfp/ocfp-news', + name: 'ocfp-news', + component: OCFP, + meta: { + menuItem: false + } + }, { path: '/cfp/news', name: 'news',