~ splitted the fg_blink class into two other self explanatory classes…

… called fg-blink-border and fb-blink-background

+ Added a second action called ScrollToElement, which can scroll to an element in various ways.
~ Updated dist version of forestguide.js

src/js/Activator.js

@@ -1,4 +1,5 @@
 import Blink from './actions/Blink'
+import ScrollToElement from "./actions/ScrollToElement";
 
 /**
  * Activator. Knows how to activate and deactivate actions
@@ -19,6 +20,10 @@ import Blink from './actions/Blink'
                 if(!this._verifyAction(Blink, 'blink')) break;
                 Blink[method](options);
                 break;
+            case 'scrolltoelement':
+                if(!this._verifyAction(ScrollToElement, 'scrollToElement')) break;
+                ScrollToElement[method](options);
+                break;
         }
     }
 

src/js/actions/Blink.js

@@ -2,7 +2,7 @@
  * Blink action.
  *
  * Makes an element blink by toggling a class on that element,
- * that makes that class blink
+ * that makes that element "blink"
  */
 export default class Blink {
     /**
@@ -22,7 +22,6 @@ export default class Blink {
              * @param {Element} element
              */
             function(element) {
-                console.log('blinking!');
                 if(element.classList.contains(validatedOptions.class)) return;
                 element.classList.add(validatedOptions.class);
             }
@@ -46,7 +45,6 @@ export default class Blink {
              * @param {Element} element
              */
             function(element) {
-                console.log('stop blinking! ');
                 element.classList.remove(validatedOptions.class);
             }
         )
@@ -69,7 +67,7 @@ export default class Blink {
             console.error('Blink: The options object does not have an string property called selector');
             return false;
         }
-        if(!options.hasOwnProperty('class') || typeof options.selector !== 'string') options['class'] = 'fg_blink';
+        if(!options.hasOwnProperty('class') || typeof options.selector !== 'string') options['class'] = 'fg-blink-border';
 
         return options
     }

src/js/actions/ScrollToElement.js

@@ -0,0 +1,63 @@
+/**
+ * ScrollToElement action.
+ *
+ * Scrolls to an element that matches a certain selector
+ */
+export default class ScrollToElement {
+    /**
+     * Activates the action
+     *
+     * @param {object} options
+     * @return {boolean}
+     */
+    static activate(options)
+    {
+        let validatedOptions = ScrollToElement._validateOptions(options);
+        if(!validatedOptions) return false;
+
+        let element = document.querySelector(validatedOptions.selector);
+        if(!element) return false;
+
+        element.scrollIntoView({behavior: options.behaviour, block: options.vertical_alignment, inline: options.horizontal_alignment});
+    }
+
+    /**
+     * De-activates that action
+     *
+     * @param options
+     * @return {boolean}
+     */
+    static deactivate(options)
+    {
+        //Not implemented. Method must be present for the framework
+    }
+
+    /**
+     * Validates given options object. And if needed, set defaults on that object.
+     *
+     * @param {object} options
+     * @return {boolean|object} Boolean false if not valid. options object when valid
+     * @private
+     */
+    static _validateOptions(options)
+    {
+        if(typeof options !== 'object') {
+            console.error('ScrollToElement: The options parameter was not an expected object.');
+            return false;
+        }
+        if(!options.hasOwnProperty('selector') || typeof options.selector !== 'string') {
+            console.error('ScrollToElement: The options object does not have an string property called selector');
+            return false;
+        }
+        if(!options.hasOwnProperty('behavior') || typeof options.behavior !== 'string') options['behaviour'] = "smooth";
+        if(['smooth', 'auto'].indexOf(options.behavior) === -1) options['behaviour'] = 'smooth';
+
+        if(!options.hasOwnProperty('horizontal_alignment') || typeof options.horizontal_alignment !== 'string') options['horizontal_alignment'] = "nearest";
+        if(["start", "center", "end", "nearest"].indexOf(options.horizontal_alignment) === -1) options['horizontal_alignment'] = "nearest";
+
+        if(!options.hasOwnProperty('vertical_alignment') || typeof options.vertical_alignment !== 'string') options['vertical_alignment'] = "center";
+        if(["start", "center", "end", "nearest"].indexOf(options.vertical_alignment) === -1) options['horizontal_alignment'] = "center";
+
+        return options
+    }
+}

src/scss/actions/blink.scss

@@ -1,11 +1,22 @@
-.fg_blink {
-  animation: blink 1.5s linear infinite;
+$namespace: 'fg-blink';
+
+.#{$namespace}-border {
+  animation: blink_border 1.5s linear infinite;
   border-width: 3px !important;
 
-  @keyframes blink{
+  @keyframes blink_border{
     0%{border-color: rgba(255, 51, 51, 0);}
     50%{border-color: rgba(255, 51, 51, 1);}
     100%{border-color: rgba(255, 51, 51, 0);}
   }
 }
 
+.#{$namespace}-background {
+  animation: blink_background 1.5s linear infinite;
+
+  @keyframes blink_background{
+    0%{background-color: rgba(255, 51, 51, 0);}
+    50%{background-color: rgba(255, 51, 51, 0.15);}
+    100%{background-color: rgba(255, 51, 51, 0);}
+  }
+}