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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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;'; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/** * 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)); } }); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
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>' } } |