refactor and add the ability to inject custom code

src/scripts/config-page.js

@@ -20,40 +20,32 @@ var $ = require('zepto-browserify').$;
 
 var config = $.extend(true, [], window.clayConfig || []);
 var settings = $.extend(true, {}, window.claySettings || {});
+var returnTo = window.returnTo || 'pebblejs://close#';
+var customFn = window.customFn;
 
-// Get query variables
-function getQueryParam(variable, defaultValue) {
-  var query = location.search.substring(1);
-  var vars = query.split('&');
-  for (var i = 0; i < vars.length; i++) {
-    var pair = vars[i].split('=');
-
-    if (pair[0] === variable) {
-      return decodeURIComponent(pair[1]);
-    }
-  }
-  return defaultValue || false;
-}
-
-function submit() {
+function submit(event) {
+  $.each(api.itemsByAppKey, function(appKey, item) {
+    settings[appKey] = item.get();
+  });
   // Set the return URL depending on the runtime environment
-  var return_to = getQueryParam('return_to', 'pebblejs://close#');
-  document.location = return_to + encodeURIComponent(JSON.stringify(settings));
+  location.href = returnTo + encodeURIComponent(JSON.stringify(settings));
+  event.preventDefault();
+  return false;
 }
 
 /**
  *
  * @param {string} key
- * @param {string|boolean} _default
+ * @param {string|boolean} defaultValue
  * @return {string|boolean}
  */
-function getSetting(key, _default) {
-  return typeof settings[key] !== 'undefined' ? settings[key] : (_default || '');
+function getSetting(key, defaultValue) {
+  return typeof settings[key] !== 'undefined' ? settings[key] : (defaultValue || '');
 }
 
-function setSetting(key, value) {
-  settings[key] = value;
-}
+// function setSetting(key, value) {
+//   settings[key] = value;
+// }
 
 /**
  * @param {Clay~Item} item
@@ -83,18 +75,20 @@ function processConfigItem(item, $parent) {
       attributes: $.map(item.attributes || [], function(item, key) {
         return {
           key: key,
-            // .replace('"', '&quot;'),
           value: item.toString()
-            // .replace('"', '&quot;')
         };
-      }),
-      value: typeof itemType.valueTransformer === 'function' ?
-        itemType.valueTransformer(getSetting(item.app_key, item.default), item) :
-        getSetting(item.app_key, item.default)
+      })
     });
 
     apiItem.$element = $(mustache.render(itemType.template, templateData));
     apiItem.$manipulatorTarget = apiItem.$element.find('[data-manipulator-target]');
+
+    // this caters for situations where the manipulator target is the root element
+    if (!apiItem.$manipulatorTarget.length) {
+      apiItem.$manipulatorTarget = apiItem.$element;
+    }
+
+    // proxy event related methods
     apiItem.on = function(events, handler) {
       return apiItem.$manipulatorTarget.on(events, $.proxy(handler, apiItem));
     };
@@ -105,28 +99,31 @@ function processConfigItem(item, $parent) {
     apiItem.triggerHandler =
       apiItem.$manipulatorTarget.triggerHandler.bind(apiItem.$manipulatorTarget);
 
-    // attach the manipulator methods the the apiItem
+    // attach the manipulator methods to the apiItem
     $.each(itemType.manipulator, function(methodName, method) {
       apiItem[methodName] = method.bind(apiItem);
     });
 
+    // set the value of the item via the manipulator to ensure consistency
+    apiItem.set(getSetting(item.app_key, item.value));
+
     apiItem.config = item;
 
     if (item.id) {
-      _interface.itemsById[item.id] = apiItem;
+      api.itemsById[item.id] = apiItem;
     }
 
     if (item.app_key) {
-      _interface.itemsByAppKey[item.app_key] = apiItem;
+      api.itemsByAppKey[item.app_key] = apiItem;
     }
 
-    _interface.items.push(apiItem);
+    api.items.push(apiItem);
 
     $parent.append(apiItem.$element);
   }
 }
 
-var _interface = {
+var api = {
   items: [],
   itemsById: {},
   itemsByAppKey: {}
@@ -134,25 +131,22 @@ var _interface = {
 
 var $mainForm = $('#main-form');
 
-_interface.getItemByAppKey = function(key) {
-  return _interface.itemsByAppKey[key];
+api.getItemByAppKey = function(key) {
+  return api.itemsByAppKey[key];
 };
 
-_interface.getItemById = function(key) {
-  return _interface.itemsById[key];
+api.getItemById = function(key) {
+  return api.itemsById[key];
 };
 
-_interface.getItemsByType = function(type) {
-  return _interface.items.filter(function(item) {
+api.getItemsByType = function(type) {
+  return api.items.filter(function(item) {
     return item.config.type === type;
   });
 };
 
 processConfigItem(config, $mainForm, 0);
+$mainForm.on('submit', submit);
 
-$mainForm.submit(submit);
-
-module.exports = _interface;
-window._interface = _interface;
-
-console.log(_interface);
+module.exports = api;
+customFn.call(api);

src/scripts/lib/item-types.js

@@ -25,22 +25,11 @@ module.exports = {
   },
   select: {
     template: require('../../templates/components/select.mustache'),
-    manipulator: manipulators.val,
-    valueTransformer: function(rawValue, item) {
-      item.options.forEach(function(option, index) {
-        if (option.value === rawValue) {
-          item.options[index].selected = 'selected';
-        }
-      });
-      return rawValue;
-    }
+    manipulator: manipulators.val
   },
   toggle: {
     template: require('../../templates/components/toggle.mustache'),
-    manipulator: manipulators.checked,
-    valueTransformer: function(rawValue) {
-      return rawValue ? 'checked' : '';
-    }
+    manipulator: manipulators.checked
   },
   submit: {
     template: require('../../templates/components/submit.mustache'),