chicago
Version:
A front-end JavaScript library for user-interface developers.
223 lines (210 loc) • 8.79 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chicago Test</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/prism.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main">
<header class="header">
<h1>#Modal</h1>
<ul class="breadcrumb">
<li><a href="../static/">Chicago.js Visual Tests</a></li>
<li class="active"><span>Modal</span></li>
</ul>
</header>
<article class="body">
<div class="row">
<div class="col-6-12">
<div class="panel panel-box">
<div class="form form-stacked">
<legend>Set Variables</legend>
<div class="form-row">
<label class="form-label">Modal ID</label>
<div class="form-controls">
<input type="text" id="modal-id" value="">
</div>
</div>
<div class="form-row">
<div class="form-controls">
<label class="form-checkbox">
<input type="checkbox" name="modal-close" id="modal-close" value="flip-horizontal" checked><span class="form-checkbox-check"></span>
</label> Include close button
</div>
</div>
<div class="form-row">
<label class="form-label">Modal Title</label>
<div class="form-controls">
<input type="text" id="modal-title" value="Will display in the modal header">
</div>
</div>
<div class="form-row">
<label class="form-label">Modal Body Content HTML</label>
<div class="form-controls">
<textarea class="textarea-html" id="modal-content"><p>This is the content that will appear in the body of the modal</p></textarea>
</div>
</div>
<div class="form-row">
<label class="form-label">Modal Footer HTML</label>
<div class="form-controls">
<textarea class="textarea-html" id="modal-footer"><button class="button button-primary">Do Something</button></textarea>
</div>
</div>
<div class="form-row">
<label class="form-label">Transition</label>
<div class="form-controls">
<div class="row">
<div class="col-6-12">
<label>
<span class="form-radio">
<input type="radio" name="modal-transition" value="drop" checked><span class="form-radio-check"></span>
</span> Drop (default)
</label>
</div>
<div class="col-6-12">
<label>
<span class="form-radio">
<input type="radio" name="modal-transition" value="slide-right"><span class="form-radio-check"></span>
</span> Slide Right
</label>
</div>
<div class="col-6-12">
<label>
<span class="form-radio">
<input type="radio" name="modal-transition" value="scale"><span class="form-radio-check"></span>
</span> Scale
</label>
</div>
<div class="col-6-12">
<label>
<span class="form-radio">
<input type="radio" name="modal-transition" value="slide-left"><span class="form-radio-check"></span>
</span> Slide Left
</label>
</div>
<div class="col-6-12">
<label>
<span class="form-radio">
<input type="radio" name="modal-transition" value="fall"><span class="form-radio-check"></span>
</span> Fall
</label>
</div>
<div class="col-6-12">
<label>
<span class="form-radio">
<input type="radio" name="modal-transition" value="flip-horizontal"><span class="form-radio-check"></span>
</span> Flip (Horizontal)
</label>
</div>
<div class="col-6-12"></div>
<div class="col-6-12">
<label>
<span class="form-radio">
<input type="radio" name="modal-transition" value="flip-vertical"><span class="form-radio-check"></span>
</span> Flip (Vertical)
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6-12">
<div class="panel panel-box">
<legend>JavaScript (example):</legend>
<pre><code class="language-javascript"><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span>_c<span class="token punctuation">) {</span>
<span class="token comment">// Create modal module</span>
<span class="token keyword">var modal</span> <span class="token operator">=</span> _c.create<span class="token punctuation">.</span><span class="token function">modal</span><span class="token punctuation">({</span>
id <span class="token punctuation">:</span> <span class="token string">'<span data-value="id"></span>'</span><span class="token punctuation">,</span>
close <span class="token punctuation">:</span> <span class="token boolean"><span data-value="close"></span></span><span class="token punctuation">,</span>
title <span class="token punctuation">:</span> <span class="token string">'<span data-value="title"></span>'</span><span class="token punctuation">,</span>
content <span class="token punctuation">:</span> <span class="token string">'<span data-value="content"></span>'</span><span class="token punctuation">,</span>
footer <span class="token punctuation">:</span> <span class="token string">'<span data-value="footer"></span>'</span><span class="token punctuation">,</span>
transition <span class="token punctuation">:</span> <span class="token string">'<span data-value="transition"></span>'</span>
<span class="token punctuation">});</span>
<span class="token comment">// Do something with it...</span>
modal<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">();</span>
<span class="token punctuation">})(</span>Chicago<span class="token punctuation">);</span></code></pre>
<legend>Run:</legend>
<footer class="form-row form-footer">
<div class="form-controls">
<button class="button button-primary" id="show">Show Modal</button>
</div>
</footer>
</div>
</div>
</div>
</article>
</div>
<script src="js/jquery.js"></script>
<script src="../../dist/Chicago.js"></script>
<script src="../../dist/modules/modal.js"></script>
<script>
;(function(_c, win, doc) {
function htmlify(string) {
return string.replace( /</g, '<' ).replace( />/g, '>' );
}
var selectors = ['id', 'title', 'content', 'footer'];
for( var i = 0; i < selectors.length; i++ ) {
var selector = selectors[i],
id = '#modal-' + selector,
data = '[data-value="' + selector + '"]',
val = htmlify( _c.$(id).val() );
_c.$(data).html(val);
_c.$(id).on('keyup blur', function() {
var _val = htmlify( _c.$(this).val() ),
_selector = _c.$(this).attr('id').replace('modal-', '');
if( _selector === 'id' ) {
_val = _c.utils.stringToSlug( _val );
}
_c.$('[data-value="' + _selector + '"]').html(_val);
});
}
// console.log(String(_c.$('#modal-close').is(':checked')));
_c.$('[data-value="close"]').html(String(_c.$('#modal-close').is(':checked')));
_c.$('#modal-close').on('change', function() {
_c.$('[data-value="close"]').html(String(_c.$(this).is(':checked')));
});
var radioVal = _c.$('[name="modal-transition"]').val();
radioVal = radioVal == 'drop' ? '' : radioVal;
_c.$('[data-value="transition"]').html(radioVal);
_c.$('[name="modal-transition"]').on('change', function() {
if( _c.$(this).is(':checked') ) {
radioVal = _c.$(this).val();
radioVal = radioVal == 'drop' ? '' : radioVal;
_c.$('[data-value="transition"]').html(radioVal);
}
});
_c.$('.form-radio-check, .form-checkbox-check').on('click focus', function() {
_c.$(this).prev('input').prop('checked', 'checked');
_c.$(this).prev('input').trigger('change');
});
_c.$('#show').on('click', function() {
var title = _c.$('#modal-title').val(),
content = _c.$('#modal-content').val(),
footer = _c.$('#modal-footer').val(),
transition = _c.$('[name="modal-transition"]:checked').val();
var modal = _c.create.modal({
id : 'my-modal',
close : _c.$('#modal-close').is(':checked'),
title : title,
content : content,
footer : footer,
transition : transition,
});
modal.one('didhide', function() {
modal.destroy();
});
modal.show();
});
// var div = doc.createElement( 'div' );
// console.log(div.style);
// var prefixed = _c.browser.getPrefix( 'transform' );
})(Chicago, window, document);
</script>
</body>
</html>