Esempio n. 1
0
function render_option($k, $v, $selected)
{
    if (is_array($v) && $v['name'] != '') {
        printf('<optgroup label="%s">', esc_attr($v['name']));
        if (!empty($v['options'])) {
            foreach ($v['options'] as $ok => $ov) {
                render_option($ok, $ov, $selected);
            }
        }
        printf('</optgroup>');
    } else {
        printf('<option value="%s"%s>%s</option>', esc_attr($k), in_array($k, (array) $selected) ? ' selected="selected"' : '', esc_attr($v));
    }
}
Esempio n. 2
0
/**
 * Background OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_background($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // defaults
    $style = '';
    $defaults = array('background-color' => '', 'background-image' => '', 'background-repeat' => '', 'background-attachment' => '', 'background-position' => '', 'background-pattern' => '');
    $value = wp_parse_args($value, $defaults);
    // collecting colorpicker attributes
    $atts = array();
    $atts['class'] = 'field';
    $atts['type'] = 'text';
    $atts['id'] = esc_attr($id . '-colorpicker');
    $atts['name'] = esc_attr($item['name'] . '[background-color]');
    if ($value['background-color']) {
        $atts['value'] = esc_attr($value['background-color']);
    }
    $style = '';
    if ($value['background-color']) {
        $style = ' style="background:' . $value['background-color'] . ';border-color:' . $value['background-color'] . '"';
    }
    // collecting upload attributes
    $upload_attrs = array();
    $upload_attrs['class'] = 'field upload' . ($value != '' ? ' has-file' : '');
    $upload_attrs['type'] = 'text';
    $upload_attrs['id'] = esc_attr($id);
    $upload_attrs['name'] = esc_attr($item['name'] . '[background-image]');
    if ($value['background-image']) {
        $upload_attrs['value'] = esc_attr($value['background-image']);
    }
    ?>

    <div <?php 
    echo build_section_class('section-background', $item);
    ?>
>
        <?php 
    build_heading($item, $is_widget);
    ?>

        <?php 
    build_description($item);
    ?>

        <?php 
    build_section_reset();
    ?>

        <div class="controls">
            <div class="color-picker pb10 clearfix">
            <?php 
    printf('<input%s />', spyropress_build_atts($atts));
    printf('<div class="color-box"><div%s></div></div>', $style);
    ?>
                
            </div>
            <div class="pb10 row-fluid">
                <div class="span6">
                    <select name="<?php 
    echo $item['name'];
    ?>
[background-repeat]" class="chosen" data-placeholder="<?php 
    esc_attr_e('Background Repeat', 'spyropress');
    ?>
">
                        <?php 
    foreach (spyropress_panel_background_repeat() as $key => $repeat) {
        render_option(esc_attr($key), esc_html($repeat), array($value['background-repeat']));
    }
    ?>

                    </select>
                </div>
                <div class="span6">
                    <select name="<?php 
    echo $item['name'];
    ?>
[background-attachment]" class="chosen" data-placeholder="<?php 
    esc_attr_e('Background Attachment', 'spyropress');
    ?>
">
                        <?php 
    foreach (spyropress_panel_background_attachment() as $key => $attachment) {
        render_option(esc_attr($key), esc_html($attachment), array($value['background-attachment']));
    }
    ?>

                    </select>
                </div>
            </div>
            <div class="pb10">
                <select name="<?php 
    echo $item['name'];
    ?>
[background-position]" class="chosen" data-placeholder="<?php 
    esc_attr_e('Background Position', 'spyropress');
    ?>
">
                    <?php 
    foreach (spyropress_panel_background_position() as $key => $position) {
        render_option(esc_attr($key), esc_html($position), array($value['background-position']));
    }
    ?>

                </select>
            </div>
            <div class="uploader pb10 clearfix">
            <?php 
    printf('<input%s />', spyropress_build_atts($upload_attrs));
    printf('<input class="upload_button button-secondary" type="button" value="' . __('Upload', 'spyropress') . '" id="upload_%s" />', $id);
    if (is_array(@getimagesize($value['background-image']))) {
        ?>

                <div class="screenshot" id="<?php 
        echo $id;
        ?>
_image">
                <?php 
        if ($value['background-image'] != '') {
            $remove = '<a href="javascript:(void);" class="remove-media">Remove</a>';
            $image = preg_match('/(^.*\\.jpg|jpeg|png|gif|ico*)/i', $value['background-image']);
            if ($image) {
                echo '<img src="' . $value['background-image'] . '" alt="" />' . $remove . '';
            } else {
                $parts = explode("/", $value['background-image']);
                for ($i = 0; $i < sizeof($parts); ++$i) {
                    $title = $parts[$i];
                }
                echo '<div class="no_image"><a href="' . $value['background-image'] . '">' . $title . '</a>' . $remove . '</div>';
            }
        }
        ?>

                </div>
            <?php 
    }
    ?>

            </div>
            <?php 
    if (isset($item['use_pattern']) && $item['use_pattern'] && isset($item['patterns'])) {
        ?>

            <div class="section-radio-img section-pattern">
                <h3 class="heading"><?php 
        _e('Background Patterns', 'spyropress');
        ?>
</h3>
                <ul id="bg_patterns">
                <?php 
        foreach ($item['patterns'] as $path => $label) {
            printf('
                            <li><label class="radio-img%6$s" for="%1$s">
                                <input type="radio" id="%1$s" name="%3$s[background-pattern]" value="%2$s" %5$s />
                                <img src="%4$s">
                            </label></li>', $item['name'] . '_' . $label, $path, $item['name'], $path, checked($value['background-pattern'], $path, false), $value['background-pattern'] == $path ? ' selected' : '');
        }
        ?>

                </ul>
                <div class="clear"></div>
            </div>
            <?php 
    }
    ?>

        </div>
    </div>
<?php 
    $ui_content = ob_get_clean();
    $js = "panelUi.bind_colorpicker( '{$id}-colorpicker' );";
    if ($is_widget) {
        if (!$is_builder) {
            add_jquery_ready($js);
        } else {
            $ui_content .= sprintf('<script type="text/javascript">%2$s//<![CDATA[%2$s %1$s %2$s//]]>%2$s</script>', $js, "\n");
        }
        return $ui_content;
    } else {
        echo $ui_content;
        add_jquery_ready($js);
    }
}
Esempio n. 3
0
/**
 * Typography OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_typography($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // setting default values
    $color = $cp_style = $tsc_style = '';
    $defaults = array('font-size' => '0px', 'line-height' => '0px', 'letter-spacing' => '0px', 'text-hshadow' => '0px', 'text-vshadow' => '0px', 'text-blur' => '0px', 'use' => 0, 'font-family' => '', 'font-style' => '', 'font-weight' => '', 'font-decoration' => '', 'font-transform' => '', 'font-google' => '', 'font-google-variant' => '', 'color' => '', 'text-shadowcolor' => '');
    $value = wp_parse_args($value, $defaults);
    // getting values
    if ($value['color']) {
        $cp_style = sprintf(' style="background:%1$s;border-color:%1$s"', $value['color']);
    }
    if ($value['text-shadowcolor']) {
        $tsc_style = sprintf(' style="background:%1$s;border-color:%1$s"', $value['text-shadowcolor']);
    }
    ?>

    <div id="<?php 
    echo $id;
    ?>
" <?php 
    echo build_section_class('section-typography section-full', $item);
    ?>
>
        <?php 
    build_heading($item, $is_widget);
    ?>

        <?php 
    build_description($item);
    ?>

        <div class="controls">
        <?php 
    // label for use google font
    printf('
                <label class="checkbox" for="%1$s-use">
                    <input type="checkbox" id="%1$s-use" name="%2$s[use]" value="1" %3$s />' . __('Use Google Fonts Instead', 'spyropress') . '</label>
            ', $id, $item['name'], checked($value['use'], 1, false));
    ?>

            <div class="row-fluid">
                <div class="span6">
                    <div class="pb10 web-font">
                        <strong class="sub"><?php 
    _e('Font Family', 'spyropress');
    ?>
</strong>
                        <select name="<?php 
    echo $item['name'];
    ?>
[font-family]" class="chosen-typo" data-placeholder="<?php 
    esc_attr_e('Select Font', 'spyropress');
    ?>
" data-css="font-family">
                        <?php 
    foreach (spyropress_panel_font_families() as $key => $family) {
        render_option(esc_attr($key), esc_html($family), array($value['font-family']));
    }
    ?>

                        </select>
                    </div>
                    <div class="pb10 web-font row-fluid">
                        <div class="span6">
                            <select name="<?php 
    echo $item['name'];
    ?>
[font-style]" class="chosen-typo" data-placeholder="<?php 
    esc_attr_e('Font Style', 'spyropress');
    ?>
" data-css="font-style">
                            <?php 
    foreach (spyropress_panel_font_styles() as $key => $style) {
        render_option(esc_attr($key), esc_html($style), array($value['font-style']));
    }
    ?>

                            </select>
                        </div>
                        <div class="span6">
                            <select name="<?php 
    echo $item['name'];
    ?>
[font-weight]" class="chosen-typo" data-placeholder="<?php 
    esc_attr_e('Font Weight', 'spyropress');
    ?>
" data-css="font-weight">
                            <?php 
    foreach (spyropress_panel_font_weights() as $key => $weight) {
        render_option(esc_attr($key), esc_html($weight), array($value['font-weight']));
    }
    ?>

                            </select>
                        </div>
                    </div>
                    <div class="pb10 google-font">
                        <strong class="sub"><?php 
    _e('Google Webfont Family', 'spyropress');
    ?>
</strong>
                        <select id="<?php 
    echo $id;
    ?>
-google" name="<?php 
    echo $item['name'];
    ?>
[font-google]" class="chosen-google-typo" data-placeholder="<?php 
    esc_attr_e('Google Webfont', 'spyropress');
    ?>
" data-selected="<?php 
    echo $value['font-google'];
    ?>
">
                        </select>
                    </div>
                    <div class="pb10 google-font">
                        <strong class="sub"><?php 
    _e('Google Webfont Variants', 'spyropress');
    ?>
</strong>
                        <select id="<?php 
    echo $id;
    ?>
-google-variant" name="<?php 
    echo $item['name'];
    ?>
[font-google-variant]" class="chosen-google-variant" data-placeholder="<?php 
    esc_attr_e('Google Webfont Variants', 'spyropress');
    ?>
" data-selected="<?php 
    echo $value['font-google-variant'];
    ?>
">
                        </select>
                    </div>
                </div>
                <div class="span6">
                    <div class="color-picker pb10 clearfix">
                        <strong class="sub">&nbsp;</strong>
                        <input type="text" class="field" name="<?php 
    echo $item['name'];
    ?>
[color]" id="<?php 
    echo $id;
    ?>
-colorpicker" value="<?php 
    echo $value['color'];
    ?>
" />
                        <div class="color-box"><div<?php 
    echo $cp_style;
    ?>
></div></div>
                    </div>
                    <div class="pb10 range-slider">
                        <strong class="sub"><?php 
    _e('Font Size:', 'spyropress');
    ?>
 <span><?php 
    echo $value['font-size'];
    ?>
</span></strong>
                        <div data-css="font-size" id="<?php 
    echo $id;
    ?>
-fontsize" class="slider"></div>
                        <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[font-size]" id="<?php 
    echo $id;
    ?>
-fontsize-value" value="<?php 
    echo $value['font-size'];
    ?>
" />
                    </div>
                </div>
            </div>
            <div id="<?php 
    echo $id;
    ?>
-preview" class="font-preview" style="<?php 
    spyropress_font_preview($value);
    ?>
">
                <?php 
    _e('Pack my box with five dozen liquor jugs.<br />The quick brown fox jumps over the lazy dog.', 'spyropress');
    ?>

            </div>
        </div>
        <div class="clear"></div>
        <a href="#" class="advance-settings"><?php 
    _e('Advance Settings', 'spyropress');
    ?>
</a>
        <div class="controls" style="display: none;">
            <div class="row-fluid">
                <div class="span3">
                    <select name="<?php 
    echo $item['name'];
    ?>
[font-decoration]" class="chosen-typo" data-placeholder="<?php 
    esc_attr_e('Text Decoration', 'spyropress');
    ?>
" data-css="text-decoration">
                    <?php 
    foreach (spyropress_panel_font_decoration() as $key => $decoration) {
        render_option(esc_attr($key), esc_html($decoration), array($value['font-decoration']));
    }
    ?>

                    </select>
                </div>
                <div class="span3">
                    <select name="<?php 
    echo $item['name'];
    ?>
[font-transform]" class="chosen-typo" data-placeholder="<?php 
    esc_attr_e('Text Transform', 'spyropress');
    ?>
" data-css="text-transform">
                    <?php 
    foreach (spyropress_panel_font_transform() as $key => $transform) {
        render_option(esc_attr($key), esc_html($transform), array($value['font-transform']));
    }
    ?>

                    </select>
                </div>
                <div class="span3 range-slider">
                    <strong class="sub"><?php 
    _e('Line Height:', 'spyropress');
    ?>
 <span><?php 
    echo $value['line-height'];
    ?>
</span></strong>
                    <div data-css="line-height" id="<?php 
    echo $id;
    ?>
-linehight" class="slider"></div>
                    <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[line-height]" id="<?php 
    echo $id;
    ?>
-lineheight-value" value="<?php 
    echo $value['line-height'];
    ?>
" />
                </div>
                <div class="span3 range-slider">
                    <strong class="sub"><?php 
    _e('Letter Spacing:', 'spyropress');
    ?>
 <span><?php 
    echo $value['letter-spacing'];
    ?>
</span></strong>
                    <div data-css="letter-spacing" id="<?php 
    echo $id;
    ?>
-letterspacing" class="slider"></div>
                    <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[letter-spacing]" id="<?php 
    echo $id;
    ?>
-letterspacing-value" value="<?php 
    echo $value['letter-spacing'];
    ?>
" />
                </div>
            </div>
            <br />
            <strong class="sub"><?php 
    _e('Text-Shadow', 'spyropress');
    ?>
</strong>
            <div class="row-fluid">
                <div class="span3 range-slider">
                    <strong class="sub"><?php 
    _e('h-Shadow:', 'spyropress');
    ?>
 <span><?php 
    echo $value['text-hshadow'];
    ?>
</span></strong>
                    <div data-css="text-shadow" id="<?php 
    echo $id;
    ?>
-hshadow" class="slider"></div>
                    <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[text-hshadow]" id="<?php 
    echo $id;
    ?>
-hshadow-value" value="<?php 
    echo $value['text-hshadow'];
    ?>
" />
                </div>
                <div class="span3 range-slider">
                    <strong class="sub"><?php 
    _e('v-Shadow:', 'spyropress');
    ?>
 <span><?php 
    echo $value['text-vshadow'];
    ?>
</span></strong>
                    <div data-css="text-shadow" id="<?php 
    echo $id;
    ?>
-vshadow" class="slider"></div>
                    <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[text-vshadow]" id="<?php 
    echo $id;
    ?>
-vshadow-value" value="<?php 
    echo $value['text-vshadow'];
    ?>
" />
                </div>
                <div class="span3 range-slider">
                    <strong class="sub"><?php 
    _e('Blur:', 'spyropress');
    ?>
 <span><?php 
    echo $value['text-blur'];
    ?>
</span></strong>
                    <div data-css="text-shadow" id="<?php 
    echo $id;
    ?>
-blur" class="slider"></div>
                    <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[text-blur]" id="<?php 
    echo $id;
    ?>
-blur-value" value="<?php 
    echo $value['text-blur'];
    ?>
" />
                </div>
                <div class="span3 color-picker clearfix">
                    <input type="text" class="field shadow" name="<?php 
    echo $item['name'];
    ?>
[text-shadowcolor]" id="<?php 
    echo $id;
    ?>
-shadowcolor" value="<?php 
    echo $value['text-shadowcolor'];
    ?>
" />
                    <div class="color-box"><div<?php 
    echo $tsc_style;
    ?>
></div></div>
                </div>
            </div>
        </div>
    </div>
<?php 
    /* content */
    $ui_content = ob_get_clean();
    /* js */
    $fontsize_value = str_replace('px', '', $value['font-size']);
    $line_height_value = str_replace('px', '', $value['line-height']);
    $letter_spacing_value = str_replace('px', '', $value['letter-spacing']);
    $slider_hshadow_value = str_replace('px', '', $value['text-hshadow']);
    $slider_vshadow_value = str_replace('px', '', $value['text-vshadow']);
    $slider_blur_value = str_replace('px', '', $value['text-blur']);
    $typo['colorpicker'] = array($id . '-colorpicker', $id . '-shadowcolor');
    $typo['slider'] = array("#{$id}-fontsize" => array('range' => 'min', 'min' => 1, 'max' => 120, 'value' => (int) $fontsize_value), "#{$id}-linehight" => array('range' => 'min', 'min' => 7, 'max' => 89, 'value' => (int) $line_height_value), "#{$id}-letterspacing" => array('min' => -20, 'max' => 20, 'value' => (int) $letter_spacing_value), "#{$id}-hshadow" => array('min' => -50, 'max' => 50, 'value' => (int) $slider_hshadow_value), "#{$id}-vshadow" => array('min' => -50, 'max' => 50, 'value' => (int) $slider_vshadow_value), "#{$id}-blur" => array('range' => 'min', 'min' => 0, 'max' => 100, 'value' => (int) $slider_blur_value));
    $js = "panelUi.bind_typography( '{$id}', " . json_encode($typo) . ");";
    if ($is_widget) {
        if (!$is_builder) {
            add_jquery_ready($js);
        } else {
            $ui_content .= sprintf('<script type="text/javascript">%2$s//<![CDATA[%2$s %1$s %2$s//]]>%2$s</script>', $js, "\n");
        }
        return $ui_content;
    } else {
        echo $ui_content;
        add_jquery_ready($js);
    }
}
Esempio n. 4
0
/**
 * Border OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_border($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    /* setting default values */
    $cp_style = '';
    $defaults = array('top' => '0px', 'top-color' => '', 'top-style' => '', 'right' => '0px', 'right-color' => '', 'right-style' => '', 'bottom' => '0px', 'bottom-color' => '', 'bottom-style' => '', 'left' => '0px', 'left-color' => '', 'left-style' => '');
    $value = wp_parse_args($value, $defaults);
    /* getting values */
    $top_color_style = $bottom_color_style = $left_color_style = $right_color_style = '';
    if ($value['top-color']) {
        $top_color_style = sprintf(' style="background:%1$s;border-color:%1$s"', $value['top-color']);
    }
    if ($value['bottom-color']) {
        $bottom_color_style = sprintf(' style="background:%1$s;border-color:%1$s"', $value['bottom-color']);
    }
    if ($value['left-color']) {
        $left_color_style = sprintf(' style="background:%1$s;border-color:%1$s"', $value['left-color']);
    }
    if ($value['right-color']) {
        $right_color_style = sprintf(' style="background:%1$s;border-color:%1$s"', $value['right-color']);
    }
    ?>

    <div id="<?php 
    echo $id;
    ?>
