From 497a1d2d9f12d97243823e1bacbe02e900fdf68a Mon Sep 17 00:00:00 2001 From: Joffrey JAFFEUX Date: Tue, 4 Jun 2019 10:44:55 +0200 Subject: [PATCH] FEATURE: uses native date picker on mobile (#7541) --- .../discourse/components/date-picker.js.es6 | 64 +++++++++++++------ .../components/future-date-input.js.es6 | 32 ++++++---- .../templates/components/date-picker.hbs | 6 +- .../base/edit-topic-status-update-modal.scss | 2 +- 4 files changed, 73 insertions(+), 31 deletions(-) diff --git a/app/assets/javascripts/discourse/components/date-picker.js.es6 b/app/assets/javascripts/discourse/components/date-picker.js.es6 index 8350c2dfe0b..24ae9a6ad32 100644 --- a/app/assets/javascripts/discourse/components/date-picker.js.es6 +++ b/app/assets/javascripts/discourse/components/date-picker.js.es6 @@ -8,18 +8,31 @@ import { export default Ember.Component.extend({ classNames: ["date-picker-wrapper"], _picker: null, + value: null, + + @computed("site.mobileView") + inputType(mobileView) { + return mobileView ? "date" : "text"; + }, @on("didInsertElement") _loadDatePicker() { - const input = this.$(".date-picker")[0]; - const container = $("#" + this.containerId)[0]; + const container = this.element.querySelector(`#${this.containerId}`); + if (this.site.mobileView) { + this._loadNativePicker(container); + } else { + this._loadPikadayPicker(container); + } + }, + + _loadPikadayPicker(container) { loadScript("/javascripts/pikaday.js").then(() => { Ember.run.next(() => { - let default_opts = { - field: input, - container: container || this.$()[0], - bound: container === undefined, + const default_opts = { + field: this.element.querySelector(".date-picker"), + container: container || this.element, + bound: container === null, format: "YYYY-MM-DD", firstDay: 1, i18n: { @@ -29,24 +42,39 @@ export default Ember.Component.extend({ weekdays: moment.weekdays(), weekdaysShort: moment.weekdaysShort() }, - onSelect: date => { - const formattedDate = moment(date).format("YYYY-MM-DD"); - - if (this.attrs.onSelect) { - this.attrs.onSelect(formattedDate); - } - - if (!this.element || this.isDestroying || this.isDestroyed) return; - - this.set("value", formattedDate); - } + onSelect: date => this._handleSelection(date) }; - this._picker = new Pikaday(_.merge(default_opts, this._opts())); + this._picker = new Pikaday(Object.assign(default_opts, this._opts())); }); }); }, + _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 */ + }; + this._picker = picker; + }, + + _handleSelection(value) { + const formattedDate = moment(value).format("YYYY-MM-DD"); + + if (!this.element || this.isDestroying || this.isDestroyed) return; + + this._picker && this._picker.hide(); + + if (this.onSelect) { + this.onSelect(formattedDate); + } + }, + @on("willDestroyElement") _destroy() { if (this._picker) { diff --git a/app/assets/javascripts/discourse/components/future-date-input.js.es6 b/app/assets/javascripts/discourse/components/future-date-input.js.es6 index 45221ac7193..4efb9da1497 100644 --- a/app/assets/javascripts/discourse/components/future-date-input.js.es6 +++ b/app/assets/javascripts/discourse/components/future-date-input.js.es6 @@ -3,7 +3,6 @@ import { observes } from "ember-addons/ember-computed-decorators"; import { FORMAT } from "select-kit/components/future-date-input-selector"; - import { PUBLISH_TO_CATEGORY_STATUS_TYPE } from "discourse/controllers/edit-topic-timer"; export default Ember.Component.extend({ @@ -22,16 +21,16 @@ export default Ember.Component.extend({ init() { this._super(...arguments); - const input = this.input; - - if (input) { + if (this.input) { if (this.basedOnLastPost) { this.set("selection", "set_based_on_last_post"); } else { - this.set("selection", "pick_date_and_time"); - const datetime = moment(input); - this.set("date", datetime.toDate()); - this.set("time", datetime.format("HH:mm")); + const datetime = moment(this.input); + this.setProperties({ + selection: "pick_date_and_time", + date: datetime.format("YYYY-MM-DD"), + time: datetime.format("HH:mm") + }); this._updateInput(); } } @@ -39,9 +38,18 @@ export default Ember.Component.extend({ @observes("date", "time") _updateInput() { - const date = moment(this.date).format("YYYY-MM-DD"); - const time = (this.time && ` ${this.time}`) || ""; - this.set("input", moment(`${date}${time}`).format(FORMAT)); + if (!this.date) { + this.set("time", null); + } + + const time = this.time ? ` ${this.time}` : ""; + const dateTime = moment(`${this.date}${time}`); + + if (dateTime.isValid()) { + this.set("input", dateTime.format(FORMAT)); + } else { + this.set("input", null); + } }, @observes("isBasedOnLastPost") @@ -72,6 +80,8 @@ export default Ember.Component.extend({ }, didReceiveAttrs() { + this._super(...arguments); + if (this.label) this.set("displayLabel", I18n.t(this.label)); }, diff --git a/app/assets/javascripts/discourse/templates/components/date-picker.hbs b/app/assets/javascripts/discourse/templates/components/date-picker.hbs index 6e6054c2ad1..e29eb0e73af 100644 --- a/app/assets/javascripts/discourse/templates/components/date-picker.hbs +++ b/app/assets/javascripts/discourse/templates/components/date-picker.hbs @@ -1 +1,5 @@ -{{input type="text" class="date-picker" placeholder=placeholder value=value}} +{{input + type=inputType + class="date-picker" + placeholder=placeholder + value=value}} diff --git a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss index 89723d30a38..8a5b5c416b9 100644 --- a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss +++ b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss @@ -13,7 +13,7 @@ } input.date-picker, input[type="time"] { - width: 150px; + width: 200px; text-align: left; } .radios {