diff --git a/plugins/calendar/skins/larry/calendar.css b/plugins/calendar/skins/larry/calendar.css
index 021f4fb6..adca7583 100644
--- a/plugins/calendar/skins/larry/calendar.css
+++ b/plugins/calendar/skins/larry/calendar.css
@@ -109,21 +109,21 @@ body.attachmentwin #topnav .topright {
top: 4px;
}
-#calendarsidebartoggle {
+#calsidebarsplitter {
position: absolute;
left: 264px;
- width: 8px;
- top: 40px;
+ width: 6px;
+ top: 40px !important;
bottom: 0;
- background: url(images/toggle.gif) 0 48% no-repeat transparent;
- cursor: pointer;
+ background: url(images/toggle.gif) -1px 48% no-repeat transparent;
}
div.sidebarclosed {
background-position: -8px 48% !important;
+ cursor: pointer;
}
-#calendarsidebartoggle:hover {
+#calsidebarsplitter:hover {
background-color: #ddd;
}
diff --git a/plugins/calendar/skins/larry/templates/calendar.html b/plugins/calendar/skins/larry/templates/calendar.html
index 2a767981..ce071125 100644
--- a/plugins/calendar/skins/larry/templates/calendar.html
+++ b/plugins/calendar/skins/larry/templates/calendar.html
@@ -40,7 +40,6 @@
-
@@ -235,25 +234,11 @@ var UI = new rcube_mail_ui();
$(document).ready(function(e){
UI.init();
- // initialize sidebar toggle
- $('#calendarsidebartoggle').click(function() {
- var width = $(this).data('sidebarwidth');
- var offset = $(this).data('offset');
- var $sidebar = $('#calendarsidebar'), time = 250;
-
- if ($sidebar.is(':visible')) {
- $sidebar.animate({ left:'-'+(width+10)+'px' }, time, function(){ $('#calendarsidebar').hide(); });
- $(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);
+ new calendarview_splitter({ id:'calsidebarsplitter', p1:'#calendarsidebar', p2:'#calendar',
+ orientation:'v', relative:true, start:270, min:240, size:12, offset:0 });
+
+ 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();
// 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();
+ });
+}
+