<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[31765] trunk/src/wp-admin: PressThis: simplify and restyle the categories drop-down, remove the checkboxes and use JS to get the selected categories on submitting the form.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/31765">31765</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/31765","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>azaozz</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-03-13 16:56:45 +0000 (Fri, 13 Mar 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>PressThis: simplify and restyle the categories drop-down, remove the checkboxes and use JS to get the selected categories on submitting the form.
Part prop: Michael-Arestad. Fixes <a href="https://core.trac.wordpress.org/ticket/31443">#31443</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsspressthiscss">trunk/src/wp-admin/css/press-this.css</a></li>
<li><a href="#trunksrcwpadminincludesclasswppressthisphp">trunk/src/wp-admin/includes/class-wp-press-this.php</a></li>
<li><a href="#trunksrcwpadminincludestemplatephp">trunk/src/wp-admin/includes/template.php</a></li>
<li><a href="#trunksrcwpadminjspressthisjs">trunk/src/wp-admin/js/press-this.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsspressthiscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/press-this.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/press-this.css 2015-03-12 23:29:21 UTC (rev 31764)
+++ trunk/src/wp-admin/css/press-this.css 2015-03-13 16:56:45 UTC (rev 31765)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -963,34 +963,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> list-style: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select input {
- clear: none;
- position: absolute;
- top: 0;
- left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.category {
+ position: relative;
</ins><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 0;
- width: 100%;
- height: 100%;
- outline: 0;
- padding: 0;
- border: 0;
- -webkit-border-radius: 0;
- border-radius: 0;
- text-align: center;
- vertical-align: middle;
- -webkit-appearance: none;
- appearance: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding: 13px 16px 14px 16px;
</ins><span class="cx" style="display: block; padding: 0 10px"> cursor: pointer;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #fff;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select input:checked {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.category:focus,
+.category.selected:focus {
+ outline: 0;
+ background: #2ea2cc;
+ color: #fff;
+}
+
+.category.selected {
</ins><span class="cx" style="display: block; padding: 0 10px"> -webkit-box-shadow: inset 6px 0 0 #2ea2cc;
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: inset 6px 0 0 #2ea2cc;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background: rgba(46, 162, 204, 0.1);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: #E9F5F9;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select input:checked:after {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.category.selected:after {
</ins><span class="cx" style="display: block; padding: 0 10px"> display: inline-block;
</span><span class="cx" style="display: block; padding: 0 10px"> content: "\f147";
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1014,41 +1008,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> -moz-osx-font-smoothing: grayscale;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select input:focus {
- -webkit-box-shadow: inset 6px 0 0 #2ea2cc;
- box-shadow: inset 6px 0 0 #2ea2cc;
- background: rgba(46, 162, 204, 0.05);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.category.selected:focus:after {
+ color: #fff;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select label {
- position: relative;
- display: block;
- padding: 13px 16px 14px 16px;
- cursor: pointer;
- background: #fff;
-}
-
-.categories-select ul label {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.categories-select ul .category {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 24px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select ul ul label {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.categories-select ul ul .category {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 32px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select ul ul ul label {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.categories-select ul ul ul .category {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 40px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select ul ul ul ul label {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.categories-select ul ul ul ul .category {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 48px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select ul ul ul ul ul label {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.categories-select ul ul ul ul ul .category {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 56px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.categories-select ul ul ul ul ul ul label {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.categories-select ul ul ul ul ul ul .category {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 64px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1060,27 +1044,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.lt-ie9 .categories-select input {
- top: 50%;
- right: 10px;
- left: auto;
- margin-top: -8px;
- width: 16px;
- height: 16px;
-}
-
-/* TODO Reformats checkbox on Firefox until we remove checkbox in merge */
-@-moz-document url-prefix() {
- .categories-select input {
- top: 50%;
- right: 10px;
- left: auto;
- margin-top: -8px;
- width: 16px;
- height: 16px;
- }
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> /* Category search */
</span><span class="cx" style="display: block; padding: 0 10px"> .categories-search-wrapper {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1831,6 +1794,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Keeps background the full height of the screen, but only visually. Clicks go through. */
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
</span><span class="cx" style="display: block; padding: 0 10px"> box-shadow: 5001px 5000px 0 5000px #fff, 5000px 5000px 0 5000px #e5e5e5;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ outline: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .options-panel-back {
</span></span></pre></div>
<a id="trunksrcwpadminincludesclasswppressthisphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/class-wp-press-this.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/class-wp-press-this.php 2015-03-12 23:29:21 UTC (rev 31764)
+++ trunk/src/wp-admin/includes/class-wp-press-this.php 2015-03-13 16:56:45 UTC (rev 31765)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -794,7 +794,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </label>
</span><span class="cx" style="display: block; padding: 0 10px"> </div>
</span><span class="cx" style="display: block; padding: 0 10px"> <ul class="categories-select" aria-label="<?php esc_attr_e( 'Categories' ); ?>">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php wp_terms_checklist( $post->ID, array( 'taxonomy' => 'category' ) ); ?>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php wp_terms_checklist( $post->ID, array( 'taxonomy' => 'category', 'list_only' => true ) ); ?>
</ins><span class="cx" style="display: block; padding: 0 10px"> </ul>
</span><span class="cx" style="display: block; padding: 0 10px"> <?php
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpadminincludestemplatephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/includes/template.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/includes/template.php 2015-03-12 23:29:21 UTC (rev 31764)
+++ trunk/src/wp-admin/includes/template.php 2015-03-13 16:56:45 UTC (rev 31765)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -82,17 +82,33 @@
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> $name = 'tax_input[' . $taxonomy . ']';
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
</ins><span class="cx" style="display: block; padding: 0 10px"> $args['popular_cats'] = empty( $args['popular_cats'] ) ? array() : $args['popular_cats'];
</span><span class="cx" style="display: block; padding: 0 10px"> $class = in_array( $category->term_id, $args['popular_cats'] ) ? ' class="popular-category"' : '';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $args['selected_cats'] = empty( $args['selected_cats'] ) ? array() : $args['selected_cats'];
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /** This filter is documented in wp-includes/category-template.php */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $output .= "\n<li id='{$taxonomy}-{$category->term_id}'$class>" .
- '<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="'.$name.'[]" id="in-'.$taxonomy.'-' . $category->term_id . '"' .
- checked( in_array( $category->term_id, $args['selected_cats'] ), true, false ) .
- disabled( empty( $args['disabled'] ), false, false ) . ' /> ' .
- esc_html( apply_filters( 'the_category', $category->name ) ) . '</label>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( ! empty( $args['list_only'] ) ) {
+ $aria_cheched = 'false';
+ $inner_class = 'category';
+
+ if ( in_array( $category->term_id, $args['selected_cats'] ) ) {
+ $inner_class .= ' selected';
+ $aria_cheched = 'true';
+ }
+
+ $output .= "\n" . '<li' . $class . '>' .
+ '<div class="' . $inner_class . '" data-term-id=' . $category->term_id .
+ ' tabindex="0" role="checkbox" aria-checked="' . $aria_cheched . '">' .
+ esc_html( apply_filters( 'the_category', $category->name ) ) . '</div>';
+ } else {
+ $output .= "\n<li id='{$taxonomy}-{$category->term_id}'$class>" .
+ '<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="'.$name.'[]" id="in-'.$taxonomy.'-' . $category->term_id . '"' .
+ checked( in_array( $category->term_id, $args['selected_cats'] ), true, false ) .
+ disabled( empty( $args['disabled'] ), false, false ) . ' /> ' .
+ esc_html( apply_filters( 'the_category', $category->name ) ) . '</label>';
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -203,6 +219,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $tax = get_taxonomy( $taxonomy );
</span><span class="cx" style="display: block; padding: 0 10px"> $args['disabled'] = ! current_user_can( $tax->cap->assign_terms );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $args['list_only'] = ! empty( $r['list_only'] );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( is_array( $r['selected_cats'] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $args['selected_cats'] = $r['selected_cats'];
</span><span class="cx" style="display: block; padding: 0 10px"> } elseif ( $post_id ) {
</span></span></pre></div>
<a id="trunksrcwpadminjspressthisjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/press-this.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/press-this.js 2015-03-12 23:29:21 UTC (rev 31764)
+++ trunk/src/wp-admin/js/press-this.js 2015-03-13 16:56:45 UTC (rev 31765)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -121,6 +121,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Prepare the form data for saving.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function prepareFormData() {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var $form = $( '#pressthis-form' ),
+ $input = $( '<input type="hidden" name="post_category[]" value="">' );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> editor && editor.save();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( '#post_title' ).val( sanitizeText( $( '#title-container' ).text() ) );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -131,6 +134,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> window.tagBox.flushTags( this, false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Get selected categories
+ $( '.categories-select .category' ).each( function( i, element ) {
+ var $cat = $( element );
+
+ if ( $cat.hasClass( 'selected' ) ) {
+ // Have to append a node as we submit the actual form on preview
+ $form.append( $input.clone().val( $cat.attr( 'data-term-id' ) || '' ) );
+ }
+ });
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -232,18 +245,17 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! response.success ) {
</span><span class="cx" style="display: block; padding: 0 10px"> renderError( response.data.errorMessage );
</span><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // TODO: change if/when the html changes.
</del><span class="cx" style="display: block; padding: 0 10px"> var $parent, $ul,
</span><span class="cx" style="display: block; padding: 0 10px"> $wrap = $( 'ul.categories-select' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $.each( response.data, function( i, newCat ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var $node = $( '<li>' ).attr( 'id', 'category-' + newCat.term_id )
- .append( $( '<label class="selectit">' ).text( newCat.name )
- .append( $( '<input type="checkbox" name="post_category[]" checked>' ).attr( 'value', newCat.term_id ) ) );
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var $node = $( '<li>' ).append( $( '<div class="category selected" tabindex="0" role="checkbox" aria-checked="true">' )
+ .attr( 'data-term-id', newCat.term_id )
+ .text( newCat.name ) );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( newCat.parent ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! $ul || ! $ul.length ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $parent = $wrap.find( '#category-' + newCat.parent );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $parent = $wrap.find( 'div[data-term-id="' + newCat.parent + '"]' ).parent();
</ins><span class="cx" style="display: block; padding: 0 10px"> $ul = $parent.find( 'ul.children:first' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! $ul.length ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -251,11 +263,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $ul.append( $node );
- // TODO: set focus on
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $ul.prepend( $node );
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> $wrap.prepend( $node );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ $node.focus();
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> refreshCatsCache();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -509,6 +522,29 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function toggleCatItem( $element ) {
+ if ( $element.hasClass( 'selected' ) ) {
+ $element.removeClass( 'selected' ).attr( 'aria-checked', 'false' );
+ } else {
+ $element.addClass( 'selected' ).attr( 'aria-checked', 'true' );
+ }
+ }
+
+ function monitorCatList() {
+ $( '.categories-select' ).on( 'click.press-this keydown.press-this', function( event ) {
+ var $element = $( event.target );
+
+ if ( $element.is( 'div.category' ) ) {
+ if ( event.type === 'keydown' && event.keyCode !== 32 ) {
+ return;
+ }
+
+ toggleCatItem( $element );
+ event.preventDefault();
+ }
+ });
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* ***************************************************************
</span><span class="cx" style="display: block; padding: 0 10px"> * PROCESSING FUNCTIONS
</span><span class="cx" style="display: block; padding: 0 10px"> *************************************************************** */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -564,6 +600,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> monitorOptionsModal();
</span><span class="cx" style="display: block; padding: 0 10px"> monitorPlaceholder();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ monitorCatList();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $( '.options-open' ).on( 'click.press-this', openSidebar );
</span><span class="cx" style="display: block; padding: 0 10px"> $( '.options-close' ).on( 'click.press-this', closeSidebar );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -641,7 +678,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> catsCache.push( {
</span><span class="cx" style="display: block; padding: 0 10px"> node: $this,
</span><span class="cx" style="display: block; padding: 0 10px"> parents: $this.parents( 'li' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- text: $this.children( 'label' ).text().toLowerCase()
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text: $this.children( '.category' ).text().toLowerCase()
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre>
</div>
</div>
</body>
</html>