PhiLhoSoft/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    First application with Mithril

Starting with the code snippet in the front page of http://lhorie.github.io/mithril/
Extending it with a view-model, as explained in the blog articles.
To make it interesting, I stole the little demo shown in https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 (without the FRP part, here), starting with http://jsfiddle.net/staltz/8jFJH/48/ as base.
Shown live in http://plnkr.co/edit/e5dv97?p=preview

  
## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Playing with Mithril</title>

	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Playing with <a href="http://lhorie.github.io/mithril/">Mithril</a></h1>

	<div id="container"></div>

	<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.1.34/mithril.min.js"></script>
	<script src="script.js"></script>
</body>
</html>

## script.js
// Namespace
var usersModule = {};

// View-Model (usersModule state / data)
usersModule.viewModel =
{
	users: m.prop([]),
	sampleUsers: function ()
	{
		var sample = _.sample(usersModule.UserList.users(), 3);
		usersModule.viewModel.users(sample);
	},
	replaceUser: function (id)
	{
		var users = usersModule.viewModel.users();
		var idx = _.findIndex(users, 'id', id);
		// alert(id + " " + idx);
		if (idx >= 0)
		{
			// Might loop until we get a user of different id...
			users[idx] = _.sample(usersModule.UserList.users());
			usersModule.viewModel.users(users);
		}
	}
};

// Model (domain)
usersModule.UserList =
{
	users: m.prop([]),
	load: function (process)
	{
		// Idea taken from https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
		// Starting with http://jsfiddle.net/staltz/8jFJH/48/ as base
		var randomOffset = Math.floor(Math.random() * 5000);
		// Gets 100 GitHub users from a random offset
		m.request({ method: 'GET', url: "https://api.github.com/users?since=" + randomOffset })
			.then(usersModule.UserList.users).then(process);
	}
};

// Controller (initialized once)
usersModule.controller = function ()
{
	// Get the data
	usersModule.UserList.load(usersModule.viewModel.sampleUsers);

	return {
		refreshAll: function ()
		{
			usersModule.viewModel.sampleUsers();
		},
		refreshUser: function (user)
		{
			usersModule.viewModel.replaceUser(user.id);
		}
	}
};

// View (rendering the UI, on each data change)
usersModule.view = function (controller)
{
	return [
		m('.header',
		[
			m('h2', "Who to follow"),
			m('a.refresh[href="#"]', { onclick: controller.refreshAll }, "Refresh")
		]),
		m('ul.suggestions',
			usersModule.viewModel.users().map(function (user)
			{
				return [
					m('li',
					[
						// m('a.close[href="#"]', { onclick: m.withAttr('title', controller.close), title: user.id }, "x"),
						m('a.close[href="#"]', { onclick: controller.refreshUser.bind(this, user) }, "x"),
						m('img', { src: user.avatar_url + "&size=40", title: user.login + " (" + user.id + ")" }),
						m('a.username', { href: user.html_url }, user.login)
					])
				];
			})
		)
	];
};

// Initialize usersModule
m.module(document.getElementById("container"), usersModule);

## style.css
body
{
	font-family: sans-serif;
	padding: 10px;
}
h2
{
	font-weight: bold;
	display: inline-block;
	margin: 0;
	line-height: 18px;
}
#container a
{
	color: #88C;
	text-decoration: none;
}
.header
{
	background: #EEF;
	padding: 15px;
}
.refresh
{
	font-size: 80%;
	margin-left: 25px;
}
.suggestions
{
	border: 2px solid #EEF;
}
li
{
	padding: 5px;
	list-style-type: none;
}
li img
{
	width: 40px;
	height: 40px;
	border-radius: 20px;
}
.username, .close
{
	display: inline-block;
	position: relative;
	bottom: 15px;
}
.username
{
	left: 15px;
}
.close
{
	right: 15px;
}
#container .close /* override #container a */
{
	color: #F55;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Playing with Mithril</title>

	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<h1>Playing with <a href="http://lhorie.github.io/mithril/">Mithril</a></h1>

	<div id="container"></div>

	<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.1.34/mithril.min.js"></script>
	<script src="script.js"></script>
	</body>
	</html>
	// Namespace
	var usersModule = {};

	// View-Model (usersModule state / data)
	usersModule.viewModel =
	{
	users: m.prop([]),
	sampleUsers: function ()
	{
	var sample = _.sample(usersModule.UserList.users(), 3);
	usersModule.viewModel.users(sample);
	},
	replaceUser: function (id)
	{
	var users = usersModule.viewModel.users();
	var idx = _.findIndex(users, 'id', id);
	// alert(id + " " + idx);
	if (idx >= 0)
	{
	// Might loop until we get a user of different id...
	users[idx] = _.sample(usersModule.UserList.users());
	usersModule.viewModel.users(users);
	}
	}
	};

	// Model (domain)
	usersModule.UserList =
	{
	users: m.prop([]),
	load: function (process)
	{
	// Idea taken from https://gist.github.com/staltz/868e7e9bc2a7b8c1f754
	// Starting with http://jsfiddle.net/staltz/8jFJH/48/ as base
	var randomOffset = Math.floor(Math.random() * 5000);
	// Gets 100 GitHub users from a random offset
	m.request({ method: 'GET', url: "https://api.github.com/users?since=" + randomOffset })
	.then(usersModule.UserList.users).then(process);
	}
	};

	// Controller (initialized once)
	usersModule.controller = function ()
	{
	// Get the data
	usersModule.UserList.load(usersModule.viewModel.sampleUsers);

	return {
	refreshAll: function ()
	{
	usersModule.viewModel.sampleUsers();
	},
	refreshUser: function (user)
	{
	usersModule.viewModel.replaceUser(user.id);
	}
	}
	};

	// View (rendering the UI, on each data change)
	usersModule.view = function (controller)
	{
	return [
	m('.header',
	[
	m('h2', "Who to follow"),
	m('a.refresh[href="#"]', { onclick: controller.refreshAll }, "Refresh")
	]),
	m('ul.suggestions',
	usersModule.viewModel.users().map(function (user)
	{
	return [
	m('li',
	[
	// m('a.close[href="#"]', { onclick: m.withAttr('title', controller.close), title: user.id }, "x"),
	m('a.close[href="#"]', { onclick: controller.refreshUser.bind(this, user) }, "x"),
	m('img', { src: user.avatar_url + "&size=40", title: user.login + " (" + user.id + ")" }),
	m('a.username', { href: user.html_url }, user.login)
	])
	];
	})
	)
	];
	};

	// Initialize usersModule
	m.module(document.getElementById("container"), usersModule);
	body
	{
	font-family: sans-serif;
	padding: 10px;
	}
	h2
	{
	font-weight: bold;
	display: inline-block;
	margin: 0;
	line-height: 18px;
	}
	#container a
	{
	color: #88C;
	text-decoration: none;
	}
	.header
	{
	background: #EEF;
	padding: 15px;
	}
	.refresh
	{
	font-size: 80%;
	margin-left: 25px;
	}
	.suggestions
	{
	border: 2px solid #EEF;
	}
	li
	{
	padding: 5px;
	list-style-type: none;
	}
	li img
	{
	width: 40px;
	height: 40px;
	border-radius: 20px;
	}
	.username, .close
	{
	display: inline-block;
	position: relative;
	bottom: 15px;
	}
	.username
	{
	left: 15px;
	}
	.close
	{
	right: 15px;
	}
	#container .close /* override #container a */
	{
	color: #F55;
	}