Merge branch 'patching-v0.27'

This commit is contained in:
Dan Brown 2019-10-16 16:37:29 +01:00
commit b24279cc12
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 33 additions and 22 deletions

View File

@ -26,10 +26,12 @@ class PageComments {
handleAction(event) { handleAction(event) {
let actionElem = event.target.closest('[action]'); let actionElem = event.target.closest('[action]');
if (event.target.matches('a[href^="#"]')) { if (event.target.matches('a[href^="#"]')) {
const id = event.target.href.split('#')[1]; const id = event.target.href.split('#')[1];
scrollAndHighlightElement(document.querySelector('#' + id)); scrollAndHighlightElement(document.querySelector('#' + id));
} }
if (actionElem === null) return; if (actionElem === null) return;
event.preventDefault(); event.preventDefault();

View File

@ -1,3 +1,10 @@
/**
* Used in the function below to store references of clean-up functions.
* Used to ensure only one transitionend function exists at any time.
* @type {WeakMap<object, any>}
*/
const animateStylesCleanupMap = new WeakMap();
/** /**
* Fade out the given element. * Fade out the given element.
* @param {Element} element * @param {Element} element
@ -5,6 +12,7 @@
* @param {Function|null} onComplete * @param {Function|null} onComplete
*/ */
export function fadeOut(element, animTime = 400, onComplete = null) { export function fadeOut(element, animTime = 400, onComplete = null) {
cleanupExistingElementAnimation(element);
animateStyles(element, { animateStyles(element, {
opacity: ['1', '0'] opacity: ['1', '0']
}, animTime, () => { }, animTime, () => {
@ -19,6 +27,7 @@ export function fadeOut(element, animTime = 400, onComplete = null) {
* @param {Number} animTime * @param {Number} animTime
*/ */
export function slideUp(element, animTime = 400) { export function slideUp(element, animTime = 400) {
cleanupExistingElementAnimation(element);
const currentHeight = element.getBoundingClientRect().height; const currentHeight = element.getBoundingClientRect().height;
const computedStyles = getComputedStyle(element); const computedStyles = getComputedStyle(element);
const currentPaddingTop = computedStyles.getPropertyValue('padding-top'); const currentPaddingTop = computedStyles.getPropertyValue('padding-top');
@ -41,6 +50,7 @@ export function slideUp(element, animTime = 400) {
* @param {Number} animTime - Animation time in ms * @param {Number} animTime - Animation time in ms
*/ */
export function slideDown(element, animTime = 400) { export function slideDown(element, animTime = 400) {
cleanupExistingElementAnimation(element);
element.style.display = 'block'; element.style.display = 'block';
const targetHeight = element.getBoundingClientRect().height; const targetHeight = element.getBoundingClientRect().height;
const computedStyles = getComputedStyle(element); const computedStyles = getComputedStyle(element);
@ -56,13 +66,6 @@ export function slideDown(element, animTime = 400) {
animateStyles(element, animStyles, animTime); animateStyles(element, animStyles, animTime);
} }
/**
* Used in the function below to store references of clean-up functions.
* Used to ensure only one transitionend function exists at any time.
* @type {WeakMap<object, any>}
*/
const animateStylesCleanupMap = new WeakMap();
/** /**
* Animate the css styles of an element using FLIP animation techniques. * Animate the css styles of an element using FLIP animation techniques.
* Styles must be an object where the keys are style properties, camelcase, and the values * Styles must be an object where the keys are style properties, camelcase, and the values
@ -84,23 +87,28 @@ function animateStyles(element, styles, animTime = 400, onComplete = null) {
} }
element.style.transition = null; element.style.transition = null;
element.removeEventListener('transitionend', cleanup); element.removeEventListener('transitionend', cleanup);
animateStylesCleanupMap.delete(element);
if (onComplete) onComplete(); if (onComplete) onComplete();
}; };
setTimeout(() => { setTimeout(() => {
requestAnimationFrame(() => { element.style.transition = `all ease-in-out ${animTime}ms`;
element.style.transition = `all ease-in-out ${animTime}ms`; for (let style of styleNames) {
for (let style of styleNames) { element.style[style] = styles[style][1];
element.style[style] = styles[style][1]; }
}
if (animateStylesCleanupMap.has(element)) { element.addEventListener('transitionend', cleanup);
const oldCleanup = animateStylesCleanupMap.get(element); animateStylesCleanupMap.set(element, cleanup);
element.removeEventListener('transitionend', oldCleanup); }, 15);
} }
element.addEventListener('transitionend', cleanup); /**
animateStylesCleanupMap.set(element, cleanup); * Run the active cleanup action for the given element.
}); * @param {Element} element
}, 10); */
function cleanupExistingElementAnimation(element) {
if (animateStylesCleanupMap.has(element)) {
const oldCleanup = animateStylesCleanupMap.get(element);
oldCleanup();
}
} }

View File

@ -253,7 +253,8 @@ $btt-size: 40px;
.list-sort { .list-sort {
display: inline-grid; display: inline-grid;
margin-left: $-s; margin-left: $-s;
grid-template-columns: 120px 40px; grid-template-columns: minmax(120px, max-content) 40px;
font-size: 0.9rem;
border: 2px solid #DDD; border: 2px solid #DDD;
border-radius: 4px; border-radius: 4px;
} }

View File

@ -31,7 +31,7 @@
<button type="button" dropdown-toggle aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button> <button type="button" dropdown-toggle aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li> <li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
<li><a action="delete" href="#" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li> <li><button action="delete" type="button" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</button></li>
</ul> </ul>
</div> </div>
@endif @endif