Changeset 7261

Timestamp:

06/01/2018 05:34:59 PM (8 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:

• css/shortcodes.css (modified) (2 diffs)
• js/favourite-sessions.js (modified) (2 diffs)
• wc-post-types.php (modified) (4 diffs)

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

@@ -137 +137 @@
 }
 
+/* Style the tabs */
+.fav-session-share-tab {
+        overflow: hidden;
+        border: 1px solid #ccc;
+        background-color: #f1f1f1;
+        display: table;
+        table-layout: fixed;
+        width: 100%;
+}
+
+/* Style the buttons inside the tabs */
+.fav-session-share-tab div {
+        background-color: inherit;
+        text-align: center;
+        display: table-cell;
+        border: none;
+        outline: none;
+        cursor: pointer;
+        padding: 12px 16px;
+        transition: 0.3s;
+        font-size: 14px;
+}
+
+/* Change background color of buttons on hover */
+.fav-session-share-tab div:hover {
+        background-color: #ddd;
+}
+
+/* Create an active/current tablink class */
+.fav-session-share-tab div.active {
+        background-color: #ccc;
+}
+
+/* Style the tab content */
+.fav-session-share-tabcontent {
+        display: none;
+        padding: 12px 14px;
+        border: 1px solid #ccc;
+        border-top: none;
+        min-height: 145px;
+        background-color: #ccc;
+}
+
 #fav-session-email-form {
         margin: 10px;
@@ -254 +297 @@
 }
 
+@media print {
+        .wcb-session-favourite-icon,
+        .show-email-form,
+        .email-form {
+                display: none !important;
+        }
+
+        .wcpt-schedule td.wcb-favourite-session div {
+                opacity: 1 !important;
+        }
+}
+
 /*
  * [sessions]

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wc-post-types/js/favourite-sessions.js

@@ -39 +39 @@
                 var favSessions = FavSessions.get();
 
-                // Display email form only if there are any selected sessions.
+                // Display share form only if there are any selected sessions.
                 if ( Object.keys( favSessions ).length > 0 ) {
                         $( '.show-email-form' ).show();
+                        $( '.email-form' ).show();
                 } else {
                         $( '.show-email-form' ).hide();
+                        $( '.email-form' ).addClass( 'fav-session-div-hide' ).removeClass( 'fav-session-div-show' );
+                        $( '.email-form' ).hide();
                 }
         }
@@ -164 +167 @@
         } );
 
+        // In case email tab is hidden, use the next tab as default.
+        var defaultTab = 'email';
+        if ( 0 === $( '#fav-session-tab-email' ).length ) {
+                defaultTab = 'print';
+        }
+
+        $( '#fav-session-tab-' + defaultTab ).show();
+        $( '#fav-session-tab-' + defaultTab ).addClass( 'active' );
+        $( '#fav-session-btn-' + defaultTab ).addClass( 'active' );
+
+        $( '.fav-session-tablinks' ).click( function( event ) {
+                var i, tabContent, tabLinks;
+
+                tabContent = document.getElementsByClassName( 'fav-session-share-tabcontent' );
+
+                for ( i = 0; i < tabContent.length; i++ ) {
+                        $( tabContent[ i ] ).hide();
+                }
+
+                tabLinks = document.getElementsByClassName( 'fav-session-tablinks' );
+
+                $( tabLinks ).removeClass( 'active' );
+
+                var element         = $( this );
+                var idStartPosition = 'fav-session-btn-'.length;
+                var tabName         = 'fav-session-tab-' + element.attr( 'id' ).substring( idStartPosition );
+
+                $( document.getElementById( tabName ) ).show();
+                $( event.currentTarget ).addClass( 'active' )
+        });
+
+
+        $( '#fav-session-print' ).click( function( event ) {
+                $( '.wcpt-schedule td div' ).css( 'opacity', 0.3 );
+                window.print();
+                $( '.wcpt-schedule td div' ).css( 'opacity', 1 );
+        });
+
         initFavouriteSessions();
 } );

sites/trunk/wordcamp.org/public_html/wp-content/plugins/wc-post-types/wc-post-types.php

@@ -706 +706 @@
                 $html .= '</tbody>';
                 $html .= '</table>';
-                $html .= $this->fav_session_email_form();
+                $html .= $this->fav_session_share_form();
                 return $html;
         }
@@ -745 +745 @@
          * @return string HTML code that represents the form to send emails and a link to show and hide it.
          */
-        function fav_session_email_form() {
-                static $email_form_count = 0;
-
-                // Skip email form if it is disabled or it was already added to document.
-                if ( email_fav_sessions_disabled() || $email_form_count !== 0 ) {
+        function fav_session_share_form() {
+                static $share_form_count = 0;
+
+                // Skip share form if it was already added to document.
+                if ( 0 !== $share_form_count ) {
                         return '';
                 }
@@ -757 +757 @@
 
                 <div class="email-form fav-session-email-form-hide">
-                        <div id="fav-session-email-form">
-                                <?php esc_html_e( 'Send me my favorite sessions:', 'wordcamporg' ); ?>
-
-                                <form id="fav-sessions-form">
-                                        <input type="text" name="email_address" id="fav-sessions-email-address" placeholder="my@email.com" />
-                                        <input type="submit" value="<?php esc_attr_e( 'Send', 'wordcamporg' ); ?>" />
-                                </form>
+                        <!-- Tab links -->
+                        <div class="fav-session-share-tab">
+                                <?php if ( ! email_fav_sessions_disabled() ) : ?>
+                                        <div class="fav-session-tablinks" id="fav-session-btn-email">
+                                                <?php esc_html_e( 'Email', 'wordcamporg' ); ?>
+                                        </div>
+                                <?php endif; ?>
+
+                                <div class="fav-session-tablinks" id="fav-session-btn-print">
+                                        <?php esc_html_e( 'Print', 'wordcamporg' ); ?>
+                                </div>
                         </div>
-                        <div class="fav-session-email-wait-spinner"></div>
-                        <div class="fav-session-email-result"></div>
+
+                        <!-- Tab content -->
+                        <?php if ( ! email_fav_sessions_disabled() ) : ?>
+                                <div id="fav-session-tab-email" class="fav-session-share-tabcontent">
+                                        <div id="fav-session-email-form">
+                                                <?php esc_html_e( 'Send me my favorite sessions:', 'wordcamporg' ); ?>
+
+                                                <form id="fav-sessions-form">
+                                                        <input type="text" name="email_address" id="fav-sessions-email-address" placeholder="me@protonmail.com" />
+                                                        <input type="submit" value="<?php esc_attr_e( 'Send', 'wordcamporg' ); ?>" />
+                                                </form>
+                                        </div>
+
+                                        <div class="fav-session-email-wait-spinner"></div>
+                                        <div class="fav-session-email-result"></div>
+                                </div>
+                        <?php endif; ?>
+
+                        <div id="fav-session-tab-print" class="fav-session-share-tabcontent">
+                                <button id="fav-session-print">
+                                        <?php esc_html_e( 'Print favorite sessions', 'wordcamporg' ); ?>
+                                </button>
+                        </div>
                 </div>
 
@@ -775 +800 @@
 
                 <?php
-                $email_form = ob_get_clean();
-
-                $email_form_count++;
-
-                return $email_form;
+                $share_form = ob_get_clean();
+
+                $share_form_count++;
+
+                return $share_form;
         }