Discourse/discourse
Discourse/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-09-10 01:42:47 +08:00
Code Packages Activity Actions 1

Introduces select-kit

Browse source 
* 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()
```
This commit is contained in:
Joffrey JAFFEUX 2017-11-21 11:53:09 +01:00 • committed by GitHub
parent edc4b30f82
commit 39f3dbd945
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
191 changed files with 3160 additions and 2788 deletions
Download patch file Download diff file Expand all files Collapse all files

167
app/assets/javascripts/select-kit/components/future-date-input-selector.js.es6 Normal file
View file

@ -0,0 +1,167 @@
import ComboBoxComponent from "select-kit/components/combo-box";
import { CLOSE_STATUS_TYPE } from "discourse/controllers/edit-topic-timer";
import DatetimeMixin from "select-kit/components/future-date-input-selector/mixin";
const TIMEFRAME_BASE = {
enabled: () => true,
when: () => null,
icon: 'briefcase',
displayWhen: true,
};
function buildTimeframe(opts) {
return jQuery.extend({}, TIMEFRAME_BASE, opts);
}
export const TIMEFRAMES = [
buildTimeframe({
id: 'later_today',
format: "h a",
enabled: opts => opts.canScheduleToday,
when: (time) => time.hour(18).minute(0),
icon: 'moon-o'
}),
buildTimeframe({
id: "tomorrow",
format: "ddd, h a",
when: (time, timeOfDay) => time.add(1, 'day').hour(timeOfDay).minute(0),
icon: 'sun-o'
}),
buildTimeframe({
id: "later_this_week",
format: "ddd, h a",
enabled: opts => !opts.canScheduleToday && opts.day < 4,
when: (time, timeOfDay) => time.add(2, 'day').hour(timeOfDay).minute(0),
}),
buildTimeframe({
id: "this_weekend",
format: "ddd, h a",
enabled: opts => opts.day < 5 && opts.includeWeekend,
when: (time, timeOfDay) => time.day(6).hour(timeOfDay).minute(0),
icon: 'bed'
}),
buildTimeframe({
id: "next_week",
format: "ddd, h a",
enabled: opts => opts.day !== 7,
when: (time, timeOfDay) => time.add(1, 'week').day(1).hour(timeOfDay).minute(0),
icon: 'briefcase'
}),
buildTimeframe({
id: "two_weeks",
format: "MMM D",
when: (time, timeOfDay) => time.add(2, 'week').hour(timeOfDay).minute(0),
icon: 'briefcase'
}),
buildTimeframe({
id: "next_month",
format: "MMM D",
enabled: opts => opts.now.date() !== moment().endOf("month").date(),
when: (time, timeOfDay) => time.add(1, 'month').startOf('month').hour(timeOfDay).minute(0),
icon: 'briefcase'
}),
buildTimeframe({
id: "three_months",
format: "MMM D",
enabled: opts => opts.includeFarFuture,
when: (time, timeOfDay) => time.add(3, 'month').startOf('month').hour(timeOfDay).minute(0),
icon: 'briefcase'
}),
buildTimeframe({
id: "six_months",
format: "MMM D",
enabled: opts => opts.includeFarFuture,
when: (time, timeOfDay) => time.add(6, 'month').startOf('month').hour(timeOfDay).minute(0),
icon: 'briefcase'
}),
buildTimeframe({
id: "one_year",
format: "MMM D",
enabled: opts => opts.includeFarFuture,
when: (time, timeOfDay) => time.add(1, 'year').startOf('day').hour(timeOfDay).minute(0),
icon: 'briefcase'
}),
buildTimeframe({
id: "forever",
enabled: opts => opts.includeFarFuture,
when: (time, timeOfDay) => time.add(1000, 'year').hour(timeOfDay).minute(0),
icon: 'gavel',
displayWhen: false
}),
buildTimeframe({
id: "pick_date_and_time",
icon: 'calendar-plus-o'
}),
buildTimeframe({
id: "set_based_on_last_post",
enabled: opts => opts.includeBasedOnLastPost,
icon: 'clock-o'
}),
];
let _timeframeById = null;
export function timeframeDetails(id) {
if (!_timeframeById) {
_timeframeById = {};
TIMEFRAMES.forEach(t => _timeframeById[t.id] = t);
}
return _timeframeById[id];
}
export const FORMAT = "YYYY-MM-DD HH:mm";
export default ComboBoxComponent.extend(DatetimeMixin, {
pluginApiIdentifiers: ["future-date-input-selector"],
classNames: ["future-date-input-selector"],
isCustom: Ember.computed.equal("value", "pick_date_and_time"),
clearable: true,
rowComponent: "future-date-input-selector/future-date-input-selector-row",
headerComponent: "future-date-input-selector/future-date-input-selector-header",
computeHeaderContent() {
let content = this.baseHeaderComputedContent();
content.datetime = this._computeDatetimeForValue(this.get("computedValue"));
content.name = this.get("selectedComputedContent.name") || content.name;
content.hasSelection = this.get("hasSelection");
content.icons = this._computeIconsForValue(this.get("computedValue"));
return content;
},
computeContentItem(contentItem, name) {
let item = this.baseComputedContentItem(contentItem, name);
item.datetime = this._computeDatetimeForValue(contentItem.id);
item.icons = this._computeIconsForValue(contentItem.id);
return item;
},
computeContent() {
let now = moment();
let opts = {
now,
day: now.day(),
includeWeekend: this.get('includeWeekend'),
includeFarFuture: this.get('includeFarFuture'),
includeBasedOnLastPost: this.get("statusType") === CLOSE_STATUS_TYPE,
canScheduleToday: (24 - now.hour()) > 6,
};
return TIMEFRAMES.filter(tf => tf.enabled(opts)).map(tf => {
return {
id: tf.id,
name: I18n.t(`topic.auto_update_input.${tf.id}`)
};
});
},
mutateValue(value) {
if (this.get("isCustom")) return;
let input = null;
const { time } = this._updateAt(value);
if (time && !Ember.isEmpty(value)) {
input = time.format(FORMAT);
}
this.setProperties({ input, value });
},
});