From 96359552f76d84da3467f5c6ea6652b19bc7720a Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Tue, 20 May 2014 13:55:53 +0200 Subject: [PATCH] Add extended splitter to calendar view that allows resizing and collapsing the sidebar --- plugins/calendar/skins/larry/calendar.css | 12 +- .../skins/larry/templates/calendar.html | 142 +++++++++++++++--- 2 files changed, 126 insertions(+), 28 deletions(-) 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(); + }); +} +