function form($instance)
{
$defaults = array('title' => '', 'post_number' => '');
$instance = wp_parse_args($instance, $defaults);
extract($instance);
?>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('title'));
?>
">
Title
</label>
<span class="description_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
</span>
</span>
<span class="rightHalf">
<?php
echo circleflip_field_input('title', $block_id, $title, $size = 'full');
?>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_type'));
?>
">
Posts Type
</label>
<span class="description_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
</span>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
echo circleflip_field_select('post_type', $block_id, array('Latest Posts', 'Popular Posts', 'Selected Posts'), isset($post_type) ? $post_type : 'Latest Posts', array('data-fd-handle="post_type"'));
?>
</span>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_cat_type'));
?>
">
Posts Category Type
</label>
<span class="description_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
</span>
</span>
<span class="rightHalf sel">
<?php
echo circleflip_field_multiselect('post_cat_type', $block_id, array('blog', 'portfolio'), isset($post_cat_type) ? $post_cat_type : '');
?>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_selected_cats'));
?>
">
Selected Categories
</label>
<span class="description_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
</span>
</span>
<span class="rightHalf">
<?php
$options_categories = circleflip_get_categories();
echo circleflip_field_multiselect('post_selected_cats', $block_id, $options_categories, isset($post_selected_cats) ? $post_selected_cats : '');
?>
</span>
</p>
<p class="description" data-fd-rules='["post_type:equal:2"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_selected_posts'));
?>
">
Selected Posts
</label>
<span class="description_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
</span>
</span>
<span class="rightHalf">
<?php
$postNames = circleflip_get_posts();
echo circleflip_field_multiselect('post_selected_posts', $block_id, $postNames, isset($post_selected_posts) ? $post_selected_posts : '');
?>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_order'));
?>
">
Posts Order
</label>
<span class="description_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
</span>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
echo circleflip_field_select('post_order', $block_id, array('asc' => 'Ascending', 'desc' => 'Descending'), isset($post_order) ? $post_order : 'asc');
?>
</span>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('type'));
?>
">
Layout Style
</label>
<span class="description_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
</span>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
echo circleflip_field_select('type', $block_id, array('Thirds', 'Fourths'), isset($type) ? $type : 'Thirds');
?>
</span>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_number'));
?>
">
Number of Posts
</label>
<span class="description_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
</span>
</span>
<span class="rightHalf">
<?php
echo circleflip_field_input('post_number', $block_id, $post_number, $size = 'full');
?>
</span>
</p>
<?php
}
function form($instance)
{
$defaults = array('title' => '', 'post_number' => '', 'entrance_animation' => '', 'post_cat_type' => 'blog', 'post_shape' => 'circle', 'hover_style' => 'squarestyle1', 'animation_number' => 0, 'post_style' => 'circle', 'post_type' => '', 'masonry' => false, 'check_element_color' => 0, 'elements_color' => '');
$instance = wp_parse_args($instance, $defaults);
extract($instance);
$post_selected_cats = isset(${"post_selected_cats_{$post_cat_type}"}) ? ${"post_selected_cats_{$post_cat_type}"} : array();
?>
<div class="block-container" data-post-shape="<?php
echo esc_attr($post_shape);
?>
" data-posts2show="<?php
echo esc_attr($post_type);
?>
">
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('title'));
?>
">
<?php
_e('Block title', 'circleflip-builder');
?>
</label>
</span>
<span class="rightHalf">
<?php
echo circleflip_field_input('title', $block_id, $title, $size = 'full');
?>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('titleIcon'));
?>
">
Title Icon:
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
$titleIconOption = array('without Icon', 'with Icon');
?>
<?php
echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
?>
</span>
</span>
</p>
<p class="description crdn-post-shape">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_shape'));
?>
">
<?php
_e('Post shape', 'circleflip-builder');
?>
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select postsStyle">
<?php
//echo circleflip_field_select( 'post_shape', $block_id, array( 'circle' => 'Circle', 'square' => 'Square' ), $post_shape, array('data-fd-handle="post_shape"') )
?>
<?php
echo circleflip_field_select('post_shape', $block_id, array('circle' => 'Circle', 'square' => 'Square', 'magazine' => 'Magazine'), $post_shape, array('data-fd-handle="post_shape"'));
?>
</span>
</span>
</p>
<!-- only visible when post_shape is square -->
<p class="description" data-fd-rules='["post_shape:equal:square"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('hover_style'));
?>
">
<?php
_e('Hover style', 'circleflip-builder');
?>
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select postsStyle">
<?php
echo circleflip_field_select('hover_style', $block_id, array('squarestyle1' => 'layout 1', 'squarestyle2' => 'layout 2', 'squarestyle3' => 'layout 3'), isset($post_style) ? $post_style : 'circle', array('data-fd-handle="post_hover"'));
?>
</span>
</span>
</p>
<p class="description" data-fd-rules='["post_shape:equal:square", "post_hover:equal:squarestyle1"]'>
<img style="display: block;margin:0 auto; " src="<?php
echo get_template_directory_uri();
?>
/creiden-framework/content-builder/assets/images/hover_1.png" alt=""/>
</p>
<p class="description" data-fd-rules='["post_shape:equal:square", "post_hover:equal:squarestyle2"]'>
<img style="display: block;margin:0 auto; " src="<?php
echo get_template_directory_uri();
?>
/creiden-framework/content-builder/assets/images/hover_2.png" alt=""/>
</p>
<p class="description" data-fd-rules='["post_shape:equal:square", "post_hover:equal:squarestyle3"]'>
<img style="display: block;margin:0 auto; " src="<?php
echo get_template_directory_uri();
?>
/creiden-framework/content-builder/assets/images/hover_3.png" alt=""/>
</p>
<p class="description" data-fd-rules='["post_shape:equal:square"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('masonry'));
?>
">
<?php
_e('Masonry', 'circleflip-builder');
?>
</label>
</span>
<span class="rightHalf">
<span class="rightHalf postsStyle">
<?php
echo circleflip_field_checkbox('masonry', $block_id, $masonry, array('data-fd-handle="masonry"'));
?>
</span>
</span>
</p>
<!-- only visible when post_shape is circle -->
<p class="description circlePostsShow" data-fd-rules='["post_shape:equal:circle"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('animation_number'));
?>
">
<?php
_e('Hover style', 'circleflip-builder');
?>
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
echo circleflip_field_select('animation_number', $block_id, array('animation 1', 'animation 2', 'animation 3', 'animation 4'), isset($animation_number) ? $animation_number : 'animation 1');
?>
</span>
</span>
</p>
<!-- only visible when post_shape is Magazine -->
<p class="description AnnouncementCheckIcon" data-fd-rules='["post_shape:equal:magazine"]'>
<span class="leftHalf ">
<label for="<?php
echo esc_attr($this->get_field_id('check_element_color'));
?>
">
Do you want custom color for this block elements?
</label>
</span>
<span class="rightHalf">
<?php
echo circleflip_field_checkbox('check_element_color', $block_id, isset($check_element_color) ? $check_element_color : 0, array('data-fd-handle="check_element_color"'));
?>
</span>
</p>
<div class="description half last adminColorButton" data-fd-rules='["post_shape:equal:magazine", "check_element_color:equal:1"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('elements_color'));
?>
">
Main Color for this block elements
</label>
<span class="description_text">
</span>
</span>
<span class="rightHalf">
<?php
echo circleflip_field_color_picker('elements_color', $block_id, $elements_color);
?>
</span>
</div>
<p class="description circlePostsShow" data-fd-rules='["post_shape:equal:magazine"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('magazine_style'));
?>
">
<?php
_e('Magazine style', 'circleflip-builder');
?>
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
echo circleflip_field_select('magazine_style', $block_id, array('magazinestyle1' => 'Magazine Style 1', 'magazinestyle2' => 'Magazine Style 2', 'magazinestyle3' => 'Magazine Style 3', 'magazinestyle4' => 'Magazine Style 4'), isset($magazine_style) ? $magazine_style : 'magazinestyle1', array('data-fd-handle="magazine_style"'));
?>
</span>
</span>
</p>
<p class="description" data-fd-rules='["post_shape:equal:magazine", "magazine_style:equal:magazinestyle1"]'>
<img style="display: block;margin:0 auto; " src="<?php
echo get_template_directory_uri();
?>
/creiden-framework/content-builder/assets/images/mag_style1.png" alt=""/>
</p>
<p class="description" data-fd-rules='["post_shape:equal:magazine", "magazine_style:equal:magazinestyle2"]'>
<img style="display: block;margin:0 auto; " src="<?php
echo get_template_directory_uri();
?>
/creiden-framework/content-builder/assets/images/mag_style2.png" alt=""/>
</p>
<p class="description" data-fd-rules='["post_shape:equal:magazine", "magazine_style:equal:magazinestyle3"]'>
<img style="display: block;margin:0 auto; " src="<?php
echo get_template_directory_uri();
?>
/creiden-framework/content-builder/assets/images/mag_style3.png" alt=""/>
</p>
<p class="description" data-fd-rules='["post_shape:equal:magazine", "magazine_style:equal:magazinestyle4"]'>
<img style="display: block;margin:0 auto; " src="<?php
echo get_template_directory_uri();
?>
/creiden-framework/content-builder/assets/images/mag_style4.png" alt=""/>
</p>
<p class="description" data-fd-rules='["post_shape:regex:circle|square"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('type'));
?>
">
Layout Style
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
echo circleflip_field_select('type', $block_id, array('Thirds', 'Fourths'), isset($type) ? $type : 'Thirds');
?>
</span>
</span>
</p>
<p class="description" data-fd-rules='["post_shape:equal:magazine"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('type_mag'));
?>
">
Layout Style
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
echo circleflip_field_select('type_mag', $block_id, array('Thirds', 'Fourths', 'Half'), isset($type_mag) ? $type_mag : 'Half');
?>
</span>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_type'));
?>
">
<?php
_e('Which posts to show ?', 'circleflip-builder');
?>
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
echo circleflip_field_select('post_type', $block_id, array('latest' => 'Latest Posts', 'popular' => 'Popular Posts', 'selected' => 'Selected Posts'), isset($post_type) ? $post_type : 'Latest Posts', array('data-fd-handle="post_type"'));
?>
</span>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_cat_type'));
?>
">
Posts Category Type
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
$_post_cat_types = array('blog' => 'Blog');
if (post_type_exists('circleflip-portfolio')) {
$_post_cat_types['portfolio'] = 'Portfolio';
} else {
$_post_cat_type = 'blog';
}
echo circleflip_field_select('post_cat_type', $block_id, $_post_cat_types, isset($post_cat_type) ? $post_cat_type : '', array('data-fd-handle="post_cat_type"'));
?>
</span>
</span>
</p>
<div data-fd-rules='["post_cat_type:equal:blog"]'>
<p class="description" data-fd-rules='["post_type:regex:latest|popular"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_selected_cats_blog'));
?>
">
Selected Categories
</label>
</span>
<span class="rightHalf">
<?php
$options_categories = circleflip_get_categories();
echo circleflip_field_multiselect('post_selected_cats_blog', $block_id, $options_categories, isset($post_selected_cats) ? $post_selected_cats : '');
?>
</span>
</p>
<p class="description" data-fd-rules='["post_type:equal:selected"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_selected_posts_blog'));
?>
">
Selected Posts
</label>
</span>
<span class="rightHalf">
<?php
$postNames = circleflip_get_posts();
echo circleflip_field_multiselect('post_selected_posts_blog', $block_id, $postNames, isset($post_selected_posts_blog) ? $post_selected_posts_blog : '');
?>
</span>
</p>
</div>
<?php
if (post_type_exists('circleflip-portfolio')) {
?>
<div data-fd-rules='["post_cat_type:equal:portfolio"]'>
<p class="description" data-fd-rules='["post_type:regex:latest|popular"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_selected_cats_portfolio'));
?>
">
Selected Categories
</label>
</span>
<span class="rightHalf">
<?php
$options_categories = array();
$port_cats = circleflip_get_portfolio_categories();
if ($port_cats) {
foreach ($port_cats as $cat) {
$options_categories[$cat->term_id] = $cat->name;
}
}
echo circleflip_field_multiselect('post_selected_cats_portfolio', $block_id, $options_categories, isset($post_selected_cats_portfolio) ? $post_selected_cats_portfolio : '');
?>
</span>
</p>
<p class="description" data-fd-rules='["post_type:equal:selected"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_selected_posts_portfolio'));
?>
">
Selected Posts
</label>
</span>
<span class="rightHalf">
<?php
$postNames = array();
$port_items = circleflip_get_portfolio_items();
foreach ($port_items as $item) {
$postNames[$item->ID] = $item->post_title;
}
echo circleflip_field_multiselect('post_selected_posts_portfolio', $block_id, $postNames, isset($post_selected_posts_portfolio) ? $post_selected_posts_portfolio : '');
?>
</span>
</p>
</div>
<?php
}
?>
<p class="description" data-fd-rules='["post_type:regex:latest|popular"]'>
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('post_number'));
?>
">
<?php
_e('How many posts to show ?', 'circleflip-builder');
?>
</label>
<span sclass="description_text">-1 To Get All Posts</span>
</span>
<span class="rightHalf">
<?php
echo circleflip_field_input('post_number', $block_id, $post_number, $size = 'full');
?>
</span>
</p>
<p class="description">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('reload_section'));
?>
">
Reload Section
</label>
</span>
<span class="rightHalf">
<?php
echo circleflip_field_select('reload_section', $block_id, array('enable' => 'Enable', 'disable' => 'Disable'), isset($reload_section) ? $reload_section : '');
?>
</span>
</p>
<p class="description half">
<span class="leftHalf">
<label for="<?php
echo esc_attr($this->get_field_id('entrance_animation'));
?>
">
<?php
_e('Animation', 'circleflip-builder');
?>
</label>
</span>
<span class="rightHalf">
<span class="rightHalf select">
<?php
$animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
?>
</span>
<span class="entrance_animation_sim"></span>
</span>
</p>
</div>
<?php
}