" <?php 
    echo build_section_class('section-border section-full', $item);
    ?>
>
        <?php 
    build_heading($item, $is_widget);
    ?>

        <?php 
    build_description($item);
    ?>

        <div class="controls">
            <div class="row-fluid pb10">
                <div class="span6">
                    <strong class="sub"><?php 
    _e('Top Border:', 'spyropress');
    ?>
</strong>
                    <div class="range-slider pb10">
                        <strong class="sub"><?php 
    _e('Width:', 'spyropress');
    ?>
 <span><?php 
    echo $value['top'];
    ?>
</span></strong>
                        <div id="<?php 
    echo $id;
    ?>
-top" class="slider"></div>
                        <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[top]" id="<?php 
    echo $id;
    ?>
-top-value" value="<?php 
    echo $value['top'];
    ?>
" />
                    </div>
                    <br />
                    <div class="row-fluid">
                        <div class="span6">
                            <select class="chosen" name="<?php 
    echo $item['name'];
    ?>
[top-style]" id="<?php 
    echo $id;
    ?>
-top-style">
                            <?php 
    foreach (spyropress_panel_border_styles() as $key => $style) {
        render_option(esc_attr($key), esc_html($style), array($value['top-style']));
    }
    ?>

                            </select>
                        </div>
                        <div class="span6">
                            <div class="color-picker clearfix">
                                <input type="text" class="field" name="<?php 
    echo $item['name'];
    ?>
