diff --git a/dev/config.js b/dev/config.js index f9d1e42..8a51cb4 100644 --- a/dev/config.js +++ b/dev/config.js @@ -2,17 +2,46 @@ /* eslint-disable quotes */ module.exports = [ + { + "type": "heading", + "id": "main-heading", + "value": "My Cool App", + "size": 1 + }, + { + "type": "text", + "value": "By Keegan Lillo - Lillo.me" + }, { "type": "section", "items": [ { "type": "heading", - "id": "main-heading", - "value": "My Cool App" + "value": "Settings" }, { - "type": "footer", - "value": "By Keegan Lillo - Lillo.me" + "type": "input", + "app_key": "email", + "value": "", + "label": "Email", + "attributes": { + "placeholder": "eg: name@domain.com", + "limit": 10, + "required": "required", + type: "email" + } + }, + { + "type": "toggle", + "app_key": "like_stuff", + "label": "Enable Cool Stuff", + "value": false + }, + { + "type": "color", + "app_key": "background", + "value": "0xFF0000", + "label": "Background Color" } ] }, @@ -20,58 +49,25 @@ module.exports = [ "type": "section", "items": [ { - "type": "subheading", + "type": "heading", "value": "Settings" }, { - "type": "block", - "items": [ - { - "type": "input", - "app_key": "greeting", - "value": "Hello", - "label": "Greeting", - "attributes": { - "placeholder": "Enter a \"greeting\" >", - "limit": 10, - "required": "required" - } - }, - { - "type": "toggle", - "app_key": "like_stuff", - "label": "Enable Cool Stuff", - "value": true - }, - { - "id": "flavor", - "type": "select", - "app_key": "flavor", - "value": "grape", - "label": "Favorite Flavor", - "options": [ - { "label": "Berry", "value": "berry" }, - { "label": "Grape", "value": "grape" }, - { "label": "Banana", "value": "banana" } - ] - }, - { - "type": "color", - "app_key": "background", - "value": "0xFF0000", - "label": "Background Color" - } + "id": "flavor", + "type": "select", + "app_key": "flavor", + "value": "grape", + "label": "Favorite Flavor", + "options": [ + { "label": "Berry things", "value": "berry" }, + { "label": "Grape", "value": "grape" }, + { "label": "Banana", "value": "banana" } ] } ] }, { - "type": "section", - "items": [ - { - "type": "submit", - "value": "Save" - } - ] + "type": "submit", + "label": "Save" } ]; diff --git a/dev/dev.html b/dev/dev.html index b5f6387..cea3ed0 100644 --- a/dev/dev.html +++ b/dev/dev.html @@ -4,14 +4,11 @@ Pebble Clay Development Page -
- - diff --git a/dev/dev.js b/dev/dev.js index 2612208..97c4b1d 100644 --- a/dev/dev.js +++ b/dev/dev.js @@ -4,3 +4,14 @@ window.returnTo = '$$RETURN_TO$$'; window.clayConfig = require('./config.js'); window.claySettings = {}; window.customFn = require('./custom-fn.js'); + +var platform = window.navigator.userAgent.match('Android') ? 'android' : 'ios'; +document.documentElement.classList.add('platform-' + platform); + +window.expand = function(obj) { + obj.size = 5; +}; + +function unexpand(obj) { + obj.size = 1; +} diff --git a/dev/text.html b/dev/text.html new file mode 100644 index 0000000..6e2e3f2 --- /dev/null +++ b/dev/text.html @@ -0,0 +1,57 @@ + + + + Pebble Clay Development Page + + + + + + + diff --git a/gulpfile.js b/gulpfile.js index 0021387..98b48b7 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -10,6 +10,7 @@ var minifyInline = require('gulp-minify-inline'); var minifyHTML = require('gulp-minify-html'); var sass = require('gulp-sass'); var sourceMaps = require('gulp-sourcemaps'); +var autoprefixer = require('gulp-autoprefixer'); gulp.task('clean-js', function() { return del(['tmp/config-page.js']); @@ -31,6 +32,10 @@ gulp.task('sass', ['clean-sass'], function() { gulp.src('./src/styles/config-page.scss') .pipe(sourceMaps.init()) .pipe(sass().on('error', sass.logError)) + .pipe(autoprefixer({ + browsers: ['Android 4', 'iOS 8'], + cascade: false + })) .pipe(sourceMaps.write('./')) .pipe(gulp.dest('tmp')); }); diff --git a/index.js b/index.js index f9bda32..8ee7be3 100755 --- a/index.js +++ b/index.js @@ -1,6 +1,7 @@ 'use strict'; var configPageHtml = require('./tmp/config-page.html'); +//var errorPageHtml = require('./tmp/error-page.html'); function encodeDataUri(input) { if (window.btoa) { @@ -74,12 +75,20 @@ Clay.prototype.generateUrl = function(returnTo) { console.error(e); settings = {}; } + + var strings = { + customFn: this.customFn.toString().replace(/^.*?\{/, '{'), + returnTo: returnTo || 'pebblejs://close#', + config: JSON.stringify(this.config), + settings: JSON.stringify(settings) + }; + // 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)) + .replace('$$CUSTOM_FN$$', strings.customFn) + .replace('$$RETURN_TO$$', strings.returnTo) + .replace('$$CONFIG$$', strings.config) + .replace('$$SETTINGS$$', strings.settings) ); }; diff --git a/package.json b/package.json index efe3afd..1bef320 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "eslint": "^1.5.1", "eslint-config-pebble": "^1.2.0", "eslint-plugin-standard": "^1.3.1", + "gulp-autoprefixer": "^3.1.0", "gulp-sass": "^2.1.1", "gulp-sourcemaps": "^1.6.0" }, diff --git a/src/config-page.html b/src/config-page.html index 3349c98..63e641b 100755 --- a/src/config-page.html +++ b/src/config-page.html @@ -2,7 +2,6 @@ - diff --git a/src/scripts/config-page.js b/src/scripts/config-page.js index 9ef80d8..3344cec 100755 --- a/src/scripts/config-page.js +++ b/src/scripts/config-page.js @@ -60,15 +60,9 @@ function processConfigItem(item, $parent) { processConfigItem(item, $parent); }); } else if (item.type === 'section') { - processConfigItem( - item.items, - $parent.add(HTML('
')) - ); - } else if (item.type === 'block') { - processConfigItem( - item.items, - $parent.add(HTML('
')) - ); + var $container = HTML('
'); + $parent.add($container); + processConfigItem(item.items, $container); } else { console.debug('KEEGAN: itemType', item.type); var apiItem = {}; @@ -76,7 +70,8 @@ function processConfigItem(item, $parent) { var templateData = { label: '', options: [], - attributes: {} + attributes: {}, + size: 4 }; console.debug('KEEGAN: templateData', templateData); diff --git a/src/scripts/lib/items.js b/src/scripts/lib/items.js index ae96c67..5d9cee8 100755 --- a/src/scripts/lib/items.js +++ b/src/scripts/lib/items.js @@ -2,7 +2,7 @@ module.exports = { heading: require('./items/heading'), - subheading: require('./items/subheading'), + text: require('./items/text'), footer: require('./items/footer'), input: require('./items/input'), color: require('./items/color'), diff --git a/src/scripts/lib/items/color.js b/src/scripts/lib/items/color.js index 1c56496..b61cf2b 100644 --- a/src/scripts/lib/items/color.js +++ b/src/scripts/lib/items/color.js @@ -60,7 +60,7 @@ module.exports = { grid += '{{{label}}} -
- -
-
+ +
+
+
+
+
diff --git a/src/templates/items/heading.tpl b/src/templates/items/heading.tpl index 1df869e..932cdc1 100755 --- a/src/templates/items/heading.tpl +++ b/src/templates/items/heading.tpl @@ -1,3 +1,3 @@ -
-

+
+
diff --git a/src/templates/items/input.tpl b/src/templates/items/input.tpl index 62215df..42b2eca 100755 --- a/src/templates/items/input.tpl +++ b/src/templates/items/input.tpl @@ -1,9 +1,8 @@ -