Presets for widget column?

Asked on March 23, 2016 in Feature Requests.

Now, Layerswp provided preset for pages. But, We will create lot of combinations from existing widget.

E.g. From content widget we will be able to create lot of combinations of columns.

So, If the presets option is available for developers or end users then it will be the awesome feature of layerswp.

Im Surror Developer

I was working on this from last few weeks. Will share awesome stuff ASAP.

on March 23, 2016.
Reply
1 Answer(s)
Answered on March 26, 2016.

Hello,

From last 3/4 weeks, I was working on Presets (New feature) for LayersWP. Currently I was implement this for – Awesome Box widget. And I’ll create these for LayersWP default widgets.

The prototype is quite simple and ready to use for DEVELOPER’s. ( Not for End users ).

Developers will implement it for its won widgets. Now, Presets working only with repeaters fields. Hope, It will work with all Layers repeater widgets (Slider, Contents etc.)

# How to?

# STEP – 1 – Create your won preset array and stored in `option`.

– Below is the – Sample preset array:

array(
‘name’ => ‘Preset Name’,
‘image’ => plugins_url(‘../../assets/images/preset-1.png’, __FILE__ ),
‘options’ => array(
),
);

Where,
`name` – Preset name
`image` – Preset preview image
`options` – Preset column options

We used `options` to store the column values. So, You need to first design the options and get the options array. How to get options array? – https://youtu.be/8cY8WtL1N2E

Once you get the option array fill the details in – `Preset Array`. Presets has no limit. You will add lot of presets arrays.

Below, I was add 2 preset arrays and stored these in option `layers_surror_awesome_box_widget`. ( Use your own unique option name / use your widget ID ).

