Actualización

main/inc/lib/javascript/epiclock/renderers/retro/epiclock.retro.css

@@ -0,0 +1,75 @@
+/*!
+ * Retro Style Flip Clock
+ * Copyright (c) 2009 Eric Garside (http://eric.garside.name)
+ * Dual licensed under:
+ *  MIT: http://www.opensource.org/licenses/mit-license.php
+ *  GPLv3: http://www.opensource.org/licenses/gpl-3.0.html
+ */
+
+/* Master Style
+----------------------------------*/
+
+.epiclock-retro .epiclock, .epiclock-retro .epiclock-img
+    { display: block; float: left; }
+
+.epiclock-retro .epiclock-img .epiclock-animation,
+.epiclock-retro .epiclock-meridian,
+.epiclock-retro .epiclock-separator { display: block; float: left; background-image: url(epiclock.retro.png); background-repeat: no-repeat; height: 40px; }
+
+/* Individual Styles
+----------------------------------*/
+.epiclock-retro .epiclock-spacer { display: block; float: left; width: 10px; height: 1px; margin: 0; }
+.epiclock-retro .epiclock-animation { width: 40px; }
+.epiclock-retro .epiclock-separator { width: 26px; text-indent: -999999px; background-position: 0 -840px; }
+
+/* Container Clearfix
+----------------------------------*/
+.epiclock-retro:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.epiclock-retro { display: inline-block; }
+* html .epiclock-retro { height:1%; }
+.epiclock-retro { display:block; }
+
+/* Static Positions
+----------------------------------*/
+.epiclock-retro .d1 .s { background-position: 0 -40px; }
+.epiclock-retro .d2 .s { background-position: -40px -80px; }
+.epiclock-retro .d3 .s { background-position: 0 -160px; }
+.epiclock-retro .d4 .s { background-position: -40px -200px; }
+.epiclock-retro .d5 .s { background-position: 0 -280px; }
+.epiclock-retro .d6 .s { background-position: -40px -320px; }
+.epiclock-retro .d7 .s { background-position: 0 -400px; }
+.epiclock-retro .d8 .s { background-position: -40px -440px; }
+.epiclock-retro .d9 .s { background-position: 0 -520px; }
+.epiclock-retro .d0 .s { background-position: -40px -560px; }
+.epiclock-retro .dpm .s { background-position: 0 -680px; width: 80px; }
+.epiclock-retro .dam .s { background-position: 0 -800px; width: 80px; }
+
+/* Animation Phase 1
+----------------------------------*/
+.epiclock-retro .d1 .a1 { background-position: 0 0; }
+.epiclock-retro .d2 .a1 { background-position: -40px -40px; }
+.epiclock-retro .d3 .a1 { background-position: 0 -120px; }
+.epiclock-retro .d4 .a1 { background-position: -40px -160px; }
+.epiclock-retro .d5 .a1 { background-position: 0 -240px; }
+.epiclock-retro .d6 .a1 { background-position: -40px -280px; }
+.epiclock-retro .d7 .a1 { background-position: 0 -360px; }
+.epiclock-retro .d8 .a1 { background-position: -40px -400px; }
+.epiclock-retro .d9 .a1 { background-position: 0 -480px; }
+.epiclock-retro .d0 .a1 { background-position: -40px -520px; }
+.epiclock-retro .dpm .a1 { background-position: 0 -720px; width: 80px; }
+.epiclock-retro .dam .a1 { background-position: 0 -600px; width: 80px; }
+
+/* Animation Phase 2
+----------------------------------*/
+.epiclock-retro .d1 .a2 { background-position: -40px 0; }
+.epiclock-retro .d2 .a2 { background-position: 0 -80px; }
+.epiclock-retro .d3 .a2 { background-position: -40px -120px; }
+.epiclock-retro .d4 .a2 { background-position: 0 -200px; }
+.epiclock-retro .d5 .a2 { background-position: -40px -240px; }
+.epiclock-retro .d6 .a2 { background-position: 0 -320px; }
+.epiclock-retro .d7 .a2 { background-position: -40px -360px; }
+.epiclock-retro .d8 .a2 { background-position: 0 -440px; }
+.epiclock-retro .d9 .a2 { background-position: -40px -480px; }
+.epiclock-retro .d0 .a2 { background-position: 0 -560px; }
+.epiclock-retro .dpm .a2 { background-position: 0 -760px; width: 80px; }
+.epiclock-retro .dam .a2 { background-position: 0 -640px; width: 80px; }

main/inc/lib/javascript/epiclock/renderers/retro/epiclock.retro.js

