chicago
Version:
A front-end JavaScript library for user-interface developers.
111 lines (100 loc) • 7.84 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.scrollend</h1>
<ul class="breadcrumb">
<li><a href="../static/">Chicago.js Visual Tests</a></li>
<li class="active"><span>_c.events.scrollend</span></li>
</ul>
</header>
<article class="body">
<div class="row">
<div class="col-6-12">
<div class="panel panel-box">
<legend>Scroll within container to test:</legend>
<div class="test scrollable-box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit porro, debitis aliquid doloribus. Numquam voluptate a tempore? Laboriosam nesciunt deleniti asperiores quis. Odit corporis quasi dolorum fugit ipsa ratione repudiandae facilis facere, nihil eos dolor recusandae esse aliquam ipsam temporibus quibusdam voluptatum laudantium. Distinctio sequi nihil nisi temporibus aut iste?</p>
<p>Laborum cum excepturi sint, repudiandae consectetur inventore! Assumenda deleniti, delectus placeat facilis iste reprehenderit adipisci iure, aspernatur illum a harum repellendus ex non. Sunt delectus ea reprehenderit. Debitis beatae eius quae doloremque, unde officia quos nostrum iure maxime itaque quia at corporis, perspiciatis ipsa veritatis eligendi temporibus vel qui repudiandae.</p>
<p>Ab adipisci doloremque cum totam, minus exercitationem vero, saepe quas illum recusandae maxime dolorem quae itaque earum quam quidem optio labore quod odio debitis provident! Repellendus labore magnam sit facere doloribus non quisquam ipsam quae, veritatis, quaerat mollitia cupiditate dicta. Qui asperiores, nemo voluptas pariatur ipsum sapiente autem, architecto delectus!</p>
<p>Commodi vero voluptatum explicabo odio quidem ex aliquid. Eaque facilis excepturi suscipit natus neque explicabo vero doloremque saepe aliquam blanditiis atque deserunt, ratione asperiores est harum ipsam possimus nostrum corporis sequi porro perspiciatis distinctio quo. Laudantium at aperiam praesentium vel illum aut sint nam distinctio tempora nostrum veniam, quis incidunt!</p>
<p>Eaque, a quo iste blanditiis nobis optio voluptates itaque facilis doloribus placeat eveniet quam ad error pariatur nam nulla, quaerat inventore aliquid. Illum voluptatem, temporibus, obcaecati quaerat cupiditate quae quisquam perferendis. Voluptate nisi, harum esse, est impedit numquam quas commodi quasi minus magni totam accusantium aspernatur incidunt quibusdam dignissimos nemo.</p>
<p>Earum, animi. Deleniti in, ipsum iste molestias dolorum magni possimus perspiciatis tempore aspernatur, ut molestiae beatae adipisci, doloribus est tenetur nam similique praesentium error numquam quam earum neque odio sit explicabo dignissimos. Perferendis dolorem assumenda totam itaque sint ex, sequi, rerum nemo eius, ipsa temporibus unde similique iusto laboriosam magnam!</p>
<p>Delectus quia beatae repudiandae, officiis voluptatibus aperiam aliquam voluptatum earum labore dolor nostrum sapiente, veritatis omnis, quis molestiae sequi eveniet aliquid ipsa explicabo illo laborum cupiditate aut dignissimos eaque. Beatae sunt distinctio perspiciatis voluptatibus consequatur similique quo. Beatae quod consequuntur laudantium minima fuga tempore enim cupiditate, asperiores doloremque ratione voluptates!</p>
<p>Amet tenetur vero optio eveniet dolorum accusantium. Ipsa itaque placeat perferendis nemo atque quam repellendus totam. Iure reiciendis expedita ducimus corporis aperiam molestias eligendi saepe repellendus adipisci deleniti accusamus aliquam et sequi modi laboriosam dolor vel, nulla similique minus quia! Ducimus ex omnis libero in distinctio voluptatum. Tempore, placeat, eligendi.</p>
<p>Perspiciatis, fuga, obcaecati earum accusantium tenetur corrupti, nesciunt dolorum nobis velit quos incidunt voluptates temporibus fugit nihil mollitia commodi voluptas. Numquam ducimus voluptas, atque labore sint ab laborum iusto impedit. Eius perspiciatis omnis aperiam saepe dolore corporis aliquam quasi illum, voluptates! Molestiae eos culpa itaque explicabo, eaque odio delectus officia.</p>
<p>Perferendis sequi, iste ipsum placeat distinctio, commodi quos, aspernatur porro facilis veritatis numquam quasi labore delectus incidunt ad tempore nesciunt optio quaerat inventore odio doloremque in harum repellendus reiciendis? Libero veniam, quaerat. Sunt amet omnis eveniet sequi nesciunt iste, accusantium perferendis ducimus quasi porro laboriosam qui sapiente commodi ab cumque!</p>
</div>
</div>
</div>
<div class="col-6-12">
<div class="panel panel-box">
<legend>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">'.target'</span><span class="token punctuation">).</span>on<span class="token punctuation">(</span><span class="token string">'scrollend'</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');
}
_c.$('.test').on('scrollstart', function(evt) {
if( _c.$('[data-output]').hasClass('token') ) {
_c.$('[data-output]').removeClass('token comment');
}
_c.$('[data-output]').html('<span class="token comment">// ...</span>');
});
_c.$('.test').on('scrollend', function(evt) {
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'));
});
})(Chicago, jQuery, window, document);
</script>
</body>
</html>