WordPress.org
Get WordPress

Making WordPress.org

Ticket #3117: 3117.2.diff

File 3117.2.diff, 12.4 KB (added by iandunn, 7 years ago)

Dynamically generate markup/css

  • 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..ba54946
    - +  
     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 * // todo add extra params
     26 *
     27 *
     28 * @return string
     29 */
     30function render_grid_schedule( $attributes, $tracks, $sessions ) {
     31        $time_format = get_option( 'time_format', 'g:i a' );
     32
     33        ob_start();
     34        require_once( dirname( __DIR__ ) . '/views/grid-schedule.php' );
     35        return ob_get_clean();
     36}

  • 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..7653e3f
    - +  
     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 easier way?
     27 */
     28
     29?>
     30
     31<style>
     32        /*************************
     33         * LAYOUT
     34         *************************/
     35        body {
     36                padding: 50px;
     37                counter-reset: session;
     38                max-width: 1100px;
     39                margin: 0 auto;
     40                line-height: 1.5;
     41        }
     42
     43        .track-slot {
     44                display: none;
     45        }
     46        .session {
     47                margin-bottom:  1em;
     48        }
     49
     50        @supports( display:grid ) {
     51                @media screen and (min-width:700px) {
     52                        .schedule {
     53                                display: grid;
     54                        }
     55
     56                        /* a background for the sticky tracks */
     57                        .schedule::after {
     58                                display: block;
     59                                content: '';
     60                                position: sticky;
     61                                top: 0;
     62                                grid-column: track-1 / -1;
     63                                grid-row: tracks;
     64                                z-index: 999;
     65                                background-color: rgba(255,255,255,.9);
     66                        }
     67
     68                        .track-slot {
     69                                display: block;
     70                                padding: 10px 5px 5px;
     71                                position: sticky;
     72                                top: 0; /* otherwise seeing a gap above in at least Firefox. */
     73                                z-index: 1000;
     74                        }
     75                        .session {
     76                                margin: 0;
     77                        }
     78                }
     79        }
     80
     81        .schedule {
     82                grid-gap: 1em;
     83                grid-template-rows:
     84                        [tracks] auto
     85                        <?php
     86                        foreach ( $sessions as $time_slot => $session_ids ) : ?>
     87                                [time-<?php echo esc_attr( date( 'Hi', $time_slot ) ); ?>] 1fr
     88                        <?php endforeach; ?>
     89
     90                 /* Note 1:
     91                        In this format, gridlines will need to be "named" in 24hr time
     92
     93                        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!
     94                */
     95                ;
     96                grid-template-columns:
     97                        [times] 4em
     98                        [track-<?php echo esc_html( $tracks[0]->slug ); ?>-start] 1fr
     99                        <?php for ( $i = 0; $i < count( $tracks ) - 1; $i++ ) : ?>
     100                                [track-<?php echo esc_html( $tracks[ $i ]->slug ); ?>-end track-<?php echo esc_html( $tracks[ $i + 1 ]->slug ); ?>-start] 1fr
     101                        <?php endfor; ?>
     102                        [track-<?php echo esc_html( $tracks[ $i ]->slug ); ?>-end]
     103                ;
     104        }
     105
     106        /*************************
     107         * VISUAL STYLES
     108         *************************/
     109        .text {
     110                max-width: 750px;
     111                font-size: 18px;
     112                margin: 0 auto 50px;
     113        }
     114
     115        .meta {
     116                color: #555;
     117                font-style: italic;
     118        }
     119        .meta a {
     120                color: #555;
     121        }
     122
     123        hr {
     124                margin: 40px 0;
     125        }
     126
     127        .session {
     128                padding: .5em;
     129                border-radius: 2px;
     130                font-size: 14px;
     131        }
     132
     133        .title,
     134        .time-slot {
     135                margin: 0;
     136                font-size: 1em;
     137        }
     138
     139        body {
     140                counter-reset: session-count;
     141        }
     142        .title::before {
     143                counter-increment: session-count;
     144                content: 'Session #' counter(session-count) ': ';
     145        }
     146
     147        .track-slot,
     148        .time-slot {
     149                font-weight: bold;
     150                font-size:.75em;
     151        }
     152
     153        span {
     154                display: block;
     155        }
     156
     157        .track-many {
     158                display: flex;
     159                justify-content: center;
     160                align-items: center;
     161                background: #ccc;
     162                color: #000;
     163        }
     164
     165        ins {
     166                text-decoration: none;
     167                background-color: #ddffdd;
     168        }
     169
     170
     171
     172        /* these styles won't be in the patch, they'd be custom css for a site */
     173        .track-robertson-auditorium-upstairs {
     174                background-color: #1259B2;
     175                color: #fff;
     176        }
     177
     178        .track-fisher-banquet-room-downstairs {
     179                background-color: #687f00;
     180                color: #fff;
     181        }
     182
     183        .track-3 {
     184                background-color: #544D69;
     185                color: #fff;
     186        }
     187
     188        .track-4 {
     189                background-color: #c35500;
     190                color: #fff;
     191        }
     192</style>
     193
     194<div class="schedule">
     195        <?php foreach ( $tracks as $track ) : ?>
     196                <span class="track-slot" aria-hidden="true" style="grid-column: track-<?php echo esc_attr( $track->slug ); ?>; grid-row: tracks;">
     197                        <?php echo esc_html( $track->name ); ?>
     198                </span>
     199        <?php endforeach; ?>
     200
     201        <?php foreach ( $sessions as $time_slot => $session_ids ) : ?>
     202                <h2 class="time-slot" style="grid-column: times; grid-row: time-<?php echo esc_attr( date( 'Hi', $time_slot ) ); ?>;">
     203                        <?php echo esc_html( date_i18n( $time_format, $time_slot ) ); ?>
     204                </h2>
     205
     206                <?php foreach ( $session_ids as $session_id ) : ?>
     207                        <?php
     208
     209                        $session        = get_post( $session_id );
     210                        $speakers       = get_posts( array( 'post__in' => get_post_meta( $session_id, '_wcpt_speaker_id' ) ) );
     211                        $end_time       = $time_slot + ( absint( $session->_wcpt_session_length ) * 60 );
     212                        $session_tracks = get_the_terms( $session->ID, 'wcb_track' );
     213                        $track_classes  = preg_filter( '/^/', 'track-', wp_list_pluck( $session_tracks, 'slug' ) );
     214
     215                        ?>
     216
     217                        <div
     218                                class="session session-<?php echo esc_attr( $session->post_name ); ?> <?php echo esc_attr( implode( ' ', $track_classes ) ); ?>"
     219                                style="
     220                                        grid-column: track-<?php echo esc_attr( $session_tracks[ 0 ]->slug ); ?>-start;
     221                                        grid-row: time-<?php echo esc_attr( date( 'Hi', $time_slot ) ); ?> / time-<?php echo esc_attr( date( 'Hi', $end_time ) ); ?>;
     222                                "
     223                        >
     224                                <h3 class="title">
     225                                        <?php echo esc_html( $session->post_title ); ?>
     226                                </h3>
     227
     228                                <span class="time">
     229                                        <?php echo esc_html( date_i18n( $time_format, $time_slot ) ); ?>
     230                                        -
     231                                        <?php echo esc_html( date_i18n( $time_format, $end_time ) ); ?>
     232                                </span>
     233
     234                                <span class="track">
     235                                        <?php echo esc_attr( implode( ', ', wp_list_pluck( $session_tracks, 'name' ) ) ); ?>
     236                                </span>
     237
     238                                <?php if ( $speakers ) : ?>
     239                                        <ul class="author">
     240                                                <?php foreach ( $speakers as $speaker ) : ?>
     241                                                        <li>
     242                                                                <?php echo esc_html( $speaker->post_title ); ?>
     243                                                        </li>
     244                                                <?php endforeach; ?>
     245                                        </ul>
     246                                <?php endif; ?>
     247                        </div>
     248                <?php endforeach; ?>
     249        <?php endforeach; ?>
     250</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' ) ) ) {