Add option to switch off enclosing div in HTML snippet

Author: Jelte Lagendijk

README.md

@@ -1,9 +1,9 @@
 # HTMLSnippet
-This widget is useful to add a piece of HTML or JavaScript to a form. For example to embed a YouTube or Flash object. Furthermore it can be used to enhance styling by adding arbitrary HTML elements. 
+This widget is useful to add a piece of HTML or JavaScript to a form. For example to embed a YouTube or Flash object. Furthermore it can be used to enhance styling by adding arbitrary HTML elements.
 
 ## Contributing
 
-For more information on contributing to this repository visit [Contributing to a GitHub repository](https://world.mendix.com/display/howto50/Contributing+to+a+GitHub+repository)!
+For more information on contributing to this repository visit [Contributing to a GitHub repository](https://docs.mendix.com/howto7/collaboration-project-management/contribute-to-a-github-repository)!
 
 ## Typical usage scenario
 
@@ -19,16 +19,19 @@ For more information on contributing to this repository visit [Contributing to a
 
 ## Dependencies
 * Mendix 5.x environment
- 
+
 ## Properties
- 
-* Content Type [ HTML, JavaScript, JavaScript with jQuery ] : 
+
+* Content Type [ HTML, JavaScript, JavaScript with jQuery ] :
 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 : 
+* 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 :
 Documentation of this widget. Should explain its purpose.
+* Refresh on context change: Refresh when the context changes
+* Refresh on context update: Refresh when the context updates (works only when context change is true)
+* Enclose HTML with DIV: When adding HTML, the widget will wrap it with a DIV. If this is set to false, it will just replace the content of the widget. (For compatibility purposes this is set true on default)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "HTMLSnippet",
-  "version": "3.9.0",
+  "version": "3.9.1",
   "description": "",
   "license": "",
   "author": "",

src/HTMLSnippet/HTMLSnippet.xml

@@ -61,5 +61,12 @@
             <category>Behavior</category>
             <description>Refresh when the context updates (works only when context change is true)</description>
         </property>
+
+        <!-- Enclose HTML with DIV -->
+        <property key="encloseHTMLWithDiv" type="boolean" defaultValue="true">
+            <caption>Enclose HTML with DIV</caption>
+            <category>Behavior</category>
+            <description>When adding HTML, the widget will wrap it with a DIV. If this is set to false, it will just replace the content of the widget. (For compatibility purposes this is set true on default)</description>
+        </property>
     </properties>
 </widget>

src/HTMLSnippet/HTMLSnippetContext.xml

@@ -61,5 +61,12 @@
             <category>Behavior</category>
             <description>Refresh when the context updates (works only when context change is true)</description>
         </property>
+
+        <!-- Enclose HTML with DIV -->
+        <property key="encloseHTMLWithDiv" type="boolean" defaultValue="true">
+            <caption>Enclose HTML with DIV</caption>
+            <category>Behavior</category>
+            <description>When adding HTML, the widget will wrap it with a DIV. If this is set to false, it will just replace the content of the widget. (For compatibility purposes this is set true on default)</description>
+        </property>
     </properties>
 </widget>

src/HTMLSnippet/widget/HTMLSnippet.js

@@ -8,12 +8,24 @@ define([
     "dojo/dom-attr",
     "dojo/dom-construct",
     "dojo/_base/lang",
+    "dojo/html",
     "dijit/layout/LinkPane"
-], function (declare, _WidgetBase, dom, domStyle, domAttr, domConstruct, lang, LinkPane) {
+], function (declare, _WidgetBase, dom, domStyle, domAttr, domConstruct, lang, html, LinkPane) {
     "use strict";
 
     return declare("HTMLSnippet.widget.HTMLSnippet", [_WidgetBase], {
 
+        // Set in Modeler
+        contenttype: "html",
+        contents: "",
+        contentsPath: "",
+        onclickmf: "",
+        documentation: "",
+        refreshOnContextChange: false,
+        refreshOnContextUpdate: false,
+        encloseHTMLWithDiv: true,
+
+        // Internal
         _objectChangeHandler: null,
         contextObj: null,
 
@@ -40,6 +52,8 @@ define([
                                 console.log("Error loading html path");
                             }
                         }).placeAt(this.domNode.id).startup();
+                    } else if (!this.encloseHTMLWithDiv) {
+                        html.set(this.domNode, this.contents);
                     } else {
                         domStyle.set(this.domNode, {
                             "height": "auto",

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="HTMLSnippet" version="3.9.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="HTMLSnippet" version="3.9.1" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="HTMLSnippet/HTMLSnippet.xml"/>
             <widgetFile path="HTMLSnippet/HTMLSnippetContext.xml"/>