Added support of classes on shortcode numbers #19

CHANGELOG.md

@@ -1,3 +1,9 @@
+# v2.2.4
+## 04/xx/2017
+
+1. [](#improved)
+    * Added the ability to set `class=""` on the `ui-callout` shortcode [#19](https://github.com/getgrav/grav-plugin-shortcode-ui/pull/19)
+
 # v2.2.3
 ## 03/04/2017
 

README.md

@@ -172,6 +172,14 @@ The `[ui-callout-item]` shortcode that defines each item has the following param
 
 You can use whatever markdown you wish in the item itself.  These will be represented as tooltips on hover.
 
+You can also combine this shortcode with [Animate.css](https://daneden.github.io/animate.css/) by including the CSS class in your theme or page, and then adding top-level class entries:
+
+```
+[ui-callout class="pulse infinite animated"] 
+...
+[/ui-callout]
+```
+
 #### Image Compare
 
 This shortcode takes two images and provides a simple way to compare them via a draggable handle that lets you slide one image over the other.

shortcodes/CalloutShortcode.php

@@ -22,6 +22,7 @@ public function init()
             $output = $this->twig->processTemplate('partials/ui-callouts.html.twig', [
                 'hash' => $hash,
                 'shortcode' => $sc,
+                'classes' => $sc->getParameter('class'),
                 'callouts' => $this->shortcode->getStates($hash),
             ]);
 

templates/partials/ui-callouts.html.twig

@@ -6,7 +6,7 @@
             {% set position = shortcodeui_parsePosition(callout.getParameter('position')) %}
             {% set content = '<div class="tooltip-header"><h4>'~callout.getParameter('title')~'</h4></div><div class="tooltip-content">'~callout.getContent()|trim~'</div>' %}
             <div class="callout-item" data-tooltip="{{ content|e('html_attr') }}" data-tooltip-color="white" style="{{ position.location }}">
-                <div class="callout-marker callout-coords-{{ position.coords }}">{{ loop.index }}</div>
+                <div class="callout-marker callout-coords-{{ position.coords }} {{ classes }}">{{ loop.index }}</div>
             </div>
         {% endfor %}
         </div>