(js,css) Add sg-now-line directive

NEWS

@@ -14,6 +14,7 @@ Enhancements
  - [web] disable JavaScript theme generation when SOGoUIxDebugEnabled is set to NO
  - [web] added Serbian (sr) translation - thanks to Bogdanović Bojan
  - [web] added sort by arrival date in Mail module (#708)
+ - [web] restored "now" line in Calendar module
  - [web] updated CKEditor to version 4.5.11
  - [eas] propagate message submission errors to EAS clients (#3774) 
 

UI/Templates/SchedulerUI/UIxCalDayTable.wox

@@ -98,7 +98,7 @@
 
       <!-- The quarters grid -->
       <div class="daysView">
-        <div class="days">
+        <div class="days sg-now-line">
           <var:foreach list="daysToDisplay" item="currentTableDay">
             <sg-calendar-day var:class="dayClasses"
                              var:id="currentDayId"

UI/WebServerResources/js/Scheduler/CalendarController.js

@@ -1,6 +1,7 @@
 /* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 
 (function() {
+  /* jshint loopfunc: true */
   'use strict';
 
   /**
@@ -132,16 +133,32 @@
     }
 
     function updateView() {
+      // The list of calendars has changed; update the views
       // See stateEventsBlocks in Scheduler.app.js
       Component.$eventsBlocksForView($stateParams.view, $stateParams.day.asDate()).then(function(data) {
-        vm.views = data;
-        _.forEach(vm.views, function(view) {
+        var i, j, view;
+        for (i = 0; i < data.length; i++) {
+          view = data[i];
+          if (vm.views[i]) {
+            _.forEach(view.allDayBlocks, function(blocks, day) {
+              vm.views[i].allDayBlocks[day] = blocks;
+            });
+            _.forEach(view.blocks, function(blocks, day) {
+              vm.views[i].blocks[day] = blocks;
+            });
+          }
+          else {
+            vm.views[i] = view;
+          }
           if (view.id) {
             // Note: this can't be done in Component service since it would make Component dependent on
             // the Calendar service and create a circular dependency
-            view.calendar = new Calendar({ id: view.id, name: view.calendarName });
+            vm.views[i].calendar = new Calendar({ id: view.id, name: view.calendarName });
           }
-        });
+        }
+        // Remove previous views
+        for (j = vm.views.length; j >= i; j--)
+          vm.views.splice(j, 1);
       });
     }
 

UI/WebServerResources/js/Scheduler/sgCalendarScrollView.directive.js

@@ -25,10 +25,15 @@
       },
       controller: sgCalendarScrollViewController,
       link: function(scope, element, attrs, controller) {
-        var view, type;
+        var view, type, isMultiColumn = false;
 
         view = null;
         type = scope.type; // multiday, multiday-allday, monthly, unknown?
+        isMultiColumn = (element.attr('sg-view') == 'multicolumndayview');
+
+        // Expose isMultiColumn in the controller
+        // See sgNowLine directive
+        controller.isMultiColumn = isMultiColumn;
 
         // Update the "view" object literal once the Angular template has been transformed
         $timeout(initView);
@@ -54,6 +59,10 @@
                 view.element.scrollTop = hourCell.offsetTop + quartersOffset;
               }
             });
+
+          // Expose quarter height to the controller
+          // See sgNowLine directive
+          controller.quarterHeight = view.quarterHeight;
         }
 
         /**
@@ -133,11 +142,8 @@
 
 
           getDayNumbers: function() {
-            var viewType = null, isMultiColumn, days, total, sum;
+            var viewType = null, days, total, sum;
 
-            if (this.element.attributes['sg-view'])
-              viewType = this.element.attributes['sg-view'].value;
-            isMultiColumn = (viewType == 'multicolumndayview');
             days = this.element.getElementsByTagName('sg-calendar-day');
 
             return _.map(days, function(el, index) {

UI/WebServerResources/js/Scheduler/sgNowLine.directive.js

@@ -0,0 +1,112 @@
+/* -*- Mode: js; indent-tabs-mode: nil; js-indent-level: 2 -*- */
+
+(function() {
+  /* jshint validthis: true */
+  'use strict';
+
+  /*
+   * sgNowLine - Now line to be displayed on top of current day
+   * @restrict class
+  */
+  function sgNowLine() {
+    return {
+      restrict: 'C',
+      require: '^^sgCalendarScrollView',
+      link: link,
+      controller: sgNowLineController
+    };
+
+    function link(scope, iElement, iAttr, sgCalendarScrollViewCtrl) {
+      function _getDays() {
+        return iElement.find('sg-calendar-day');
+      }
+      function _getView() {
+        return sgCalendarScrollViewCtrl.quarterHeight;
+      }
+
+      // We need to wait for the view to be compiled
+      var _unwatchView = scope.$watch(_getView, function(quarterHeight) {
+        if (quarterHeight) {
+          _unwatchView(); // self release
+          scope.quarterHeight = quarterHeight;
+          // We need to wait for the days to be compiled
+          var _unwatchDays = scope.$watch(_getDays, function(days) {
+            if (days.length) {
+              _unwatchDays(); // self release
+              scope.days = days;
+              // Draw the line
+              scope.updateLine();
+            }
+          });
+        }
+      });
+    }
+  }
+
+  /**
+   * @ngInject
+   */
+  sgNowLineController.$inject = ['$scope', '$element', '$timeout'];
+  function sgNowLineController($scope, $element, $timeout) {
+    var _this = this, updater,
+        scrollViewCtrl = $element.controller('sgCalendarScrollView');
+
+    $scope.nowDay = null;
+    $scope.lineElement = null;
+    $scope.updateLine = _updateLine;
+
+    $scope.$on('$destroy', function() {
+      if (updater)
+        $timeout.cancel(updater);
+    });
+
+
+    function _updateLine(force) {
+      var now = new Date(), // TODO: adjust to user's timezone
+          nowDay = now.getDayString(),
+          hours = now.getHours(),
+          hourHeight = $scope.quarterHeight * 4,
+          minutes = now.getMinutes(),
+          minuteHeight = $scope.quarterHeight/15,
+          position = parseInt(hours   * hourHeight   +
+                              minutes * minuteHeight -
+                              1);
+
+      if (force || nowDay != $scope.nowDay) {
+        if ($scope.lineElement)
+          $scope.lineElement.remove();
+        $scope.lineElement = _addLine(nowDay, $scope.days);
+        $scope.nowDay = nowDay;
+      }
+
+      if ($scope.lineElement) {
+        // Current day is displayed
+        $scope.lineElement.css('top', position + "px");
+        // Update line every minute
+        updater = $timeout(angular.bind(_this, $scope.updateLine), 60000);
+      }
+    }
+
+    function _addLine(nowDay, days) {
+      var $lineElement = angular.element('<sg-now-line>');
+
+      if (scrollViewCtrl.isMultiColumn) {
+        // In multicolumn day view, the line must go over all columns
+        if (days && days[0].attributes['sg-day'].value == nowDay)
+          $element.append($lineElement);
+      }
+      else
+        _.forEach(days, function(dayElement) {
+          if (dayElement.attributes['sg-day'].value == nowDay) {
+            angular.element(dayElement).find('div').eq(0).append($lineElement);
+          }
+        });
+
+      return $lineElement;
+    }
+  }
+
+  angular
+    .module('SOGo.SchedulerUI')
+    .directive('sgNowLine', sgNowLine);
+})();

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -240,6 +240,16 @@ $quarter_height: 10px;
     position: relative;
   }
 
+  // The "now" line that overlaps the current day in day/week/multicolumn views
+  sg-now-line {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background: red;
+    z-index: $z-index-view + 1;
+  }
+
   // Events from editable calendars are draggable
   .sg-draggable-calendar-block,
   .sg-event--ghost {
@@ -697,4 +707,4 @@ $quarter_height: 10px;
       background-color: sg-color($sogoBlue, 300);
     }
   }
-}
+}