WordPress.org
Get WordPress

Making WordPress.org

Ticket #3117: 3117.4.diff

File 3117.4.diff, 13.6 KB (added by iandunn, 7 years ago)

Minor iteration on 3.diff

  • new file wc-post-types/inc/schedule.php 

    diff --git wc-post-types/inc/schedule.php wc-post-types/inc/schedule.php
new file mode 100644
index 0000000..416ebb7
    - +  
     1<?php
     2
     3namespace WordCamp\Post_Types\Schedule;
     4
     5defined( 'WPINC' ) || die();
     6
     7
     8/*
     9 * todo
     10 * make sure preserve all the functionality of the existing
     11 * implement all the functionality of the new
     12 * add length to session ui/save
     13 * test and make compatible w/ personalized schedule builder
     14 * give people working on https://meta.trac.wordpress.org/ticket/3306 and https://trello.com/c/kLVDRj5s/56-wordcamp-design-templates a heads up about this, since it might be best if they design default styles for it rather than old schedule
     15 * test all the scenarios listed at https://meta.trac.wordpress.org/ticket/3117#comment:2. lightning talks too, if not already covered there.
     16 * once ready for testing, deploy behind a filter
     17 * once ready for all sites, enable feature flag
     18 */
     19
     20
     21/**
     22 * Render the `[schedule]` shortcode using markup and styles for a CSS Grid-based approach.
     23 *
     24 * @param array $attributes
     25 * @param array $tracks
     26 * @param array $sessions
     27 *
     28 * @return string
     29 */
     30function render_grid_schedule( $attributes, $tracks, $sessions ) {
     31        $time_format = get_option( 'time_format', 'g:i a' );
     32
     33        /*
     34         * Remove duplicate session IDs.
     35         *
     36         * This can't be done in `get_schedule_sessions()` because the table schedule relies on them being there.
     37         */
     38        foreach ( $sessions as $time_slot => $session_ids ) {
     39                $sessions[ $time_slot ] = array_unique( $session_ids );
     40        }
     41
     42        ob_start();
     43        require_once( dirname( __DIR__ ) . '/views/grid-schedule.php' );
     44        return ob_get_clean();
     45}

  • new file wc-post-types/views/grid-schedule.php 

    diff --git wc-post-types/views/grid-schedule.php wc-post-types/views/grid-schedule.php
