diff --git a/dev/config.js b/dev/config.js
new file mode 100644
index 0000000..4f3bbf6
--- /dev/null
+++ b/dev/config.js
@@ -0,0 +1,77 @@
+'use strict';
+/* eslint-disable quotes */
+
+module.exports = [
+ {
+ "type": "section",
+ "items": [
+ {
+ "type": "heading",
+ "id": "main-heading",
+ "value": "My Cool App"
+ },
+ {
+ "type": "footer",
+ "value": "By Keegan Lillo - Lillo.me"
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "items": [
+ {
+ "type": "subheading",
+ "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"
+ }
+ ]
+ }
+ ]
+ },
+ {
+ "type": "section",
+ "items": [
+ {
+ "type": "submit",
+ "value": "Save"
+ }
+ ]
+ }
+];
diff --git a/dev/custom-fn.js b/dev/custom-fn.js
new file mode 100644
index 0000000..3658764
--- /dev/null
+++ b/dev/custom-fn.js
@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = function() {
+ console.debug('custom fn worked');
+};
diff --git a/dev/dev.html b/dev/dev.html
new file mode 100644
index 0000000..6e10636
--- /dev/null
+++ b/dev/dev.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Pebble Clay Development Page
+
+
+
+
+
+
+
+
+
diff --git a/dev/dev.js b/dev/dev.js
new file mode 100644
index 0000000..2612208
--- /dev/null
+++ b/dev/dev.js
@@ -0,0 +1,6 @@
+'use strict';
+
+window.returnTo = '$$RETURN_TO$$';
+window.clayConfig = require('./config.js');
+window.claySettings = {};
+window.customFn = require('./custom-fn.js');
diff --git a/gulpfile.js b/gulpfile.js
index 83fe187..21861b7 100755
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -8,14 +8,14 @@ var del = require('del');
var inline = require('gulp-inline');
var minifyInline = require('gulp-minify-inline');
var minifyHTML = require('gulp-minify-html');
+var sass = require('gulp-sass');
+var sourceMaps = require('gulp-sourcemaps');
-gulp.task('clean', function(done) {
- del(['dist', 'tmp']).then(function() {
- done();
- });
+gulp.task('clean-js', function() {
+ return del(['tmp/config-page.js']);
});
-gulp.task('browserify', ['clean'], function() {
+gulp.task('js', ['clean-js'], function() {
return browserify('src/scripts/config-page.js', { debug: false })
.transform(stringify(['.html', '.mustache']))
.bundle()
@@ -23,7 +23,18 @@ gulp.task('browserify', ['clean'], function() {
.pipe(gulp.dest('./tmp/'));
});
-gulp.task('inlineHtml', ['clean', 'browserify'], function() {
+gulp.task('clean-sass', function() {
+ return del(['tmp/config-page.scss']);
+});
+gulp.task('sass', ['clean-sass'], function() {
+ gulp.src('./src/styles/config-page.scss')
+ .pipe(sourceMaps.init())
+ .pipe(sass().on('error', sass.logError))
+ .pipe(sourceMaps.write('./'))
+ .pipe(gulp.dest('tmp'));
+});
+
+gulp.task('inlineHtml', ['js', 'sass'], function() {
return gulp.src('src/config-page.html')
.pipe(inline())
.pipe(minifyInline({
@@ -44,3 +55,14 @@ gulp.task('clay', ['inlineHtml'], function() {
});
gulp.task('default', ['clay']);
+
+gulp.task('dev', ['js', 'sass'], function() {
+
+ gulp.watch('./src/styles/', ['sass']);
+ gulp.watch('./src/scripts/', ['js']);
+
+ return browserify('dev/dev.js', { debug: true })
+ .bundle()
+ .pipe(source('dev.js'))
+ .pipe(gulp.dest('./tmp/'));
+});
diff --git a/package.json b/package.json
old mode 100755
new mode 100644
index 6dbb3f8..58b84d0
--- a/package.json
+++ b/package.json
@@ -27,7 +27,9 @@
"devDependencies": {
"eslint": "^1.5.1",
"eslint-config-pebble": "^1.2.0",
- "eslint-plugin-standard": "^1.3.1"
+ "eslint-plugin-standard": "^1.3.1",
+ "gulp-sass": "^2.1.1",
+ "gulp-sourcemaps": "^1.6.0"
},
"dependencies": {
"browserify": "^11.2.0",
diff --git a/pebble-clay-example/clay.json b/pebble-clay-example/clay.json
new file mode 100644
index 0000000..684cafe
--- /dev/null
+++ b/pebble-clay-example/clay.json
@@ -0,0 +1,39 @@
+[
+ {
+ "type": "static_title",
+ "text": "My Cool Example App"
+ },
+ {
+ "type": "static_heading1",
+ "text": "By Keegan Lillo - Lillo.me"
+ },
+ [
+ {
+ "type": "input_text",
+ "app_key": "greeting",
+ "default": "Hello",
+ "label": "Greeting",
+ "attributes": {
+ "placeholder": "Enter a greeting",
+ "limit": 10,
+ "required": true
+ }
+ },
+ {
+ "type": "input_select",
+ "app_key": "flavor",
+ "default": "grape",
+ "options": [
+ { "label": "Berry", "value": "berry" },
+ { "label": "Grape", "value": "grape" },
+ { "label": "Banana", "value": "banana" }
+ ]
+ },
+ {
+ "type": "input_color",
+ "app_key": "background",
+ "default": "0xFF0000",
+ "label": "Background Color"
+ }
+ ]
+]
diff --git a/src/config-page.html b/src/config-page.html
index 2419edd..22ad39c 100755
--- a/src/config-page.html
+++ b/src/config-page.html
@@ -3,7 +3,7 @@
-
+