Make theme able to load custom javascript (#1211)

* Make theme able to load custom javascript
- Look for the field 'customScript' in editorTheme (settings.js)
- Add it to mustach context
- Load list on template side (index.mst)

* Add unit tests for customScripts

* Code review edits : generic behavior for theme.page.[css|scripts]
- Use the same way to share css and javascript files from a theme
- Allow string instead of array for theme.page.scripts
- Remove old customScript field

editor/templates/index.mst

@@ -199,6 +199,9 @@
 <script src="vendor/ace/ext-language_tools.js"></script>
 <script src="{{ asset.red }}"></script>
 <script src="{{ asset.main }}"></script>
+{{# page.scripts }}
+<script src="{{.}}"></script>
+{{/ page.scripts }}
 
 </body>
 </html>

red/api/theme.js

@@ -57,6 +57,24 @@ function serveFile(app,baseUrl,file) {
     }
 }
 
+function serveFilesFromTheme(themeValue, themeApp, directory) {
+    var result = [];
+    if (themeValue) {
+        var array = themeValue;
+        if (!util.isArray(array)) {
+            array = [array];
+        }
+
+        for (i=0;i<array.length;i++) {
+            url = serveFile(themeApp,directory,array[i]);
+            if (url) {
+                result.push(url);
+            }
+        }
+    }
+    return result
+}
+
 module.exports = {
     init: function(runtime) {
         var settings = runtime.settings;
@@ -76,20 +94,15 @@ module.exports = {
         var themeApp = express();
 
         if (theme.page) {
-            if (theme.page.css) {
-                var styles = theme.page.css;
-                if (!util.isArray(styles)) {
-                    styles = [styles];
-                }
-                themeContext.page.css = [];
 
-                for (i=0;i<styles.length;i++) {
-                    url = serveFile(themeApp,"/css/",styles[i]);
-                    if (url) {
-                        themeContext.page.css.push(url);
-                    }
-                }
-            }
+            themeContext.page.css = serveFilesFromTheme(
+                themeContext.page.css, 
+                themeApp, 
+                "/css/")
+            themeContext.page.scripts = serveFilesFromTheme(
+                themeContext.page.scripts, 
+                themeApp, 
+                "/scripts/")
 
             if (theme.page.favicon) {
                 url = serveFile(themeApp,"/favicon/",theme.page.favicon)

test/red/api/theme_spec.js

@@ -55,7 +55,8 @@ describe("theme handler", function() {
                 page: {
                     title: "Test Page Title",
                     favicon: "/absolute/path/to/theme/icon",
-                    css: "/absolute/path/to/custom/css/file"
+                    css: "/absolute/path/to/custom/css/file",
+                    scripts: "/absolute/path/to/script.js"
                 },
                 header: {
                     title: "Test Header Title",
@@ -68,6 +69,10 @@ describe("theme handler", function() {
                     icon: "/absolute/path/to/deploy/button/image" // or null to remove image
                 },
 
+                customScripts: [
+                    "/absolute/path/to/script.js"
+                ],
+
                 menu: { // Hide unwanted menu items by id. see editor/js/main.js:loadEditor for complete list
                     "menu-item-import-library": false,
                     "menu-item-export-library": false,
@@ -93,6 +98,8 @@ describe("theme handler", function() {
         context.page.should.have.a.property("title","Test Page Title");
         context.should.have.a.property("header");
         context.header.should.have.a.property("title","Test Header Title");
+        context.page.should.have.a.property("css");
+        context.page.should.have.a.property("scripts");
 
         var settings = theme.settings();
         settings.should.have.a.property("deployButton");