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