<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.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 id="app">
<h1>App</h1>
<button>Open modal</button>
<modal></modal>
</div>
<div class="template hide">
<div id="modal">
<div class="modal">
<h3>My Modal</h3>
<div class="body">
<p>This is the modal's body.</p>
</div>
<button>Close modal</button>
</div>
</div>
</div>
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.23.9.min.js"></script>
<script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.22.min.js"></script>
<script src="modal-mod.js"></script>
<script src="app-mod.js"></script>
<script src="app-init.js"></script>
</body>
</html>
// initialize mag module reference
mag.mods.demo.parent();
.hide {
display: none;
}
body {
min-height: 100vh;
align-items: center;
}
.app {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 0;
}
h1,
h3 {
text-align: center;
margin: 0 0 20px 0;
}
.modal {
width: 200px;
padding: 20px;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
margin: -70px 0 0 -120px;
border: 1px solid #ccc;
background: white;
}
button {
display: block;
margin: 0 auto;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
background: white;
color: #0066CC;
font-weight: bold;
font-size: 14px;
line-height: 20px;
}
/* Animation */
div.container.fadeIn {
opacity: 1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
div.container.fadeOut {
opacity: 0;
transform: scale(0.7);
transition: all 0.2s;
}
.modal-anim-enter {
opacity: 0.00;
transform: scale(0.7);
transition: all 0.2s;
}
.modal-anim-enter.modal-anim-enter-active {
opacity: 1;
transform: scale(1);
}
.modal-anim-leave {
opacity: 1;
transform: scale(1);
transition: all 0.2s;
}
.modal-anim-leave.modal-anim-leave-active {
opacity: 0.00;
transform: scale(0.7);
}
#Mag.JS Modular namespacing
Reusable container components
FROM:
https://tryolabs.com/blog/2015/04/13/a-reusable-modal-component-in-react/
Best practice in creating objects
1. always have one global top level namespace
e.g. var MyCoolApp = MyCoolApp || {};
2. That is included on every page
3.All sub modules are based on that
But they use local vars and return in functions
4. Always have a top parent moduel container
5. components are reusable within modules
(function(namespace) {
var dprops = {};
namespace.modal = function(id, ComposedComponent, oprops) {
var composed = mag.create(id, ComposedComponent, oprops);
var removing = false;
var mod = {
controller: function(props) {
var transitionName = props.transitionName;
this.willload = function() {
this.container = {
_className: {
'fadeIn': true
}
}
}
},
view: function(state, props) {
if (props.isOpen) {
state.container = {
_className: {
'fadeOut': false,
'fadeIn': true
}
};
state.div = composed(props)
} else {
if (removing || !state.div) return;
removing = true;
state.container = {
_className: {
'fadeOut': true,
'fadeIn': false
}
};
setTimeout(function() {
state.div = null;
removing = false;
}, 200);
}
}
}
//Stub dyna node for parent
var ele = document.createElement('div');
var clone = ele.cloneNode();
clone.className = 'container fadeOut';
ele.appendChild(clone);
var par = mag.create(ele, mod, dprops);
return par;
};
})(mag.namespace('mods.demo'));
(function(namespace) {
var mod = {}
var Modal = mag.mods.demo.modal('modal', {
controller: function(props) {
this.button = {
_onClick: function() {
props.closeModalHandler();
}
}
}
});
// default props to be over ridden
var dprops = {
openModal: function() {
dprops.isModalOpen = true;
},
closeModal: function() {
dprops.isModalOpen = false;
namespace.parent().draw();
},
isModalOpen: false
}
mod.controller = function(props) {
this.button = {
_onClick: function() {
props.openModal();
}
}
}
mod.view = function(state, props) {
state.modal = Modal({
isOpen: props.isModalOpen,
transitionName: 'modal-anim',
closeModalHandler: props.closeModal
});
}
namespace.parent = mag.create('app', mod, dprops);
})(mag.namespace('mods.demo'));