new file mode 100644
index 0000000..411b024
    - +  
     1<?php
     2
     3namespace WordCamp\Post_Types\Schedule;
     4
     5defined( 'WPINC' ) || die();
     6
     7/**
     8 * todo
     9 *
     10 * @var array  $attributes
     11 * @var array  $tracks
     12 * @var array  $sessions
     13 * @var array  $columns
     14 * @var string $time_format
     15 */
     16
     17/*
     18 * todo
     19 *
     20 * move styles out of inline properties
     21 * move most css to external file, only put what needs to be generated inside <style>?
     22 * rename classes to match v1 schedule, have wordcamp prefix
     23 * want sensible default styles that will make schedule look good out of the box, but that each camp can override as they see fit
     24 * outputting <style> outside <head> is technically invalid, but pretty sure all browsers support it and always will
     25 * test with 0 tracks, 1 track, tracks with no sessions assigned to them, etc
     26 * people will want to set the track sorting order. can do that in css probably, but should provide easier way? like ui in wp-admin to drag/drop order?
     27 * what about short sessions (~5 minutes)? the amount of space required to display all the text is greater than the amount that would naturally be taken up by the sessions fractional units
     28 * test responsive
     29 * test a11y
     30 *
     31 * post prototype on make/community to get feedback. particularly interested in devex of customizing this. will people have to manually override a lot of the grid-* properties in order to do the things they want? if so, is that still less painful than the table schedule?
     32 */
     33
     34$time_slots = array_keys( $sessions );
     35
     36?>
     37
     38<style>
     39        /*************************
     40         * LAYOUT
     41         *************************/
     42        body {
     43                padding: 50px;
     44                max-width: 1100px;
     45                margin: 0 auto;
     46                line-height: 1.5;
     47        }
     48
     49        .track-slot {
     50                display: none;
     51        }
     52        .session {
     53                margin-bottom:  1em;
     54        }
     55
     56        @supports( display:grid ) {
     57                @media screen and (min-width:700px) {
     58                        .schedule {
     59                                display: grid;
     60                        }
     61
     62                        /* a background for the sticky tracks */
     63                        .schedule::after {
     64                                display: block;
     65                                content: '';
     66                                position: sticky;
     67                                top: 0;
     68                                grid-column: track-1 / -1;
     69                                grid-row: tracks;
     70                                z-index: 999;
     71                                background-color: rgba(255,255,255,.9);
     72                        }
     73
     74                        .track-slot {
     75                                display: block;
     76                                padding: 10px 5px 5px;
     77                                position: sticky;
     78                                top: 0; /* otherwise seeing a gap above in at least Firefox. */
     79                                z-index: 1000;
     80                        }
     81                        .session {
     82                                margin: 0;
     83                        }
     84                }
     85        }
     86
     87        .schedule {
     88                grid-gap: 1em;
     89                grid-template-rows:
     90                        [tracks] auto
     91                        <?php
     92                        for ( $i = $time_slots[0]; $i < $time_slots[ count( $time_slots ) - 1 ]; $i += ( 5 * 60 ) ) : ?>
     93                                [time-<?php echo esc_attr( date( 'Hi', $i ) ); ?>] 2px
     94                        <?php endfor; ?>
     95
     96                 /* Note 1:
     97                        In this format, gridlines will need to be "named" in 24hr time
     98
     99                        Note 2: Use "auto" instead of "1fr" for a more compact schedule where height of a slot is not proportional to the session length. Implementing a "compact" shortcode attribute might make sense for this!
     100                */
     101                ;
     102                grid-template-columns:
     103                        [times] 4em
     104                        [track-<?php echo esc_html( $tracks[0]->slug ); ?>-start] 1fr
     105                        <?php for ( $i = 0; $i < count( $tracks ) - 1; $i++ ) : ?>
     106                                [track-<?php echo esc_html( $tracks[ $i ]->slug ); ?>-end track-<?php echo esc_html( $tracks[ $i + 1 ]->slug ); ?>-start] 1fr
     107                        <?php endfor; ?>
     108                        [track-<?php echo esc_html( $tracks[ $i ]->slug ); ?>-end]
     109                ;
     110        }
     111
     112        /*************************
     113         * VISUAL STYLES
     114         *************************/
     115        .text {
     116                max-width: 750px;
     117                font-size: 18px;
     118                margin: 0 auto 50px;
     119        }
     120
     121        .meta {
     122                color: #555;
     123                font-style: italic;
     124        }
     125        .meta a {
     126                color: #555;
     127        }
     128
     129        hr {
     130                margin: 40px 0;
     131        }
     132
     133        .session {
     134                padding: .5em;
     135                border-radius: 2px;
     136                font-size: 14px;
     137        }
     138
     139        .title,
     140        .time-slot {
     141                margin: 0;
     142                font-size: 1em;
     143        }
     144
     145        .track-slot,
     146        .time-slot {
     147                font-weight: bold;
     148                font-size:.75em;
     149        }
     150
     151        span {
     152                display: block;
     153        }
     154
     155        .track-many {
     156                display: flex;
     157                justify-content: center;
     158                align-items: center;
     159                background: #ccc;
     160                color: #000;
     161        }
     162
     163        ins {
     164                text-decoration: none;
     165                background-color: #ddffdd;
     166        }
     167
     168
     169
     170        /* these styles won't be in the patch, they'd be custom css for a site */
     171        .track-robertson-auditorium-upstairs {
     172                background-color: #1259B2;
     173                color: #fff;
     174        }
     175
     176        .track-fisher-banquet-room-downstairs {
     177                background-color: #687f00;
     178                color: #fff;
     179        }
     180
     181        .track-3 {
     182                background-color: #544D69;
     183                color: #fff;
     184        }
     185
     186        .track-4 {
     187                background-color: #c35500;
     188                color: #fff;
     189        }
     190</style>
     191
     192<div class="schedule">
     193        <?php foreach ( $tracks as $track ) : ?>
     194                <span class="track-slot" aria-hidden="true" style="grid-column: track-<?php echo esc_attr( $track->slug ); ?>; grid-row: tracks;">
     195                        <?php echo esc_html( $track->name ); ?>
     196                </span>
     197        <?php endforeach; ?>
     198
     199        <?php foreach ( $sessions as $time_slot => $session_ids ) : ?>
     200                <h2 class="time-slot" style="grid-column: times; grid-row: time-<?php echo esc_attr( date( 'Hi', $time_slot ) ); ?>;">
     201                        <?php echo esc_html( date_i18n( $time_format, $time_slot ) ); ?>
     202                </h2>
     203
     204                <?php foreach ( $session_ids as $session_id ) : ?>
     205                        <?php
     206
     207                        $session        = get_post( $session_id );
     208                        $speaker_ids    = get_post_meta( $session_id, '_wcpt_speaker_id' );
     209                        $end_time       = $time_slot + ( absint( $session->_wcpt_session_length ) * 60 );       // todo needs to be a valid grid line, so only every 5 minutes. probably restrict in UI picker though.
     210                        $session_tracks = get_the_terms( $session->ID, 'wcb_track' );
     211                        $track_classes  = preg_filter( '/^/', 'track-', wp_list_pluck( $session_tracks, 'slug' ) );
     212
     213                        $speakers_query = array(
     214                                'post_type'      => 'wcb_speaker',
     215                                'post__in'       => $speaker_ids,
     216                                'posts_per_page' => 99,
     217                        );
     218
     219                        $speakers = $speaker_ids ? get_posts( $speakers_query ) : array();
     220
     221                        ?>
     222
     223                        <div
     224                                class="session session-<?php echo esc_attr( $session->post_name ); ?> <?php echo esc_attr( implode( ' ', $track_classes ) ); ?>"
     225                                style="
     226                                        grid-column-start: track-<?php echo esc_attr( $session_tracks[ 0 ]->slug ); ?>-start;
     227                                        grid-column-end: track-<?php echo esc_attr( $session_tracks[ count( $session_tracks ) - 1 ]->slug ); ?>-end;
     228                                        grid-row-start: time-<?php echo esc_attr( date( 'Hi', $time_slot ) ); ?>;
     229                                        grid-row-end: time-<?php echo esc_attr( date( 'Hi', $end_time ) ); ?>;
     230                                "
     231                        >
     232                                <h3 class="title">
     233                                        <?php echo esc_html( $session->post_title ); ?>
     234                                </h3>
     235
     236                                <span class="time">
     237                                        <?php echo esc_html( date_i18n( $time_format, $time_slot ) ); ?>
     238                                        -
     239                                        <?php echo esc_html( date_i18n( $time_format, $end_time ) ); ?>
     240                                </span>
     241
     242                                <?php if ( $session_tracks ) : ?>
     243                                        <ul>
     244                                                <?php foreach ( $session_tracks as $track ) : ?>
     245                                                        <li class="track">
     246                                                                <?php echo esc_attr( $track->name ); ?>
     247                                                        </li>
     248                                                <?php endforeach; ?>
     249                                        </ul>
     250                                <?php endif; ?>
     251
     252                                <?php if ( $speakers ) : ?>
     253                                        <ul class="author">
     254                                                <?php foreach ( $speakers as $speaker ) : ?>
     255                                                        <li>
     256                                                                <?php echo esc_html( $speaker->post_title ); ?>
     257                                                        </li>
     258                                                <?php endforeach; ?>
     259                                        </ul>
     260                                <?php endif; ?>
     261                        </div>
     262                <?php endforeach; ?>
     263        <?php endforeach; ?>
     264</div>

  • wc-post-types/wc-post-types.php 

    diff --git wc-post-types/wc-post-types.php wc-post-types/wc-post-types.php
