Actualización
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
/*!
|
||||
* Minute Style Countdown
|
||||
* Copyright (c) 2009 Eric Garside (http://eric.garside.name)
|
||||
* Copyright (c) 2012 Chamilo
|
||||
* Dual licensed under:
|
||||
* MIT: http://www.opensource.org/licenses/mit-license.php
|
||||
* GPLv3: http://www.opensource.org/licenses/gpl-3.0.html
|
||||
*/
|
||||
|
||||
/* Near to 0 seconds should be red */
|
||||
.time_warning_one {
|
||||
background-color: #FB3A35;
|
||||
}
|
||||
|
||||
.time_warning_two {
|
||||
background-color: #FFD700;
|
||||
}
|
||||
|
||||
#exercise_clock_warning {
|
||||
z-index: 10000;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
/*!
|
||||
* minute countdown renderer for epiclock
|
||||
*
|
||||
* Copyright (c) Eric Garside
|
||||
* Copyright (c) Chamilo team
|
||||
* 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
|
||||
var epClock; // clock object
|
||||
|
||||
// Setup
|
||||
$.epiclock.addRenderer('minute', function (element, value)
|
||||
{
|
||||
var currentTime = new Date().valueOf();
|
||||
var dist = epClock.time+epClock.__offset - currentTime;
|
||||
|
||||
//Sets the value to the clock very important!
|
||||
element.text(value);
|
||||
|
||||
var div_clock = $('#exercise_clock_warning');
|
||||
|
||||
// 60000 = 60 seconds
|
||||
if (dist <= 300000) { //5min
|
||||
if (!(div_clock.hasClass('time_warning_two'))) {
|
||||
div_clock.addClass('time_warning_two');
|
||||
}
|
||||
}
|
||||
|
||||
if (dist <= 120000) { //2min
|
||||
div_clock.removeClass('time_warning_two');
|
||||
if (!(div_clock.hasClass('time_warning_one'))) {
|
||||
div_clock.addClass('time_warning_one');
|
||||
}
|
||||
}
|
||||
},
|
||||
function ()
|
||||
{
|
||||
epClock = this;
|
||||
});
|
||||
}(jQuery));
|
||||
@@ -0,0 +1,68 @@
|
||||
/*!
|
||||
* Retro Style Countdown
|
||||
* 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-countdown .epiclock-img .epiclock-animation,
|
||||
.epiclock-retro-countdown .epiclock-separator { display: block; float: left; background-image: url(epiclock.retro-countdown.png); background-repeat: no-repeat; height: 40px; }
|
||||
|
||||
/* Individual Styles
|
||||
----------------------------------*/
|
||||
.epiclock-retro-countdown .epiclock-spacer { display: block; float: left; width: 10px; height: 1px; margin: 0; }
|
||||
.epiclock-retro-countdown .epiclock-animation { width: 40px; }
|
||||
.epiclock-retro-countdown .epiclock-separator { width: 26px; text-indent: -999999px; background-position: -120px -360px; }
|
||||
|
||||
/* Container Clearfix
|
||||
----------------------------------*/
|
||||
.epiclock-retro-countdown:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
.epiclock-retro-countdown { display: inline-block; }
|
||||
* html .epiclock-retro-countdown { height:1%; }
|
||||
.epiclock-retro-countdown { display:block; }
|
||||
|
||||
/* Static Positions
|
||||
----------------------------------*/
|
||||
.epiclock-retro-countdown .d0 .s { background-position: 0 -360px; }
|
||||
.epiclock-retro-countdown .d1 .s { background-position: 0 -320px; }
|
||||
.epiclock-retro-countdown .d2 .s { background-position: 0 -280px; }
|
||||
.epiclock-retro-countdown .d3 .s { background-position: 0 -240px; }
|
||||
.epiclock-retro-countdown .d4 .s { background-position: 0 -200px; }
|
||||
.epiclock-retro-countdown .d5 .s { background-position: 0 -160px; }
|
||||
.epiclock-retro-countdown .d6 .s { background-position: 0 -120px; }
|
||||
.epiclock-retro-countdown .d7 .s { background-position: 0 -80px; }
|
||||
.epiclock-retro-countdown .d8 .s { background-position: 0 -40px; }
|
||||
.epiclock-retro-countdown .d9 .s { background-position: 0 0; }
|
||||
|
||||
/* Animation Phase 1
|
||||
----------------------------------*/
|
||||
.epiclock-retro-countdown .d9 .a1 { background-position: -40px -360px; }
|
||||
.epiclock-retro-countdown .d0 .a1 { background-position: -40px -320px; }
|
||||
.epiclock-retro-countdown .d1 .a1 { background-position: -40px -280px; }
|
||||
.epiclock-retro-countdown .d2 .a1 { background-position: -40px -240px; }
|
||||
.epiclock-retro-countdown .d3 .a1 { background-position: -40px -200px; }
|
||||
.epiclock-retro-countdown .d4 .a1 { background-position: -40px -160px; }
|
||||
.epiclock-retro-countdown .d5 .a1 { background-position: -40px -120px; }
|
||||
.epiclock-retro-countdown .d6 .a1 { background-position: -40px -80px; }
|
||||
.epiclock-retro-countdown .d7 .a1 { background-position: -40px -40px; }
|
||||
.epiclock-retro-countdown .d8 .a1 { background-position: -40px 0; }
|
||||
|
||||
/* Animation Phase 2
|
||||
----------------------------------*/
|
||||
.epiclock-retro-countdown .d9 .a2 { background-position: -80px -360px; }
|
||||
.epiclock-retro-countdown .d0 .a2 { background-position: -80px -320px; }
|
||||
.epiclock-retro-countdown .d1 .a2 { background-position: -80px -280px; }
|
||||
.epiclock-retro-countdown .d2 .a2 { background-position: -80px -240px; }
|
||||
.epiclock-retro-countdown .d3 .a2 { background-position: -80px -200px; }
|
||||
.epiclock-retro-countdown .d4 .a2 { background-position: -80px -160px; }
|
||||
.epiclock-retro-countdown .d5 .a2 { background-position: -80px -120px; }
|
||||
.epiclock-retro-countdown .d6 .a2 { background-position: -80px -80px; }
|
||||
.epiclock-retro-countdown .d7 .a2 { background-position: -80px -40px; }
|
||||
.epiclock-retro-countdown .d8 .a2 { background-position: -80px 0; }
|
||||
@@ -0,0 +1,111 @@
|
||||
/*!
|
||||
* Retro countdown 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-countdown', 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));
|
||||
18
main/inc/lib/javascript/epiclock/renderers/retro-countdown/epiclock.retro-countdown.min.js
vendored
Normal file
18
main/inc/lib/javascript/epiclock/renderers/retro-countdown/epiclock.retro-countdown.min.js
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
/*!
|
||||
* Retro countdown 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-countdown',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));
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
@@ -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; }
|
||||
@@ -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));
|
||||
18
main/inc/lib/javascript/epiclock/renderers/retro/epiclock.retro.min.js
vendored
Normal file
18
main/inc/lib/javascript/epiclock/renderers/retro/epiclock.retro.min.js
vendored
Normal file
@@ -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));
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Reference in New Issue
Block a user