YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fix sliders bugs...

Browse source
This commit is contained in:
Alexandre Aubin 2019-10-14 02:12:39 +02:00
parent 9c7ed43a24
commit e2dcb1765f
2 changed files with 96 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/css/style.less
View file

@ -826,3 +826,10 @@ input[type='radio'].nice-radio {
float: none !important;
}
}
.notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

89
src/js/yunohost/helpers.js
View file

@ -3,6 +3,46 @@
var app = Sammy.apps['#main'];
var store = app.store;
// The logic used to temporily disable transition is from
// https://stackoverflow.com/a/16575811
function whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
for(t in transitions){
if( el.style[t] !== undefined ){
return transitions[t];
}
}
};
var transitionEvent = whichTransitionEvent();
function resetSliders()
{
// Disable transition effects
$('#slider-container').addClass('notransition');
// Delete the left/right temporary stuff only used during animation
$('#slideTo').css('display', 'none');
$('#slideBack').css('display', 'none');
// Set the margin-left back to 0
$('#slider-container').css('margin-left', '0');
// c.f. the stackoverflow thread
$('#slider-container')[0].offsetHeight;
// Remove the binding to this event handler for next times
//$("#slider-container").off(transitionEvent);
// Re-enable transition effects
$('#slider-container').removeClass('notransition');
}
// Now we add the transition event to detect the end of the transition effect
transitionEvent && $("#slider-container").on(transitionEvent, resetSliders)
/**
* Helpers
*
@ -282,20 +322,69 @@
// Slide back effect
if (enableSlide && store.get('slide') == 'back') {
store.clear('slide');
// Disable transition while we tweak CSS
$('#slider-container').addClass('notransition');
// "Delete" the left part of the slider
$('#slideBack').css('display', 'none');
// Push the slider to the left
$('#slider-container').css('margin-left', '-100%');
// slideTo is the right part, and should contain the old view,
// so we copypasta what's in the "center" slider (#main)
$('#slideTo').show().html($('#main').html());
// leSwap will put the new view in the "center" slider (#main)
leSwap();
// So now things look like:
// | |
// | the screen |
// | |
//
// . #main . #slideTo .
// . the new view . the old view .
// ^ ^
// margin-left: -100% currently shown
//
// =====>>> sliiiiide =====>>>
// Re-add transition effect
$('#slider-container').removeClass('notransition');
// And actually play the transition effect that will move the container from left to right
$('#slider-container').css('margin-left', '0px');
}
// Slide to effect
else if (enableSlide && store.get('slide') == 'to') {
store.clear('slide');
// Disable transition while we tweak CSS
$('#slider-container').addClass('notransition');
// "Delete" the right part of the slider
$('#slideTo').css('display', 'none');
// Push the slider to the right
$('#slider-container').css('margin-left', '0px');
// slideBack should contain the old view,
// so we copypasta what's in the "center" slider (#main)
$('#slideBack').show().html($('#main').html());
leSwap();
// So now things look like:
//
// | |
// | the screen |
// | |
//
// . . #slideBack . #main .
// . . the old view . the new view .
// ^ ^ ^
// margin-left: -100% currently shown
//
// <<<===== sliiiiide <<<=======
// Re-add transition effect
$('#slider-container').removeClass('notransition');
// And actually play the transition effect that will move the container from right to left
$('#slider-container').css('margin-left', '-100%');
}
// No slideing effect