<!DOCTYPE html>
<html>
<head>
<link href="//cdn.jsdelivr.net/picnicss/5.1.0/plugins.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>Mag.JS</title>
</head>
<body>
<h1>Hello Mag.JS!</h1>
<a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
<hr/>
<div id="app">
<content></content>
</div>
<div class="hide templates">
<div id="login">
<h2>Login</h2>
<div class="message">
<button class="mainButton">Error occurred</button>
</div>
<form>
<input class="stack" name="username" placeholder="Name" />
<input class="stack" type="password" name="password" placeholder="Password" />
<button class="stack icon-paper-plane">
Submit
</button>
</form>
</div>
<div id="user">
<button>Logout</button>
Hello
<user></user>
</div>
</div>
<script src="//rawgit.com/magnumjs/mag.js/master/mag-latest.min.js"></script>
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.22.min.js"></script>
<script src="login.js"></script>
<script src="user.js"></script>
<script src="app.js"></script>
</body>
</html>
var app = {}
app.controller = function(props) {
// flow control
this.didload = function() {
mag.route.addRoute('', function() {
props.page = 'home'
});
mag.route.addRoute('user/:name', function(name) {
props.page = 'user'
props.username = name;
});
mag.route.start();
}
}
app.view = function(state, props) {
state.content = state.loggedIn ? mag.mods.user({
name: props.username,
onLogout: function() {
state.loggedIn = false;
}
}) : mag.mods.login({
onLogin: function(username) {
// go to new url
location.href = '#user/' + username
state.loggedIn = true;
}
});
}
mag.module("app", app)
.hide, li:empty {
display: none;
}
a { display: block;}
a:after {content:" \bb";}
#Mag.JS
## plunk boilerplate
//Mag module:
(function(namespace) {
var mod = {}
// default props to be over ridden
var props = {
onLogin: mag.noop,
loginService: function(u, p) {
return p && u;
}
}
mod.controller = function(props) {
this.username = '';
this.password = '';
this.message = null;
}
mod.view = function(state, props) {
state.form = {
button: {
_onClick: function() {
// get name & pass
// verify with service
if (props.loginService(state.username, state.password)) {
state.message = null;
props.onLogin(state.username);
} else {
// error
state.message = {
mainButton: {
_className: 'error'
}
}
}
return false
}
}
}
}
namespace.login = mag.create('login', mod, props);
})(mag.namespace('mods'));
//Mag module:
(function(namespace) {
var mod = {}
// default props to be over ridden
var props = {
name: '',
onLogout: mag.noop
}
mod.view = function(state, props) {
state.button = {
_onClick: function(){
props.onLogout(true);
}
}
state.user = props.name;
}
namespace.user = mag.create('user', mod, props);
})(mag.namespace('mods'));