/**
* PRESET ARRAY
*/
$item_instance = array(
array(
‘name’ => ‘Preset – 1’,
‘image’ => plugins_url(‘../../assets/images/preset-1.png’, __FILE__ ),
‘options’ => array(
‘design’ => array(
‘background’ => array(
‘color’ => ‘rgba(255,205,3,0.7)’,
‘image’ => ”,
‘repeat’ => ‘no-repeat’,
‘position’ => ‘center’,
),
‘featuredimage’ => ”,
‘featuredvideo’ => ”,
‘imagealign’ => ‘image-top’,
‘fonts’ => array(
‘align’ => ‘text-center’,
‘size’ => ‘medium’,
‘color’ => ‘#ffffff’,
),
‘advanced’ => array(
‘customclass’ => ”,
),
‘animation’ => ‘fadeInLeftBig’,
‘animation_delay’ => ‘400’,
‘animation_duration’ => ‘2000’,
),
‘width’ => ‘4’,
‘title’ => ‘AWESOME WORK… :)’,
‘column-heading’ => array(
‘divider_type’ => ‘suv-divider-border’,
‘divider_border_color’ => ‘#ffffff’,
‘divider_border_width’ => ’70px’,
‘divider_border_height’ => ‘2’,
‘divider_icon’ => ‘fa fa-anchor’,
‘divider_icon_color’ => ‘#ffffff’,
‘divider_icon_size’ => ’10’,
‘divider_icon_shape’ => ‘suv-shape-circle’,
‘divider_icon_bg_color’ => ‘#eeee22’,
‘divider_icon_shadow’ => ‘on’,
‘divider_icon_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘divider_image’ => ‘119’,
‘divider_image_size’ => ’30’,
‘divider_image_shadow’ => ‘on’,
‘divider_image_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘divider_text’ => ‘AWESOME’,
‘divider_text_size’ => ’12’,
‘divider_text_color’ => ‘#ffffff’,
‘divider_text_rounded’ => ‘on’,
‘media_type’ => ‘suv-media-with-icon’,
‘media_direction’ => ‘suv-direction-right’,
‘icon’ => ‘fa fa-angellist’,
‘icon_color’ => ‘#ffffff’,
‘icon_size’ => ’14’,
‘icon_shape’ => ‘suv-shape-circle’,
‘icon_bg_color’ => ‘#ffcd03’,
‘icon_shadow’ => ‘on’,
‘icon_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘image’ => ”,
‘image_size’ => ‘0’,
‘image_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘layout’ => ‘layout-fullwidth’,
‘border_style’ => ‘none’,
‘border_color’ => ‘#4c4c4c’,
‘border’ => array(
‘top’ => ”,
‘right’ => ”,
‘bottom’ => ”,
‘left’ => ”,
),
‘padding’ => array(
‘top’ => ”,
‘right’ => ”,
‘bottom’ => ”,
‘left’ => ”,
),
‘margin’ => array(
‘top’ => ”,
‘right’ => ”,
‘bottom’ => ”,
‘left’ => ”,
)
),
‘excerpt’ => ‘Give us a brief description of the service that you are promoting. Try keep it short so that it is easy for people to scan your page.’,
‘link’ => ”,
‘link_text’ => ”,
‘column-button’ => array(
‘style’ => ‘suv-outline’,
‘bg_color’ => ‘rgba(68,68,68,0.5)’,
‘text_color’ => ”,
‘hover_bg_color’ => ‘rgba(68,68,68,0.5)’,
‘hover_text_color’ => ”,
‘media_type’ => ‘suv-media-with-image’,
‘media_direction’ => ‘suv-direction-left’,
‘icon’ => ‘fa fa-500px’,
‘icon_color’ => ‘#4c4c4c’,
‘icon_size’ => ‘0’,
‘icon_shape’ => ‘suv-shape-none’,
‘icon_bg_color’ => ”,
‘icon_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘image’ => ”,
‘image_size’ => ’60’,
‘image_shadow_color’ => ‘rgba(68,68,68,0.5)’,
)
),
),
array(
‘name’ => ‘Preset – 2’,
‘image’ => plugins_url(‘../../assets/images/preset-2.png’, __FILE__ ),
‘options’ => array(
‘design’ => array(
‘background’ => array(
‘color’ => ‘rgba(0,0,0,0.7)’,
‘image’ =>”,
‘repeat’ => ‘no-repeat’,
‘position’ => ‘center’,
),
‘featuredimage’ =>’ ‘,
‘featuredvideo’ =>’ ‘,
‘imagealign’ => ‘image-top’,
‘fonts’ => array(
‘align’ => ‘text-left’,
‘size’ => ‘medium’,
‘color’ => ‘#ffffff’,
),
‘advanced’ => array(
‘customclass’ => ”,
),
‘animation’ => ‘lightSpeedIn’,
‘animation_delay’ => ‘400’,
‘animation_duration’ => ‘ ‘,
),
‘width’ => ‘4’,
‘title’ => ‘YEP…! Its GREAT NEWS’,
‘column-heading’ => array(
‘divider_type’ => ‘suv-divider-border-icon’,
‘divider_border_color’ => ‘#ffffff’,
‘divider_border_width’ => ’70px’,
‘divider_border_height’ => ‘1’,
‘divider_icon’ => ‘fa fa-anchor’,
‘divider_icon_color’ => ‘#ffffff’,
‘divider_icon_size’ => ’10’,
‘divider_icon_shape’ => ‘suv-shape-circle’,
‘divider_icon_bg_color’ => ‘#eeee22’,
‘divider_icon_shadow’ => ‘on’,
‘divider_icon_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘divider_image’ => ‘119’,
‘divider_image_size’ => ’30’,
‘divider_image_shadow’ => ‘on’,
‘divider_image_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘divider_text’ => ‘DESIGNED BY’,
‘divider_text_size’ => ’12’,
‘divider_text_color’ => ‘#4c4c4c’,
‘media_type’ => ‘suv-none’,
‘media_direction’ => ‘suv-direction-left’,
‘icon’ => ‘fa fa-500px’,
‘icon_color’ => ‘#4c4c4c’,
‘icon_size’ => ‘0’,
‘icon_shape’ => ‘suv-shape-none’,
‘icon_bg_color’ => ”,
‘icon_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘image’ => ”,
‘image_size’ => ‘0’,
‘image_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘layout’ => ‘layout-fullwidth’,
‘border_style’ => ‘none’,
‘border_color’ => ‘#4c4c4c’,
‘border’ => array(
‘top’ => ”,
‘right’ => ”,
‘bottom’ => ”,
‘left’ => ”,
),
‘padding’ => array(
‘top’ => ”,
‘right’ => ”,
‘bottom’ => ”,
‘left’ => ”,
),
‘margin’ => array(
‘top’ => ”,
‘right’ => ”,
‘bottom’ => ”,
‘left’ => ”,
)
),
‘excerpt’ => ‘Give us a brief description of the service that you are promoting. Try keep it short so that it is easy for people to scan your page.’,
‘link’ => ”,
‘link_text’ => ”,
‘column-button’ => array(
‘style’ => ‘suv-outline’,
‘bg_color’ => ‘rgba(68,68,68,0.5)’,
‘text_color’ => ”,
‘hover_bg_color’ => ‘rgba(68,68,68,0.5)’,
‘hover_text_color’ => ”,
‘media_type’ => ‘suv-media-with-image’,
‘media_direction’ => ‘suv-direction-left’,
‘icon’ => ‘fa fa-500px’,
‘icon_color’ => ‘#4c4c4c’,
‘icon_size’ => ‘0’,
‘icon_shape’ => ‘suv-shape-none’,
‘icon_bg_color’ => ”,
‘icon_shadow_color’ => ‘rgba(68,68,68,0.5)’,
‘image’ => ”,
‘image_size’ => ’60’,
‘image_shadow_color’ => ‘rgba(68,68,68,0.5)’,
)
),
),
);
$presets = get_option(‘layers_surror_awesome_box_widget’);
if( !$presets ) {
add_option(‘layers_surror_awesome_box_widget’, $item_instance );
}

