/**
* 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;
}
}
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;
}
}
/**
* 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;
}
}
/**
* 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;
}
}
/**
* Info OptionType
*
* @author SpyroSol
* @category UI
* @package Spyropress
*/
function spyropress_ui_info($item, $id, $value, $is_widget = false, $is_builder = false)
{
// check for null
if ('' == $item['desc']) {
return;
}
ob_start();
echo '<div ' . build_section_class('section-info', $item) . '>';
build_heading($item, $is_widget);
printf('<div class="description"><div class="pad">%s</div></div>', htmlspecialchars_decode($item['desc']));
echo '</div>';
$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);
}
}
