Added: trunk/Websites/webkit.org/wp-content/plugins/web-inspector-pages.php (0 => 254488)
--- trunk/Websites/webkit.org/wp-content/plugins/web-inspector-pages.php (rev 0)
+++ trunk/Websites/webkit.org/wp-content/plugins/web-inspector-pages.php 2020-01-14 04:37:27 UTC (rev 254488)
@@ -0,0 +1,165 @@
+<?php
+/*
+Plugin Name: Web Inspector Pages
+Description: Adds Web Inspector reference page support to WordPress
+Version: 1.0
+Author: Jonathan Davis
+Author URI: http://webkit.org
+*/
+
+register_activation_hook(__FILE__, function () {
+ add_role('web_inspector_page_editor', __('Web Inspector Editor'), array(
+ 'read_web_inspector_page' => true,
+ 'read_web_inspector_pages' => true,
+ 'read_private_web_inspector_pages' => true,
+ 'edit_web_inspector_page' => true,
+ 'edit_web_inspector_pages' => true,
+ 'edit_others_web_inspector_pages' => true,
+ 'delete_web_inspector_page' => true,
+ 'delete_web_inspector_pages' => true,
+ 'publish_web_inspector_pages' => true,
+
+ // Standard Editor Capabilities
+ 'delete_others_pages' => true,
+ 'delete_others_posts' => true,
+ 'delete_pages' => true,
+ 'delete_posts' => true,
+ 'delete_private_pages' => true,
+ 'delete_private_posts' => true,
+ 'delete_published_pages' => true,
+ 'delete_published_posts' => true,
+ 'edit_others_pages' => true,
+ 'edit_others_posts' => true,
+ 'edit_pages' => true,
+ 'edit_posts' => true,
+ 'edit_private_pages' => true,
+ 'edit_private_posts' => true,
+ 'edit_published_pages' => true,
+ 'edit_published_posts' => true,
+ 'manage_categories' => true,
+ 'manage_links' => true,
+ 'moderate_comments' => true,
+ 'publish_pages' => true,
+ 'publish_posts' => true,
+ 'read' => true,
+ 'read_private_pages' => true,
+ 'read_private_posts' => true,
+ 'unfiltered_html' => true,
+ 'upload_files' => true
+ ));
+
+ $role = get_role('administrator');
+ $role->add_cap('read_web_inspector_page');
+ $role->add_cap('read_web_inspector_pages');
+ $role->add_cap('read_private_web_inspector_pages');
+ $role->add_cap('edit_web_inspector_page');
+ $role->add_cap('edit_web_inspector_pages');
+ $role->add_cap('edit_others_web_inspector_pages');
+ $role->add_cap('edit_private_web_inspector_pages');
+ $role->add_cap('edit_published_web_inspector_pages');
+ $role->add_cap('delete_web_inspector_page');
+ $role->add_cap('delete_web_inspector_pages');
+ $role->add_cap('delete_others_web_inspector_pages');
+ $role->add_cap('delete_private_web_inspector_pages');
+ $role->add_cap('delete_published_web_inspector_pages');
+ $role->add_cap('publish_web_inspector_pages');
+});
+
+add_action('init', function () {
+ register_post_type('web_inspector_page', array(
+ 'label' => 'Web Inspector Page',
+ 'description' => 'Reference pages for Web Inspector',
+ 'menu_icon' => 'dashicons-media-document',
+ 'labels' => array(
+ 'name' => 'Web Inspector Pages',
+ 'singular_name' => 'Web Inspector Page',
+ 'menu_name' => 'Web Inspector Pages',
+ 'name_admin_bar' => 'Web Inspector Page',
+ 'archives' => 'Web Inspector Page Archives',
+ 'attributes' => 'Web Inspector Page Attributes',
+ 'parent_item_colon' => 'Web Inspector Page:',
+ 'all_items' => 'All Pages',
+ 'add_new_item' => 'Add New Web Inspector Page',
+ 'add_new' => 'Add New',
+ 'new_item' => 'New Page',
+ 'edit_item' => 'Edit Page',
+ 'update_item' => 'Update Page',
+ 'view_item' => 'View Page',
+ 'view_items' => 'View Pages',
+ 'search_items' => 'Search Page',
+ 'not_found' => 'Not found',
+ 'not_found_in_trash' => 'Not found in Trash',
+ 'featured_image' => 'Featured Image',
+ 'set_featured_image' => 'Set featured image',
+ 'remove_featured_image' => 'Remove featured image',
+ 'use_featured_image' => 'Use as featured image',
+ 'insert_into_item' => 'Insert intopage',
+ 'uploaded_to_this_item' => 'Uploaded to this page',
+ 'items_list' => 'Pages list',
+ 'items_list_navigation' => 'Pages list navigation',
+ 'filter_items_list' => 'Filter pages list',
+ ),
+ 'supports' => array('title', 'editor', 'author', 'excerpt', 'thumbnail', 'revisions', 'custom-fields', 'page-attributes'),
+ 'taxonomies' => array('web_inspector_topics'),
+ 'hierarchical' => true,
+ 'public' => true,
+ 'show_ui' => true,
+ 'show_in_menu' => true,
+ 'menu_position' => 7,
+ 'show_in_admin_bar' => true,
+ 'show_in_nav_menus' => true,
+ 'can_export' => true,
+ 'has_archive' => true,
+ 'exclude_from_search' => false,
+ 'publicly_queryable' => true,
+ 'rewrite' => array(
+ 'slug' => 'web-inspector',
+ 'with_front' => false,
+ 'pages' => true,
+ 'feeds' => true,
+ ),
+ 'capabilities' => array(
+ 'edit_post' => 'edit_web_inspector_page',
+ 'read_post' => 'read_web_inspector_page',
+ 'delete_post' => 'delete_web_inspector_page',
+ 'edit_posts' => 'edit_web_inspector_pages',
+ 'edit_others_posts' => 'edit_others_web_inspector_pages',
+ 'publish_posts' => 'publish_web_inspector_pages',
+ 'read_private_posts' => 'read_private_web_inspector_pages',
+ ),
+ 'capability_type' => array('web_inspector_page','web_inspector_pages'),
+ 'map_meta_cap' => true,
+ 'show_in_rest' => true
+ ));
+
+ register_taxonomy('web_inspector_topics', array('web_inspector_page'), array(
+ 'labels' => array(
+ 'name' => _x('Web Inspector Topics', 'Taxonomy General Name'),
+ 'singular_name' => _x('Web Inspector Topic', 'Taxonomy Singular Name'),
+ 'menu_name' => __('Web Inspector Topics'),
+ 'all_items' => __('All Web Inspector Topics'),
+ 'parent_item' => __('Parent Web Inspector Topic'),
+ 'parent_item_colon' => __('Parent Web Inspector Topic:'),
+ 'new_item_name' => __('New Web Inspector Topic'),
+ 'add_new_item' => __('Add New Topic'),
+ 'edit_item' => __('Edit Topic'),
+ 'update_item' => __('Update Topic'),
+ 'view_item' => __('View Topic'),
+ 'separate_items_with_commas' => __('Separate topics with commas'),
+ 'add_or_remove_items' => __('Add or remove topics'),
+ 'choose_from_most_used' => __('Choose from the most used'),
+ 'popular_items' => __('Popular Topics'),
+ 'search_items' => __('Search Topics'),
+ 'not_found' => __('Not Found'),
+ 'no_terms' => __('No topics'),
+ 'items_list' => __('Topics list'),
+ 'items_list_navigation' => __('Topics list navigation'),
+ ),
+ 'hierarchical' => false,
+ 'public' => true,
+ 'show_ui' => true,
+ 'show_admin_column' => true,
+ 'show_in_nav_menus' => true,
+ 'show_tagcloud' => true
+ ));
+});
\ No newline at end of file
Added: trunk/Websites/webkit.org/wp-content/themes/webkit/archive-web_inspector_page.php (0 => 254488)
--- trunk/Websites/webkit.org/wp-content/themes/webkit/archive-web_inspector_page.php (rev 0)
+++ trunk/Websites/webkit.org/wp-content/themes/webkit/archive-web_inspector_page.php 2020-01-14 04:37:27 UTC (rev 254488)
@@ -0,0 +1,377 @@
+<?php
+ // Customized WP query for Web Inspector pages
+ $query = new WP_Query(array(
+ 'post_type' => 'web_inspector_page',
+ 'post_status' => 'publish',
+ 'order' => 'ASC',
+ 'orderby' => 'title',
+ 'posts_per_page' => 999
+ ));
+
+ // Get the Web Inspector Topics taxonomy terms
+ $terms = get_terms('web_inspector_topics', array(
+ 'hide_empty' => false
+ ));
+
+ get_header();
+?>
+ <style>
+ :root {
+ --feature-rule-color: hsl(0, 0%, 89.4%);
+ --topic-color: hsl(0, 0%, 60%);
+ }
+
+ @media(prefers-color-scheme:dark) {
+ :root {
+ --feature-rule-color: hsl(0, 0%, 20%);
+ --topic-color: hsl(0, 0%, 51%);
+ }
+ }
+
+ .reference-filters {
+ position: relative;
+ box-sizing: border-box;
+ width: 100vw;
+ left: 50%;
+ margin-bottom: 3rem;
+ transform: translate(-50vw, 0);
+ background-color: hsl(0, 0%, 0%);
+ background-color: var(--figure-mattewhite-background-color);
+ border: 1px solid hsl(0, 0%, 90.6%);
+ border-color: var(--article-border-color);
+ border-left: none;
+ border-right: none;
+ }
+
+ .reference-filters form {
+ position: relative;
+ top: 0;
+ }
+
+ .reference-filters .search-input {
+ width: 100%;
+ box-sizing: border-box;
+ margin-top: 0rem;
+ margin-bottom: 0rem;
+ padding: 1rem;
+ padding-left: 3rem;
+ padding-right: 8.5rem;
+ background-repeat: no-repeat;
+ background-position-x: 0.5rem;
+ background-position-y: 1rem;
+ background-size: 2rem;
+ border-color: transparent;
+ font-size: 2rem;
+ }
+
+ .reference-filters .filters-toggle-button {
+ position: absolute;
+ right: 3rem;
+ top: 1rem;
+ padding-right: 2.5rem;
+ background-repeat: no-repeat;
+ background-size: 2rem;
+ background-position: right;
+ background-filter: lightness(2);
+ border: none;
+ color: hsl(240, 2.3%, 56.7%);
+ }
+
+ .reference-filters .filters-toggle-button:hover {
+ filter: brightness(0);
+ }
+
+ .reference-filters li {
+ display: inline-block;
+ }
+
+ .reference-filters label {
+ display: table-cell;
+ float: right;
+ padding: 0.5rem 1rem;
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 3px;
+ cursor: pointer;
+ font-size: 1.6rem;
+ line-height: 1;
+ }
+
+ .topic-filters label {
+ margin-left: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .reference-filters label {
+ float: none;
+ display: inline-block;
+ }
+
+ .topic-filters {
+ display: none;
+ list-style: none;
+ margin-top: 1rem;
+ margin-bottom: 0.5rem;
+ text-align: center;
+ }
+
+ #reference-filters.opened {
+ margin-top: 1.5rem;
+ }
+
+ #reference-filters.opened .topic-filters {
+ display: block;
+ }
+ #reference-filters.opened .search-input {
+ border-color: hsl(0, 0%, 83.9%);
+ border-color: var(--input-border-color);
+ }
+
+ .filter-toggle:checked + .filter-topic {
+ color: hsl(240, 1.3%, 84.5%);
+ color: var(--text-color);
+ }
+
+ .reference-filters label > input {
+ position: relative;
+ top: -1px;
+ }
+
+ .filter-topic {
+ color: hsl(0, 0%, 60%);
+ color: var(--topic-color);
+ border-color: hsl(0, 0%, 60%);
+ border-color: var(--topic-color);
+ }
+
+ .filter-topic {
+ border-color: hsl(0, 0%, 60%);
+ border-color: var(--topic-color)
+ }
+
+ .filter-toggle:checked + .filter-topic {
+ background-color: hsl(0, 0%, 60%);
+ background-color: var(--link-color);
+ }
+
+ #reference-list {
+ margin-bottom: 3rem;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ box-sizing: border-box;
+ }
+
+ #reference-list div {
+ position: relative;
+ width: 48%;
+ margin-top: -1px;
+ padding: 0.5rem;
+ break-inside: avoid;
+ border-color: transparent;
+ border-width: 1px;
+ border-style: solid;
+ border-top-color: hsl(0, 0%, 89.4%);
+ border-top-color: var(--feature-rule-color);
+ border-bottom-color: hsl(0, 0%, 89.4%);
+ border-bottom-color: var(--feature-rule-color);
+ line-height: 1.618;
+ transition: background-color 0.3s ease-out;
+ }
+
+ #reference-list .title {
+ display: block;
+ font-size: 2.2rem;
+ font-weight: bold;
+ }
+
+ #reference-list li {
+ display: inline;
+ color: hsl(240, 2.3%, 56.7%);
+ color: var(--text-color-coolgray);
+ font-size: 1.4rem;
+ text-align: left;
+ }
+
+ #reference-list li:not(:first-child):before {
+ content: ', ';
+ }
+
+ #reference-list .hidden {
+ display: none;
+ }
+
+ #reference-list + p {
+ margin-bottom: 3rem;
+ }
+
+ @media(prefers-color-scheme:dark) {
+ .search-input:hover,
+ .search-input:focus,
+ .reference-filters .filters-toggle-button:hover {
+ filter: brightness(2);
+ }
+ }
+
+ @media only screen and (max-width: 600px) {
+ #reference-list div {
+ width: 100%;
+ }
+ #reference-list div:nth-child(2) {
+ border-top: none;
+ }
+ }
+ </style>
+
+ <h1>Web Inspector Reference</h1>
+
+ <section class="reference-filters">
+ <form id="reference-filters" class="page-width">
+ <input type="text" id="search" class="search-input" placeholder="Search Web Inspector Reference…" title="Filter the reference articles." required><label class="filters-toggle-button">Filters</label>
+ <ul id="topic-filters" class="topic-filters">
+ <?php foreach($terms as $term): ?>
+ <li><label class="filter-topic <?php echo esc_html($term->slug); ?>" for="" echo esc_html($term->slug); ?>"><input type="checkbox" value="<?php echo esc_html($term->name); ?>" id="toggle-<?php echo esc_html($term->slug); ?>" class="filter-toggle"> <?php echo esc_html($term->name); ?></label></li>
+ <?php endforeach ;?>
+ </ul>
+ </form>
+ </section>
+
+ <?php if (have_posts()): ?>
+ <section id="reference-list">
+ <?php while ($query->have_posts()) : $query->the_post();
+ $postterms = get_the_terms(get_the_ID(), 'web_inspector_topics'); ?>
+ <div class="reference"><a href="" the_permalink(); ?>" class="title"><?php the_title(); ?></a>
+ <ul><?php foreach ($postterms as $postterm) echo '<li class="topics">' . esc_html($postterm->name) . '</li>'; ?></div>
+ <?php endwhile; ?>
+ </section>
+ <p>Can't find something? Contact <a href="" on Twitter and let the team know.</p>
+ <?php endif; ?>
+
+ <script>
+ let filtersForm = document.getElementById('reference-filters');
+ let topicFiltersList = document.getElementById('topic-filters');
+ let filtersToggleButton = document.getElementsByClassName('filters-toggle-button')[0];
+ let inputField = document.getElementById('search');
+ let topicFilterToggles = topicFiltersList.getElementsByClassName('filter-toggle');
+ let list = document.getElementById('reference-list');
+ let referenceList = list.getElementsByClassName('reference');
+
+ function filterReferenceList (e) {
+ let searchTerm = inputField.value.trim().toLowerCase();
+ let filteredTopics = topicFiltersList.querySelectorAll('.filter-toggle:checked');
+
+ if (searchTerm.length === 0 && filteredTopics.length === 0) {
+ for (const ref of referenceList)
+ ref.classList.remove('hidden');
+ return;
+ }
+
+ for (const ref of referenceList) {
+ ref.classList.add('hidden');
+ for (const filteredTopic of filteredTopics) {
+ if (ref.getElementsByTagName('ul')[0].textContent.includes(filteredTopic.value)) {
+ ref.classList.remove('hidden');
+ break;
+ }
+ }
+
+ if (filteredTopics.length > 0 && ref.classList.contains('hidden'))
+ continue;
+
+ if (searchTerm.length === 0)
+ continue;
+
+ referenceText = ref.getElementsByClassName('title')[0].textContent + ref.getElementsByTagName('ul')[0].textContent;
+ if (referenceText.toLowerCase().includes(searchTerm))
+ ref.classList.remove('hidden');
+ else
+ ref.classList.add('hidden');
+ }
+ let activeTopics = [];
+ for (const checkbox of filteredTopics.values())
+ activeTopics.push(checkbox.value);
+ updateURL(searchTerm, activeTopics);
+ }
+
+ function searchTermFromURL() {
+ let search = window.location.search;
+ let searchRegExp = /.*search=([^&]+)/;
+
+ let result;
+ if (result = window.location.href.match(searchRegExp))
+ return decodeURIComponent(result[1]);
+
+ return '';
+ }
+
+ function topicsFromURL() {
+ let search = window.location.search;
+ let topicRegExp = /\#.*topics=([^&]+)/;
+
+ let result;
+ if (result = window.location.href.match(topicRegExp))
+ return result[1].split(',');
+
+ return [];
+ }
+
+ function updateURL(searchTerm, activeTopicFilters) {
+ let searchString = '';
+
+ function appendDelimiter() {
+ searchString += searchString.length ? '&' : '?';
+ }
+
+ if (searchTerm.length > 0) {
+ appendDelimiter();
+ searchString += 'search=' + encodeURIComponent(searchTerm);
+ }
+
+ if (activeTopicFilters.length > 0) {
+ appendDelimiter();
+ searchString += 'topics=' + activeTopicFilters.join(',');
+ }
+
+ if (searchString.length) {
+ let current = window.location.href;
+ window.location.href = "" '') + '#' + searchString;
+ }
+ }
+
+ function toggleSearchInputPrompt(changed) {
+ if (changed.matches)
+ inputField.placeholder = 'Search…';
+ else
+ inputField.placeholder = 'Search Web Inspector Reference…';
+ }
+
+ (function() {
+ filtersToggleButton.addEventListener('click', function(e) {
+ filtersForm.classList.toggle('opened');
+ });
+
+ let placeholderMediaQuery = window.matchMedia('(max-width: 600px)');
+ placeholderMediaQuery.addListener(toggleSearchInputPrompt);
+ toggleSearchInputPrompt(placeholderMediaQuery);
+
+ inputField.addEventListener('input', filterReferenceList);
+ for (const toggle of topicFilterToggles)
+ toggle.addEventListener('change', filterReferenceList);
+
+ let searchTerm = searchTermFromURL();
+ let topicFilters = topicsFromURL();
+ for (const toggle of topicFilterToggles) {
+ if (topicFilters.indexOf(toggle.value) !== -1) {
+ filtersForm.classList.add('opened');
+ toggle.checked = true;
+ }
+ }
+
+ if (searchTerm.length) {
+ inputField.value = searchTerm;
+ inputField.placeholder = '';
+ inputField.dispatchEvent(new InputEvent('input'));
+ }
+ }());
+ </script>
+<?php get_footer(); ?>
\ No newline at end of file
