Hive LMS: Knowing when it’s time to toss code out!

Rounding up slightly I have spent 10 hours this week redesigning the notification and form submission system… Actually, I seriously just thought of something else I missed.

So now that I’ve spent 10 hours on the completed notification and form submission system I’ve come to the point where I want to toss out all the old code that is taking up space in my project. I’m happy to see it go because it really cleans up the project but I don’t want to actually delete it forever so this post will serve as it’s final resting place. Well this code is being saved primarily for nostalgia’s sake I feel some programmers, especially those that are just starting out, would like to pick these apart and see the not so beautiful development process in action. For starters let me share with you a picture showing the layout of events these scripts were trying to accomplish. Early on as I developed these scripts it hit me that things were getting way out of hand so I stopped and mocked everything up to come up with a new plan of attack:

/**
* Form Manager
*
* Manages submitting, blocking, and resetting forms.
*/
function formManager(){
    var btn = event.target;
    /** Check page for any forms already being processed. */
    var forms = find('[data-form-processing]');
    if(forms.length==0){
        /** Mark this form as being processed and add the ID as an input. */
        var elem = closest(btn, 'form');
        var id = uid();
        btn.id = id;
        elem.dataset.formProcessing = id;
        var input = document.createElement("INPUT");
        input.type = 'hidden';
        input.value = id;
        input.name = 'formID';
        btn.parentNode.appendChild(input);
        /** Save the button text and change to loading icon. */
        elem.dataset.originalText = btn.value;
        var btnWidth = btn.offsetWidth;
        btn.style.minWidth = btnWidth + 'px';
        btn.value = '';
        var loader = document.createElement("DIV");
        loader.classList.add('loading');
        loader.innerHTML = '<i class="fa fa-spinner fa-pulse fa-fw"></i>';
        loader.style.marginLeft = '-' + (btnWidth/2 + 20) + 'px';
        btn.parentNode.appendChild(loader);
        /** Submit form via AJAX. */
        sendForm(id);
    } else {
        /** Warn user that a form is already being processed and they need to wait */
    }
}

/** ADD SUPPORT FOR THE USERS CUSTOME ICONS. */
function _formCompleted(responseObj){
    responseObj = JSON.parse(responseObj);
    var msgObj = message(responseObj.message, responseObj.type, responseObj.code, responseObj.codeUrl);
    var div = document.createElement('div');
    div.innerHTML = msgObj.html;
    document.getElementById('announcer').appendChild(div);
    _showMessage(msgObj.id, 0);
    setTimeout(_formReturnControl.bind(null, responseObj.formID), 500);
}

function _formReturnControl(id){
    var btn = document.getElementById(id);
    var form = closest(btn, '[data-form-processing='+id+']');
    var text = form.dataset.originalText;
    btn.value = text;
    var loader = find('.loading', btn)[0];
    loader.parentNode.removeChild(loader);
    btn.removeAttribute('id');
    form.removeAttribute('data-form-processing');
    form.removeAttribute('data-original-text');
    var input = find('>formID', form)[0];
    input.parentNode.removeChild(input);
}

function loadMessages(){
    var messages = cookie('appMessages')[0];
    if(!empty(messages)){
        var messages = messages.split('||');
        var obj, div;
        for(var index in messages){
            obj = JSON.parse(messages[index]);
            console.log(obj);
            obj = message(obj.id, obj.msg, obj.type, obj.code, obj.codeUrl, obj.icons);
            div = document.createElement('div');
            div.innerHTML = obj.html;
            document.getElementById('announcer').appendChild(div);
            _showMessage(obj.id, 0);
        }
    }
}
window.docReady(loadMessages);

function _showMessage(id, op){
    var div = document.getElementById(id);
    op = parseFloat(op);
    if(op<1){
        op = op + .10;
        div.style.opacity = op;
        setTimeout(_showMessage.bind(null, id, op), 75);
    } else {
        div.style.opacity = 1;
    }
}

function _hideMessage(id, op){
    var div = document.getElementById(id);
    op = parseFloat(op);
    if(op>0){
        op = op - .10;
        div.style.opacity = op;
        setTimeout(_hideMessage.bind(null, id, op), 70);
    } else {
        div.style.opacity = 0;
        div.parentNode.removeChild(div);
    }
}

