39f3dbd945
* renames `select-box-kit` into `select-kit`
* introduces `single-select` and `multi-select` as base components
* introduces {{search-advanced-category-chooser}} as a better component for selecting category in advanced search
* improves events handling in select-kit
* recreates color selection inputs using {{multi-select}} and a custom {{selected-color}} component
* replaces category-selector by a component using select-kit and based on multi-select
* improves positioning of wrapper
* removes the need for offscreen, and instead use `select-kit-header` as a base focus point for all select-kit based components
* introduces a formal plugin api for select-kit based components
* introduces a formal pattern for loading and updating select-kit based components:
```
computeValue()
computeContent()
mutateValue()
```
90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
import MountWidget from 'discourse/components/mount-widget';
|
|
import Docking from 'discourse/mixins/docking';
|
|
import { observes } from 'ember-addons/ember-computed-decorators';
|
|
|
|
const headerPadding = () => parseInt($('#main-outlet').css('padding-top')) + 3;
|
|
|
|
export default MountWidget.extend(Docking, {
|
|
widget: 'topic-timeline-container',
|
|
dockBottom: null,
|
|
dockAt: null,
|
|
|
|
buildArgs() {
|
|
let attrs = {
|
|
topic: this.get('topic'),
|
|
notificationLevel: this.get('notificationLevel'),
|
|
topicTrackingState: this.topicTrackingState,
|
|
enteredIndex: this.get('enteredIndex'),
|
|
dockAt: this.dockAt,
|
|
dockBottom: this.dockBottom,
|
|
mobileView: this.get('site.mobileView')
|
|
};
|
|
|
|
let event = this.get('prevEvent');
|
|
if (event) {
|
|
attrs.enteredIndex = event.postIndex-1;
|
|
}
|
|
|
|
if (this.get('fullscreen')) {
|
|
attrs.fullScreen = true;
|
|
attrs.addShowClass = this.get('addShowClass');
|
|
} else {
|
|
attrs.top = this.dockAt || headerPadding();
|
|
}
|
|
|
|
return attrs;
|
|
},
|
|
|
|
@observes('topic.highest_post_number', 'loading')
|
|
newPostAdded() {
|
|
this.queueRerender(() => this.queueDockCheck());
|
|
},
|
|
|
|
@observes('topic.details.notification_level')
|
|
_queueRerender() {
|
|
this.queueRerender();
|
|
},
|
|
|
|
dockCheck(info) {
|
|
const mainOffset = $('#main').offset();
|
|
const offsetTop = mainOffset ? mainOffset.top : 0;
|
|
const topicTop = $('.container.posts').offset().top - offsetTop;
|
|
const topicBottom = $('#topic-bottom').offset().top;
|
|
const $timeline = this.$('.timeline-container');
|
|
const timelineHeight = $timeline.height() || 400;
|
|
const footerHeight = $('.timeline-footer-controls').outerHeight(true) || 0;
|
|
|
|
const prev = this.dockAt;
|
|
const posTop = headerPadding() + info.offset();
|
|
const pos = posTop + timelineHeight;
|
|
|
|
this.dockBottom = false;
|
|
if (posTop < topicTop) {
|
|
this.dockAt = topicTop;
|
|
} else if (pos > topicBottom + footerHeight) {
|
|
this.dockAt = (topicBottom - timelineHeight) + footerHeight;
|
|
this.dockBottom = true;
|
|
if (this.dockAt < 0) { this.dockAt = 0; }
|
|
} else {
|
|
this.dockAt = null;
|
|
}
|
|
|
|
if (this.dockAt !== prev) {
|
|
this.queueRerender();
|
|
}
|
|
},
|
|
|
|
didInsertElement() {
|
|
this._super();
|
|
|
|
if (this.get('fullscreen') && !this.get('addShowClass')) {
|
|
Em.run.next(()=>{
|
|
this.set('addShowClass', true);
|
|
this.queueRerender();
|
|
});
|
|
}
|
|
|
|
this.dispatch('topic:current-post-scrolled', 'timeline-scrollarea');
|
|
}
|
|
});
|