diff --git a/gulpfile.js b/gulpfile.js index a51a25d..6409b2f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -16,7 +16,7 @@ gulp.task('clean', function(done) { }); gulp.task('browserify', ['clean'], function(done) { - return browserify('src/scripts/config-page.js', { debug: true }) + return browserify('src/scripts/config-page.js', { debug: false }) .transform(stringify(['.html', '.mustache'])) .bundle() .pipe(source('config-page.js')) diff --git a/index.js b/index.js index 7c7a202..885f275 100644 --- a/index.js +++ b/index.js @@ -51,20 +51,22 @@ function encodeDataUri(input) { return 'data:text/html;base64,' + encodeURIComponent(out.join('')); } -function Clay(config) { +/** + * @param {array} config - the Clay config + * @param {function} [customFn] - custom code to run from the config page. + * Will run with api as context + * @constructor + */ +function Clay(config, customFn) { this.config = config; - /** - * @type {{}} - * @private - */ - this._defaults = {}; + this.customFn = customFn || function() {}; } /** * Generate the Data URI used by the config Page with settings injected - * @param {string} clayData - the entire HTML page as a data URI + * @param {string} returnTo - used while developing on desktop. */ -Clay.prototype.generateUrl = function() { +Clay.prototype.generateUrl = function(returnTo) { var settings; try { settings = JSON.parse(localStorage.getItem('clay-settings')) || {}; @@ -74,6 +76,8 @@ Clay.prototype.generateUrl = function() { } // Show config page return encodeDataUri(configPageHtml + .replace('$$CUSTOM_FN$$', this.customFn.toString().replace(/^.*?\{/, '{')) + .replace('$$RETURN_TO$$', returnTo || 'pebblejs://close#') .replace('$$CONFIG$$', JSON.stringify(this.config)) .replace('$$SETTINGS$$', JSON.stringify(settings)) ); @@ -86,10 +90,7 @@ Clay.prototype.getSettings = function(response) { if (!settings) return {}; localStorage.setItem('clay-settings', JSON.stringify(settings)); -}; - -Clay.prototype.getDefaults = function() { - return this._defaults; + return settings; }; module.exports = Clay; diff --git a/src/config-page.html b/src/config-page.html index 79804ad..2419edd 100644 --- a/src/config-page.html +++ b/src/config-page.html @@ -6,13 +6,15 @@
- + diff --git a/src/scripts/config-page.js b/src/scripts/config-page.js index fc9f372..9b93d5f 100644 --- a/src/scripts/config-page.js +++ b/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('"', '"'), value: item.toString() - // .replace('"', '"') }; - }), - 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); diff --git a/src/scripts/lib/item-types.js b/src/scripts/lib/item-types.js index 4bea1fb..ae4ac50 100644 --- a/src/scripts/lib/item-types.js +++ b/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'), diff --git a/src/templates/components/color.mustache b/src/templates/components/color.mustache index 3eafa32..f6e5564 100644 --- a/src/templates/components/color.mustache +++ b/src/templates/components/color.mustache @@ -1,4 +1,4 @@ diff --git a/src/templates/components/footer.mustache b/src/templates/components/footer.mustache index a536c55..6c4787d 100644 --- a/src/templates/components/footer.mustache +++ b/src/templates/components/footer.mustache @@ -1,3 +1 @@ -
- {{&content}} -
+
diff --git a/src/templates/components/heading.mustache b/src/templates/components/heading.mustache index fb87890..3872b02 100644 --- a/src/templates/components/heading.mustache +++ b/src/templates/components/heading.mustache @@ -1,3 +1,3 @@
-

{{&content}}

+

diff --git a/src/templates/components/input.mustache b/src/templates/components/input.mustache index e7e441e..574a949 100644 --- a/src/templates/components/input.mustache +++ b/src/templates/components/input.mustache @@ -3,7 +3,6 @@
diff --git a/src/templates/components/select.mustache b/src/templates/components/select.mustache index ef26f2c..2e6e3ff 100644 --- a/src/templates/components/select.mustache +++ b/src/templates/components/select.mustache @@ -2,7 +2,7 @@ {{label}} diff --git a/src/templates/components/subheading.mustache b/src/templates/components/subheading.mustache index 573dff0..ec02c20 100644 --- a/src/templates/components/subheading.mustache +++ b/src/templates/components/subheading.mustache @@ -1,3 +1,3 @@
-

{{&content}}

+

diff --git a/src/templates/components/toggle.mustache b/src/templates/components/toggle.mustache index b59bd83..ba7f734 100644 --- a/src/templates/components/toggle.mustache +++ b/src/templates/components/toggle.mustache @@ -1,4 +1,4 @@