Skip to content

Commit 87a04d9

Browse files
committed
Converted the tabs/spaces mess to use tabs
Added Refresh on context change option
1 parent 1f7b6aa commit 87a04d9

File tree

4 files changed

+147
-127
lines changed

4 files changed

+147
-127
lines changed

src/HTMLSnippet/HTMLSnippet.xml

Lines changed: 49 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,56 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<widget id="HTMLSnippet.widget.HTMLSnippet" needsEntityContext="false" xmlns="http://www.mendix.com/widget/1.0/">
3-
<name>HTMLSnippet</name>
4-
<description>The HTMLSnippet widget can be used to insert a custom piece of HTML or JavaScript in the client</description>
5-
<icon>iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAAm9JREFUeNqEU01IVFEU/t6bGcfGJq2RYkhKSKdFIGQxRRAR0q6kZuuq hWZY0SZa1EKhRQsTpEVZrVpUVgxGFETgLgorEdPsZ1FizJhJ1Py8N+/d+97p3DcK80Lr8i733HvO 953vnnOfRkRYaVi2QEADQqcmfQE0tEur3GurEUghPHAq1eo7T6fH/SSKYKWJrjd0eZLILuYoa/DB INGmu0TnJthm33JcEP8ZUhJOjgHHk8COGPDd8Pv1f4FjtRyg64jWAAcbgGNNQFujPybY9/AHrUYQ yX7F2GwGyS37UB8BKpMf6Jsh05TlK+xpXlNZZ0iXMNLYhKPdw7iZ7kLLRiDAaV7NAZ2pG+jZfg17 8/PoFU+g9T5YIEWQMyQcFx5YsmE7BCFdnL4w4lN1NtGP/p7PmPoAjE/Fywpcruahligevf6F9t21 CId0JYQ/QvJeB158zONwax2GXy5iZuAEJqaBREIRcI0sKb1M4aAGS7ge+PrzBWjc6SuPs2iIhZCI h7F5QxVqqnTcGnUwcBvovrhUxKIlUVIEIQ0d+2MI6hrUmepxwXLguqpGa5UglDhBoeQg3z6NeF0I 5+/PQS+YxM/Whclz8Ok8bCYzSq4HKHKww0TvZg18yhis0IF6Y6btMBnBtWzov00bJQYrRzkzOLNc 2isFhKvPMljMS0/BukgAQ53NEGyTRdDaLr2nIzvX49tPCzYfWqzAYnalRNlqFd7krnB3hFNu89b6 MEbvfEEwx8xKUrQ6AJvrUC00iDAHSV6lDuGSB3IYzDzc6rLa5X9Q23bmLZX4RZF3J3baylbyHEBd jYHenhV4Ff1r/BFgACiOjHWT8QsmAAAAAElFTkSuQmCC</icon>
6-
<properties>
7-
<!-- content type -->
8-
<property key="contenttype" type="enumeration" defaultValue="html">
9-
<caption>Content Type</caption>
10-
<category>Behavior</category>
11-
<description>Defines whether this widget provides a piece of HTML or a piece of JavaScript.
12-
</description>
13-
<enumerationValues>
14-
<enumerationValue key="html">HTML</enumerationValue>
15-
<enumerationValue key="js">JavaScript</enumerationValue>
16-
<enumerationValue key="jsjQuery">JavaScript with jQuery</enumerationValue>
17-
</enumerationValues>
18-
</property>
3+
<name>HTMLSnippet</name>
4+
<description>The HTMLSnippet widget can be used to insert a custom piece of HTML or JavaScript in the client</description>
5+
<icon>iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ bWFnZVJlYWR5ccllPAAAAm9JREFUeNqEU01IVFEU/t6bGcfGJq2RYkhKSKdFIGQxRRAR0q6kZuuq hWZY0SZa1EKhRQsTpEVZrVpUVgxGFETgLgorEdPsZ1FizJhJ1Py8N+/d+97p3DcK80Lr8i733HvO 953vnnOfRkRYaVi2QEADQqcmfQE0tEur3GurEUghPHAq1eo7T6fH/SSKYKWJrjd0eZLILuYoa/DB INGmu0TnJthm33JcEP8ZUhJOjgHHk8COGPDd8Pv1f4FjtRyg64jWAAcbgGNNQFujPybY9/AHrUYQ yX7F2GwGyS37UB8BKpMf6Jsh05TlK+xpXlNZZ0iXMNLYhKPdw7iZ7kLLRiDAaV7NAZ2pG+jZfg17 8/PoFU+g9T5YIEWQMyQcFx5YsmE7BCFdnL4w4lN1NtGP/p7PmPoAjE/Fywpcruahligevf6F9t21 CId0JYQ/QvJeB158zONwax2GXy5iZuAEJqaBREIRcI0sKb1M4aAGS7ge+PrzBWjc6SuPs2iIhZCI h7F5QxVqqnTcGnUwcBvovrhUxKIlUVIEIQ0d+2MI6hrUmepxwXLguqpGa5UglDhBoeQg3z6NeF0I 5+/PQS+YxM/Whclz8Ok8bCYzSq4HKHKww0TvZg18yhis0IF6Y6btMBnBtWzov00bJQYrRzkzOLNc 2isFhKvPMljMS0/BukgAQ53NEGyTRdDaLr2nIzvX49tPCzYfWqzAYnalRNlqFd7krnB3hFNu89b6 MEbvfEEwx8xKUrQ6AJvrUC00iDAHSV6lDuGSB3IYzDzc6rLa5X9Q23bmLZX4RZF3J3baylbyHEBd jYHenhV4Ff1r/BFgACiOjHWT8QsmAAAAAElFTkSuQmCC</icon>
6+
<properties>
7+
<!-- content type -->
8+
<property key="contenttype" type="enumeration" defaultValue="html">
9+
<caption>Content Type</caption>
10+
<category>Behavior</category>
11+
<description>Defines whether this widget provides a piece of HTML or a piece of JavaScript.
12+
</description>
13+
<enumerationValues>
14+
<enumerationValue key="html">HTML</enumerationValue>
15+
<enumerationValue key="js">JavaScript</enumerationValue>
16+
<enumerationValue key="jsjQuery">JavaScript with jQuery</enumerationValue>
17+
</enumerationValues>
18+
</property>
1919

