diff options
author | Benaka <diosmosis@users.noreply.github.com> | 2017-10-16 07:54:55 +0300 |
---|---|---|
committer | Matthieu Aubry <mattab@users.noreply.github.com> | 2017-10-16 07:54:55 +0300 |
commit | d4e57274c765698e82e476de4ad6d1a81b65cc91 (patch) | |
tree | 3a36a9eb3d4e58d19123aa352908b60906c48115 /plugins/ExamplePlugin | |
parent | c1422b533fef97b63b434befe57856ee348c1e46 (diff) |
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.
Diffstat (limited to 'plugins/ExamplePlugin')
4 files changed, 41 insertions, 1 deletions
diff --git a/plugins/ExamplePlugin/angularjs/directive-component/component.directive.js b/plugins/ExamplePlugin/angularjs/directive-component/component.directive.js index a05f3dc099..573435de1c 100644 --- a/plugins/ExamplePlugin/angularjs/directive-component/component.directive.js +++ b/plugins/ExamplePlugin/angularjs/directive-component/component.directive.js @@ -22,7 +22,7 @@ return { restrict: 'A', scope: { - // showAllSitesItem: '=' + // showAllSitesItem: '<' }, templateUrl: 'plugins/ExamplePlugin/angularjs/directive-component/component.directive.html?cb=' + piwik.cacheBuster, controller: 'ComponentController', diff --git a/plugins/ExamplePlugin/angularjs/example-component/example-component.component.html b/plugins/ExamplePlugin/angularjs/example-component/example-component.component.html new file mode 100644 index 0000000000..45eb76c0b5 --- /dev/null +++ b/plugins/ExamplePlugin/angularjs/example-component/example-component.component.html @@ -0,0 +1,3 @@ +<div class="componentClass"> + {{ componentAs.myProperty }} +</div>
\ No newline at end of file diff --git a/plugins/ExamplePlugin/angularjs/example-component/example-component.component.js b/plugins/ExamplePlugin/angularjs/example-component/example-component.component.js new file mode 100644 index 0000000000..ecba06de34 --- /dev/null +++ b/plugins/ExamplePlugin/angularjs/example-component/example-component.component.js @@ -0,0 +1,34 @@ +/*! + * Piwik - free/libre analytics platform + * + * @link http://piwik.org + * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later + */ + +/** + * Usage: + * <piwik-example-component> + */ +(function () { + angular.module('piwikApp').component('piwikComponent', { + templateUrl: 'plugins/ExamplePlugin/angularjs/example-component/example-component.component.html?cb=' + piwik.cacheBuster, + bindings: { + // showAllSitesItem: '<' + }, + controller: ComponentController + }); + + ComponentController.$inject = []; + + function ComponentController() { + // remember to keep controller very simple. Create a service/factory (model) if needed + + var vm = this; + vm.myProperty = 'component'; + vm.doSomething = doSomething; + + function doSomething() { + + } + } +})(); diff --git a/plugins/ExamplePlugin/angularjs/example-component/example-component.component.less b/plugins/ExamplePlugin/angularjs/example-component/example-component.component.less new file mode 100644 index 0000000000..625a2a84ef --- /dev/null +++ b/plugins/ExamplePlugin/angularjs/example-component/example-component.component.less @@ -0,0 +1,3 @@ +.componentClass { + // ... +}
\ No newline at end of file |