Convert period selector to angular & allow plugins to add periods to the frontend (#11873)

* Add generate:angular-component command to generate an angular component.

* Do not modify Date prototype.

* Move period selector code from calendar.js to new angular directive (just move, no refactoring).

* Extract date picker code from period selector code and put into new directive.

* Extract range picking code into separate component than period selector.

* Extract single period calendar to separate component & extract period specific functionality to new extendable periods service.

* Fixing regressions in period selector behavior.

* Move bulk of period selector code from directive to controller, & fix variable name in date range picker template.

* Fix issue w/ yesterday date value, remove need to give period selector directive translations and make sure periods can be extended in the frontend.

* Make sure period selector still works outside of an angular routing context (ie, in embedded dashboard).

* In period selector UI test, hide ajaxLoadingCalendar using CSS since it is now managed by angular.

* Make sure selected period highlighting changes immediately after selecting, even if loading a new page.

* Put period selector top level element ID & classes on correct elements to ensure certain styles work properly.

* Make sure selected period text changes immediately after selecing period, even if loading a new page or changing the URL.

* Make sure range start/end changes immediately when a period is selected & selected period date range stops being highlighted immediately when a range period is selected, even if loading a new page.

* Updating expected screenshots.

* Updating screenshots.

* Assorted fixes for period selector refactor.

- Filter out invalid period labels (can happen if INI config for allowed periods is incorrect).
- When determining display text for range, don't try to format the startRangeDate/endRangeDate vars, they're both strings.
- Use correct selector when closing period selector.

* Set global piwik date/period values on location change, outside of period selector component.

* Do not skip parsing date if it does not start with an int (since the JS can handle today/yesterday/now).

* Assorted fixes for period selector refactor:

- use $onChanges instead of watches in datepicker (watches get triggered every time, $onChanges doesn't)
- don't use arrays for selected/highlighted dates (for some weird reason, changing one of these arrays results in angular thinking it changes 3 times instead of once)
- don't redraw on triggered mouseover events (something triggers mouseover when a date is selected, probably jquery datepicker)
- draw after a setTimeout when a date is selected so our drawing occurs after jquery datepicker draws

* Achieving smoother rendering for period selector by removing click handlers jquery datepicker adds.

Also fixed bug where selecting the current period type reset the view date for the date picker.

* Bound range date in period selector by piwik min/max date, so inferred dates will always be within allowed pickable dates in picker.

* Removing ES6 used by accident + fix for issue when switching from non-year to year period (ui-datepicker-current-day class does not get removed).

* Fix for angularjs one way binding quirk: initial property value is set before $onInit not during construction.

* Avoid an exception when a date input in the date range picker is empty.

* Split up change/keyup event to solve strange race condition in IE 10 on browserstack.

* Change period selector "click again" tooltip to "double click".

* Remove tabindexes > 1 so period selector control can be tabbed through.

* Show visual cue for invalid dates in date range picker.

* Only hide period option tooltip if period is active period, not if period is selected period.

* In period selector, disable apply button if range is invalid. Also fix case when \$.datepicker.parseDate returns null instead of throwing.

10 files changed, 21 insertions, 19 deletions

diff --git a/tests/UI/expected-screenshots/PeriodSelector_date_range_selected.png b/tests/UI/expected-screenshots/PeriodSelector_date_range_selected.png
index 867765096f..043e8cc185 100644
--- a/tests/UI/expected-screenshots/PeriodSelector_date_range_selected.png
+++ b/tests/UI/expected-screenshots/PeriodSelector_date_range_selected.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c56874c629d82a3a03bfee883795b813cf799790da764b68e133f95ec8c791ad
-size 23431
+oid sha256:3f9e9aa21aaf930dcc47d5a527c558c7e966d8a552b8863655cd1612f2cda9ef
+size 28612
diff --git a/tests/UI/expected-screenshots/PeriodSelector_day_selected.png b/tests/UI/expected-screenshots/PeriodSelector_day_selected.png
index da3fbc65e3..768e6e6112 100644
--- a/tests/UI/expected-screenshots/PeriodSelector_day_selected.png
+++ b/tests/UI/expected-screenshots/PeriodSelector_day_selected.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a98dbfa0d1639042cbd9b7c595b586bf28f8b314156726cee01d935e4664d8af
-size 18682
+oid sha256:3723ee09dbb7f3a5416705954627c09ac1ae25c93e3d02ed42c6a91af94698c5
+size 18984
diff --git a/tests/UI/expected-screenshots/PeriodSelector_month_changed.png b/tests/UI/expected-screenshots/PeriodSelector_month_changed.png
index b05a369d91..7cd6714a4f 100644
--- a/tests/UI/expected-screenshots/PeriodSelector_month_changed.png
+++ b/tests/UI/expected-screenshots/PeriodSelector_month_changed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d6b0b9d4a526919573fb6f16735eea6ebfdf9c377677920b02ac1a9173053c55
-size 18384
+oid sha256:bbb8f9de1e98cfb693a9d237b220b2869253ae979fd6a54d4e7154d2728d107b
+size 18684
diff --git a/tests/UI/expected-screenshots/PeriodSelector_month_selected.png b/tests/UI/expected-screenshots/PeriodSelector_month_selected.png
index a615349421..94466b0ae9 100644
--- a/tests/UI/expected-screenshots/PeriodSelector_month_selected.png
+++ b/tests/UI/expected-screenshots/PeriodSelector_month_selected.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:007440837cd56eb6e0cce1729bf35a1076188c5f0db89287ac7952e66275a6bc
-size 19014
+oid sha256:5dbf734784e050cb053d60f042a355f05820620ed7c71325c7e007ff1c0020e7
+size 19325
diff --git a/tests/UI/expected-screenshots/PeriodSelector_range_picker_displayed.png b/tests/UI/expected-screenshots/PeriodSelector_range_picker_displayed.png
index 44d09496fb..b13cca0710 100644
--- a/tests/UI/expected-screenshots/PeriodSelector_range_picker_displayed.png
+++ b/tests/UI/expected-screenshots/PeriodSelector_range_picker_displayed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:90797bf829e796f70dbbceab33467da5bb7d8c7ff0c52effdd083248c433b922
-size 22474
+oid sha256:8e0736b02a451d682ad5e17aaaa8298f80140f8eb4bfa05dbfbbbd3a47aa2de0
+size 28343
diff --git a/tests/UI/expected-screenshots/PeriodSelector_week_selected.png b/tests/UI/expected-screenshots/PeriodSelector_week_selected.png
index 85f3fd9a70..99260f5e5b 100644
--- a/tests/UI/expected-screenshots/PeriodSelector_week_selected.png
+++ b/tests/UI/expected-screenshots/PeriodSelector_week_selected.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:650509fc23b46aa6c137e197a527a8cb0eeaad88f75e42e327c3ee55fac9231f
-size 19542
+oid sha256:02331a3b4b28d3044ee57506765e5865aaeeb884a17eb3f99b868fd7002f243b
+size 19619
diff --git a/tests/UI/expected-screenshots/PeriodSelector_year_changed.png b/tests/UI/expected-screenshots/PeriodSelector_year_changed.png
index 8df13d86c3..2c78215bdb 100644
--- a/tests/UI/expected-screenshots/PeriodSelector_year_changed.png
+++ b/tests/UI/expected-screenshots/PeriodSelector_year_changed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a030f85c6e25daefdff2834c1b1853dacc8db307fa9fc949f6fdffc07031d589
-size 18219
+oid sha256:cb1883324a3c60ee6e3be7da509e2da21d2c8e7e5714b4f791f1384abb67dcf8
+size 18546
diff --git a/tests/UI/expected-screenshots/PeriodSelector_year_selected.png b/tests/UI/expected-screenshots/PeriodSelector_year_selected.png
index 12d307bd50..f1e0b934f5 100644
--- a/tests/UI/expected-screenshots/PeriodSelector_year_selected.png
+++ b/tests/UI/expected-screenshots/PeriodSelector_year_selected.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b0214d87e4d73c36740a03f1b7941859999775a9934d114bfaa7a1d07aaaa26e
-size 18190
+oid sha256:7ec9fec62220cddf5ffc038ac0c185b00973a553403577a1b85baedd401b5ce8
+size 18467
diff --git a/tests/UI/expected-screenshots/UIIntegrationTest_period_select_date_range_click.png b/tests/UI/expected-screenshots/UIIntegrationTest_period_select_date_range_click.png
index be31bc0727..de0e3afaee 100644
--- a/tests/UI/expected-screenshots/UIIntegrationTest_period_select_date_range_click.png
+++ b/tests/UI/expected-screenshots/UIIntegrationTest_period_select_date_range_click.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:664c4bcb979875f8c38d9867cbb5a37fff576fa652c0ae3b386939150728ca0a
-size 64873
+oid sha256:5f8077db8b79861f25368b51286b461d02583fd8286c7f31a8060b4ec426f5aa
+size 65189
diff --git a/tests/UI/specs/PeriodSelector_spec.js b/tests/UI/specs/PeriodSelector_spec.js
index 410c4026d7..6e7ab8949f 100644
--- a/tests/UI/specs/PeriodSelector_spec.js
+++ b/tests/UI/specs/PeriodSelector_spec.js
@@ -26,7 +26,9 @@ describe("PeriodSelector", function () {
                 };
 
                 broadcast.propagateNewPage = function () {};
-                $('#ajaxLoadingCalendar').remove();
+
+                // hide ajaxLoadingCalendar via CSS (can't just remove it since it's managed by angular)
+                $('head').append('<style type="text/css">#ajaxLoadingCalendar { display: none !important; }</style>');
             });
         }, done);
     });