20-
<!-- html/js string -->
21-
<property key="contents" type="translatableString" multiline="true" required="false">
22-
<caption>Contents</caption>
23-
<category>Behavior</category>
24-
<description>The HTML or Javascript to embed.</description>
25-
</property>
20+
<!-- html/js string -->
21+
<property key="contents" type="translatableString" multiline="true" required="false">
22+
<caption>Contents</caption>
23+
<category>Behavior</category>
24+
<description>The HTML or Javascript to embed.</description>
25+
</property>
2626

27-
<!-- html/js file path -->
28-
<property key="contentsPath" type="string" required="false">
29-
<caption>External File</caption>
30-
<category>Behavior</category>
31-
<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>
32-
</property>
27+
<!-- html/js file path -->
28+
<property key="contentsPath" type="string" required="false">
29+
<caption>External File</caption>
30+
<category>Behavior</category>
31+
<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>
32+
</property>
3333

34-
<!-- The onclick microflow -->
35-
<property key="onclickmf" type="microflow" required="false">
36-
<caption> On click microflow </caption>
37-
<category>Behavior</category>
38-
<description>The microflow to execute on click</description>
39-
<returnType type="Void"/>
40-
</property>
34+
<!-- The onclick microflow -->
35+
<property key="onclickmf" type="microflow" required="false">
36+
<caption> On click microflow </caption>
37+
<category>Behavior</category>
38+
<description>The microflow to execute on click</description>
39+
<returnType type="Void"/>
40+
</property>
4141

42-
<!-- description of what the html/js should do -->
43-
<property key="documentation" type="string" multiline="true" required="false">
44-
<caption>Documentation</caption>
45-
<category>Common</category>
46-
<description>Documentation of this widget. Should explain its purpose.</description>
47-
</property>
48-
</properties>
42+
<!-- description of what the html/js should do -->
43+
<property key="documentation" type="string" multiline="true" required="false">
44+
<caption>Documentation</caption>
45+
<category>Common</category>
46+
<description>Documentation of this widget. Should explain its purpose.</description>
47+
</property>
48+
49+
<!-- Refresh when the context changes -->
50+
<property key="refreshOnContextChange" type="boolean" defaultValue="false">
51+
<caption>Refresh on context change</caption>
52+
<category>Behavior</category>
53+
<description>Refresh when the context changes</description>
54+
</property>
55+
</properties>
4956
</widget>

src/HTMLSnippet/widget/HTMLSnippet.js

Lines changed: 98 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -2,101 +2,114 @@
22
/*global mx, mxui, mendix, dojo, require, console, define, module, document*/
33