[top-color]" id="<?php 
    echo $id;
    ?>
-top-colorpicker" value="<?php 
    echo $value['top-color'];
    ?>
" />
                                <div class="color-box"><div<?php 
    echo $top_color_style;
    ?>
></div></div>
                            </div>
                        </div>
                    </div>                
                </div>
                <div class="span6">
                    <strong class="sub"><?php 
    _e('Bottom Border:', 'spyropress');
    ?>
</strong>
                    <div class="range-slider pb10">
                        <strong class="sub"><?php 
    _e('Width:', 'spyropress');
    ?>
 <span><?php 
    echo $value['bottom'];
    ?>
</span></strong>
                        <div id="<?php 
    echo $id;
    ?>
-bottom" class="slider"></div>
                        <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[bottom]" id="<?php 
    echo $id;
    ?>
-bottom-value" value="<?php 
    echo $value['bottom'];
    ?>
" />
                    </div>
                    <br />
                    <div class="row-fluid">
                        <div class="span6">
                            <select class="chosen" name="<?php 
    echo $item['name'];
    ?>
[bottom-style]" id="<?php 
    echo $id;
    ?>
-bottom-style">
                            <?php 
    foreach (spyropress_panel_border_styles() as $key => $style) {
        render_option(esc_attr($key), esc_html($style), array($value['bottom-style']));
    }
    ?>

                            </select>
                        </div>
                        <div class="span6">
                            <div class="color-picker clearfix">
                                <input type="text" class="field" name="<?php 
    echo $item['name'];
    ?>
