chicago
Version:
A front-end JavaScript library for user-interface developers.
137 lines (128 loc) • 7.69 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.swipe</h1>
<ul class="breadcrumb">
<li><a href="../static/">Chicago.js Visual Tests</a></li>
<li class="active"><span>_c.events.swipe</span></li>
</ul>
</header>
<article class="body">
<div class="row">
<div class="col-6-12">
<div class="panel panel-box">
<legend>Swipe box to test:</legend>
<div class="preview">
<div class="box box-swipe"></div>
</div>
</div>
</div>
<div class="col-6-12">
<div class="panel panel-box">
<legend>'swipe{dir}' event output</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">'.box-swipe'</span><span class="token punctuation">).</span>on<span class="token punctuation">(</span><span class="token string">'swipeup'</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="2">// ...</span>
<span class="token punctuation">});</span>
_c<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.box-swipe'</span><span class="token punctuation">).</span>on<span class="token punctuation">(</span><span class="token string">'swipedown'</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="3">// ...</span>
<span class="token punctuation">});</span>
_c<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.box-swipe'</span><span class="token punctuation">).</span>on<span class="token punctuation">(</span><span class="token string">'swipeleft'</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="4">// ...</span>
<span class="token punctuation">});</span>
_c<span class="token punctuation">.</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.box-swipe'</span><span class="token punctuation">).</span>on<span class="token punctuation">(</span><span class="token string">'swiperight'</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="5">// ...</span>
<span class="token punctuation">});</span></code></pre>
<legend>'swipe' event output</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">'.box-swipe'</span><span class="token punctuation">).</span>on<span class="token punctuation">(</span><span class="token string">'swipe'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>evt<span class="token punctuation">,</span> dir<span class="token punctuation">) {</span>
<span class="token comment" data-output="1">// ...</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;
}
// console.log( prop, val );
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');
}
_c.$('.box-swipe').on('swipe', function(evt, dir) {
var output = [
'evt : <span class="token punctuation">{</span>',
objectAsString( evt, 2 ),
'\t<span class="token punctuation">},</span>',
'\tdir : <span class="token string">\'' + dir + '\'</span>',
];
if( _c.$('[data-output="1"]').hasClass('token') ) {
_c.$('[data-output="1"]').removeClass('token comment');
}
_c.$('[data-output="1"]').html(output.join('\n'));
});
_c.$('.box-swipe').on('swipeleft', function(e) {
_c.$('[data-output="2"], [data-output="3"], [data-output="5"]').html('<span class="token comment">// ...</span>');
if( _c.$('[data-output="4"]').hasClass('token') ) {
_c.$('[data-output="4"]').removeClass('token comment');
}
_c.$('[data-output="4"]').html('<span class="token comment">// Swiped Left...</span>');
});
_c.$('.box-swipe').on('swiperight', function(e) {
_c.$('[data-output="2"], [data-output="3"], [data-output="4"]').html('<span class="token comment">// ...</span>');
if( _c.$('[data-output="5"]').hasClass('token') ) {
_c.$('[data-output="5"]').removeClass('token comment');
}
_c.$('[data-output="5"]').html('<span class="token comment">// Swiped Right...</span>');
});
_c.$('.box-swipe').on('swipeup', function(e) {
_c.$('[data-output="4"], [data-output="3"], [data-output="5"]').html('<span class="token comment">// ...</span>');
if( _c.$('[data-output="2"]').hasClass('token') ) {
_c.$('[data-output="2"]').removeClass('token comment');
}
_c.$('[data-output="2"]').html('<span class="token comment">// Swiped Up...</span>');
});
_c.$('.box-swipe').on('swipedown', function(e) {
_c.$('[data-output="2"], [data-output="4"], [data-output="5"]').html('<span class="token comment">// ...</span>');
if( _c.$('[data-output="3"]').hasClass('token') ) {
_c.$('[data-output="3"]').removeClass('token comment');
}
_c.$('[data-output="3"]').html('<span class="token comment">// Swiped Down...</span>');
});
})(Chicago, jQuery, window, document);
</script>
</body>
</html>