Coding Custom Cornerstone Element - how to apply animation?

Support
#1

Im following your guide and downloaded the Sample Extension which I’m playing around currently (after resolving the in build error - you guys should take a look to deliver an error free example).

I want to find out how to implement the animation to my own element. “my-second-element” contains already the controls.php named ‘image_animation’ which also shows up in the fronted. So far so good. But this isn’t used in the shortcode.php code (as well as the date picker). So how to use it to animate my element? Just echo the var ‘$image_animation’ doesn’t do the trick ;( Obviously it’s not that simple. So I peeked into the feature box shortcode and tried the following:

<?php
 // shortcode.php

	$classes = array( 'my-second-element' );
	$classes[] = $features;

	$js_params = array(
		'child'            => 'false',
		'graphicAnimation' => $image_animation
	  );

    $anim_data = cs_generate_data_attributes( 'my-second-element', $js_params );
    $elem_atts = cs_atts( array( 'id' => $id, 'class' => implode( ' ', $classes ), 'style' => $style ), false );
    echo "
        <div {$anim_data} {$elem_atts}>
            <img  src='{$image}' style='padding: {$image_padding}'>
            <p>{$content}</p>
        </div>
    ";
?>

Ok, I changed the output to be more readable but this should do. But the animation par doesn’t work. So I tried var_dump($image_animation) just to see what’s inside - but it ouputs just NULL! Well, is this part of the API working at all?

Ok, my second try with manual params:

<?php
 // shortcode.php

	$classes = array( 'my-second-element' );
	$classes[] = $features;

	$js_params = array(
		'child'            			=> 'false',
		'graphicAnimation' 			=> 'flipInX',
		'graphicAnimationOffset' 	=> '65',
		'graphicAnimationDelay' 	=> '1500',
	  );

    $anim_data = cs_generate_data_attributes( 'my-second-element', $js_params );
    $elem_atts = cs_atts( array( 'id' => $id, 'class' => implode( ' ', $classes ), 'style' => $style ), false );
    echo "
        <div {$anim_data} {$elem_atts}>
            <img  src='{$image}' style='padding: {$image_padding}'>
            <p>{$content}</p>
        </div>
    ";
?>

But it doesn’t work as well. I guess it should be possible somehow. Please tell me how to do it correctly.

More info about element's API
#2

Hello There,

Thank you for the very detailed post. Before you can use a variable in the shortcodes.php, you must assign a default value for that variable in the defaults.php file. This is the reason why you are getting a null output because your variable does not have any value or default value.

Hope this helps. Kindly let us know.

#3

Thanks for pointing me to the defaults.php - this at least allowed me to get the anim params correctly. But applying animations is a different matter. Finally I figured out how to animate my element but what I found out ist unexpected.

Here, the working code:

<?php

/**
 * Shortcode handler
 */

	$classes = array( 'my-second-element' );
	$classes[] = $features;
	$classes[] = 'arrow_box';
	$division_class = 'augen_division';

	$js_params = array(
		'child'            			=> 'false',
		'graphicAnimation' 			=> $image_animation_flavor,
		'graphicAnimationOffset' 	=> $image_animation_offset,
		'graphicAnimationDelay' 	=> $image_animation_delay
	  );
	  
	$anim_data = cs_generate_data_attributes( 'feature_box', $js_params );
	$elem_atts = cs_atts( array( 'id' => $id, 'class' => implode( ' ', $classes ), 'style' => $style ), false );

	echo "
	<div {$elem_atts}>
		<div {$anim_data} class='{$division_class}' style='padding: {$image_padding}'>
			<img  class='x-feature-box-graphic-outer' src='{$image}'>
			<img  src='{$image_logo}'>
		</div>
		<p>{$content}</p>
	</div>
";
?>

Animation are handled in cs-body.js where they are hard coded - there are only two animation names that are defined i.e. “feature_box” method where it searches for the class “x-feature-box-graphic-outer”.

Custom names and css-class-names for the element to animate aren’t possible. Well, I expected them to be customizable and find a general purpose code. Can it be that this part of cornerstone isn’t ready for public use?

#4

Hi there,

The built-in animations aren’t meant for use in custom or 3rd party elements. They are only applicable for Cornerstone’s native elements.

You should include your own animation in your custom elements, like using the Wordpress default’s enqueue to include your javascript that has the animation library. This is a sample

/*
Plugin Name: My Extension
Plugin URI:
Description: {{Your name}}
Author:
Author URI:
Version: 0.1.0
*/

define( 'MY_EXTENSION_PATH', plugin_dir_path( __FILE__ ) );
define( 'MY_EXTENSION_URL', plugin_dir_url( __FILE__ ) );

add_action( 'wp_enqueue_scripts', 'my_extension_enqueue' );
add_action( 'cornerstone_register_elements', 'my_extension_register_elements' );
add_filter( 'cornerstone_icon_map', 'my_extension_icon_map' );

function my_extension_register_elements() {

	cornerstone_register_element( 'My_First_Element', 'my-first-element', MY_EXTENSION_PATH . 'includes/my-first-element' );
	cornerstone_register_element( 'My_Second_Element', 'my-second-element', MY_EXTENSION_PATH . 'includes/my-second-element' );

	cornerstone_register_element( 'My_Sortable_Element', 'my-sortable-element', MY_EXTENSION_PATH . 'includes/my-sortable-element' );
	cornerstone_register_element( 'My_Sortable_Element_Item', 'my-sortable-element-item', MY_EXTENSION_PATH . 'includes/my-sortable-element-item' );

}

function my_extension_enqueue() {
        wp_enqueue_style( 'my_extension-styles', MY_EXTENSION_URL . '/assets/styles/my-extension.css', array(), '0.1.0' );
	wp_enqueue_script( 'my_extension-js', MY_EXTENSION_URL . '/assets/js/my-extension.js', array(), '0.1.0', true );
}

function my_extension_icon_map( $icon_map ) {
	$icon_map['my-extension'] = MY_EXTENSION_URL . '/assets/svg/icons.svg';
	return $icon_map;
}

Thanks!

#5

Thanks for clarifying the topic. I wonder what’s the point to invent the wheel the second time while there are animation I could use. What I would come up with would be very similar to what you already have. Would be great if you guys could think about it making this animations usable for 3rd party too (feature request)

#6

Hi,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!