—————

# STEP – 2 – SHOWING PRESET LIST & ADD PRESET BUTTON

<div class=”presets”>
<div class=”presets-add”>
<?php
$presets = get_option(‘layers_surror_awesome_box_widget’);
$index = 0;
if( $presets ) {
echo ‘<ul class=”preset-list”>’;
foreach ($presets as $key => $value) {
$data = ‘<li data-preset-index=”‘.$index.'”>’;
$data .= $value[‘name’] . ‘<br/>’;
if( isset($value[‘image’]) && $value[‘image’] != ” ) {
$data .= ‘<img src=”‘. $value[‘image’] . ‘” />’;
}
$data .= ‘</li>’;
echo $data;
$index = $index + 1;
}
echo ‘</ul>’;
} ?>
<button class=”layers-button btn-full layers-widget-repeater-add-item-preset”>
Add Preset
</button>
</div><!– .presets-add –>
<button class=”layers-button btn-full layers-widget-repeater-add-item-open”>
Add New Column +
</button>
</div><!– .presets –>

—————

# STEP – 3 – CALLED PRESET THOUGH AJAX CALL WITH ACTION – ‘layers_widget_new_repeater_item_preset’

#### JS CODE

/**
* Open Preset
*/
$(document).on( ‘click’ , ‘.presets-add’ , function(e){
$(‘.preset-list li’).each(function(index, el) {
$(el).click(function(event) {
$(el).siblings().removeClass(‘selected’);
$(el).addClass(‘selected’);
var data_index = $(el).attr(‘data-preset-index’);
$(‘.layers-widget-repeater-add-item-preset’).attr(‘data-preset-index’, data_index);
});
});
});
$(document).on( ‘click’ , ‘.layers-widget-repeater-add-item-preset’ , function(e){
// Get preset index
var selected_preset_index = $(this).attr(‘data-preset-index’) || ”;
e.preventDefault();
// “Hi Mom”
var $that = $(this);
// Get elements
$repeater_add_button = $(this);
$repeater_group = $repeater_add_button.closest(‘.layers-form-item’).find(‘.layers-widget-repeater’); // $repeater_add_button.parents(‘.layers-widget-repeater’);
$repeater_list = $repeater_group.find(‘.layers-accordions’);
$repeater_input = $repeater_group.find(‘.layers-repeater-input’);
$widget_form = $repeater_add_button.parents(‘.widget-content’);
// Get data
var data_repeater_type = $repeater_group.attr( ‘data-repeater-type’ );
console.log(‘data_repeater_type: ‘ + data_repeater_type );
var data_repeater_number = $repeater_group.attr( ‘data-repeater-number’ );
console.log(‘data_repeater_number: ‘ + data_repeater_number );
var data_repeater_class = $repeater_group.attr( ‘data-repeater-class’ );
console.log(‘data_repeater_class: ‘ + data_repeater_class );
var data_repeater_id_base = $repeater_group.attr( ‘data-repeater-id-base’ );
console.log(‘data_repeater_id_base: ‘ + data_repeater_id_base );
// Add loading class
$repeater_add_button.addClass(‘layers-loading-button’);
// Serialize input data
$serialized_inputs = [];
$.each(
$repeater_list.find( ‘li.layers-accordion-item’ ).last().find( ‘textarea, input, select’ ),
function( i, input ){
$serialized_inputs.push( $(input).serialize() );
}
);
// Serialize input data
$serialized_instance_inputs = $widget_form.find( ‘textarea, input, select, checkbox’ ).serialize();
// console.log( JSON.stringify($serialized_instance_inputs) );
$post_data = {
action : ‘layers_widget_new_repeater_item_preset’,
preset_index : selected_preset_index,
widget_action : ‘add-item’,
item_type : data_repeater_type,
item_class : data_repeater_class,
instance : $serialized_instance_inputs,
id_base : data_repeater_id_base,
number : data_repeater_number,
nonce : layers_widget_params.nonce,
};
$.post(
ajaxurl,
$post_data,
function(data){
console.log(‘ERROR: ‘ + data);
// Set item
$item = $(data);
$item.find(‘.layers-accordion-section’).hide();
// Append item HTML
$repeater_list.append($item);
// Append item IDs to the items input
$item_guids = [];
$repeater_list.find( ‘li.layers-accordion-item’ ).each(function(){
$item_guids.push( $(this).data( ‘guid’ ) );
});
// Trigger change for ajax save
$repeater_input.val( $item_guids.join() ).layers_trigger_change();
// Trigger interface init. will trigger init of elemnts eg colorpickers etc
$item.trigger(‘layers-interface-init’);
// Remove loading class
$repeater_add_button.removeClass(‘layers-loading-button’);
// Add Open Class to item
setTimeout( function(){
$item.find(‘.layers-accordion-title’).trigger(‘click’);
}, 300 );
}
) // $.post
});

