Migrate reorder categories to components
This commit is contained in:
parent
bf49c38faf
commit
33fd84c990
|
@ -1,4 +1,4 @@
|
|||
<div class="modal-body reorder-categories full-height-modal">
|
||||
{{#d-modal-body class="reorder-categories full-height-modal" title="categories.reorder.title"}}
|
||||
<div id="rc-scroll-anchor"></div>
|
||||
<table>
|
||||
<thead>
|
||||
|
@ -20,7 +20,7 @@
|
|||
{{/each}}
|
||||
</table>
|
||||
<div id="rc-scroll-bottom"></div>
|
||||
</div>
|
||||
{{/d-modal-body}}
|
||||
|
||||
<div class="modal-footer">
|
||||
{{#if showFixIndices}}
|
||||
|
|
|
@ -1,80 +0,0 @@
|
|||
import ModalBodyView from "discourse/views/modal-body";
|
||||
|
||||
export default ModalBodyView.extend({
|
||||
title: I18n.t('categories.reorder.title'),
|
||||
templateName: 'modal/reorder-categories',
|
||||
|
||||
_setup: function() {
|
||||
this.get('controller').on('scrollIntoView', this, this.scrollIntoView);
|
||||
}.on('didInsertElement'),
|
||||
_teardown: function() {
|
||||
this.get('controller').off('scrollIntoView', this, this.scrollIntoView);
|
||||
this.set('prevScrollElem', null);
|
||||
}.on('willClearRender'),
|
||||
|
||||
scrollIntoView() {
|
||||
const elem = this.$('tr[data-category-id="' + this.get('controller.scrollIntoViewId') + '"]');
|
||||
const scrollParent = this.$('.modal-body');
|
||||
const eoff = elem.position();
|
||||
const poff = $(document.getElementById('rc-scroll-anchor')).position();
|
||||
const currHeight = scrollParent.height();
|
||||
|
||||
elem[0].className = "highlighted";
|
||||
|
||||
const goal = eoff.top - poff.top - currHeight / 2,
|
||||
current = scrollParent.scrollTop();
|
||||
scrollParent.scrollTop(9999999);
|
||||
const max = scrollParent.scrollTop();
|
||||
scrollParent.scrollTop(current);
|
||||
|
||||
const doneTimeout = setTimeout(function() {
|
||||
elem[0].className = "highlighted done";
|
||||
setTimeout(function() {
|
||||
elem[0].className = "";
|
||||
}, 2000);
|
||||
}, 0);
|
||||
|
||||
if (goal > current - currHeight / 4 && goal < current + currHeight / 4) {
|
||||
// Too close to goal
|
||||
return;
|
||||
}
|
||||
if (max - current < 10 && goal > current) {
|
||||
// Too close to bottom
|
||||
return;
|
||||
}
|
||||
if (current < 10 && goal < current) {
|
||||
// Too close to top
|
||||
return;
|
||||
}
|
||||
|
||||
if (!window.requestAnimationFrame) {
|
||||
scrollParent.scrollTop(goal);
|
||||
} else {
|
||||
clearTimeout(doneTimeout);
|
||||
const startTime = performance.now();
|
||||
const duration = 100;
|
||||
|
||||
const doScroll = function(timestamp) {
|
||||
let progress = (timestamp - startTime) / duration;
|
||||
if (progress > 1) {
|
||||
progress = 1;
|
||||
setTimeout(function() {
|
||||
elem[0].className = "highlighted done";
|
||||
setTimeout(function() {
|
||||
elem[0].className = "";
|
||||
}, 2000);
|
||||
}, 0);
|
||||
} else if (progress < 0) {
|
||||
progress = 0;
|
||||
}
|
||||
if (progress < 1) {
|
||||
window.requestAnimationFrame(doScroll);
|
||||
}
|
||||
|
||||
const iprogress = 1 - progress;
|
||||
scrollParent.scrollTop(goal * progress + current * iprogress);
|
||||
};
|
||||
window.requestAnimationFrame(doScroll);
|
||||
}
|
||||
}
|
||||
});
|
Loading…
Reference in New Issue