<commit_before><!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            
        <title>deck.anim.js test/demo</title>
            
        <meta name="description" content="deck.*.js">
        <meta name="author" content="<NAME>">
        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
            
        <!-- Core and extension CSS files -->
        <link rel="stylesheet" href="../core/deck.core.css">
        <link rel="stylesheet" href="../extensions/status/deck.status.css">
        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
            
        <!-- Style theme. More available in /themes/style/ or create your own. -->
        <link rel="stylesheet" href="../themes/style/neon.css">
            
        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
            
        <script src="../modernizr.custom.js"></script>
            
        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
            
        <!-- Deck Core and extensions -->
        <script src="../core/deck.core.js"></script>
        <script src="../extensions/hash/deck.hash.js"></script>
        <script src="../extensions/status/deck.status.js"></script>
        <script src="../extensions/fit/deck.fit.js"></script>
        <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">

        <script src="../extensions/step/deck.step.js"></script>
        <script src="../extensions/events/deck.events.js"></script>
        <script src="../extensions/anim/deck.anim.js"></script>

            
        <style type="text/css">
            .deck-container>.slide {border: 1px dashed #333;} /* for the demo */
            .slide h1 {font-size: 3em;}
            .slide h1 b {color: #0F0;}
            .slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
            .slide span.highlight {border: 1px solid red;}
            .deck-container > .slide .deck-before, .deck-container > .slide .deck-previous {opacity: 0.6;} /* <-- override darkish neon theme --> */

        </style>
    </head>

<!-- for the demo, the body is not the container so it can be resized by the user -->
<body>

This page surely has a purpose.<br/>
Use left/right arrow keys to browse the presentation.<br/>

<!-- for the demo, a resizeable wrapper around the container -->
<div class="deck-container">

<!-- Begin slides -->
<section class="slide" id="title-slide">
	<h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>anim</b> extension
            <br/><em>use right arrow to move on</em>
        </h1>
</section>

<section class="slide">
    <h2>Nested deck.js slides</h2>
    <ul>
        <li>Not an extension (in core deck.js)</li>
        <li>Just have an element with the “slide” class…</li>
        <li>… and it will appear (hit the right arrow now)</li>
        <li class="slide">Hey! I appeared! (go on)</li>
        <li class="slide">The gray-ish style is part of the theme</li>
    </ul>
</section>
<section class="slide">
    <h2>Show/Hide Elements</h2>
    <ul>
        <li>Go beyond sequential appearance <span class="demo1">… like this!</span></li>
        <li class="slide">… for example</li>
        <div class="anim-show slide" data-what=".demo1"></div>
        <li class="slide">Or hide stuff</li>
        <div class="anim-hide slide" data-what="h2"></div>
        <li class="anim-show slide" data-what="h2" data-dur="1500">Let's get the title back, slowly :)</li>
    </ul>
</section>
<section class="slide">
    <h2>Add/Remove Classes</h2>
    <ul>
        <li class="slide">We can also <span class="demo1">add</span>/remove classes: like the “highlight”</li>
        <li class="slide"><span class="demo2 highlight">This is highlight by default</span> (styled with css)</li>
        <li class="slide">We can add a class</li>
        <div class="anim-addclass slide" data-what=".demo1" data-class="highlight"></div>
        <li class="slide">And remove it</li>
        <div class="anim-removeclass slide" data-what=".demo1,.demo2" data-class="highlight"></div>
    </ul>
</section>
<section class="slide">
    <h2>Attribute Animations</h2>
    <ul>
        <li class="slide">We can animate any <span class="demo1">attribute</span>, like the <span class="demo1">color</span></li>
        <li class="slide">Let's try</li>
        <div class="anim-attribute slide" data-what=".demo1" data-attr="color:#FF0000"></div>
        <div class="anim-attribute slide" data-what=".demo1:first" data-attr="color:#00FF00"></div>
        <div class="anim-attribute slide" data-what=".demo1" data-attr="color:#0000FF"></div>
        <li class="slide">Or the <span class="demo2">size</span></li>
        <div class="anim-attribute slide" data-what=".demo2" data-attr="font-size:8em"></div>
        <li class="slide">Or play multiple animations</li>
        <div class="anim-attribute slide anim-continue" data-what=".demo2" data-attr="font-size:.5em"></div>
        <div class="anim-attribute slide anim-continue" data-what=".demo2" data-attr="color:#FF0000"></div>
        <div class="anim-attribute slide" data-what=".demo2,.demo1" data-attr="font-size:3em"></div>
    </ul>
</section>
<section class="slide">
    <h2>Video Control</h2>
    <video style="float:right" src="simple.ogv" height="400" width="400" onclick="this.paused ? this.play() : this.pause()" controls="true"></video>
    <ul>
        <li>Starts paused</li>
        <li>Plays on "next"</li>
        <li>Then pauses on "next"</li>
        <li>Then next slide</li>
    </ul>
    <div class="anim-play slide" data-what="video"></div>
    <div class="anim-pause slide" data-what="video"></div>
</section>
<section class="slide">
    <h2>The “anim” extension</h2>
    <ul>
        <li>Works in conjunction with</li>
        <ul>
            <li>“events”: extension that triggers events<br/>   (notify the slide when it becomes current)</li>
            <li>“step”: extension that also trigger init events<br/>   (knowing about toplevel vs nested slides)</li>
        </ul>
        <li>Uses open attributes "data-*" (see source)</li>
        <li>Adds animation classes</li>
        <ul>
            <li>anim-show/hide, anim-addclass/removeclass,</li>
            <li>anim-attribute, anim-play, anim-pause, …</li>
        </ul>
    </ul>
</section>
<section class="slide">
    <h2>Browser support</h2>
    <ul>
        <li>Should be ok</li>
    </ul>
</section>

<!-- DEMO: anim -->

<!-- deck.navigation snippet -->
<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
<a href="#" class="deck-next-link" title="Next">&#8594;</a-->

<!-- deck.status snippet -->
<!--p class="deck-status">
	<span class="deck-status-current"></span>
	/
	<span class="deck-status-total"></span>
</p-->

<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>

<!-- Initialize the deck -->
<script>
$(function() {
	$.deck('.slide', {
            // fitMarginX:100, fitMarginY:100,
            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
        });
});
</script>
</div>
</body>
</html>
<commit_msg>[samples] illustrate new anim-wait feature<commit_after><!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            
        <title>deck.anim.js test/demo</title>
            
        <meta name="description" content="deck.*.js">
        <meta name="author" content="<NAME>">
        <!--meta name="viewport" content="width=1024, user-scalable=no"/-->
            
        <!-- Core and extension CSS files -->
        <link rel="stylesheet" href="../core/deck.core.css">
        <link rel="stylesheet" href="../extensions/status/deck.status.css">
        <link rel="stylesheet" href="../extensions/hash/deck.hash.css">
            
        <!-- Style theme. More available in /themes/style/ or create your own. -->
        <link rel="stylesheet" href="../themes/style/neon.css">
            
        <!-- Transition theme. More available in /themes/transition/ or create your own. -->
        <!--link rel="stylesheet" href="../themes/transition/horizontal-slide.css"-->
            
        <script src="../modernizr.custom.js"></script>
            
        <!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
        <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
        <script>window.jQuery || document.write('<script src="../jquery-1.7.2.min.js"><\/script>')</script>
            
        <!-- Deck Core and extensions -->
        <script src="../core/deck.core.js"></script>
        <script src="../extensions/hash/deck.hash.js"></script>
        <script src="../extensions/status/deck.status.js"></script>
        <script src="../extensions/fit/deck.fit.js"></script>
        <link rel="stylesheet" href="../extensions/fit/deck.fit-fs.css">

        <script src="../extensions/step/deck.step.js"></script>
        <script src="../extensions/events/deck.events.js"></script>
        <script src="../extensions/anim/deck.anim.js"></script>

            
        <style type="text/css">
            .deck-container>.slide {border: 1px dashed #333;} /* for the demo */
            .slide h1 {font-size: 3em;}
            .slide h1 b {color: #0F0;}
            .slide h1 em {color: #445; text-shadow: none; font-size: .3em;}
            .slide span.highlight {border: 1px solid red;}
            .deck-container > .slide .deck-before, .deck-container > .slide .deck-previous {opacity: 0.6;} /* <-- override darkish neon theme --> */

        </style>
    </head>

<!-- for the demo, the body is not the container so it can be resized by the user -->
<body>

This page surely has a purpose.<br/>
Use left/right arrow keys to browse the presentation.<br/>

<!-- for the demo, a resizeable wrapper around the container -->
<div class="deck-container">

<!-- Begin slides -->
<section class="slide" id="title-slide">
	<h1 title="use arrow keys to navigate">Getting started with deck.js:<br/><b>anim</b> extension
            <br/><em>use right arrow to move on</em>
        </h1>
</section>

<section class="slide">
    <h2>Nested deck.js slides</h2>
    <ul>
        <li>Not an extension (in core deck.js)</li>
        <li>Just have an element with the “slide” class…</li>
        <li>… and it will appear (hit the right arrow now)</li>
        <li class="slide">Hey! I appeared! (go on)</li>
        <li class="slide">The gray-ish style is part of the theme</li>
    </ul>
</section>
<section class="slide">
    <h2>Show/Hide Elements</h2>
    <ul>
        <li>Go beyond sequential appearance <span class="demo1">… like this!</span></li>
        <li class="slide">… for example</li>
        <div class="anim-show slide" data-what=".demo1"></div>
        <li class="slide">Or hide stuff</li>
        <div class="anim-hide slide" data-what="h2"></div>
        <li class="anim-show slide" data-what="h2" data-dur="1500">Let's get the title back, slowly :)</li>
    </ul>
</section>
<section class="slide">
    <h2>Add/Remove Classes</h2>
    <ul>
        <li class="slide">We can also <span class="demo1">add</span>/remove classes: like the “highlight”</li>
        <li class="slide"><span class="demo2 highlight">This is highlight by default</span> (styled with css)</li>
        <li class="slide">We can add a class</li>
        <div class="anim-addclass slide" data-what=".demo1" data-class="highlight"></div>
        <li class="slide">And remove it</li>
        <div class="anim-removeclass slide" data-what=".demo1,.demo2" data-class="highlight"></div>
    </ul>
</section>
<section class="slide">
    <h2>Attribute Animations</h2>
    <ul>
        <li class="slide">We can animate any <span class="demo1">attribute</span>, like the <span class="demo1">color</span></li>
        <li class="slide">Let's try</li>
        <div class="anim-attribute slide" data-what=".demo1" data-attr="color:#FF0000"></div>
        <div class="anim-attribute slide" data-what=".demo1:first" data-attr="color:#00FF00"></div>
        <div class="anim-attribute slide" data-what=".demo1" data-attr="color:#0000FF"></div>
        <li class="slide">Or the <span class="demo2">size</span></li>
        <div class="anim-attribute slide" data-what=".demo2" data-attr="font-size:8em"></div>
        <li class="slide">Or play multiple animations, and with delays</li>
        <div class="anim-attribute slide anim-continue" data-what=".demo2" data-attr="font-size:.5em"></div>
        <div class="anim-wait slide" data-dur="800"></div>
        <div class="anim-attribute slide anim-continue" data-what=".demo2" data-attr="color:#FF0000"></div>
        <div class="anim-attribute slide" data-what=".demo2,.demo1" data-attr="font-size:3em"></div>
    </ul>
</section>
<section class="slide">
    <h2>Video Control</h2>
    <video style="float:right" src="simple.ogv" height="400" width="400" onclick="this.paused ? this.play() : this.pause()" controls="true"></video>
    <ul>
        <li>Starts paused</li>
        <li>Plays on "next"</li>
        <li>Then pauses on "next"</li>
        <li>Then next slide</li>
    </ul>
    <div class="anim-play slide" data-what="video"></div>
    <div class="anim-pause slide" data-what="video"></div>
</section>
<section class="slide">
    <h2>The “anim” extension</h2>
    <ul>
        <li>Works in conjunction with</li>
        <ul>
            <li>“events”: extension that triggers events<br/>   (notify the slide when it becomes current)</li>
            <li>“step”: extension that also trigger init events<br/>   (knowing about toplevel vs nested slides)</li>
        </ul>
        <li>Uses open attributes "data-*" (see source)</li>
        <li>Adds animation classes</li>
        <ul>
            <li>anim-show/hide, anim-addclass/removeclass,</li>
            <li>anim-attribute, anim-play, anim-pause, …</li>
        </ul>
    </ul>
</section>
<section class="slide">
    <h2>Browser support</h2>
    <ul>
        <li>Should be ok</li>
    </ul>
</section>

<!-- DEMO: anim -->

<!-- deck.navigation snippet -->
<!--a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
<a href="#" class="deck-next-link" title="Next">&#8594;</a-->

<!-- deck.status snippet -->
<!--p class="deck-status">
	<span class="deck-status-current"></span>
	/
	<span class="deck-status-total"></span>
</p-->

<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>

<!-- Initialize the deck -->
<script>
$(function() {
	$.deck('.slide', {
            // fitMarginX:100, fitMarginY:100,
            // fitMode: "stretched" //"center middle" //"bottom right" //"top left"
        });
});
</script>
</div>
</body>
</html>

{'fraction_non_alphanumeric': 0.2001276731567188, 'fraction_numerical': 0.014873922757740184, 'mean_word_length': 2.710563713879678, 'pattern_counts': {'":': 0, '<': 497, '<?xml version=': 0, '>': 501, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3912205', 'n_tokens_mistral': 5133, 'n_tokens_neox': 4925, 'n_words': 1223}