Added possibility to set arrow color

Author: AZhurav1ev

.gitignore

@@ -1,2 +1,4 @@
 node_modules/*
-lib/*
+lib/*
+bootstrap_test
+package-lock.json

README.md

@@ -84,6 +84,7 @@ var enjoyhint_script_steps = [
 
 #### Properties of the step configuration
 * `"event selector" : "description"` - to describe a step you should set an event type, selecte element and add description for this element (hint)
+* `markerColor` - the color of a marker that accepts all CSS colors.
 * `keyCode` - the code of a button, which triggers the next EnjoyHint step upon a click. Defined by the “key” event. (“key #block” : “hello”).
 * `event_selector` - if you need to attach an event (that was set in "event" property) to other selector, you can use this one  
 * `timeout` - delay before the moment, when an element is highlighted   
@@ -112,7 +113,7 @@ var enjoyhint_script_steps = [
 
 
 #### Non-standard events:
-**auto** - for example, you need to click on the same button on the second step imediatelly after the first step and go to the next step after it. Then you can use "auto" in the "event_type" property and "click" in "event" property.
+* `auto` - for example, you need to click on the same button on the second step imediatelly after the first step and go to the next step after it. Then you can use "auto" in the "event_type" property and "click" in "event" property.
 * `custom` - this value is very usefull if you need to go to the next step by event in your app code. For example, you want to go to the next step only after some data have been loaded in your application. Then you should use the "custom" event_type and the "trigger" method of the EnjoyHint instance.  
 ```javascript
 //Example of using custom event_type
@@ -169,6 +170,7 @@ var enjoyhint_script_steps = [
 * Add responsive design
 * Add mobile support
 * Add possibility to go back to previous step
+* Add possibility to select the color of a marker
 
 
 

enjoyhint.js

@@ -273,6 +273,7 @@
             center_x: coords.x,
             center_y: coords.y,
             text: step_data.description,
+            arrowColor: step_data.arrowColor,
             top: step_data.top,
             bottom: step_data.bottom,
             left: step_data.left,
@@ -582,7 +583,8 @@
         var polilyne = $(
           makeSVG("path", {
             style: "fill:none; stroke:rgb(255,255,255); stroke-width:2",
-            d: "M0,0 c30,11 30,9 0,20"
+            d: "M0,0 c30,11 30,9 0,20",
+            id: "poliline"
           })
         );
 
@@ -997,6 +999,24 @@
           };
         };
 
+        that.setMarkerColor = function(color){
+
+            function isValidColor(value) {
+                const temp = new Option().style;
+                temp.color = value;
+                return temp.color !== '';
+            }
+
+            if (isValidColor(color)){
+                return [$("#poliline"), $("#enjoyhint_arrpw_line")].forEach(function(element){
+                    element.css("stroke", that.stepData.arrowColor);
+                });
+            }
+
+            $("#poliline").css("stroke", "rgb(255,255,255)")
+            console.log("Error: invalid color name property - " + color);
+        }
+
         that.renderArrow = function(data) {
           var x_from = data.x_from || 0;
           var y_from = data.y_from || 0;
@@ -1041,6 +1061,13 @@
                 id: "enjoyhint_arrpw_line"
               })
             );
+
+            $("#poliline").css("stroke", "rgb(255, 255, 255)");
+
+            if(that.stepData.arrowColor) {
+                that.setMarkerColor(that.stepData.arrowColor)
+            }
+
             that.enjoyhint.removeClass(that.cl.svg_transparent);
           }, that.options.animation_time / 2);
         };