pointer-events/index2.html at main · time2hack/pointer-events · 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
80
<!DOCTYPE html>
<html>
  <head>
    <title>Pointer media queries in JS</title>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/spectre.css/dist/spectre.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css"
    />
    <link rel="stylesheet" href="./assets/style.css" />
  </head>

  <body>
    <div class="bg-dark">
      <header class="navbar py-2 container grid-lg">
        <section class="navbar-section">
          <a href="/" class="navbar-brand mr-2 text-light">
            <h1 class="h2 my-0">Fancy Fancy</h1>
          </a>
          <a href="#products" data-prefetch class="btn btn-link text-light">Products</a>
          <a href="#services" data-prefetch class="btn btn-link text-light">Services</a>
        </section>
        <section class="navbar-center">
          <!-- centered logo or brand -->
        </section>
        <section class="navbar-section">
          <a href="https://twitter.com/heypankaj_" class="btn btn-link text-light">Twitter</a>
          <a href="https://twitter.com/pankajpatel" class="btn btn-link text-light">GitHub</a>
        </section>
      </header>
    </div>
    <div id="main">
      loading...
    </div>

    <div class="container grid-lg">
      <div class="my-2"></div>
      <a href="./index.html" class="btn btn-secondary">No pointer events</a>
      <div class="my-2"></div>
    </div>

    <script src="./assets/script.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {
        const active = getActiveRoute();
        const main = document.querySelector('#main');

        fetchTemplateForRoute(routes[active]).then(res => {
          main.innerHTML = res;
        });

        const pointerFineSupported = window.matchMedia('(pointer: fine)').matches;

        if (pointerFineSupported) {
          document.querySelectorAll('[data-prefetch]').forEach(el => {
            el.addEventListener('mouseenter', (e) => {
              const routeName = el.getAttribute('href').replace('#', '');
              !routes[routeName].content && fetchTemplateForRoute(routes[routeName]);
            })
          })
        }

        window.addEventListener("hashchange", () => {
          if (routes[getActiveRoute()].content) {
            main.innerHTML = routes[getActiveRoute()].content;
            return;
          }
          fetchTemplateForRoute(routes[getActiveRoute()]).then(res => {
            main.innerHTML = res;
          });
        }, false);

      })
    </script>
  </body>
</html>