#### PHP CODE

add_action( ‘wp_ajax_layers_widget_new_repeater_item_preset’, ‘layers_widget_new_repeater_item_preset’ );
add_action( ‘wp_ajax_noprev_layers_widget_new_repeater_item_preset’, ‘layers_widget_new_repeater_item_preset’ );
function layers_widget_new_repeater_item_preset() {
if( !check_ajax_referer( ‘layers-widget-actions’, ‘nonce’, false ) ) die( ‘You threw a Nonce exception’ ); // Nonce
// We defintiely need these to be able to repeat.
if ( !isset( $_POST[‘number’] ) || !isset( $_POST[‘item_type’] ) || !isset( $_POST[‘item_class’] ) ) die();
$item_number = $_POST[‘number’]; // e.g. 286
$item_type = $_POST[‘item_type’]; // e.g. button
$item_class = $_POST[‘item_class’]; // e.g. Layers_Call_To_Action_Widget
$item_function = “{$item_type}_item”;
$instance = $_POST[‘instance’];
// Init the related widgets class – so we can get to the new_item() function.
$widget = new $item_class();
// Comment…
$widget->number = $item_number;
if( ‘add-item’ == $_POST[‘widget_action’] ) {
/**
* PRESET FUNCTIONALITY
*
*/
$preset_index = ( isset( $_POST[‘preset_index’] ) ) ? $_POST[‘preset_index’] : null;
$presets = ”;
if( $preset_index != null ) {
$presets = get_option(‘layers_surror_awesome_box_widget’);
// $presets = json_decode( $presets );
$item_instance = $presets[$preset_index][‘options’];
} else {
// Parse the posted instance so it gets converted to the normal WP layout.
$instance = current( current( $data ) );
if ( isset( $instance[“{$item_type}s”] ) && ! empty( $instance[“{$item_type}s”] ) ) {
$item_instance = end( $instance[“{$item_type}s”] );
//$last_guid = key( $instance[“{$item_type}s”] );
}
else {
// Required – $instance Defaults
$item_instance = $widget->get_repeater_defaults( $item_type, NULL );
}
}
// Generate a new GUID.
$item_guid = rand( 1 , 1000 );
// Settings this will add these prefixes to both the get_layers_field_id(),
// and get_layers_field_name() string construction.
$widget->field_attribute_prefixes = array( “{$item_type}s”, $item_guid );
// Generate a new item. By passing the GUID as NULL it will duplicate the latest one if it exists, or create a new default based uniqie one.
$widget->$item_function( $item_guid, $item_instance );
// Remove the extra attributes.
unset( $widget->field_attribute_prefixes );
}
die();
}

———

UPDATED: 

Above is static way. I’m working on dynamic presets. Where END USERs will create / update / remove its won presets.

PREVIEW: https://www.youtube.com/watch?v=0onKf01FAkU

The only limitation is, End user need to use preset without preset preview or create preview image by itself.

Hope its useful.

Reply