[bottom-color]" id="<?php 
    echo $id;
    ?>
-bottom-colorpicker" value="<?php 
    echo $value['bottom-color'];
    ?>
" />
                                <div class="color-box"><div<?php 
    echo $bottom_color_style;
    ?>
></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br />
            <div class="row-fluid">
                <div class="span6">
                    <strong class="sub"><?php 
    _e('Left Border:', 'spyropress');
    ?>
</strong>
                    <div class="range-slider pb10">
                        <strong class="sub"><?php 
    _e('Width:', 'spyropress');
    ?>
 <span><?php 
    echo $value['left'];
    ?>
</span></strong>
                        <div id="<?php 
    echo $id;
    ?>
-left" class="slider"></div>
                        <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[left]" id="<?php 
    echo $id;
    ?>
-left-value" value="<?php 
    echo $value['left'];
    ?>
" />
                    </div>
                    <br />
                    <div class="row-fluid">
                        <div class="span6">
                            <select class="chosen" name="<?php 
    echo $item['name'];
    ?>
[left-style]" id="<?php 
    echo $id;
    ?>
-left-style">
                            <?php 
    foreach (spyropress_panel_border_styles() as $key => $style) {
        render_option(esc_attr($key), esc_html($style), array($value['left-style']));
    }
    ?>

                            </select>
                        </div>
                        <div class="span6">
                            <div class="color-picker clearfix">
                                <input type="text" class="field" name="<?php 
    echo $item['name'];
    ?>
