WIP: Ractive

RACTIVE-README.md

@@ -0,0 +1,23 @@
+This is an effort to redo Planchette's pattern books to use Ractive, in whatever way feels appropriate. Aiming to replace the clunky use of Handlebars in `gulp server`.
+
+TO-DO
+turn template into partials
+get partials out into separate files
+get a header and footer working
+gulp watch has to work with live reload
+
+options for templating:
+
+1) Ractify / RequireJS loading
+
+- you can load from HTML files (using a plugin that reads them as text
+
+2) Gulp build process to replace scripts pointing at templates with inline templates
+
+- could replace specific script tags with their inlined templates (gulp-replace, see http://stackoverflow.com/questions/23820703/how-to-inject-content-of-css-file-into-html-in-gulp)
+
+- or could read through the partials folder and inline partials for all those files, with the ID of the script tag being the file name (minus the extension)
+
+3) Ractive components can now be loaded from .html files, so maybe that will work
+
+See (the bottom of) https://github.com/RactiveJS/Ractive/issues/366

gulpfile.js

@@ -36,6 +36,9 @@ gulp.task('javascripts', function() {
   gulp.src(['./src/javascripts/jquery-1.11.0.min.js', './src/javascripts/bootstrap.min.js', './src/javascripts/app.js'])
     .pipe(concat('main.js'))
     .pipe(gulp.dest('./build/javascripts'));
+
+  gulp.src(['./src/ractive.js', './src/pattern-book-data.js', './src/ractive-pattern-book.js'])
+    .pipe(gulp.dest('./build'));
 });
 
 gulp.task('templates', function() {
@@ -63,102 +66,3 @@ gulp.task('watch', ['default', 'server'], function() {
     server.changed(file.path);
   });
 });
-
-gulp.task('server', function(next) {
-    var fs = require('fs'),
-        path = require('path'),
-        cons = require('consolidate'),
-        Handlebars = require('handlebars'),
-        express = require('express'),
-        app = express(),
-        port = process.env.PORT || 8000;
-
-    // set app views
-    app.engine('html', cons.handlebars);
-    app.set('view engine', 'html');
-
-    // set app public directory & views
-    app.use(express.static(path.join(__dirname,'/build')));
-    app.set('views', path.join(__dirname,'/src'));
-
-    // Register partials
-    var partials = path.join(__dirname,"/src/partials/");
-    fs.readdirSync(partials).forEach(function (file) {
-        var source = fs.readFileSync(path.join(partials, file), "utf8"),
-            partial = /(.+)\.html/.exec(file).pop();
-        Handlebars.registerPartial(partial, source);
-    });
-
-    // Register helpers
-    var helpers = {
-        "foreach": function(arr,options) {
-            if(typeof arr==='string') {
-                return options.fn(arr);
-            }
-            if(options.inverse && (!arr || !arr.length)) {
-                return options.inverse(this);
-            } else if(!arr) {
-                return '';
-            }
-            return arr.map(function(item,index) {
-                item.$index = index;
-                item.$first = index === 0;
-                item.$last  = index === arr.length-1;
-                return options.fn(item);
-            }).join('');
-        },
-        "propertyListClassFromStatus": function(status) {
-            return status==="on the market" ? "onMarket" : (status==="under offer" ? "underOffer" : "propertyLet");
-        },
-        // from https://github.com/assemble/handlebars-helpers/blob/master/lib/helpers/helpers-strings.js
-        "lowercase": function(str) {
-            if(str && typeof str === "string") {
-                return str.toLowerCase();
-            }
-        },
-        // from https://github.com/assemble/handlebars-helpers/blob/master/lib/helpers/helpers-comparisons.js
-        "is": function (value, test, options) {
-            if (value === test) {
-                return options.fn(this);
-            } else {
-                return options.inverse(this);
-            }
-        },
-        // from https://github.com/assemble/handlebars-helpers/blob/master/lib/helpers/helpers-comparisons.js
-        "or": function (a, b, options) {
-            if (a || b) {
-                return options.fn(this);
-            } else {
-                return options.inverse(this);
-            }
-        },
-        // from https://github.com/assemble/handlebars-helpers/blob/master/lib/helpers/helpers-math.js
-        "add": function (value, addition) {
-            return value + addition;
-        },
-        "formatDate": function(datetime, formatString) {
-            // mutate the date into London timezone and then format it
-            return moment(datetime).tz('Europe/London').format(formatString);
-        }
-    };
-
-    for (var helper in helpers) {
-        if (helpers.hasOwnProperty(helper)) {
-            Handlebars.registerHelper(helper, helpers[helper]);
-        }
-    }
-
-    app.get('/pattern-book', function(req, res) {
-        fs.readFile('./src/pattern-book-data.json', function(err, data) {
-            try {
-                data = JSON.parse(data);
-                res.render('pattern-book', data);
-            } catch(ex) {
-                console.log(ex);
-                res.send('uh-oh! error parsing the JSON file, check your console');
-            }
-        });
-    });
-    app.listen(process.env.PORT || 8000, next);
-    console.log('listening on '+port+', why not visit /pattern-book');
-});

