WordPress.org
Get WordPress

Plugin Directory

Changeset 1297650


Ignore:
Timestamp:
11/30/2015 07:55:07 PM (10 years ago)
Author:
zonnix
Message:

add options to style the strings

Location:
typed/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • typed/trunk/js/admin.js

    r1292197 r1297650  
    1010
    1111jQuery(document).ready(function ($) {
     12    //color field
     13    $('.typed-color-field').wpColorPicker();
     14
    1215    //typed admin perview
    1316    if ($('.typed_perview_div').length > 0) {

  • typed/trunk/readme.txt

    r1293821 r1297650  
    11=== Typed Js ===
    2 Contributors: zonnix
    3 Tags: typed, animate string, typing, typing effect, typewriter effect, typed effect, typed.js, js, animate, animation
     2Contributors: Zonnix
     3Tags: typed, animate string, typing effect, typewriter effect, typed effect, typed.js
    44Requires at least: 3.0
    55Tested up to: 4.3
    … …  
    3333= 1.0.0 =
    3434* Initial version.
     35
     36= 1.0.1 =
     37* Adding options to style the output strings.

  • typed/trunk/typed.php

    r1293821 r1297650  
    7272            add_meta_box('typed-perview', 'Perview', array($this, 'typed_perview_meta_box_callback'), 'typed');
    7373            add_meta_box('typed-options', 'Typed Options', array($this, 'typed_meta_box_callback'), 'typed');
     74            add_meta_box('typed-display-options', 'Display Options', array($this, 'typed_display_meta_box_callback'), 'typed');
    7475        }
    7576
    … …  
    8586            }
    8687            $strings = trim($strings, ',');
     88            $font_size = get_post_meta($post_id, 'font_size', true);
     89            $color = get_post_meta($post_id, 'font_color', true);
     90            $font_weight = get_post_meta($post_id, 'font_weight', true);
     91            $anchor_color = get_post_meta($post_id, 'anchor_color', true);
     92            $cursor_color = get_post_meta($post_id, 'cursor_color', true);
    8793            ?>
    8894            <style>
    … …  
    94100                    -ms-animation: blink 0.7s infinite;
    95101                    -o-animation: blink 0.7s infinite;
    96                     animation: blink 0.7s infinite;
     102                    animation: blink 0.7s infinite;                   
    97103                }
    98                 .shorCode{
    99                     background-color: #FaFaFa;
    100                     border-left: 4px solid #00a0f0;
     104
     105                .typed-div-<?php echo $post_id; ?> {
     106                    <?php if ($font_size): ?>font-size: <?php
     107                        echo $font_size . 'px;';
     108                    endif;
     109                    ?>
     110                        <?php if ($color): ?>color: <?php
     111                            echo $color . ';';
     112                        endif;
     113                        ?>
     114                        <?php if ($font_weight): ?>font-weight: <?php
     115                            echo $font_weight . ';';
     116                        endif;
     117                        ?>
     118                }
     119
     120                .typed-div-<?php echo $post_id; ?> a {
     121                    <?php if ($anchor_color): ?>color: <?php
     122                        echo $anchor_color . ';';
     123                    endif;
     124                    ?>
     125                }
     126
     127                .typed-div-<?php echo $post_id; ?> .typed-cursor {
     128                    <?php if ($cursor_color): ?>color: <?php
     129                        echo $cursor_color . ';';
     130                    endif;
     131                    ?>
    101132                }
    102133            </style>
    103             <span style="white-space:pre;" class="typed_perview_div" data-cursor-char="<?php echo get_post_meta($post_id, 'cursor_char', true); ?>" data-cursor="<?php echo get_post_meta($post_id, 'show_cursor', true); ?>" data-strings="<?php echo $strings; ?>" data-speed="<?php echo get_post_meta($post_id, 'type_speed', true); ?>" data-delay="<?php echo get_post_meta($post_id, 'start_delay', true); ?>" data-back-delay="<?php echo get_post_meta($post_id, 'back_delay', true); ?>" data-back-speed="<?php echo get_post_meta($post_id, 'back_speed', true); ?>" data-loop="<?php echo get_post_meta($post_id, 'typed_loop', true); ?>"></span>
    104 
     134            <div class="typed-div-<?php echo $post_id; ?>">   
     135                <span style="white-space:pre;" class="typed_perview_div" data-cursor-char="<?php echo get_post_meta($post_id, 'cursor_char', true); ?>" data-cursor="<?php echo get_post_meta($post_id, 'show_cursor', true); ?>" data-strings="<?php echo $strings; ?>" data-speed="<?php echo get_post_meta($post_id, 'type_speed', true); ?>" data-delay="<?php echo get_post_meta($post_id, 'start_delay', true); ?>" data-back-delay="<?php echo get_post_meta($post_id, 'back_delay', true); ?>" data-back-speed="<?php echo get_post_meta($post_id, 'back_speed', true); ?>" data-loop="<?php echo get_post_meta($post_id, 'typed_loop', true); ?>"></span>
     136            </div>
    105137            <br><pre class="update-nag shorCode">Generated Shortcode: [typed id='<?php echo $post_id; ?>']</pre>
    106138            <?php
    … …  
    132164                            else:
    133165                                ?>
    134                                 <p><input type="text" name="typed_strings[]" value="<?php echo str_replace('"', "'", $string); ?>"/> <a href="javascript:void(0)" class="add_typed_string button-secondary">+</a></p>
     166                                <p><input type="text" name="typed_strings[]" value=""/> <a href="javascript:void(0)" class="add_typed_string button-secondary">+</a></p>
    135167                            <?php
    136168                            endif;
    … …  
    156188                        <td>
    157189                            <input type="text" value="<?php echo get_post_meta($post_id, 'back_speed', true) ? get_post_meta($post_id, 'back_speed', true) : 0; ?>" name="back_speed"/>
    158                             <br><span class="description">backspacing speed</span>
     190                            <br><span class="description">backspacing speed</span>
    159191                        </td>
    160192                    </tr>
    … …  
    187219                        </td>
    188220                    </tr>
     221                </tbody>
     222            </table>
     223            <?php
     224        }
     225
     226        public function typed_display_meta_box_callback($post) {
     227            $post_id = $post->ID;
     228            ?>
     229            <table class="widefat">
     230                <tbody>
     231                    <tr>
     232                        <td style="width: 15%;">Font Size</td>
     233                        <td>
     234                            <input type="text" value="<?php echo get_post_meta($post_id, 'font_size', true); ?>" name="font_size"/>
     235                        </td>
     236                    </tr>
     237                    <tr>
     238                        <td style="width: 15%;">Font Weight</td>
     239                        <td>
     240                            <input type="text" value="<?php echo get_post_meta($post_id, 'font_weight', true); ?>" name="font_weight"/>
     241                        </td>
     242                    </tr>
     243                    <tr>
     244                        <td>Color</td>
     245                        <td>
     246                            <input class="typed-color-field" type="text" value="<?php echo get_post_meta($post_id, 'font_color', true); ?>" name="font_color"/>
     247                        </td>
     248                    </tr>
     249                    <tr>
     250                        <td>Anchor Color</td>
     251                        <td>
     252                            <input class="typed-color-field" type="text" value="<?php echo get_post_meta($post_id, 'anchor_color', true); ?>" name="anchor_color"/>
     253                        </td>
     254                    </tr>
     255                    <tr>
     256                        <td>Cursor Color</td>
     257                        <td>
     258                            <input class="typed-color-field" type="text" value="<?php echo get_post_meta($post_id, 'cursor_color', true); ?>" name="cursor_color"/>
     259                        </td>
     260                    </tr>                   
    189261                </tbody>
    190262            </table>
    … …  
    214286
    215287            if (isset($_POST['post_type']) && 'typed' == $_POST['post_type']) {
     288                if (isset($_POST['font_size']))
     289                    update_post_meta($post_id, 'font_size', $_POST['font_size']);
     290
     291                if (isset($_POST['font_color']))
     292                    update_post_meta($post_id, 'font_color', $_POST['font_color']);
     293
     294                if (isset($_POST['anchor_color']))
     295                    update_post_meta($post_id, 'anchor_color', $_POST['anchor_color']);
     296
     297                if (isset($_POST['cursor_color']))
     298                    update_post_meta($post_id, 'cursor_color', $_POST['cursor_color']);
     299
     300                if (isset($_POST['font_weight']))
     301                    update_post_meta($post_id, 'font_weight', $_POST['font_weight']);
     302
    216303                if (isset($_POST['typed_strings']))
    217304                    update_post_meta($post_id, 'typed_strings', $_POST['typed_strings']);
    … …  
    249336                return;
    250337
     338            // Add the color picker css file     
     339            wp_enqueue_style('wp-color-picker');
    251340            wp_enqueue_script('typed-admin', plugin_dir_url(__FILE__) . '/js/typed.js', array('jquery'));
    252             wp_enqueue_script('script-admin', plugin_dir_url(__FILE__) . '/js/admin.js', array('jquery'));
     341            wp_enqueue_script('script-admin', plugin_dir_url(__FILE__) . '/js/admin.js', array('jquery', 'wp-color-picker'));
    253342        }
    254343
    … …  
    260349                $typed = get_post($post_id);
    261350                if ($typed) :
     351                    $font_size = get_post_meta($post_id, 'font_size', true);
     352                    $color = get_post_meta($post_id, 'font_color', true);
     353                    $font_weight = get_post_meta($post_id, 'font_weight', true);
     354                    $anchor_color = get_post_meta($post_id, 'anchor_color', true);
     355                    $cursor_color = get_post_meta($post_id, 'cursor_color', true);
    262356                    $typed_strings = get_post_meta($post_id, 'typed_strings', true);
    263357                    if (!$typed_strings)
    … …  
    270364                    $strings = trim($strings, ',');
    271365                    ?>
    272                     <span style="white-space:pre;" class="typed_perview_div" data-cursor-char="<?php echo get_post_meta($post_id, 'cursor_char', true); ?>" data-cursor="<?php echo get_post_meta($post_id, 'show_cursor', true); ?>" data-strings="<?php echo $strings; ?>" data-speed="<?php echo get_post_meta($post_id, 'type_speed', true); ?>" data-delay="<?php echo get_post_meta($post_id, 'start_delay', true); ?>" data-back-delay="<?php echo get_post_meta($post_id, 'back_delay', true); ?>" data-back-speed="<?php echo get_post_meta($post_id, 'back_speed', true); ?>" data-loop="<?php echo get_post_meta($post_id, 'typed_loop', true); ?>"></span>
     366                    <style>
     367                        .typed-div-<?php echo $post_id; ?> {
     368                            <?php if ($font_size): ?>font-size: <?php
     369                                echo $font_size . 'px;';
     370                            endif;
     371                            ?>
     372                                <?php if ($color): ?>color: <?php
     373                                    echo $color . ';';
     374                                endif;
     375                                ?>
     376                                <?php if ($font_weight): ?>font-weight: <?php
     377                                    echo $font_weight . ';';
     378                                endif;
     379                                ?>
     380                        }
     381
     382                        .typed-div-<?php echo $post_id; ?> a {
     383                            <?php if ($anchor_color): ?>color: <?php
     384                                echo $anchor_color . ';';
     385                            endif;
     386                            ?>
     387                        }
     388
     389                        .typed-div-<?php echo $post_id; ?> .typed-cursor {
     390                            <?php if ($cursor_color): ?>color: <?php
     391                                echo $cursor_color . ';';
     392                            endif;
     393                            ?>
     394                        }
     395                    </style>
     396                    <div class="typed-div-<?php echo $post_id; ?>">                       
     397                        <span style="white-space:pre;" class="typed_perview_div" data-cursor-char="<?php echo get_post_meta($post_id, 'cursor_char', true); ?>" data-cursor="<?php echo get_post_meta($post_id, 'show_cursor', true); ?>" data-strings="<?php echo $strings; ?>" data-speed="<?php echo get_post_meta($post_id, 'type_speed', true); ?>" data-delay="<?php echo get_post_meta($post_id, 'start_delay', true); ?>" data-back-delay="<?php echo get_post_meta($post_id, 'back_delay', true); ?>" data-back-speed="<?php echo get_post_meta($post_id, 'back_speed', true); ?>" data-loop="<?php echo get_post_meta($post_id, 'typed_loop', true); ?>"></span>
     398                    </div>
    273399                    <?php
    274400                endif;
Note: See TracChangeset for help on using the changeset viewer.