WordPress.org
Get WordPress

Plugin Directory

Changeset 1501924


Ignore:
Timestamp:
09/24/2016 01:31:18 PM (10 years ago)
Author:
skoldin
Message:

Fix z-index issue and add the capability to use button image

Location:
click-to-scroll/trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • click-to-scroll/trunk/assets/css/back.css

    r1484533 r1501924  
    2727}
    2828
    29 /*
    30 #cts_reset {
    31     margin-left: 15px;
     29.cts-button-image {
     30    max-width: 150px;
    3231}
    33 */
     32
     33.cts-button-image img {
     34    max-width: 100%;
     35}

  • click-to-scroll/trunk/assets/css/style.css

    r1481666 r1501924  
    1111    opacity: 0;
    1212    visibility: hidden;
     13    z-index: 9999;
    1314}
    1415
    … …  
    3738    transition: border-color 0.3s;
    3839}
     40
     41.cts-button-image {
     42    max-width: 150px;
     43}
     44
     45.cts-button-image img {
     46    max-width: 100%;
     47}

  • click-to-scroll/trunk/assets/css/style.min.css

    r1481666 r1501924  
    1 .cts-button{display:block;position:fixed;bottom:30px;right:30px;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;opacity:0;visibility:hidden}.cts-button.active{opacity:1;visibility:visible}.cts-button:focus{outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.cts-button-icon{position:absolute;left:50%;top:50%;width:0;height:0;-webkit-transition:border-color .3s;-moz-transition:border-color .3s;-ms-transition:border-color .3s;-o-transition:border-color .3s;transition:border-color .3s}
     1.cts-button{display:block;position:fixed;bottom:30px;right:30px;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s;opacity:0;visibility:hidden;z-index:9999}.cts-button.active{opacity:1;visibility:visible}.cts-button:focus{outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.cts-button-icon{position:absolute;left:50%;top:50%;width:0;height:0;-webkit-transition:border-color .3s;-moz-transition:border-color .3s;-ms-transition:border-color .3s;-o-transition:border-color .3s;transition:border-color .3s}.cts-button-image{max-width:150px}.cts-button-image img{max-width:100%}

  • click-to-scroll/trunk/assets/js/back.js

    r1484533 r1501924  
    2929        });
    3030
    31         function conditionalLogic(name, dependencyName) {
     31        // conditional logic for image use
     32        conditionalLogic('arrow_width', 'use_image', true);
     33        conditionalLogic('arrow_height', 'use_image', true);
     34        conditionalLogic('button_width', 'use_image', true);
     35        conditionalLogic('button_height', 'use_image', true);
     36        conditionalLogic('button_arrow_color', 'use_image', true);
     37        conditionalLogic('button_arrow_hover_color', 'use_image', true);
     38        conditionalLogic('button_bg_color', 'use_image', true);
     39        conditionalLogic('button_bg_hover_color', 'use_image', true);
     40        conditionalLogic('button_border_radius', 'use_image', true);
     41        conditionalLogic('image_url', 'use_image');
     42
     43        $('[name="cts_options[use_image]"]').on('change', function() {
     44            conditionalLogic('arrow_width', 'use_image', true);
     45            conditionalLogic('arrow_height', 'use_image', true);
     46            conditionalLogic('button_width', 'use_image', true);
     47            conditionalLogic('button_height', 'use_image', true);
     48            conditionalLogic('button_arrow_color', 'use_image', true);
     49            conditionalLogic('button_arrow_hover_color', 'use_image', true);
     50            conditionalLogic('button_bg_color', 'use_image', true);
     51            conditionalLogic('button_bg_hover_color', 'use_image', true);
     52            conditionalLogic('button_border_radius', 'use_image', true);
     53            conditionalLogic('image_url', 'use_image');
     54        });
     55
     56        function conditionalLogic(name, dependencyName, hide) {
    3257            var $dep = $('[name="cts_options[' + dependencyName + ']"]'),
    3358                $field = $('[name="cts_options[' + name + ']"]');
    … …  
    3560
    3661            if( $dep.length && $field.length ) {
    37                 if( $dep.is(':checked') ) {
     62
     63                if( ( ! hide && $dep.is(':checked') ) || ( hide && ! $dep.is(':checked') ) ) {
    3864                    $field.closest('tr').removeClass('hidden').slideDown();
    3965                } else {
    … …  
    4369        }
    4470
     71        $('.cts-upload-field').on('click', '.upload-btn', function(e) {
     72            e.preventDefault();
     73
     74            var $that = $(this);
     75
     76            var image = wp.media({
     77                title: 'Upload Image',
     78                // mutiple: true if you want to upload multiple files at once
     79                multiple: false
     80            }).open()
     81                .on('select', function(e){
     82                    // This will return the selected image from the Media Uploader, the result is an object
     83                    var uploaded_image = image.state().get('selection').first();
     84
     85                    // We convert uploaded_image to a JSON object to make accessing it easier
     86                    var image_url = uploaded_image.toJSON().url;
     87                    // Let's assign the url value to the input field
     88                    $that.parent().find('.image_url').val(image_url);
     89                });
     90        });
     91
     92
     93
     94
    4595    });
     96
     97    $('#submit').click(function () {
     98        if( validateFields() !== true ) {
     99            return false;
     100        }
     101    });
     102
     103    function validateFields() {
     104        if( $('[name="cts_options[use_image]"]').is(':checked') && ! $('[name="cts_options[image_url]"]').val() ) {
     105            // todo: create an object to keep JS strings translations
     106            alert('Please upload the button image');
     107
     108            return false;
     109        }
     110
     111        return true;
     112    }
    46113})(jQuery);

  • click-to-scroll/trunk/click-to-scroll.php

    r1491234 r1501924  
    1313 * Plugin Name:       Click to Scroll
    1414 * Description:       Add a customizable scroll-to-top button to your site and the admin area
    15  * Version:           1.2.0
     15 * Version:           1.3.0
    1616 * Author:            Igor Skoldin
    1717 * Author URI:        https://profiles.wordpress.org/skoldin/

  • click-to-scroll/trunk/inc/CTS_Backend.php

    r1491234 r1501924  
    4747        <?php }
    4848
     49        public function cts_button_image_field() {
     50            $this->show_field('image', 'image_url');
     51        }
     52
    4953        public function cts_button_width_field() {
    5054            $this->show_field('size', 'button_width', 35);
     55        }
     56
     57        public function cts_button_use_image_field() {
     58            $this->show_field('checkbox', 'use_image', 0);
    5159        }
    5260
    … …  
    136144
    137145            // todo: maybe show the fields with a loop
     146
     147            add_settings_field(
     148                'use-image',
     149                __( 'I would like to use an image', 'cts' ),
     150                array( $this, 'cts_button_use_image_field' ),
     151                'cts-options',
     152                'style'
     153            );
     154
     155            add_settings_field(
     156                'image-url',
     157                __( 'Upload the button image', 'cts' ),
     158                array( $this, 'cts_button_image_field' ),
     159                'cts-options',
     160                'style'
     161            );
    138162
    139163            add_settings_field(
    … …  
    264288            wp_enqueue_script( 'jquery-ui-slider' );
    265289            wp_enqueue_style( 'jquery-ui-smoothness', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css' );
    266             wp_enqueue_script( 'cts_admin_scripts', CTS_URL . '/assets/js/back.js', array( 'jquery' ), '1.2.0', true );
    267             wp_enqueue_style( 'cts_admin_styles', CTS_URL . '/assets/css/back.css', null, '1.2.0' );
     290            wp_enqueue_script( 'cts_admin_scripts', CTS_URL . '/assets/js/back.js', array( 'jquery' ), '1.3.0', true );
     291            wp_enqueue_style( 'cts_admin_styles', CTS_URL . '/assets/css/back.css', null, '1.3.0' );
     292
     293            wp_enqueue_media();
    268294        }
    269295
    … …  
    286312            }
    287313
     314            if ( $type === 'image' ) {
     315                $this->show_image_field( $val, $name );
     316            }
    288317            if ( $type === 'size' ) {
    289318                $this->show_number_field( $val, $name, 1, 0, null, 'px' );
    … …  
    314343
    315344            echo "<input type='number' step='$step' $min_val $max_val value='$val' id='cts-$name' name='cts_options[$name]'>$after";
     345        }
     346
     347        private function show_image_field( $val, $name ) {
     348            ?>
     349            <div class="cts-upload-field">
     350                <input type='url' value='<?php echo $val; ?>' id='cts-<?php echo $name; ?>' class='image_url' name='cts_options[<?php echo $name; ?>]'>
     351                <input type='button' name='upload-btn' class='upload-btn button-secondary' value='Upload Image'>
     352            </div>
     353            <?php
    316354        }
    317355

  • click-to-scroll/trunk/inc/CTS_Frontend.php

    r1491234 r1501924  
    3434            $options = $this->options;
    3535
    36             // need to check it here as well because the default values may be not saved
    37             $button_width  = ( ! empty( $options['button_width'] ) ) ? $options['button_width'] : 40;
    38             $button_height = ( ! empty( $options['button_height'] ) ) ? $options['button_height'] : 40;
     36            $uses_image = ( $this->options['use_image'] == 1 && ! empty($this->options['image_url']) ) ? true : false;
    3937
    40             $arrow_width       = ( ! empty( $options['arrow_width'] ) ) ? $options['arrow_width'] : 20;
    41             $arrow_width_half  = round( $arrow_width / 2 );
    42             $arrow_height      = ( ! empty( $options['arrow_height'] ) ) ? $options['arrow_height'] : 15;
    43             $arrow_height_half = round( $arrow_height / 2 );
     38            if( ! $uses_image ) {
     39                // need to check it here as well because the default values may be not saved
     40                $button_width  = ( ! empty( $options['button_width'] ) ) ? $options['button_width'] : 40;
     41                $button_height = ( ! empty( $options['button_height'] ) ) ? $options['button_height'] : 40;
    4442
    45             $button_bg_color          = ( ! empty( $options['button_bg_color'] ) ) ? $options['button_bg_color'] : '#333333';
    46             $button_arrow_color       = ( ! empty( $options['button_arrow_color'] ) ) ? $options['button_arrow_color'] : '#ffffff';
    47             $button_bg_hover_color    = ( ! empty( $options['button_bg_hover_color'] ) ) ? $options['button_bg_hover_color'] : '#6D6D6D';
    48             $button_arrow_hover_color = ( ! empty( $options['button_arrow_hover_color'] ) ) ? $options['button_arrow_hover_color'] : '#ffffff';
     43                $arrow_width       = ( ! empty( $options['arrow_width'] ) ) ? $options['arrow_width'] : 20;
     44                $arrow_width_half  = round( $arrow_width / 2 );
     45                $arrow_height      = ( ! empty( $options['arrow_height'] ) ) ? $options['arrow_height'] : 15;
     46                $arrow_height_half = round( $arrow_height / 2 );
    4947
    50             $button_opacity = ( ! empty( $options['button_opacity'] ) ) ? $options['button_opacity'] : 1;
     48                $button_bg_color          = ( ! empty( $options['button_bg_color'] ) ) ? $options['button_bg_color'] : '#333333';
     49                $button_arrow_color       = ( ! empty( $options['button_arrow_color'] ) ) ? $options['button_arrow_color'] : '#ffffff';
     50                $button_bg_hover_color    = ( ! empty( $options['button_bg_hover_color'] ) ) ? $options['button_bg_hover_color'] : '#6D6D6D';
     51                $button_arrow_hover_color = ( ! empty( $options['button_arrow_hover_color'] ) ) ? $options['button_arrow_hover_color'] : '#ffffff';
     52
     53                $button_border_radius = ( isset( $options['button_border_radius'] ) ) ? $options['button_border_radius'] : 50;
     54            }
     55
     56            $button_opacity       = ( ! empty( $options['button_opacity'] ) ) ? $options['button_opacity'] : 1;
    5157            $button_hover_opacity = ( ! empty( $options['button_hover_opacity'] ) ) ? $options['button_hover_opacity'] : 1;
    52 
    53             $button_border_radius = ( isset($options['button_border_radius']) ) ? $options['button_border_radius'] : 50; ?>
     58            ?>
    5459            <style>
    55                 .cts-button {
     60                .cts-button-css {
    5661                    width: <?php echo $button_width; ?>px;
    5762                    height: <?php echo $button_height; ?>px;
    … …  
    6873                }
    6974
    70                 .cts-button-icon {
     75                .cts-button-css .cts-button-icon {
    7176                    margin-left: -<?php echo $arrow_width_half; ?>px;
    7277                    margin-top: -<?php echo $arrow_height_half; ?>px;
    … …  
    7782                }
    7883
    79                 .cts-button:hover {
     84                .cts-button-css:hover {
    8085                    background-color: <?php echo $button_bg_hover_color; ?>;
    8186                }
    8287
    83                 .cts-button:hover .cts-button-icon {
     88                .cts-button-css:hover .cts-button-icon {
    8489                    border-bottom-color: <?php echo $button_arrow_hover_color; ?>;
    8590                }
    … …  
    9095            $suffix = ( defined('SCRIPT_DEBUG') && SCRIPT_DEBUG ) ? '' : '.min';
    9196
    92             wp_enqueue_style( 'cts_styles', CTS_URL . '/assets/css/style.min.css', null, '1.2.0' );
     97            wp_enqueue_style( 'cts_styles', CTS_URL . '/assets/css/style.min.css', null, '1.3.0' );
    9398            wp_enqueue_script( 'cts_scripts', CTS_URL . '/assets/js/front'.$suffix.'.js', array( 'jquery' ), '1.2.0', true );
    9499        }
    95100
    96101        public function show_button() {
    97             echo "<a href='#' class='cts-button'><span class='cts-button-icon'></span></a>";
    98 
     102            if( $this->options['use_image'] == 1 && ! empty($this->options['image_url']) ) {
     103                echo "<a href='#' class='cts-button cts-button-image'><img src='{$this->options['image_url']}' alt='Scroll to Top Button'/></a>";
     104            } else {
     105                echo "<a href='#' class='cts-button cts-button-css'><span class='cts-button-icon'></span></a>";
     106            }
    99107        }
    100108

  • click-to-scroll/trunk/readme.txt

    r1491234 r1501924  
    6161== Changelog ==
    6262
     63= 1.3.0 =
     64* Fix: z-index issue because of which the button may be overlapped by other site elements
     65* Add: the capability to use a button image
     66
    6367= 1.2.0 =
    6468
Note: See TracChangeset for help on using the changeset viewer.