src/index.html

@@ -5,7 +5,6 @@
   </head>
   <body>
 
-
     <script src="javascripts/main.js"></script>
   </body>
 </html>

src/pattern-book-data.js

@@ -0,0 +1,91 @@
+var data = {
+    "name": "Jerry Philips",
+    "pets": ["Betty", "Berty", "Billy"],
+	"message":"I am a message!",
+	"error":"I am an error!",
+	"table": {
+    	"tableName": "Pets table",
+    	"buttonGroups": [
+    	    ["edit", "delete"],
+    	    ["add"]
+    	],
+    	"hasCheckboxColumn": true,
+    	"hasEditColumn": true,
+    	"tableHeaders": [
+    	    "Name", "Breed", "Weight"
+    	],
+    	"rows": [{
+        	"columns": ["Betty", "Poodle", "42kg"]
+    	}, {
+        	"columns": ["Berty", "Greyhound", "25kg"]
+    	}, {
+        	"columns": ["Billy", "French Bulldog", "12kg"]
+    	}]
+	},
+	"form": {
+        "title": "Edit form",
+        "action": "/save",
+        "submitLabel": "Save changes",
+        "itemType": "Pet",
+        "newItem": true,
+        "itemTitle": "Billy",
+		"hasKey": "true",
+        "buttonGroups": [
+			["back","save"]
+		],
+		"keyHeaders": [
+			"Weight (kg)","Weight (lb)"
+		],
+		"keyRows": [{
+			"columns": ["10kg", "22lb"]
+		}, {
+			"columns": ["20kg", "44lb"]
+		}, {
+			"columns": ["30kg", "66lb"]
+		}],
+		"formItems": [{
+			"type": "subheader",
+			"value": "Pet details:"
+		}, {
+			"required": "true",
+			"id": "name",
+			"type": "textInput",
+			"label": "Name",
+			"placeholder": "Name",
+			"value":"Billy"
+		}, {
+			"required": "true",
+			"id": "breed",
+			"type": "select",
+			"label": "Breed",
+			"placeholder": "Breed",
+            "values":["Poodle","Boxer","Greyhound","French Bulldog"]
+		}, {
+            "required": "true",
+			"id": "email",
+			"type": "emailInput",
+			"label": "Pet Email Address",
+			"placeholder": "This is the pet's email address",
+			"value":""
+		}, {
+			"type": "subheader",
+			"value": "Special pet details:"
+		}, {
+			"required": "true",
+			"id": "description",
+			"type": "textArea",
+			"label": "Pet Description",
+			"placeholder": "",
+			"value":""
+		}, {
+			"required": "true",
+			"id": "password",
+			"type": "passwordInput",
+			"label": "Pet Password",
+			"placeholder": "Enter a password for your pet",
+			"label2": "Confirm",
+			"placeholder2": "Enter the pet password again",
+			"value":""
+		}]
+	}
+};