/** * 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; } }