☰

Google Calendar - Resize Navigation Sidebar

Makes the G-Cal navigation sidebar re-sizable and hideable. Adds a column border and drag-button that can be dragged with the mouse, and a show/hide toggle button.

// ==UserScript==
// @name        Google Calendar - Resize Navigation Sidebar
// @namespace   calendar.google.com
// @author cbop-dev (https://github.com/cbop-dev)
// @version 0.3.8
// @description Makes the G-Cal navigation sidebar re-sizable and hideable. Adds a column border and drag-button that can be dragged with the mouse, and a show/hide toggle button.
// @license MIT License (Expat)
// @include       https://calendar.google.com/calendar/render*
// @grant       none
// @require http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
// ==/UserScript==
//window.alert('test');
var i = 0;
var dragging = false;
var main = $('#mainbody');
var nav = $('#nav');
var defaultPosition = '225';
var lastPosition = defaultPosition;
var minNavPosition = 35;

var ghostbar = $('<div>',
                 {id:'ghostbar',
                  css: {                                
                      'background-color': 'rgba(0,0,0,.5)',
                      height: '100%',
                      top: '0',
                      'margin-left': $('#mainbody').css('margin-left'),
                      'width': '3px',
                      'cursor': 'col-resize',
                      'float': 'left',
                      'position': 'absolute',
                      'z-index': '50'

                  },
                  class: 'ghost'
                 }).appendTo('#maincell');

var ghostEZdragbar = $('<div>',
                       {id:'ghostEZdragbar',
                        css: {
                            height: 'auto',
                            'min-height': '10px',
                            top: '0px',
                            'background-color': 'rgba(0,0,0,.5)',
                            'margin-left': $('#mainbody').css('margin-left'),
                            'width': 'auto',
                            'cursor': 'col-resize',
                            'float': 'left',
                            'position': 'absolute',
                            'z-index': '50',
                            color: 'white',
                            'text-align': 'center'
                        },
                        text: '\u25C4\u25BA',
                        class: 'ghost'
                       }).appendTo('#maincell');

var ghostToggleNav = $('<div>',
                       {id:'ghostToggleNav',
                        css: {
                            height: 'auto',
                            'min-height': '7px',
                            top: ghostEZdragbar.css('height'),
                            'background-color': 'rgba(0,0,0,.5)',
                            'margin-left': $('#mainbody').css('margin-left'),
                            'width': 'auto',
                            'cursor': 'pointer',
                            'float': 'left',
                            'position': 'absolute',
                            'z-index': '50',
                            color: 'white',
                            'text-align': 'center',


                        },
                        class: 'ghost',
                        text: '\u2715'
                       }).appendTo('#maincell');

ghostEZdragbar.css('left',"-" + ghostEZdragbar.css('width'));
ghostToggleNav.css('left',"-" + ghostToggleNav.css('width'));

function moveNav(x) {
    $('.ghost').css('margin-left', x );
    $('#mainbody').css('margin-left', x);
    $('#nav').css('width', x - 32);
}

function hideNav() {
    moveNav(0);
    $('#nav').hide();
}


var mouseMoveNav = function(e) {

    e.preventDefault();
    dragging = true;

    $(document).mousemove(function (e) {
        if (e.pageX >= minNavPosition) {
            $('.ghost').css('margin-left', e.pageX + 2);
            //ghostEZdragbar.css('margin-left', e.pageX + 2);
        }
    });
};

ghostbar.mousedown(mouseMoveNav);
ghostEZdragbar.mousedown(mouseMoveNav);
ghostToggleNav.on('click', function(e) {
    if ( ghostbar.css('display') == 'none' ){ //already hidden; toggle to visible
        ghostToggleNav.text("\u2715");
        ghostToggleNav.css('width', 'auto');
        ghostToggleNav.css('top', ghostEZdragbar.css('height'));
        $('#nav').show();
        moveNav(lastPosition);
        ghostToggleNav.css('left',"-" + ghostToggleNav.css('width'));
        $('.ghost').show();
    }
    else { // visible, going to hide nav bar:
        lastPosition = $('#nav').width() +40;
        $('.ghost').hide();
        hideNav();
        ghostToggleNav.css('top', '0px');
        ghostToggleNav.css('left', 0);
        ghostToggleNav.text('\u25BA');
        ghostToggleNav.css('width', 'auto');
        ghostToggleNav.show();
    }
});

window.onload = function() {
    //window.alert("Onload!");
};

$(document).mouseup(function (e) {
    if (dragging)
    {
        moveNav(e.pageX > minNavPosition ? e.pageX : minNavPosition);

        $(document).unbind('mousemove');
        dragging = false;
    }
});

$(window).on('hashchange', function() {
    if (location.hash.lastIndexOf('#main', 0) === -1) {
        $('.ghost').hide();
    }
    else
    {
        $('.ghost').show();
    }
});