<!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>[3852] sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer: developer.wordpress.org: Implement a tabbed interface for writing and previewing user contributed notes.</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="http://meta.trac.wordpress.org/changeset/3852">3852</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/3852","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>coffee2code</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2016-08-24 20:22:35 +0000 (Wed, 24 Aug 2016)</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'>developer.wordpress.org: Implement a tabbed interface for writing and previewing user contributed notes.
Also wraps form header in 'h3' tag so it appears in table of contents.
Props keesiemeijer.
See <a href="http://meta.trac.wordpress.org/ticket/1905">#1905</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdevelopercommentsphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperfunctionsphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperincusercontentpreviewphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-preview.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperincusercontentphp">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjsusernotespreviewjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes-preview.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjsusernotesjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperscssmainscss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperstylesheetsmaincss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjstabsjs">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/tabs.js</a></li>
<li><a href="#sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperstylesheetseditorstylecss">sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/editor-style.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdevelopercommentsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/comments.php 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -65,8 +65,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <p id="add-user-note" style="display:none;"><a href=""><?php _e( 'Have a note or feedback to contribute?', 'wporg' ); ?></a></p>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php comment_form( array(
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'class_form' => 'comment-form tab-container',
</ins><span class="cx" style="display: block; padding: 0 10px"> 'comment_field' => DevHub_User_Submitted_Content::wp_editor_comments(),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'comment_notes_after' => '<p>' .
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'comment_notes_after' => DevHub_Note_Preview::comment_preview() .
+ '<p>' .
</ins><span class="cx" style="display: block; padding: 0 10px"> __( 'Notes should supplement code reference entries, for example examples, tips, explanations, use-cases, and best practices.', 'wporg' ) .
</span><span class="cx" style="display: block; padding: 0 10px"> '</p><p>' .
</span><span class="cx" style="display: block; padding: 0 10px"> __( 'Feedback can be to report errors or omissions with the documentation on this page. Such feedback will not be publicly posted.', 'wporg' ) .
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -87,19 +89,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'title_reply' => '', //'Add Example'
</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">- <!-- Comment Preview -->
- <div id='comment-preview' class='comment byuser depth-1' style='display:none;'>
- <article class='comment-body'>
- <header class='comment-meta'>
- <div>
- <?php _e( 'Preview', 'wporg' ); ?>
- <span class='spinner' style='display:none'></span>
- </div>
- </header>
- <div class='comment-content'></div>
- </article>
- </div>
-
</del><span class="cx" style="display: block; padding: 0 10px"> <?php endif; ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php if ( ! \DevHub\is_parsed_post_type() && comments_open() ) : ?>
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperfunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/functions.php 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -258,7 +258,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function header_js() {
</span><span class="cx" style="display: block; padding: 0 10px"> // Output CSS to hide markup with the class 'hide-if-js'. Ensures the markup is visible if JS is not present.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- echo "<script type=\"text/javascript\">jQuery( '<style>.hide-if-js { display: none; }</style>' ).appendTo( 'head' );</script>\n";
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Add class 'js' to the body element if JavaScript is enabled
+ echo "
+ <script type=\"text/javascript\">
+ jQuery( '<style>.hide-if-js { display: none; }</style>' ).appendTo( 'head' );
+ jQuery( function($) {
+ $( 'body' ).addClass('js');
+ } );
+ </script>\n";
</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"> function theme_scripts_styles() {
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperincusercontentpreviewphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-preview.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-preview.php 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content-preview.php 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -35,11 +35,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public static function scripts_and_styles() {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( is_singular() ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wp_enqueue_script( 'wporg-developer-preview', get_template_directory_uri() . '/js/user-notes-preview.js', array( 'jquery', 'quicktags', 'wporg-developer-function-reference' ), '20160809', true );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_enqueue_script( 'wporg-developer-tabs', get_template_directory_uri() . '/js/tabs.js', array( 'jquery' ), '20160809', true );
+ wp_enqueue_script( 'wporg-developer-preview', get_template_directory_uri() . '/js/user-notes-preview.js', array( 'jquery', 'wporg-developer-function-reference', 'wporg-developer-tabs' ), '20160809', true );
</ins><span class="cx" style="display: block; padding: 0 10px"> wp_localize_script( 'wporg-developer-preview', 'wporg_note_preview', array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'ajaxurl' => admin_url( 'admin-ajax.php' ),
- 'nonce' => wp_create_nonce( 'preview_nonce' ),
- 'preview' => __( 'preview note', 'wporg' ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'ajaxurl' => admin_url( 'admin-ajax.php' ),
+ 'nonce' => wp_create_nonce( 'preview_nonce' ),
+ 'preview' => __( 'preview note', 'wporg' ),
+ 'preview_empty' => __( 'Nothing to preview', 'wporg' ),
+ 'is_admin' => is_admin(),
</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">@@ -54,15 +57,38 @@
</span><span class="cx" style="display: block; padding: 0 10px"> wp_send_json_error( array( 'comment' => '' ) );
</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">- $comment = apply_filters('pre_comment_content', $_POST['preview_comment'] );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $comment = apply_filters( 'pre_comment_content', $_POST['preview_comment'] );
</ins><span class="cx" style="display: block; padding: 0 10px"> $comment = wp_unslash( $comment );
</span><span class="cx" style="display: block; padding: 0 10px"> $comment = apply_filters( 'get_comment_text', $comment );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $comment = apply_filters( 'comment_text', $comment );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $comment = apply_filters( 'comment_text', $comment );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> wp_send_json_success( array( 'comment' => $comment ) );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /**
+ * Captures the comment-preview markup displayed (and populated) below the Add Note form.
+ *
+ * @access public
+ * @static
+ *
+ * @return string Comment preview HTML markup.
+ */
+ public static function comment_preview() {
+ if ( ! class_exists( 'DevHub_Note_Preview' ) ) {
+ return '';
+ }
+
+ ob_start();
+?>
+ <div id='comment-preview' class='tab-section comment byuser depth-1 comment-preview' aria-hidden="true">
+ <article class='preview-body comment-body'>
+ <div class='preview-content comment-content'></div>
+ </article>
+ </div>
+ <?php
+
+ return ob_get_clean();
+ }
</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">-
</del><span class="cx" style="display: block; padding: 0 10px"> DevHub_Note_Preview::init();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperincusercontentphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/inc/user-content.php 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -89,7 +89,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_style( 'syntaxhighlighter-theme-default' );
</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">- wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'quicktags', 'wporg-developer-preview' ), '20160809', true );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_enqueue_script( 'wporg-developer-user-notes', get_template_directory_uri() . '/js/user-notes.js', array( 'quicktags' ), '20160809', true );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( get_option( 'thread_comments' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_script( 'comment-reply' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -126,9 +126,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public static function wp_editor_comments() {
</span><span class="cx" style="display: block; padding: 0 10px"> ob_start();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- echo '<p class="comment-form-comment"><label for="comment">' . _x( 'Add Note or Feedback', 'noun', 'wporg' ) . '</label>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ echo '<h3><label for="comment">' . _x( 'Add Note or Feedback', 'noun', 'wporg' ) . '</label></h3>';
+
+ if ( class_exists( 'DevHub_Note_Preview' ) ) {
+ echo '<ul class="tablist" style="display:none;">';
+ echo '<li><a href="#comment-form-comment">' . __( 'Write', 'wporg' ) . '</a></li>';
+ echo '<li><a href="#comment-preview">' . __( 'Preview', 'wporg' ) . '</a></li></ul>';
+ }
+
+ $style = '<style type="text/css">';
+ ob_start();
+ include get_stylesheet_directory() . '/stylesheets/editor-style.css';
+ $style .= ob_get_clean();
+ $style .=' </style>';
+
+ echo '<div class="comment-form-comment tab-section" id="comment-form-comment">';
</ins><span class="cx" style="display: block; padding: 0 10px"> wp_editor( '', 'comment', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'media_buttons' => false,
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'editor_css' => $style,
</ins><span class="cx" style="display: block; padding: 0 10px"> 'textarea_name' => 'comment',
</span><span class="cx" style="display: block; padding: 0 10px"> 'textarea_rows' => 8,
</span><span class="cx" style="display: block; padding: 0 10px"> 'quicktags' => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -137,7 +152,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'teeny' => true,
</span><span class="cx" style="display: block; padding: 0 10px"> 'tinymce' => false,
</span><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- echo '</p>';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ echo '</div>';
</ins><span class="cx" style="display: block; padding: 0 10px"> return ob_get_clean();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjstabsjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/tabs.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/tabs.js (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/tabs.js 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,156 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/**
+ * Takes care of hiding and displaying sections with tabs
+ *
+ * Allow users to switch focus between the aria-selected tab and the content.
+ * Change focus between tabs using the left and right arrow keys.
+ * Use the TAB key as normal to focus the first element inside the visible tab panel.
+ *
+ * Html markup needed for a tabbed list
+ *
+ * <div class=".tab-container">
+ * <ul class="tablist">
+ * <li><a href="#section-1">Section 1</a></li>
+ * <li><a href="#section-2">Section 2</a></li>
+ * </ul>
+ * <div id="section-1" class="tab-section">Section 1 content</div>
+ * <div id="section-2" class="tab-section">Section 2 content</div>
+ * </div>
+ */
+
+
+( function( $ ) {
+
+ container = $( '.tab-container' );
+
+ if ( container.length ) {
+
+ container.each( function() {
+
+ var tablist = $( this ).find( '.tablist' );
+ var tabSections = $( this ).find( '.tab-section' );
+
+ if ( tablist.length || tabSections.length ) {
+ var tabs = tablist.find( 'a' );
+
+ if ( ( 1 < tabs.length ) && ( tabs.length === tabSections.length ) ) {
+ setupTabs( tablist, tabs, tabSections );
+ tabEvents( tablist, tabs, tabSections );
+ }
+ }
+ } );
+ }
+
+ function setupTabs( tablist, tabs, tabSections ) {
+
+ tablist.attr( 'role', 'tablist' );
+ tablist.find( 'li' ).attr( 'role', 'presentation' );
+
+ tabs.attr( {
+ 'role': 'tab',
+ 'tabindex': '-1'
+ } );
+
+ // Make each aria-controls correspond id of targeted section (re href)
+ tabs.each( function() {
+ $( this ).attr(
+ 'aria-controls', $( this ).attr( 'href' ).substring( 1 )
+ );
+ } );
+
+ // Make the first tab selected by default and allow it focus
+ tabs.first().attr( {
+ 'aria-selected': 'true',
+ 'tabindex': '0'
+ } );
+
+ // Add 'tab-section-selected' to first section
+ tabSections.first().addClass( 'tab-section-selected' );
+
+ // Make each section focusable and give it the tabpanel role
+ tabSections.attr( {
+ 'role': 'tabpanel'
+ } );
+
+ // Make first child of each panel focusable programmatically
+ tabSections.children().first().attr( {
+ 'tabindex': '0'
+ } );
+
+ // Make all but the first section hidden (ARIA state and display CSS)
+ $( tabSections ).not( ":first" ).attr( {
+ 'aria-hidden': 'true'
+ } );
+ }
+
+ function tabEvents( tablist, tabs, tabSections ) {
+
+ // Change focus between tabs with arrow keys
+ tabs.on( 'keydown', function( e ) {
+
+ // define current, previous and next (possible) tabs
+ var original = $( this );
+ var prev = $( this ).parents( 'li' ).prev().children( '[role="tab"]' );
+ var next = $( this ).parents( 'li' ).next().children( '[role="tab"]' );
+ var target;
+
+ // find the direction (prev or next)
+ switch ( e.keyCode ) {
+ case 37:
+ target = prev;
+ break;
+ case 39:
+ target = next;
+ break;
+ default:
+ target = false
+ break;
+ }
+
+ if ( target.length ) {
+ original.attr( {
+ 'tabindex': '-1',
+ 'aria-selected': null
+ } );
+ target.attr( {
+ 'tabindex': '0',
+ 'aria-selected': true
+ } ).focus();
+ }
+
+ // Hide panels
+ tabSections.attr( 'aria-hidden', 'true' );
+
+ // Show panel which corresponds to target
+ $( '#' + $( document.activeElement ).attr( 'href' ).substring( 1 ) ).attr( 'aria-hidden', null );
+
+ // Toggle 'tab-section-selected' class for tab sections
+ tabSections.toggleClass( 'tab-section-selected' );
+ } );
+
+ // Handle click on tab to show + focus tabpanel
+ tabs.on( 'click', function( e ) {
+ e.preventDefault();
+
+ tabs.attr( {
+ 'tabindex': '-1',
+ 'aria-selected': null
+ } );
+
+ // replace above on clicked tab
+ $( this ).attr( {
+ 'aria-selected': true,
+ 'tabindex': '0'
+ } );
+
+ // Hide panels
+ tabSections.attr( 'aria-hidden', 'true' );
+
+ // show corresponding panel
+ $( '#' + $( this ).attr( 'href' ).substring( 1 ) ).attr( 'aria-hidden', null );
+
+ // Toggle 'tab-section-selected' class for tab sections
+ tabSections.toggleClass( 'tab-section-selected' );
+ } );
+ }
+
+} )( jQuery );
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjsusernotespreviewjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes-preview.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes-preview.js 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes-preview.js 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,69 +3,95 @@
</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">-var wporg_developer_note_preview = ( function( $ ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( $ ) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var textarea, preview, previewContent, spinner;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var textarea, textareaHeight, text, preview, previewContent, tabs, processing, spinner;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function init( textarea_selector, preview_selector ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function init() {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- textarea = $( textarea_selector );
- preview = $( preview_selector );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( undefined === wporg_note_preview ) {
+ return;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( textarea.length && preview.length && ( undefined !== wporg_note_preview ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ textarea = $( '.comment-form textarea' );
+ preview = $( '#comment-preview' );
+ tabs = $( '#commentform .tablist' ).find( 'a' );
+ spinner = $( '<span class="spinner" style="display:none;"></span>' );
+ text = '';
+ processing = false;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- previewContent = $( '.comment-content', preview );
- spinner = $( '.spinner', preview );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( textarea.length && preview.length && tabs.length ) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( previewContent.length && spinner.length ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Append spinner to preview tab
+ tabs.parents( 'li[role="presentation"]:last' ).append( spinner );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- add_preview_button();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ previewContent = $( '.preview-content', preview );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var current_text = textarea.val();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( previewContent.length ) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( current_text.length ) {
- update_preview( current_text );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( !textarea.val().length ) {
+ previewContent.text( wporg_note_preview.preview_empty );
</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">- add_preview_events();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ previewEvents();
</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="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function add_preview_button() {
- QTags.addButton( 'preview', wporg_note_preview.preview, function() {
- var pos = preview.position();
- $( 'html,body' ).animate( {
- scrollTop: pos.top
- }, 1000 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function previewEvents() {
+
+ tabs.on( "keydown.note_preview, click.note_preview", function( e ) {
+
+ if ( 'comment-preview' === $( this ).attr( 'aria-controls' ) ) {
+
+ if ( !processing ) {
+ current_text = $.trim( textarea.val() );
+ if ( current_text.length && ( current_text !== wporg_note_preview.preview_empty ) ) {
+ if ( wporg_note_preview.preview_empty === previewContent.text() ) {
+ // Remove "Nothing to preview" if there's new current text.
+ previewContent.text( '' );
+ }
+ // Update the preview.
+ updatePreview( current_text );
+ } else {
+ previewContent.text( wporg_note_preview.preview_empty );
+ }
+ }
+
+ // Remove outline from tab if clicked.
+ if ( "click" === e.type ) {
+ $( this ).blur();
+ }
+ } else {
+ textarea.focus();
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- }
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function add_preview_events() {
-
- // Update Preview after QuickTag button is clicked.
- var buttons = $( '#qt_comment_toolbar' ).find( 'input' ).not( '#qt_comment_preview' );
- buttons.on( 'click', function() {
- // Set timeout to let the quicktags do it's thing first.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Set preview heigth when the textarea is visible
+ $( '#add-user-note, .table-of-contents a[href="#add-note-or-feedback"]' ).click( function( e ) {
+ e.preventDefault();
+ tabs.parents( '.tablist' ).show();
</ins><span class="cx" style="display: block; padding: 0 10px"> setTimeout( function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- update_preview( textarea.val() );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ textareaHeight = textarea.outerHeight( true );
+ if ( 0 < textareaHeight ) {
+ preview.css( 'min-height', textareaHeight + 'px' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }, 500 );
</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">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Update Preview after keykup event.
- // Delay updating the preview by 2 seconds to not overload the server.
- textarea.bind( 'keyup', debounce( function( e ) {
- update_preview( $( this ).val() );
- }, 2000 ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function updatePreview( content ) {
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Display a spinner as soon as the comment form changes input.
- textarea.bind( 'input propertychange selectionchange', function( e ) {
- spinner.show();
- } );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Don't update preview if nothing changed
+ if ( text == content ) {
+ spinner.hide();
+ return;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function update_preview( content ) {
</del><span class="cx" style="display: block; padding: 0 10px"> spinner.show();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text = content;
+ processing = true;
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $.post( wporg_note_preview.ajaxurl, {
</span><span class="cx" style="display: block; padding: 0 10px"> action: "preview_comment",
</span><span class="cx" style="display: block; padding: 0 10px"> preview_nonce: wporg_note_preview.nonce,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -73,7 +99,7 @@
</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"> .done( function( response ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- update_preview_html( response.data.comment );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ updatePreview_HTML( response.data.comment );
</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"> .fail( function( response ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -82,18 +108,23 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .always( function( response ) {
</span><span class="cx" style="display: block; padding: 0 10px"> spinner.hide();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ processing = false;
+
+ // Make first child of the preview focusable
+ preview.children().first().attr( {
+ 'tabindex': '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">
</span><span class="cx" style="display: block; padding: 0 10px"> // Add toggle links to source code in preview if needed.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- function update_source_code() {
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function updateSourceCode() {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( undefined !== wporg_developer ) {
</span><span class="cx" style="display: block; padding: 0 10px"> wporg_developer.sourceCodeDisplay( preview );
</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">- function update_preview_html( content ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ function updatePreview_HTML( content ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> // Update preview content
</span><span class="cx" style="display: block; padding: 0 10px"> previewContent.html( content );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -102,25 +133,10 @@
</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"> // Add toggle link to source code in preview if needed.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- update_source_code();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ updateSourceCode();
</ins><span class="cx" style="display: block; padding: 0 10px"> spinner.hide();
</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">- // https://remysharp.com/2010/07/21/throttling-function-calls
- function debounce( fn, delay ) {
- var timer = null;
- return function() {
- var context = this,
- args = arguments;
- clearTimeout( timer );
- timer = setTimeout( function() {
- fn.apply( context, args );
- }, delay );
- };
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ init();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return {
- init: init
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> } )( jQuery );
</span><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperjsusernotesjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/user-notes.js 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -12,30 +12,21 @@
</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"> function showCommentForm() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( '#respond, #add-user-note' ).toggle();
-
- var preview = $( '#comment-preview' );
- if( preview.length && ( wporg_developer_note_preview !== undefined ) ) {
- preview.show();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '#respond' ).show();
+ $( '#add-user-note').hide();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- //Initialize preview with textarea and preview selectors
- wporg_developer_note_preview.init( '.comment-form textarea', '#comment-preview' );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var target = $( '#commentform #add-note-or-feedback' );
+ if ( target.length ) {
+ var pos = target.offset();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( pos = $( '#submit' ).position() ) {
- if ( pos.top < $(window).scrollTop() ) {
- // Scroll up
- $( 'html,body' ).animate( {scrollTop:pos.top}, 1000 );
- }
- else if ( pos.top + jQuery("selector").height() > $(window).scrollTop() + (window.innerHeight || document.documentElement.clientHeight) ){
- // Scroll down
- $( 'html,body' ).animate( {scrollTop:pos.top - (window.innerHeight || document.documentElement.clientHeight) + $( '#submit' ).height() + 30}, 1000 );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( 'html,body' ).animate( {
+ scrollTop: pos.top
+ }, 1000 );
</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="cx" style="display: block; padding: 0 10px"> $( '#respond, #add-user-note' ).toggle();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $( '#add-user-note' ).click( function( e ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $( '#add-user-note, .table-of-contents a[href="#add-note-or-feedback"]' ).click( function( e ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> e.preventDefault();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> showCommentForm();
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperscssmainscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -326,6 +326,47 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 0 1.5em;
</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">+ /* =Tabs
+ ----------------------------------------------- */
+
+ .tablist {
+ margin: 0;
+ }
+ .tablist li {
+ display: inline-block;
+ list-style: none;
+ }
+ .tablist a {
+ border-color: none;
+ background-color: transparent;
+ border-color: transparent;
+ border-image: none;
+ border-style: solid solid none;
+ border-width: 1px 1px 0;
+ display: inline-block;
+ padding: .5em 1em;
+ margin-bottom:-1px;
+ }
+ .tablist a[aria-selected],
+ .tablist a:focus {
+ background-color: #fff;
+ border-color: #ccc;
+ border-radius: 3px 3px 0 0;
+ color: #333;
+ }
+ .tab-section {
+ margin-top: 0;
+ padding: 0;
+ border: none;
+ }
+ .tab-section[aria-hidden="true"] {
+ display: none;
+ }
+ .tab-section:focus {
+ background: #eee;
+ outline: thin dotted;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /* =Media
</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">@@ -1188,22 +1229,40 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> border: 1px solid #dfdfdf;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-radius: 2px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-radius: 0 2px 2px 2px;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> article {
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: auto;
</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">- #comment-preview {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ #comment-preview,
+ .js & .comment-form-comment {
+ margin-top: 0;
+ border: 1px solid #ccc;
+ border-radius: 0 3px 3px 3px;
</ins><span class="cx" style="display: block; padding: 0 10px"> clear:both;
</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">+ #comment-preview.tab-section-selected {
+ border-radius: 3px;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #comment-preview .comment-content {
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 6em;
</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">- #comment-preview .spinner {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ label[for=comment],
+ .comment-form-comment,
+ .comment-preview {
+ margin-bottom: 1em;
+ }
+
+ .js & .comment-form-comment {
+ padding: 0 .7em .7em;
+ }
+
+ .tablist .spinner {
</ins><span class="cx" style="display: block; padding: 0 10px"> background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-background-size: 20px 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> background-size: 20px 20px;
</span></span></pre></div>
<a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperstylesheetseditorstylecss"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/editor-style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/editor-style.css (rev 0)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/editor-style.css 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,32 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*
+These styles are inserted inline in the comment editor.
+*/
+
+.js .quicktags-toolbar {
+ background-color: #fff;
+ border: none;
+}
+
+.js .wp-core-ui .quicktags-toolbar input.button.button-small:first-of-type {
+ margin: 2px 2px 2px 0;
+}
+
+.js .quicktags-toolbar {
+ padding: 8px 5px 5px 0;
+}
+/*
+These styles are inserted inline in the comment editor.
+*/
+
+.js .quicktags-toolbar {
+ background-color: #fff;
+ border: none;
+}
+
+.js .wp-core-ui .quicktags-toolbar input.button.button-small:first-of-type {
+ margin: 2px 2px 2px 0;
+}
+
+.js .quicktags-toolbar {
+ padding: 8px 5px 5px 0;
+}
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><span class="cx" style="display: block; padding: 0 10px">Property changes on: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/editor-style.css
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="sitestrunkwordpressorgpublic_htmlwpcontentthemespubwporgdeveloperstylesheetsmaincss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css 2016-08-24 13:15:18 UTC (rev 3851)
+++ sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css 2016-08-24 20:22:35 UTC (rev 3852)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -287,6 +287,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Clearing */
</span><span class="cx" style="display: block; padding: 0 10px"> /* =Content
</span><span class="cx" style="display: block; padding: 0 10px"> ----------------------------------------------- */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* =Tabs
+ ----------------------------------------------- */
</ins><span class="cx" style="display: block; padding: 0 10px"> /* =Media
</span><span class="cx" style="display: block; padding: 0 10px"> ----------------------------------------------- */
</span><span class="cx" style="display: block; padding: 0 10px"> /* Make sure embeds and iframes fit their containers */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -677,6 +679,50 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0 0 1.5em;
</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">+.devhub-wrap .tablist {
+ margin: 0;
+}
+
+.devhub-wrap .tablist li {
+ display: inline-block;
+ list-style: none;
+}
+
+.devhub-wrap .tablist a {
+ border-color: none;
+ background-color: transparent;
+ border-color: transparent;
+ border-image: none;
+ border-style: solid solid none;
+ border-width: 1px 1px 0;
+ display: inline-block;
+ padding: .5em 1em;
+ margin-bottom: -1px;
+}
+
+.devhub-wrap .tablist a[aria-selected],
+.devhub-wrap .tablist a:focus {
+ background-color: #fff;
+ border-color: #ccc;
+ border-radius: 3px 3px 0 0;
+ color: #333;
+}
+
+.devhub-wrap .tab-section {
+ margin-top: 0;
+ padding: 0;
+ border: none;
+}
+
+.devhub-wrap .tab-section[aria-hidden="true"] {
+ display: none;
+}
+
+.devhub-wrap .tab-section:focus {
+ background: #eee;
+ outline: thin dotted;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .devhub-wrap .page-content img.wp-smiley,
</span><span class="cx" style="display: block; padding: 0 10px"> .devhub-wrap .entry-content img.wp-smiley,
</span><span class="cx" style="display: block; padding: 0 10px"> .devhub-wrap .comment-content img.wp-smiley {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1563,7 +1609,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: #fff;
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> border: 1px solid #dfdfdf;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- border-radius: 2px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ border-radius: 0 2px 2px 2px;
</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"> .devhub-wrap.single-wp-parser-function .comment-list li article,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1574,15 +1620,42 @@
</span><span class="cx" style="display: block; padding: 0 10px"> overflow: auto;
</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">-.devhub-wrap.single-wp-parser-function #comment-preview, .devhub-wrap.single-wp-parser-method #comment-preview, .devhub-wrap.single-wp-parser-hook #comment-preview, .devhub-wrap.single-wp-parser-class #comment-preview {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.devhub-wrap.single-wp-parser-function #comment-preview,
+.js .devhub-wrap.single-wp-parser-function .comment-form-comment, .devhub-wrap.single-wp-parser-method #comment-preview,
+.js .devhub-wrap.single-wp-parser-method .comment-form-comment, .devhub-wrap.single-wp-parser-hook #comment-preview,
+.js .devhub-wrap.single-wp-parser-hook .comment-form-comment, .devhub-wrap.single-wp-parser-class #comment-preview,
+.js .devhub-wrap.single-wp-parser-class .comment-form-comment {
+ margin-top: 0;
+ border: 1px solid #ccc;
+ border-radius: 0 3px 3px 3px;
</ins><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</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">+.devhub-wrap.single-wp-parser-function #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-method #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-hook #comment-preview.tab-section-selected, .devhub-wrap.single-wp-parser-class #comment-preview.tab-section-selected {
+ border-radius: 3px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .devhub-wrap.single-wp-parser-function #comment-preview .comment-content, .devhub-wrap.single-wp-parser-method #comment-preview .comment-content, .devhub-wrap.single-wp-parser-hook #comment-preview .comment-content, .devhub-wrap.single-wp-parser-class #comment-preview .comment-content {
</span><span class="cx" style="display: block; padding: 0 10px"> min-height: 6em;
</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">-.devhub-wrap.single-wp-parser-function #comment-preview .spinner, .devhub-wrap.single-wp-parser-method #comment-preview .spinner, .devhub-wrap.single-wp-parser-hook #comment-preview .spinner, .devhub-wrap.single-wp-parser-class #comment-preview .spinner {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.devhub-wrap.single-wp-parser-function label[for=comment],
+.devhub-wrap.single-wp-parser-function .comment-form-comment,
+.devhub-wrap.single-wp-parser-function .comment-preview, .devhub-wrap.single-wp-parser-method label[for=comment],
+.devhub-wrap.single-wp-parser-method .comment-form-comment,
+.devhub-wrap.single-wp-parser-method .comment-preview, .devhub-wrap.single-wp-parser-hook label[for=comment],
+.devhub-wrap.single-wp-parser-hook .comment-form-comment,
+.devhub-wrap.single-wp-parser-hook .comment-preview, .devhub-wrap.single-wp-parser-class label[for=comment],
+.devhub-wrap.single-wp-parser-class .comment-form-comment,
+.devhub-wrap.single-wp-parser-class .comment-preview {
+ margin-bottom: 1em;
+}
+
+.js .devhub-wrap.single-wp-parser-function .comment-form-comment, .js .devhub-wrap.single-wp-parser-method .comment-form-comment, .js .devhub-wrap.single-wp-parser-hook .comment-form-comment, .js .devhub-wrap.single-wp-parser-class .comment-form-comment {
+ padding: 0 .7em .7em;
+}
+
+.devhub-wrap.single-wp-parser-function .tablist .spinner, .devhub-wrap.single-wp-parser-method .tablist .spinner, .devhub-wrap.single-wp-parser-hook .tablist .spinner, .devhub-wrap.single-wp-parser-class .tablist .spinner {
</ins><span class="cx" style="display: block; padding: 0 10px"> background: url("/wp-includes/images/spinner-2x.gif") no-repeat scroll 0 50%;
</span><span class="cx" style="display: block; padding: 0 10px"> -webkit-background-size: 20px 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> background-size: 20px 20px;
</span></span></pre>
</div>
</div>
</body>
</html>