Refactor structure to be more testable

src/scripts/config-page.js

@@ -1,28 +1,16 @@
 'use strict';
 
-/**
- * A Clay config Item
- * @typedef {object} Clay~Item
- * @property {string} type
- * @property {string} app_key
- * @property {string} id
- * @property {string} content
- * @property {string|boolean} default
- * @property {string} label
- * @property {object} attributes
- * @property {Array} options
- * @property {Array} items
- */
-
-var itemTypes = require('./lib/items');
 var $ = require('./vendor/minified/minified').$;
 var _ = require('./vendor/minified/minified')._;
-var HTML = require('./vendor/minified/minified').HTML;
-
+var Api = require('./lib/api');
 var config = _.extend([], window.clayConfig || []);
+
 var settings = _.extend({}, window.claySettings || {});
 var returnTo = window.returnTo || 'pebblejs://close#';
-var customFn = window.customFn;
+var customFn = window.customFn || function() {};
+
+var api = new Api(settings);
+var $mainForm = $('#main-form');
 
 function submit(event) {
   _.each(api.itemsByAppKey, function(appKey, item) {
@@ -34,132 +22,8 @@ function submit(event) {
   return false;
 }
 
-/**
- *
- * @param {string} key
- * @param {string|boolean} defaultValue
- * @return {string|boolean}
- */
-function getSetting(key, defaultValue) {
-  return typeof settings[key] !== 'undefined' ? settings[key] : (defaultValue || '');
-}
+api.addItem(config, $mainForm);
 
-// function setSetting(key, value) {
-//   settings[key] = value;
-// }
+//$mainForm.on('submit', submit);
 
-/**
- * @param {Clay~Item|Array} item
- * @param {$} $parent
- */
-function processConfigItem(item, $parent) {
-  // @todo add validation on the Item
-
-  if (Array.isArray(item)) {
-    item.forEach(function(item) {
-      processConfigItem(item, $parent);
-    });
-  } else if (item.type === 'section') {
-    var $container = HTML('<div class="section">');
-    $parent.add($container);
-    processConfigItem(item.items, $container);
-  } else {
-    var apiItem = {};
-    var itemType = itemTypes[item.type];
-    var templateData = {
-      label: '',
-      options: [],
-      attributes: {},
-      size: 4
-    };
-
-    _.extend(templateData, item);
-    apiItem.$element = HTML(_.formatHtml(itemType.template, templateData));
-    apiItem.$manipulatorTarget =
-      apiItem.$element.select('[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
-    var eventProxies = {};
-    apiItem.on = function(events, handler) {
-      eventProxies[handler] = function() {
-        handler.apply(apiItem, arguments);
-      };
-      return apiItem.$manipulatorTarget.on(events, eventProxies[handler]);
-    };
-    apiItem.one = function(events, handler) {
-      eventProxies[handler] = function(event) {
-        handler.apply(apiItem, arguments);
-        $.off(eventProxies[handler]);
-      };
-      return apiItem.$manipulatorTarget.on(events, eventProxies[handler]);
-    };
-    apiItem.off = function(handler) {
-      return $.off(eventProxies[handler]);
-    };
-
-    apiItem.trigger =
-      apiItem.$manipulatorTarget.trigger.bind(apiItem.$manipulatorTarget);
-
-    // attach the manipulator methods to the apiItem
-    _.eachObj(itemType.manipulator, function(methodName, method) {
-      apiItem[methodName] = method.bind(apiItem);
-    });
-
-    apiItem.config = item;
-
-    // attach the initialize method to the API.
-    apiItem.iniialize = typeof itemType.initialize === 'function' ?
-      itemType.initialize :
-      function() {};
-    apiItem.iniialize.bind(apiItem);
-    apiItem.iniialize();
-
-    // set the value of the item via the manipulator to ensure consistency
-    apiItem.set(getSetting(item.app_key, item.value));
-
-    if (item.id) {
-      api.itemsById[item.id] = apiItem;
-    }
-
-    if (item.app_key) {
-      api.itemsByAppKey[item.app_key] = apiItem;
-    }
-
-    api.items.push(apiItem);
-
-    $parent.add(apiItem.$element);
-  }
-}
-
-var api = {
-  items: [],
-  itemsById: {},
-  itemsByAppKey: {}
-};
-
-var $mainForm = $('#main-form');
-
-api.getItemByAppKey = function(key) {
-  return api.itemsByAppKey[key];
-};
-
-api.getItemById = function(key) {
-  return api.itemsById[key];
-};
-
-api.getItemsByType = function(type) {
-  return api.items.filter(function(item) {
-    return item.config.type === type;
-  });
-};
-
-processConfigItem(config, $mainForm);
-$mainForm.on('submit', submit);
-
-module.exports = api;
 customFn.call(api);