[left-color]" id="<?php 
    echo $id;
    ?>
-left-colorpicker" value="<?php 
    echo $value['left-color'];
    ?>
" />
                                <div class="color-box"><div<?php 
    echo $left_color_style;
    ?>
></div></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="span6">
                    <strong class="sub"><?php 
    _e('Right Border:', 'spyropress');
    ?>
</strong>
                    <div class="range-slider pb10">
                        <strong class="sub"><?php 
    _e('Width:', 'spyropress');
    ?>
 <span><?php 
    echo $value['right'];
    ?>
</span></strong>
                        <div id="<?php 
    echo $id;
    ?>
-right" class="slider"></div>
                        <input type="hidden" name="<?php 
    echo $item['name'];
    ?>
[right]" id="<?php 
    echo $id;
    ?>
-right-value" value="<?php 
    echo $value['right'];
    ?>
" />
                    </div>
                    <br />
                    <div class="row-fluid">
                        <div class="span6">
                            <select class="chosen" name="<?php 
    echo $item['name'];
    ?>
[right-style]" id="<?php 
    echo $id;
    ?>
-right-style">
                            <?php 
    foreach (spyropress_panel_border_styles() as $key => $style) {
        render_option(esc_attr($key), esc_html($style), array($value['right-style']));
    }
    ?>

                            </select>
                        </div>
                        <div class="span6">
                            <div class="color-picker clearfix">
                                <input type="text" class="field" name="<?php 
    echo $item['name'];
    ?>
