96be5410081d148dca2a9571024069a16c40e912
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / scripts / global.js
1 document.addEventListener('DOMContentLoaded', function () {
2     var openClass = ' open-menu',
3         menuClass = 'menu-item-has-children',
4         menus = document.querySelectorAll('#site-nav > div > .menu > .menu-item'),
5         menuLinks = document.querySelectorAll('#site-nav > div > .menu > .menu-item > a'),
6         menuitems = document.querySelectorAll('#site-nav .menu-item-has-children .menu-item > a');
7
8     function findParentMenu (element, className) {
9         while ( (element = element.parentElement) && ! element.classList.contains(className) );
10         return element;
11     }
12
13     for (var i = 0; i < menuLinks.length; ++i) {
14         menuLinks[i].addEventListener('focus', function (e) {
15             var openMenus = findParentMenu(e.target, 'menu').getElementsByClassName(openClass.trim());
16             for (var m = 0; m < openMenus.length; ++m) {
17                 openMenus[m].className = openMenus[m].className.replace(openClass, "");
18             }
19         });
20     }
21
22     for (var i = 0; i < menuitems.length; ++i) {
23         menuitems[i].addEventListener('focus', function (e) {
24             var targetMenu = findParentMenu(e.target, menuClass),
25                 targetMenuClass = null;
26
27             if ( targetMenu != undefined )
28                 targetMenuClass = targetMenu.className;
29
30             for (var m = 0; m < menus.length; ++m) {
31                 menus[m].className.replace(openClass, "");
32                 if (menus[m] == targetMenu) {
33                     if (targetMenuClass.indexOf(openClass) == -1) {
34                         targetMenu.className += openClass;
35                     }
36                 } else {
37                     menus[m].className = menus[m].className.replace(openClass, "");
38                 }
39             }
40         });
41     }
42
43     var latest = [], updating = false;
44     function inView(element) {
45         var box = element.getBoundingClientRect();
46         return ( (box.top >= 0 && box.left >= 0 && box.top) <= (window.innerHeight || document.documentElement.clientHeight));
47     }
48
49     function stageImage(element, src) {
50         element.style.backgroundImage = 'url(' + src + ')';
51         if (!element.parentElement.classList.contains('loaded'))
52             element.parentElement.classList.add('loaded');
53     }
54
55     function loadImage(element) {
56         var src = element.getAttribute('data-url');
57
58         if (sessionStorage.getItem(src)) {
59             setTimeout(function () { stageImage(element, src); }, 1);
60         } else {
61             var img = new Image();
62             img.src = src;
63             img.onload = function() {
64                 stageImage(element,src);
65
66                 try {
67                     sessionStorage.setItem(src, true);
68                 } catch (error) {
69                     return false; // private browsing
70                 }
71                 img = undefined;
72             }
73         }
74
75     }
76
77     function onMovement() {
78         if (!updating)
79             requestAnimationFrame(updateImages);
80         updating = true;
81     }
82
83     function updateImages() {
84         updating = false;
85
86         for (var i = 0; i < imgs.length; i++) {
87             if ( inView(imgs[i]) )
88                 loadImage(imgs[i]);
89         }
90
91     }
92
93     function enableScrollableTables () {
94         var tables = document.querySelectorAll('.bodycopy > table');
95         var tableCount = tables.length;
96
97         for (var i = 0; i < tableCount; i++) {
98             var scrollableDiv = document.createElement('div');
99             var paddingDiv = document.createElement('div');
100
101             scrollableDiv.classList.add('scrollable');
102             paddingDiv.classList.add('scrollable-padding');
103
104             scrollableDiv.appendChild(paddingDiv);
105             tables[i].parentNode.insertBefore(scrollableDiv, tables[i]);
106
107             paddingDiv.appendChild(tables[i]);
108         }
109     }
110
111     var imgs = document.querySelectorAll('div[data-url]');
112     document.addEventListener('scroll', onMovement);
113     document.addEventListener('resize', onMovement);
114
115     updateImages();
116     enableScrollableTables();
117
118 });