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;
}
}
/**
* 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;
}
}
/**
* 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;
}
}
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;
}
}
/**
* 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);
}
}
/**
* 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;
}
}
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>';
}
/**
* 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;
}
}
/**
* 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;
}
}
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;
}
/**
* 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);
}
}
/**
* 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);
}
}
/**
* 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;
}
}
/**
* 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);
}
}
/**
* 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"> </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);
}
}
/**
* 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);
}
}
/**
* 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);
}
}