Merge pull request #685 from mairatma/AUI-1591

AUI-1591 Fix scheduler behavior on touch screen desktop computers
liferay · Aug 5, 2014 · b8abf80 · b8abf80
2 parents 2861cf7 + 156a7cd
commit b8abf80
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 161 deletions.
diff --git a/demos/scheduler/index.html b/demos/scheduler/index.html
@@ -36,9 +36,7 @@ <h1>AlloyUI - Scheduler</h1>
                 new Y.SchedulerMonthView(),
                 new Y.SchedulerAgendaView()
             ],
-            eventRecorder: new Y.SchedulerEventRecorder({
-                duration: 30
-            })
+            eventRecorder: new Y.SchedulerEventRecorder()
             // firstDayOfWeek: 1,
             // activeView: weekView,
             // views: [dayView, weekView, monthView, agendaView]

diff --git a/src/aui-scheduler/HISTORY.md b/src/aui-scheduler/HISTORY.md
@@ -4,6 +4,7 @@
 
 ## @VERSION@
 
+* [AUI-1591](https://issues.liferay.com/browse/AUI-1591) Fix scheduler behavior on touch screen desktop computers
 * [AUI-1527](https://issues.liferay.com/browse/AUI-1527) add base keyboard navigation
 * [AUI-1370](https://issues.liferay.com/browse/AUI-1370) Add ability to set an event's border color, style, and width
 * [AUI-1309](https://issues.liferay.com/browse/AUI-1309) Make aui-scheduler responsive

diff --git a/src/aui-scheduler/assets/aui-scheduler-touch-core.css b/src/aui-scheduler/assets/aui-scheduler-touch-core.css
@@ -1,25 +1,25 @@
-.scheduler-touch .scheduler-base-content .scheduler-base-view-date,
-.scheduler-touch .scheduler-base-content .scheduler-base-controls,
-.scheduler-touch .scheduler-base-content .scheduler-base-views {
+.scheduler-mobile .scheduler-base-content .scheduler-base-view-date,
+.scheduler-mobile .scheduler-base-content .scheduler-base-controls,
+.scheduler-mobile .scheduler-base-content .scheduler-base-views {
     text-align: center;
     width: 100%;
 }
 
-.scheduler-touch .scheduler-base-controls .scheduler-base-today {
+.scheduler-mobile .scheduler-base-controls .scheduler-base-today {
     margin-right: 0;
     width: 50%;
 }
 
-.scheduler-touch .scheduler-base-controls .btn-group {
+.scheduler-mobile .scheduler-base-controls .btn-group {
     padding: 0 0 0 3px;
     width: 50%;
 }
 
-.scheduler-touch .scheduler-base-controls .btn-group button {
+.scheduler-mobile .scheduler-base-controls .btn-group button {
     width: 50%;
 }
 
-.scheduler-touch .scheduler-base-views button {
+.scheduler-mobile .scheduler-base-views button {
     float: none;
     width: 25%;
 }
diff --git a/src/aui-scheduler/js/aui-scheduler-touch.js b/src/aui-scheduler/js/aui-scheduler-touch.js
@@ -7,10 +7,9 @@
 
 var CSS_SCHEDULER_EVENT = A.getClassName('scheduler-event'),
     CSS_SCHEDULER_EVENT_ALL_DAY = A.getClassName('scheduler-event', 'all', 'day'),
+    CSS_SCHEDULER_MOBILE = A.getClassName('scheduler', 'mobile'),
     CSS_SCHEDULER_VIEW_DAY_RESIZER = A.getClassName('scheduler-view', 'day', 'resizer'),
-    CSS_SCHEDULER_VIEW_DAY_TABLE_COL = A.getClassName('scheduler-view', 'day', 'table', 'col'),
-    CSS_SCHEDULER_VIEW_DAY_TABLE_COLDAY = A.getClassName('scheduler-view', 'day', 'table', 'colday'),
-    CSS_SCHEDULER_TOUCH = A.getClassName('scheduler', 'touch');
+    CSS_SCHEDULER_VIEW_DAY_TABLE_COLDAY = A.getClassName('scheduler-view', 'day', 'table', 'colday');
 
 function SchedulerDayViewTouch() {}
 
@@ -47,14 +46,14 @@ SchedulerDayViewTouch.prototype = {
      */
     _afterBindUI: function() {
         this._schedulerTouchEventHandles.push(
-            A.on(this._onPrepareEventCreation, this, '_prepareEventCreation'),
-            A.after(this._afterPlotEvents, this, 'plotEvents'),
-            this.columnData.delegate(
-                'click',
-                A.bind(this._onClickTableCol, this),
-                '.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COL
-            )
+            A.on(this._onPrepareEventCreation, this, '_prepareEventCreation')
         );
+
+        if (A.UA.mobile) {
+            this._schedulerTouchEventHandles.push(
+                A.after(this._afterPlotEvents, this, 'plotEvents')
+            );
+        }
     },
 
     /**
@@ -66,39 +65,16 @@ SchedulerDayViewTouch.prototype = {
     _afterSyncUI: function() {
         var scheduler = this.get('scheduler');
 
-        scheduler.controlsNode.get('parentNode').prepend(scheduler.viewDateNode);
-        scheduler.get('boundingBox').addClass(CSS_SCHEDULER_TOUCH);
-    },
-
-    /**
-     * Overrides the form builder mouse events to use touch gestures instead.
-     *
-     * @method _bindMouseEvents
-     * @protected
-     */
-    _bindMouseEvents: function() {
-        this._schedulerTouchEventHandles.push(
-            this.columnData.delegate(
-                'gesturemovestart',
-                A.bind(this._onGestureMoveStartTableCol, this),
-                '.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COL
-            ),
-            this.columnData.delegate(
-                'gesturemove',
-                A.bind(this._onGestureMoveTableCol, this),
-                '.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COLDAY
-            ),
-            this.columnData.delegate(
-                'gesturemoveend',
-                A.bind(this._onGestureMoveEndTableCol, this),
-                '.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COL
-            )
-        );
+        if (A.UA.mobile) {
+            scheduler.controlsNode.get('parentNode').prepend(scheduler.viewDateNode);
+            scheduler.get('boundingBox').addClass(CSS_SCHEDULER_MOBILE);
+        }
     },
 
     /**
      * Fired after the `plotEvents` method runs. Adds the resizer node to all
-     * events.
+     * events, which is necessary on devices that don't have the hover interaction,
+     * like mobile devices.
      *
      * @method _afterPlotEvents
      * @protected
@@ -138,63 +114,16 @@ SchedulerDayViewTouch.prototype = {
     },
 
     /**
-     * Fired when the `click` event is triggered for a table column.
-     *
-     * @method _onClickTableCol
-     * @protected
-     */
-    _onClickTableCol: function(event) {
-        var recorder = this.get('scheduler').get('eventRecorder');
-
-        this._prepareEventCreation(event, 60);
-        this.plotEvent(recorder);
-        recorder.showPopover();
-
-        this.creationStartDate = null;
-        this.startXY = null;
-    },
-
-    /**
-     * Fired on the `gesturemoveend` event.
-     *
-     * @method _onGestureMoveEndTableCol
-     * @protected
-     */
-    _onGestureMoveEndTableCol: function() {
-        this.resizing = false;
-
-        this.get('boundingBox').selectable();
-    },
-
-    /**
-     * Fired on the `gesturemovestart` event.
-     *
-     * @method _onGestureMoveStartTableCol
-     * @param {EventFacade} event
-     * @protected
-     */
-    _onGestureMoveStartTableCol: function(event) {
-        this._onMouseDownTableCol(event);
-    },
-
-    /**
-     * Fired on the `gesturemove` event.
+     * Fired before the `_prepareEventCreation` method runs. Prevents
+     * the original method from running if it came from a touchstart
+     * DOM event, as we only want this feature for click events on touch.
      *
-     * @method _onGestureMoveTableCol
+     * @method _onPrepareEventCreation
      * @param {EventFacade} event
      * @protected
      */
-    _onGestureMoveTableCol: function(event) {
-        this._onMouseMoveTableCol(event);
-    },
-
-    /**
-     * Fired before the `_prepareEventCreation` method runs. Prevents
-     * the original method from running if it came from a gesturemovestart
-     * DOM event, as we only want this feature for click events on touch.
-     */
     _onPrepareEventCreation: function(event) {
-        if (event.type === 'gesturemovestart') {
+        if (event._event.type === 'touchstart') {
             return new A.Do.Prevent();
         }
     }
@@ -209,7 +138,7 @@ SchedulerDayViewTouch.ATTRS = {
      * @type {Number}
      */
     eventWidth: {
-        value: 100,
+        value: A.UA.mobile ? 100 : 95,
         validator: A.Lang.isNumber
     }
 };

diff --git a/src/aui-scheduler/js/aui-scheduler-view-day.js b/src/aui-scheduler/js/aui-scheduler-view-day.js
@@ -1154,7 +1154,7 @@ var SchedulerDayView = A.Component.create({
          */
         _bindMouseEvents: function() {
             this.columnData.delegate(
-                'mousedown', A.bind(this._onMouseDownTableCol, this), '.' +
+                'gesturemovestart', A.bind(this._onGestureMoveStartTableCol, this), '.' +
                 CSS_SCHEDULER_VIEW_DAY_TABLE_COL);
 
             this.columnData.delegate(
@@ -1164,11 +1164,14 @@ var SchedulerDayView = A.Component.create({
                 'mouseleave', A.bind(this._onMouseLeaveEvent, this), '.' + CSS_SCHEDULER_EVENT);
 
             this.columnData.delegate(
-                'mousemove', A.bind(this._onMouseMoveTableCol, this), '.' +
-                CSS_SCHEDULER_VIEW_DAY_TABLE_COLDAY);
+                'gesturemove',
+                A.bind(this._onGestureMoveTableCol, this),
+                '.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COLDAY,
+                {standAlone: true}
+            );
 
             this.columnData.delegate(
-                'mouseup', A.bind(this._onMouseUpTableCol, this), '.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COL);
+                'gesturemoveend', A.bind(this._onGestureMoveEndTableCol, this), '.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COL);
         },
 
         /**
@@ -1432,75 +1435,70 @@ var SchedulerDayView = A.Component.create({
         },
 
         /**
-         * Handles `mouseDownTableCol` events.
+         * Handles `gesturemoveend` events.
          *
-         * @method _onMouseDownTableCol
-         * @param {EventFacade} event
+         * @method _onGestureMoveEndTableCol
          * @protected
          */
-        _onMouseDownTableCol: function(event) {
+        _onGestureMoveEndTableCol: function() {
             var instance = this;
-            var target = event.target;
             var scheduler = instance.get('scheduler');
             var recorder = scheduler.get('eventRecorder');
 
             if (recorder && !scheduler.get('disabled')) {
-                recorder.hidePopover();
-
-                if (target.test('.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COL_SHIM)) {
-                    this._prepareEventCreation(event);
-                }
-                else if (target.test(
-                            ['.' + CSS_SCHEDULER_VIEW_DAY_RESIZER,
-                             '.' + CSS_SCHEDULER_VIEW_DAY_RESIZER_ICON].join(','))) {
+                if (instance.creationStartDate) {
+                    instance.plotEvent(recorder);
 
-                    instance.resizing = true;
+                    recorder.showPopover();
                 }
             }
 
-            instance.get('boundingBox').unselectable();
+            instance.creationStartDate = null;
+            instance.resizing = false;
+            instance.startXY = null;
+
+            instance._removeResizer();
+            instance.get('boundingBox').selectable();
         },
 
         /**
-         * Handles `mouseEnter` events.
+         * Handles `gestureMoveStart` events.
          *
-         * @method _onMouseEnterEvent
+         * @method _onGestureMoveStartTableCol
          * @param {EventFacade} event
          * @protected
          */
-        _onMouseEnterEvent: function(event) {
+        _onGestureMoveStartTableCol: function(event) {
             var instance = this;
-            var target = event.currentTarget;
-            var evt = target.getData('scheduler-event');
+            var target = event.target;
+            var scheduler = instance.get('scheduler');
+            var recorder = scheduler.get('eventRecorder');
 
-            if (evt && !evt.get('disabled')) {
-                instance.resizerNode.appendTo(target);
-            }
-        },
+            if (recorder && !scheduler.get('disabled')) {
+                recorder.hidePopover();
 
-        /**
-         * Handles `mouseLeave` events.
-         *
-         * @method _onMouseLeaveEvent
-         * @param {EventFacade} event
-         * @protected
-         */
-        _onMouseLeaveEvent: function() {
-            var instance = this;
+                if (target.test('.' + CSS_SCHEDULER_VIEW_DAY_TABLE_COL_SHIM)) {
+                    this._prepareEventCreation(event);
+                }
+                else if (target.test(
+                            ['.' + CSS_SCHEDULER_VIEW_DAY_RESIZER,
+                             '.' + CSS_SCHEDULER_VIEW_DAY_RESIZER_ICON].join(','))) {
 
-            if (!instance.resizing) {
-                instance._removeResizer();
+                    instance.resizing = true;
+                }
             }
+
+            instance.get('boundingBox').unselectable();
         },
 
         /**
-         * Handles `mouseMoveTableCol` events.
+         * Handles `gesturemove` events.
          *
-         * @method _onMouseMoveTableCol
+         * @method _onGestureMoveTableCol
          * @param {EventFacade} event
          * @protected
          */
-        _onMouseMoveTableCol: function(event) {
+        _onGestureMoveTableCol: function(event) {
             var instance = this;
             var activeColumn = this._findActiveColumn(event);
             var recorder = instance.get('scheduler').get('eventRecorder');
@@ -1542,31 +1540,35 @@ var SchedulerDayView = A.Component.create({
         },
 
         /**
-         * Handles `mouseUpTableCol` events.
+         * Handles `mouseEnter` events.
          *
-         * @method _onMouseUpTableCol
+         * @method _onMouseEnterEvent
          * @param {EventFacade} event
          * @protected
          */
-        _onMouseUpTableCol: function() {
+        _onMouseEnterEvent: function(event) {
             var instance = this;
-            var scheduler = instance.get('scheduler');
-            var recorder = scheduler.get('eventRecorder');
-
-            if (recorder && !scheduler.get('disabled')) {
-                if (instance.creationStartDate) {
-                    instance.plotEvent(recorder);
+            var target = event.currentTarget;
+            var evt = target.getData('scheduler-event');
 
-                    recorder.showPopover();
-                }
+            if (evt && !evt.get('disabled')) {
+                instance.resizerNode.appendTo(target);
             }
+        },
 
-            instance.creationStartDate = null;
-            instance.resizing = false;
-            instance.startXY = null;
+        /**
+         * Handles `mouseLeave` events.
+         *
+         * @method _onMouseLeaveEvent
+         * @param {EventFacade} event
+         * @protected
+         */
+        _onMouseLeaveEvent: function() {
+            var instance = this;
 
-            instance._removeResizer();
-            instance.get('boundingBox').selectable();
+            if (!instance.resizing) {
+                instance._removeResizer();
+            }
         },
 
         /**