Added a dark mode color scheme.
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / team.php
1 <?php
2 /**
3  * Template Name: Team Page
4  **/
5 ?>
6 <?php get_header(); ?>
7 <style>
8 :root {
9     --contributor-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 0.1);
10     --expertise-shadow: 0px 10px 10px 0px hsla(0, 0%, 0%, 0.1);
11     --hover-text-color: hsl(0, 0%, 0%);
12 }
13
14 @media only screen and (prefers-color-scheme:dark) {
15     :root {
16         --contributor-shadow: 0px 0px 10px 0px hsla(0, 0%, 100%, 0.1);
17         --expertise-shadow: 0px 5px 10px 0px hsla(0, 0%, 100%, 0.1);
18         --hover-text-color: hsl(0, 0%, 100%);
19     }
20 }
21 article ul {
22     list-style: none;
23     padding-left: 0;
24     margin-left: -1rem;
25     margin-top: 0;
26 }
27
28 article ul > li {
29     position: relative;
30     display: inline-block;
31     vertical-align: top;
32     width: 30%;
33     padding: 1rem;
34     margin-bottom: 1rem;
35     border: 1px solid transparent;
36     color: hsl(0, 0%, 33.3%);
37     color: var(--text-color-medium);
38 }
39
40 li span,
41 li em {
42     font-size: 1.3rem;
43 }
44
45 li em {
46     display: block;
47     line-height: 2rem;
48 }
49
50 .expertise {
51     background-color: hsl(0, 0%, 100%);
52     background-color: var(--button-background-color);
53     box-shadow: 0px 10px 10px 0px hsla(0, 0%, 0%, 0.1);
54     box-shadow: var(--expertise-shadow);
55
56     position: absolute;
57     font-size: 1.6rem;
58     line-height: 2rem;
59     margin-left: -1px;
60     width: calc(100.3% + 2px);
61     box-sizing: border-box;
62     display: none;
63     z-index: 100;
64     color: hsl(0, 0%, 0%);
65     color: var(--hover-text-color);
66 }
67
68 .bodycopy > ul > li:hover {
69     background-color: hsl(0, 0%, 100%);
70     background-color: var(--button-background-color);
71     box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 0.1);
72     box-shadow: var(--contributor-shadow);
73     filter: none;
74     color: hsl(0, 0%, 0%);
75     color: var(--hover-text-color);
76 }
77
78 .bodycopy ul li:hover .expertise {
79     filter: none;
80     display: block;
81 }
82
83 @media only screen and (max-width: 675px) {
84
85     article ul > li {
86         width: 100%;
87     }
88
89 }
90
91 </style>
92         <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
93
94         <article class="page" id="post-<?php the_ID(); ?>">
95                         <h1><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>
96
97                         <div id="team" class="bodycopy">
98                 <p><a href="#reviewers">Reviewers</a> | <a href="#committers">Committers</a> | <a href="#contributors">Contributors</a></p>
99
100                 <h2><a name="reviewers"></a>Reviewers</h2>
101                 <ul id="reviewers"></ul>
102
103                 <h2><a name="committers"></a>Committers</h2>
104                 <ul id="committers"></ul>
105
106                 <h2><a name="contributors"></a>Contributors</h2>
107                 <ul id="contributors"></ul>
108                         </div>
109         </article>
110
111         <?php //comments_template(); ?>
112
113         <?php endwhile; else: ?>
114
115                 <p>No posts.</p>
116
117         <?php endif; ?>
118
119 <script>
120
121 var svnTrunkUrl = 'https://svn.webkit.org/repository/webkit/trunk/';
122 var domainAffiliations = {
123     'apple.com': 'Apple',
124     'adobe.com': 'Adobe',
125     'basyskom.com': 'basysKom GmbH',
126     'cisco.com': 'Cisco Systems',
127     'collabora.co.uk': 'Collabora',
128     'company100.com': 'Company100',
129     'google.com': 'Google',
130     'igalia.com': 'Igalia',
131     'intel.com' : 'Intel',
132     'lge.com' : 'LG Electronics',
133     'motorola.com': 'Motorola Mobility',
134     'navercorp.com' : 'Naver',
135     'nokia.com': 'Nokia',
136     'openbossa.org': 'INdT / Nokia',
137     'profusion.mobi': 'ProFUSION',
138     'rim.com': 'Research In Motion',
139     'samsung.com': 'Samsung Electronics',
140     'sencha.com': 'Sencha',
141     'sisa.samsung.com': 'Samsung Electronics',
142     'sony.com': 'Sony',
143     'tesla.com': 'Tesla',
144     'torchmobile.com.cn': 'Torch Mobile (Beijing) Co. Ltd.',
145     'digia.com': 'Digia',
146     'partner.samsung.com': 'Samsung Electronics',
147
148     // Universities
149     'inf.u-szeged.hu': 'University of Szeged',
150     'stud.u-szeged.hu': 'University of Szeged',
151
152     // Open source communities
153     'chromium.org': 'Chromium',
154     'codeaurora.org': 'Code Aurora Forum',
155     'gnome.org': 'GNOME',
156     'kde.org': 'KDE'
157 };
158
159 function parseContributorsJSON(text) {
160     var contributorsJSON = JSON.parse(text);
161     var contributors = [];
162
163     for (var contributor in contributorsJSON) {
164         var data = contributorsJSON[contributor];
165         if (data.class == "bot")
166             continue;
167         contributors.push({
168             name: contributor,
169             kind: data.status ? data.status : 'contributor',
170             emails: data.emails,
171             nicks: data.nicks,
172             expertise: data.expertise
173         });
174     }
175     return contributors;
176 }
177
178 function formatAffiliation(contributor) {
179     if (contributor.affiliation)
180         return contributor.affiliation;
181
182     if (!contributor.emails || !contributor.emails.length)
183         return null;
184
185     var affiliations = [];
186     for (var domain in domainAffiliations) {
187         for (var i = 0; i < contributor.emails.length; i++) {
188             if (contributor.emails[i].indexOf('@' + domain) > 0 && affiliations.indexOf(domainAffiliations[domain]) < 0)
189                 affiliations.push(domainAffiliations[domain]);
190         }
191     }
192     return affiliations.join(' / ');
193 }
194
195 function addText(container, text) { container.appendChild(document.createTextNode(text)); }
196
197 function addWrappedText(container, tagName, attributes, text) {
198     var element = document.createElement(tagName);
199     for (var name in attributes)
200         element.setAttribute(name, attributes[name]);
201     addText(element, text);
202     container.appendChild(element);
203 }
204
205 function populateContributorListItem(listItem, contributor) {
206     addWrappedText(listItem, 'strong', {'class': 'name'}, contributor.name);
207     if (contributor.nicks) {
208         addWrappedText(listItem, 'span', {'class': 'nicks'}, ' (' + contributor.nicks.join(', ') + ')');
209     }
210
211     var affiliation = formatAffiliation(contributor);
212     if (affiliation) {
213         addText(listItem, ' ');
214         addWrappedText(listItem, 'em', {'class': 'affiliation'}, affiliation);
215     }
216
217     if (contributor.expertise) {
218         var expertiseList = document.createElement('ul');
219         addWrappedText(expertiseList, 'li', {'class': 'expertise'}, contributor.expertise);
220         listItem.appendChild(expertiseList);
221     }
222 }
223
224 function populateContributorList(contributors, kind) {
225     var contributorsOfKind = contributors.filter(function(contributor) { return contributor.kind == kind; });
226     var listElement = document.getElementById(kind + 's');
227     for (var i = 0; i < contributorsOfKind.length; i++) {
228         var listItem = document.createElement('li');
229         listElement.appendChild(listItem);
230         populateContributorListItem(listItem, contributorsOfKind[i]);
231     }
232 }
233
234 function nicksInListItem(listItem) {
235     var nicksContainer = listItem.querySelector('.nicks');
236     if (!nicksContainer || !nicksContainer.textContent)
237         return null;
238     return nicksContainer.textContent.split(/,\s*/);
239 }
240
241 function findListChildForContributor(contributor) {
242     var listChildren = document.getElementsByTagName('li');
243     for (var i = 0; i < listChildren.length; i++) {
244         var nameContainer = listChildren[i].querySelector('.name');
245         if (nameContainer && nameContainer.textContent.toLowerCase().indexOf(contributor.name.toLowerCase()) >= 0)
246             return listChildren[i];
247         var nicksInContainer = nicksInListItem(listChildren[i]);
248         if (nicksInContainer && contributor.nicks) {
249             for (var j = 0; j < contributor.nicks.length; j++) {
250                 if (nicksInContainer.indexOf(contributor.nicks[j]) >= 0)
251                     return listChildren[i];
252             }
253         }
254     }
255     return null;
256 }
257
258 var xhr = new XMLHttpRequest();
259 xhr.onload = function () {
260     if (this.status !== 200)
261         return this.onerror();
262     var contributors = parseContributorsJSON(this.responseText);
263
264     populateContributorList(contributors, 'reviewer');
265     populateContributorList(contributors, 'committer');
266     populateContributorList(contributors, 'contributor');
267 };
268 xhr.onerror = function () { document.getElementById('team').textContent = 'There was an issue loading data for the WebKit Team. not obtain contributors.json'; };
269 xhr.open('GET', svnTrunkUrl + 'Tools/Scripts/webkitpy/common/config/contributors.json');
270 xhr.send();
271
272 </script>
273
274 <?php get_footer(); ?>