Add support for md-theme (templateOptions.theme)

Author: Kamil Kisiela

lib/client/formly-material.js

@@ -0,0 +1,18 @@
+var {SetModule} = angular2now;
+
+SetModule('formlyMaterial')
+    .provider('formlyMaterial', formlyMaterial);
+
+function formlyMaterial() {
+    var self = this;
+
+    this.templateUrl = function (templateUrl) {
+        return '/packages/wieldo:angular-formly-templates-material/' + templateUrl.replace(/^\//, "");
+    };
+
+    this.$get = function () {
+        return {
+            templateUrl: self.templateUrl
+        }
+    };
+}

lib/client/main.js

@@ -4,19 +4,4 @@ SetModule('formlyMaterial', [
     'ngMessages',
     'ngMaterial',
     'formly'
-])
-    .provider('formlyMaterial', formlyMaterial);
-
-function formlyMaterial() {
-    var self = this;
-
-    this.templateUrl = function (templateUrl) {
-        return '/packages/wieldo:angular-formly-templates-material/' + templateUrl.replace(/^\//, "");
-    };
-
-    this.$get = function () {
-        return {
-            templateUrl: self.templateUrl
-        }
-    };
-}
+]);

lib/client/run/md-theme-manipulator.js

@@ -0,0 +1,78 @@
+var {SetModule} = angular2now;
+
+SetModule('formlyMaterial')
+    .config((formlyConfigProvider) => {
+
+        const addIfNotPresent = (nodes, attr, val) => {
+            angular.forEach(nodes, node => {
+                if (!node.getAttribute(attr)) {
+                    node.setAttribute(attr, val)
+                }
+            })
+        };
+
+        const nodeMatches = (node, selector) => {
+            const div = document.createElement('div');
+
+            div.innerHTML = node.outerHTML;
+            return div.querySelector(selector)
+        };
+
+        const getNgModelNodes = (node, skip) => {
+            const selectorNot = angular.isString(skip) ? `:not(${skip})` : '';
+            const skipNot = ':not([formly-skip-ng-model-attrs-manipulator])';
+            const query = `[ng-model]${selectorNot}${skipNot}, [data-ng-model]${selectorNot}${skipNot}`;
+
+            try {
+                return node.querySelectorAll(query)
+            } catch (e) {
+                //this code is needed for IE8, as it does not support the CSS3 ':not' selector
+                //it should be removed when IE8 support is dropped
+                return getNgModelNodesFallback(node, skip)
+            }
+        };
+
+        const getNgModelNodesFallback = (node, skip) => {
+            const allNgModelNodes = node.querySelectorAll('[ng-model], [data-ng-model]');
+            const matchingNgModelNodes = [];
+
+            //make sure this array is compatible with NodeList type by adding an 'item' function
+            matchingNgModelNodes.item = function (i) {
+                return this[i]
+            };
+
+            for (let i = 0; i < allNgModelNodes.length; i++) {
+                const ngModelNode = allNgModelNodes[i];
+
+                if (!ngModelNode.hasAttribute('formly-skip-ng-model-attrs-manipulator') && !(angular.isString(skip) && nodeMatches(ngModelNode, skip))) {
+                    matchingNgModelNodes.push(ngModelNode)
+                }
+            }
+
+            return matchingNgModelNodes
+        };
+
+        formlyConfigProvider.templateManipulators.preWrapper.push((template, options, scope) => {
+            if (angular.isDefined(options.templateOptions.theme)) {
+                const node = document.createElement('div');
+                const skip = options.extras && options.extras.skipNgModelAttrsManipulator;
+                if (skip === true) {
+                    return template
+                }
+                node.innerHTML = template;
+                const modelNodes = getNgModelNodes(node, skip);
+
+                if (!modelNodes || !modelNodes.length) {
+                    return template;
+                }
+
+                addIfNotPresent(modelNodes, 'md-theme', options.templateOptions.theme);
+
+                return node.innerHTML;
+
+            } else {
+                return template;
+            }
+        });
+
+    });

lib/client/types/checkbox/checkbox.ng.html

@@ -1,5 +1,5 @@
 <div>
-    <md-checkbox ng-model="model[options.key]" md-theme="{{to.mdTheme || 'primary'}}">
+    <md-checkbox ng-model="model[options.key]">
         {{to.label}}
     </md-checkbox>
 </div>

lib/client/types/switch/switch.ng.html

@@ -1,3 +1,3 @@
-<md-switch ng-model="model[options.key]" md-theme="{{to.mdTheme || 'primary'}}">
+<md-switch ng-model="model[options.key]">
     {{to.label}}
 </md-switch>

package.js

@@ -36,6 +36,15 @@ Package.onUse(function (api) {
 
     api.addFiles([
         'lib/client/main.js',
+        // formlyMaterial prodiver
+        'lib/client/formly-material.js',
+
+        //
+        // templateManipulators
+        //
+
+        // md-theme
+        'lib/client/run/md-theme-manipulator.js',
 
         //
         // wrappers
@@ -70,7 +79,7 @@ Package.onUse(function (api) {
         // select
         'lib/client/types/select/select.js',
         'lib/client/types/select/select.ng.html',
-        
+
         // radio
         'lib/client/types/radio/radio.js',
         'lib/client/types/radio/radio.ng.html',