Add cordova control, mobile first layout, etc

app.js

@@ -39,6 +39,10 @@ app.use(bodyParser.json());
 
 //	Static directory for our client-side JS
 app.use(express.static(path.join(__dirname, '/public')));
+if(serverConfig.staticPath) {
+	app.use(serverConfig.staticPath, express.static('public'));
+}
+
 
 //	Basic error handling
 //	TODO: make configurable
@@ -47,28 +51,45 @@ app.use(function(err, req, res, next){
 	res.status(500).send('Something broke!');
 });
 
-//	Create our miso app
-mvc(app, {
+var misoAppOptions = {
 	routeConfig: routeConfig,
 	throwUnmappedActions: true,
 	verbose: true
+}, exitWhenReady;
+
+//	Check for exit
+process.argv.forEach(function(val, index) {
+	if(val == "exitWhenReady") {
+		exitWhenReady = true;
+	}
 });
 
-//	Run the server
-var server = app.listen(serverConfig.port, function () {
-	var info = server.address(),
-		address = info.address;
+if(exitWhenReady) {
+	misoAppOptions.exitWhenReady = true;
+	misoAppOptions.forceBrowserify = true;
+}
 
-	if(address == "::") {
-		address = "localhost";
-	}
+//	Create our miso app
+mvc(app, misoAppOptions);
 
-	console.log('');
-	console.log('Miso is listening at http://%s:%s in %s mode', address, info.port, environment);
-	console.log('');
+//	Either wait for misoready then exit or run the server
+if(!misoAppOptions.exitWhenReady) {
+	//	Run the server
+	var server = app.listen(serverConfig.port, function () {
+		var info = server.address(),
+			address = info.address;
 
-	//	For dev-eyes only
-	if(environment !== 'production') {
-		reload(server, app);
-	}
-});
+		if(address == "::") {
+			address = "localhost";
+		}
+
+		console.log('');
+		console.log('Miso is listening at http://%s:%s in %s mode', address, info.port, environment);
+		console.log('');
+
+		//	For dev-eyes only
+		if(environment !== 'production') {
+			reload(server, app);
+		}
+	});		
+}

bin/miso.bin.js

@@ -139,6 +139,13 @@ try {
 					"",
 					"Will create a new project in the 'myapp' directory, (as long as it is empty)"
 				],
+				'c': [
+					"Compiles miso.js and exits, optionally specify an environemnt for the config, for example:",
+					"",
+					"  " + name + " -c development",
+					"",
+					"Will compile miso.js for the project in the current directory"
+				],
 				'i': [
 					"Installs a miso package, for example:",
 					"",
@@ -264,6 +271,18 @@ try {
 			}
 		}
 
+
+	} else if(argv.c){
+		var env = argv.c !== "true"?
+			argv.c:
+			environment;
+
+		npm.load(pjson, function (err) {
+			process.env.NODE_ENV = env;
+			npm.commands.run([env], function(){
+				print("Miso run completed");
+			});
+		});
 	} else {
 		//	Show the help screen
 		var helpText = [

cfg/routes.json

@@ -1,5 +1,7 @@
 {
 	"/": { "method": "get", "name": "home", "action": "index" },
 	"/user/:user_id": { "method": "get", "name": "user", "action": "edit" },
-	"/login": { "method": "get", "name": "login", "action": "index" }
+	"/login": { "method": "get", "name": "login", "action": "index" },
+	"/mobilehome": { "method": "get", "name": "mobilehome", "action": "index" },
+	"/mobiletest": { "method": "get", "name": "mobilehome", "action": "test" }
 }

cfg/server.development.json

@@ -4,6 +4,7 @@
 	"sourceMap": true,
 	"pretty": true,
 	"reload": true,
-	"layout": "../mvc/layout_plain.js",
-	"api": ["flatfiledb", "session", "authentication"]
+	"layout": "../mvc/layout_mobilefirst.js",
+	"layoutComponents": ["mvc/layout.header.js", "mvc/layout.nav.js"],
+	"api": ["flatfiledb", "session", "authentication", "flickr"]
 }

cfg/server.json

@@ -14,9 +14,10 @@
 	"layout": "../mvc/layout_miso.js",
 	"apiPath": "/api",
 	"apiClientPath": "",
+	"COMMENT_apiClientPath": "http://192.168.43.50:6476",
 	"cordova": false,
 	"COMMENT_api": "mongoose",
-	"api": ["flatfiledb", "session", "authentication"],
+	"api": ["flatfiledb", "session", "authentication", "instagram"],
 	"minify": true,
 	"sourceMap": true,
 	"pretty": false

modules/api/api.readme.md

@@ -2,4 +2,11 @@
 
 Place any custom api's here - you can extend existing apis or write your own. For detailed instructions and examples, see:
 
-https://github.com/jsguy/misojs/wiki/Api
+https://github.com/jsguy/misojs/wiki/Api
+
+NOTE: You must create a directory in /modules/api/[APINAME], and then name your file [APINAME].api.js for it to work.
+
+Eg:
+
+Directory: /modules/api/instagram
+API file:  /modules/api/instagram/instagram.api.js

modules/api/instagram/instagram.api.js

@@ -0,0 +1,107 @@
+/*
+	Instagram signin code
+
+*/
+
+
+
+
+//	Endpoint api to make http requests via instagram
+var request = require('request'),
+	miso = require('../../../modules/miso.util.js'),
+	ig = require('instagram-node').instagram();
+
+//	"instagram": {
+//		"clientId": "894a72a48ae849d8ba843720e8240f52",
+//		"clientSecret": "35548e4fc9784c0cad421539d3fbd1af"
+//	},
+
+
+// Every call to `ig.use()` overrides the `client_id/client_secret`
+// or `access_token` previously entered if they exist.
+//	TODO: Grab from serverconfig
+
+var config = {
+	client_id: '894a72a48ae849d8ba843720e8240f52',
+    client_secret: '35548e4fc9784c0cad421539d3fbd1af',
+    redirect_url: 'http://misojs.com/instagram',
+    //	Go to the following URL to get a code:
+	//	https://api.instagram.com/oauth/authorize/?client_id=894a72a48ae849d8ba843720e8240f52&redirect_uri=http://misojs.com/instagram&response_type=code&scope=basic+public_content+follower_list+comments+relationships+likes
+
+    code: '5de4a03b3d744a1389fb70747ce727d9',
+	//	My access token
+	access_token: '36445530.894a72a.b5ea511cc2354ccc81068e2b8e2dd884'
+};
+
+
+//	https://api.instagram.com/oauth/authorize/?client_id=894a72a48ae849d8ba843720e8240f52&redirect_uri=http://misojs.com/instagram&response_type=code
+//	yielded: 4706cfa887bd4beda5c97d7700c34c34
+
+//ig.use({ access_token: config.access_token});
+ig.use({
+	client_id: config.client_id,
+	client_secret: config.client_secret
+});
+
+
+
+//	Ref: http://stackoverflow.com/a/30608596
+/*
+request.post(
+	{
+		form: {
+			client_id: config.client_id,
+			client_secret: config.client_secret,
+			grant_type: 'authorization_code',
+			redirect_uri: config.redirect_url,
+			code: config.code
+		},
+	    url: 'https://api.instagram.com/oauth/access_token'
+	},
+	function (err, response, body) {
+		if (err) {
+			console.log("error in Post", err)
+		}else{
+			console.log('it worked', JSON.parse(body))
+		}
+	}
+);
+*/
+
+
+module.exports = function(utils){
+	return {
+		tag: function(cb, err, args){
+			args = args || {};
+			//var url = "https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=code";
+			// //	Add parameters
+			// url += miso.each(args, function(value, key){
+			// 	return "&" + key + "=" + value;
+			// });
+
+			// request(url, function (error, response, body) {
+			// 	if (!error && response.statusCode == 200) {
+			// 		cb(jsonParser(body));
+			// 	} else {
+			// 		err(error);
+			// 	}
+			// });
+
+			ig.use({ access_token: config.access_token});
+
+			//console.log('tag', args.tag, config.access_token);
+
+			//ig.tag_search(args.tag, function(err, result, remaining, limit) {
+
+			//ig.tag_media_recent('tag', [options,] function(err, medias, pagination, remaining, limit) {});
+
+
+			ig.tag_media_recent(args.tag, {min_id: 0, max_id: 999999999999}, function(err, medias, pagination, remaining, limit) {
+				console.log('result', arguments);
+				cb(medias);
+			});
+
+
+		}
+	};
+};

mvc/layout.header.js

@@ -0,0 +1,37 @@
+//	Header MVC
+var headerMVC = {
+	models: {
+		header: function(){
+			var me = this;
+			me.text = m.p("Header");
+			me.isMenuShown = m.p(false);
+			me.toggleMenu = function(){
+				me.isMenuShown(!me.isMenuShown());
+				var el = document.body;
+				el.className = "";
+				if(me.isMenuShown()) {
+					el.className = "menu-active";
+				}
+			};
+		}
+	},
+	controller: function() {
+		//	Expose the header model
+		misoGlobal.header = new headerMVC.models.header();
+		return {model: misoGlobal.header};
+	},
+	view: function(ctrl) {
+		var o = ctrl.model;
+		with(sugartags){
+			return m("div", [
+				SPAN({className: "button-back"}, I({className: "fa fa-chevron-left"})),
+				SPAN(o.text()),
+  				A({href: "#", class: "button-menu", onclick: o.toggleMenu},
+  					SPAN(I({className: "fa fa-bars"}))
+  				)
+			]);
+		}
+	}
+};
+
+m.mount(document.getElementsByClassName("miso-header")[0], headerMVC);

mvc/layout.nav.js

@@ -0,0 +1,47 @@
+//	Nav MVC
+var navMVC = {
+	models: {
+		nav: function(){
+			var me = this;
+			//	Access the header model
+			me.header = misoGlobal.header;
+			me.items = [
+				{href: "/mobilehome", text: "Home", icon: "home"},
+				{href: "/mobiletest", text: "Test", icon: "hand-spock-o"}
+			];
+			me.clickLink = function(link){
+				return function(e){
+					e.preventDefault();
+					me.header.toggleMenu();
+					m.route(link.href);
+				}
+			}
+		}
+	},
+	controller: function() {
+		//	Expose the model
+		misoGlobal.nav = new navMVC.models.nav();
+		return {model: misoGlobal.nav};
+	},
+	view: function(ctrl) {
+		var o = ctrl.model;
+		with(sugartags){
+			return DIV([
+				UL(
+					o.items.map(function(link, idx) {
+						return LI(
+							A({href: link.href, class: "nav-link", config: m.route, onclick: o.clickLink(link)},
+  								SPAN([
+  									I({className: "fa fa-" + link.icon}),
+  									SPAN(link.text)
+  								])
+  							)
+						);
+					})
+				)
+			]);
+		}
+	}
+};
+
+m.mount(document.getElementsByClassName("miso-nav")[0], navMVC);

mvc/layout_miso.js

@@ -58,6 +58,7 @@ module.exports.view = function(ctrl){
 			m.trust("<!doctype html>"),
 			HTML([
 				HEAD([
+					LINK({href: '/css/reset.css', rel:'stylesheet'}),
 					LINK({href: '/css/style.css', rel:'stylesheet'}),
 					//	Add in the misoGlobal object...
 					SCRIPT("var misoGlobal = "+(ctrl.misoGlobal? JSON.stringify(ctrl.misoGlobal): {})+";")

mvc/layout_mobilefirst.js

@@ -0,0 +1,31 @@
+var m = require('mithril'),
+	sugartags = require('mithril.sugartags')(m),
+	authentication = require('../system/api/authentication/api.server.js')(m);
+
+//	The layout is always ONLY rendered server side
+module.exports.view = function(ctrl){
+	with(sugartags) {
+		return [
+			m.trust("<!DOCTYPE html>"),
+			HTML([
+				HEAD([
+					TITLE("Miso app"),
+					META({name: "viewport", content: "width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"}),
+					META({charset: "utf-8"}),
+					LINK({href: '/css/reset.css', rel:'stylesheet'})
+					,LINK({href: '/css/layout.css', rel:'stylesheet'})
+					,LINK({href: '/css/home.css', rel:'stylesheet'})
+					,LINK({href: '/external/font-awesome/css/font-awesome.css', rel:'stylesheet'})
+				]),
+				BODY([
+					SECTION({className: "miso-header"}),
+					SECTION({className: "miso-nav"}),
+					SECTION({id: ctrl.misoAttachmentNode}, ctrl.content),
+					SECTION({className: "miso-footer"}),
+					SCRIPT({src: '/miso.js'}),
+					(ctrl.reload? SCRIPT({src: '/reload.js'}): "")
+				])
+			])
+		];
+	}
+};