Merge pull request #5 from Mcpoowl/master

Added onClick functionality

Author: JelteMX

README.md

@@ -15,6 +15,7 @@ For more information on contributing to this repository visit [Contributing to a
 
  * Embed raw HTML
  * Embed raw JavaScript
+ * Load external HTML / JS file
 
 ## Dependencies
 * Mendix 5.x environment
@@ -25,5 +26,9 @@ For more information on contributing to this repository visit [Contributing to a
 Select how the snippet should be rendered. The JavaScript with jQuery option will make sure that jQuery 1.11.3 is loaded and should be available on window.jQuery for the snippet.
 * Contents : 
 The HTML or Javascript to embed.
+* External File :
+The path to the HTML or JavaScript file you want to add. The root is the theme folder. Will override the Contents section if used.
+* On click microflow :
+The microflow which should be executed on click. This can be used to, for example, show a page when the snippet is being clicked.
 * Documentation : 
 Documentation of this widget. Should explain its purpose.

src/HTMLSnippet/HTMLSnippet.xml

@@ -34,6 +34,14 @@
             <category>Behavior</category>
             <description>The path to the HTML or Javascript you want to add. The root folder is theme folder. Will override the Contents if used.</description>
         </property>
+
+        <!-- The onclick microflow -->
+        <property key="onclickmf" type="microflow" required="false">
+            <caption> On click microflow </caption>
+            <category>Behavior</category>
+            <description>The microflow to execute on click</description>
+            <returnType type="Void"/>
+        </property>
 
         <!-- description of what the html/js should do -->
         <property key="documentation" type="string" multiline="true" required="false">

src/HTMLSnippet/widget/HTMLSnippet.js

@@ -10,6 +10,8 @@ require([
 	return declare('HTMLSnippet.widget.HTMLSnippet', [_WidgetBase], {
 		postCreate: function () {
             var external = this.contentsPath !== '' ? true : false;
+
+            this._setupEvents();
 
             switch (this.contenttype) {
 				case 'html':
@@ -57,6 +59,32 @@ require([
 					break;
 			}
 		},
+
+        _setupEvents: function () {
+            if (this.onclickmf) {
+                this.connect(this.domNode, "click", this._executeMicroflow)};
+            },
+
+        _executeMicroflow: function () {
+            if (this.onclickmf) {
+                mx.data.action({
+                    store: {
+                       caller: this.mxform
+                    },
+                    params: {
+                        actionname: this.onclickmf
+                    },
+                    callback: function () {
+                        // ok
+                    },
+                    error: function () {
+                        // error
+                    }
+
+                });
+            }
+        },
+
 
 		evalJs: function () {
 			try {