Exemplo n.º 1
0
function spyropress_ui_radio_img($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    echo '<div ' . build_section_class('section-radio-img section-full', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    echo '<div class="controls">';
    // build checkboxes
    $count = 0;
    foreach ((array) $item['options'] as $choice_value => $choice) {
        $choice_id = esc_attr($id) . '-' . $count;
        // collecting attributes
        $atts = array();
        $atts['type'] = 'radio';
        $atts['id'] = $choice_id;
        $atts['name'] = esc_attr($item['name']);
        $atts['value'] = esc_attr($choice_value);
        if ((string) $value === (string) $choice_value) {
            $atts['checked'] = 'checked';
        }
        $choice_title = isset($choice['title']) ? '<span>' . esc_attr($choice['title']) . '</span>' : '';
        printf('<label class="radio-img%5$s" for="%1$s"><input%2$s /><img src="%4$s" alt="" title="%3$s" />%3$s</label>', $choice_id, spyropress_build_atts($atts), $choice_title, esc_url($choice['img']), $value == $choice_value ? ' selected' : '');
        $count++;
    }
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    if ($is_widget) {
        return $ui_content;
    } else {
        echo $ui_content;
    }
}
Exemplo n.º 2
0
/**
 * Textarea OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_textarea($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // collecting attributes
    $atts = array();
    $atts['class'] = 'field';
    $atts['id'] = esc_attr($id);
    $atts['name'] = esc_attr($item['name']);
    $atts['rows'] = esc_attr($item['rows']);
    if (isset($item['placeholder']) && $item['placeholder']) {
        $atts['placeholder'] = esc_attr($item['placeholder']);
    }
    echo '<div ' . build_section_class('section-textarea', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    echo '<div class="controls">';
    printf('<textarea%s>%s</textarea>', spyropress_build_atts($atts), esc_textarea($value));
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    if ($is_widget) {
        return $ui_content;
    } else {
        echo $ui_content;
    }
}
Exemplo n.º 3
0
/**
 * Checkbox and Multi Checkbox OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_checkbox($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    echo '<div ' . build_section_class('section-checkbox', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    echo '<div class="controls">';
    // build checkboxes
    $count = 0;
    foreach ((array) $item['options'] as $choice_value => $choice_label) {
        $choice_id = esc_attr($id) . '-' . $count;
        // collecting attributes
        $atts = array();
        $atts['type'] = 'checkbox';
        $atts['id'] = $choice_id;
        $atts['name'] = esc_attr($item['name']) . '[' . $count . ']';
        $atts['value'] = esc_attr($choice_value);
        if (isset($value[$count]) && (string) $value[$count] === (string) $choice_value) {
            $atts['checked'] = 'checked';
        }
        printf('<label class="checkbox" for="%1$s"><input%2$s /> %3$s</label>', $choice_id, spyropress_build_atts($atts), htmlspecialchars_decode($choice_label));
        $count++;
    }
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    if ($is_widget) {
        return $ui_content;
    } else {
        echo $ui_content;
    }
}
Exemplo n.º 4
0
function spyropress_ui_multi_select($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // collecting attributes
    $atts = array();
    $atts['class'] = isset($item['ajax']) && $item['ajax'] ? 'chosen-ajax' : 'chosen';
    $atts['id'] = esc_attr($id);
    $atts['name'] = esc_attr($item['name'] . '[]');
    $atts['multiple'] = 'multiple';
    // adding ajax attributes
    if (isset($item['ajax']) && $item['ajax']) {
        $atts['data-type'] = 'custom_post';
        $atts['data-wp_type'] = implode(',', (array) $item['post_type']);
    }
    $value = empty($value) ? array() : $value;
    echo '<div ' . build_section_class('section-multi-select', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    echo '<div class="controls">';
    printf('<select%s><option value=""></option>', spyropress_build_atts($atts));
    foreach ($item['options'] as $k => $v) {
        render_option($k, $v, $value);
    }
    echo '</select>';
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    if ($is_widget) {
        return $ui_content;
    } else {
        echo $ui_content;
    }
}
Exemplo n.º 5
0
/**
 * Date Picker OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_datepicker($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // collecting attributes
    $atts = array();
    $atts['class'] = 'field';
    $atts['autocomplete'] = 'off';
    $atts['type'] = 'text';
    $atts['id'] = esc_attr($id);
    $atts['name'] = esc_attr($item['name']);
    if (isset($item['placeholder']) && $item['placeholder']) {
        $atts['placeholder'] = esc_attr($item['placeholder']);
    }
    $atts['value'] = esc_attr($value);
    echo '<div ' . build_section_class('section-datepicker', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    echo '<div class="controls">';
    printf('<input%s />', spyropress_build_atts($atts));
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    $js = "panelUi.init_datepicker();";
    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);
    }
}
Exemplo n.º 6
0
/**
 * Gallery OptionType
 */
function spyropress_ui_gallery($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // collecting attributes
    $atts = array();
    $atts['class'] = 'gallery_shortcode' . ($value != '' ? ' has-file' : '');
    $atts['type'] = 'hidden';
    $atts['id'] = esc_attr($id);
    $atts['name'] = esc_attr($item['name']);
    $atts['value'] = esc_attr($value);
    $ids = explode(',', $value);
    echo '<div ' . build_section_class('section-gallery section-full', $item) . '>';
    printf('<input class="gallery_reset_button button-red button-large pull-right" type="button" value="%s" /> ', __('Clear Gallery', 'spyropress'));
    printf('<input class="gallery_upload_button button button-primary button-large right" type="button" value="%2$s" id="upload_%1$s" />', $id, __('Add/Edit Gallery', 'spyropress'));
    build_heading($item, $is_widget);
    build_description($item);
    echo '<div class="controls">';
    echo '<div class="gallery_holder clearfix">';
    foreach ($ids as $id) {
        printf('<div data-id="%1$s" class="gallery-item">%2$s</div>', $id, wp_get_attachment_image($id));
    }
    echo '</div>';
    printf('<input%s />', spyropress_build_atts($atts));
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    if ($is_widget) {
        return $ui_content;
    } else {
        echo $ui_content;
    }
}
Exemplo n.º 7
0
function spyropress_ui_import_dummy($option_name)
{
    $item['label'] = __('Import Dummy Content: Posts, Pages, Categories', 'spyropress');
    $item['desc'] = __('If you are new to wordpress or have problems creating posts or pages that look like the Theme Demo you can import dummy posts and pages here that will definitely help to understand how those tasks are done.', 'spyropress');
    echo '<div class="section section-import section-full">';
    build_heading($item, false);
    echo '<div class="controls">';
    printf('<input type="submit" id="import-dummy" name="import-dummy" value="%1$s" class="button-green import-dummy"/> <em>%2$s</em>', esc_attr('Import Demo Data', 'spyropress'), __('WARNING! This will overwrite any existing options, please proceed with caution!', 'spyropress'));
    echo '</div>';
    build_description($item);
    echo '</div>';
}
Exemplo n.º 8
0
/**
 * Toggle Set OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_toggle($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    printf('<div class="toggle_set%1$s">', isset($item['toggle_class']) ? ' ' . $item['toggle_class'] : '');
    echo '<div ' . build_section_class('section-subheading toggle_trigger', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    printf('<span class="toggle_icon">%1$s</span>', isset($item['show']) && $item['show'] ? '[-]' : '[+]');
    echo '</div>';
    printf('<div class="toggle_container%1$s">', isset($item['show']) && $item['show'] ? ' active' : '');
    $ui_content = ob_get_clean();
    if ($is_widget) {
        return $ui_content;
    } else {
        echo $ui_content;
    }
}
Exemplo n.º 9
0
/**
 * Sub-Heading OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_sub_heading($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // collecting section classes
    $section_class[] = 'section section-subheading';
    if (isset($item['class']) && $item['class']) {
        $section_class[] = $item['class'];
    }
    echo '<div ' . build_section_class('section-subheading', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    echo '</div>';
    $ui_content = ob_get_clean();
    if ($is_widget) {
        return $ui_content;
    } else {
        echo $ui_content;
    }
}
Exemplo n.º 10
0
function spyropress_widget_editor($item, $id, $value, $is_builder = false)
{
    ob_start();
    // collecting attributes
    $atts = array();
    $atts['class'] = 'field builder-rich-text';
    $atts['id'] = esc_attr($id);
    $atts['name'] = esc_attr($item['name']);
    $atts['rows'] = esc_attr($item['rows']);
    echo '<div ' . build_section_class('section-editor section-full', $item) . '>';
    build_heading($item, true);
    build_description($item);
    echo '<div class="controls">';
    printf('<textarea %s>%s</textarea>', spyropress_build_atts($atts), wp_richedit_pre($value));
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    return $ui_content;
}
Exemplo n.º 11
0
/**
 * Range Slider OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_range_slider($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // collecting attributes
    $atts = array();
    $atts['class'] = 'field';
    $atts['type'] = 'text';
    $atts['name'] = esc_attr($item['name']);
    $atts['value'] = esc_attr($value);
    echo '<div ' . build_section_class('section-slider', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    echo '<div class="controls">';
    echo '<div class="range-slider clearfix">';
    printf('<div id="%s" class="slider"></div>', $id);
    printf('<input%s />', spyropress_build_atts($atts));
    echo '</div>';
    echo '</div>';
    echo '</div>';
    // content
    $ui_content = ob_get_clean();
    // js
    if (isset($item['max']) && $item['max'] != '') {
        $range_slider['max'] = $item['max'];
    }
    if (isset($item['min']) && $item['min'] != '') {
        $range_slider['min'] = $item['min'];
    }
    if (isset($item['step']) && $item['step'] != '') {
        $range_slider['step'] = $item['step'];
    }
    $range_slider['value'] = (int) $value;
    $range_slider['range'] = isset($item['range']) && $item['range'] != '' ? $item['range'] : 'min';
    $js = "panelUi.bind_range_slider( '{$id}', " . json_encode($range_slider) . ");";
    if ($is_widget) {
        $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);
    }
}
Exemplo n.º 12
0
/**
 * Color Picker OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_colorpicker($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // collecting attributes
    $atts = array();
    $atts['class'] = 'field';
    $atts['type'] = 'text';
    $atts['id'] = esc_attr($id);
    $atts['name'] = esc_attr($item['name']);
    $atts['value'] = esc_attr($value);
    $style = '';
    if ('' != $value) {
        $style = ' style="background:' . $value . ';border-color:' . $value . '"';
    }
    echo '<div ' . build_section_class('section-color', $item) . '>';
    build_heading($item, $is_widget);
    build_description($item);
    echo '<div class="controls">';
    echo '<div class="color-picker clearfix">';
    printf('<input%s />', spyropress_build_atts($atts));
    printf('<div class="color-box"><div%s></div></div>', $style);
    echo '</div>';
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    $js = "panelUi.bind_colorpicker( '{$id}', '', '' );";
    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);
    }
}
Exemplo n.º 13
0
/**
 * Reapter OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_repeater($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    $count = !empty($value) ? count($value) : 0;
    // Getting field for title
    $title_field = '';
    if (isset($item['item_title'])) {
        foreach ($item['fields'] as $field) {
            if (isset($field['id']) && $field['id'] == $item['item_title']) {
                $title_field = $field;
                break;
            }
        }
    }
    echo '<div ' . build_section_class('section-repeater section-full', $item) . '>';
    if (!isset($item['hide_label'])) {
        build_heading($item, $is_widget);
    } else {
        echo '<br/>';
    }
    build_description($item);
    echo '<input type="hidden" class="control_id" value="' . $item['name'] . '" />';
    echo '<div class="controls">';
    for ($i = 0; $i <= $count; $i++) {
        // group start
        $tocopy = $i == $count ? ' tocopy' : '';
        $settings = isset($value[$i]) ? $value[$i] : array();
        echo '<div class="repeater-group' . $tocopy . '">';
        // Header
        echo '<div class="repeater-group-header">';
        $title_value = '';
        if (isset($item['item_title']) && $title_field) {
            $title_value = !empty($settings) && isset($settings[$item['item_title']]) ? $settings[$item['item_title']] : '';
        }
        if ($title_value) {
            if ('select' == $title_field['type']) {
                echo ucwords($title_field['options'][$title_value]);
            } else {
                echo ucwords($title_value);
            }
        } else {
            echo $item['label'];
        }
        echo '</div>';
        // Loop fields
        echo '<div class="repeater-sections">';
        foreach ($item['fields'] as $field) {
            // Parent Name
            if (isset($item['parent_name'])) {
                $field['parent_name'] = sprintf('%1$s[%2$s]', $item['name'], $i);
            }
            if ($is_widget) {
                $field['widget_name'] = $item['name'];
            }
            parse_repeater_field($field, $id, $settings, $i, $is_widget, $is_builder);
        }
        // Actions
        echo '<div class="repeater-group-actions pb10">';
        echo '<a href="#" class="repeater-delete">' . __('Remove', 'spyropress') . '</a>';
        echo '<span class="meta-sep">|</span>';
        echo '<a href="#" class="repeater-close">' . __('Close', 'spyropress') . '</a>';
        echo '<div class="clear"></div>';
        echo '</div>';
        // group_actions
        echo '</div>';
        // group_sections
        echo '</div>';
        // group_end
    }
    // add button
    echo '<button class="repeater-add button">' . __('Add New', 'spyropress') . ' ' . $item['label'] . '</button>';
    echo '</div>';
    echo '</div>';
    $ui_content = ob_get_clean();
    if ($is_widget) {
        return $ui_content;
    } else {
        echo $ui_content;
    }
}
Exemplo n.º 14
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);
    }
}
Exemplo n.º 15
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);
    }
}
Exemplo n.º 16
0
/**
 * Margin/Padding OptionType
 *
 * @author 		SpyroSol
 * @category 	UI
 * @package 	Spyropress
 */
function spyropress_ui_padder($item, $id, $value, $is_widget = false, $is_builder = false)
{
    ob_start();
    // setting default values
    $cp_style = '';
    $defaults = array('top' => '0px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px');
    $value = wp_parse_args($value, $defaults);
    ?>

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

        <?php 
    build_description($item);
    ?>

        <div class="controls row-fluid">
            <div class="span3 range-slider">
                <strong class="sub"><?php 
    _e('Top:', '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>
            <div class="span3 range-slider">
                <strong class="sub"><?php 
    _e('Bottom:', '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>
            <div class="span3 range-slider">
                <strong class="sub"><?php 
    _e('Left:', '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>
            <div class="span3 range-slider">
                <strong class="sub"><?php 
    _e('Right:', '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>
        </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']);
    $padder['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_padder( '{$id}', " . json_encode($padder) . ");";
    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);
    }
}
Exemplo n.º 17
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);
    }
}