/**
* Return the javascript needed to animate an element including the mouseover event
*
* @access public
* @since 1.0.0
* @param $mouse_over_string String The name of the class whose element we will animate
* @param $animation_repeater Array The array, saved using mp_core_metabox class, retrieved using get_post_meta
* @param $bring_to_forefront Bool If true, this item's z-index will bump super high upon mouse over and back to nothing on mouse out
* @return $js_output String The javascript code which, when run, would cause the element to be animated
*/
function mp_core_js_mouse_over_animate($mouse_over_string, $animation_repeater, $bring_to_forefront = true)
{
if (empty($animation_repeater)) {
return;
}
//Set the first frame CSS (we wrap this in a script tag so that if the user has no javascript, it doesn't auto hide animated objects);
$js_output = '<style scoped type="text/css" id="mp-core-temp-css-' . sanitize_title($mouse_over_string) . '">';
$js_output .= $mouse_over_string . '{';
//Temporarily set it to be non-visible
$js_output .= 'visibility: hidden;';
$js_output .= '}
</style>';
//If there is no javascript enabled in this user's browser, make the item visible again
$js_output .= '
<noscript>
<style scoped type="text/css">
' . $mouse_over_string . ' ' . '{visibility:visible;}
</style>
</noscript>';
$js_output .= '<script type="text/javascript">
jQuery(document).ready(function($){
$( document ).on( \'mp_core_animation_set_first_keyframe_trigger\', function(event){
' . mp_core_js_animate_set_first_keyframe("\$(this).find('" . $mouse_over_string . "')", $animation_repeater) . '
});
$( document ).trigger(\'mp_core_animation_set_first_keyframe_trigger\');';
//If we are on an iphone, ipad, android, or other touch enabled screens, run the animations on the first touch, then go to the link on the second
if (mp_core_is_iphone() || mp_core_is_ipad() || mp_core_is_android()) {
$js_output .= '
//On mobile, the first click runs the animation and the second goes to the link.
$( document ).on( \'touchend\', \'' . $mouse_over_string . '\', function(event){
if ( typeof $(this).attr(\'mp_core_animation_run\') == \'undefined\' ){
var this_element = $(this);
event.preventDefault();
' . mp_core_js_animate_element("this_element", $animation_repeater) . '
setInterval(function(){
this_element.attr(\'mp_core_animation_run\', \'true\');
}, 30);
}
});';
} else {
$js_output .= '
$( document ).on( \'mouseenter\', \'' . $mouse_over_string . '\', function(event){
' . ($bring_to_forefront ? '$(this).css("z-index", "9999999999");' : NULL) . '
' . mp_core_js_animate_element("\$(this)", $animation_repeater) . '});
$( document ).on( \'mouseleave\', \'' . $mouse_over_string . '\', function(event){
' . ($bring_to_forefront ? '$(this).css("z-index", "");' : NULL) . '
' . mp_core_js_reverse_animate_element("\$(this)", $animation_repeater) . '});';
}
$js_output .= '
//Remove the visibility:hidden for this element once the javascript has loaded the first keyframe
$(document).find("#mp-core-temp-css-' . sanitize_title($mouse_over_string) . '").remove();
});
</script>';
return $js_output;
}
/**
* Set the CSS for the image overlay to be the last animation frame if on mobile
*
* @access public
* @since 1.0.0
* @param $post_id String - The id of the brick where the meta is saved
* @param $repeater_name String - The name of the repeater holding the meta data for the overlay
* @return $css_output String - A string containing the CSS for the overlay on mobile
*/
function mp_stacks_grid_overlay_mobile_css($post_id, $repeater_name)
{
//If we are on an iphone, ipad, android, or other touch enabled screens, don't do this because mouse over's aren't available
if (mp_core_is_iphone() || mp_core_is_ipad() || mp_core_is_android()) {
//Get the repeater holding these values
$animation_repeater = mp_core_get_post_meta($post_id, $repeater_name);
$animation_repeater = array_reverse($animation_repeater);
$css_output = '#mp-brick-' . $post_id . ' .mp-stacks-grid-item-image-overlay{';
//Loop through each value in this keyframe
foreach ($animation_repeater[0] as $id => $value) {
//If this is the background color
if ($id == 'backgroundColor') {
$css_output .= 'background-color: ' . $value . ';';
} else {
if ($id == 'opacity') {
$css_output .= 'opacity: ' . $value / 100 . ';';
} else {
$css_output .= $id . ': ' . $value . ';';
}
}
}
$css_output .= '}';
return $css_output;
} else {
return NULL;
}
}
