Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flatpickr #1533

Merged
merged 4 commits into from
Jan 23, 2019
Merged

Flatpickr #1533

merged 4 commits into from
Jan 23, 2019

Conversation

mamhoff
Copy link
Contributor

@mamhoff mamhoff commented Jan 22, 2019 •
edited
Loading

What is this pull request for?

This replaces our JQuery-based Date picker library with the more modern 'flatpickr' library.

Notable changes (remove if none)

We change the behaviour of input fields of for dates and times to behave properly.

Screenshots (remove if none)

German Datetime field
grafik

German Date field
grafik

@mamhoff mamhoff force-pushed the flatpickr branch 7 times, most recently from e931d2e to 4b7a3ba Compare January 23, 2019 11:59
tvdeyen
tvdeyen requested changes Jan 23, 2019
View reviewed changes
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is very nice! Thank you for working on that.

The time picker does not work any more. You can check that in the dummy app on the Event module. Creating an event should have a time picker on the "Lunch starts at" and "Lunch ends at" fields. Could you look into that as well?

app/assets/javascripts/alchemy/alchemy.translations.js.coffee Outdated Show resolved Hide resolved
app/helpers/alchemy/admin/base_helper.rb Outdated Show resolved Hide resolved
@mamhoff
Copy link
Contributor Author

mamhoff commented Jan 23, 2019

This does work. The "Lunch starts at" and "Lunch ends at" fields are datetime fields, and Flatpickr displays the time picker only once the user has selected a date. See flatpickr/flatpickr#1047.

