scroll position in crop mode
authorsstamer <s.stamer@metaways.de>
Fri, 9 Jan 2015 10:59:12 +0000 (11:59 +0100)
committerPhilipp Schüle <p.schuele@metaways.de>
Mon, 19 Jan 2015 16:08:30 +0000 (17:08 +0100)
* fix initial layouting:
  scroller needs to be sized to apply scolling
  otherwise mainBody is not bigger than scroller
  and scrolling is not nessesary when initializing

Change-Id: Id580b2cdf46ec93b23d7b6f7ee50a97c5612b230
Reviewed-on: http://gerrit.tine20.com/customers/1524
Tested-by: Jenkins CI (http://ci.tine20.com/)
Reviewed-by: Philipp Schüle <p.schuele@metaways.de>
tine20/Calendar/Preference.php
tine20/Calendar/js/DaysView.js

index 13e0d00..dc5e961 100644 (file)
@@ -25,6 +25,11 @@ class Calendar_Preference extends Tinebase_Preference_Abstract
      * where daysvoew should be scrolled maximum up to
      */
     const DAYSVIEW_ENDTIME = 'daysviewendtime';
+    
+    /**
+     * where daysview should be scrolled to
+     */
+    const DAYSVIEW_DEFAULT_STARTTIME = 'daysviewdefaultstarttime';
 
     /**
      * default calendar all newly created/invited events are placed in
@@ -74,6 +79,8 @@ class Calendar_Preference extends Tinebase_Preference_Abstract
      */
     public function getAllApplicationPreferences()
     {
+        $cropDays = Calendar_Config::getInstance()->get(Calendar_Config::CROP_DAYS_VIEW);
+        
         $allPrefs = array(
             self::DAYSVIEW_STARTTIME,
             self::DAYSVIEW_ENDTIME,
@@ -85,6 +92,10 @@ class Calendar_Preference extends Tinebase_Preference_Abstract
             self::DEFAULTALARM_MINUTESBEFORE,
             self::DEFAULTATTENDEE_STRATEGY
         );
+        
+        if ($cropDays) {
+            array_unshift($allPrefs, self::DAYSVIEW_DEFAULT_STARTTIME);
+        }
             
         return $allPrefs;
     }
@@ -107,6 +118,10 @@ class Calendar_Preference extends Tinebase_Preference_Abstract
                 'label'         => $translate->_('End Time'),
                 'description'   => $translate->_('Position on the left time axis, day and week view should end with'),
             ),
