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.

1 files changed, 6 insertions, 45 deletions

diff --git a/plugins/CoreHome/templates/_periodSelect.twig b/plugins/CoreHome/templates/_periodSelect.twig
index 8740cf616d..673d85106f 100644
--- a/plugins/CoreHome/templates/_periodSelect.twig
+++ b/plugins/CoreHome/templates/_periodSelect.twig
@@ -1,46 +1,7 @@
-<div id="periodString" piwik-expand-on-click class="piwikTopControl piwikSelector borderedControl periodSelector">
-    <a id="date" class="title" title="{{ 'General_ChooseDate'|translate(prettyDateLong|default(''))|e('html_attr') }}" tabindex="4">
-        <span class="icon icon-calendar"></span>
-        {{ prettyDate }}
-    </a>
-    <div id="periodMore" class="dropdown">
-        <table>
-            <tr>
-                <td>
-                    <div class="period-range" style="display:none;">
-                        <div id="calendarRangeFrom">
-                            <h6>{{ 'General_DateRangeFrom'|translate }}<input tabindex="4" type="text" id="inputCalendarFrom" name="inputCalendarFrom" class="browser-default"/></h6>
-
-                            <div id="calendarFrom"></div>
-                        </div>
-                        <div id="calendarRangeTo">
-                            <h6>{{ 'General_DateRangeTo'|translate }}<input tabindex="4" type="text" id="inputCalendarTo" name="inputCalendarTo" class="browser-default"/></h6>
-
-                            <div id="calendarTo"></div>
-                        </div>
-                    </div>
-                    <div class="period-date">
-                        <div id="datepicker"></div>
-                    </div>
-                </td>
-                <td>
-                    <div class="period-type">
-                        <h6>{{ 'General_Period'|translate }}</h6>
-                        <span id="otherPeriods">
-                            {% for label,thisPeriod in periodsNames %}
-                                <p>
-                                    <input type="radio" name="period"  tabindex="4" id="period_id_{{ label }}" value="{{ linkTo( { 'period': label} ) }}"{% if label==period %} checked="checked"{% endif %} />
-                                    <label for="period_id_{{ label }}">{{ thisPeriod.singular }}</label>
-                                </p>
-                            {% endfor %}
-                        </span>
-                        <input tabindex="4" type="submit" value="{{ 'General_Apply'|translate }}" id="calendarApply" class="btn"/>
-                        {% import 'ajaxMacros.twig' as ajax %}
-                        {{ ajax.loadingDiv('ajaxLoadingCalendar') }}
-                    </div>
-                </td>
-            </tr>
-        </table>
-    </div>
-    <div class="period-click-tooltip" style="display:none;">{{ 'General_ClickToChangePeriod'|translate }}</div>
+<div
+    id="periodString"
+    piwik-period-selector
+    periods="{{ enabledPeriods|json_encode|e('html_attr') }}"
+    class="borderedControl piwikTopControl"
+>
 </div>