function rockthemes_cs_custom_sidebar_function()
{
global $quasar_custom_sidebar_data;
$quasar_custom_sidebar_general = get_option('quasar_custom_sidebar_general');
//update_option("quasar_custom_sidebar_data","");
$output = '<div class="wrap">';
$output .= '<div id="fa fa-themes" class="icon32"><br></div>';
$output .= '<h2>Quasar Custom Sidebars</h2>';
$output .= '<p>Custom sidebars will allow you to add/remove unlimited sidebars. Make sure you are using unique names for each of your sidebar. If you don\'t use unique names for each sidebar, it may cause a conflict.</p>';
if (isset($_REQUEST['settings-updated']) && $_REQUEST['settings-updated'] === 'true') {
echo '<div id="message2" class="updated below-h2"><p>Your Custom Sidebars has been saved.</p></div>';
}
echo '<form method="post" action="options.php">';
settings_fields('quasar_custom_sidebar_data');
$rockthemes_woosidebars_list = '';
if (function_exists('rockthemes_woocommerce_active') && rockthemes_woocommerce_active()) {
$rockthemes_woosidebars_list = '
<h4>WooCommerce Sidebar</h4>
<p>This sidebar will be used in WooCommerce Pages such as archives and shop.</p>
' . rockthemes_pb_get_custom_sidebars_dropdown(isset($quasar_custom_sidebar_general["rockthemes_woocommerce_sidebar"]) ? $quasar_custom_sidebar_general["rockthemes_woocommerce_sidebar"] : null, false, array('name' => 'quasar_custom_sidebar_general[rockthemes_woocommerce_sidebar][]', 'class' => 'quasar_custom_sidebar_woocommerce', 'id' => 'quasar_custom_sidebar_woocommerce_id'), false) . '
<br/>
';
}
$output .= "<div class='sidebar_management'>";
$output .= '<div id="col-container">
<div id="col-right">
<h3>General Settings</h3>
<h4>General Sidebar</h4>
<p>This sidebar will be used as default sidebar for all pages/posts. If you have specify a sidebar in page/post, this choice will be avoided.</p>
' . rockthemes_pb_get_custom_sidebars_dropdown(isset($quasar_custom_sidebar_general["regular"]) ? $quasar_custom_sidebar_general["regular"] : null, false, array('name' => 'quasar_custom_sidebar_general[regular][]', 'class' => 'quasar_custom_sidebar_general', 'id' => 'quasar_custom_sidebar_general_id'), false) . '
<br/>
<h4>Strict Sidebar</h4>
<p>This is strict sidebar. If you make select any option below, it will effect all of the pages/posts.</p>
' . rockthemes_pb_get_custom_sidebars_dropdown(isset($quasar_custom_sidebar_general["strict"]) ? $quasar_custom_sidebar_general["strict"] : null, false, array('name' => 'quasar_custom_sidebar_general[strict][]', 'class' => 'quasar_custom_sidebar_general', 'id' => 'quasar_custom_sidebar_general_id'), false, true) . '
<br/>
' . $rockthemes_woosidebars_list . '
<br/>
</div>
';
$output .= '<div id="col-left">';
$output .= '<h3>Add New Sidebar</h3>';
$output .= rockthemes_pb_make_columns_list();
$output .= rockthemes_cs_make_sidebar_alignment_list();
$output .= "<h4>Enter your sidebar name</h4><p><input type='text' id='new_sidebar_name' /> <input class='button-primary' type='button' id='add_sidebar' value='" . __("Add New Sidebar", "quasar") . "' /></p>";
$output .= '</div>';
//close left div
$output .= '</div>';
//close wordpress col-container
$output .= '
<table class="wp-list-table widefat fixed pages custom-sidebar-table" cellspacing="0">
<thead>
<tr>
<th scope="col" class="manage-column column-title" style="width:40%">Sidebar Name</th>
<th scope="col" class="manage-column column-column_num">Columns</th>
<th scope="col" class="manage-column column-align">Align Of Sidebar</th>
</tr>
</thead>
<tbody>
';
$i = 0;
// Display every custom sidebar
if (isset($quasar_custom_sidebar_data) && is_array($quasar_custom_sidebar_data)) {
foreach ($quasar_custom_sidebar_data as $sidebar) {
$output .= '
<tr order="' . $i . '">
<td class="column-title">
<strong>' . $sidebar['name'] . '</strong>
<div class="row-actions">
<span class="trash"><a href="#" class="delete">Delete</a></span>
</div>
</td>
<td class="column-column_num">
<strong>' . $sidebar['column'] . '</strong>
</td>
<td class="column-align">
<strong>' . rockthemes_cs_sidebar_alignment_to_string($sidebar['align']) . '</strong>
</td>
<input type="hidden" name="quasar_custom_sidebar_data[' . $i . '][name]" value="' . $sidebar['name'] . '" />
<input type="hidden" name="quasar_custom_sidebar_data[' . $i . '][column]" value="' . $sidebar['column'] . '" />
<input type="hidden" name="quasar_custom_sidebar_data[' . $i . '][align]" value="' . $sidebar['align'] . '" />
</tr>
';
$i++;
}
}
$array_num = $i;
$output .= '
</tbody>
</table>
';
$output .= "</div>";
$output .= '<br/><input class="button button-primary" type="submit" value="Save Changes" /></form></div>';
echo $output;
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".sidebar_management").on("click", ".delete", function(e){
e.preventDefault();
jQuery(this).parent().parent().parent().parent().remove();
});
jQuery(document).on("click", "#add_sidebar", function(){
if(jQuery("#new_sidebar_name").val() == "") return;
var column = jQuery(".columns_select").find(":selected");
if(column.length <= 0 || !column.val()) return;
column = column.val();
var num = jQuery(".sidebar_management .custom-sidebar-table tbody tr").length;
if(num != 0){
num = parseInt(jQuery(".sidebar_management .custom-sidebar-table tbody tr:last-child").attr("order")) + 1;
}
var alignment = jQuery(".sidebar-alignment-list").find(":selected");
var newElem = ''+
'<tr order="'+num+'">'+
'<td class="column-title">'+
'<strong>'+jQuery("#new_sidebar_name").val()+'</strong>'+
'<div class="row-actions">'+
'<span class="trash"><a href="#" class="delete">Delete</a></span>'+
'</div>'+
'</td>'+
'<td class="column-column_num">'+
'<strong>'+column+'</strong>'+
'</td>'+
'<td class="column-align">'+
'<strong>'+alignment.html()+'</strong>'+
'</td>'+
'<input type="hidden" name="quasar_custom_sidebar_data['+num+'][name]" value="'+jQuery("#new_sidebar_name").val()+'" />'+
'<input type="hidden" name="quasar_custom_sidebar_data['+num+'][column]" value="'+column+'" />'+
'<input type="hidden" name="quasar_custom_sidebar_data['+num+'][align]" value="'+alignment.val()+'" />'
'</tr>';
jQuery('.sidebar_management .custom-sidebar-table tbody').append(newElem);
jQuery("#new_sidebar_name").val("");
})
});
</script>
<?php
}
function rockthemes_post_details_metabox()
{
global $post;
$custom_sidebar = get_post_meta($post->ID, 'custom_sidebar_list', true);
$rockthemes_advanced_post_details = get_post_meta($post->ID, 'advanced_post_details', true);
$ajax_filtered_thumbnail = '';
$ajax_filtered_hover_box_image = '';
$extra_featured_images = '';
$extra_buttons = '';
$video_iframe_code = '';
if ($rockthemes_advanced_post_details) {
extract($rockthemes_advanced_post_details);
}
//Extra featured images
$extra_featured_images_counter = 0;
$extra_featured_images_html = '';
if ($extra_featured_images) {
foreach ($extra_featured_images as $featured_image) {
$extra_featured_images_html .= '
<div class="extra_featured_image_class" ref="' . $extra_featured_images_counter . '">
<strong>Choose an Image : </strong><br/><br/>
<div class="hide image-data"></div>
<label for="upload_image">
<input id="extra_featured_image' . $extra_featured_images_counter . '" class="upload_image_button" size="36" name="advanced_post_details[extra_featured_images][' . $extra_featured_images_counter . ']" type="text" value="' . $featured_image . '" />
<input class="image_uploader_class btn" value="Upload Image" type="button" />
</label>
<br/>
<div class="button extra_featured_images_remove_button">Remove Image</div>
</div>
<br/>
';
$extra_featured_images_counter++;
}
} else {
$extra_featured_images_html = '
<div class="extra_featured_image_class" ref="' . $extra_featured_images_counter . '">
<strong>Choose an Image : </strong><br/><br/>
<div class="hide image-data"></div>
<label for="upload_image">
<input id="extra_featured_image' . $extra_featured_images_counter . '" class="upload_image_button" size="36" name="advanced_post_details[extra_featured_images][' . $extra_featured_images_counter . ']" type="text" value="" />
<input class="image_uploader_class btn" value="Upload Image" type="button" />
</label>
<br/>
<div class="button extra_featured_images_remove_button">Remove Image</div>
</div>
<br/>
';
$extra_featured_images_counter++;
}
$extra_featured_images_script = '
jQuery(document).on("click",".extra_featured_images_remove_button", function(){
jQuery(this).parent().remove();
});
jQuery(document).on("click", ".extra_featured_images_add_button", function(){
var id = 0;
if(jQuery(".extra_featured_image_class").length){
id = parseInt(jQuery(".extra_featured_image_class").last().attr("ref"))+1;
}
var new_elem = "<div class=\\"extra_featured_image_class\\" ref=\\""+id+"\\">"+
"<strong>Choose an Image : </strong><br/><br/>"+
"<div class=\\"hide image-data\\"></div>"+
"<label for=\\"upload_image\\"> "+
"<input id=\\"extra_featured_image"+id+"\\" class=\\"upload_image_button\\" size=\\"36\\" name=\\"advanced_post_details[extra_featured_images]["+id+"]\\" type=\\"text\\" value=\\"\\" /> "+
"<input class=\\"image_uploader_class btn\\" value=\\"Upload Image\\" type=\\"button\\" /> "+
"</label>"+
"<br/>"+
"<div class=\\"button extra_featured_images_remove_button\\">Remove Image</div>"+
"</div>";
jQuery(".extra_featured_image_holder").append(new_elem);
});
';
$extra_buttons_html = '
<div class="extra_button_class" ref="0">
<input id="extra-button-data-0" type="hidden" name="advanced_post_details[extra_button_json_data][0]" value="" />
<input id="extra-button-0" name="advanced_post_details[extra_buttons][0]" type="text" value="" /><div class="advanced_empty_a advanced_details_make_button_modal" id_ref="extra-button-0" id_data_ref="extra-button-data-0">Add / Edit Button</div>
<a class="advanced_empty_a extra_button_remove_button">Remove Button</a>
</div>
';
$extra_button_counter = 0;
if ($extra_buttons && $extra_buttons[0] != '') {
$extra_buttons_html = '';
foreach ($extra_buttons as $extra_button) {
$extra_button_json_data = isset($rockthemes_advanced_post_details['extra_button_json_data']) && !empty($rockthemes_advanced_post_details['extra_button_json_data'][$extra_button_counter]) ? esc_attr($rockthemes_advanced_post_details['extra_button_json_data'][$extra_button_counter]) : '';
$extra_buttons_html .= '
<div class="extra_button_class" ref="' . $extra_button_counter . '">
<input id="extra-button-data-' . $extra_button_counter . '" type="hidden" name="advanced_post_details[extra_button_json_data][' . $extra_button_counter . ']" value="' . $extra_button_json_data . '" />
<input id="extra-button-' . $extra_button_counter . '" name="advanced_post_details[extra_buttons][' . $extra_button_counter . ']" type="text" value="' . esc_attr($extra_button) . '" /><a class="advanced_empty_a advanced_details_make_button_modal" id_ref="extra-button-' . $extra_button_counter . '" id_data_ref="extra-button-data-' . $extra_button_counter . '">Add / Edit Button</a> |
<a class="advanced_empty_a extra_button_remove_button">Remove Button</a>
</div>
';
$extra_button_counter++;
}
}
$extra_buttons_script = '
jQuery(document).on("click",".extra_button_remove_button", function(){
jQuery(this).parent().remove();
});
jQuery(document).on("click", ".extra_button_add_button", function(){
var id = 0;
if(jQuery(".extra_button_class").length){
id = parseInt(jQuery(".extra_button_class").last().attr("ref"))+1;
}
var new_elem = "<div class=\\"extra_button_class\\" ref=\\""+id+"\\">"+
"<input id=\\"extra-button-data-"+id+"\\" type=\\"hidden\\" name=\\"advanced_post_details[extra_button_json_data]["+id+"]\\" value=\\"\\" />"+
"<input id=\\"extra-button-"+id+"\\" name=\\"advanced_post_details[extra_buttons]["+id+"]\\" type=\\"text\\" value=\\"\\" /><a class=\\"advanced_empty_a advanced_details_make_button_modal\\" id_ref=\\"extra-button-"+id+"\\" id_data_ref=\\"extra-button-data-"+id+"\\">Add / Edit Button</a> | "+
"<a class=\\"advanced_empty_a extra_button_remove_button\\">Remove Button</a>"+
"</div>";
jQuery(".extra_buttons_container").append(new_elem);
});
';
echo '<div class="rockthemes-post-advanced-details">';
//Main Container
echo '
<br/>
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-film"></i>
</div>
</div>
<div class="span6">
<strong>Add Lightbox Video (PrettyPhoto Video)</strong><br/>
<p>You can enter your Youtube / Vimeo video link.</p>
</div>
<div class="span5">
<textarea class="" name="advanced_post_details[video_iframe_code]" rows="4">' . $video_iframe_code . '</textarea>
</div>
</div>
<hr />
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-columns"></i>
</div>
</div>
<div class="span6">
<strong>Choose a Sidebar</strong><br/>
<p>Choose your sidebar. If you do not have any sidebar, you can quickly add sidebars by clicking to "Add New Sidebar" button. If you don\'t want to use sidebar leave it empty.</p>
</div>
<div class="span5">
' . rockthemes_pb_get_custom_sidebars_dropdown($custom_sidebar, false) . '
</div>
</div>
<hr />
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-link"></i>
</div>
</div>
<div class="span6">
<strong>Add Extra Button for Portfolio List</strong><br/>
<p>You can add extra button for Portfolio List. This button will only show up in the Portfolio List.</p>
<div class="button extra_button_add_button"><i class="fa fa-plus"></i> Add Extra Button</div>
</div>
<div class="span5 extra_buttons_container">
' . $extra_buttons_html . '
</div>
</div>
<hr/>
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-picture-o"></i>
</div>
</div>
<div class="span6">
<strong>Add Ajax Filtered Portfolio Thumbnail</strong><br/>
<p>Ajax Filtered Portfolio works best with square images (Images with same width and height value). You can change this thumbnail size in Theme Options. Here are your current Ajax Filtered Thumbnail details : <br/><br/>
<strong>Width : </strong>' . xr_get_option('rockthemes_ajaxfiltered_thumbnail_width', '125px') . '<br/><strong>Height : </strong>' . xr_get_option('rockthemes_ajaxfiltered_thumbnail_height', '125px') . '</p>
</div>
<div class="span5">
<div class="ajax_filtered_thumbnail" ref="icon-image-uploader">
<strong>Choose an Image : </strong><br/><br/>
<div class="hide image-data"></div>
<label for="upload_image"> <input id="ajax_filtered_thumbnail" class="upload_image_button" size="36" name="advanced_post_details[ajax_filtered_thumbnail]" type="text" value="' . $ajax_filtered_thumbnail . '" /> <input class="image_uploader_class btn" value="Upload Image" type="button" /> </label><br/>
</div>
</div>
</div>
<hr />
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-picture-o"></i>
</div>
</div>
<div class="span6">
<strong>Add Ajax Filtered Hover Box Image</strong><br/>
<p>If you use Ajax Filtered Portfolio with Hover Box effect, you can upload a special image that fits your image size. Your current image sizes area : <br/><br/>
<strong>Width : </strong>' . xr_get_option('ajax_filtered_hover_width', '590px') . '<br/><strong>Height : </strong>' . xr_get_option('ajax_filtered_hover_height', '300px') . '</p>
</div>
<div class="span5">
<div class="ajax_filtered_hover_box_image" ref="icon-image-uploader">
<strong>Choose an Image : </strong><br/><br/>
<div class="hide image-data"></div>
<label for="upload_image"> <input id="ajax_filtered_hover_box_image" class="upload_image_button" size="36" name="advanced_post_details[ajax_filtered_hover_box_image]" type="text" value="' . $ajax_filtered_hover_box_image . '" /> <input class="image_uploader_class btn" value="Upload Image" type="button" /> </label><br/>
</div>
</div>
</div>
<hr />
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-picture-o"></i>
</div>
</div>
<div class="span6">
<strong>Add Extra Featured Image</strong><br/>
<p>You can add up to 5 featured images. You can add new images by clicking to "Add Featured Image" button.</p><br/>
<div class="button extra_featured_images_add_button"><i class="fa fa-plus"></i> Add Featured Image</div>
</div>
<div class="span5 extra_featured_image_holder">
' . $extra_featured_images_html . '
</div>
</div>
<hr />
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-terminal"></i>
</div>
</div>
<div class="span6">
<strong>Disable Breadcrumbs / Title Area</strong><br/>
<p>If you want to disable the Header Title and Breadcrumbs area, choose disable</p><br/>
</div>
<div class="span5">
<select autocomplete="off" name="advanced_post_details[disable_title_breadcrumbs_area]">
<option value="false" ' . (isset($rockthemes_advanced_post_details['disable_title_breadcrumbs_area']) && $rockthemes_advanced_post_details['disable_title_breadcrumbs_area'] === 'false' ? 'selected' : '') . '>Do Not Disable Area</option>
<option value="true" ' . (isset($rockthemes_advanced_post_details['disable_title_breadcrumbs_area']) && $rockthemes_advanced_post_details['disable_title_breadcrumbs_area'] === 'true' ? 'selected' : '') . '>Disable Area</option>
</select>
</div>
</div>
<hr />
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-resize-vertical"></i>
</div>
</div>
<div class="span6">
<strong>Space Between Header and Footer</strong><br/>
<p>This option will add extra vertical space under header and top of the footer.</p><br/>
</div>
<div class="span5">
<select autocomplete="off" name="advanced_post_details[activate_space_under_menu]">
<option value="true" ' . (isset($rockthemes_advanced_post_details['activate_space_under_menu']) && $rockthemes_advanced_post_details['activate_space_under_menu'] === 'true' ? 'selected' : '') . '>Add Vertical Space</option>
<option value="false" ' . (isset($rockthemes_advanced_post_details['activate_space_under_menu']) && $rockthemes_advanced_post_details['activate_space_under_menu'] === 'false' ? 'selected' : '') . '>Do Not Add Vertical Space</option>
</select>
</div>
</div>
<hr />
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-archive"></i>
</div>
</div>
<div class="span6">
<strong>Display Footer Large Area</strong><br/>
<p>If you choose default, your choice in Theme Options for footer large area will be used.</p><br/>
</div>
<div class="span5">
<select autocomplete="off" name="advanced_post_details[display_footer_large_area]">
<option value="" ' . (isset($rockthemes_advanced_post_details['display_footer_large_area']) && $rockthemes_advanced_post_details['display_footer_large_area'] === '' ? 'selected' : '') . '>Default</option>
<option value="true" ' . (isset($rockthemes_advanced_post_details['display_footer_large_area']) && $rockthemes_advanced_post_details['display_footer_large_area'] === 'true' ? 'selected' : '') . '>Display Footer Large Area</option>
<option value="false" ' . (isset($rockthemes_advanced_post_details['display_footer_large_area']) && $rockthemes_advanced_post_details['display_footer_large_area'] === 'false' ? 'selected' : '') . '>Remove Footer Large Area</option>
</select>
</div>
</div>
<hr />
<div class="row-fluid">
<div class="span1">
<div class="advanced-details-icon">
<i class="fa fa-minus"></i>
</div>
</div>
<div class="span6">
<strong>Display Footer Bottom Area</strong><br/>
<p>If you choose default, your choice in Theme Options for footer bottom area will be used.</p><br/>
</div>
<div class="span5">
<select autocomplete="off" name="advanced_post_details[display_footer_bottom_area]">
<option value="" ' . (isset($rockthemes_advanced_post_details['display_footer_bottom_area']) && $rockthemes_advanced_post_details['display_footer_bottom_area'] === '' ? 'selected' : '') . '>Default</option>
<option value="true" ' . (isset($rockthemes_advanced_post_details['display_footer_bottom_area']) && $rockthemes_advanced_post_details['display_footer_bottom_area'] === 'true' ? 'selected' : '') . '>Display Footer Bottom Area</option>
<option value="false" ' . (isset($rockthemes_advanced_post_details['display_footer_bottom_area']) && $rockthemes_advanced_post_details['display_footer_bottom_area'] === 'false' ? 'selected' : '') . '>Remove Footer Bottom Area</option>
</select>
</div>
</div>
<hr />
';
echo '</div>';
//End of main container
//Echo the scripts
echo '
<script type="text/javascript">
jQuery(document).ready(function(){
' . $extra_featured_images_script . '
' . $extra_buttons_script . '
});
</script>
';
?>
<style type="text/css">
.rockthemes-post-advanced-details .advanced-details-icon{
font-size:40px;
margin-left:10px;
color:#666666;
}
.rockthemes-post-advanced-details .advanced_empty_a{cursor:pointer;}
.rockthemes-post-advanced-details select,
.rockthemes-post-advanced-details input:not(.btn),
.rockthemes-post-advanced-details textarea{
padding:10px;
border-radius:4px;
color:#444444;
}
.rockthemes-post-advanced-details select{
min-height:40px;
}
</style>
<?php
}