@@ -0,0 +1,111 @@
+/*!
+ *  Retro renderer for epiclock
+ *
+ *  Copyright (c) Eric Garside
+ *  Dual licensed under:
+ *      MIT: http://www.opensource.org/licenses/mit-license.php
+ *      GPLv3: http://www.opensource.org/licenses/gpl-3.0.html
+ */
+
+"use strict";
+
+/*global window, jQuery */
+
+/*jslint white: true, browser: true, onevar: true, undef: true, eqeqeq: true, bitwise: true, regexp: true, strict: true, newcap: true, immed: true, maxerr: 50, indent: 4 */
+
+(function ($) {
+
+    //------------------------------
+    //
+    //  Constants
+    //
+    //------------------------------
+    
+        /**
+         *  Because epiclock returns values as 2 digits in one number, we need an "inner template" to contain
+         *  the actual image objects.
+         */
+    var innerTemplate = '<span class="epiclock-img"><span class="epiclock-animation"></span></span>';
+
+    //------------------------------
+    //
+    //  Animation
+    //
+    //------------------------------
+    
+    /**
+     *  Animate a given element. The animation for the retro clock has four stages:
+     *      :a1 - First stage of the animation
+     *      :a2 - Second stage of the animation
+     *      :a3 - Third stage of the animation
+     *      :s  - Static image, end of animation.
+     * 
+     *  @param element  The element being animated.
+     */
+    function animate()
+    {
+        var clock = this;
+    
+        setTimeout(function ()
+        {
+            $('.a1', clock.container).removeClass('a1').addClass('a2');
+            
+            setTimeout(function ()
+            {
+                $('.a2', clock.container).removeClass('a2').addClass('s');
+            }, 150);
+        }, 150);
+    }
+    
+    //------------------------------
+    //
+    //  Setup
+    //
+    //------------------------------
+
+    $.epiclock.addRenderer('retro', function (element, value)
+    {
+            /**
+             *  Determine if this is a collection of digits, or the am/pm string, and parser
+             *  the value accordingly.
+             */
+        var digits = value.substring(1) === 'm' ? [value] : value.split('').reverse(),
+            
+            /**
+             *  The last value of this element.
+             */
+            last = element.data('epiclock-last'),
+            
+            /**
+             *  Comparison values for the last array as compared to this one.
+             */
+            compare = last ? last.split('').reverse() : [],
+            
+            /**
+             *  The image instances for this block. If these don't yet exist, they will be created in the digit for...each callback.
+             */
+            image = $.makeArray($('.epiclock-img', element)).reverse();
+            
+        $.each(digits, function (index, digit)
+        {
+            /**
+             *  We don't want to change the image part if it hasn't been updated.
+             */
+            if (digit === compare[index])
+            {
+                return;
+            }
+            
+            /**
+             *  Animate the number after the clock has changed.
+             */
+            $('.epiclock-animation', $(image[index] || $(innerTemplate).prependTo(element)).removeClass('d' + compare[index]).addClass('d' + digit)).removeClass('s').addClass('a1');
+        });
+    }, 
+    
+    function ()
+    {
+        this.bind('rendered', animate);
+    });
+    
+}(jQuery));

main/inc/lib/javascript/epiclock/renderers/retro/epiclock.retro.min.js

@@ -0,0 +1,18 @@
+/*!
+ *  Retro renderer for epiclock
+ *
+ *  Copyright (c) Eric Garside
+ *  Dual licensed under:
+ *      MIT: http://www.opensource.org/licenses/mit-license.php
+ *      GPLv3: http://www.opensource.org/licenses/gpl-3.0.html
+ */
+"use strict";(function($){var innerTemplate='<span class="epiclock-img"><span class="epiclock-animation"></span></span>';function animate()
+{var clock=this;setTimeout(function()
+{$('.a1',clock.container).removeClass('a1').addClass('a2');setTimeout(function()
+{$('.a2',clock.container).removeClass('a2').addClass('s');},150);},150);}
+$.epiclock.addRenderer('retro',function(element,value)
+{var digits=value.substring(1)==='m'?[value]:value.split('').reverse(),last=element.data('epiclock-last'),compare=last?last.split('').reverse():[],image=$.makeArray($('.epiclock-img',element)).reverse();$.each(digits,function(index,digit)
+{if(digit===compare[index])
+{return;}
+$('.epiclock-animation',$(image[index]||$(innerTemplate).prependTo(element)).removeClass('d'+compare[index]).addClass('d'+digit)).removeClass('s').addClass('a1');});},function()
+{this.bind('rendered',animate);});}(jQuery));