Julian/phpbb_board3-portal_tlw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix shifting of clock bottom parts during animation

Browse Source
This commit is contained in:
Marc Alexander
2023-02-19 11:05:32 +01:00
parent 812dfa0298
commit ecc95254f1
2 changed files with 184 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

360
styles/prosilver/template/portal/assets/portal_clock.js
View File

@@ -1,180 +1,180 @@
/** /**
* *
* @package Board3 Portal v2.1 - Clock * @package Board3 Portal v2.1 - Clock
* @copyright (c) 2013 Board3 Group ( www.board3.de ) * @copyright (c) 2013 Board3 Group ( www.board3.de )
* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2 * @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
* *
*/ */
(function($) { // Avoid conflicts with other libraries (function($) { // Avoid conflicts with other libraries
"use strict"; "use strict";
var hour_cur = 0; var hour_cur = 0;
var minL_cur = 0; var minL_cur = 0;
var minR_cur = 0; var minR_cur = 0;
var secL_cur = 0; var secL_cur = 0;
var secR_cur = 0; var secR_cur = 0;
phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) { phpbb.b3pFlipClock = function(identifierUp, identifierDown, val, type) {
var backIdUp = identifierUp.replace('-front-', '-back-'); var backIdUp = identifierUp.replace('-front-', '-back-');
var backIdDown = identifierDown.replace('-front-', '-back-'); var backIdDown = identifierDown.replace('-front-', '-back-');
var backPosition = $(backIdUp).css('background-position'); var backPosition = $(backIdUp).css('background-position');
var backPositionLength; var backPositionLength;
var backY; var backY;
// Workaround for Internet Explorer bug // Workaround for Internet Explorer bug
if (backPosition === undefined) { if (backPosition === undefined) {
backPosition = $(backIdUp).css('background-position-x') + ' ' + $(backIdUp).css('background-position-y'); backPosition = $(backIdUp).css('background-position-x') + ' ' + $(backIdUp).css('background-position-y');
} }
backPositionLength = backPosition.length; backPositionLength = backPosition.length;
if (backPosition.substring(backPositionLength - 3, backPositionLength - 2) === '0') { if (backPosition.substring(backPositionLength - 3, backPositionLength - 2) === '0') {
backY = '0px'; backY = '0px';
} else { } else {
backY = backPosition.substring(backPositionLength - 5, backPositionLength); backY = backPosition.substring(backPositionLength - 5, backPositionLength);
} }
backPosition = $(backIdUp).css('background-position'); backPosition = $(backIdUp).css('background-position');
$(identifierUp) $(identifierUp)
.css('background-position', backPosition) .css('background-position', backPosition)
.height('21px') .height('21px')
.css({'visibility': 'visible', 'display': 'inline-block' }); .css({'visibility': 'visible', 'display': 'inline-block' });
$(identifierDown) $(identifierDown)
.height('0px') .height('0px')
.css('visibility', 'visible'); .css('visibility', 'visible');
// single digits will have digits 0 - 9, double 0 - 24 // single digits will have digits 0 - 9, double 0 - 24
if (type === 'single') { if (type === 'single') {
$(backIdUp).css('background-position', (val * -22) + 'px ' + backY); $(backIdUp).css('background-position', (val * -22) + 'px ' + backY);
} else if (type === 'double') { } else if (type === 'double') {
if (val >= 12) { if (val >= 12) {
backY = '-22px'; backY = '-22px';
val = val - 12; val = val - 12;
$(backIdUp).css('background-position', (val * -43) + 'px ' + backY); $(backIdUp).css('background-position', (val * -43) + 'px ' + backY);
val = val + 12; val = val + 12;
} else { } else {
if (val < 12 && backY !== '0px') { if (val < 12 && backY !== '0px') {
backY = '0px'; backY = '0px';
} }
$(backIdUp).css('background-position', (val * -43) + 'px ' + backY); $(backIdUp).css('background-position', (val * -43) + 'px ' + backY);
} }
} else { } else {
return; return;
} }
// now get the vertical offset of the bottom digit // now get the vertical offset of the bottom digit
backPosition = $(identifierDown).css('background-position'); backPosition = $(identifierDown).css('background-position');
// Workaround for Internet Explorer bug // Workaround for Internet Explorer bug
if (backPosition === undefined) { if (backPosition === undefined) {
backPosition = $(identifierDown).css('background-position-x') + ' ' + $(identifierDown).css('background-position-y'); backPosition = $(identifierDown).css('background-position-x') + ' ' + $(identifierDown).css('background-position-y');
} }
backPositionLength = backPosition.length; backPositionLength = backPosition.length;
if (backPosition.substring(backPositionLength - 3, backPositionLength - 2) === '0') { if (backPosition.substring(backPositionLength - 3, backPositionLength - 2) === '0') {
backY = '0px'; backY = '0px';
} else { } else {
backY = backPosition.substring(backPositionLength - 5, backPositionLength); backY = backPosition.substring(backPositionLength - 5, backPositionLength);
} }
// single digits will have digits 0 - 9, double 0 - 24 // single digits will have digits 0 - 9, double 0 - 24
if (type === 'single') { if (type === 'single') {
$(identifierDown).css('background-position', (val * -22) + 'px ' + backY); $(identifierDown).css('background-position', (val * -22) + 'px ' + backY);
} else if (type === 'double') { } else if (type === 'double') {
if (val >= 12) { if (val >= 12) {
backY = '-65px'; backY = '-65px';
val = val - 12; val = val - 12;
$(identifierDown).css('background-position', (val * -43) + 'px ' + backY); $(identifierDown).css('background-position', (val * -43) + 'px ' + backY);
val = val + 12; val = val + 12;
} else { } else {
if (val < 12 && backY !== '-44px') { if (val < 12 && backY !== '-44px') {
backY = '-44px'; backY = '-44px';
} }
$(identifierDown).css('background-position', (val * -43) + 'px ' + backY); $(identifierDown).css('background-position', (val * -43) + 'px ' + backY);
} }
} else { } else {
return; return;
} }
// Animate the top number flipping // Animate the top number flipping
$(identifierUp).animate({ $(identifierUp).animate({
height: '0px', height: '0px',
'margin-top': '21px' 'margin-top': '21px'
}, },
{ {
'duration': 150, 'duration': 150,
defaultEasing: 'easeInOutSine', defaultEasing: 'easeInOutSine',
'complete': function(){ 'complete': function(){
// Now animate the bottom number flipping // Now animate the bottom number flipping
$(identifierDown).animate( $(identifierDown).animate(
{height: '20px'}, {height: '20px'},
{ {
'duration': 150, 'duration': 150,
defaultEasing: 'easeInOutSine', defaultEasing: 'easeInOutSine',
'complete': function(){ 'complete': function(){
// For compatibility with IE8 // For compatibility with IE8
if ($(identifierDown).css('background-position') !== undefined) { if ($(identifierDown).css('background-position') !== undefined) {
$(backIdDown).css('background-position', $(identifierDown).css('background-position')); $(backIdDown).css('background-position', $(identifierDown).css('background-position'));
} else { } else {
$(backIdDown).css('background-position-x', $(identifierDown).css('background-position-x')); $(backIdDown).css('background-position-x', $(identifierDown).css('background-position-x'));
$(backIdDown).css('background-position-y', $(identifierDown).css('background-position-y')); $(backIdDown).css('background-position-y', $(identifierDown).css('background-position-y'));
} }
$(identifierDown).css({ $(identifierDown).css({
'visibility': 'hidden', 'visibility': 'hidden',
'display': 'inline-block' 'display': 'inline-block'
}); });
$(identifierUp).css({ $(identifierUp).css({
'visibility': 'hidden', 'visibility': 'hidden',
'display': 'inline-block', 'display': 'inline-block',
'margin-top': '0px' 'margin-top': '0px'
}); });
} }
} }
); );
} }
} }
); );
}; };
phpbb.b3pClock = function() { phpbb.b3pClock = function() {
var now = new Date(); var now = new Date();
var hour = now.getHours(); var hour = now.getHours();
var minL = Math.floor(now.getMinutes() / 10); var minL = Math.floor(now.getMinutes() / 10);
var minR = now.getMinutes() % 10; var minR = now.getMinutes() % 10;
var secL = Math.floor(now.getSeconds() / 10); var secL = Math.floor(now.getSeconds() / 10);
var secR = now.getSeconds() % 10; var secR = now.getSeconds() % 10;
if (hour !== hour_cur) { if (hour !== hour_cur) {
phpbb.b3pFlipClock('.portal-clock-front-hours-up', '.portal-clock-front-hours-down', hour, 'double'); phpbb.b3pFlipClock('.portal-clock-front-hours-up', '.portal-clock-front-hours-down', hour, 'double');
hour_cur = hour; hour_cur = hour;
} }
if (minR !== minR_cur) { if (minR !== minR_cur) {
phpbb.b3pFlipClock('.portal-clock-front-minutes-up-right', '.portal-clock-front-minutes-down-right', minR, 'single'); phpbb.b3pFlipClock('.portal-clock-front-minutes-up-right', '.portal-clock-front-minutes-down-right', minR, 'single');
minR_cur = minR; minR_cur = minR;
} }
if (minL !== minL_cur) { if (minL !== minL_cur) {
phpbb.b3pFlipClock('.portal-clock-front-minutes-up-left', '.portal-clock-front-minutes-down-left', minL, 'single'); phpbb.b3pFlipClock('.portal-clock-front-minutes-up-left', '.portal-clock-front-minutes-down-left', minL, 'single');
minL_cur = minL; minL_cur = minL;
} }
if (secR !== secR_cur) { if (secR !== secR_cur) {
phpbb.b3pFlipClock('.portal-clock-front-seconds-up-right', '.portal-clock-front-seconds-down-right', secR, 'single'); phpbb.b3pFlipClock('.portal-clock-front-seconds-up-right', '.portal-clock-front-seconds-down-right', secR, 'single');
secR_cur = secR; secR_cur = secR;
} }
if (secL !== secL_cur) { if (secL !== secL_cur) {
phpbb.b3pFlipClock('.portal-clock-front-seconds-up-left', '.portal-clock-front-seconds-down-left', secL, 'single'); phpbb.b3pFlipClock('.portal-clock-front-seconds-up-left', '.portal-clock-front-seconds-down-left', secL, 'single');
secL_cur = secL; secL_cur = secL;
} }
}; };
$(document).ready(function() { $(document).ready(function() {
setInterval(phpbb.b3pClock, 1000); setInterval(phpbb.b3pClock, 1000);
}); });
})(jQuery); // Avoid conflicts with other libraries })(jQuery); // Avoid conflicts with other libraries

8
styles/prosilver/theme/portal.css
View File

@@ -567,12 +567,12 @@ dd.responsive-portal-news:last-of-type, dd.responsive-portal-announcements:last-
.portal-clock-front-minutes-down-left { .portal-clock-front-minutes-down-left {
background-position: 0 -22px; background-position: 0 -22px;
margin: 21px 0 0 42px; margin: 21px 0 0 43px;
} }
.portal-clock-front-minutes-down-right { .portal-clock-front-minutes-down-right {
background-position: 0 -65px; background-position: 0 -65px;
margin: 21px 0 0 63px; margin: 21px 0 0 64px;
} }
/* Seconds start /* Seconds start
@@ -609,12 +609,12 @@ dd.responsive-portal-news:last-of-type, dd.responsive-portal-announcements:last-
.portal-clock-front-seconds-down-left { .portal-clock-front-seconds-down-left {
background-position: 0 -22px; background-position: 0 -22px;
margin: 21px 0 0 84px; margin: 21px 0 0 85px;
} }
.portal-clock-front-seconds-down-right { .portal-clock-front-seconds-down-right {
background-position: 0 -65px; background-position: 0 -65px;
margin: 21px 0 0 105px; margin: 21px 0 0 106px;
} }
/* Hours start /* Hours start