+            self::DAYSVIEW_DEFAULT_STARTTIME => array(
+                'label'         => $translate->_('Default Start Time'),
+                'description'   => $translate->_('Scroll position on the left time axis, day and week view should start with'),
+            ),
             self::DEFAULTCALENDAR  => array(
                 'label'         => $translate->_('Default Calendar'),
                 'description'   => $translate->_('The default calendar for invitations and new events'),
@@ -199,6 +214,10 @@ class Calendar_Preference extends Tinebase_Preference_Abstract
                 $preference->value      = '18:00';
                 $preference->options = $this->_createTimespanDataXML(1, 24);
                 break;
+            case self::DAYSVIEW_DEFAULT_STARTTIME:
+                $preference->value      = '08:00';
+                $preference->options = $this->_createTimespanDataXML(0, 23);
+                break;
             case self::DEFAULTCALENDAR:
                 $this->_getDefaultContainerPreferenceDefaults($preference, $_accountId);
                 break;
index 600c43d..e57d68d 100644 (file)
@@ -86,6 +86,11 @@ Ext.extend(Tine.Calendar.DaysView, Ext.Container, {
      */
     numOfDays: 4,
     /**
+     * @cfg {String} (H:i) defaultStart
+     * generic scroll start of the (work) day
+     */
+    defaultStart: '08:00',
+    /**
      * @cfg {String} (H:i) dayStart
      * generic start of the (work) day
      */
@@ -217,11 +222,12 @@ Ext.extend(Tine.Calendar.DaysView, Ext.Container, {
         if (! this.selModel) {
             this.selModel = this.selModel || new Tine.Calendar.EventSelectionModel();
         }
-        
-        this.onLayout = Function.createBuffered(this.onLayout, 100, this);
+
+        this.onLayout = Function.createBuffered(this.unbufferedOnLayout, 100, this);
 
         // apply preferences
         var prefs = this.app.getRegistry().get('preferences'),
+            defaultStartTime = Date.parseDate(prefs.get('daysviewdefaultstarttime'), 'H:i'),
             startTime = Date.parseDate(prefs.get('daysviewstarttime'), 'H:i'),
             endTime = Date.parseDate(prefs.get('daysviewendtime'), 'H:i');
         
@@ -236,6 +242,12 @@ Ext.extend(Tine.Calendar.DaysView, Ext.Container, {
         
         this.cropDayTime = !! Tine.Tinebase.configManager.get('daysviewcroptime', 'Calendar') && !(!this.getTimeOffset(this.dayStart) && !this.getTimeOffset(this.dayEnd));
         
+        if (this.cropDayTime) {
+            this.defaultStart = Ext.isDate(defaultStartTime) ? defaultStartTime : Date.parseDate(this.defaultStart, 'H:i');
+        } else {
+            this.defaultStart = this.dayStart;
+        }
+        
         Tine.Calendar.DaysView.superclass.initComponent.apply(this, arguments);
     },
     
@@ -483,22 +495,30 @@ Ext.extend(Tine.Calendar.DaysView, Ext.Container, {
             this.mainBody.setStyle('overflow', 'hidden');
             this.scroller.addClass('cal-daysviewpanel-body-cropDayTime');
         }
-        
+
+        this.unbufferedOnLayout();
+
         // scrollTo initial position
         this.isScrolling = true;
+
         try {
-            this.scrollTo(this.dayStart);
+            this.scrollTo.defer(500, this, [this.defaultStart]);
         } catch (e) {
             this.scrollTo();
         }
-        
-        this.onLayout();
+
         this.rendered = true;
     },
     
     scrollTo: function(time) {
         time = Ext.isDate(time) ? time : new Date();
-        this.scroller.dom.scrollTop = this.getTimeOffset(time);
+        
+        var scrollTop = this.getTimeOffset(time);
+        if (this.cropDayTime) {
+            scrollTop = scrollTop - this.getTimeOffset(this.dayStart);
+        }
+
+        this.scroller.dom.scrollTop = scrollTop;
     },
     
     onBeforeScroll: function() {
@@ -527,7 +547,6 @@ Ext.extend(Tine.Calendar.DaysView, Ext.Container, {
             vStartMinutes = this.getHeightMinutes(visibleStart),
             vEndMinutes   = this.getHeightMinutes(visibleEnd);
             
-        
         Ext.each(this.dayCols, function(dayCol, idx) {
             var dayColEl    = Ext.get(dayCol),
                 dayStart    = this.startDate.add(Date.DAY, idx),
@@ -556,7 +575,7 @@ Ext.extend(Tine.Calendar.DaysView, Ext.Container, {
     
     onShow: function() {
         this.onLayout();
-        this.scroller.dom.scrollTop = this.lastScrollPos || this.getTimeOffset(new Date());
+        this.scroller.dom.scrollTop = this.lastScrollPos || this.getTimeOffset(this.defaultStart);
     },
     
     onBeforeHide: function() {
@@ -1246,7 +1265,7 @@ Ext.extend(Tine.Calendar.DaysView, Ext.Container, {
         this.scroller.setStyle('overflow-x', 'hidden');
         this.mon(this.scroller, 'scroll', this.onBeforeScroll, this);
         this.mon(this.scroller, 'scroll', this.onScroll, this, {buffer: 200});
-        
+
         this.mainBody = new E(this.scroller.dom.firstChild);
         this.dayCols = this.mainBody.dom.firstChild.lastChild.childNodes;
 
@@ -1286,11 +1305,17 @@ Ext.extend(Tine.Calendar.DaysView, Ext.Container, {
             Ext.fly(this.wholeDayArea.childNodes[freeIdxs[i]]).remove();
         }
     },
-    
+
+    /**
+     * buffered version of this.unbufferedOnLayout
+     * @see this.initComponent
+     */
+    onLayout: Ext.emptyFn,
+
     /**
      * layouts the view
      */
-    onLayout: function() {
+    unbufferedOnLayout: function() {
         Tine.Calendar.DaysView.superclass.onLayout.apply(this, arguments);
         if(!this.mainBody){
             return; // not rendered