/** * 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 }