[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

3 files changed, 105 insertions, 36 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);
diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index be0d645e45f..e3506321b47 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -92,15 +92,23 @@
     <t t-name="CalendarView.buttons">
         <div class="o_calendar_buttons">
             <t t-if="!isMobile">
-                <button class="o_calendar_button_prev btn btn-primary" aria-label="Previous" title="Previous"><span class="fa fa-arrow-left"/></button>
-                <button class="o_calendar_button_today btn btn-primary">Today</button>
-                <button class="o_calendar_button_next btn btn-primary" aria-label="Next" title="Next"><span class="fa fa-arrow-right"/></button>
+                <t t-call="CalendarView.navigation_buttons" />
             </t>
-            <div class="btn-group">
-                <button type="button" class="o_calendar_button_day btn btn-secondary">Day</button>
-                <button type="button" class="o_calendar_button_week btn btn-secondary">Week</button>
-                <button type="button" class="o_calendar_button_month btn btn-secondary">Month</button>
-            </div>
+            <t t-call="CalendarView.scale_buttons" />
+        </div>
+    </t>
+
+    <t t-name="CalendarView.navigation_buttons">
+        <button class="o_calendar_button_prev btn btn-primary" aria-label="Previous" title="Previous"><span class="fa fa-arrow-left"/></button>
+        <button class="o_calendar_button_today btn btn-primary">Today</button>
+        <button class="o_calendar_button_next btn btn-primary" aria-label="Next" title="Next"><span class="fa fa-arrow-right"/></button>
+    </t>
+
+    <t t-name="CalendarView.scale_buttons">
+        <div class="btn-group">
+            <button type="button" class="o_calendar_button_day btn btn-secondary">Day</button>
+            <button type="button" class="o_calendar_button_week btn btn-secondary">Week</button>
+            <button type="button" class="o_calendar_button_month btn btn-secondary">Month</button>
         </div>
     </t>