WordPress.org

Making WordPress.org

Changeset 7261


Ignore:
Timestamp:
06/01/2018 05:34:59 PM (4 years ago)
Author:
iandunn
Message:

WordCamp Post Types: Add print button and stylesheet to schedule shortcode.

As a result, UI tabs were introduced, and some corresponding "email" references were renamed, to reflect the more generic nature that the form now has.

Props egmanekki.
See #2733.

Location:
sites/trunk/wordcamp.org/public_html/wp-content/plugins/wc-post-types
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wc-post-types/css/shortcodes.css

    r6268 r7261  
    137137}
    138138
     139/* Style the tabs */
     140.fav-session-share-tab {
     141    overflow: hidden;
     142    border: 1px solid #ccc;
     143    background-color: #f1f1f1;
     144    display: table;
     145    table-layout: fixed;
     146    width: 100%;
     147}
     148
     149/* Style the buttons inside the tabs */
     150.fav-session-share-tab div {
     151    background-color: inherit;
     152    text-align: center;
     153    display: table-cell;
     154    border: none;
     155    outline: none;
     156    cursor: pointer;
     157    padding: 12px 16px;
     158    transition: 0.3s;
     159    font-size: 14px;
     160}
     161
     162/* Change background color of buttons on hover */
     163.fav-session-share-tab div:hover {
     164    background-color: #ddd;
     165}
     166
     167/* Create an active/current tablink class */
     168.fav-session-share-tab div.active {
     169    background-color: #ccc;
     170}
     171
     172/* Style the tab content */
     173.fav-session-share-tabcontent {
     174    display: none;
     175    padding: 12px 14px;
     176    border: 1px solid #ccc;
     177    border-top: none;
     178    min-height: 145px;
     179    background-color: #ccc;
     180}
     181
    139182#fav-session-email-form {
    140183    margin: 10px;
     
    254297}
    255298
     299@media print {
     300    .wcb-session-favourite-icon,
     301    .show-email-form,
     302    .email-form {
     303        display: none !important;
     304    }
     305
     306    .wcpt-schedule td.wcb-favourite-session div {
     307        opacity: 1 !important;
     308    }
     309}
     310
    256311/*
    257312 * [sessions]
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wc-post-types/js/favourite-sessions.js

    r6268 r7261  
    3939        var favSessions = FavSessions.get();
    4040
    41         // Display email form only if there are any selected sessions.
     41        // Display share form only if there are any selected sessions.
    4242        if ( Object.keys( favSessions ).length > 0 ) {
    4343            $( '.show-email-form' ).show();
     44            $( '.email-form' ).show();
    4445        } else {
    4546            $( '.show-email-form' ).hide();
     47            $( '.email-form' ).addClass( 'fav-session-div-hide' ).removeClass( 'fav-session-div-show' );
     48            $( '.email-form' ).hide();
    4649        }
    4750    }
     
    164167    } );
    165168
     169    // In case email tab is hidden, use the next tab as default.
     170    var defaultTab = 'email';
     171    if ( 0 === $( '#fav-session-tab-email' ).length ) {
     172        defaultTab = 'print';
     173    }
     174
     175    $( '#fav-session-tab-' + defaultTab ).show();
     176    $( '#fav-session-tab-' + defaultTab ).addClass( 'active' );
     177    $( '#fav-session-btn-' + defaultTab ).addClass( 'active' );
     178
     179    $( '.fav-session-tablinks' ).click( function( event ) {
     180        var i, tabContent, tabLinks;
     181
     182        tabContent = document.getElementsByClassName( 'fav-session-share-tabcontent' );
     183
     184        for ( i = 0; i < tabContent.length; i++ ) {
     185            $( tabContent[ i ] ).hide();
     186        }
     187
     188        tabLinks = document.getElementsByClassName( 'fav-session-tablinks' );
     189
     190        $( tabLinks ).removeClass( 'active' );
     191
     192        var element         = $( this );
     193        var idStartPosition = 'fav-session-btn-'.length;
     194        var tabName         = 'fav-session-tab-' + element.attr( 'id' ).substring( idStartPosition );
     195
     196        $( document.getElementById( tabName ) ).show();
     197        $( event.currentTarget ).addClass( 'active' )
     198    });
     199
     200
     201    $( '#fav-session-print' ).click( function( event ) {
     202        $( '.wcpt-schedule td div' ).css( 'opacity', 0.3 );
     203        window.print();
     204        $( '.wcpt-schedule td div' ).css( 'opacity', 1 );
     205    });
     206
    166207    initFavouriteSessions();
    167208} );
  • sites/trunk/wordcamp.org/public_html/wp-content/plugins/wc-post-types/wc-post-types.php

    r7220 r7261  
    706706        $html .= '</tbody>';
    707707        $html .= '</table>';
    708         $html .= $this->fav_session_email_form();
     708        $html .= $this->fav_session_share_form();
    709709        return $html;
    710710    }
     
    745745     * @return string HTML code that represents the form to send emails and a link to show and hide it.
    746746     */
    747     function fav_session_email_form() {
    748         static $email_form_count = 0;
    749 
    750         // Skip email form if it is disabled or it was already added to document.
    751         if ( email_fav_sessions_disabled() || $email_form_count !== 0 ) {
     747    function fav_session_share_form() {
     748        static $share_form_count = 0;
     749
     750        // Skip share form if it was already added to document.
     751        if ( 0 !== $share_form_count ) {
    752752            return '';
    753753        }
     
    757757
    758758        <div class="email-form fav-session-email-form-hide">
    759             <div id="fav-session-email-form">
    760                 <?php esc_html_e( 'Send me my favorite sessions:', 'wordcamporg' ); ?>
    761 
    762                 <form id="fav-sessions-form">
    763                     <input type="text" name="email_address" id="fav-sessions-email-address" placeholder="my@email.com" />
    764                     <input type="submit" value="<?php esc_attr_e( 'Send', 'wordcamporg' ); ?>" />
    765                 </form>
     759            <!-- Tab links -->
     760            <div class="fav-session-share-tab">
     761                <?php if ( ! email_fav_sessions_disabled() ) : ?>
     762                    <div class="fav-session-tablinks" id="fav-session-btn-email">
     763                        <?php esc_html_e( 'Email', 'wordcamporg' ); ?>
     764                    </div>
     765                <?php endif; ?>
     766
     767                <div class="fav-session-tablinks" id="fav-session-btn-print">
     768                    <?php esc_html_e( 'Print', 'wordcamporg' ); ?>
     769                </div>
    766770            </div>
    767             <div class="fav-session-email-wait-spinner"></div>
    768             <div class="fav-session-email-result"></div>
     771
     772            <!-- Tab content -->
     773            <?php if ( ! email_fav_sessions_disabled() ) : ?>
     774                <div id="fav-session-tab-email" class="fav-session-share-tabcontent">
     775                    <div id="fav-session-email-form">
     776                        <?php esc_html_e( 'Send me my favorite sessions:', 'wordcamporg' ); ?>
     777
     778                        <form id="fav-sessions-form">
     779                            <input type="text" name="email_address" id="fav-sessions-email-address" placeholder="me@protonmail.com" />
     780                            <input type="submit" value="<?php esc_attr_e( 'Send', 'wordcamporg' ); ?>" />
     781                        </form>
     782                    </div>
     783
     784                    <div class="fav-session-email-wait-spinner"></div>
     785                    <div class="fav-session-email-result"></div>
     786                </div>
     787            <?php endif; ?>
     788
     789            <div id="fav-session-tab-print" class="fav-session-share-tabcontent">
     790                <button id="fav-session-print">
     791                    <?php esc_html_e( 'Print favorite sessions', 'wordcamporg' ); ?>
     792                </button>
     793            </div>
    769794        </div>
    770795
     
    775800
    776801        <?php
    777         $email_form = ob_get_clean();
    778 
    779         $email_form_count++;
    780 
    781         return $email_form;
     802        $share_form = ob_get_clean();
     803
     804        $share_form_count++;
     805
     806        return $share_form;
    782807    }
    783808
Note: See TracChangeset for help on using the changeset viewer.