Micke/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Thomas Bruederli 2014-05-20 13:55:53 +02:00
parent af416196d9
commit 96359552f7
2 changed files with 126 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
plugins/calendar/skins/larry/calendar.css
View file

@ -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;
}

142
plugins/calendar/skins/larry/templates/calendar.html
View file

@ -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
$('#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();
});
}
</script>
</body>