WordPress.org
Get WordPress

Making WordPress.org

Changeset 1196


Ignore:
Timestamp:
01/27/2015 12:39:51 AM (10 years ago)
Author:
coffee2code
Message:

developer.wordpress.org: Add 'Used By' and 'Uses' sections to parsed content permalink pages.

Basically the UI surfacing of the P2P relationships.

Fixes #323.
Props atimmer.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-developer
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r781 r1196  
    1818    </div>
    1919
     20    <?php
     21        $used_by = get_used_by()->post_count;
     22        $uses    = get_uses()->post_count;
     23    ?>
     24    <div class="meta">
     25        <?php printf(
     26            _n( 'Used by <a href="%s">1 function</a>', 'Used by <a href="%s">%d function</a>', $used_by, 'wporg' ),
     27            esc_url( apply_filters( 'the_permalink', get_permalink() ) ) . '#usage',
     28            $used_by
     29        ); ?>
     30        |
     31        <?php printf(
     32            _n( 'Uses <a href="%s">1 function</a>', 'Used by <a href="%s">%d function</a>', $uses, 'wporg' ),
     33            esc_url( apply_filters( 'the_permalink', get_permalink() ) ) . '#usage',
     34            $uses
     35        ); ?>
     36    </div>
    2037</article>

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

    r1104 r1196  
    4444        </section>
    4545    <?php endif; ?>
    46 
    47     <?php /*
    48     <?php if ( is_archive() ) : ?>
    49     <section class="meta">Used by TODO | Uses TODO | TODO Examples</section>
    50     <?php endif; ?>
    51     */ ?>
    5246
    5347    <?php if ( $params = get_params() ) : ?>
    … …  
    130124    endif; ?>
    131125
     126    <?php if ( show_usage_info() ) : ?>
     127        <hr id="usage" />
     128        <section class="usage">
     129            <article class="used-by">
     130                <h2><?php _e( 'Used by', 'wporg' ); ?></h2>
     131                <ul>
     132                    <?php
     133                        $used_by = get_used_by();
     134                        while ( $used_by->have_posts() ) : $used_by->the_post();
     135                            ?>
     136                            <li>
     137                                <span><?php echo esc_attr( get_source_file() ); ?>:</span>
     138                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php if ( 'wp-parser-hook' !== get_post_type() ) : ?>()<?php endif; ?></a>
     139                            </li>
     140                        <?php endwhile; wp_reset_postdata(); ?>
     141                        <?php if ( $used_by->post_count > 5 ) : ?>
     142                            <a href="#" class="show-more"><?php printf( _n( 'Show 1 more used by', 'Show %d more used by', $used_by->post_count, 'wporg' ), $used_by->post_count ); ?></a>
     143                            <a href="#" class="hide-more"><?php _e( 'Hide more used by', 'wporg' ); ?></a>
     144                        <?php endif; ?>
     145                </ul>
     146            </article>
     147            <?php if ( post_type_has_uses_info() ) : ?>
     148                <article class="uses">
     149                    <h2><?php _e( 'Uses', 'wporg' ); ?></h2>
     150                    <ul>
     151                        <?php
     152                        $uses = get_uses();
     153                        while ( $uses->have_posts() ) : $uses->the_post()
     154                            ?>
     155                            <li>
     156                                <span><?php echo esc_attr( get_source_file() ); ?>:</span>
     157                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?><?php if ( 'wp-parser-hook' !== get_post_type() ) : ?>()<?php endif; ?></a>
     158                            </li>
     159                        <?php endwhile; wp_reset_postdata(); ?>
     160                        <?php if ( $uses->post_count > 5 ) : ?>
     161                            <a href="#" class="show-more"><?php printf( _n( 'Show 1 more use', 'Show %d more uses', $uses->post_count, 'wporg' ), $uses->post_count ); ?></a>
     162                            <a href="#" class="hide-more"><?php _e( 'Hide more uses', 'wporg' ); ?></a>
     163                        <?php endif; ?>
     164                    </ul>
     165                </article>
     166            <?php endif; ?>
     167        </section>
     168    <?php endif; ?>
     169
    132170    <?php if ( post_type_has_source_code() ) : ?>
    133171        <hr />

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

    r1173 r1196  
    898898    }
    899899
     900    function show_usage_info() {
     901        $p2p_enabled = function_exists( 'p2p_register_connection_type' );
     902
     903        return $p2p_enabled && post_type_has_usage_info( get_post_type() );
     904    }
     905
     906    /**
     907     * Does the post type support usage information?
     908     *
     909     * @param string $post_type Optional. The post type name. If blank, assumes current post type.
     910     *
     911     * @return boolean
     912     */
     913    function post_type_has_usage_info( $post_type = null ) {
     914        $post_type             = $post_type ? $post_type : get_post_type();
     915        $post_types_with_usage = array( 'wp-parser-function', 'wp-parser-method', 'wp-parser-hook' );
     916
     917        return in_array( $post_type, $post_types_with_usage );
     918    }
     919
     920    /**
     921     * Does the post type support uses information?
     922     *
     923     * @param string $post_type Optional. The post type name. If blank, assumes current post type.
     924     *
     925     * @return boolean
     926     */
     927    function post_type_has_uses_info( $post_type = null ) {
     928        $post_type             = $post_type ? $post_type : get_post_type();
     929        $post_types_with_uses  = array( 'wp-parser-function', 'wp-parser-method' );
     930
     931        return in_array( $post_type, $post_types_with_uses );
     932    }
     933
     934    /**
     935     * Retrieve a WP_Query object for the posts that the current post uses
     936     *
     937     * @return WP_Query A WP_Query object for the posts the current post uses
     938     */
     939    function get_uses() {
     940
     941        if ( 'wp-parser-function' === get_post_type() ) {
     942            $connection_types = array( 'functions_to_functions', 'functions_to_methods', 'functions_to_hooks' );
     943        } else {
     944            $connection_types = array( 'methods_to_functions', 'methods_to_methods', 'methods_to_hooks' );
     945        }
     946
     947        $connected = new \WP_Query( array(
     948            'post_type'           => array( 'wp-parser-function', 'wp-parser-method', 'wp-parser-hook' ),
     949            'connected_type'      => $connection_types,
     950            'connected_direction' => array( 'from', 'from', 'from' ),
     951            'connected_items'     => get_the_ID(),
     952            'nopaging'            => true,
     953        ) );
     954
     955        return $connected;
     956    }
     957
     958    function get_used_by( $post_id = null ) {
     959
     960        if ( empty( $post_id ) ) {
     961            $post_id = get_the_ID();
     962        }
     963
     964        switch ( get_post_type() ) {
     965
     966            case 'wp-parser-function':
     967                $connection_types = array( 'functions_to_functions', 'methods_to_functions' );
     968                break;
     969
     970            case 'wp-parser-method':
     971                $connection_types = array( 'functions_to_methods', 'methods_to_methods', );
     972                break;
     973
     974            case 'wp-parser-hook':
     975                $connection_types = array( 'functions_to_hooks', 'methods_to_hooks' );
     976                break;
     977        }
     978
     979        $connected = new \WP_Query( array(
     980            'post_type'           => array( 'wp-parser-function', 'wp-parser-method' ),
     981            'connected_type'      => $connection_types,
     982            'connected_direction' => array( 'to', 'to' ),
     983            'connected_items'     => $post_id,
     984            'nopaging'            => true,
     985        ) );
     986
     987        return $connected;
     988    }
     989
    900990    /**
    901991     * Does the post type have source code?

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

    r689 r1196  
    55 */
    66( function( $ ) {
     7    'use strict';
     8
    79    var $sourceContent, $sourceCodeContainer, $sourceCodeTable, $showCompleteSource, $lessCompleteSource, sourceCollapsedHeight;
    810
    9     function toggleCompleteSource( e ) {
    10         e.preventDefault();
     11    var $usesList, $usedByList, $showMoreUses, $hideMoreUses, $showMoreUsedBy, $hideMoreUsedBy;
    1112
    12         if ( $showCompleteSource.is(':visible') ) {
    13             var heightGoal = $sourceCodeTable.height() + 45; // takes into consideration potential x-scrollbar
    14         } else {
    15             var heightGoal = sourceCollapsedHeight;
    16         }
     13    function onLoad() {
     14        sourceCodeHighlightInit();
    1715
    18         $sourceCodeContainer.animate( { height: heightGoal + 'px' } );
    19 
    20         $showCompleteSource.toggle();
    21         $lessCompleteSource.toggle();
    22 
     16        toggleUsageListInit();
    2317    }
    2418
    25     function onLoad() {
     19    function sourceCodeHighlightInit() {
     20
     21        // We require the SyntaxHighlighter javascript library
     22        if ( undefined === window.SyntaxHighlighter ) {
     23            return;
     24        }
    2625
    2726        // We only expect one source-content per document
    … …  
    5049            $lessCompleteSource.on( 'click', toggleCompleteSource );
    5150        }
     51    }
    5252
     53    function toggleCompleteSource( e ) {
     54        e.preventDefault();
     55
     56        if ( $showCompleteSource.is(':visible') ) {
     57            var heightGoal = $sourceCodeTable.height() + 45; // takes into consideration potential x-scrollbar
     58        } else {
     59            var heightGoal = sourceCollapsedHeight;
     60        }
     61
     62        $sourceCodeContainer.animate( { height: heightGoal + 'px' } );
     63
     64        $showCompleteSource.toggle();
     65        $lessCompleteSource.toggle();
     66
     67    }
     68
     69    function toggleUsageListInit() {
     70
     71        // We only expect one used_by and uses per document
     72        $usedByList = $( '.used-by' ).find( 'li' );
     73        $usesList   = $( '.uses' ).find( 'li' );
     74
     75        if ( $usedByList.length > 5 ) {
     76            $usedByList = $usedByList.slice( 5 ).hide();
     77
     78            $showMoreUsedBy = $( '.used-by .show-more' ).show().on( 'click', toggleMoreUsedBy );
     79            $hideMoreUsedBy = $( '.used-by .hide-more' ).on( 'click', toggleMoreUsedBy );
     80        }
     81
     82        if ( $usesList.length > 5 ) {
     83            $usesList = $usesList.slice( 5 ).hide();
     84
     85            $showMoreUses = $( '.uses .show-more' ).show().on( 'click', toggleMoreUses );
     86            $hideMoreUses = $( '.uses .hide-more' ).on( 'click', toggleMoreUses );
     87        }
     88    }
     89
     90    function toggleMoreUses( e ) {
     91        e.preventDefault();
     92
     93        $usesList.toggle();
     94
     95        $showMoreUses.toggle();
     96        $hideMoreUses.toggle();
     97    }
     98
     99    function toggleMoreUsedBy( e ) {
     100        e.preventDefault();
     101
     102        $usedByList.toggle();
     103
     104        $showMoreUsedBy.toggle();
     105        $hideMoreUsedBy.toggle();
    53106    }
    54107

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

    r1038 r1196  
    466466     * section styles
    467467     */
     468
     469    section {
     470        overflow: auto;
     471    }
    468472
    469473    .home-landing .section {
    … …  
    923927    .wp-parser-class, .wp-parser-function, .wp-parser-hook, .wp-parser-method {
    924928        border-bottom: 1px solid #dfdfdf;
     929
    925930        h1 {
    926931            margin: 24px 0;
    … …  
    10131018    }
    10141019
     1020    /* = Usage
     1021    ----------------------------------------------- */
     1022    .usage {
     1023        article {
     1024            float: left;
     1025            width: 50%;
     1026        }
     1027
     1028        .used-by {
     1029            padding-right: 30px;
     1030        }
     1031
     1032        .uses {
     1033            padding-left: 30px;
     1034        }
     1035
     1036        ul {
     1037            line-height: 1.7; /* Slightly increase the line height for more readability */
     1038            list-style-type: none;
     1039            margin: 0;
     1040        }
     1041
     1042        .show-more, .hide-more {
     1043            display: none;
     1044        }
     1045    }
     1046
     1047
    10151048    .source-content {
    10161049        overflow: auto;
    … …  
    13031336            padding-left: 0;
    13041337        }
     1338
     1339        &.archive, &.search {
     1340            .meta {
     1341                font-size: 100%;
     1342                margin-bottom: 1.5em;
     1343
     1344                a {
     1345                    color: #21759b;
     1346                }
     1347            }
     1348        }
     1349    }
     1350
     1351}
     1352
     1353@media ( min-width: 43em ) {
     1354    .devhub-wrap {
     1355        &.archive, &.search {
     1356            .meta {
     1357                float: right;
     1358            }
     1359
     1360            .sourcefile {
     1361                float: left;
     1362            }
     1363        }
    13051364    }
    13061365}
    … …  
    13901449            width: 99%;
    13911450        }
     1451
     1452        .usage {
     1453            article {
     1454                width: 100%;
     1455            }
     1456        }
    13921457    }
    13931458}

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

    r1038 r1196  
    299299   * section styles
    300300   */
     301  /* = Usage
     302  ----------------------------------------------- */
    301303  /* Comments */
    302304  /*
    … …  
    727729  color: #606060;
    728730}
     731.devhub-wrap section {
     732  overflow: auto;
     733}
    729734.devhub-wrap .home-landing .section {
    730735  padding: 30px 0%;
    … …  
    12031208  border-bottom-style: none;
    12041209}
     1210.devhub-wrap .usage article {
     1211  float: left;
     1212  width: 50%;
     1213}
     1214.devhub-wrap .usage .used-by {
     1215  padding-right: 30px;
     1216}
     1217.devhub-wrap .usage .uses {
     1218  padding-left: 30px;
     1219}
     1220.devhub-wrap .usage ul {
     1221  line-height: 1.7;
     1222  /* Slightly increase the line height for more readability */
     1223  list-style-type: none;
     1224  margin: 0;
     1225}
     1226.devhub-wrap .usage .show-more, .devhub-wrap .usage .hide-more {
     1227  display: none;
     1228}
    12051229.devhub-wrap .source-content {
    12061230  overflow: auto;
    … …  
    14251449    padding-left: 0;
    14261450  }
     1451  .devhub-wrap.archive .meta, .devhub-wrap.search .meta {
     1452    font-size: 100%;
     1453    margin-bottom: 1.5em;
     1454  }
     1455  .devhub-wrap.archive .meta a, .devhub-wrap.search .meta a {
     1456    color: #21759b;
     1457  }
     1458}
     1459@media (min-width: 43em) {
     1460  .devhub-wrap.archive .meta, .devhub-wrap.search .meta {
     1461    float: right;
     1462  }
     1463  .devhub-wrap.archive .sourcefile, .devhub-wrap.search .sourcefile {
     1464    float: left;
     1465  }
    14271466}
    14281467@media (max-width: 43em) {
    … …  
    14981537    width: 99%;
    14991538  }
    1500 }
     1539  .devhub-wrap .usage article {
     1540    width: 100%;
     1541  }
     1542}
Note: See TracChangeset for help on using the changeset viewer.