chicago
Version:
A front-end JavaScript library for user-interface developers.
96 lines (86 loc) • 3.66 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>#Chicago.events.resizestart</h1>
<ul class="breadcrumb">
<li><a href="../static/">Chicago.js Visual Tests</a></li>
<li class="active"><span>_c.events.resizestart</span></li>
</ul>
</header>
<article class="body">
<div class="row">
<div class="col-12-12">
<div class="panel panel-box">
<legend>Resize your browser's window to test:</legend>
<pre><code class="language-javascript">_c<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.target'</span><span class="token punctuation">).</span>on<span class="token punctuation">(</span><span class="token string">'resizestart'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>evt<span class="token punctuation">) {</span>
<span class="token comment" data-output>// ...</span>
<span class="token punctuation">});</span></code></pre>
</div>
</div>
</div>
</article>
</div>
<script src="js/jquery.js"></script>
<script src="../../dist/Chicago.js"></script>
<script>
;(function(_c, $, window, document) {
function objectAsString( object, depth ) {
var output = [];
for( var prop in object ) {
var len = output.length,
index = len - 1,
val = object[prop],
string = '\t'.repeat( depth ) + prop + ' <span class="token punctuation">:</span> ';
if( _c.utils.is.function( val ) ) {
continue;
}
if( _c.utils.is.string( val ) ) {
string += '<span class="token string">\'' + val + '\'</span><span class="token punctuation">,</span>';
} else if( _c.utils.is.boolean( val ) ) {
string += '<span class="token boolean">' + val + '</span><span class="token punctuation">,</span>';
} else if( _c.utils.is.object( val ) ) {
string += '<span class="token punctuation">{</span>\n' + objectAsString( val, ( depth + 1 ) ) + '\n' + '\t'.repeat( depth ) + '<span class="token punctuation">}</span><span class="token punctuation">,</span>';
} else if( _c.utils.is.numeric( val ) ) {
string += '<span class="token number">' + val + '</span><span class="token punctuation">,</span>';
} else if( _c.utils.is.null( val ) || _c.utils.is.undefined( val ) ) {
string += '<span class="token keyword">' + val + '</span><span class="token punctuation">,</span>';
} else {
string += '<span class="token keyword">' + Object.prototype.toString.call( val ) + '</span><span class="token punctuation">,</span>';
}
output.splice( index, 0, string );
}
return output.join('\n');
}
var timeout;
_c.$win.on('resizestart', function(evt) {
if( timeout ) {
clearTimeout(timeout);
}
var output = [
'evt : <span class="token punctuation">{</span>',
objectAsString( evt, 2 ),
'\t<span class="token punctuation">}</span>',
];
if( _c.$('[data-output]').hasClass('token') ) {
_c.$('[data-output]').removeClass('token comment');
}
_c.$('[data-output]').html(output.join('\n'));
});
_c.$win.on('resizeend', function(evt) {
timeout = setTimeout(function() {
_c.$('[data-output]').html('<span class="token comment">// ...</span>');
}, 5000);
});
})(Chicago, jQuery, window, document);
</script>
</body>
</html>