protected function if__i__() { if ($this->number !== '__i__') { return; } ?> <style> .crdn-remove-contact-social-item{ position: absolute; right: 0px; top: 0px; background: rgb(204, 204, 204); border: 1px solid white; cursor: pointer; font-family: Arial; font-weight: bold; font-size: 12px; color: white; padding: 1px 4px 1px 4px; border-radius: 4px; } .crdn-remove-contact-social-item:hover { background: rgb(163, 163, 163); } .preview{ margin: 5px 15px 0px 0px; } </style> <script id="crdn-tmpl-contact-info-social-icons" type="text/tmpl"> <div class="crdn-contact-social-item" style="position: relative;"> <button class="crdn-remove-contact-social-item" type="button">X</button> <p style="width: 47%;float: left;"> <label> Link: <input class="widefat" name="<%=data.social_link_name%>[]" type="text" value="" /> </label> </p> <div style="width: 47%;float: right;margin: 1em 0;"> <label> Icon: <?php echo circleflip_icon_selector('<%=data.social_icon_name%>[]'); ?> </label> </div> <p style="clear: both;"> <label> <input class="crdn-ci-color-field" name="<%=data.social_color_name%>[]" type="text" value="2daae1" data-default-color="#2daae1"/> </label> </p> <hr /> </div> </script> <?php }
function circleflip_optionsframework_options_interface($value, $option_name, $parent = '') { global $allowedtags, $builder_counter, $counter, $val, $fonts_global_array; if ($builder_counter == '') { $builder_counter = 0; } $settings = get_option($option_name); $select_value = ''; $checked = ''; if (isset($output)) { } else { $output = ''; } $value_extratag = isset($value['extraTag']) ? "[{$value['extraTag']}]" : ''; // Wrap all options if ($value['type'] != "heading" && $value['type'] != "info" && (empty($value['builder_type']) || $value['builder_type'] != "builderOption")) { if ($value['type'] == "pageBuilder" && $value_extratag == '[closeBuilder]') { } else { // Keep all ids lowercase with no spaces if (!isset($value['id'])) { echo $value['name']; } $value['id'] = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($value['id'])); $id = 'section-' . $value['id']; $class = 'section'; if (isset($value['type'])) { $class .= ' section-' . $value['type']; } if (isset($value['class'])) { $class .= ' ' . $value['class']; } if (isset($value_extratag)) { if ($value_extratag == '[openDiv]') { $output .= '<div class="sections_wrapper">'; } } $output .= '<div id="' . esc_attr($id) . '" class="' . esc_attr($class) . '">' . "\n"; if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } if ($value['type'] != 'editor') { $output .= '<div class="option">' . "\n" . '<div class="controls">' . "\n"; } else { if ($value['type'] == 'editor') { $output .= '<div class="option">' . "\n" . '<div>' . "\n"; } } if ($value['type'] == "pageBuilder" && $value_extratag == '[openBuilder]') { $output .= '<ul id="sortable">'; } } } else { if (!empty($value['builder_type']) && $value['builder_type'] == "builderOption") { $value['id'] = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($value['id'])); if ($value_extratag == '[openTab]') { $output .= '<li class="' . $value['tab_class'] . '" >'; $output .= '<div class="widget-head"> ' . $value["tab_name"] . ' <span class="ui-icon ui-icon-arrowthick-2-n-s"></span> <span class="plus-icon"></span> <span class="minus-icon"></span> <span class="remove-icon"></span> </div> <div class="widget-content">'; } } } // Set default value to $val if (isset($value['std'])) { if ($parent != '') { $val_modified = $value['std']; } else { $val = $value['std']; } } // If the option is already saved, ovveride $val if ($value['type'] != 'heading' && $value['type'] != 'info') { if (isset($settings[$value['id']])) { if ($parent != '') { $val_modified = $settings[$value['id']]; } else { $val = $settings[$value['id']]; } if (!is_array($val)) { $val = stripslashes($val); } } } // If there is a description save it for labels $explain_value = ''; if (isset($value['desc'])) { $explain_value = $value['desc']; } $value_class = isset($value['class']) ? $value['class'] : ''; $value_placeholder = isset($value['placeholder']) ? $value['placeholder'] : ''; $value_wrappertype = isset($value['wrapper_type']) ? $value['wrapper_type'] : ''; $value_children = isset($value['children']) ? $value['children'] : ''; switch ($value['type']) { // page builder case 'pageBuilder': if (isset($value['children'])) { foreach ($value['children'] as $key => $children_value) { foreach ($children_value as $k => $children_second_value) { $output .= circleflip_optionsframework_options_interface($children_second_value, $option_name, "[{$value['id']}]"); } } } if ($value_extratag == '[closeBuilder]') { $output .= '</ul>'; } break; // Basic text input // Basic text input case 'text': $output .= '<div class="option_container">'; if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } if (isset($val[$value['wrapper_type']][$value['id']])) { $val_modified = $val[$value['wrapper_type']]; $val_modified = $val_modified[$value['id']]; } if (isset($val_modified) && !is_array($val_modified)) { $val_modified = stripslashes($val_modified); } $output .= '<input id="' . esc_attr($value['id']) . '" placeholder="' . esc_attr($value_placeholder) . '" class="of-input" name="' . esc_attr($option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . ']') . '" type="text" value="' . esc_attr($val_modified) . '" /> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } else { $output .= '<input id="' . esc_attr($value['id']) . '" placeholder="' . esc_attr($value_placeholder) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" type="text" value="' . esc_attr($val) . '" /> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } break; case 'empty': break; case 'cust_sidebars': $output .= '<div class="option_container">'; $output .= '<input id="' . esc_attr($value['id']) . '" placeholder="Sidebar Name" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . '][]') . '" type="text" value="" /><button type="button" id="add-sidebar"></button><label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; $output .= '<div id="custom-sidebars">'; $output .= '<h5 id="current-sidebars">Current Sidebars</h5><ul>'; if (isset($val) && is_array($val)) { foreach ($val as $sidebar) { $output .= '<li> <div id="sidebar-' . esc_attr(preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($sidebar))) . '">' . '<p>' . $sidebar . '</p>'; $output .= '<input type="hidden" name="' . esc_attr($option_name . $parent . '[' . $value['id'] . '][]') . '" value="' . esc_attr($sidebar) . '">'; $output .= '<button type="button" class="remove" data-target="#sidebar-' . esc_attr(preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($sidebar))) . '"></button></div></li>'; } } $output .= '</ul></div>'; ?> <script> (function($) { $(document).ready(function() { var $input = $('#<?php echo esc_attr($value['id']); ?> '); $('#add-sidebar').on('click', function(e) { var sb_name = $input.val(); var new_sidebar = "<li><div id='sidebar-" + sb_name + "'><p>" + sb_name + "</p><input type='hidden' name='<?php echo esc_attr($option_name . $parent . '[' . $value['id'] . '][]'); ?> ' value='" + sb_name + "'>" + "<button type='button' class='remove' data-target='#sidebar-" + sb_name + "'></button></div></li>"; $('#custom-sidebars ul').append(new_sidebar); $input.val(''); }); $('#custom-sidebars').on('click', '.remove', function(e) { $($(this).data('target')).parent('li').remove(); }); }); })(jQuery) </script> <?php break; case 'cust_font': $output .= '<div class="option_container">'; $output .= '<select class="add-font-select">'; foreach ($fonts_global_array as $key_font => $value_font) { $output .= '<option value="' . $key_font . '">' . $value_font . '</option>'; } $output .= '</select>'; $output .= '<input id="' . esc_attr($value['id']) . '" style="display: none;" class="of-input" name="" type="text" value="" /><button type="button" id="add-font"></button><label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; $output .= '<div id="custom-fonts">'; $output .= '<h5 id="current-fonts">Current fonts</h5><ul>'; if (isset($val) && is_array($val)) { foreach ($val as $font) { $output .= '<li> <div id="font-' . esc_attr(preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($font))) . '">' . '<p>' . $font . '</p>'; $output .= '<input type="hidden" name="' . esc_attr($option_name . $parent . '[' . $value['id'] . '][]') . '" value="' . esc_attr($font) . '">'; $output .= '<button type="button" class="remove" data-target="#font-' . esc_attr(preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($font))) . '"></button></div></li>'; } } $output .= '</ul></div>'; ?> <script> ( function( $ ) { $( document ).ready( function() { var $input = $( '#<?php echo esc_attr($value['id']); ?> ' ); $( '#add-font' ).on( 'click', function( e ) { $input.val( $( '.add-font-select' ).val() ); var sb_name = $input.val(); var new_font = "<li><div id='font-" + sb_name + "'><p>" + sb_name + "</p><input type='hidden' name='<?php echo esc_attr($option_name . $parent . '[' . $value['id'] . '][]'); ?> ' value='" + sb_name + "'>" + "<button type='button' class='remove' data-target='#font-" + sb_name + "'></button></div></li>"; $( '#custom-fonts ul' ).append( new_font ); $input.val( '' ); } ); $( '#custom-fonts' ).on( 'click', '.remove', function( e ) { $( $( this ).data( 'target' ) ).parent( 'li' ).remove(); } ); } ); } )( jQuery ) </script> <?php break; case 'cust_social': $name = $option_name . '[social_urls]'; ob_start(); ?> <div class="option_container"> <ul id="social-icons-fields"> <?php foreach ((array) $val as $i => $social) { ?> <li> <div class="iconsLink"> <label> Link: <input type="text" name="<?php echo $name . '[' . $i . ']' . '[link]'; ?> " value="<?php echo $social['link']; ?> "> </label> </div> <label class="icon_picker"> <p>Icon:</p> <?php echo circleflip_icon_selector($name . '[' . $i . ']' . '[icon]', $social['icon']); ?> </label> <button type="button" class="button cf-of-si-remove">Remove</button> </li> <?php } ?> </ul> <button type="button" class="cf-of-si-add">Add</button> </div> <script type="text/template" id="social-icons-template"> <li> <div class="iconsLink"> <label> Link: <input type="text" name="<?php echo $name . '[<%= data.i %>][link]'; ?> " value=""> </label> </div> <label class="icon_picker"> <p>Icon:</p> <?php echo circleflip_icon_selector("{$name}[<%= data.i %>][icon]"); ?> </label> <button type="button" class="button cf-of-si-remove">Remove</button> </li> </script> <script> jQuery( function( $ ) { var socialIconsList = $( '#social-icons-fields' ), socialIconsTemplate = $( '#social-icons-template' ), socialIconsTmpl = _.template( socialIconsTemplate.html(), null, { variable: 'data' } ); $( '.cf-of-si-add' ).on( 'click', function() { socialIconsList.append( socialIconsTmpl( { i: parseInt( socialIconsList.children().length ) + 1 } ) ); } ); $( document ).on( 'click', '.cf-of-si-remove', function() { var toRemove = $( this ).closest( 'li' ); toRemove.slideUp( 'fast', function() { toRemove.remove(); } ); } ); } ); </script> <?php $output .= ob_get_clean(); break; // export options // export options case 'export-options': $nonce = wp_create_nonce("creiden_rojo_export_options_ajax"); $output .= '<textarea onclick="this.select()" id="export-data" data-_ajax_nonce="' . $nonce . '" class="of-input">' . base64_encode(serialize(get_option('rojo'))) . '</textarea><label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label>'; break; // export options // export options case 'import_options': $output .= '<textarea id="import-data" class="of-input" name="' . esc_attr($option_name . $parent) . '"></textarea><label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label>'; break; // Password input // Password input case 'password': $output .= '<input id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . $parent . '[' . $value['id'] . ']') . '" type="password" value="' . esc_attr($val) . '" /> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> '; break; // Textarea // Textarea case 'textarea': $output .= '<div class="option_container">'; $rows = '8'; if (isset($value['settings']['rows'])) { $custom_rows = $value['settings']['rows']; if (is_numeric($custom_rows)) { $rows = $custom_rows; } } if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } $val_modified = isset($val[$value['wrapper_type']][$value['id']]) ? $val[$value['wrapper_type']][$value['id']] : $val_modified; if (isset($val_modified) && !is_array($val_modified)) { $val_modified = stripslashes($val_modified); } $output .= '<textarea id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . ']') . '" rows="' . $rows . '">' . esc_textarea($val_modified) . '</textarea> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } else { $output .= '<textarea id="' . esc_attr($value['id']) . '" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" rows="' . $rows . '">' . $val . '</textarea> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } break; // Select Box // Select Box case 'select': $class = isset($value['class']) ? $value['class'] : ''; $output .= '<div class="option_container">'; if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } $output .= '<select class="of-input ' . $class . '" name="' . esc_attr($option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '">'; foreach ($value['options'] as $key => $option) { $selected = ''; if (isset($val[$value['wrapper_type']][$value['id']])) { if ($val[$value['wrapper_type']][$value['id']] != '') { if ($val[$value['wrapper_type']][$value['id']] == $key) { $selected = ' selected="selected"'; } } } $output .= '<option' . $selected . ' value="' . esc_attr($key) . '">' . esc_html($option) . '</option>'; } $output .= '</select> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } else { $output .= '<select class="of-input ' . $class . '" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '">'; $layout_counter = 0; foreach ($value['options'] as $key => $option) { $data_homelayout = isset($value['data-homelayout'][$layout_counter]) ? $value['data-homelayout'][$layout_counter] : ""; $data_sidebar = isset($value['data-sidebar-alignment'][$layout_counter]) ? $value['data-sidebar-alignment'][$layout_counter] : ""; $selected = ''; if ($val != '') { if ($val == $key) { $selected = ' selected="selected"'; } } $output .= '<option' . $selected . ' value="' . esc_attr($key) . '" data-homelayout="' . $data_homelayout . '" data-sidebar-alignment="' . $data_sidebar . '" > ' . esc_html($option) . '</option>'; $layout_counter++; } $output .= '</select> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } break; // encoding input // encoding input case 'hiddenInput': $output .= '<input type="hidden" id="' . esc_attr($value['id']) . '" name="' . esc_attr($option_name . '[' . $value['hidden_name'] . ']') . '" value="" />'; break; // Radio Box // Radio Box case "radio": $output .= '<div class="option_container">'; if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } $val_modified = isset($val[$value['wrapper_type']][$value['id']]) ? $val[$value['wrapper_type']][$value['id']] : $val_modified; $name = $option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . ']'; $output .= '<ul class="radioButtonWrapper">'; foreach ($value['options'] as $key => $option) { $id = $option_name . '-' . $value['id'] . '-' . $key; $output .= '<li><label><input class="of-input of-radio" type="radio" name="' . esc_attr($name) . '" id="' . esc_attr($id) . '" value="' . esc_attr($key) . '" ' . checked($val_modified, $key, false) . ' />' . esc_html($option) . '</label></li>'; } $output .= '</ul> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } else { $name = $option_name . '[' . $value['id'] . ']'; $output .= '<ul class="radioButtonWrapper">'; foreach ($value['options'] as $key => $option) { $id = $option_name . '-' . $value['id'] . '-' . $key; $output .= '<li><label><input class="of-input of-radio" type="radio" name="' . esc_attr($name) . '" id="' . esc_attr($id) . '" value="' . esc_attr($key) . '" ' . checked($val, $key, false) . ' />' . esc_html($option) . '</label></li>'; } $output .= '</ul> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } break; // Image Selectors // Image Selectors case "images": $class = isset($value['class']) ? $value['class'] : ''; $output .= '<div class="option_container"><ul class="' . $class . '">'; if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } $name = $option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . ']'; foreach ($value['options'] as $key => $option) { $selected = ''; $checked = ''; $val_modified = isset($val[$value['wrapper_type']][$value['id']]) ? $val[$value['wrapper_type']][$value['id']] : $val_modified; if ($val_modified != '') { if ($val_modified == $key) { $selected = ' of-radio-img-selected'; $checked = ' checked="checked"'; } } $output .= '<li><input type="radio" id="' . esc_attr($value['id'] . '_' . $key) . '" class="of-radio-img-radio" value="' . esc_attr($key) . '" name="' . esc_attr($name) . '" ' . $checked . ' />'; $output .= '<div class="of-radio-img-label">' . esc_html($key) . '</div>'; $output .= '<img src="' . esc_url($option) . '" alt="' . $option . '" class="of-radio-img-img' . $selected . '" onclick="document.getElementById(\'' . esc_attr($value['id'] . '_' . $key) . '\').checked=true;" /></li>'; } $output .= '</ul> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } else { $name = $option_name . '[' . $value['id'] . ']'; foreach ($value['options'] as $key => $option) { $selected = ''; $checked = ''; if ($val != '') { if ($val == $key) { $selected = ' of-radio-img-selected'; $checked = ' checked="checked"'; } } $output .= '<li><input type="radio" id="' . esc_attr($value['id'] . '_' . $key) . '" class="of-radio-img-radio" value="' . esc_attr($key) . '" name="' . esc_attr($name) . '" ' . $checked . ' />'; $output .= '<div class="of-radio-img-label">' . esc_html($key) . '</div>'; $output .= '<img src="' . esc_url($option) . '" alt="' . $option . '" class="of-radio-img-img' . $selected . '" onclick="document.getElementById(\'' . esc_attr($value['id'] . '_' . $key) . '\').checked=true;" /></li>'; } $output .= '</ul> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } break; // Checkbox // Checkbox case "checkbox": $output .= '<div class="option_container">'; if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } $name = $option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . ']'; $val_modified = isset($val[$value['wrapper_type']][$value['id']]) ? 1 : ''; $output .= '<input id="' . esc_attr($value['id']) . '" class="checkbox of-input" type="checkbox" name="' . esc_attr($name) . '" ' . checked($val_modified, 1, false) . ' />'; $output .= '<label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; } else { $output .= '<input id="' . esc_attr($value['id']) . '" class="checkbox of-input" type="checkbox" name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" ' . checked($val, 1, false) . ' />'; $output .= '<label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; } break; // Multicheck // Multicheck case "multicheck": $output .= '<div class="option_container">'; if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } foreach ($value['options'] as $key => $option) { $checked = ''; $label = $option; $option = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($key)); $id = $option_name . '-' . $value['id'] . '-' . $option; $name = $option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . '][' . $option . ']'; $val_modified = isset($val[$value['wrapper_type']][$value['id']][$key]) ? 1 : ''; if (isset($val_modified)) { $checked = checked($val_modified, 1, false); } $output .= '<input id="' . esc_attr($id) . '" class="checkbox of-input" type="checkbox" name="' . esc_attr($name) . '" ' . $checked . ' /><label for="' . esc_attr($id) . '">' . esc_html($label) . '</label>'; } $output .= '<label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; } else { foreach ($value['options'] as $key => $option) { $checked = ''; $label = $option; $option = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($key)); $id = $option_name . '-' . $value['id'] . '-' . $option; $name = $option_name . '[' . $value['id'] . '][' . $option . ']'; if (isset($val[$option])) { $checked = checked($val[$option], 1, false); } $output .= '<input id="' . esc_attr($id) . '" class="checkbox of-input" type="checkbox" name="' . esc_attr($name) . '" ' . $checked . ' /><label for="' . esc_attr($id) . '">' . esc_html($label) . '</label>'; } $output .= '</div>'; } break; // Color picker // Color picker case "color": $output .= '<div class="option_container">'; if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } $name = $option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . ']'; $default_color = ''; $val_modified = isset($val[$value['wrapper_type']][$value['id']]) ? $val[$value['wrapper_type']][$value['id']] : $val_modified; if (isset($value['std'])) { if ($val_modified != $value['std']) { $default_color = ' data-default-color="' . $value['std'] . '" '; } } $output .= '<input name="' . esc_attr($name) . '" id="' . esc_attr($value['id']) . '" class="of-color" type="text" value="' . esc_attr($val_modified) . '"' . $default_color . ' /> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } else { $default_color = ''; if (isset($value['std'])) { if ($val != $value['std']) { $default_color = ' data-default-color="' . $value['std'] . '" '; } } $output .= '<input name="' . esc_attr($option_name . '[' . $value['id'] . ']') . '" id="' . esc_attr($value['id']) . '" class="of-color" type="text" value="' . esc_attr($val) . '"' . $default_color . ' /> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label> </div>'; } break; case "selectmultiple": $output .= '<div class="option_container">'; if ($parent != '') { if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } $output .= '<select name="' . esc_attr($option_name . $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . '][]') . '" id="' . esc_attr($value['id']) . '" multiple>'; foreach ($value['options'] as $key => $option) { $selected = ''; if (isset($val[$value['wrapper_type']][$value['id']])) { if (in_array($key, $val[$value['wrapper_type']][$value['id']])) { $selected = 'selected = "selected"'; } } $output .= '<option value="' . $key . '"' . $selected . '>' . $option . '</option>'; } $output .= '</select> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label>'; } else { $output .= '<select name="' . esc_attr($option_name . '[' . $value['id'] . '][]') . '" id="' . esc_attr($value['id']) . '" multiple>'; foreach ($value['options'] as $key => $option) { $selected = ''; if (isset($val) && is_array($val)) { if (in_array($key, $val)) { $selected = 'selected = "selected"'; } } $output .= '<option value="' . $key . '"' . $selected . '>' . $option . '</option>'; } $output .= '</select> <label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label>'; } $output .= '</div>'; break; // Uploader // Uploader case "upload": $output .= '<div class="option_container">'; if ($parent != '') { $val_modified = isset($val[$value['wrapper_type']][$value['id']]) ? $val[$value['wrapper_type']][$value['id']] : ''; $name = $parent . '[' . $value['wrapper_type'] . '][' . $value['id'] . ']'; $name = substr($name, 1, -1); $output .= circleflip_optionsframework_uploader($name, $val_modified, null); $output .= '<label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; } else { $output .= circleflip_optionsframework_uploader($value['id'], $val, null); $output .= '<label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; } break; // Logo Builder // Logo Builder case "logo_builder": $output .= '<div id="' . $value['id'] . '" class="containmentLogo" style="height: ' . cr_get_option('header_height', 137) . 'px; width: ' . cr_get_option('logo_wrapper_width', 270) . 'px"> <img class="logo" src="' . cr_get_option('theme_logo') . '" style="width:' . cr_get_option('logo_width') . 'px;height:' . cr_get_option('logo_height') . 'px;left:' . cr_get_option('logo_left') . 'px;top:' . cr_get_option('logo_top') . 'px;" alt=""> </div>'; break; // Button // Button case "button": $output .= '<button id="' . $value['id'] . '" class="' . $value_class . ' button" type="button">' . $value['text'] . '</button>'; $output .= isset($value['desc']) ? $value['desc'] : ''; break; // Button // Button case "builder_button": $output .= '<button id="' . $value['id'] . '" class="' . $value_class . ' button" type="button">' . $value['text'] . '</button>'; break; // Typography // Typography case 'typography': unset($font_size, $font_style, $font_face, $font_color, $font_weight); $typography_defaults = array('size' => '', 'face' => '', 'style' => '', 'weight' => '', 'color' => ''); $typography_stored = wp_parse_args($val, $typography_defaults); $typography_options = array('sizes' => circleflip_of_recognized_font_sizes(), 'faces' => circleflip_of_recognized_font_faces(), 'styles' => circleflip_of_recognized_font_styles(), 'weights' => circleflip_of_recognized_font_weights(), 'color' => true); if (isset($value['options'])) { $typography_options = wp_parse_args($value['options'], $typography_options); } // Font Size if ($typography_options['sizes']) { $font_size = '<select class="of-typography of-typography-size ' . $value_class . '" name="' . esc_attr($option_name . '[' . $value['id'] . '][size]') . '" id="' . esc_attr($value['id'] . '_size') . '">'; $sizes = $typography_options['sizes']; foreach ($sizes as $i) { $size = $i . 'px'; $font_size .= '<option value="' . esc_attr($size) . '" ' . selected($typography_stored['size'], $size, false) . '>' . esc_html($size) . '</option>'; } $font_size .= '</select>'; } // Font Face if ($typography_options['faces']) { $font_face = '<select class="of-typography of-typography-face ' . $value_class . '" name="' . esc_attr($option_name . '[' . $value['id'] . '][face]') . '" id="' . esc_attr($value['id'] . '_face') . '">'; $faces = $typography_options['faces']; foreach ($faces as $key => $face) { $font_face .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['face'], $key, false) . '>' . esc_html($face) . '</option>'; } $font_face .= '</select>'; } // Font Styles if ($typography_options['styles']) { $font_style = '<select class="of-typography of-typography-style ' . $value_class . '" name="' . $option_name . '[' . $value['id'] . '][style]" id="' . $value['id'] . '_style">'; $styles = $typography_options['styles']; foreach ($styles as $key => $style) { $font_style .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['style'], $key, false) . '>' . $style . '</option>'; } $font_style .= '</select>'; } // Font Weights if ($typography_options['weights']) { $font_weight = '<select class="of-typography of-typography-weight ' . $value_class . '" name="' . $option_name . '[' . $value['id'] . '][weight]" id="' . $value['id'] . '_weight">'; $weights = $typography_options['weights']; foreach ($weights as $key => $weight) { $font_weight .= '<option value="' . esc_attr($key) . '" ' . selected($typography_stored['weight'], $key, false) . '>' . $weight . '</option>'; } $font_weight .= '</select>'; } // Font Color if ($typography_options['color']) { $default_color = ''; if (isset($value['std']['color'])) { if ($val != $value['std']['color']) { $default_color = ' data-default-color="' . $value['std']['color'] . '" '; } } $font_color = '<input name="' . esc_attr($option_name . '[' . $value['id'] . '][color]') . '" id="' . esc_attr($value['id'] . '_color') . '" class="of-color of-typography-color ' . $value_class . '" type="text" value="' . esc_attr($typography_stored['color']) . '"' . $default_color . ' />'; } // Allow modification/injection of typography fields $typography_fields = compact('font_size', 'font_face', 'font_style', 'font_color', 'font_weight'); $typography_fields = apply_filters('circleflip_of_typography_fields', $typography_fields, $typography_stored, $option_name, $value); $output .= implode('', $typography_fields); break; // Add Slide // Add Slide case 'add_slide': if (!isset($val['number'])) { $val = array('number' => 1); } $output .= '<div class="option_container">'; $output .= '<input id="' . esc_attr($value['id']) . '" placeholder="Number of slides" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . '][number]') . '" type="hidden" value="' . esc_attr($val['number']) . '" /><label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; $output .= '<div class="add_slide">'; $output .= '<h5 id="current-sidebars" class="current_slides">Current Slides</h5><button type="button" class="add-slide button button-large" id="add-slide_' . esc_attr($value['id']) . '">Add Slide</button>'; $output .= '<ul class="slidesWrapper">'; for ($i = 0; $i < $val['number']; $i++) { $output .= '<li class="slide_container">'; $output .= '<div>'; $output .= '<div class="slideTopBar">'; $output .= '<div class="slideNavigator"><span class="slideUp"></span><span class="slideDown"></span></div>'; $output .= '<h6>Slide ' . ($i + 1) . '</h6>'; $output .= '<div class="slideView"><button type="button" class="remove icon-trash"></button><div class="collapseSlide"><button type="button" class="icon-up-open"></button></div></div>'; $output .= '</div>'; $output .= '<ul class="slideList">'; foreach ($value['slider_items'] as $key => $small_values) { $output .= '<li>'; $output .= circleflip_optionsframework_option_interface_indented($small_values, $option_name, '', $val, $value['id'], $i); $output .= '</li>'; } $output .= '</ul>'; $output .= '</div>'; $output .= '</li>'; } $output .= '</ul>'; $output .= '</div>'; ?> <script> ( function( $ ) { $( document ).ready( function() { add_slide(); slide_toggle(); function add_slide() { var $input = $( '#<?php echo esc_attr($value['id']); ?> ' ); $( '#add-slide_<?php echo esc_attr($value['id']); ?> ' ).on( 'click', function( e ) { var sb_name = parseInt( $input.val() ); sb_name = sb_name + 1; $input.val( sb_name ); $add_slide = $input.parent().next( '.add_slide' ).children( '.slidesWrapper' ); var $cloned_element = $add_slide.find( '.slide_container' ).first().clone(); $cloned_element.find( '.slideTopBar h6' ).text( 'Slide ' + sb_name ); // Handle the radio buttons var radio_name = $cloned_element.find( '.of-radio' ).attr( 'name' ); $cloned_element.find( '.of-radio' ).attr( 'name', 'radio_temporary' ); $cloned_element.find( '.of-radio' ).attr( 'name', radio_name.replace( /\d+/, sb_name - 1 ) ); $cloned_element.appendTo( $add_slide ); var $name = $add_slide.find( '.slide_container' ).last().find( 'input[type=text],input[type=radio]' ).each( function( index, element ) { $( element ).attr( 'name', $( element ).attr( 'name' ).replace( /\d+/, sb_name - 1 ) ); $( element ).val( '' ).removeAttr( 'checked' ); } ); var $name = $add_slide.find( '.slide_container' ).last().find( 'select' ).each( function( index, element ) { $( element ).attr( 'name', $( element ).attr( 'name' ).replace( /\d+/, sb_name - 1 ) ); $( element ).find( 'option:selected' ).removeAttr( 'selected' ); } ); // empty all the modules if the copied element was remove if ( $( '.slide_container' ).first().find( '.screenshot' ).prev().val() == 'Remove' ) { $add_slide.find( '.slide_container' ).last().find( '.remove-file' ).remove(); $add_slide.find( '.slide_container' ).last().find( '.screenshot' ).hide(); $add_slide.find( '.slide_container' ).last().find( '.screenshot' ).before( '<input id="remove-<?php echo esc_attr($value['id']); ?> _image" class="button upload-button" type="button" value="Upload">' ); } optionsframework_file_bindings(); $( '#add-slide_<?php echo esc_attr($value['id']); ?> ' ).off( 'click' ); add_slide(); slide_toggle(); } ); $( '.slide_container' ).off( 'click', '.remove' ); $( '.slide_container' ).on( 'click', '.remove', function( e ) { $( this ).parents( '.slide_container' ).remove(); var sb_name = parseInt( $input.val() ); sb_name = sb_name - 1; $input.val( sb_name ); $add_slide = $input.parent().next( '.add_slide' ); var $name = $add_slide.find( '.slide_container' ).each( function( index, element ) { $( element ).find( '.slideTopBar h6' ).text( 'Slide ' + parseInt( index + 1 ) ); $( element ).find( 'input' ).each( function( count, small_element ) { if ( typeof $( small_element ).attr( 'name' ) !== 'undefined' && $( small_element ).attr( 'name' ) !== false ) { $( small_element ).attr( 'name', $( small_element ).attr( 'name' ).replace( /\d+/, index ) ); } } ); } ); var $name = $add_slide.find( '.slide_container' ).each( function( index, element ) { $( element ).find( 'input' ).each( function( count, small_element ) { if ( typeof $( small_element ).attr( 'name' ) !== 'undefined' && $( small_element ).attr( 'name' ) !== false ) { $( small_element ).attr( 'name', $( small_element ).attr( 'name' ).replace( /\d+/, index ) ); } } ) } ); } ); $( ".slidesWrapper" ).sortable( { placeholder: "ui-state-highlight", beforeStop: function( event, ui ) { var sb_name = parseInt( $input.val() ); $add_slide = $input.parent().next( '.add_slide' ) var $name = $add_slide.find( '.slide_container' ).each( function( index, element ) { $( element ).find( 'input[type=text]' ).each( function( count, small_element ) { $( small_element ).attr( 'name', $( small_element ).attr( 'name' ).replace( /\d+/, index ) ); } ) $( element ).find( 'input[type=radio]' ).each( function( count, small_element ) { $( small_element ).attr( 'name', $( small_element ).attr( 'name' ).replace( /\d+/, index ) ); } ) } ); var $name = $add_slide.find( '.slide_container' ).each( function( index, element ) { $( element ).find( 'input[type=text]' ).each( function( count, small_element ) { $( small_element ).attr( 'name', $( small_element ).attr( 'name' ).replace( /\d+/, index ) ); } ) $( element ).find( 'input[type=radio]' ).each( function( count, small_element ) { $( small_element ).attr( 'name', $( small_element ).attr( 'name' ).replace( /\d+/, index ) ); } ) } ); } } ); } function slide_toggle() { $( '.slide_container' ).off( 'click', '.collapseSlide button' ); $( '.slide_container' ).on( 'click', '.collapseSlide button', function( e ) { $this = $( this ); $this.parents( '.slideTopBar' ).siblings( '.slideList' ).slideToggle( function() { if ( $this.hasClass( 'icon-up-open' ) ) { $this.removeClass( "icon-up-open" ); $this.addClass( "icon-down-open" ); } else { $this.removeClass( "icon-down-open" ); $this.addClass( "icon-up-open" ); } } ); e.stopPropagation(); } ); } } ); } )( jQuery ) </script> <?php break; //case create_slider //case create_slider case 'create_slider': $output .= '<div class="option_container">'; $output .= '<input id="' . esc_attr($value['id']) . '" placeholder="Slider Name" class="of-input" name="' . esc_attr($option_name . '[' . $value['id'] . '][]') . '" type="text" value="" /><button type="button" id="add-slider"></button><label class="explain" for="' . esc_attr($value['id']) . '">' . wp_kses($explain_value, $allowedtags) . '</label></div>'; $output .= '<div id="slider-created">'; $output .= '<h5 id="current-sliders">Current Sliders</h5><ul>'; if (isset($val) && is_array($val)) { foreach ($val as $slider) { if (isset($slider) && !empty($slider)) { $output .= '<li> <div id="slider-' . esc_attr(preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($slider))) . '">' . '<p>' . $slider . '</p>'; $output .= '<input type="hidden" name="' . esc_attr($option_name . $parent . '[' . $value['id'] . '][]') . '" value="' . esc_attr($slider) . '">'; $output .= '<button type="button" class="remove" data-target="#slider-' . esc_attr(preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($slider))) . '"></button></div></li>'; } } } $output .= '</ul></div>'; ?> <script> ( function( $ ) { $( document ).ready( function() { var $input = $( '#<?php echo esc_attr($value['id']); ?> ' ); $( '#add-slider' ).on( 'click', function( e ) { var sb_name = $input.val(); var sb_name_trimmed = sb_name.replace( / /g, '' ); var find_same_name = false; $( '#slider-created ul li' ).each( function() { //Check if slider name is already taken if ( $( this ).children( 'div' ).attr( 'id' ) == ( 'slider-' + sb_name_trimmed ) ) { find_same_name = true; $( '#create_slider' ).val( '' ); $( "#create_slider" ).parents( '.section' ).append( '<div id="message" class="updated fade in" style="margin-top: -10px;"><p><strong>Please write another name, there is a slider with the same name</strong></p></div>' ); setTimeout( function() { $( "#message" ).hide().remove(); }, 5000 ); } } ); if ( sb_name_trimmed != '' && find_same_name == false ) { var new_sidebar = "<li><div id='slider-" + sb_name_trimmed + "'><p>" + sb_name + "</p><input type='hidden' name='<?php echo esc_attr($option_name . $parent . '[' . $value['id'] . '][]'); ?> ' value='" + sb_name + "'>" + "<button type='button' class='remove' data-target='#slider-" + sb_name_trimmed + "'></button></div></li>"; $( '#slider-created ul' ).append( new_sidebar ); $input.val( '' ); $( "#create_slider" ).parents( '.section' ).append( '<div id="message" class="updated fade in" style="margin-top: -10px;"><p><strong>Please Save your options and refresh the page to create a new slider</strong></p></div>' ); setTimeout( function() { $( "#message" ).hide().remove(); }, 5000 ); } } ); $( '#slider-created' ).on( 'click', '.remove', function( e ) { $( $( this ).data( 'target' ) ).parent( 'li' ).remove(); $( "#create_slider" ).parents( '.section' ).append( '<div id="message" class="updated fade in" style="margin-top: -10px;"><p><strong>Please Save your options and refresh the page for the changes to take effect</strong></p></div>' ); setTimeout( function() { $( "#message" ).hide().remove(); }, 5000 ); } ); } ); } )( jQuery ) </script> <?php break; // Background // Background case 'background': $background = $val; // Background Color $default_color = ''; if (isset($value['std']['color'])) { if ($val != $value['std']['color']) { $default_color = ' data-default-color="' . $value['std']['color'] . '" '; } } $output .= '<input name="' . esc_attr($option_name . $parent . '[' . $value['id'] . '][color]') . '" id="' . esc_attr($value['id'] . '_color') . '" class="of-color of-background-color" type="text" value="' . esc_attr($background['color']) . '"' . $default_color . ' />'; // Background Image if (!isset($background['image'])) { $background['image'] = ''; } $output .= circleflip_optionsframework_uploader($value['id'], $background['image'], null, esc_attr($option_name . $parent . '[' . $value['id'] . '][image]')); $class = 'of-background-properties'; if ('' == $background['image']) { $class .= ' hide'; } $output .= '<div class="' . esc_attr($class) . '">'; // Background Repeat $output .= '<select class="of-background of-background-repeat" name="' . esc_attr($option_name . $parent . '[' . $value['id'] . '][repeat]') . '" id="' . esc_attr($value['id'] . '_repeat') . '">'; $repeats = circleflip_of_recognized_background_repeat(); foreach ($repeats as $key => $repeat) { $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['repeat'], $key, false) . '>' . esc_html($repeat) . '</option>'; } $output .= '</select>'; // Background Position $output .= '<select class="of-background of-background-position" name="' . esc_attr($option_name . $parent . '[' . $value['id'] . '][position]') . '" id="' . esc_attr($value['id'] . '_position') . '">'; $positions = circleflip_of_recognized_background_position(); foreach ($positions as $key => $position) { $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['position'], $key, false) . '>' . esc_html($position) . '</option>'; } $output .= '</select>'; // Background Attachment $output .= '<select class="of-background of-background-attachment" name="' . esc_attr($option_name . $parent . '[' . $value['id'] . '][attachment]') . '" id="' . esc_attr($value['id'] . '_attachment') . '">'; $attachments = circleflip_of_recognized_background_attachment(); foreach ($attachments as $key => $attachment) { $output .= '<option value="' . esc_attr($key) . '" ' . selected($background['attachment'], $key, false) . '>' . esc_html($attachment) . '</option>'; } $output .= '</select>'; $output .= '</div>'; break; // Editor // Editor case 'editor': $output .= '<div class="explain">' . wp_kses($explain_value, $allowedtags) . '</div>' . "\n"; echo $output; $textarea_name = esc_attr($option_name . $parent . '[' . $value['id'] . ']'); $default_editor_settings = array('textarea_name' => $textarea_name, 'media_buttons' => false, 'tinymce' => array('plugins' => 'wordpress')); $editor_settings = array(); if (isset($value['settings'])) { $editor_settings = $value['settings']; } $editor_settings = array_merge($editor_settings, $default_editor_settings); wp_editor($val, $value['id'], $editor_settings); $output = ''; break; // Info // Info case "info": $id = ''; $class = 'section'; if (isset($value['id'])) { $id = 'id="' . esc_attr($value['id']) . '" '; } if (isset($value['type'])) { $class .= ' section-' . $value['type']; } if (isset($value['class'])) { $class .= ' ' . $value['class']; } $output .= '<div ' . $id . 'class="' . esc_attr($class) . '">' . "\n"; if (isset($value['name'])) { $output .= '<h4 class="heading">' . esc_html($value['name']) . '</h4>' . "\n"; } if ($value['desc']) { $output .= apply_filters('circleflip_of_sanitize_info', $value['desc']) . "\n"; } $output .= '</div>' . "\n"; break; // Heading for Navigation // Heading for Navigation case "heading": $counter++; if ($counter >= 2) { $output .= '</div>' . "\n"; } $class = ''; $class = !empty($value['id']) ? $value['id'] : $value['name']; $class = preg_replace('/[^a-zA-Z0-9._\\-]/', '', strtolower($class)); $output .= '<div id="options-group-' . $counter . '" class="group ' . $class . '">'; $output .= '<div class="headingWrapper">'; if (isset($value['icon_name'])) { $output .= '<img src="' . $value['icon_name'] . '" alt=""/>'; } $output .= '<h3>' . esc_html($value['name']) . '</h3>' . "\n"; $output .= '</div>'; break; default: $output .= apply_filters("circleflip_options_interface_{$value['type']}", $value, $option_name, $val); } if (!empty($value_extratag)) { switch ($value_extratag) { case "[closeTab]": $width = isset($val[$value['wrapper_type']]['width']) ? $val[$value['wrapper_type']]['width'] : 100; $output .= '<input type="hidden" class="list_width" name="' . esc_attr($option_name . $parent . '[' . $value_wrappertype . '][width]') . '" value="' . esc_attr($width) . '" /> </div></li>'; $builder_counter++; break; case '[closeDiv]': $output .= '</div>'; break; } } if ($value['type'] != "heading" && $value['type'] != "info" && (empty($value['builder_type']) || $value['builder_type'] != "builderOption")) { if ($value['type'] == "pageBuilder" && $value_extratag == '[openBuilder]') { //do nothing } else { $output .= '</div>'; $output .= '</div></div>' . "\n"; } } return $output; }