[REF] web: extracts calendar's methods to allow customization

This commit extracts some calendar's event handlers, private methods and
templates to create 'hooks' allowing further customization.

Task ID: 2092550

2 files changed, 89 insertions, 28 deletions

diff --git a/addons/web/static/src/js/views/calendar/calendar_controller.js b/addons/web/static/src/js/views/calendar/calendar_controller.js
index dddfc122c00..39e1db6d4e3 100644
--- a/addons/web/static/src/js/views/calendar/calendar_controller.js
+++ b/addons/web/static/src/js/views/calendar/calendar_controller.js
@@ -38,7 +38,14 @@ var CalendarController = AbstractController.extend({
         viewUpdated: '_onViewUpdated',
     }),
     events: _.extend({}, AbstractController.prototype.events, {
-        today_button_click: '_onTodayButtonClicked'
+        today_button_click: '_onTodayButtonClicked',
+        'click button.o_calendar_button_new': '_onButtonNew',
+        'click button.o_calendar_button_prev': '_onButtonNavigation',
+        'click button.o_calendar_button_today': '_onButtonNavigation',
+        'click button.o_calendar_button_next': '_onButtonNavigation',
+        'click button.o_calendar_button_day': '_onButtonScale',
+        'click button.o_calendar_button_week': '_onButtonScale',
+        'click button.o_calendar_button_month': '_onButtonScale',
     }),
     /**
      * @override
@@ -77,25 +84,7 @@ var CalendarController = AbstractController.extend({
      *   inserts them into this.options.$buttons or into a div of its template
      */
     renderButtons: function ($node) {
-        var self = this;
-        this.$buttons = $(QWeb.render('CalendarView.buttons', {
-            isMobile: config.device.isMobile,
-        }));
-        this.$buttons.on('click', 'button.o_calendar_button_new', function () {
-            self.trigger_up('switch_view', {view_type: 'form'});
-        });
-
-        _.each(['prev', 'today', 'next'], function (action) {
-            self.$buttons.on('click', '.o_calendar_button_' + action, function () {
-                self._move(action);
-            });
-        });
-        _.each(['day', 'week', 'month'], function (scale) {
-            self.$buttons.on('click', '.o_calendar_button_' + scale, function () {
-                self.model.setScale(scale);
-                self.reload();
-            });
-        });
+        this.$buttons = $(QWeb.render('CalendarView.buttons', this._renderButtonsParameters()));
 
         this.$buttons.find('.o_calendar_button_' + this.mode).addClass('active');
 
@@ -111,6 +100,23 @@ var CalendarController = AbstractController.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Find a className in an array using the start of this class and
+     * return the last part of a string
+     * @private
+     * @param {string} startClassName start of string to find in the "array"
+     * @param {array|DOMTokenList} classList array of all class
+     * @return {string|undefined}
+     */
+    _extractLastPartOfClassName(startClassName, classList) {
+        var result;
+        classList.forEach(function(value){
+            if (value && value.indexOf(startClassName) === 0) {
+                result = value.substring(startClassName.length);
+            }
+        });
+        return result;
+    },
+    /**
      * Move to the requested direction and reload the view
      *
      * @private
@@ -122,6 +128,17 @@ var CalendarController = AbstractController.extend({
         return this.reload();
     },
     /**
+     * Parameter send to QWeb to render the template of Buttons
+     *
+     * @private
+     * @return {{}}
+     */
+    _renderButtonsParameters() {
+        return {
+            isMobile: config.device.isMobile,
+        };
+    },
+    /**
      * @override
      * @private
      */
@@ -162,6 +179,40 @@ var CalendarController = AbstractController.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Handler when a user clicks on button to create event
+     *
+     * @private
+     */
+    _onButtonNew() {
+        this.trigger_up('switch_view', {view_type: 'form'});
+    },
+    /**
+     * Handler when a user click on navigation button like prev, next, ...
+     *
+     * @private
+     * @param {Event|jQueryEvent} jsEvent
+     */
+    _onButtonNavigation(jsEvent) {
+        const action = this._extractLastPartOfClassName('o_calendar_button_', jsEvent.currentTarget.classList);
+        if (action) {
+            this._move(action);
+        }
+    },
+    /**
+     * Handler when a user click on scale button like day, month, ...
+     *
+     * @private
+     * @param {Event|jQueryEvent} jsEvent
+     */
+    _onButtonScale(jsEvent) {
+        const scale = this._extractLastPartOfClassName('o_calendar_button_', jsEvent.currentTarget.classList);
+        if (scale) {
+            this.model.setScale(scale);
+            this.reload();
+        }
+    },
+
+    /**
      * @private
      * @param {OdooEvent} event
      */
diff --git a/addons/web/static/src/js/views/calendar/calendar_renderer.js b/addons/web/static/src/js/views/calendar/calendar_renderer.js
index 0ad1c4c0c6b..554a6b3c79d 100644
--- a/addons/web/static/src/js/views/calendar/calendar_renderer.js
+++ b/addons/web/static/src/js/views/calendar/calendar_renderer.js
@@ -411,17 +411,15 @@ return AbstractRenderer.extend({
         }
     },
     /**
-     * Initialize the main calendar
+     * Return the Object options for FullCalendar
      *
      * @private
+     * @param {Object} fcOptions
+     * @return {Object}
      */
-    _initCalendar: function () {
+    _getFullCalendarOptions: function (fcOptions) {
         var self = this;
-
-        this.calendarElement = this.$(".o_calendar_widget")[0];
-        var locale = moment.locale();
-
-        var fc_options = $.extend({}, this.state.fc_options, {
+        return Object.assign({}, this.state.fc_options, {
             plugins: [
                 'moment',
                 'interaction',
@@ -546,7 +544,19 @@ return AbstractRenderer.extend({
             height: 'parent',
             unselectAuto: false,
             dir: _t.database.parameters.direction,
-            locale: locale,
+        }, fcOptions);
+    },
+    /**
+     * Initialize the main calendar
+     *
+     * @private
+     */
+    _initCalendar: function () {
+        this.calendarElement = this.$(".o_calendar_widget")[0];
+        var locale = moment.locale();
+
+        var fcOptions = this._getFullCalendarOptions({
+            locale: locale, // reset locale when fullcalendar has already been instanciated before now
         });
 
         this.calendar = new FullCalendar.Calendar(this.calendarElement, fcOptions);