<!DOCTYPE html>
<html>
<head>
<link href="//cdn.jsdelivr.net/picnicss/5.1.0/picnic.min.css" rel="stylesheet" />
<link href="//cdn.jsdelivr.net/picnicss/5.1.0/plugins.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello Mag.JS!</h1>
<a target="_blank" href="https://github.com/magnumjs/mag.js">GitHub</a>
<hr/>
<div class="container content">
<div id="app">
<h2>Modal</h2>
<label for="modal_1" type="button" class="btn btn-primary pull-right spacing-top button">Open</label>
<i class="message"><name></name></i>
<modalme></modalme>
</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="data-service.js"></script>
<script src="modal.js"></script>
<script src="app.js"></script>
</body>
</html>
//Default props with AppState:
var appProps = {
modal: data,
isVisible: false
};
//App bootstrap:
mag.module('app', {
controller: function(props) {
//promise
this.prom = mag.template('modal.html')
.then((node) => mag(node, Modal));
this.button = {
_onClick: () => {
//Run Modal:
this.modalme = this.prom({
data: data,
onSave: (message) => {
this.message = message;
}
})
// change modal state to visible
props.modal.toggleVisiblity();
}
}
}
}, appProps);
//Modal module definition:
var Modal = {
controller: function(props) {
this.text = '';
},
view: function(state, props) {
var isVisible = props.data.modal.isVisible;
state.modal_1 = {
_checked: typeof isVisible != 'undefined' ? isVisible : null
}
state.close = state.button = {
_onClick: props.data.toggleVisiblity
}
state.a = {
_onClick: function() {
props.onSave({
name: state.text
});
state.text = '';
props.data.toggleVisiblity();
}
}
}
};
<div id="modal">
<div class="modal">
<input id="modal_1" type="checkbox" />
<label for="modal_1" class="overlay"></label>
<article>
<header>
<h3>New Task</h3>
<label for="modal_1" class="close">×</label>
</header>
<section class="content">
<input name="text" class="field" autocomplete="off" />
</section>
<footer>
<a class="button" href="#">Save</a>
<label for="modal_1" class="button dangerous">
Close
</label>
</footer>
</article>
</div>
</div>
var data = {
modal: {
isVisible: false
},
toggleVisiblity: function(changeTo) {
data.modal.isVisible = !data.modal.isVisible;
}
}