WordPress.org
Get WordPress

Plugin Directory

Changeset 1994656


Ignore:
Timestamp:
12/14/2018 10:27:38 AM (7 years ago)
Author:
electricfire
Message:

The 1.1 vesion of the plugin,

Location:
raw-html-modal-window/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • raw-html-modal-window/trunk/includes/css/default-user-styles.css

    r1976470 r1994656  
    11/* --- An Example of styles you can add to control the layout --- */
     2
     3
     4/* You can control the scrolling of the page underneath the
     5 * modal window by overriding the following style: */
     6
     7.efmw_active {
     8    /* Removing the comment tags on the next line will make your page scrollable */
     9    /* overflow: visible; */
     10}
     11
     12/* Note: the efmw_active class is appended to the body tag
     13 * when the modal window is displayed and removed when closed.
     14 */
    215
    316
    … …  
    1225    color: white;
    1326    background: #888888 url('wp-content/plugins/raw-html-modal-window/includes/images/demo-background-image.jpg') no-repeat top center / cover;
     27
     28    /* Note, if you want your modal window to be displayed
     29     * with the a background image on
     30     * more than the home page, specify the full absolute
     31     * path to your image, for example:
     32     *
     33     * https://your-site.com/wp-content/uploads/year/your-background-image.jpg
     34     */
     35
    1436    border:1px solid #AAA;
    1537    text-align:center;
    … …  
    2547    color: white;
    2648}
     49
     50
     51#efmw_modalContent h2 {
     52    color: white;
     53}

  • raw-html-modal-window/trunk/includes/css/styles.css

    r1976470 r1994656  
     1.efmw_active {
     2    overflow: hidden;
     3}
     4
     5
    16#efmw_modal,
    27#efmw_modalMask {

  • raw-html-modal-window/trunk/includes/js/modal_window.js

    r1976470 r1994656  
    2121        // Make the modal DIV visible:
    2222        document.getElementById('efmw_modal').style.opacity = 1;
     23        document.body.className += ' efmw_active';
     24
     25        window.addEventListener('keydown', function(evt) {
     26                if (parseInt(evt.keyCode, 10) === 27) {
     27                    closeModal();
     28                }
     29        });
    2330
    2431    } // End of openModal() function.
    … …  
    2936    function closeModal() {
    3037        'use strict';
     38
     39        // For debugging:
     40        // console.log('efmw_obj.delay_time: ' + efmw_obj.delay_time);
     41        // console.log('efmw_obj.fade_out_duration: ' + efmw_obj.fade_out_duration);
    3142
    3243        // Make the modal DIV invisible:
    … …  
    4354        setTimeout(function() {
    4455            var modal = document.getElementById('efmw_modal');
    45             modal.parentNode.removeChild(modal);
    46         }, efmw_fade_out_duration);
     56            modal.parentElement.removeChild(modal);
     57        }, efmw_obj.fade_out_duration);
     58
     59        //document.body.style.overflow = 'visible';
     60
     61        if (document.body.classList) {
     62            document.body.classList.remove('efmw_active');
     63        } else {
     64            document.body.className = document.body.className.replace(/efmw_active/, '');
     65        }
    4766
    4867    } // End of closeModal() function.
    … …  
    5877            openModal();
    5978
    60         }, efmw_delay_time );
     79        }, efmw_obj.delay_time );
    6180
    6281    });
    … …  
    6483})();
    6584
     85
    6686/* @license-end */

  • raw-html-modal-window/trunk/modal_window.php

    r1976470 r1994656  
    44 *  Plugin URI:
    55 *  Description: Show Modal Window on any page or post by specifying post id. This plugin is intended for users that feel comfortable editing HTML and CSS code for ultimate control of a pop-up window.
    6  *  Version: 1.0
     6 *  Version: 1.1
    77 *  Author: electric-fire
    88 *  Author URI: https://f-guitar.com/office
    … …  
    7676// ************ DISPLAYING THE RESULT ************ //
    7777
     78function efmw_display_modal_window( $opt ) {
     79
     80    echo '<script>
     81        var efmw_obj = {};
     82        efmw_obj.delay_time = parseInt( ' . $opt['delay'] . ', 10 );
     83        efmw_obj.fade_out_duration = parseInt( ' . $opt['fade_in_duration'] . ', 10 );
     84    </script>';
     85
     86    echo '<script>' . file_get_contents( plugin_dir_path( __FILE__ ) . 'includes/js/modal_window.js' ) . '</script>';
     87
     88
     89                /* Note:
     90                 * Four <div> structure for modal window is used
     91                 * becaue three <div> gets partially covered by
     92                 * the header with some themes.
     93                 */
     94?>
     95         <div id="efmw_modal" style="transition-duration:<?php echo $opt['fade_in_duration']; ?>ms;">
     96         <div id="efmw_modalMask" <?php
     97
     98                echo 'style="opacity:' .
     99                    ( (int) $opt['mask_opacity'] / 100 ) .
     100';filter:alpha(opacity=' .
     101$opt['mask_opacity'] .
     102');z-index:' .
     103$opt['z_index'] .
     104'"></div>';
     105?>
     106    <div id="efmw_modalFixedDiv" style="z-index:<?php
     107
     108echo ( (int) $opt['z_index'] + 8999 );
     109
     110?>">
     111                <div id="efmw_modalContent">
     112                    <a alt="Close Modal Window" title="Close Modal Window" id="efmw_closeModal" style="/* transition-duration:<?php /* echo $opt['fade_out_duration']; */ ?>ms; */">×</a>
     113                    <?php echo $opt['item_content']; ?>
     114                </div>
     115            </div>
     116        </div>
     117<?php
     118
     119} // End of efmw_display_modal_window() function.
     120
     121
     122function efmw_check_page( $opt ) {
     123    $flag = false;
     124
     125    if ( ( empty( $opt['only_on_pages'] ) )  && is_front_page() ) {
     126
     127        $flag = true;
     128
     129    } elseif (  empty( $opt['only_on_pages'] )   ) {
     130
     131        $flag = false;
     132
     133    } else {
     134
     135        $arr = explode( ' ', $opt['only_on_pages'] );
     136
     137        foreach ( $arr as $v ) {
     138
     139            if ( (int) $v === (int) get_the_ID() ) {
     140                $flag = true;
     141                break;
     142            }
     143        } // End of FOREACH loop.
     144
     145    } // End of IF-ELSE.
     146
     147    return $flag;
     148
     149} // End of efmw_check_page() function.
     150
     151
     152
     153
    78154// Register function to add output to page footer:
    79155add_action( 'init', function() {
    80156
     157    // For debugging:
     158    /*
     159    add_action( 'wp_head', function() {
     160
     161        $options = efmw_get_options();
     162        if ( efmw_check_page( $options ) ) {
     163            echo 'true';
     164        } else {
     165            echo 'false';
     166        }
     167        exit;
     168    } ); // End of wp_head.
     169     */
     170
     171
    81172    $options = efmw_get_options();
    82173
    83     ##if (true) {
    84     if ( !isset( $options['item_disabled'] ) || !$options['item_disabled'] ) {
    85 
    86         add_action( 'wp_footer', function() { // Need this extra add_action() function()to solve the checkbox auto checking and page id not available issue.
    87 
    88             $options = efmw_get_options();
    89 
    90             if ( ( empty( $options['only_on_pages'] ) )  && is_front_page() ) {
    91                     efmw_display_modal_window();
    92                     return;
    93             }
    94 
    95             $arr = explode( ' ', $options['only_on_pages'] );
    96 
    97             foreach ( $arr as $v ) {
    98 
    99                 if ( (int) $v === (int) get_the_ID() ) {
    100                     efmw_display_modal_window();
    101                     break;
    102                 }
    103 
    104             } // End of FOREACH loop.
    105 
    106         } ); // End of wp_head.
    107 
    108     } // End of IF.
    109 } );
    110 
    111 
    112 function efmw_display_modal_window() {
    113 
    114     $options = efmw_get_options();
    115     echo '<script>
    116         var efmw_delay_time = parseInt( ' . $options['delay'] . ', 10 );
    117         var efmw_fade_out_duration = parseInt( ' . $options['fade_in_duration'] . ', 10 );
    118     </script>';
    119 
    120     echo '<script>' . file_get_contents( plugin_dir_path( __FILE__ ) . 'includes/js/modal_window.js' ) . '</script>';
    121 
    122     ?>
    123    
    124 <?php
    125 
    126 } // End of efmw_display_modal_window() function.
    127 
    128 if ( !empty( efmw_get_options()['extra_styles'] ) ) {
    129 
    130 // DO NOT CHANGE INDENTATION:
    131     add_action( 'wp_head', function() {
    132 
     174    if ( isset( $options['item_disabled'] ) && ( (int) $options['item_disabled'] === 1 ) ) {
     175        return;
     176    } // End of item_disabled IF.
     177
     178
     179    // DO NOT CHANGE INDENTATION:
     180    add_action( 'wp_head', function() {
     181
     182        $options = efmw_get_options();
     183        if ( !efmw_check_page( $options ) ) {
     184            return;
     185        }
     186        // Output base styles:
    133187        echo '<style>
    134188            ' . file_get_contents( plugin_dir_path( __FILE__ ) . 'includes/css/styles.css' ) . '
    135189            </style>
    136             ';
    137 
    138         $options = efmw_get_options();
     190';
     191
     192        // Output styles entered by user:
     193        if ( !empty( $options['extra_styles'] ) ) {
    139194?>
    140 <style type="text/css">
    141 <?php echo $options['extra_styles']; ?>
    142 </style>
    143     <?php
    144 
    145     } );
    146 
    147 
    148     add_action( 'wp_footer', function() {
    149         $options = efmw_get_options();
    150 
    151         /* Note:
    152          * Four <div> structure for modal window is used
    153          * becaue three <div> gets partially covered by
    154          * the header with some themes.
    155          */
    156     ?>
    157          <div id="efmw_modal" style="transition-duration:<?php echo $options['fade_in_duration']; ?>ms;">
    158          <div id="efmw_modalMask" <?php
    159 
    160             echo 'style="opacity:' .
    161                 ( (int) $options['mask_opacity'] / 100 ) .
    162                 ';filter:alpha(opacity=' .
    163                     $options['mask_opacity'] .
    164                         ');z-index:' .
    165                  $options['z_index'] .
    166             '"></div>';
    167 ?>
    168             <div id="efmw_modalFixedDiv" style="z-index:<?php
    169 
    170                 echo ( (int) $options['z_index'] + 8999 );
    171 
    172             ?>">
    173                 <div id="efmw_modalContent">
    174                     <a alt="Close Modal Window" title="Close Modal Window" id="efmw_closeModal" style="/* transition-duration:<?php /* echo $options['fade_out_duration']; */ ?>ms; */">×</a>
    175                     <?php echo $options['item_content']; ?>
    176                 </div>
    177             </div>
    178         </div>
    179     <?php
    180 
    181     } );
    182 
    183 }
     195                        <style type="text/css">
     196                        <?php echo $options['extra_styles']; ?>
     197                        </style>
     198<?php
     199        }
     200
     201    } ); // End of wp_head add_action.
     202
     203
     204
     205        add_action( 'wp_footer', function() { // Need this extra add_action() function()to solve the checkbox auto checking and page id not available issue.
     206
     207            $options = efmw_get_options();
     208
     209            if ( efmw_check_page( $options ) ) {
     210                    efmw_display_modal_window( $options );
     211            }
     212
     213        } ); // End of wp_footer.
     214
     215
     216} ); // End add_action init.
     217
    184218
    185219// ************ DISPLAYING THE RESULT ************ //

  • raw-html-modal-window/trunk/readme.txt

    r1977459 r1994656  
    55Requires at least: 4.0
    66Requires PHP: 5.5.37
    7 Tested up to: 4.9.5
     7Tested up to: 5.0
    88Stable tag: 4.3
    99License: GPLv2 or later
    … …  
    3333== Changelog ==
    3434 
     35= 1.1 =
     36* Now the plugin appends the efmw_active css class to the body tag when the modal window displayed to control the scrolling of the page underneath.
     37* Added event listener for the escape button to close the window when it's pressed.
     38
    3539= 1.0 =
    3640* First version of the plugin.
Note: See TracChangeset for help on using the changeset viewer.