WordPress.org
Get WordPress

Making WordPress.org

Changeset 687


Ignore:
Timestamp:
06/06/2014 09:51:08 PM (11 years ago)
Author:
coffee2code
Message:

Code Reference: Improve linking related to source code display. See #176

  • Remove 'View source code:' label and links
  • Add 'View source' link that links downpage to Source section
  • Remove ellipsis from link text
  • Add ability to collapse expanded source code
  • Move link to core.trac for function to be under source code display as 'View on Trac'
  • Fix to display link to trac for hooks and classes
Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/content-reference.php

    r686 r687  
    3131            <p>
    3232                <strong><?php _e( 'Source file:', 'wporg' ); ?></strong>
    33                 <a href="<?php echo get_source_file_archive_link( $source_file ); ?>"><?php echo esc_html( $source_file ); ?></a><br />
    34                 <strong><?php _e( 'View source code:', 'wporg' ); ?></strong>
    35                 <?php if ( post_type_has_source_code() ) { ?>
    36                 <a href="#source-code"><?php _e( 'below', 'wporg' ); ?></a> or
    37                 <?php } ?>
    38                 <a href="<?php echo get_source_file_link(); ?>"><?php _e( 'on the WP Trac code browser&hellip;', 'wporg' ); ?></a>
     33                <a href="<?php echo get_source_file_archive_link( $source_file ); ?>"><?php echo esc_html( $source_file ); ?></a>
    3934            </p>
     35            <?php if ( post_type_has_source_code() ) { ?>
     36            <p>
     37                <a href="#source-code"><?php _e( 'View source', 'wporg' ); ?></a>
     38            </p>
     39            <?php } else { ?>
     40            <p>
     41                <a href="<?php echo get_source_file_link(); ?>"><?php _e( 'View on Trac', 'wporg' ); ?></a>
     42            </p>
     43            <?php } ?>
    4044        </section>
    4145    <?php endif; ?>
    … …  
    131135                <pre class="brush: php; toolbar: false;"><?php echo esc_html( get_source_code() ); ?></pre>
    132136            </div>
    133             <p><a href="#" class="show-complete-source"><?php _e( 'View full source code&hellip;', 'wporg' ); ?></a></p>
     137            <p class="source-code-links">
     138                <span>
     139                    <a href="#" class="show-complete-source"><?php _e( 'Expand full source code', 'wporg' ); ?></a>
     140                    <a href="#" class="less-complete-source"><?php _e( 'Collapse full source code', 'wporg' ); ?></a>
     141                </span>
     142                <span><a href="<?php echo get_source_file_link(); ?>"><?php _e( 'View on Trac', 'wporg' ); ?></a></span>
     143            </p>
    134144        </section>
    135145    <?php endif; ?>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/content-wp-parser-hook.php

    r686 r687  
    2929            <p>
    3030                <strong><?php _e( 'Source file:', 'wporg' ); ?></strong>
    31                 <a href="<?php echo get_source_file_archive_link( $source_file ); ?>"><?php echo esc_html( $source_file ); ?></a><br />
    32                 <strong><?php _e( 'View source code:', 'wporg' ); ?></strong>
    33                 <a href="<?php echo get_source_file_link(); ?>"><?php _e( 'on the WP Trac code browser&hellip;', 'wporg' ); ?></a>
     31                <a href="<?php echo get_source_file_archive_link( $source_file ); ?>"><?php echo esc_html( $source_file ); ?></a>
     32            </p>
     33            <p>
     34                <a href="<?php echo get_source_file_link(); ?>"><?php _e( 'View on Trac', 'wporg' ); ?></a>
    3435            </p>
    3536        </section>

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/js/function-reference.js

    r677 r687  
    55 */
    66( function( $ ) {
    7     var $sourceContent, $sourceCodeContainer, $sourceCodeTable, $showCompleteSource;
     7    var $sourceContent, $sourceCodeContainer, $sourceCodeTable, $showCompleteSource, $lessCompleteSource, $sourceCollapsedHeight;
    88
    9     function showCompleteSource( e ) {
     9    function toggleCompleteSource( e ) {
    1010        e.preventDefault();
    1111
    12         var heightGoal = $sourceCodeTable.height() + 47; // takes into consideration potential x-scrollbar
     12        if ( $showCompleteSource.is(':visible') ) {
     13            var heightGoal = $sourceCodeTable.height() + 37; // takes into consideration potential x-scrollbar
     14        } else {
     15            var heightGoal = $sourceCollapsedHeight;
     16        }
    1317
    1418        $sourceCodeContainer.animate( { height: heightGoal + 'px' } );
    1519
    16         $showCompleteSource.hide();
     20        $showCompleteSource.toggle();
     21        $lessCompleteSource.toggle();
    1722
    1823    }
    … …  
    2833        $sourceCodeTable = $sourceContent.find( 'table' );
    2934
    30         if ( 188 < $sourceCodeTable.height() ) {
     35        // 1em (margin) + 20 * 17px. Lines are 1.1em which rounds to 17px: calc( 1em + 17px * 20 ).
     36        // Extra 10px added to partially show next line so it's clear there is more.
     37        $sourceCollapsedHeight = 196;
     38
     39        if ( ( $sourceCollapsedHeight - 12 ) < $sourceCodeTable.height() ) {
    3140
    3241            // Do this with javascript so javascript-less can enjoy the total sourcecode
    33             // 1em (margin) + 20 * 17px. Lines are 1.1em which rounds to 17px: calc( 1em + 17px * 20 ).
    34             // Extra 10px added to partially show next line so it's clear there is more.
    35             $( '.source-code-container' ).css( { height: '196px' } );
     42            $( '.source-code-container' ).css( { height: $sourceCollapsedHeight + 'px' } );
    3643
    3744            $showCompleteSource = $( '.show-complete-source' );
     45            $lessCompleteSource = $( '.less-complete-source' );
    3846
     47            $( '.source-code-links span:first' ).show();
    3948            $showCompleteSource.show();
    40             $showCompleteSource.on( 'click', showCompleteSource );
     49            $showCompleteSource.on( 'click', toggleCompleteSource );
     50            $lessCompleteSource.on( 'click', toggleCompleteSource );
    4151        }
    4252

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/scss/main.scss

    r677 r687  
    856856    }
    857857
     858    .single {
     859        .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
     860            border-bottom-style: none;
     861        }
     862    }
     863
     864    .source-content {
     865        overflow: auto;
     866    }
     867
     868    .source-code-links {
     869        margin-left: 2em;
     870        margin-top: 1em;
     871    }
     872
     873    .source-code-links span:first-child {
     874        display: none;
     875        border-right: 1px solid #999;
     876        margin-right: 1em;
     877        padding-right: 1em;
     878    }
     879
    858880    .source-code-container {
    859881        border-right: 1px solid #dfdfdf;
    … …  
    862884    }
    863885
    864     .show-complete-source {
     886    .show-complete-source, .less-complete-source {
    865887        display: none;
    866888    }

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer/stylesheets/main.css

    r677 r687  
    10681068  padding: 20px;
    10691069}
     1070.devhub-wrap .single .wp-parser-class, .devhub-wrap .single .wp-parser-function, .devhub-wrap .single .wp-parser-hook, .devhub-wrap .single .wp-parser-method {
     1071  border-bottom-style: none;
     1072}
     1073.devhub-wrap .source-content {
     1074  overflow: auto;
     1075}
     1076.devhub-wrap .source-code-links {
     1077  margin-left: 2em;
     1078  margin-top: 1em;
     1079}
     1080.devhub-wrap .source-code-links span:first-child {
     1081  display: none;
     1082  border-right: 1px solid #999;
     1083  margin-right: 1em;
     1084  padding-right: 1em;
     1085}
    10701086.devhub-wrap .source-code-container {
    10711087  border-right: 1px solid #dfdfdf;
    … …  
    10731089  overflow-y: hidden;
    10741090}
    1075 .devhub-wrap .show-complete-source {
     1091.devhub-wrap .show-complete-source, .devhub-wrap .less-complete-source {
    10761092  display: none;
    10771093}
Note: See TracChangeset for help on using the changeset viewer.