iGrowl

This module makes the iGrowl library available for use from within Drupal, enabling you to create iGrowl alerts from either your own custom javascript code or by using an included AJAX command function to spawn an alert.

See a demo here!

Dependencies

• Libraries
• Animate.css

Drupal 7

Installation

• Download the animate.css zip file and unzip to (path to libraries folder)/animate
• Download the iGrowl zip file and unzip to (path to libraries folder)/igrowl
• Enable the animate_css module
• Enable the igrowl module
• Clear all cache, the status report page should indicate both libraries are included successfully

Usage

In a custom theme or module, you can spawn an iGrowl alert within your javascript by invoking it directly and providing it whatever options you want to use:

$.iGrowl({
 message: "Your message here",
})

This module also defines a custom AJAX command, so you can leverage iGrowl from an AJAX response like so:

  $igrowl = igrowl_default_options();
  $igrowl['title'] = 'Excellent!';
  $igrowl['message'] = 'We have added ' . $foo . ' ' . $bar .' to your order!';
  $igrowl['type'] = 'success';
  $igrowl['icon'] = 'feather-circle-check';


  $commands = array();
  $commands[] = igrowl_ajax_command_growl($igrowl);
  return array('#type' => 'ajax', '#commands' => $commands);

igrowl_default_options() returns an array of overrideable iGrowl options, like type, icon, message, title and more. igrowl_ajax_command_growl() takes this array and invokes iGrowl against it, giving you flexibility to spawn and create dozens of iGrowls to your liking.

Drupal 8

Installation

- Download the animate.css zip file and unzip to /libraries/animate
- Download the iGrowl zip file and unzip to /libraries/igrowl
- Enable the iGrowl module
- Clear all cache, the status report page should indicate both libraries are included successfully

The libraries path is in your Drupal root, outside of /core. Do not place it in /core.

Usage

In a custom theme or module, you can spawn an iGrowl alert within your javascript by invoking it directly and providing it whatever options you want to use:

$.iGrowl({
 message: "Your message here",
})

This module also defines a custom AJAX command, so you can leverage iGrowl from an AJAX response like so:

use DrupaligrowlAjaxGrowlCommand;

// controller or form code here...

$options = GrowlCommand::defaultOptions();
$options['title'] = 'Excellent!';
$options['message'] = 'We have added ' . $foo . ' ' . $bar .' to your order!';
$options['type'] = 'success';
$options['icon'] = 'feather-circle-check';

$response = new AjaxResponse();
$response->addCommand(new GrowlCommand($options));
return $response;

GrowlCommand::defaultOptions() returns an array of overrideable iGrowl options, like type, icon, message, title and more.

You can do this from either the #ajax property of a form item (the callback can return an AjaxResponse), or you can create routes in your module. The router.yml may look like this as a basic example:

mymodule.growl:
  path: '/mymodule/growl'
  defaults:
    _controller: 'DrupalmymoduleControllerMyModuleController::growl'
  requirements:
    _permission: 'access content'

And the corresponding controller:

namespace DrupalmymoduleController;

use DrupalCoreAjaxAjaxResponse;
use DrupalCoreControllerControllerBase;
use DrupaligrowlAjaxGrowlCommand;

class MyModuleController extends ControllerBase {
  public function growl() {
    $options = GrowlCommand::defaultOptions();
    $options['message'] = 'This is a message.';
    $options['title'] = 'Hello';
    $options['icon'] = 'feather-check';
    $options['type'] = 'success';

    $response = new AjaxResponse();
    $response->addCommand(new GrowlCommand($options));
    return $response;
  }
}

Depending on your use case, you may have specific growls, or you may make a flexible generic one. It's up to you.

You will also need to attach the libraries to your theme or module. You will likely want it attached in hook_preprocess_page:

$variables['#attached']['library'][] = 'igrowl/command';
$variables['#attached']['library'][] = 'igrowl/icons.feather';

The second library is the icon set. You have 4 options to pick from:

• icons.feather
• icons.lineicons
• icons.steadysets
• icons.vicons

You can preview all option and icon types on the iGrowl demo page at http://catc.github.io/iGrowl.

Where would I use this?

If you're looking to implement AJAX in your site, for example, a Drupal Commerce site - you can leverage iGrowl to report back action status after submitting forms or clicking buttons (i.e. add to cart, remove from cart, update billing info, etc).