index cc9e84c..fbb88ac 100644
     
    44 * Plugin Description: Sessions, Speakers, Sponsors and much more.
    55 */
    66
     7use WordCamp\Post_Types\Schedule;
     8
    79require( 'inc/back-compat.php' );
    810require_once( 'inc/favorite-schedule-shortcode.php' );
    911
    … … class WordCamp_Post_Types_Plugin { 
    518520        }
    519521
    520522        /**
    521          * The [schedule] shortcode callback (experimental)
     523         * Render the appropriate version of the `[schedule]` shortcode.
    522524         *
    523          * @todo implement date arg
    524          * @todo implement anchor for session_link
    525          * @todo maybe simplify $attr['custom']
    526          * @todo cleanup
     525         * @param array  $attr
     526         * @param string $content
     527         *
     528         * @return string
    527529         */
    528530        function shortcode_schedule( $attr, $content ) {
    529531                $this->enqueue_schedule_shortcode_dependencies();
    … … class WordCamp_Post_Types_Plugin { 
    532534                $tracks                      = get_schedule_tracks( $attr['tracks'] );
    533535                $tracks_explicitly_specified = 'all' !== $attr['tracks'];
    534536                $sessions                    = get_schedule_sessions( $attr['date'], $tracks_explicitly_specified, $tracks );
    535                 $columns                     = get_schedule_columns( $tracks, $sessions, $tracks_explicitly_specified );
    536537
     538                if ( wcorg_skip_feature( 'css-grid-schedule' ) ) {
     539                        $columns = get_schedule_columns( $tracks, $sessions, $tracks_explicitly_specified );
     540                        $output  = $this->render_table_schedule( $attr, $content, $tracks, $sessions, $columns );
     541                } else {
     542                        require_once( __DIR__ . '/inc/schedule.php' );
     543                        $output = Schedule\render_grid_schedule( $attr, $tracks, $sessions );
     544                }
     545
     546                $output .= $this->fav_session_email_form();
     547
     548                return $output;
     549        }
     550
     551        /**
     552         * The [schedule] shortcode callback (experimental)
     553         *
     554         * @todo implement date arg
     555         * @todo implement anchor for session_link
     556         * @todo maybe simplify $attr['custom']
     557         * @todo cleanup
     558         */
     559        function render_table_schedule( $attr, $content, $tracks, $sessions, $columns ) {
    537560                $html  = '<table class="wcpt-schedule" border="0">';
    538561                $html .= '<thead>';
    539562                $html .= '<tr>';
    … … class WordCamp_Post_Types_Plugin { 
    704727
    705728                $html .= '</tbody>';
    706729                $html .= '</table>';
    707                 $html .= $this->fav_session_email_form();
     730
    708731                return $html;
    709732        }
    710733
    … … class WordCamp_Post_Types_Plugin { 
    17341757                $session_hours    = ( $session_time ) ? date( 'g', $session_time )     : date( 'g' );
    17351758                $session_minutes  = ( $session_time ) ? date( 'i', $session_time )     : '00';
    17361759                $session_meridiem = ( $session_time ) ? date( 'a', $session_time )     : 'am';
     1760                $session_length   = absint( get_post_meta( $post->ID, '_wcpt_session_length', true ) ); // todo default to 30 minutes or 45 ?
    17371761                $session_type     = get_post_meta( $post->ID, '_wcpt_session_type', true );
    17381762                $session_slides   = get_post_meta( $post->ID, '_wcpt_session_slides', true );
    17391763                $session_video    = get_post_meta( $post->ID, '_wcpt_session_video',  true );
    … … class WordCamp_Post_Types_Plugin { 
    17441768                <p>
    17451769                        <label for="wcpt-session-date"><?php _e( 'Date:', 'wordcamporg' ); ?></label>
    17461770                        <input type="text" id="wcpt-session-date" data-date="<?php echo esc_attr( $session_date ); ?>" name="wcpt-session-date" value="<?php echo esc_attr( $session_date ); ?>" /><br />
     1771
    17471772                        <label><?php _e( 'Time:', 'wordcamporg' ); ?></label>
    17481773
    17491774                        <select name="wcpt-session-hour" aria-label="<?php _e( 'Session Start Hour', 'wordcamporg' ); ?>">
    … … class WordCamp_Post_Types_Plugin { 
    17651790                        <select name="wcpt-session-meridiem" aria-label="<?php _e( 'Session Meridiem', 'wordcamporg' ); ?>">
    17661791                                <option value="am" <?php selected( 'am', $session_meridiem ); ?>>am</option>
    17671792                                <option value="pm" <?php selected( 'pm', $session_meridiem ); ?>>pm</option>
    1768                         </select>
     1793                        </select><br />
     1794
     1795                        <label for="wcpt-session-length">
     1796                                <?php
     1797                                // translators: todo
     1798                                esc_html_e( 'Length:', 'wordcamporg' );
     1799                                ?>
     1800
     1801                                <!-- todo dropdown for every 5 minutes instead of text input? what about a full-day workshop that's ~7 hours? what if it has a break in the middle for lunch? -->
     1802                                <input type="number" name="wcpt-session-length" value="<?php echo esc_attr( $session_length ); ?>" />
     1803                                <?php
     1804                                // translators: todo
     1805                                esc_html_e( 'minutes', 'wordcamporg' );
     1806                                ?>
     1807                        </label>
     1808                        <br />
    17691809                </p>
    17701810
    17711811                <p>
    … … class WordCamp_Post_Types_Plugin { 
    19642004                        ) );
    19652005                        update_post_meta( $post_id, '_wcpt_session_time', $session_time );
    19662006
     2007                        $session_length = absint( $_POST['wcpt-session-length'] );
     2008                        update_post_meta( $post_id, '_wcpt_session_length', $session_length );
     2009
    19672010                        // Update session type
    19682011                        $session_type = sanitize_text_field( $_POST['wcpt-session-type'] );
    19692012                        if ( ! in_array( $session_type, array( 'session', 'custom' ) ) ) {