We could add the callback so it displays always (see https://jsfiddle.net/66cy6omq/), or just stay with Flatpickrs default behaviour. What do you think?

@tvdeyen
Copy link
Member

tvdeyen commented Jan 23, 2019

The "Lunch starts at" and "Lunch ends at" fields are datetime fields

Hmm, in my dummy app these are time fields.

Flatpickr displays the time picker only once the user has selected a date

I think that flatpickrs behaviour is definitely wrong here. No user will ever understand to pick a date first and a time second. What a weird assumption. Anyhow, unfortunately the JSfiddle demo is not working for me (just a blank page). So, I cannot say anything to the proposed fix.

tvdeyen
tvdeyen requested changes Jan 23, 2019
View reviewed changes
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One small change is necessary to fix the time picker

app/assets/javascripts/alchemy/alchemy.datepicker.js.coffee Outdated Show resolved Hide resolved
@mamhoff
Replace xdsoft Datepicker with Flatpickr
1429d0d 
For non-English locales, Flatpickr behaves much nicer than the previous
XDSoft Datepicker JQuery plugin: It keeps the `value` of the input field
in the ISO format, but displays the date / time / datetime in the
correct locale. Flatpickr comes with nice localization plugins that
decide for us how dates should be displayed for non-English locales.

This also replaces usage of our English-only JS date formatting library.
@mamhoff
Remove Date Formatter
553f0f2 
This JS library could only handle angloamerican dates, and
was used only for the fields page#public_on and Page#public_until.

Flatpickr will be able to handle this and more cases.
@mamhoff
Remove XDSoft Datepicker
e1ca720
tvdeyen
tvdeyen approved these changes Jan 23, 2019
View reviewed changes
Copy link
Member

@tvdeyen tvdeyen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome. Thanks again for working on this 👏

@tvdeyen tvdeyen merged commit 2816642 into AlchemyCMS:master Jan 23, 2019
@mamhoff mamhoff deleted the flatpickr branch January 23, 2019 14:48
@tvdeyen tvdeyen added this to the 4.2 milestone Jan 26, 2019
tvdeyen added a commit to tvdeyen/alchemy_cms that referenced this pull request Mar 29, 2019
@tvdeyen
v4.2.0.rc1
659fa03 
- Use element name local in generators [AlchemyCMS#1556](AlchemyCMS#1556) ([tvdeyen](https://github.com/tvdeyen))
- Remove invalid bytecode handler [AlchemyCMS#1555](AlchemyCMS#1555) ([tvdeyen](https://github.com/tvdeyen))
- Separate render element calls [AlchemyCMS#1554](AlchemyCMS#1554) ([tvdeyen](https://github.com/tvdeyen))
- Expose the element into partials as local object [AlchemyCMS#1553](AlchemyCMS#1553) ([tvdeyen](https://github.com/tvdeyen))
- Allow admins to switch all languages [AlchemyCMS#1552](AlchemyCMS#1552) ([tvdeyen](https://github.com/tvdeyen))
- Raise targeted Ruby version to 2.3 [AlchemyCMS#1545](AlchemyCMS#1545) ([tvdeyen](https://github.com/tvdeyen))
- Introduces an Elements finder class [AlchemyCMS#1544](AlchemyCMS#1544) ([tvdeyen](https://github.com/tvdeyen))
- Fixate sqlite dep for bug fix [AlchemyCMS#1543](AlchemyCMS#1543) ([tvdeyen](https://github.com/tvdeyen))
- Upgrade shoulda-matchers to version 4.0.0 [AlchemyCMS#1542](AlchemyCMS#1542) ([depfu](https://github.com/apps/depfu))
- Upgrade factory_bot_rails to version 5.0.1 [AlchemyCMS#1540](AlchemyCMS#1540) ([depfu](https://github.com/apps/depfu))
- Use Flatpickr as Datepicker [AlchemyCMS#1533](AlchemyCMS#1533) ([mamhoff](https://github.com/mamhoff))
-  Use system tests over feature specs [AlchemyCMS#1528](AlchemyCMS#1528) ([tvdeyen](https://github.com/tvdeyen))
- Flexible width for admin navigation entry labels [AlchemyCMS#1527](AlchemyCMS#1527) ([tvdeyen](https://github.com/tvdeyen))
- Responsive elements window and sidebar [AlchemyCMS#1519](AlchemyCMS#1519) ([tvdeyen](https://github.com/tvdeyen))
- Change element eye icon on public state [AlchemyCMS#1517](AlchemyCMS#1517) ([oniram88](https://github.com/oniram88))
- Maximize element window if Tinymce is fullscreen [AlchemyCMS#1515](AlchemyCMS#1515) ([tvdeyen](https://github.com/tvdeyen))
- Remove cells in favour of fixed elements [AlchemyCMS#1514](AlchemyCMS#1514) ([tvdeyen](https://github.com/tvdeyen))
- Feature: Autogenerate nestable elements [AlchemyCMS#1513](AlchemyCMS#1513) ([tvdeyen](https://github.com/tvdeyen))
- Allow "data" key for module navigations [AlchemyCMS#1512](AlchemyCMS#1512) ([mamhoff](https://github.com/mamhoff))
- Allow to define layout for page previews [AlchemyCMS#1500](AlchemyCMS#1500) ([westonganger](https://github.com/westonganger))
- Fix capitalization for login/logout/leave [AlchemyCMS#1497](AlchemyCMS#1497) ([westonganger](https://github.com/westonganger))
- Verify controller keys within `register_module` [AlchemyCMS#1495](AlchemyCMS#1495) ([westonganger](https://github.com/westonganger))
- Update bundled Tinymce to 4.8.3 [AlchemyCMS#1491](AlchemyCMS#1491) ([tvdeyen](https://github.com/tvdeyen))
- Use dynamic attributes in factories [AlchemyCMS#1484](AlchemyCMS#1484) ([tvdeyen](https://github.com/tvdeyen))
- Migrating to active_model_serializers ~> 0.10.0 [AlchemyCMS#1478](AlchemyCMS#1478) ([pmashchak](https://github.com/pmashchak))
- Replace picture galleries with nestable elements [AlchemyCMS#1358](AlchemyCMS#1358) ([tvdeyen](https://github.com/tvdeyen))
- Add a compact nested element style [AlchemyCMS#1357](AlchemyCMS#1357) by [tvdeyen](https://github.com/tvdeyen)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tvdeyen tvdeyen tvdeyen approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
4.2
Development

Successfully merging this pull request may close these issues.
2 participants
@mamhoff @tvdeyen