ducks-source.mustache revision c6d4c11c9b36a9645bee58eb43cbf7c674e2028c
1N/A<style>
1N/A.gallery{
1N/A position: relative;
1N/A background: url({{{componentAssets}}}/images/background.png);
1N/A width: 665px;
1N/A height: 180px;
1N/A overflow: hidden;
1N/A -moz-border-radius: 8px;
1N/A -webkit-border-radius: 8px;
1N/A -moz-box-shadow: 0 0 45px #000 inset, 3px 0 6px rgba(0,0,0,0.8);
1N/A -webkit-box-shadow: 0 0 45px #000 inset, 3px 0 6px rgba(0,0,0,0.8);
1N/A border: 4px solid #637073;
1N/A cursor: crosshair;
1N/A margin: 0.5em 0 0.8em;
1N/A}
1N/A
1N/A.water{
1N/A position: absolute;
1N/A top: 114px;
1N/A left: 0;
1N/A width: 677px;
1N/A height: 50px;
1N/A}
1N/A
1N/A.water img{
1N/A position: absolute;
1N/A top: 0;
1N/A left: 0;
1N/A}
1N/A
1N/A.water .shadow {
1N/A left: 8px;
1N/A opacity: 0.5;
1N/A filter: alpha(opacity=30);
1N/A}
1N/A
1N/A.duck-row {
1N/A position: absolute;
1N/A left: 10px;
1N/A top: 57px;
1N/A width: 670px;
1N/A padding: 0;
1N/A margin: 0;
1N/A}
1N/A
1N/Aul.follower{ /* initial positioning of one row of ducks to follow the other during makeDucksSwim() */
1N/A left: 670px;
1N/A}
1N/A
1N/A.duck-row li{
1N/A position: relative;
1N/A display: inline-block;
1N/A zoom: 1; *display: inline; /* IE < 8: fake inline-block */
1N/A width: 133px;
1N/A height: 70px;
1N/A margin: 0 -4px 0 0;
1N/A vertical-align: bottom;
1N/A}
1N/A
1N/A.duck-row li img{
1N/A position: absolute;
1N/A bottom: 7px;
1N/A left: 0;
1N/A}
1N/A
1N/A/* the voice bubble of the ducks */
1N/A.duck-row .squawk {
1N/A position: absolute;
1N/A top: -400px;
1N/A left: 50px;
1N/A -moz-border-radius: 4px;
1N/A -webkit-border-radius: 4px;
1N/A background-color: #ffe;
1N/A line-height: 1.2em;
1N/A border: solid 1px #cc8;
1N/A -moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
1N/A -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
1N/A}
1N/A
1N/A.duck-row .squawk .text{
1N/A padding: 0.2em 0.2em;
1N/A text-indent: 0.2em;
1N/A overflow: hidden;
1N/A}
1N/A
1N/A.small-squawk-bubble{
1N/A position: absolute;
1N/A bottom: -4px;
1N/A left: -8px;
1N/A width: 4px;
1N/A height: 4px;
1N/A border: solid 1px #cc8;
1N/A -moz-border-radius: 3px;
1N/A -webkit-border-radius: 3px;
1N/A background-color: #ffe;
1N/A font-size: 2px;
1N/A}
1N/A
1N/A#button-reset{
1N/A margin-right: 2em;
1N/A}
1N/A
1N/A#show-attitude{
1N/A margin-left: 8em;
1N/A}
1N/A
1N/A.ducks-remain{
1N/A font-size: 150%;
1N/A}
1N/A</style>
1N/A
1N/A <div class='gallery'>
1N/A <ul class="duck-row leader">
1N/A <li></li>
1N/A <li></li>
1N/A <li></li>
1N/A <li></li>
1N/A <li></li>
1N/A </ul>
1N/A <ul class="duck-row follower">
1N/A <li></li>
1N/A <li></li>
1N/A <li></li>
1N/A <li></li>
1N/A <li></li>
1N/A </ul>
1N/A <div class="water">
1N/A <img class="shadow" src="{{{componentAssets}}}/images/water-shadow.png"/>
1N/A <img src="{{{componentAssets}}}/images/water.png"/>
1N/A </div>
1N/A </div>
1N/A <button id="button-reset" class="yui3-button">Reset</button>
1N/A Ducks remaining: <span class="ducks-remain">10</span>
1N/A <input type="checkbox" id="show-attitude"/><label for="show-attitude">Show attitude</label>
1N/A
1N/A<script>
1N/AYUI().use('node', 'transition', 'button', function(Y){
1N/A
1N/A var ducks = Y.all('.duck-row li'),
1N/A duckRow = Y.all('.duck-row'),
1N/A ducksRemain = 10, // value for UI display
1N/A squawkTextIndex = 0, // index in the squawkTextArr to use next
1N/A squawkTextArr = [ // duck comments
1N/A '#@&~*Q!',
1N/A 'Hey!?',
1N/A '911 on U!',
1N/A "U&nbsp;fly's&nbsp;down",
1N/A 'duck&nbsp;pile!',
1N/A 'Ricochets&nbsp;kill!',
1N/A 'how&nbsp;sporting.',
1N/A "shoe's&nbsp;untied"
1N/A ];
1N/A
1N/A // append in the content of each duck li since it's the same.
1N/A ducks.append('<img src="{{{componentAssets}}}/images/duck.png"/><div class="squawk"><div class="text">#@&~*Q!</div><div class="small-squawk-bubble"></div></div>');
1N/A
1N/A // give them all the set-up state class
1N/A ducks.addClass('set-up');
1N/A
1N/A // this makes the ducks move from right to left
1N/A // it also makes one row of 5 ducks follow the other, alternating position.
1N/A var makeDucksSwim = function() {
1N/A var leaderRow = Y.one('.leader'),
1N/A followerRow = Y.one('.follower');
1N/A leaderRow.transition({
1N/A easing: 'linear',
1N/A left: '-660px',
1N/A duration: 10
1N/A }, function(){ // when the row finishes its right to left transition...
1N/A // switch the follower and leader positions
1N/A followerRow.replaceClass('follower', 'leader');
1N/A leaderRow.replaceClass('leader', 'follower');
1N/A
1N/A // set the positions for the next makeDucksSwim()
1N/A Y.one('.follower').setStyle('left', '680px');
1N/A Y.one('.leader').setStyle('left', '10px');
1N/A
1N/A // if there are ducks remaining, make them swim again
1N/A if (ducksRemain > 0) {
1N/A makeDucksSwim();
1N/A }
1N/A });
1N/A
1N/A // the 'follower row of ducks moves at the same rate for the same duration'
1N/A followerRow.transition({
1N/A easing: 'linear',
1N/A left: '10px',
1N/A duration: 10
1N/A });
1N/A }
1N/A makeDucksSwim(); // this initializes the ducks swimming
1N/A
1N/A // handles a click on a duck
1N/A // also handles the display of duck comments (squawks)
1N/A var duckClick = function(e) {
1N/A var squawks;
1N/A
1N/A // makes the ducks appear to lay back when clicked
1N/A e.target.transition({
1N/A duration: 0.2,
1N/A height: '3px',
1N/A width: '133px'
1N/A });
1N/A
1N/A // clicked duck loses the 'set-up' class
1N/A e.currentTarget.removeClass('set-up');
1N/A
1N/A updateDucksRemain(); // update the number of ducks still set up
1N/A
1N/A squawks = Y.all('.duck-row .set-up .squawk'); // a NodeList of the squawks of set-up ducks
1N/A if (Y.one('#show-attitude')._node.checked) { // only have ducks squawk if the checkbox is checked
1N/A // fill voice bubbles with next text string
1N/A Y.all('.duck-row .set-up .squawk .text').setContent(squawkTextArr[squawkTextIndex]);
1N/A
1N/A // increment the index
1N/A squawkTextIndex = (squawkTextIndex += 1) % (squawkTextArr.length);
1N/A squawks.transition({
1N/A top: {
1N/A delay: 0.5,
1N/A value: '0px', // drop squawks into position from hidden
1N/A duration: 0 // instant position change
1N/A },
1N/A opacity: { // fade out
1N/A delay: 3.0,
1N/A duration: 0.3,
1N/A value: 0
1N/A }
1N/A }, function(e){
1N/A // after squawks are faded out,
1N/A // move them to hidden position and set opacity to 1 again
1N/A squawks.setStyles({'top': '-400px', 'opacity': '1'});
1N/A });
1N/A }
1N/A };
1N/A
1N/A // this resets all ducks, ducks remaining counters, and row positions
1N/A // make the duck images full height
1N/A // start them swimming
1N/A var reset = function() {
1N/A Y.all('.duck-row li img').setStyle('height', '55px');
1N/A Y.all('.duck-row li').addClass('set-up');
1N/A updateDucksRemain();
1N/A makeDucksSwim();
1N/A }
1N/A
1N/A // counts the ducks remaining, and updates the UI counter display
1N/A var updateDucksRemain = function() {
1N/A ducksRemain = Y.all('.gallery li.set-up').size();
1N/A Y.one('.ducks-remain').setContent(ducksRemain);
1N/A }
1N/A
1N/A // listeners
1N/A ducks.on('click', duckClick);
1N/A Y.one('#button-reset').on('click', reset);
1N/A});
1N/A</script>
1N/A