_lib/navbar.jst

   1 let assert = require('assert')
   2 let XDate = require('xdate')
   3
   4 return async (env, head, body, scripts) => {
   5   //let cart = await _require('/online_store/cart.jst')
   6   let globals = await env.site.get_json('/_config/globals.json')
   7   //let icon_cart_small = await env.site.get_min_svg('/_svg/icon_cart_small.svg')
   8   let icon_search_mono = await env.site.get_min_svg('/_svg/icon_search_mono.svg')
   9   let logo_large = await env.site.get_min_svg('/_svg/logo_large.svg')
  10   let menu = await env.site.get_menu('/_menu.json')
  11   let page = await _require('/_lib/page.jst')
  12
  13   // initialize env.cart
  14   //await cart(env)
  15
  16   await page(
  17     env,
  18     // head
  19     async _out => {
  20       // extract top-level directory name
  21       assert(env.parsed_url.pathname.slice(0, 1) === '/')
  22       let index = env.parsed_url.pathname.indexOf('/', 1)
  23       let dir = index === -1 ? '' : env.parsed_url.pathname.slice(1, index)
  24
  25       title {
  26         _out.push(
  27           globals.site_title + ': ' + (
  28             dir.length === 0 ?
  29             'Home' :
  30             menu.entries[menu.index[dir]].name
  31           )
  32         )
  33       }
  34
  35       await head(_out)
  36     },
  37     // body
  38     async _out => {
  39       // extract top-level directory name
  40       assert(env.parsed_url.pathname.slice(0, 1) === '/')
  41       let index = env.parsed_url.pathname.indexOf('/', 1)
  42       let dir = index === -1 ? '' : env.parsed_url.pathname.slice(1, index)
  43
  44       div.scrollbar-fix {
  45         div.container {
  46           div.row.align-items-center.py-3 {
  47             div.col-sm-7 {
  48               _out.push(logo_large)
  49             }
  50             div.'col-sm-5' {
  51               div.'mb-1'.text-right {
  52                 span#signed-in-status {
  53                   if (env.signed_in_as !== null)
  54                     `Signed in as ${env.signed_in_as}.`
  55                   else
  56                     'Browsing as guest.'
  57                 }
  58                 ' '
  59                 if (env.signed_in_as !== null)
  60                   a#sign-in(href="" hidden="") {'Sign in'}
  61                 else
  62                   a#sign-in(href="") {'Sign in'}
  63                 ' '
  64                 if (env.signed_in_as !== null)
  65                   a#sign-out(href="") {'Sign out'}
  66                 else
  67                   a#sign-out(href="" hidden="") {'Sign out'}
  68               }
  69
  70               form/*.form-inline*/(action="/search/index.html") {
  71                 div.input-group {
  72                   input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
  73                   div.input-group-append {
  74                     button.btn.btn-outline-secondary#search-button(type="submit") {
  75                       _out.push(icon_search_mono)
  76                     }
  77                   }
  78                 }
  79               }
  80             }
  81
  82             //div.'col-sm-1'.vbottom {
  83             //  // a nested div is used to avoid hover colour on the padding
  84             //  div.nav-li-a(style="text-align: center;") {
  85             //    a(href="/online_store/view_cart/index.html") {
  86             //      div.cart-icon {
  87             //        _out.push(icon_cart_small)
  88             //      }
  89             //      div.cart-number {
  90             //        div.cart-circle {
  91             //          `${(env.cart.items || []).length}`
  92             //        }
  93             //      }
  94             //    }
  95             //  }
  96             //}
  97           }
  98         }
  99       }
 100       nav.navbar.navbar-expand-lg.navbar-dark.bg-primary.scrollbar-fix {
 101         div.container {
 102           //a.navbar-brand(href="#") {'Navbar'}
 103           //' '
 104           button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
 105             span.navbar-toggler-icon {}
 106           }
 107           div.collapse.navbar-collapse#navbarSupportedContent {
 108             ul.navbar-nav.mr-auto {
 109               if (dir.length === 0)
 110                 li.nav-item.active {
 111                   a.nav-link(href="/index.html") {
 112                     'Home'
 113                     span.sr-only {' (current)'}
 114                   }
 115                 }
 116               else
 117                 li.nav-item {
 118                   a.nav-link(href="/index.html") {'Home'}
 119                 }
 120               let entries = menu.entries
 121               for (let i = 0; i < entries.length; ++i)
 122                 if (entries[i].navbar)
 123                   if (entries[i].dir === dir)
 124                     li.nav-item.active {
 125                       a.nav-link(href=`/${entries[i].dir}/index.html`) {
 126                         `${entries[i].name}`
 127                         span.sr-only {' (current)'}
 128                       }
 129                     }
 130                   else
 131                     li.nav-item {
 132                       a.nav-link(href=`/${entries[i].dir}/index.html`) {
 133                         `${entries[i].name}`
 134                       }
 135                     }
 136               //li.nav-item.dropdown {
 137               //  a.nav-link.dropdown-toggle#navbarDropdown(href="#" role="button" data-toggle="dropdown" aria-expanded="false") {
 138               //    'Dropdown'
 139               //  }
 140               //  div.dropdown-menu(aria-labelledby="navbarDropdown") {
 141               //    a.dropdown-item(href="#") {
 142               //      'Action'
 143               //    }
 144               //    ' '
 145               //    a.dropdown-item(href="#") {
 146               //      'Another action'
 147               //    }
 148               //    div.dropdown-divider {}
 149               //    a.dropdown-item(href="#") {
 150               //      'Something else here'
 151               //    }
 152               //  }
 153               //}
 154               //li.nav-item {
 155               //  a.nav-link.disabled {
 156               //    'Disabled'
 157               //  }
 158               //}
 159             }
 160             ul.navbar-nav.ml-auto {
 161               li.nav-item {
 162                 a.nav-link#give-feedback(href="") {'Give feedback'}
 163               }
 164             }
 165           }
 166         }
 167       }
 168       div.scrollbar-fix {
 169         div.container {
 170           await body(_out)
 171         }
 172       }
 173       footer.scrollbar-fix {
 174         div.container {
 175           a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
 176             img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
 177           }
 178           p {
 179             'This website is '
 180             a(href="https://git.ndcode.org/public/ndcode_site.git") {
 181               'open source'
 182             }
 183             ' and licensed under a '
 184             a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
 185               'Creative Commons Attribution-ShareAlike 3.0 Unported License'
 186             }
 187             '.'
 188           }
 189
 190           p {'Example code fragments embedded within the text are placed in the public domain unless otherwise noted.'}
 191
 192           p {`Copyright � ${new XDate().getUTCFullYear()} ${globals.copyright}.`}
 193         }
 194       }
 195
 196       // hidden part
 197       //div#sign-in-modal.modal.fade(role="dialog") {
 198       //  div.modal-dialog {
 199       //    div.modal-content {
 200       //      div.modal-header {
 201       //        span.h4.modal-title {'Sign in'}
 202       //      }
 203       //      div.modal-body {
 204       //        form#sign-in-form(method="post" action="/sign_in.json" role="form") {
 205       //          div.row {
 206       //            div.col-md-12 {
 207       //              div.form-group {
 208       //                label(for="sign-in-form-email") {'Email'}
 209       //                input.form-control#sign-in-form-email(type="text" name="email" placeholder="Please enter your email address" required="required" data-error="Email address is required.") {}
 210       //                div.help-block.with-errors {}
 211       //              }
 212       //            }
 213       //          }
 214       //          div.row {
 215       //            div.col-md-12 {
 216       //              div.form-group {
 217       //                label(for="sign-in-form-password") {'Password'}
 218       //                input.form-control#sign-in-form-password(type="password" name="password" required="required" placeholder="Please enter your password" data-error="Password is required.") {}
 219       //                div.help-block.with-errors {}
 220       //              }
 221       //            }
 222       //          }
 223       //          input.btn.btn-success.btn-send(style="display: none;" type="submit" value="Sign in") {}
 224       //        }
 225
 226       //        p {
 227       //          'No account yet? '
 228       //          a(href="/my_account/sign_up/index.html") {'Sign up'}
 229       //        }
 230
 231       //        p {
 232       //          'Forgot password? '
 233       //          a(href="/my_account/password_reset/index.html") {'Password reset'}
 234       //        }
 235       //      }
 236       //      div.modal-footer {
 237       //        button.btn.btn-primary(type="submit" form="sign-in-form") {
 238       //          'Sign in'
 239       //        }
 240       //        button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
 241       //          'Cancel'
 242       //        }
 243       //      }
 244       //    }
 245       //  }
 246       //}
 247
 248       div#feedback-modal.modal.fade(role="dialog") {
 249         div.modal-dialog {
 250           div.modal-content {
 251             div.modal-header {
 252               span.h4.modal-title {'Give feedback'}
 253             }
 254             div.modal-body {
 255               p {
 256                 'Did you notice something not quite right, or just want to share your impression of this page?'
 257               }
 258               form#feedback-form(method="post" action="/feedback.html" role="form") {
 259                 div.row {
 260                   div.col-md-12 {
 261                     div.form-group {
 262                       label(for="feedback-form-message") {'Message *'}
 263                       textarea.form-control#feedback-form-message(name="message" placeholder="Please tell us your thoughts" rows="4" required="required" data-error="Please, leave us a message.") {}
 264                       div.help-block.with-errors {}
 265                     }
 266                   }
 267                 }
 268                 p {} // fix this later
 269                 div.row {
 270                   div.col-md-12 {
 271                     p.text-muted {
 272                       strong {'*'}
 273                       'These fields are required.'
 274                       //'Contact form template by '
 275                       //a(href="https://bootstrapious.com/p/how-to-build-a-working-bootstrap-feedback-form" target="_blank") {'Bootstrapious'}
 276                       //'.'
 277                     }
 278                   }
 279                 }
 280                 input.btn.btn-success.btn-send(style="display: none;" type="submit" value="Send message") {}
 281               }
 282             }
 283             div.modal-footer {
 284               button.btn.btn-primary(type="submit" form="feedback-form") {
 285                 'Submit'
 286               }
 287               button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
 288                 'Cancel'
 289               }
 290             }
 291           }
 292         }
 293       }
 294
 295       div#message-modal.modal.fade(role="dialog") {
 296         div.modal-dialog {
 297           div.modal-content {
 298             div.modal-header {
 299               span.h4.modal-title {'Message'}
 300             }
 301             div.modal-body {
 302               p#message-modal-message {}
 303             }
 304             div.modal-footer {
 305               button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
 306                 'Close'
 307               }
 308             }
 309           }
 310         }
 311       }
 312     },
 313     // scripts
 314     async _out => {
 315       //script(src="/js/sha256.js") {}
 316
 317       script {
 318         //function get_cookie(name) {
 319         //  let entries = document.cookie.split(';');
 320         //  for (let i = 0; i < entries.length; ++i) {
 321         //    let fields = entries[i].split('=');
 322         //    if (fields[0].trim() === name)
 323         //      return decodeURIComponent(fields[1]);
 324         //  }
 325         //  return undefined;
 326         //}
 327
 328         //// this function can be overridden in a further script
 329         //function sign_in_out(status) {
 330         //}
 331
 332         $(document).ready(
 333           () => {
 334             //// sign in form
 335             //$('#sign-in').click(
 336             //  () => {
 337             //    $('#sign-in-form-email').text('')
 338             //    $('#sign-in-form-password').text('')
 339             //    $('#sign-in-modal').modal('show')
 340             //    return false
 341             //  }
 342             //)
 343             //$('#sign-in-modal').on(
 344             //  'shown.bs.modal',
 345             //  () => {
 346             //    $('#sign-in-form-email').focus()
 347             //  }
 348             //)
 349             //// when sign in form is submitted, do not reload the page
 350             //$(document).on(
 351             //  'submit',
 352             //  '#sign-in-form',
 353             //  e => {
 354             //    e.preventDefault()
 355             //    $.ajax(
 356             //      {
 357             //        url: '/my_account/sign_in.json',
 358             //        type: 'POST',
 359             //        data: {
 360             //          email: $('#sign-in-form-email').val(),
 361             //          password: sha256(
 362             //            get_cookie('session_key') +
 363             //            $('#sign-in-form-password').val()
 364             //          ).toString('hex')
 365             //        },
 366             //        success: (data, textStatus, jqXHR) => {
 367             //          $('#sign-in-modal').modal('hide')
 368             //          switch (data.result) {
 369             //          case 1: // success
 370             //            $('#signed-in-status').text(data.signed_in_status)
 371             //            $('#sign-in').hide()
 372             //            $('#sign-out').show()
 373             //            sign_in_out(true) // notify navbar caller
 374             //            break
 375             //          case 2: // redirect
 376             //            location.href = data.redirect_href
 377             //            break
 378             //          }
 379             //          $('#message-modal-message').text(data.message)
 380             //          $('#message-modal').modal('show')
 381             //        },
 382             //        error: (jqXHR, textStatus, errorThrown) => {
 383             //          $('#sign-in-modal').modal('hide')
 384             //          $('#message-modal-message').text(errorThrown)
 385             //          $('#message-modal').modal('show')
 386             //        }
 387             //      }
 388             //    )
 389             //  }
 390             //)
 391
 392             //// sign out button
 393             //$('#sign-out').click(
 394             //  () => {
 395             //    $.ajax(
 396             //      {
 397             //        url: '/my_account/sign_out.json',
 398             //        type: 'GET',
 399             //        success: (data, textStatus, jqXHR) => {
 400             //          if (data.result) {
 401             //            $('#signed-in-status').text(data.signed_in_status)
 402             //            $('#sign-in').show()
 403             //            $('#sign-out').hide()
 404             //            sign_in_out(false) // notify navbar caller
 405             //          }
 406             //          $('#message-modal-message').text(data.message)
 407             //          $('#message-modal').modal('show')
 408             //        },
 409             //        error: (jqXHR, textStatus, errorThrown) => {
 410             //          $('#message-modal-message').text(errorThrown)
 411             //          $('#message-modal').modal('show')
 412             //        }
 413             //      }
 414             //    )
 415             //    return false
 416             //  }
 417             //)
 418
 419             // feedback form
 420             $('#give-feedback').click(
 421               () => {
 422                 $('#feedback-form-message').text('')
 423                 $('#feedback-modal').modal('show')
 424                 return false
 425               }
 426             )
 427             $('#feedback-modal').on(
 428               'shown.bs.modal',
 429               () => {
 430                 $('#feedback-form-message').focus()
 431               }
 432             )
 433             // when feedback form is submitted, do not reload the page
 434             $(document).on(
 435               'submit',
 436               '#feedback-form',
 437               e => {
 438                 e.preventDefault()
 439                 $.ajax(
 440                   {
 441                     url: '/feedback.html',
 442                     type: 'POST',
 443                     data: {
 444                       page: window.location.href,
 445                       message: $('#feedback-form-message').val()
 446                     },
 447                     success: (data, textStatus, jqXHR) => {
 448                       $('#feedback-modal').modal('hide')
 449                       $('#message-modal-message').text(data)
 450                       $('#message-modal').modal('show')
 451                     },
 452                     error: (jqXHR, textStatus, errorThrown) => {
 453                       $('#feedback-modal').modal('hide')
 454                       $('#message-modal-message').text(errorThrown)
 455                       $('#message-modal').modal('show')
 456                     }
 457                   }
 458                 )
 459               }
 460             )
 461           }
 462         )
 463       }
 464
 465       await scripts(_out)
 466     }
 467   )
 468 }