fe588cc7f8
* DEV: Fix the function prototype observers deprecation
DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.observes('foo') to observer('foo', function() {}). [deprecation id: function-prototype-extensions.observes] See https://deprecations.emberjs.com/v3.x/#toc_function-prototype-extensions-observes for more details.
* DEV: Fix the function prototype event listeners deprecation
DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.on('foo') to on('foo', function() {}). [deprecation id: function-prototype-extensions.on] See https://deprecations.emberjs.com/v3.x/#toc_function-prototype-extensions-on for more details.
* DEV: Simplify `default as` imports
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
108 lines
2.6 KiB
JavaScript
108 lines
2.6 KiB
JavaScript
import { next } from "@ember/runloop";
|
|
import Component from "@ember/component";
|
|
/* global Pikaday:true */
|
|
import loadScript from "discourse/lib/load-script";
|
|
import discourseComputed, { on } from "discourse-common/utils/decorators";
|
|
|
|
export default Component.extend({
|
|
classNames: ["d-date-input"],
|
|
date: null,
|
|
_picker: null,
|
|
|
|
@discourseComputed("site.mobileView")
|
|
inputType(mobileView) {
|
|
return mobileView ? "date" : "text";
|
|
},
|
|
|
|
@on("didInsertElement")
|
|
_loadDatePicker() {
|
|
const container = this.element.querySelector(`#${this.containerId}`);
|
|
|
|
if (this.site.mobileView) {
|
|
this._loadNativePicker(container);
|
|
} else {
|
|
this._loadPikadayPicker(container);
|
|
}
|
|
|
|
if (this.date && this._picker) {
|
|
this._picker.setDate(this.date, true);
|
|
}
|
|
},
|
|
|
|
didUpdateAttrs() {
|
|
this._super(...arguments);
|
|
|
|
if (this._picker) {
|
|
this._picker.setDate(this.date, true);
|
|
}
|
|
},
|
|
|
|
_loadPikadayPicker(container) {
|
|
loadScript("/javascripts/pikaday.js").then(() => {
|
|
next(() => {
|
|
const default_opts = {
|
|
field: this.element.querySelector(".date-picker"),
|
|
container: container || this.element,
|
|
bound: container === null,
|
|
format: "LL",
|
|
firstDay: 1,
|
|
i18n: {
|
|
previousMonth: I18n.t("dates.previous_month"),
|
|
nextMonth: I18n.t("dates.next_month"),
|
|
months: moment.months(),
|
|
weekdays: moment.weekdays(),
|
|
weekdaysShort: moment.weekdaysShort()
|
|
},
|
|
onSelect: date => this._handleSelection(date)
|
|
};
|
|
|
|
this._picker = new Pikaday(Object.assign(default_opts, this._opts()));
|
|
this._picker.setDate(this.date, true);
|
|
});
|
|
});
|
|
},
|
|
|
|
_loadNativePicker(container) {
|
|
const wrapper = container || this.element;
|
|
const picker = wrapper.querySelector("input.date-picker");
|
|
picker.onchange = () => this._handleSelection(picker.value);
|
|
picker.hide = () => {
|
|
/* do nothing for native */
|
|
};
|
|
picker.destroy = () => {
|
|
/* do nothing for native */
|
|
};
|
|
picker.setDate = date => {
|
|
picker.value = date;
|
|
};
|
|
this._picker = picker;
|
|
},
|
|
|
|
_handleSelection(value) {
|
|
if (!this.element || this.isDestroying || this.isDestroyed) return;
|
|
|
|
this._picker && this._picker.hide();
|
|
|
|
if (this.onChange) {
|
|
this.onChange(moment(value).toDate());
|
|
}
|
|
},
|
|
|
|
@on("willDestroyElement")
|
|
_destroy() {
|
|
if (this._picker) {
|
|
this._picker.destroy();
|
|
}
|
|
this._picker = null;
|
|
},
|
|
|
|
@discourseComputed()
|
|
placeholder() {
|
|
return I18n.t("dates.placeholder");
|
|
},
|
|
|
|
_opts() {
|
|
return null;
|
|
}
|
|
});
|