[right-color]" id="<?php 
    echo $id;
    ?>
-right-colorpicker" value="<?php 
    echo $value['right-color'];
    ?>
" />
                                <div class="color-box"><div<?php 
    echo $right_color_style;
    ?>
></div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>                
<?php 
    /* content */
    $ui_content = ob_get_clean();
    /* js */
    $slider_top = str_replace('px', '', $value['top']);
    $slider_bottom = str_replace('px', '', $value['bottom']);
    $slider_left = str_replace('px', '', $value['left']);
    $slider_right = str_replace('px', '', $value['right']);
    $border['colorpicker'] = array($id . '-top-colorpicker', $id . '-bottom-colorpicker', $id . '-left-colorpicker', $id . '-right-colorpicker');
    $border['slider'] = array("#{$id}-top" => array('value' => (int) $slider_top), "#{$id}-bottom" => array('value' => (int) $slider_bottom), "#{$id}-left" => array('value' => (int) $slider_left), "#{$id}-right" => array('value' => (int) $slider_right));
    $js = "panelUi.bind_border( '{$id}', " . json_encode($border) . ");";
    if ($is_widget) {
        if (!$is_builder) {
            add_jquery_ready($js);
        } else {
            $ui_content .= sprintf('<script type="text/javascript">%2$s//<![CDATA[%2$s %1$s %2$s//]]>%2$s</script>', $js, "\n");
        }
        return $ui_content;
    } else {
        echo $ui_content;
        add_jquery_ready($js);
    }
}