hovercss-1.0.3/hovercss.module
hovercss.module
<?php
/**
* @file
* Drupal`s integration with Hover.css library.
*
* Hover.css is a collection of CSS3 powered hover effects to be applied to
* links, buttons, logos, SVG, featured images and so on.
*
* Easily apply to your own elements, modify or just use for inspiration.
*
* Available in CSS, Sass, and LESS.
*
* Github: https://github.com/IanLunn/Hover
* Website: https://ianlunn.github.io/Hover/
* license: MIT licensed
*
* Copyright (C) 2013-2023 Ian Lunn
*/
use Drupal\Core\Installer\InstallerKernel;
use Drupal\Core\Routing\RouteMatchInterface;
/**
* Implements hook_help().
*/
function hovercss_help($route_name, RouteMatchInterface $route_match) {
switch ($route_name) {
case 'help.page.hovercss':
$output = '<h3 class="animate__animated animate__bounce">' . t('About') . '</h3>';
$output .= '<p class="animate__animated animate__fadeInUp animate__delay-1s">' . t('The HoverCSS is a module that aims to integrate <a href=":hover_library">Hover.css</a> library with Drupal. Hover.css is a collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.', [':hover_library' => 'https://ianlunn.github.io/Hover/']) . '</p>';
$output .= '<h3 class="animate__animated animate__zoomIn animate__delay-2s">' . t('Uses') . '</h3>';
$output .= '<dl>';
$output .= '<dt class="animate__animated animate__flipInX animate__delay-3s">' . t('Basic usage') . '</dt>';
$output .= '<dd class="animate__animated animate__slideInLeft animate__delay-4s"><p>' . t('Add the hover effect class to an element, along with any of the effects names (do not forget the hvr- prefix!)') . '</p>';
$output .= '<pre><code>';
$output .= '<a class="button hvr-grow">Add to Basket</a>' . "\n";
$output .= '</code></pre></dd>';
$output .= '<dt class="animate__animated animate__flipInX animate__delay-3s">' . t('Usage with Javascript') . '</dt>';
$output .= '<dd class="animate__animated animate__slideInRight animate__delay-4s"><p>' . t('You can do a whole bunch of other stuff with hover.css when you combine it with Javascript.') . '</p>';
$output .= '<pre>';
$output .= "const element = document.querySelector('.my-element');" . "\n";
$output .= "element.classList.add('hvr-grow');";
$output .= '</pre></dd>';
$output .= '</dl>';
return $output;
}
}
/**
* Check to make sure that Hover.css library is installed.
*
* @return bool
* Flag indicating if the library is properly installed.
*/
function hovercss_check_installed() {
// Throw error if hovercss.css library file not found.
/** @var Drupal\Core\Asset\LibraryDiscovery $library_discovery */
$library_discovery = \Drupal::service('library.discovery');
$library_exists = FALSE;
$definition = $library_discovery->getLibraryByName('hovercss', 'hover.css');
// Check if $definition is an array before accessing its elements.
if (is_array($definition) && isset($definition['css'][0]['data'])) {
$library_exists = file_exists(DRUPAL_ROOT . '/' . $definition['css'][0]['data']);
}
return $library_exists;
}
/**
* Implements hook_page_attachments().
*/
function hovercss_page_attachments(array &$attachments) {
// Don't add the Library during installation.
if (InstallerKernel::installationAttempted()) {
return;
}
// Check first HoverCSS UI module in not installed and library not exists.
$moduleHandler = \Drupal::service('module_handler');
if (!$moduleHandler->moduleExists('hovercss_ui')) {
if (hovercss_check_installed()) {
$attachments['#attached']['library'][] = 'hovercss/hover.css';
}
else {
$attachments['#attached']['library'][] = 'hovercss/hover.cdn';
}
}
}
/**
* Hover.css Animation options.
*/
function hovercss_effect_options($mode = 'both', $grouping = TRUE, $names = []) {
$modes = ['entrances', 'exits'];
$animations = [];
$effect_names = hovercss_effect_names();
foreach ($effect_names as $name => $effect_name) {
if (count($names) && !in_array($name, $names)) {
continue;
}
foreach ($effect_name as $key => $animation) {
if (in_array($mode, $modes) && $key != 'both' && $mode != $key) {
continue;
}
if ($grouping) {
$animations = array_merge($animations, $animation);
}
else {
foreach ($animation as $effect) {
$animations = array_merge($animations, $effect);
}
}
}
}
return $animations;
}
/**
* Hover.css effect names.
*/
function hovercss_effect_names($effect_name = '') {
$effect_name = array_reverse(\Drupal::moduleHandler()->invokeAll('hovercss_effect_names', [$effect_name]));
// 2D Transitions.
$effect_name['attention'] = [
'both' => [
'2D Transitions' => [
'grow' => t('Grow'),
'shrink' => t('Shrink'),
'pulse' => t('Pulse'),
'pulse-grow' => t('Pulse Grow'),
'pulse-shrink' => t('Pulse Shrink'),
'push' => t('Push'),
'pop' => t('Pop'),
'bounce-in' => t('Bounce In'),
'bounce-out' => t('Bounce Out'),
'rotate' => t('Rotate'),
'grow-rotate' => t('Grow Rotate'),
'float' => t('Float'),
'sink' => t('Sink'),
'bob' => t('Bob'),
'hang' => t('Hang'),
'skew' => t('Skew'),
'skew-forward' => t('Skew Forward'),
'skew-backward' => t('Skew Backward'),
'wobble-horizontal' => t('Wobble Horizontal'),
'wobble-vertical' => t('Wobble Vertical'),
'wobble-to-bottom-right' => t('Wobble To Bottom Right'),
'wobble-to-top-right' => t('Wobble To Top Right'),
'wobble-top' => t('Wobble Top'),
'wobble-bottom' => t('Wobble Bottom'),
'wobble-skew' => t('Wobble Skew'),
'buzz' => t('Buzz'),
'buzz-out' => t('Buzz Out'),
'forward' => t('Forward'),
'backward' => t('Backward'),
],
],
];
// Background Transitions.
$effect_name['background_transitions'] = [
'both' => [
'Background Transitions' => [
'fade' => t('Fade'),
'back-pulse' => t('Back Pulse'),
'sweep-to-right' => t('Sweep To Right'),
'sweep-to-left' => t('Sweep To Left'),
'sweep-to-bottom' => t('Sweep To Bottom'),
'sweep-to-top' => t('Sweep To Top'),
'bounce-to-right' => t('Bounce To Right'),
'bounce-to-left' => t('Bounce To Left'),
'bounce-to-bottom' => t('Bounce To Bottom'),
'bounce-to-top' => t('Bounce To Top'),
'radial-out' => t('Radial Out'),
'radial-in' => t('Radial In'),
'rectangle-in' => t('Rectangle In'),
'rectangle-out' => t('Rectangle Out'),
'shutter-in-horizontal' => t('Shutter In Horizontal'),
'shutter-out-horizontal' => t('Shutter Out Horizontal'),
'shutter-in-vertical' => t('Shutter In Vertical'),
'shutter-out-vertical' => t('Shutter Out Vertical'),
],
],
];
// Border Transitions.
$effect_name['border_transitions'] = [
'both' => [
'Border Transitions' => [
'border-fade' => t('Border Fade'),
'hollow' => t('Hollow'),
'trim' => t('Trim'),
'ripple-out' => t('Ripple Out'),
'ripple-in' => t('Ripple In'),
'outline-out' => t('Outline Out'),
'outline-in' => t('Outline In'),
'round-corners' => t('Round Corners'),
'underline-from-left' => t('Underline From Left'),
'underline-from-center' => t('Underline From Center'),
'underline-from-right' => t('Underline From Right'),
'reveal' => t('Reveal'),
'underline-reveal' => t('Underline Reveal'),
'overline-reveal' => t('Overline Reveal'),
'overline-from-left' => t('Overline From Left'),
'overline-from-center' => t('Overline From Center'),
'overline-from-right' => t('Overline From Right'),
],
],
];
// Shadow and Glow Transitions.
$effect_name['shadow_glow_transitions'] = [
'both' => [
'Shadow & Glow Transitions' => [
'shadow' => t('Shadow'),
'grow-shadow' => t('Grow Shadow'),
'float-shadow' => t('Float Shadow'),
'glow' => t('Glow'),
'shadow-radial' => t('Shadow Radial'),
'box-shadow-outset' => t('Box Shadow Outset'),
'box-shadow-inset' => t('Box Shadow Inset'),
],
],
];
// Icons.
$effect_name['icons'] = [
'both' => [
'Icons' => [
'icon-back' => t('Icon Back'),
'icon-forward' => t('Icon Forward'),
'icon-down' => t('Icon Down'),
'icon-up' => t('Icon Up'),
'icon-spin' => t('Icon Spin'),
'icon-drop' => t('Icon Drop'),
'icon-fade' => t('Icon Fade'),
'icon-float-away' => t('Icon Float Away'),
'icon-sink-away' => t('Icon Sink Away'),
'icon-grow' => t('Icon Grow'),
'icon-shrink' => t('Icon Shrink'),
'icon-pulse' => t('Icon Pulse'),
'icon-pulse-grow' => t('Icon Pulse Grow'),
'icon-pulse-shrink' => t('Icon Pulse Shrink'),
'icon-push' => t('Icon Push'),
'icon-pop' => t('Icon Pop'),
'icon-bounce' => t('Icon Bounce'),
'icon-rotate' => t('Icon Rotate'),
'icon-grow-rotate' => t('Icon Grow Rotate'),
'icon-float' => t('Icon Float'),
'icon-sink' => t('Icon Sink'),
'icon-bob' => t('Icon Bob'),
'icon-hang' => t('Icon Hang'),
'icon-wobble-horizontal' => t('Icon Wobble Horizontal'),
'icon-wobble-vertical' => t('Icon Wobble Vertical'),
'icon-buzz' => t('Icon Buzz'),
'icon-buzz-out' => t('Icon Buzz Out'),
],
],
];
// Speech Bubbles.
$effect_name['speech_bubbles'] = [
'both' => [
'Speech Bubbles' => [
'bubble-top' => t('Bubble Top'),
'bubble-right' => t('Bubble Right'),
'bubble-bottom' => t('Bubble Bottom'),
'bubble-left' => t('Bubble Left'),
'bubble-float-top' => t('Bubble Float Top'),
'bubble-float-right' => t('Bubble Float Right'),
'bubble-float-bottom' => t('Bubble Float Bottom'),
'bubble-float-left' => t('Bubble Float Left'),
],
],
];
// Curls.
$effect_name['curls'] = [
'both' => [
'Curls' => [
'curl-top-left' => t('Curl Top Left'),
'curl-top-right' => t('Curl Top Right'),
'curl-bottom-right' => t('Curl Bottom Right'),
'curl-bottom-left' => t('Curl Bottom Left'),
],
],
];
return $effect_name;
}