function _closeMessage(id){
    var messages = cookie('appMessages')[0];
    var messages = messages.split('||');
    var div, newCookie = '';
    for(var index in messages){
        if(JSON.parse(messages[index]).id!=id){
            newCookie = newCookie+'||'+messages[index];
        }
    }
    if(newCookie.length>1){
        newCookie = newCookie.substr(2);
    } else {
        document.cookie = 'appMessages=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
    }
    document.cookie = 'appMessages='+newCookie;
    _hideMessage(id, 1);
}

function _closeMessages(){
    var messages = cookie('appMessages')[0];
    var messages = messages.split('||');
    var div;
    for(var index in messages){
        _hideMessage(JSON.parse(messages[index]).id, 1);
    }
    document.cookie = 'appMessages=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

/**

* Form Manager

* Manages submitting, blocking, and resetting forms.

function formManager(){

var btn = event.target;

/** Check page for any forms already being processed. */

var forms = find('[data-form-processing]');

if(forms.length==0){

/** Mark this form as being processed and add the ID as an input. */

var elem = closest(btn, 'form');

var id = uid();

btn.id = id;

elem.dataset.formProcessing = id;

var input = document.createElement("INPUT");

input.type = 'hidden';

input.value = id;

input.name = 'formID';

btn.parentNode.appendChild(input);

/** Save the button text and change to loading icon. */

elem.dataset.originalText = btn.value;

var btnWidth = btn.offsetWidth;

btn.style.minWidth = btnWidth + 'px';

btn.value = '';

var loader = document.createElement("DIV");

loader.classList.add('loading');

loader.innerHTML = '<i class="fa fa-spinner fa-pulse fa-fw"></i>';

loader.style.marginLeft = '-' + (btnWidth/2 + 20) + 'px';

btn.parentNode.appendChild(loader);

/** Submit form via AJAX. */

sendForm(id);

} else {

/** Warn user that a form is already being processed and they need to wait */

}

/** ADD SUPPORT FOR THE USERS CUSTOME ICONS. */

function _formCompleted(responseObj){

responseObj = JSON.parse(responseObj);

var msgObj = message(responseObj.message, responseObj.type, responseObj.code, responseObj.codeUrl);

var div = document.createElement('div');

div.innerHTML = msgObj.html;

document.getElementById('announcer').appendChild(div);

_showMessage(msgObj.id, 0);

setTimeout(_formReturnControl.bind(null, responseObj.formID), 500);

}

function _formReturnControl(id){

var btn = document.getElementById(id);

var form = closest(btn, '[data-form-processing='+id+']');

var text = form.dataset.originalText;

btn.value = text;

var loader = find('.loading', btn)[0];

loader.parentNode.removeChild(loader);

btn.removeAttribute('id');

form.removeAttribute('data-form-processing');

form.removeAttribute('data-original-text');

var input = find('>formID', form)[0];

input.parentNode.removeChild(input);

}

function loadMessages(){

var messages = cookie('appMessages')[0];

if(!empty(messages)){

var messages = messages.split('||');

var obj, div;

for(var index in messages){

obj = JSON.parse(messages[index]);

console.log(obj);

obj = message(obj.id, obj.msg, obj.type, obj.code, obj.codeUrl, obj.icons);

div = document.createElement('div');

div.innerHTML = obj.html;

document.getElementById('announcer').appendChild(div);

_showMessage(obj.id, 0);

}

window.docReady(loadMessages);

function _showMessage(id, op){

var div = document.getElementById(id);

op = parseFloat(op);

if(op<1){

op = op + .10;

div.style.opacity = op;

setTimeout(_showMessage.bind(null, id, op), 75);

} else {

div.style.opacity = 1;

}

function _hideMessage(id, op){

var div = document.getElementById(id);

op = parseFloat(op);

if(op>0){

op = op - .10;

div.style.opacity = op;

setTimeout(_hideMessage.bind(null, id, op), 70);

} else {

div.style.opacity = 0;

div.parentNode.removeChild(div);

}

function _closeMessage(id){

var messages = cookie('appMessages')[0];

var messages = messages.split('||');

var div, newCookie = '';

for(var index in messages){

if(JSON.parse(messages[index]).id!=id){

newCookie = newCookie+'||'+messages[index];

}

if(newCookie.length>1){

newCookie = newCookie.substr(2);

} else {

document.cookie = 'appMessages=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';

}

document.cookie = 'appMessages='+newCookie;

_hideMessage(id, 1);

}

function _closeMessages(){

var messages = cookie('appMessages')[0];

var messages = messages.split('||');

var div;

for(var index in messages){

_hideMessage(JSON.parse(messages[index]).id, 1);

}

document.cookie = 'appMessages=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';

}

/**
* AJAX Form Submitter
*
* AJAX connection specifically for sending an HTML form
* @author Christopher Keers <cdkeers@caboodle.tech>
* @param {id} id ID of the HTML form to submit
*/

function sendForm(id){
    /**
    * Grab the form and then check if everything we need is there.
    * WARNING: From this point on this function relies on jQuery.
    */
	var form = $('[data-form-processing='+id+']');
	var method = form.attr('method');
	var action = form.attr('action');
    var enctype = form.attr('enctype');
    if(enctype==null || enctype=='undefined'){ enctype = false; }

    /** !!!!!!!!!!!!!!!!! Chnage to send back error objects/ messages */
    if(form==null || form=='undefined'){ return; }
    if(method==null || method=='undefined'){ return; }
    if(action==null || action=='undefined'){ return; }

    /** !!!!!!! May need to catch and use enctype but if its not used (false) it breaks things now */
    $.ajax({
        url: action,
        type: method,
        data: form.serialize(),
        success: function (data, textStatus, xhr){
            console.log(data);
            var obj = JSON.parse(data);
            obj.status = xhr.status;
            hiveFormManager.response(JSON.stringify(obj));
        },
        error: function (xhr, desc, err){
            var obj = {};
            obj.message = '[ERROR THROWN] '+err+' [RESPONSE] '+desc;
            obj.status = 500;
            obj.type = 5;
            if(empty(obj.code)){ obj.code = 500; }
            hiveFormManager.response(JSON.stringify(obj));
        }
    });
}

/**

* AJAX Form Submitter

* AJAX connection specifically for sending an HTML form

* @author Christopher Keers <cdkeers@caboodle.tech>

* @param {id} id ID of the HTML form to submit

function sendForm(id){

/**

* Grab the form and then check if everything we need is there.

* WARNING: From this point on this function relies on jQuery.

var form = $('[data-form-processing='+id+']');

var method = form.attr('method');

var action = form.attr('action');

var enctype = form.attr('enctype');

if(enctype==null || enctype=='undefined'){ enctype = false; }

/** !!!!!!!!!!!!!!!!! Chnage to send back error objects/ messages */

if(form==null || form=='undefined'){ return; }

if(method==null || method=='undefined'){ return; }

if(action==null || action=='undefined'){ return; }

/** !!!!!!! May need to catch and use enctype but if its not used (false) it breaks things now */

$.ajax({

url: action,

type: method,

data: form.serialize(),

success: function (data, textStatus, xhr){

console.log(data);

var obj = JSON.parse(data);

obj.status = xhr.status;

hiveFormManager.response(JSON.stringify(obj));

error: function (xhr, desc, err){

var obj = {};

obj.message = '[ERROR THROWN] '+err+' [RESPONSE] '+desc;

obj.status = 500;

obj.type = 5;

if(empty(obj.code)){ obj.code = 500; }

hiveFormManager.response(JSON.stringify(obj));

}

});

}

function errorManager(id, msg, type, code, codeUrl, icons){
    var obj = {
        'id': id,
        'msg': msg,
        'type': type,
        'code': code,
        'codeUrl': codeUrl,
        'icons': icons
    }
    obj = JSON.stringify(obj);
    if(empty(cookie('appMessages'))){
        /** Create the stack and add this error to the stack. */
        var oldVal = cookie('appMessages');
        var len = oldVal.length;
        document.cookie = 'appMessages='+oldVal[len]+'||'+obj;
    } else {
        /** Add this error to the stack. */
        document.cookie = 'appMessages='+obj;
    }
}

function errorManager(id, msg, type, code, codeUrl, icons){

var obj = {

'id': id,

'msg': msg,

'type': type,

'code': code,

'codeUrl': codeUrl,

'icons': icons

}

obj = JSON.stringify(obj);

if(empty(cookie('appMessages'))){

/** Create the stack and add this error to the stack. */

var oldVal = cookie('appMessages');

var len = oldVal.length;

document.cookie = 'appMessages='+oldVal[len]+'||'+obj;

} else {

/** Add this error to the stack. */

document.cookie = 'appMessages='+obj;

}

function message(msg, type, code, codeUrl, replacementIcons){
    /** Configure the message to the correct type. */
    switch(type){
        case 0:
            type = 'error';
            break;
        case 1:
            type = 'success';
            break;
        case 2:
            type = 'warn';
            break;
        case 3:
            type = 'error';
            break;
        case 4:
            type = 'notice';
            break;
        case 5:
            type = 'server';
            break;
        default:
            type = 'warn';
            break;
    }
    var icons = {
        'success': '<i class="fa fa-check"></i>',
        'warn': '<i class="fa fa-hand-stop-o fa-flip-horizontal"></i>',
        'error': '<i class="fa fa-exclamation-triangle"></i>',
        'notice': '<i class="fa fa-comment-o"></i>',
        'server': '<i class="fa fa-server"></i>'
    }
    if(typeOf(replacementIcons)=='OBJECT' && !empty(replacementIcons)){
        if(replacementIcons.success!='undefined'){ icons.success = replacementIcons.success; }
        if(replacementIcons.warn!='undefined'){ icons.warn = replacementIcons.warn; }
        if(replacementIcons.error!='undefined'){ icons.error = replacementIcons.error; }
        if(replacementIcons.notice!='undefined'){ icons.notice = replacementIcons.notice; }
        if(replacementIcons.server!='undefined'){ icons.server = replacementIcons.server; }
    }
    var icon = icons[type];
    var lvType = type;
    if(type=='server'){ lvType = 'error'; }
    /** Configure the error code if provided. */
    var codeUrl='#', codeDiv = '';
    if(!empty(code)){
        if(!empty(codeUrl)){
            code = code.replace('<', '').replace('</','').replace('>','');
            codeUrl = codeUrl.replace('<', '').replace('</','').replace('>','');
            codeDiv = '<div class="code"><a href="'+codeUrl+'?code='+code+'" target="_blank">'+code+'</a></div>';
        }
    } else {
        code = '';
    }
    /** Now build, record, and return the message. */
    var id = uid(10);
    errorManager(id, msg, type, code, codeUrl, icons);
    return {
        'id': id
        'html': '<div class="'+lvType+'" id="'+id+'" style="opacity:0;"><div class="wrapper"><div class="sidebar">'+icon+'</div><div class="header">'+codeDiv+'<input type="button" value="Close All" class="button" onclick="_closeMessages();"> <span onclick="_closeMessage(\''+id+'\');">X</span></div><div class="message">'+msg+'</div></div></div>'
    }
}

function message(msg, type, code, codeUrl, replacementIcons){

/** Configure the message to the correct type. */

switch(type){

case 0:

type = 'error';

break;

case 1:

type = 'success';

break;

case 2:

type = 'warn';

break;

case 3:

type = 'error';

break;

case 4:

type = 'notice';

break;

case 5:

type = 'server';

break;

default:

type = 'warn';

break;

}

var icons = {

'success': '<i class="fa fa-check"></i>',

'warn': '<i class="fa fa-hand-stop-o fa-flip-horizontal"></i>',

'error': '<i class="fa fa-exclamation-triangle"></i>',

'notice': '<i class="fa fa-comment-o"></i>',

'server': '<i class="fa fa-server"></i>'

}

if(typeOf(replacementIcons)=='OBJECT' && !empty(replacementIcons)){

if(replacementIcons.success!='undefined'){ icons.success = replacementIcons.success; }

if(replacementIcons.warn!='undefined'){ icons.warn = replacementIcons.warn; }

if(replacementIcons.error!='undefined'){ icons.error = replacementIcons.error; }

if(replacementIcons.notice!='undefined'){ icons.notice = replacementIcons.notice; }

if(replacementIcons.server!='undefined'){ icons.server = replacementIcons.server; }

}

var icon = icons[type];

var lvType = type;

if(type=='server'){ lvType = 'error'; }

/** Configure the error code if provided. */

var codeUrl='#', codeDiv = '';

if(!empty(code)){

if(!empty(codeUrl)){

code = code.replace('<', '').replace('</','').replace('>','');

codeUrl = codeUrl.replace('<', '').replace('</','').replace('>','');

codeDiv = '<div class="code"><a href="'+codeUrl+'?code='+code+'" target="_blank">'+code+'</a></div>';

}

} else {

code = '';

}

/** Now build, record, and return the message. */

var id = uid(10);

errorManager(id, msg, type, code, codeUrl, icons);

return {

'id': id

'html': '<div class="'+lvType+'" id="'+id+'" style="opacity:0;"><div class="wrapper"><div class="sidebar">'+icon+'</div><div class="header">'+codeDiv+'<input type="button" value="Close All" class="button" onclick="_closeMessages();"> <span onclick="_closeMessage(\''+id+'\');">X</span></div><div class="message">'+msg+'</div></div></div>'

}

Caboodle Tech Inc.

Hive LMS: Knowing when it’s time to toss code out!

Leave a Reply Cancel reply