Merge pull request #2 from t-fitz/add-external-files

Add the ability to use external html and javascript files

Author: GREdens

src/HTMLSnippet/HTMLSnippet.xml

@@ -7,6 +7,8 @@
     </icon>
 
     <properties>
+    
+        <!-- content type -->
         <property key="contenttype" type="enumeration" defaultValue="html">
             <caption>Content Type</caption>
             <category>Behavior</category>
@@ -17,11 +19,22 @@
                 <enumerationValue key="js">JavaScript</enumerationValue>
             </enumerationValues>
         </property>
-        <property key="contents" type="translatableString" multiline="true">
+        
+        <!-- html/js string -->
+        <property key="contents" type="translatableString" multiline="true" required="false">
             <caption>Contents</caption>
             <category>Behavior</category>
             <description>The HTML or Javascript to embed.</description>
         </property>
+        
+        <!-- html/js file path -->
+        <property key="contentsPath" type="string" required="false">
+            <caption>External File</caption>
+            <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>
+        
+        <!-- description of what the html/js should do -->
         <property key="documentation" type="string" multiline="true" required="false">
             <caption>Documentation</caption>
             <category>Common</category>

src/HTMLSnippet/widget/HTMLSnippet.js

@@ -3,8 +3,8 @@
 
 require([
 	'dojo/_base/declare', 'mxui/widget/_WidgetBase',
-	'mxui/dom', 'dojo/dom-style', 'dojo/dom-attr', 'dojo/html'
-], function (declare, _WidgetBase, dom, domStyle, domAttr, html) {
+	'mxui/dom', 'dojo/dom-style', 'dojo/dom-attr', 'dojo/dom-construct', 'dijit/layout/LinkPane'
+], function (declare, _WidgetBase, dom, domStyle, domAttr, domConstruct, linkPane) {
 
 	'use strict';
 
@@ -18,23 +18,54 @@ require([
 		postCreate: function () {
 			console.log(this.id + '.postCreate');
 
-			switch (this.contenttype) {
+            var external = this.contentsPath != '' ? true : false;
+            
+            switch (this.contenttype) {
 				case 'html':
-					domStyle.set(this.domNode, {
-						'height': 'auto',
-						'width': '100%',
-						'outline': 0
-					});
 
-					domAttr.set(this.domNode, 'style', this.style); //might override height and width
-					html.set(this.domNode, this.contents);
+                    if (external)
+                    {
+                        new linkPane(
+                        {
+                            preload: true,
+                            loadingMessage: "",
+                            href: this.contentsPath,
+                            onDownloadError: function(){ console.log("Error loading html path");}
+                        }).placeAt(this.domNode.id).startup();
+                    }
+                    else
+                    {
+                        domStyle.set(this.domNode, {
+                            'height': 'auto',
+                            'width': '100%',
+                            'outline': 0
+                        });
+
+                        domAttr.set(this.domNode, 'style', this.style); // might override height and width
+                        domConstruct.place(this.contents, this.domNode, "only"); 
+                    }
+                    
 					break;
 				case 'js':
-					try {
-						eval(this.contents);
-					} catch (e) {
-						html.set(this.domNode, "Error while evaluating JavaScript: " + e);
-					}
+                
+                    if (external)
+                    {
+                        var scriptNode = document.createElement("script"),
+                            intDate = +new Date();
+                        
+                        scriptNode.type = "text/javascript";    
+                        scriptNode.src = this.contentsPath + "?v=" + intDate.toString();
+                        
+                        domConstruct.place(scriptNode, this.domNode, "only");
+                    }
+                    else
+                    {
+                        try {
+                            eval(this.contents);
+                        } catch (e) {
+                            domConstruct.place("Error while evaluating JavaScript: " + e, this.domNode, "only");
+                        }
+                    }
 					break;
 			}
 		}