tailwindcss/docs/source/_assets/js/nav.js at underline-nav-example · barsag/tailwindcss · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
$.when($.ready).then(function() {
  $('#nav').on('click', 'a', function (event) {

    // Allow opening links in new tabs
    if (event.metaKey) {
      return
    }

    // Prevent following link
    event.preventDefault()

    // Get desired link
    var href = $(this).attr('href')

    // Make Ajax request to get the page content
    $.ajax({
      method: 'GET',
      url: href,
      cache: false,
      dataType: 'html',
    }).done(function(html) {

      // Parse the HTML response
      var title = $(html).filter('title').text()
      var nav = $(html).find('#nav').html()
      var content = $(html).find('#content').html()

      $('#sidebar').addClass('hidden')
      $('#sidebar-close').addClass('hidden')

      // Update the page
      $('title').text(title)
      $('#nav').html(nav)
      $('#content').html(content)

      // Scroll to the top of the page
      $(document).scrollTop(0)

      // Add page load to brower history
      window.history.pushState({
        'href': href,
        'title': title,
        'nav': $(html).find('#nav').html(),
        'content': $(html).find('#content').html()
      }, '', href)

      // Track on Google Analytics
      ga('set', 'page', href)
      ga('send', 'pageview')
    })
  })

  // Load page history (for back/forward nav)
  window.onpopstate = function(e) {
    if(e.state){

      // Update the page
      $('title').text(e.state.title)
      $('#nav').html(e.state.nav)
      $('#content').html(e.state.content)

      // Track on Google Analytics
      ga('set', 'page', e.state.href)
      ga('send', 'pageview')
    }
  }

  // Close sidebar (mobile)
  $('#sidebar-close').on('click', function () {
    $('#sidebar').addClass('hidden')
    $('#sidebar-close').addClass('hidden')
  })

  // Show sidebar (mobile)
  $('#sidebar-open').on('click', function () {
      $('#sidebar').removeClass('hidden')
      $('#sidebar-close').removeClass('hidden')
  })
})