Add extended splitter to calendar view that allows resizing and collapsing the sidebar

plugins/calendar/skins/larry/calendar.css

@@ -109,21 +109,21 @@ body.attachmentwin #topnav .topright {
 	top: 4px;
 }
 
-#calendarsidebartoggle {
+#calsidebarsplitter {
 	position: absolute;
 	left: 264px;
-	width: 8px;
+	width: 6px;
-	top: 40px;
+	top: 40px !important;
 	bottom: 0;
-	background: url(images/toggle.gif) 0 48% no-repeat transparent;
+	background: url(images/toggle.gif) -1px 48% no-repeat transparent;
-	cursor: pointer;
 }
 
 div.sidebarclosed {
 	background-position: -8px 48% !important;
+	cursor: pointer;
 }
 
-#calendarsidebartoggle:hover {
+#calsidebarsplitter:hover {
 	background-color: #ddd;
 }
 

plugins/calendar/skins/larry/templates/calendar.html

@@ -40,7 +40,6 @@
 			</div>
 		</div>
 	</div>
-	<div id="calendarsidebartoggle"></div>
 
 	<div id="quicksearchbar">
 		<roundcube:object name="plugin.searchform" id="quicksearchbox" />
@@ -235,25 +234,11 @@ var UI = new rcube_mail_ui();
 $(document).ready(function(e){
 	UI.init();
 
-	// initialize sidebar toggle
+	new calendarview_splitter({ id:'calsidebarsplitter', p1:'#calendarsidebar', p2:'#calendar',
-	$('#calendarsidebartoggle').click(function() {
+		orientation:'v', relative:true, start:270, min:240, size:12, offset:0 });
-		var width = $(this).data('sidebarwidth');
-		var offset = $(this).data('offset');
-		var $sidebar = $('#calendarsidebar'), time = 250;
 
-		if ($sidebar.is(':visible')) {
+	new rcube_splitter({ id:'calresourceviewsplitter', p1:'#resource-dialog-left', p2:'#resource-dialog-right',
-			$sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#calendarsidebar').hide(); });
+		orientation:'v', relative:true, start:380, min:220, size:10, offset:-3 }).init();
-			$(this).animate({ left:'8px'}, time, function(){ $('#calendarsidebartoggle').addClass('sidebarclosed') });
-			$('#calendar').animate({ left:'20px'}, time, function(){ $(this).fullCalendar('render'); });
-		}
-		else {
-			$sidebar.show().animate({ left:'10px' }, time);
-			$(this).animate({ left:offset+'px'}, time, function(){ $('#calendarsidebartoggle').removeClass('sidebarclosed'); });
-			$('#calendar').animate({ left:(width+16)+'px'}, time, function(){ $(this).fullCalendar('render'); });
-		}
-	})
-	.data('offset', $('#calendarsidebartoggle').position().left)
-	.data('sidebarwidth', $('#calendarsidebar').width() + $('#calendarsidebar').position().left);
 
 	// animation to unfold list search box
 	$('#calendars .boxtitle a.search').click(function(e){
@@ -276,10 +261,123 @@ $(document).ready(function(e){
 		});
 	});
 
-	new rcube_splitter({ id:'calresourceviewsplitter', p1:'#resource-dialog-left', p2:'#resource-dialog-right',
-		orientation:'v', relative:true, start:380, min:220, size:10, offset:-3 }).init();
 });
 
+
+/**
+ * Extended rcube_splitter class that entirely collapses the calendar sidebar
+ */
+function calendarview_splitter(p)
+{
+	this.collapsed = false;
+	this.dragging = false;
+	this.threshold = 80;
+	this.lastpos = 0;
+	this._lastpos = 0;
+	this._min = p.min;
+
+	var me = this;
+	p.callback = function(e){
+		if (me.lastpos != me._lastpos) {
+			me.dragging = true;
+			setTimeout(function(){ me.dragging = false; }, 50);
+			me._lastpos = me.lastpos;
+		}
+	};
+
+	// extend base class
+	p.min = 20;
+	rcube_splitter.call(this, p);
+
+	// @override
+	this.resize = function()
+	{
+		if (this.pos < this.threshold) {
+			if (!this.collapsed)
+				this.collapse();
+		}
+		else if (this.pos < this._min && this.pos > this._min / 2) {
+			if (this.collapsed)
+				this.expand();
+		}
+		else if (this.pos >= this._min) {
+			this.p1.css('width', Math.floor(this.pos - this.p1pos.left - this.halfsize) + 'px');
+			this.p2.css('left', Math.ceil(this.pos + this.halfsize) + 'px');
+			this.handle.css('left', Math.round(this.pos - this.halfsize + this.offset + 3)+'px');
+			if (bw.ie) {
+				var new_width = parseInt(this.parent.outerWidth(), 10) - parseInt(this.p2.css('left'), 10) ;
+				this.p2.css('width', (new_width > 0 ? new_width : 0) + 'px');
+			}
+
+			this.p2.resize();
+			this.p1.resize();
+			this.lastpos = this.pos;
+
+			// also resize iframe covers
+			if (this.drag_active) {
+				$('iframe').each(function(i, elem) {
+					var pos = $(this).offset();
+					$('#iframe-splitter-fix-'+i).css({ top: pos.top+'px', left: pos.left+'px', width:elem.offsetWidth+'px', height: elem.offsetHeight+'px' });
+				});
+			}
+
+			if (typeof this.render == 'function')
+				this.render(this);
+		}
+	}
+
+	this.collapse = function(animated)
+	{
+		var me = this, time = 250;
+		if (animated) {
+			this.p1.animate({ left:'0px' }, time, function(){ $(this).hide(); });
+			this.p2.animate({ left:this.p.size + 'px' }, time, function(){ $(this).resize(); });
+			this.handle.animate({ left:'3px'}, time, function(){ $(this).addClass('sidebarclosed') });
+		}
+		else {
+			this.p1.css('left', 0).hide();
+			this.p2.css('left', this.p.size + 'px');
+			this.handle.css('left', '3px').addClass('sidebarclosed');
+			this.p2.resize();
+		}
+
+		// stop dragging
+		if (this.drag_active) {
+			this.drag_active = false;
+			$(document).unbind('.'+this.id);
+			$('div.iframe-splitter-fix').remove();
+		}
+
+		this.pos = 10;
+		this.collapsed = true;
+		this.set_cookie();
+	}
+
+	this.expand = function()
+	{
+		var me = this, time = 250;
+		this.handle.removeClass('sidebarclosed');
+		this.pos = this.lastpos || this._min;
+		this.p1pos.left = 10;
+		this.p1.show().animate({ left:'10px', width:(this.pos - this.p1pos.left - this.halfsize) + 'px' }, time);
+		this.p2.animate({ left:(this.pos + this.halfsize) + 'px' }, time, function(){ me.resize(); });
+		this.handle.animate({ left:(this.pos - this.halfsize + this.offset + 3) + 'px' }, time);
+
+		this.collapsed = false;
+		this.set_cookie();
+	}
+
+	this.init();
+
+	var me = this;
+	this.handle.bind('click', function(e){
+		if (!me.collapsed && !me.dragging)
+			me.collapse(true);
+		else if (!me.dragging)
+			me.expand();
+	});
+}
+
 </script>
 
 </body>