github-primer/_loader.html at master · HTMLElement/github-primer · 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<body>
  <script type="text/javascript">

    var githubPrimer = {};

    (function() {

      function _getOwnerDocumentTemplates(ownerDocument) {
        return Array.from(ownerDocument.getElementsByTagName("template"));
      }

      function _cloneTemplates(templates) {
        return templates.map((template) => {
            return document.importNode(template.content, true);
          });
      }

      function _applyTemplates(templates, shadowRoot) {

        _cloneTemplates(templates).forEach((content) => {
          shadowRoot.appendChild(content);
        });
      }

      githubPrimer['registerElement'] = (name, options) => {

        if (!options) {
          options = {};
        }

        if (options['prototype'] !== undefined) {
          prototypeElement = options['prototype'];
        } else {
          prototypeElement = HTMLDivElement;
        }

        var currentScript = document._currentScript || document.currentScript
        var ownerDocument = currentScript.ownerDocument;
        var ownerDocumentTemplates = _getOwnerDocumentTemplates(ownerDocument);
        var onCreate = function() {

          var shadowRoot;

          if (options['create'] !== undefined) {
            shadowRoot = options.create.call(this, ownerDocument, document);
          }

          if (shadowRoot === undefined) {
            shadowRoot = this.attachShadow({ mode: 'open' });
          }

          if (shadowRoot !== null) {
            // skipped shadowRoots are null
            setTimeout(() => {
              _applyTemplates(ownerDocumentTemplates, shadowRoot);
            }, 0);
          }

          if (options['postCreate'] !== undefined) {
            setTimeout(() => {
              var element = (shadowRoot !== null) ? shadowRoot : this;
              options.postCreate.call(this, element, ownerDocument, document);
            }, 0);
          }

        }

        class Element extends HTMLElement {
          constructor() {
            super();
            setTimeout(() => {
              onCreate.call(this);
            }, 0);
          }
        }

        window.customElements.define(name, Element);

      };

      githubPrimer['propagateHostStyles'] = (styles, selector) => {
        var i, j, n, m, curr, rules;
        var selectorPattern = new RegExp("^" + selector);
        var newRules = [];
        for (i=0, n=styles.length; i<n; i++) {
          rules = styles[i].cssRules
          for (j=0, m=rules.length; j<m; j++) {
            curr = rules[j];
            if (curr.selectorText === selector) {
              newRules.push(curr.cssText.replace(selectorPattern, ":host"))
            }
          }
          newRules.forEach((ruleText) => styles[i].insertRule(ruleText));
        }
      }

    })();

  </script>
</body>