Sqwrl

by joplomacedo

HTML

<p id="sqwrl_notification" class="sqwrl_is-off">Edit mode: off</p>
<button id="sqwrl_toggle">Toggle Sqwrl</button>

CSS

#sqwrl_toggle {
    position: fixed;
    bottom: 0;
    right: 20px;
    padding: 4px 17px;
    margin: 0;
    font-size: 12px;
    border: 0;
    border-radius: 2px 2px 0 0;
    color: #FFF;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.39);
    cursor: pointer;
    outline: none;
}

#sqwrl_notification {
    position: fixed;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    padding: 7px 17px 9px;
    border: 2px solid;
    font-family: helveticaneue-light;
    font-weight: 600;
    border-radius: 3px;
    background: #EEE;
    color: #444;
    font-size: 15px;   
}

#sqwrl_notification.sqwrl_is-on {
    opacity: 1;
    visibility: visible;
}

#sqwrl_notification.sqwrl_is-off {
    opacity: 0;
    visibility: hidden;
    transition: .25s .8s;
}

JavaScript

var state = {
        edit_mode_on: false
    },
    
    $els = {},
    
    eventHandlers = {
        toggleClick: function () {
            funcs.toggleEditMode();
        },
    
        htmlDoubleClick: function () {
            if ( !state.edit_mode_on ) return;
            console.log('dbl click');
        }
    },
    
    scaff = {
        getEls: function () {
            $els.html = $('html');
            $els.toggle = $('#sqwrl_toggle');
            $els.notification = $('#sqwrl_notification');
        },
    
        attachEvents: function () {
            $els.toggle.on('click', eventHandlers.toggleClick);
            $els.html.on('dblclick', eventHandlers.htmlDoubleClick);
        },
    
        init: function () {
            scaff.getEls();
            scaff.attachEvents();
        }
    },
    
    
    funcs = {
        toggleEditMode: function () {
            if ( state.edit_mode_on ) {
                funcs.leaveEditMode();
            } else {
                funcs.enterEditMode();
            }
        },
    
        enterEditMode: function () {
            state.edit_mode_on = true;
            $els.notification
                .text('Edit mode: on')
                .removeClass('sqwrl_is-off')
                .addClass('sqwrl_is-on');
        },
    
        leaveEditMode: function () {
            state.edit_mode_on = false;
            $els.notification
                .text('Edit mode: off')
                .removeClass('sqwrl_is-on')
                .addClass('sqwrl_is-off');
        },
        
        init: function () {
            scaff.init();
            
        }
    };
    
$(funcs.init);