Changeset 7261

Timestamp:

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