/**
* Editing module panel in frontend
* @param $mod_name
* @param $mod_settings
*/
function module_edit_panel_front($mod_name, $mod_settings)
{
?>
<div class="module_menu_front">
<ul class="themify_builder_dropdown_front">
<li class="themify_module_menu"><span class="ti-menu"></span>
<ul>
<li><a href="#" title="<?php
_e('Edit', 'themify');
?>
" class="themify_module_options" data-module-name="<?php
echo esc_attr($mod_name);
?>
"><?php
_e('Edit', 'themify');
?>
</a></li>
<li><a href="#" title="<?php
_e('Duplicate', 'themify');
?>
" class="themify_module_duplicate"><?php
_e('Duplicate', 'themify');
?>
</a></li>
<li><a href="#" title="<?php
_e('Delete', 'themify');
?>
" class="themify_module_delete"><?php
_e('Delete', 'themify');
?>
</a></li>
</ul>
</li>
</ul>
<div class="front_mod_settings mod_settings_<?php
echo esc_attr($mod_name);
?>
" data-mod-name="<?php
echo esc_attr($mod_name);
?>
">
<script type="text/json"><?php
echo json_encode($this->clean_json_bad_escaped_char($mod_settings));
?>
</script>
</div>
</div>
<div class="themify_builder_data_mod_name"><?php
echo Themify_Builder_model::get_module_name($mod_name);
?>
</div>
<?php
}
public function get_styling()
{
$styling = array(array('id' => 'separator_image_background', 'title' => '', 'description' => '', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Background', 'themify') . '</h4>')), array('id' => 'background_image', 'type' => 'image', 'label' => __('Background Image', 'themify'), 'class' => 'xlarge', 'prop' => 'background-image', 'selector' => '.module-box .module-box-content'), array('id' => 'background_color', 'type' => 'color', 'label' => __('Background Color', 'themify'), 'class' => 'small', 'prop' => 'background-color', 'selector' => '.module-box .module-box-content'), array('id' => 'background_repeat', 'label' => __('Background Repeat', 'themify'), 'type' => 'select', 'default' => '', 'meta' => array(array('value' => 'repeat', 'name' => __('Repeat All', 'themify')), array('value' => 'repeat-x', 'name' => __('Repeat Horizontally', 'themify')), array('value' => 'repeat-y', 'name' => __('Repeat Vertically', 'themify')), array('value' => 'repeat-none', 'name' => __('Do not repeat', 'themify')), array('value' => 'fullcover', 'name' => __('Fullcover', 'themify'))), 'prop' => 'background-repeat', 'selector' => '.module-box .module-box-content'), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_font', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Font', 'themify') . '</h4>')), array('id' => 'font_family', 'type' => 'font_select', 'label' => __('Font Family', 'themify'), 'class' => 'font-family-select', 'prop' => 'font-family', 'selector' => '.module-box'), array('id' => 'font_color', 'type' => 'color', 'label' => __('Font Color', 'themify'), 'class' => 'small', 'prop' => 'color', 'selector' => '.module-box .module-box-content'), array('id' => 'multi_font_size', 'type' => 'multi', 'label' => __('Font Size', 'themify'), 'fields' => array(array('id' => 'font_size', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'font-size', 'selector' => '.module-box'), array('id' => 'font_size_unit', 'type' => 'select', 'meta' => array(array('value' => '', 'name' => ''), array('value' => 'px', 'name' => __('px', 'themify')), array('value' => 'em', 'name' => __('em', 'themify')))))), array('id' => 'multi_line_height', 'type' => 'multi', 'label' => __('Line Height', 'themify'), 'fields' => array(array('id' => 'line_height', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'line-height', 'selector' => '.module-box'), array('id' => 'line_height_unit', 'type' => 'select', 'meta' => array(array('value' => '', 'name' => ''), array('value' => 'px', 'name' => __('px', 'themify')), array('value' => 'em', 'name' => __('em', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'text_align', 'label' => __('Text Align', 'themify'), 'type' => 'radio', 'meta' => array(array('value' => '', 'name' => __('Default', 'themify'), 'selected' => true), array('value' => 'left', 'name' => __('Left', 'themify')), array('value' => 'center', 'name' => __('Center', 'themify')), array('value' => 'right', 'name' => __('Right', 'themify')), array('value' => 'justify', 'name' => __('Justify', 'themify'))), 'prop' => 'text-align', 'selector' => '.module-box'), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_link', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Link', 'themify') . '</h4>')), array('id' => 'link_color', 'type' => 'color', 'label' => __('Color', 'themify'), 'class' => 'small', 'prop' => 'color', 'selector' => '.module-box a'), array('id' => 'text_decoration', 'type' => 'select', 'label' => __('Text Decoration', 'themify'), 'meta' => array(array('value' => '', 'name' => '', 'selected' => true), array('value' => 'underline', 'name' => __('Underline', 'themify')), array('value' => 'overline', 'name' => __('Overline', 'themify')), array('value' => 'line-through', 'name' => __('Line through', 'themify')), array('value' => 'none', 'name' => __('None', 'themify'))), 'prop' => 'text-decoration', 'selector' => '.module-box a'), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_padding', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Padding', 'themify') . '</h4>')), array('id' => 'multi_padding_top', 'type' => 'multi', 'label' => __('Padding', 'themify'), 'fields' => array(array('id' => 'padding_top', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'padding-top', 'selector' => '.module-box .module-box-content'), array('id' => 'padding_top_unit', 'type' => 'select', 'description' => __('top', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_padding_right', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'padding_right', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'padding-right', 'selector' => '.module-box .module-box-content'), array('id' => 'padding_right_unit', 'type' => 'select', 'description' => __('right', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_padding_bottom', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'padding_bottom', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'padding-bottom', 'selector' => '.module-box .module-box-content'), array('id' => 'padding_bottom_unit', 'type' => 'select', 'description' => __('bottom', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_padding_left', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'padding_left', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'padding-left', 'selector' => '.module-box .module-box-content'), array('id' => 'padding_left_unit', 'type' => 'select', 'description' => __('left', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_margin', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Margin', 'themify') . '</h4>')), array('id' => 'multi_margin_top', 'type' => 'multi', 'label' => __('Margin', 'themify'), 'fields' => array(array('id' => 'margin_top', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'margin-top', 'selector' => '.module-box'), array('id' => 'margin_top_unit', 'type' => 'select', 'description' => __('top', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_margin_right', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'margin_right', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'margin-right', 'selector' => '.module-box'), array('id' => 'margin_right_unit', 'type' => 'select', 'description' => __('right', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_margin_bottom', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'margin_bottom', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'margin-bottom', 'selector' => '.module-box'), array('id' => 'margin_bottom_unit', 'type' => 'select', 'description' => __('bottom', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_margin_left', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'margin_left', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'margin-left', 'selector' => '.module-box'), array('id' => 'margin_left_unit', 'type' => 'select', 'description' => __('left', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_border', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Border', 'themify') . '</h4>')), array('id' => 'multi_border_top', 'type' => 'multi', 'label' => __('Border', 'themify'), 'fields' => array(array('id' => 'border_top_color', 'type' => 'color', 'class' => 'small', 'prop' => 'border-top-color', 'selector' => '.module-box .module-box-content'), array('id' => 'border_top_width', 'type' => 'text', 'description' => 'px', 'class' => 'xsmall', 'prop' => 'border-top-width', 'selector' => '.module-box .module-box-content'), array('id' => 'border_top_style', 'type' => 'select', 'description' => __('top', 'themify'), 'meta' => Themify_Builder_model::get_border_styles(), 'prop' => 'border-top-style', 'selector' => '.module-box .module-box-content'))), array('id' => 'multi_border_right', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'border_right_color', 'type' => 'color', 'class' => 'small', 'prop' => 'border-right-color', 'selector' => '.module-box .module-box-content'), array('id' => 'border_right_width', 'type' => 'text', 'description' => 'px', 'class' => 'xsmall', 'prop' => 'border-right-width', 'selector' => '.module-box .module-box-content'), array('id' => 'border_right_style', 'type' => 'select', 'description' => __('right', 'themify'), 'meta' => Themify_Builder_model::get_border_styles(), 'prop' => 'border-right-style', 'selector' => '.module-box .module-box-content'))), array('id' => 'multi_border_bottom', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'border_bottom_color', 'type' => 'color', 'class' => 'small', 'prop' => 'border-bottom-color', 'selector' => '.module-box .module-box-content'), array('id' => 'border_bottom_width', 'type' => 'text', 'description' => 'px', 'class' => 'xsmall', 'prop' => 'border-bottom-width', 'selector' => '.module-box .module-box-content'), array('id' => 'border_bottom_style', 'type' => 'select', 'description' => __('bottom', 'themify'), 'meta' => Themify_Builder_model::get_border_styles(), 'prop' => 'border-bottom-style', 'selector' => '.module-box .module-box-content'))), array('id' => 'multi_border_left', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'border_left_color', 'type' => 'color', 'class' => 'small', 'prop' => 'border-left-color', 'selector' => '.module-box .module-box-content'), array('id' => 'border_left_width', 'type' => 'text', 'description' => 'px', 'class' => 'xsmall', 'prop' => 'border-left-width', 'selector' => '.module-box .module-box-content'), array('id' => 'border_left_style', 'type' => 'select', 'description' => __('left', 'themify'), 'meta' => Themify_Builder_model::get_border_styles(), 'prop' => 'border-left-style', 'selector' => '.module-box .module-box-content'))), array('type' => 'separator', 'meta' => array('html' => '<hr/>')), array('id' => 'add_css_box', 'type' => 'text', 'label' => __('Additional CSS Class', 'themify'), 'description' => sprintf('<br/><small>%s</small>', __('Add additional CSS class(es) for custom styling', 'themify')), 'class' => 'large exclude-from-reset-field'));
return $styling;
}
/**
* Module Styling Fields
* @param array $styling
* @return string
*/
function themify_builder_styling_field($styling)
{
switch ($styling['type']) {
case 'text':
?>
<input id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" type="text" value="" class="<?php
echo esc_attr($styling['class']);
?>
tfb_lb_option">
<?php
if (isset($styling['description'])) {
echo '<small>' . wp_kses_post($styling['description']) . '</small>';
}
?>
<?php
break;
case 'textarea':
?>
<textarea id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" class="<?php
echo esc_attr($styling['class']);
?>
tfb_lb_option"><?php
if (isset($styling['value'])) {
echo esc_textarea($styling['value']);
}
?>
</textarea>
<?php
if (isset($styling['description'])) {
echo '<small>' . wp_kses_post($styling['description']) . '</small>';
}
?>
<?php
break;
case 'separator':
echo isset($styling['meta']['html']) && '' != $styling['meta']['html'] ? $styling['meta']['html'] : '<hr class="meta_fields_separator" />';
break;
case 'image':
?>
<input id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" placeholder="<?php
if (isset($styling['value'])) {
echo esc_attr($styling['value']);
}
?>
" class="<?php
echo esc_attr($styling['class']);
?>
themify-builder-uploader-input tfb_lb_option" type="text" /><br />
<div class="small">
<?php
if (is_multisite() && !is_upload_space_available()) {
?>
<?php
echo sprintf(__('Sorry, you have filled your %s MB storage quota so uploading has been disabled.', 'themify'), get_space_allowed());
?>
<?php
} else {
?>
<div class="themify-builder-plupload-upload-uic hide-if-no-js tf-upload-btn" id="<?php
echo esc_attr($styling['id']);
?>
themify-builder-plupload-upload-ui">
<input id="<?php
echo esc_attr($styling['id']);
?>
themify-builder-plupload-browse-button" type="button" value="<?php
esc_attr_e(__('Upload', 'themify'));
?>
" class="builder_button" />
<span class="ajaxnonceplu" id="ajaxnonceplu<?php
echo wp_create_nonce($styling['id'] . 'themify-builder-plupload');
?>
"></span>
</div> <?php
_e('or', 'themify');
?>
<a href="#" class="themify-builder-media-uploader tf-upload-btn" data-uploader-title="<?php
esc_attr_e('Upload an Image', 'themify');
?>
" data-uploader-button-text="<?php
esc_attr_e('Insert file URL', 'themify');
?>
"><?php
_e('Browse Library', 'themify');
?>
</a>
<?php
}
?>
</div>
<p class="thumb_preview">
<span class="img-placeholder"></span>
<a href="#" class="themify_builder_icon small delete themify-builder-delete-thumb"></a>
</p>
<?php
break;
case 'video':
?>
<input id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" placeholder="<?php
if (isset($styling['value'])) {
echo esc_attr($styling['value']);
}
?>
" class="<?php
echo esc_attr($styling['class']);
?>
themify-builder-uploader-input tfb_lb_option" type="text" /><br />
<div class="small">
<?php
if (is_multisite() && !is_upload_space_available()) {
?>
<?php
echo sprintf(__('Sorry, you have filled your %s MB storage quota so uploading has been disabled.', 'themify'), get_space_allowed());
?>
<?php
} else {
?>
<div class="themify-builder-plupload-upload-uic hide-if-no-js tf-upload-btn" id="<?php
echo esc_attr($styling['id']);
?>
themify-builder-plupload-upload-ui" data-extensions="<?php
echo esc_attr(implode(',', wp_get_video_extensions()));
?>
">
<input id="<?php
echo esc_attr($styling['id']);
?>
themify-builder-plupload-browse-button" type="button" value="<?php
esc_attr_e(__('Upload', 'themify'));
?>
" class="builder_button" />
<span class="ajaxnonceplu" id="ajaxnonceplu<?php
echo wp_create_nonce($styling['id'] . 'themify-builder-plupload');
?>
"></span>
</div> <?php
_e('or', 'themify');
?>
<a href="#" class="themify-builder-media-uploader tf-upload-btn" data-uploader-title="<?php
_e('Upload a Video', 'themify');
?>
" data-uploader-button-text="<?php
esc_attr_e('Insert file URL', 'themify');
?>
" data-library-type="video"><?php
_e('Browse Library', 'themify');
?>
</a>
<?php
}
?>
</div>
<?php
if (isset($styling['description'])) {
echo '<small>' . wp_kses_post($styling['description']) . '</small>';
}
?>
<?php
break;
case 'select':
?>
<select id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option <?php
echo isset($styling['class']) ? esc_attr($styling['class']) : '';
?>
">
<?php
if (isset($styling['default'])) {
?>
<option value="<?php
echo esc_attr($styling['default']);
?>
"><?php
echo esc_html($styling['default']);
?>
</option>
<?php
}
foreach ($styling['meta'] as $option) {
?>
<option value="<?php
echo esc_attr($option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</option>
<?php
}
?>
</select>
<?php
if (isset($styling['description'])) {
echo wp_kses_post($styling['description']);
}
?>
<?php
break;
case 'animation_select':
?>
<?php
$class = isset($styling['class']) ? $styling['class'] : '';
?>
<select id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option <?php
echo esc_attr($class);
?>
">
<option value=""></option>
<?php
$animation = Themify_Builder_model::get_preset_animation();
foreach ($animation as $group) {
?>
<optgroup label="<?php
echo esc_attr($group['group_label']);
?>
">
<?php
foreach ($group['options'] as $opt) {
?>
<option value="<?php
echo esc_attr($opt['value']);
?>
"><?php
echo esc_html($opt['name']);
?>
</option>
<?php
}
?>
</optgroup>
<?php
}
?>
</select>
<?php
if (isset($styling['description'])) {
echo wp_kses_post($styling['description']);
}
?>
<?php
break;
case 'font_select':
$fonts = array_merge(themify_get_web_safe_font_list(), themify_get_google_web_fonts_list());
?>
<select id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option <?php
echo esc_attr($styling['class']);
?>
">
<?php
if (isset($styling['default'])) {
?>
<option value="<?php
echo esc_attr($styling['default']);
?>
"><?php
echo esc_html($styling['default']);
?>
</option>
<?php
}
foreach ($fonts as $option) {
?>
<option value="<?php
echo esc_attr($option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</option>
<?php
}
?>
</select>
<?php
if (isset($styling['description'])) {
echo wp_kses_post($styling['description']);
}
?>
<?php
break;
case 'color':
?>
<span class="builderColorSelect"><span></span></span>
<input type="text" class="<?php
echo esc_attr($styling['class']);
?>
colordisplay"/>
<input id="<?php
echo esc_attr($styling['id']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" value="" class="builderColorSelectInput tfb_lb_option" type="hidden" />
<?php
break;
case 'checkbox':
if (isset($styling['before'])) {
echo wp_kses_post($styling['before']);
}
?>
<div id="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option themify-checkbox">
<?php
foreach ($styling['options'] as $opt) {
?>
<?php
$checkbox_checked = '';
if (isset($styling['default']) && is_array($styling['default'])) {
$checkbox_checked = in_array($opt['name'], $styling['default']) ? 'checked="checked"' : '';
} elseif (isset($styling['default'])) {
$checkbox_checked = checked($styling['default'], $opt['name'], false);
}
?>
<input id="<?php
echo esc_attr($styling['id'] . '_' . $opt['name']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" type="checkbox" class="tfb_lb_option tf-checkbox" value="<?php
echo esc_attr($opt['name']);
?>
" <?php
echo $checkbox_checked;
?>
/>
<label for="<?php
echo esc_attr($styling['id'] . '_' . $opt['name']);
?>
" class="pad-right"><?php
echo wp_kses_post($opt['value']);
?>
</label>
<?php
if (isset($opt['help'])) {
?>
<small><?php
echo wp_kses_post($opt['help']);
?>
</small>
<?php
}
?>
<?php
if (!isset($styling['new_line']) || $styling['new_line'] == true) {
?>
<br />
<?php
}
?>
<?php
}
?>
</div>
<?php
if (isset($styling['after'])) {
echo wp_kses_post($styling['after']);
}
break;
case 'radio':
$option_js = isset($styling['option_js']) && $styling['option_js'] == true ? 'tf-option-checkbox-js' : '';
$option_js_wrap = isset($styling['option_js']) && $styling['option_js'] == true ? 'tf-option-checkbox-enable' : '';
?>
<div id="<?php
echo esc_attr($styling['id']);
?>
" class="tfb_lb_option tf-radio-input-container <?php
echo esc_attr($option_js_wrap);
?>
">
<?php
foreach ($styling['meta'] as $option) {
$checked = isset($option['selected']) && $option['selected'] == true ? 'checked="checked"' : '';
$data_el = isset($styling['option_js']) && $styling['option_js'] == true ? 'data-selected="tf-group-element-' . $option['value'] . '"' : '';
?>
<input type="radio" id="<?php
echo esc_attr($styling['id'] . '_' . $option['value']);
?>
" name="<?php
echo esc_attr($styling['id']);
?>
" value="<?php
echo esc_attr($option['value']);
?>
" class="tfb_lb_option <?php
echo esc_attr($option_js);
?>
" <?php
echo $checked . ' ' . $data_el;
?>
> <label for="<?php
echo esc_attr($styling['id'] . '_' . $option['value']);
?>
"><?php
echo esc_html($option['name']);
?>
</label>
<?php
}
?>
<?php
if (isset($styling['description'])) {
echo '<br/><small>' . wp_kses_post($styling['description']) . '</small>';
}
?>
</div>
<?php
break;
}
}
/**
* Load general metabox fields
*/
public static function load_general_metabox()
{
// Feature Image
self::$post_image = apply_filters('themify_builder_metabox_post_image', array('name' => 'post_image', 'title' => __('Featured Image', 'themify'), 'description' => '', 'type' => 'image', 'meta' => array()));
// Featured Image Size
self::$featured_image_size = apply_filters('themify_builder_metabox_featured_image_size', array('name' => 'feature_size', 'title' => __('Image Size', 'themify'), 'description' => __('Image sizes can be set at <a href="options-media.php">Media Settings</a> and <a href="admin.php?page=themify_regenerate-thumbnails">Regenerated</a>', 'themify'), 'type' => 'featimgdropdown'));
// Image Width
self::$image_width = apply_filters('themify_builder_metabox_image_width', array('name' => 'image_width', 'title' => __('Image Width', 'themify'), 'description' => '', 'type' => 'textbox', 'meta' => array('size' => 'small')));
// Image Height
self::$image_height = apply_filters('themify_builder_metabox_image_height', array('name' => 'image_height', 'title' => __('Image Height', 'themify'), 'description' => '', 'type' => 'textbox', 'meta' => array('size' => 'small')));
// External Link
self::$external_link = apply_filters('themify_builder_metabox_external_link', array('name' => 'external_link', 'title' => __('External Link', 'themify'), 'description' => __('Link Featured Image to external URL', 'themify'), 'type' => 'textbox', 'meta' => array()));
// Lightbox Link
self::$lightbox_link = apply_filters('themify_builder_metabox_lightbox_link', array('name' => 'lightbox_link', 'title' => __('Lightbox Link', 'themify'), 'description' => __('Link Featured Image to lightbox image, video or external iframe', 'themify'), 'type' => 'textbox', 'meta' => array()));
}
public function get_styling()
{
$styling = array(array('id' => 'separator_animation', 'title' => '', 'description' => '', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Animation', 'themify') . '</h4>')), array('id' => 'animation_effect', 'type' => 'animation_select', 'label' => __('Effect', 'themify'), 'class' => ''), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_image_background', 'title' => '', 'description' => '', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Background', 'themify') . '</h4>')), array('id' => 'background_color', 'type' => 'color', 'label' => __('Background Color', 'themify'), 'class' => 'small', 'prop' => 'background-color', 'selector' => '.module-map'), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_padding', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Padding', 'themify') . '</h4>')), array('id' => 'multi_padding_top', 'type' => 'multi', 'label' => __('Padding', 'themify'), 'fields' => array(array('id' => 'padding_top', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'padding-top', 'selector' => '.module-map'), array('id' => 'padding_top_unit', 'type' => 'select', 'description' => __('top', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_padding_right', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'padding_right', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'padding-right', 'selector' => '.module-map'), array('id' => 'padding_right_unit', 'type' => 'select', 'description' => __('right', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_padding_bottom', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'padding_bottom', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'padding-bottom', 'selector' => '.module-map'), array('id' => 'padding_bottom_unit', 'type' => 'select', 'description' => __('bottom', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_padding_left', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'padding_left', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'padding-left', 'selector' => '.module-map'), array('id' => 'padding_left_unit', 'type' => 'select', 'description' => __('left', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_margin', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Margin', 'themify') . '</h4>')), array('id' => 'multi_margin_top', 'type' => 'multi', 'label' => __('Margin', 'themify'), 'fields' => array(array('id' => 'margin_top', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'margin-top', 'selector' => '.module-map'), array('id' => 'margin_top_unit', 'type' => 'select', 'description' => __('top', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_margin_right', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'margin_right', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'margin-right', 'selector' => '.module-map'), array('id' => 'margin_right_unit', 'type' => 'select', 'description' => __('right', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_margin_bottom', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'margin_bottom', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'margin-bottom', 'selector' => '.module-map'), array('id' => 'margin_bottom_unit', 'type' => 'select', 'description' => __('bottom', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('id' => 'multi_margin_left', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'margin_left', 'type' => 'text', 'class' => 'xsmall', 'prop' => 'margin-left', 'selector' => '.module-map'), array('id' => 'margin_left_unit', 'type' => 'select', 'description' => __('left', 'themify'), 'meta' => array(array('value' => 'px', 'name' => __('px', 'themify')), array('value' => '%', 'name' => __('%', 'themify')))))), array('type' => 'separator', 'meta' => array('html' => '<hr />')), array('id' => 'separator_border', 'type' => 'separator', 'meta' => array('html' => '<h4>' . __('Border', 'themify') . '</h4>')), array('id' => 'multi_border_top', 'type' => 'multi', 'label' => __('Border', 'themify'), 'fields' => array(array('id' => 'border_top_color', 'type' => 'color', 'class' => 'small', 'prop' => 'border-top-color', 'selector' => '.module-map'), array('id' => 'border_top_width', 'type' => 'text', 'description' => 'px', 'class' => 'xsmall', 'prop' => 'border-top-width', 'selector' => '.module-map'), array('id' => 'border_top_style', 'type' => 'select', 'description' => __('top', 'themify'), 'meta' => Themify_Builder_model::get_border_styles(), 'prop' => 'border-top-style', 'selector' => '.module-map'))), array('id' => 'multi_border_right', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'border_right_color', 'type' => 'color', 'class' => 'small', 'prop' => 'border-right-color', 'selector' => '.module-map'), array('id' => 'border_right_width', 'type' => 'text', 'description' => 'px', 'class' => 'xsmall', 'prop' => 'border-right-width', 'selector' => '.module-map'), array('id' => 'border_right_style', 'type' => 'select', 'description' => __('right', 'themify'), 'meta' => Themify_Builder_model::get_border_styles(), 'prop' => 'border-right-style', 'selector' => '.module-map'))), array('id' => 'multi_border_bottom', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'border_bottom_color', 'type' => 'color', 'class' => 'small', 'prop' => 'border-bottom-color', 'selector' => '.module-map'), array('id' => 'border_bottom_width', 'type' => 'text', 'description' => 'px', 'class' => 'xsmall', 'prop' => 'border-bottom-width', 'selector' => '.module-map'), array('id' => 'border_bottom_style', 'type' => 'select', 'description' => __('bottom', 'themify'), 'meta' => Themify_Builder_model::get_border_styles(), 'prop' => 'border-bottom-style', 'selector' => '.module-map'))), array('id' => 'multi_border_left', 'type' => 'multi', 'label' => '', 'fields' => array(array('id' => 'border_left_color', 'type' => 'color', 'class' => 'small', 'prop' => 'border-left-color', 'selector' => '.module-map'), array('id' => 'border_left_width', 'type' => 'text', 'description' => 'px', 'class' => 'xsmall', 'prop' => 'border-left-width', 'selector' => '.module-map'), array('id' => 'border_left_style', 'type' => 'select', 'description' => __('left', 'themify'), 'meta' => Themify_Builder_model::get_border_styles(), 'prop' => 'border-left-style', 'selector' => '.module-map'))), array('type' => 'separator', 'meta' => array('html' => '<hr/>')), array('id' => 'css_map', 'type' => 'text', 'label' => __('Additional CSS Class', 'themify'), 'class' => 'large exclude-from-reset-field', 'description' => sprintf('<br/><small>%s</small>', __('Add additional CSS class(es) for custom styling', 'themify'))));
return $styling;
}
/**
* Editing module panel in frontend
* @param $mod_name
* @param $mod_settings
*/
function module_edit_panel_front($mod_name, $mod_settings)
{
?>
<div class="module_menu_front">
<ul class="themify_builder_dropdown_front">
<li class="themify_module_menu"><span class="ti-menu"></span>
<ul>
<li><a href="#" data-title="<?php
_e('Export', 'themify');
?>
" rel="themify-tooltip-bottom"
class="themify_builder_export_component ti-export" data-component="module">
<?php
_e('Export', 'themify');
?>
</a></li>
<li><a href="#" data-title="<?php
_e('Import', 'themify');
?>
" rel="themify-tooltip-bottom"
class="themify_builder_import_component ti-import" data-component="module">
<?php
_e('Import', 'themify');
?>
</a></li>
<li class="separator">
<div></div>
</li>
<li><a href="#" data-title="<?php
_e('Copy', 'themify');
?>
" rel="themify-tooltip-bottom"
class="themify_builder_copy_component ti-files" data-component="module">
<?php
_e('Copy', 'themify');
?>
</a></li>
<li><a href="#" data-title="<?php
_e('Paste', 'themify');
?>
" rel="themify-tooltip-bottom"
class="themify_builder_paste_component ti-clipboard" data-component="module">
<?php
_e('Paste', 'themify');
?>
</a></li>
<li class="separator"><div></div></li>
<li><a href="#" data-title="<?php
_e('Edit', 'themify');
?>
" rel="themify-tooltip-bottom"
class="themify_module_options" data-module-name="<?php
echo esc_attr($mod_name);
?>
">
<?php
_e('Edit', 'themify');
?>
</a></li>
<li><a href="#" data-title="<?php
_e('Duplicate', 'themify');
?>
" rel="themify-tooltip-bottom"
class="themify_module_duplicate">
<?php
_e('Duplicate', 'themify');
?>
</a></li>
<li><a href="#" data-title="<?php
_e('Delete', 'themify');
?>
" rel="themify-tooltip-bottom"
class="themify_module_delete">
<?php
_e('Delete', 'themify');
?>
</a></li>
</ul>
</li>
</ul>
<div class="front_mod_settings mod_settings_<?php
echo esc_attr($mod_name);
?>
" data-mod-name="<?php
echo esc_attr($mod_name);
?>
">
<script type="text/json"><?php
echo json_encode($this->clean_json_bad_escaped_char($mod_settings));
?>
</script>
</div>
</div>
<div class="themify_builder_data_mod_name"><?php
echo Themify_Builder_model::get_module_name($mod_name);
?>
</div>
<?php
}
/**
* Editing module panel in frontend
* @param $mod_name
* @param $mod_settings
*/
function module_edit_panel_front($mod_name, $mod_settings)
{
?>
<div class="module_menu_front">
<ul class="themify_builder_dropdown_front">
<li class="themify_module_menu"><span class="ti-menu"></span>
<ul>
<li><a href="#" title="<?php
_e('Edit', 'themify');
?>
" class="themify_module_options" data-module-name="<?php
echo esc_attr($mod_name);
?>
"><?php
_e('Edit', 'themify');
?>
</a></li>
<li><a href="#" title="<?php
_e('Duplicate', 'themify');
?>
" class="themify_module_duplicate"><?php
_e('Duplicate', 'themify');
?>
</a></li>
<li><a href="#" title="<?php
_e('Delete', 'themify');
?>
" class="themify_module_delete"><?php
_e('Delete', 'themify');
?>
</a></li>
</ul>
</li>
</ul>
<?php
$mod_settings = $this->return_text_shortcode($mod_settings);
$mod_settings = json_encode($mod_settings);
?>
<div class="front_mod_settings mod_settings_<?php
echo $mod_name;
?>
" data-mod-name="<?php
echo esc_attr($mod_name);
?>
" data-settings="<?php
echo esc_attr($mod_settings);
?>
"></div>
</div>
<div class="themify_builder_data_mod_name"><?php
echo Themify_Builder_model::get_module_name($mod_name);
?>
</div>
<?php
}
