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)
132 div.row.align-items-center.py-3 {
134 _out.push(logo_large)
137 div.'mb-1'.text-right {
138 span#navbar-signed-in-status {
139 if (signed_in_as !== undefined)
140 'Signed in.' //`Signed in as ${signed_in_as}.`
145 if (signed_in_as !== undefined)
146 a#navbar-sign-in(href="#" hidden) {'Sign in'}
148 a#navbar-sign-in(href="#") {'Sign in'}
150 if (signed_in_as !== undefined)
151 a#navbar-sign-up(href="/my_account/sign_up/index.html" hidden) {'Sign up'}
153 a#navbar-sign-up(href="/my_account/sign_up/index.html") {'Sign up'}
155 if (signed_in_as !== undefined)
156 a#navbar-sign-out(href="#") {'Sign out'}
158 a#navbar-sign-out(href="#" hidden) {'Sign out'}
161 form(action="/search/index.html") {
163 input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
164 div.input-group-append {
165 button.btn.btn-outline-secondary#navbar-search-button(type="submit") {
167 div.icon24-inner {_out.push(fa_search)}
175 //div.'col-sm-1'.vbottom {
176 // // a nested div is used to avoid hover colour on the padding
177 // div.nav-li-a(style="text-align: center;") {
178 // a(href="/online_store/view_cart/index.html") {
180 // _out.push(icon_cart_small)
184 // `${(env.cart.items || []).length}`
191 nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.extend-background {
192 //a.navbar-brand(href="#") {'Navbar'}
194 button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
195 span.navbar-toggler-icon {}
197 div.collapse.navbar-collapse#navbarSupportedContent {
198 ul.navbar-nav.mr-auto {
199 // the active entry in the navbar bar is based on which top-level
200 // page we are under, even if we are not directly on that page
201 // but one of its children, this may be unexpected as the active
202 // entry does not highlight on hover, but you can still click it;
203 // we determine here the path to the corresponding top-level page
204 let component_prefix = component_names.slice(0, 1)
206 for (let i = 0; i < menu_titles.length; ++i) {
207 // construct path to the top-level page about to be described
209 i == 0 ? [] : [menu_names[i - 1]]
210 let menu_prefix_path =
211 menu_prefix.map(name => '/' + name).join('') + '/index.html'
213 if (arrays_equal(menu_prefix, component_prefix))
215 a.nav-link(href=menu_prefix_path) {
217 span.sr-only {' (current)'}
222 a.nav-link(href=menu_prefix_path) {
227 //li.nav-item.dropdown {
228 // a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
231 // div.dropdown-menu(aria-labelledby="navbarDropdown") {
232 // a.dropdown-item(href="#") {
236 // a.dropdown-item(href="#") {
239 // div.dropdown-divider {}
240 // a.dropdown-item(href="#") {
241 // 'Something else here'
246 // a.nav-link.disabled {
251 ul.navbar-nav.ml-auto {
253 a.nav-link#navbar-give-feedback(href="#") {'Give feedback'}
261 footer.extend-background {
262 a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
263 img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
267 a(href="https://git.ndcode.org/public/ndcode_site.git") {
270 ' and licensed under a '
271 a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
272 'Creative Commons Attribution-ShareAlike 3.0 Unported License'
277 p {'Example code fragments embedded within the text are placed in the public domain unless otherwise noted.'}
279 p {`Copyright © ${new XDate(env.now).getUTCFullYear()} ${copyright}.`}
285 div.modal#navbar-sign-in-modal(tabindex="-1") {
289 span.h4.modal-title {'Sign in'}
292 form#navbar-sign-in-form {
296 label.form-label(for="navbar-sign-in-email") {'Email'}
297 input.form-control#navbar-sign-in-email(type="email" required maxlength=256) {}
298 div.invalid-feedback {'Please enter your account\'s email address.'}
305 label.form-label(for="navbar-sign-in-password") {'Password'}
306 input.form-control#navbar-sign-in-password(type="password" required minlength=8 maxlength=256) {}
307 div.invalid-feedback {'Please enter at least 8 characters.'}
315 a(href="/my_account/sign_up/index.html") {'Sign up'}
320 a(href="/my_account/password_reset/index.html") {'Password reset'}
323 p.'mt-3'.mb-0#navbar-sign-in-message(hidden) {}
326 button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
327 div.icon24-outer.mr-2 {
328 div.icon24-inner {_out.push(fa_arrow_circle_left)}
332 button.btn.btn-primary#navbar-sign-in-sign-in(type="button") {
333 div.icon24-outer.mr-2#navbar-sign-in-icon {
334 div.icon24-inner {_out.push(fa_unlock_alt)}
336 //div.icon24-outer.mr-2#navbar-sign-in-tick(hidden) {
337 // div.icon24-inner {_out.push(icon_tick)}
339 div.icon24-outer.mr-2#navbar-sign-in-cross(hidden) {
340 div.icon24-inner {_out.push(icon_cross)}
342 div.icon24-outer.mr-2#navbar-sign-in-spinner(hidden) {
344 div.spinner-border.spinner-border-sm(role="status") {}
354 div.modal#navbar-feedback-modal(tabindex="-1") {
358 span.h4.modal-title {'Give feedback'}
362 'Did you notice something not quite right, or just want to share your impression of this page?'
365 form#navbar-feedback-form {
369 label.form-label(for="navbar-feedback-message1") {'Message'}
370 textarea.form-control#navbar-feedback-message1(placeholder="I noticed that..." required rows=4 maxlength=65536) {
372 `${feedback_draft.message}`
374 div.invalid-feedback {'Please let us have your thoughts.'}
380 p.'mt-3'.mb-0#navbar-feedback-message(hidden) {}
383 button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
384 div.icon24-outer.mr-2 {
385 div.icon24-inner {_out.push(fa_arrow_circle_left)}
390 button.btn.btn-primary#navbar-feedback-send-message(type="button") {
391 div.icon24-outer.mr-2#navbar-feedback-icon {
392 div.icon24-inner {_out.push(fa_envelope)}
394 //div.icon24-outer.mr-2#navbar-feedback-tick(hidden) {
395 // div.icon24-inner {_out.push(icon_tick)}
397 div.icon24-outer.mr-2#navbar-feedback-cross(hidden) {
398 div.icon24-inner {_out.push(icon_cross)}
400 div.icon24-outer.mr-2#navbar-feedback-spinner(hidden) {
402 div.spinner-border.spinner-border-sm(role="status") {}
408 button.btn.btn-primary#navbar-feedback-send-message(type="button" disabled) {
409 div.icon24-outer.mr-2#navbar-feedback-icon {
410 div.icon24-inner {_out.push(fa_envelope)}
412 //div.icon24-outer.mr-2#navbar-feedback-tick(hidden) {
413 // div.icon24-inner {_out.push(icon_tick)}
415 div.icon24-outer.mr-2#navbar-feedback-cross(hidden) {
416 div.icon24-inner {_out.push(icon_cross)}
418 div.icon24-outer.mr-2#navbar-feedback-spinner(hidden) {
420 div.spinner-border.spinner-border-sm(role="status") {}
430 div.modal#navbar-message-modal(tabindex="-1") {
434 span.h4.modal-title {'Message'}
436 div.modal-body#navbar-message-modal-message {
439 button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
440 div.icon24-outer.mr-2 {
441 div.icon24-inner {_out.push(fa_times_circle)}
452 script(src="/js/utils.js") {}
455 // this function can be overridden in a further script
456 function sign_in_out(status) {
460 document.addEventListener(
463 let id_navbar_feedback_cross = document.getElementById('navbar-feedback-cross')
464 let id_navbar_feedback_form = document.getElementById('navbar-feedback-form')
465 let id_navbar_feedback_icon = document.getElementById('navbar-feedback-icon')
466 let id_navbar_feedback_message = document.getElementById('navbar-feedback-message')
467 let id_navbar_feedback_message1 = document.getElementById('navbar-feedback-message1')
468 let id_navbar_feedback_modal = document.getElementById('navbar-feedback-modal')
469 let id_navbar_feedback_send_message = document.getElementById('navbar-feedback-send-message')
470 let id_navbar_feedback_spinner = document.getElementById('navbar-feedback-spinner')
471 let id_navbar_feedback_tick = document.getElementById('navbar-feedback-tick')
472 let id_navbar_give_feedback = document.getElementById('navbar-give-feedback')
473 let id_navbar_message_modal = document.getElementById('navbar-message-modal')
474 let id_navbar_message_modal_message = document.getElementById('navbar-message-modal-message')
475 let id_navbar_search_button = document.getElementById('navbar-search-button')
476 let id_navbar_sign_in = document.getElementById('navbar-sign-in')
477 let id_navbar_sign_in_cross = document.getElementById('navbar-sign-in-cross')
478 let id_navbar_sign_in_email = document.getElementById('navbar-sign-in-email')
479 let id_navbar_sign_in_form = document.getElementById('navbar-sign-in-form')
480 let id_navbar_sign_in_icon = document.getElementById('navbar-sign-in-icon')
481 let id_navbar_sign_in_message = document.getElementById('navbar-sign-in-message')
482 let id_navbar_sign_in_modal = document.getElementById('navbar-sign-in-modal')
483 let id_navbar_sign_in_password = document.getElementById('navbar-sign-in-password')
484 let id_navbar_sign_in_sign_in = document.getElementById('navbar-sign-in-sign-in')
485 let id_navbar_sign_in_spinner = document.getElementById('navbar-sign-in-spinner')
486 let id_navbar_sign_in_tick = document.getElementById('navbar-sign-in-tick')
487 let id_navbar_sign_out = document.getElementById('navbar-sign-out')
488 let id_navbar_sign_up = document.getElementById('navbar-sign-up')
489 let id_navbar_signed_in_status = document.getElementById('navbar-signed-in-status')
490 //let id_navbarDropdown = document.getElementById('navbarDropdown')
491 //let id_navbarSupportedContent = document.getElementById('navbarSupportedContent')
494 id_navbar_sign_in.addEventListener(
497 id_navbar_sign_in_email.value = ''
498 id_navbar_sign_in_password.value = ''
499 id_navbar_sign_in_sign_in.disabled = true
500 $('#navbar-sign-in-modal').modal('show')
504 $('#navbar-sign-in-modal').on(
506 () => {id_navbar_sign_in_email.focus()}
509 let sign_in_edited = () => {
510 id_navbar_sign_in_sign_in.disabled =
511 id_navbar_sign_in_email.value.length === 0 &&
512 id_navbar_sign_in_password.value.length === 0
513 id_navbar_sign_in_icon.hidden = false
514 //id_navbar_sign_in_tick.hidden = true
515 id_navbar_sign_in_cross.hidden = true
516 id_navbar_sign_in_spinner.hidden = true
517 id_navbar_sign_in_message.hidden = true
520 id_navbar_sign_in_email.addEventListener(
524 id_navbar_sign_in_password.addEventListener(
529 id_navbar_sign_in_sign_in.addEventListener(
532 id_navbar_sign_in_icon.hidden = false
533 //id_navbar_sign_in_tick.hidden = true
534 id_navbar_sign_in_cross.hidden = true
535 id_navbar_sign_in_spinner.hidden = true
536 // the below causes an ugly flicker, so just keep the message
537 //id_navbar_sign_in_message.hidden = true
539 if (!id_navbar_sign_in_form.checkValidity()) {
540 id_navbar_sign_in_form.classList.add('was-validated');
542 id_navbar_sign_in_icon.hidden = true
543 id_navbar_sign_in_cross.hidden = false
546 id_navbar_sign_in_form.classList.remove('was-validated');
548 let email = id_navbar_sign_in_email.value.slice(0, 256).toLowerCase()
550 id_navbar_sign_in_icon.hidden = true
551 id_navbar_sign_in_spinner.hidden = false
554 '/api/account/sign_in.json',
556 id_navbar_sign_in_password.value.slice(0, 256)
560 let problem = Problem.from(error)
562 if (problem.title === 'Email not yet verified') {
563 location.href = `/my_account/send_verification_email?email=${encodeURIComponent(email)}`
567 id_navbar_sign_in_cross.hidden = false
568 id_navbar_sign_in_spinner.hidden = true
570 id_navbar_sign_in_message.textContent = problem.detail
571 //id_navbar_sign_in_message.classList.remove('text-success')
572 id_navbar_sign_in_message.classList.add('text-danger')
573 id_navbar_sign_in_message.hidden = false
576 //id_navbar_sign_in_tick.hidden = false
577 //id_navbar_sign_in_spinner.hidden = true
578 //id_navbar_sign_in_message.textContent = `You are now signed in as "${email}".`
579 //id_navbar_sign_in_message.classList.add('text-success')
580 //id_navbar_sign_in_message.classList.remove('text-danger')
581 //id_navbar_sign_in_message.hidden = false
583 if (sign_in_out(true))
584 // if location has been changed, leave the spinner and do
585 // not show status/dialog, as it causes an annoying flicker
588 id_navbar_signed_in_status.textContent = 'Signed in.' //`Signed in as ${email}.`
589 id_navbar_sign_in.hidden = true
590 id_navbar_sign_up.hidden = true
591 id_navbar_sign_out.hidden = false
593 id_navbar_sign_in_icon.hidden = false
594 id_navbar_sign_in_spinner.hidden = true
595 id_navbar_sign_in_message.hidden = true
596 id_navbar_message_modal_message.textContent = `You are now signed in as "${email}".`
597 $('#navbar-sign-in-modal').modal('hide')
598 $('#navbar-message-modal').modal('show')
603 id_navbar_sign_out.addEventListener(
608 '/api/account/sign_out.json'
612 let problem = Problem.from(error)
614 id_navbar_message_modal_message.textContent = problem.detail
615 $('#navbar-sign-in-modal').modal('hide')
616 $('#navbar-message-modal').modal('show')
620 if (sign_in_out(false))
621 // if location has been changed, leave the spinner and do
622 // not show status/dialog, as it causes an annoying flicker
625 id_navbar_signed_in_status.textContent = 'Browsing as guest.'
626 id_navbar_sign_in.hidden = false
627 id_navbar_sign_up.hidden = false
628 id_navbar_sign_out.hidden = true
630 id_navbar_message_modal_message.textContent = `You are now signed out.`
631 $('#navbar-sign-in-modal').modal('hide')
632 $('#navbar-message-modal').modal('show')
637 id_navbar_give_feedback.addEventListener(
640 // hack to move cursor to end of textarea
641 let temp = id_navbar_feedback_message1.value
642 id_navbar_feedback_message1.value = ''
643 id_navbar_feedback_message1.value = temp
645 $('#navbar-feedback-modal').modal('show')
650 $('#navbar-feedback-modal').on(
652 () => {id_navbar_feedback_message1.focus()}
655 let feedback_input_semaphore = new BinarySemaphore(false)
659 await feedback_input_semaphore.acquire()
660 await new Promise(resolve => setTimeout(resolve, 3000))
661 feedback_input_semaphore.try_acquire()
663 '/api/feedback/set_draft.json',
664 id_navbar_feedback_message1.value.length === 0 ?
667 message: id_navbar_feedback_message1.value.slice(0, 65536)
672 )() // ignore returned promise (start thread)
674 let feedback_edited = () => {
675 feedback_input_semaphore.release()
677 id_navbar_feedback_send_message.disabled =
678 id_navbar_feedback_message1.value.length === 0
679 id_navbar_feedback_icon.hidden = false
680 //id_navbar_feedback_tick.hidden = true
681 id_navbar_feedback_cross.hidden = true
682 id_navbar_feedback_spinner.hidden = true
683 id_navbar_feedback_message.hidden = true
686 id_navbar_feedback_message1.addEventListener(
691 id_navbar_feedback_send_message.addEventListener(
694 id_navbar_feedback_icon.hidden = false
695 //id_navbar_feedback_tick.hidden = true
696 id_navbar_feedback_cross.hidden = true
697 id_navbar_feedback_spinner.hidden = true
698 // the below causes an ugly flicker, so just keep the message
699 //id_navbar_feedback_message.hidden = true
701 if (!id_navbar_feedback_form.checkValidity()) {
702 id_navbar_feedback_form.classList.add('was-validated');
704 id_navbar_feedback_icon.hidden = true
705 id_navbar_feedback_cross.hidden = false
708 id_navbar_feedback_form.classList.remove('was-validated');
710 id_navbar_feedback_icon.hidden = true
711 id_navbar_feedback_spinner.hidden = false
714 '/api/feedback/send_message.json',
716 id_navbar_feedback_message1.value.slice(0, 65536)
720 let problem = Problem.from(error)
722 id_navbar_feedback_cross.hidden = false
723 id_navbar_feedback_spinner.hidden = true
725 id_navbar_feedback_message.textContent = problem.detail
726 //id_navbar_feedback_message.classList.remove('text-success')
727 id_navbar_feedback_message.classList.add('text-danger')
728 id_navbar_feedback_message.hidden = false
731 //id_navbar_feedback_tick.hidden = false
732 //id_navbar_feedback_spinner.hidden = true
733 //id_navbar_feedback_message.textContent = 'We have received your message. We will be in touch as soon as possible.'
734 //id_navbar_feedback_message.classList.add('text-success')
735 //id_navbar_feedback_message.classList.remove('text-danger')
736 //id_navbar_feedback_message.hidden = false
738 id_navbar_feedback_icon.hidden = false
739 id_navbar_feedback_spinner.hidden = true
740 id_navbar_feedback_message.hidden = true
741 id_navbar_message_modal_message.textContent = 'Thanks! We have received your feedback.'
742 $('#navbar-feedback-modal').modal('hide')
743 $('#navbar-message-modal').modal('show')