1 let assert = require('assert')
2 let jst_server = (await import('@ndcode/jst_server')).default
3 let XDate = require('xdate')
7 a.length === b.length && a.every((value, index) => value === b[index])
9 return async (env, head, body, scripts) => {
10 //let cart = await _require('/online_store/cart.jst')
11 let fa_arrow_circle_left = await env.site.get_min_svg('/_svg/fa_arrow-circle-left.svg')
12 let fa_times_circle = await env.site.get_min_svg('/_svg/fa_times-circle.svg')
13 let fa_envelope = await env.site.get_min_svg('/_svg/fa_envelope.svg')
14 let fa_unlock_alt = await env.site.get_min_svg('/_svg/fa_unlock-alt.svg')
15 let fa_search = await env.site.get_min_svg('/_svg/fa_search.svg')
16 let get_session = await _require('/_lib/get_session.jst')
17 //let icon_cart_small = await env.site.get_min_svg('/_svg/icon_cart_small.svg')
18 let icon_cross = await env.site.get_min_svg('/_svg/icon_cross.svg')
19 //let icon_tick = await env.site.get_min_svg('/_svg/icon_tick.svg')
20 let logo_large = await env.site.get_min_svg('/_svg/logo_large.svg')
21 let page = await _require('/_lib/page.jst')
23 // initialize env.cart
26 // compute breadcrumbs from directories of the path
27 let component_names = env.parsed_url.pathname.split('/')
28 assert(component_names.length >= 2)
29 assert(component_names[0].length === 0)
30 assert(component_names[component_names.length - 1].length)
31 component_names = component_names.slice(1, -1)
33 let transaction = await env.site.database.Transaction()
35 let site_title, copyright
36 let component_titles // collects breadcrumb titles for current page
37 let menu_names, menu_titles // collects top level of menu for the navbar
40 let root = await transaction.get()
42 let session = await get_session(env, root)
43 signed_in_as = await session.get_json('signed_in_as')
45 let globals = await root.get('globals')
46 site_title = await globals.get_json('site_title')
47 copyright = await globals.get_json('copyright')
49 let navigation = await root.get('navigation')
50 if (navigation === undefined)
51 throw new jst_server.Problem(
53 'Please import the navigation tree into the database.',
57 // this code is taken from get_navigation.jst and instrumented
59 component_titles = [await p.get_json('title')] // Home
60 for (let i = 0; i < component_names.length; ++i) {
61 let children = await p.get('children')
62 p = await children.get(component_names[i])
63 if (navigation === undefined)
64 throw new jst_server.Problem(
66 `Can't find the path "${
67 component_names.slice(0, i + 1).map(name => '/' + name).join('')
68 }" in the navigation tree.`,
71 component_titles.push(await p.get_json('title'))
74 // similar to above but walks the top level laterally (not deeply)
75 menu_names = await navigation.get_json('menu')
76 let children = await navigation.get('children')
77 menu_titles = [await navigation.get_json('title')] // Home
78 for (let i = 0; i < menu_names.length; ++i) {
79 let child = await children.get(menu_names[i])
80 if (child === undefined)
81 throw new jst_server.Problem(
83 `Can't find the path "/${menu_names[i]}" in the navigation tree.`
86 menu_titles.push(await child.get('title'))
89 feedback_draft = await session.get_json('feedback_draft')
90 if (feedback_draft === undefined || env.now >= feedback_draft.expires)
94 transaction.rollback()
97 // save breadcrumbs and their titles for breadcrumbs.jst
98 // note: component_titles.length === component_names.length + 1
99 // component_titles[0] corresponds to /, is 'Home' or similar
100 // component_titles[i] corresponds to component_names[i - 1], i >= 1
101 env.component_names = component_names
102 env.component_titles = component_titles
104 // note: menu_titles.length === menu_names.length + 1
105 // menu_titles[0] corresponds to /, is 'Home' or similar
106 // menu_titles[i] corresponds to menu_names[i - 1], i >= 1a
107 // (navbar has Home appearing at same level as its immediate children)
116 component_names.length >= 2 ? 1 : component_names.length
125 // extract top-level directory name
126 assert(env.parsed_url.pathname.slice(0, 1) === '/')
127 let index = env.parsed_url.pathname.indexOf('/', 1)
128 let dir = index === -1 ? '' : env.parsed_url.pathname.slice(1, index)
130 div.scrollbar-fix-outer {
131 div.scrollbar-fix-inner {
133 div.row.align-items-center.py-3 {
135 _out.push(logo_large)
138 div.'mb-1'.text-right {
139 span#navbar-signed-in-status {
140 if (signed_in_as !== undefined)
141 'Signed in.' //`Signed in as ${signed_in_as}.`
146 if (signed_in_as !== undefined)
147 a#navbar-sign-in(href="#" hidden) {'Sign in'}
149 a#navbar-sign-in(href="#") {'Sign in'}
151 if (signed_in_as !== undefined)
152 a#navbar-sign-up(href="/my_account/sign_up/index.html" hidden) {'Sign up'}
154 a#navbar-sign-up(href="/my_account/sign_up/index.html") {'Sign up'}
156 if (signed_in_as !== undefined)
157 a#navbar-sign-out(href="#") {'Sign out'}
159 a#navbar-sign-out(href="#" hidden) {'Sign out'}
162 form(action="/search/index.html") {
164 input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
165 div.input-group-append {
166 button.btn.btn-outline-secondary#navbar-search-button(type="submit") {
168 div.icon24-inner {_out.push(fa_search)}
176 //div.'col-sm-1'.vbottom {
177 // // a nested div is used to avoid hover colour on the padding
178 // div.nav-li-a(style="text-align: center;") {
179 // a(href="/online_store/view_cart/index.html") {
181 // _out.push(icon_cart_small)
185 // `${(env.cart.items || []).length}`
192 nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.extend-background {
193 //a.navbar-brand(href="#") {'Navbar'}
195 button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
196 span.navbar-toggler-icon {}
198 div.collapse.navbar-collapse#navbarSupportedContent {
199 ul.navbar-nav.mr-auto {
200 // the active entry in the navbar bar is based on which top-level
201 // page we are under, even if we are not directly on that page
202 // but one of its children, this may be unexpected as the active
203 // entry does not highlight on hover, but you can still click it;
204 // we determine here the path to the corresponding top-level page
205 let component_prefix = component_names.slice(0, 1)
207 for (let i = 0; i < menu_titles.length; ++i) {
208 // construct path to the top-level page about to be described
210 i == 0 ? [] : [menu_names[i - 1]]
211 let menu_prefix_path =
212 menu_prefix.map(name => '/' + name).join('') + '/index.html'
214 if (arrays_equal(menu_prefix, component_prefix))
216 a.nav-link(href=menu_prefix_path) {
218 span.sr-only {' (current)'}
223 a.nav-link(href=menu_prefix_path) {
228 //li.nav-item.dropdown {
229 // a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
232 // div.dropdown-menu(aria-labelledby="navbarDropdown") {
233 // a.dropdown-item(href="#") {
237 // a.dropdown-item(href="#") {
240 // div.dropdown-divider {}
241 // a.dropdown-item(href="#") {
242 // 'Something else here'
247 // a.nav-link.disabled {
252 ul.navbar-nav.ml-auto {
254 a.nav-link#navbar-give-feedback(href="#") {'Give feedback'}
262 footer.extend-background {
263 a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
264 img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
268 a(href="https://git.ndcode.org/public/ndcode_site.git") {
271 ' and licensed under a '
272 a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
273 'Creative Commons Attribution-ShareAlike 3.0 Unported License'
278 p {'Example code fragments embedded within the text are placed in the public domain unless otherwise noted.'}
280 p {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`}
287 div.modal#navbar-sign-in-modal(tabindex="-1") {
291 span.h4.modal-title {'Sign in'}
294 form#navbar-sign-in-form {
298 label.form-label(for="navbar-sign-in-email") {'Email'}
299 input.form-control#navbar-sign-in-email(type="email" required maxlength=256) {}
300 div.invalid-feedback {'Please enter your account\'s email address.'}
307 label.form-label(for="navbar-sign-in-password") {'Password'}
308 input.form-control#navbar-sign-in-password(type="password" required minlength=8 maxlength=256) {}
309 div.invalid-feedback {'Please enter at least 8 characters.'}
317 a(href="/my_account/sign_up/index.html") {'Sign up'}
322 a(href="/my_account/password_reset/index.html") {'Password reset'}
325 p.'mt-3'.mb-0#navbar-sign-in-message(hidden) {}
328 button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
329 div.icon24-outer.mr-2 {
330 div.icon24-inner {_out.push(fa_arrow_circle_left)}
334 button.btn.btn-primary#navbar-sign-in-sign-in(type="button") {
335 div.icon24-outer.mr-2#navbar-sign-in-icon {
336 div.icon24-inner {_out.push(fa_unlock_alt)}
338 //div.icon24-outer.mr-2#navbar-sign-in-tick(hidden) {
339 // div.icon24-inner {_out.push(icon_tick)}
341 div.icon24-outer.mr-2#navbar-sign-in-cross(hidden) {
342 div.icon24-inner {_out.push(icon_cross)}
344 div.icon24-outer.mr-2#navbar-sign-in-spinner(hidden) {
346 div.spinner-border.spinner-border-sm(role="status") {}
356 div.modal#navbar-feedback-modal(tabindex="-1") {
360 span.h4.modal-title {'Give feedback'}
364 'Did you notice something not quite right, or just want to share your impression of this page?'
367 form#navbar-feedback-form {
371 label.form-label(for="navbar-feedback-message1") {'Message'}
372 textarea.form-control#navbar-feedback-message1(placeholder="I noticed that..." required rows=4 maxlength=65536) {
374 `${feedback_draft.message}`
376 div.invalid-feedback {'Please let us have your thoughts.'}
382 p.'mt-3'.mb-0#navbar-feedback-message(hidden) {}
385 button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
386 div.icon24-outer.mr-2 {
387 div.icon24-inner {_out.push(fa_arrow_circle_left)}
392 button.btn.btn-primary#navbar-feedback-send-message(type="button") {
393 div.icon24-outer.mr-2#navbar-feedback-icon {
394 div.icon24-inner {_out.push(fa_envelope)}
396 //div.icon24-outer.mr-2#navbar-feedback-tick(hidden) {
397 // div.icon24-inner {_out.push(icon_tick)}
399 div.icon24-outer.mr-2#navbar-feedback-cross(hidden) {
400 div.icon24-inner {_out.push(icon_cross)}
402 div.icon24-outer.mr-2#navbar-feedback-spinner(hidden) {
404 div.spinner-border.spinner-border-sm(role="status") {}
410 button.btn.btn-primary#navbar-feedback-send-message(type="button" disabled) {
411 div.icon24-outer.mr-2#navbar-feedback-icon {
412 div.icon24-inner {_out.push(fa_envelope)}
414 //div.icon24-outer.mr-2#navbar-feedback-tick(hidden) {
415 // div.icon24-inner {_out.push(icon_tick)}
417 div.icon24-outer.mr-2#navbar-feedback-cross(hidden) {
418 div.icon24-inner {_out.push(icon_cross)}
420 div.icon24-outer.mr-2#navbar-feedback-spinner(hidden) {
422 div.spinner-border.spinner-border-sm(role="status") {}
432 div.modal#navbar-message-modal(tabindex="-1") {
436 span.h4.modal-title {'Message'}
438 div.modal-body#navbar-message-modal-message {
441 button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
442 div.icon24-outer.mr-2 {
443 div.icon24-inner {_out.push(fa_times_circle)}
454 script(src="/js/utils.js") {}
457 // this function can be overridden in a further script
458 function sign_in_out(status) {
462 document.addEventListener(
465 let id_navbar_feedback_cross = document.getElementById('navbar-feedback-cross')
466 let id_navbar_feedback_form = document.getElementById('navbar-feedback-form')
467 let id_navbar_feedback_icon = document.getElementById('navbar-feedback-icon')
468 let id_navbar_feedback_message = document.getElementById('navbar-feedback-message')
469 let id_navbar_feedback_message1 = document.getElementById('navbar-feedback-message1')
470 let id_navbar_feedback_modal = document.getElementById('navbar-feedback-modal')
471 let id_navbar_feedback_send_message = document.getElementById('navbar-feedback-send-message')
472 let id_navbar_feedback_spinner = document.getElementById('navbar-feedback-spinner')
473 let id_navbar_feedback_tick = document.getElementById('navbar-feedback-tick')
474 let id_navbar_give_feedback = document.getElementById('navbar-give-feedback')
475 let id_navbar_message_modal = document.getElementById('navbar-message-modal')
476 let id_navbar_message_modal_message = document.getElementById('navbar-message-modal-message')
477 let id_navbar_search_button = document.getElementById('navbar-search-button')
478 let id_navbar_sign_in = document.getElementById('navbar-sign-in')
479 let id_navbar_sign_in_cross = document.getElementById('navbar-sign-in-cross')
480 let id_navbar_sign_in_email = document.getElementById('navbar-sign-in-email')
481 let id_navbar_sign_in_form = document.getElementById('navbar-sign-in-form')
482 let id_navbar_sign_in_icon = document.getElementById('navbar-sign-in-icon')
483 let id_navbar_sign_in_message = document.getElementById('navbar-sign-in-message')
484 let id_navbar_sign_in_modal = document.getElementById('navbar-sign-in-modal')
485 let id_navbar_sign_in_password = document.getElementById('navbar-sign-in-password')
486 let id_navbar_sign_in_sign_in = document.getElementById('navbar-sign-in-sign-in')
487 let id_navbar_sign_in_spinner = document.getElementById('navbar-sign-in-spinner')
488 let id_navbar_sign_in_tick = document.getElementById('navbar-sign-in-tick')
489 let id_navbar_sign_out = document.getElementById('navbar-sign-out')
490 let id_navbar_sign_up = document.getElementById('navbar-sign-up')
491 let id_navbar_signed_in_status = document.getElementById('navbar-signed-in-status')
492 //let id_navbarDropdown = document.getElementById('navbarDropdown')
493 //let id_navbarSupportedContent = document.getElementById('navbarSupportedContent')
496 id_navbar_sign_in.addEventListener(
499 id_navbar_sign_in_email.value = ''
500 id_navbar_sign_in_password.value = ''
501 id_navbar_sign_in_sign_in.disabled = true
502 $('#navbar-sign-in-modal').modal('show')
506 $('#navbar-sign-in-modal').on(
508 () => {id_navbar_sign_in_email.focus()}
511 let sign_in_edited = () => {
512 id_navbar_sign_in_sign_in.disabled =
513 id_navbar_sign_in_email.value.length === 0 &&
514 id_navbar_sign_in_password.value.length === 0
515 id_navbar_sign_in_icon.hidden = false
516 //id_navbar_sign_in_tick.hidden = true
517 id_navbar_sign_in_cross.hidden = true
518 id_navbar_sign_in_spinner.hidden = true
519 id_navbar_sign_in_message.hidden = true
522 id_navbar_sign_in_email.addEventListener(
526 id_navbar_sign_in_password.addEventListener(
531 id_navbar_sign_in_sign_in.addEventListener(
534 id_navbar_sign_in_icon.hidden = false
535 //id_navbar_sign_in_tick.hidden = true
536 id_navbar_sign_in_cross.hidden = true
537 id_navbar_sign_in_spinner.hidden = true
538 // the below causes an ugly flicker, so just keep the message
539 //id_navbar_sign_in_message.hidden = true
541 if (!id_navbar_sign_in_form.checkValidity()) {
542 id_navbar_sign_in_form.classList.add('was-validated');
544 id_navbar_sign_in_icon.hidden = true
545 id_navbar_sign_in_cross.hidden = false
548 id_navbar_sign_in_form.classList.remove('was-validated');
550 let email = id_navbar_sign_in_email.value.slice(0, 256).toLowerCase()
552 id_navbar_sign_in_icon.hidden = true
553 id_navbar_sign_in_spinner.hidden = false
556 '/api/account/sign_in.json',
558 id_navbar_sign_in_password.value.slice(0, 256)
562 let problem = Problem.from(error)
564 if (problem.title === 'Email not yet verified') {
565 location.href = `/my_account/send_verification_email?email=${encodeURIComponent(email)}`
569 id_navbar_sign_in_cross.hidden = false
570 id_navbar_sign_in_spinner.hidden = true
572 id_navbar_sign_in_message.textContent = problem.detail
573 //id_navbar_sign_in_message.classList.remove('text-success')
574 id_navbar_sign_in_message.classList.add('text-danger')
575 id_navbar_sign_in_message.hidden = false
578 //id_navbar_sign_in_tick.hidden = false
579 //id_navbar_sign_in_spinner.hidden = true
580 //id_navbar_sign_in_message.textContent = `You are now signed in as "${email}".`
581 //id_navbar_sign_in_message.classList.add('text-success')
582 //id_navbar_sign_in_message.classList.remove('text-danger')
583 //id_navbar_sign_in_message.hidden = false
585 if (sign_in_out(true))
586 // if location has been changed, leave the spinner and do
587 // not show status/dialog, as it causes an annoying flicker
590 id_navbar_signed_in_status.textContent = 'Signed in.' //`Signed in as ${email}.`
591 id_navbar_sign_in.hidden = true
592 id_navbar_sign_up.hidden = true
593 id_navbar_sign_out.hidden = false
595 id_navbar_sign_in_icon.hidden = false
596 id_navbar_sign_in_spinner.hidden = true
597 id_navbar_sign_in_message.hidden = true
598 id_navbar_message_modal_message.textContent = `You are now signed in as "${email}".`
599 $('#navbar-sign-in-modal').modal('hide')
600 $('#navbar-message-modal').modal('show')
605 id_navbar_sign_out.addEventListener(
610 '/api/account/sign_out.json'
614 let problem = Problem.from(error)
616 id_navbar_message_modal_message.textContent = problem.detail
617 $('#navbar-sign-in-modal').modal('hide')
618 $('#navbar-message-modal').modal('show')
622 if (sign_in_out(false))
623 // if location has been changed, leave the spinner and do
624 // not show status/dialog, as it causes an annoying flicker
627 id_navbar_signed_in_status.textContent = 'Browsing as guest.'
628 id_navbar_sign_in.hidden = false
629 id_navbar_sign_up.hidden = false
630 id_navbar_sign_out.hidden = true
632 id_navbar_message_modal_message.textContent = `You are now signed out.`
633 $('#navbar-sign-in-modal').modal('hide')
634 $('#navbar-message-modal').modal('show')
639 id_navbar_give_feedback.addEventListener(
642 // hack to move cursor to end of textarea
643 let temp = id_navbar_feedback_message1.value
644 id_navbar_feedback_message1.value = ''
645 id_navbar_feedback_message1.value = temp
647 $('#navbar-feedback-modal').modal('show')
652 $('#navbar-feedback-modal').on(
654 () => {id_navbar_feedback_message1.focus()}
657 let feedback_input_semaphore = new BinarySemaphore(false)
661 await feedback_input_semaphore.acquire()
662 await new Promise(resolve => setTimeout(resolve, 3000))
663 feedback_input_semaphore.try_acquire()
665 '/api/feedback/set_draft.json',
666 id_navbar_feedback_message1.value.length === 0 ?
669 message: id_navbar_feedback_message1.value.slice(0, 65536)
674 )() // ignore returned promise (start thread)
676 let feedback_edited = () => {
677 feedback_input_semaphore.release()
679 id_navbar_feedback_send_message.disabled =
680 id_navbar_feedback_message1.value.length === 0
681 id_navbar_feedback_icon.hidden = false
682 //id_navbar_feedback_tick.hidden = true
683 id_navbar_feedback_cross.hidden = true
684 id_navbar_feedback_spinner.hidden = true
685 id_navbar_feedback_message.hidden = true
688 id_navbar_feedback_message1.addEventListener(
693 id_navbar_feedback_send_message.addEventListener(
696 id_navbar_feedback_icon.hidden = false
697 //id_navbar_feedback_tick.hidden = true
698 id_navbar_feedback_cross.hidden = true
699 id_navbar_feedback_spinner.hidden = true
700 // the below causes an ugly flicker, so just keep the message
701 //id_navbar_feedback_message.hidden = true
703 if (!id_navbar_feedback_form.checkValidity()) {
704 id_navbar_feedback_form.classList.add('was-validated');
706 id_navbar_feedback_icon.hidden = true
707 id_navbar_feedback_cross.hidden = false
710 id_navbar_feedback_form.classList.remove('was-validated');
712 id_navbar_feedback_icon.hidden = true
713 id_navbar_feedback_spinner.hidden = false
716 '/api/feedback/send_message.json',
718 id_navbar_feedback_message1.value.slice(0, 65536)
722 let problem = Problem.from(error)
724 id_navbar_feedback_cross.hidden = false
725 id_navbar_feedback_spinner.hidden = true
727 id_navbar_feedback_message.textContent = problem.detail
728 //id_navbar_feedback_message.classList.remove('text-success')
729 id_navbar_feedback_message.classList.add('text-danger')
730 id_navbar_feedback_message.hidden = false
733 //id_navbar_feedback_tick.hidden = false
734 //id_navbar_feedback_spinner.hidden = true
735 //id_navbar_feedback_message.textContent = 'We have received your message. We will be in touch as soon as possible.'
736 //id_navbar_feedback_message.classList.add('text-success')
737 //id_navbar_feedback_message.classList.remove('text-danger')
738 //id_navbar_feedback_message.hidden = false
740 id_navbar_feedback_icon.hidden = false
741 id_navbar_feedback_spinner.hidden = true
742 id_navbar_feedback_message.hidden = true
743 id_navbar_message_modal_message.textContent = 'Thanks! We have received your feedback.'
744 $('#navbar-feedback-modal').modal('hide')
745 $('#navbar-message-modal').modal('show')