44
require([
5-
"dojo/_base/declare",
6-
"mxui/widget/_WidgetBase",
5+
"dojo/_base/declare",
6+
"mxui/widget/_WidgetBase",
77

8-
"mxui/dom",
9-
"dojo/dom-style",
10-
"dojo/dom-attr",
11-
"dojo/dom-construct",
12-
"dojo/_base/lang",
13-
"dijit/layout/LinkPane"
14-
], function (declare, _WidgetBase, dom, domStyle, domAttr, domConstruct, lang, linkPane) {
15-
"use strict";
8+
"mxui/dom",
9+
"dojo/dom-style",
10+
"dojo/dom-attr",
11+
"dojo/dom-construct",
12+
"dojo/_base/lang",
13+
"dijit/layout/LinkPane"
14+
], function(declare, _WidgetBase, dom, domStyle, domAttr, domConstruct, lang, linkPane) {
15+
"use strict";
1616

17-
return declare("HTMLSnippet.widget.HTMLSnippet", [_WidgetBase], {
17+
return declare("HTMLSnippet.widget.HTMLSnippet", [_WidgetBase], {
1818

19-
postCreate: function () {
20-
var external = this.contentsPath !== "" ? true : false;
21-
this._setupEvents();
19+
postCreate: function() {
20+
this._setupEvents();
2221

23-
switch (this.contenttype) {
24-
case "html":
25-
if (external) {
26-
new linkPane({
27-
preload: true,
28-
loadingMessage: "",
29-
href: this.contentsPath,
30-
onDownloadError: function(){
31-
console.log("Error loading html path");
32-
}
33-
}).placeAt(this.domNode.id).startup();
34-
} else {
35-
domStyle.set(this.domNode, {
36-
"height": "auto",
37-
"width": "100%",
38-
"outline": 0
39-
});
22+
if (!this.refreshOnContextChange) {
23+
this.executeCode();
24+
}
25+
},
4026

41-
domAttr.set(this.domNode, "style", this.style); // might override height and width
42-
var domNode = domConstruct.create("div", { innerHTML: this.contents });
43-
domConstruct.place(domNode, this.domNode, "only");
44-
}
45-
break;
27+
executeCode: function() {
28+
var external = this.contentsPath !== "" ? true : false;
29+
switch (this.contenttype) {
30+
case "html":
31+
if (external) {
32+
new linkPane({
33+
preload: true,
34+
loadingMessage: "",
35+
href: this.contentsPath,
36+
onDownloadError: function() {
37+
console.log("Error loading html path");
38+
}
39+
}).placeAt(this.domNode.id).startup();
40+
} else {
41+
domStyle.set(this.domNode, {
42+
"height": "auto",
43+
"width": "100%",
44+
"outline": 0
45+
});
4646

47-
case "js":
48-
case "jsjQuery":
49-
if (external) {
50-
var scriptNode = document.createElement("script"),
51-
intDate = +new Date();
47+
domAttr.set(this.domNode, "style", this.style); // might override height and width
48+
var domNode = domConstruct.create("div", { innerHTML: this.contents });
49+
domConstruct.place(domNode, this.domNode, "only");
50+
}
51+
break;
5252

53-
scriptNode.type = "text/javascript";
54-
scriptNode.src = this.contentsPath + "?v=" + intDate.toString();
53+
case "js":
54+
case "jsjQuery":
55+
if (external) {
56+
var scriptNode = document.createElement("script"),
57+
intDate = +new Date();
5558

56-
domConstruct.place(scriptNode, this.domNode, "only");
57-
} else {
58-
if (this.contenttype == "jsjQuery") {
59-
require(["HTMLSnippet/lib/jquery-1.11.3"], lang.hitch(this, this.evalJs));
60-
} else {
61-
this.evalJs();
62-
}
63-
}
64-
break;
65-
}
66-
},
59+
scriptNode.type = "text/javascript";
60+
scriptNode.src = this.contentsPath + "?v=" + intDate.toString();
6761

68-
_setupEvents: function () {
69-
if (this.onclickmf) {
70-
this.connect(this.domNode, "click", this._executeMicroflow);
71-
}
72-
},
62+
domConstruct.place(scriptNode, this.domNode, "only");
63+
} else {
64+
if (this.contenttype == "jsjQuery") {
65+
require(["HTMLSnippet/lib/jquery-1.11.3"], lang.hitch(this, this.evalJs));
66+
} else {
67+
this.evalJs();
68+
}
69+
}
70+
break;
71+
}
72+
},
7373

74-
_executeMicroflow: function () {
75-
if (this.onclickmf) {
76-
mx.data.action({
77-
store: {
78-
caller: this.mxform
79-
},
80-
params: {
81-
actionname: this.onclickmf
82-
},
83-
callback: function () {
84-
// ok
85-
},
86-
error: function () {
87-
// error
88-
}
89-
});
90-
}
91-
},
74+
update: function(obj, callback) {
75+
if (this.refreshOnContextChange) {
76+
this.executeCode();
77+
}
78+
callback();
79+
},
9280

93-
evalJs: function () {
94-
try {
95-
eval(this.contents + "\r\n//# sourceURL=" + this.id + ".js");
96-
} catch (e) {
97-
domConstruct.place("<div class=\"alert alert-danger\">Error while evaluating javascript input: " + e + "</div>", this.domNode, "only");
98-
}
99-
}
81+
_setupEvents: function() {
82+
if (this.onclickmf) {
83+
this.connect(this.domNode, "click", this._executeMicroflow);
84+
}
85+
},
10086

101-
});
87+
_executeMicroflow: function() {
88+
if (this.onclickmf) {
89+
mx.data.action({
90+
store: {
91+
caller: this.mxform
92+
},
93+
params: {
94+
actionname: this.onclickmf
95+
},
96+
callback: function() {
97+
// ok
98+
},
99+
error: function() {
100+
// error
101+
}
102+
});
103+
}
104+
},
105+
106+
evalJs: function() {
107+
try {
108+
eval(this.contents + "\r\n//# sourceURL=" + this.id + ".js");
109+
} catch (e) {
110+
domConstruct.place("<div class=\"alert alert-danger\">Error while evaluating javascript input: " + e + "</div>", this.domNode, "only");
111+
}
112+
}
113+
114+
});
102115
});

test/Test.mpr

19 KB
Binary file not shown.

test/widgets/HTMLSnippet.mpk

-1.56 KB
Binary file not shown.

0 commit comments

Comments
 (0)