var App = function() { function init() { tips(); preset(); draggable(); droppable(); openCard(); createTask(); closeModal(); printNotes(); editTask(); exitEditMode(); } function preset() { $('#remove').on('click', function(e) { e.preventDefault(); }); var defaultTask = { id: 1, title: 'This is a sample task', description: 'Sample tasks are useful to get started', remote_url: 'https://asana.com/12345/1234', assigned_to: 'Jon Doe', status: 'pending' } if(!LocalStorage.get('appInitialized', true)) { LocalStorage.set('taskCounter', 1); LocalStorage.set('task-1', JSON.stringify(defaultTask)); LocalStorage.set('appInitialized', true); } } function createTask() { var source = $("#task-card-template").html(); var template = Handlebars.compile(source); $('#add-task').on('click', function(e) { e.preventDefault(); $('#add-task-modal').removeClass('hide'); $('#add-task-modal').find('form').on('submit', function(e) { e.preventDefault(); var obj = {}; var params = $(this).serialize(); var splitParams = params.split('&'); for(var i = 0, l = splitParams.length; i < l; i++) { var keyVal = splitParams[i].split('='); obj[keyVal[0]] = unescape(keyVal[1]); } // TODO: Add validations if(obj.description === '' || obj.title === '') { return; } var iid = LocalStorage.get('taskCounter'); obj.id = ++iid; obj.status = 'pending'; LocalStorage.set('task-' + obj.id, JSON.stringify(obj)); LocalStorage.set('taskCounter', iid); var newCard = template([obj]); $('#dashboard #' + obj.status).append(newCard); draggable(); $('.close-modal').trigger('click'); //Clear form fields after submit $(this).find('input[type=text], textarea').val(''); }); }); } function editTask() { $(document).on('dblclick', '.card-details p', function(e) { e.stopPropagation(); $(this).attr('contenteditable','true').parents('.card').addClass('edit-mode'); }); $('.card').find('p').on('input', function() { var taskId = $(this).parents('.card').data('task-id'); var fieldToEdit = $(this).data('field'); var getTaskData = JSON.parse(LocalStorage.get('task-' + taskId)); getTaskData[fieldToEdit] = $(this).text(); LocalStorage.set('task-' + taskId, JSON.stringify(getTaskData)); }); } function exitEditMode() { $(document).on('dblclick', function(e) { $('.card').removeClass('edit-mode').find('[contenteditable]').removeAttr('contenteditable'); }); } function closeModal() { $('.close-modal').on('click', function() { $('.modal').addClass('hide'); }) } function draggable() { $('.card').draggable({ handle: 'h5', revert: true, cursor: 'move', start: function(event, ui) { }, stop: function(event, ui) { } }); } function droppable() { var droppableConfig = { tolerance: 'pointer', drop: function(event, ui) { var elm = ui.draggable, parentId = elm.parent().attr('id'), currentId = $(this).attr('id'), taskId = elm.data('task-id'); if($(this).attr('id') == 'remove') { //Deletes task elm.remove(); LocalStorage.remove('task-' + taskId); $('#removed-task-notification').text('Task removed successfully').removeClass('hide'); setTimeout(function() { $('#removed-task-notification').text('').addClass('hide'); }, 3000); } else { //Moves task if(parentId != currentId) { $(elm).detach().removeAttr('style').appendTo(this); var getTaskData = JSON.parse(LocalStorage.get('task-' + taskId)); getTaskData.status = currentId; LocalStorage.set('task-' + taskId, JSON.stringify(getTaskData)); } } $(this).removeClass('dragged-over'); }, over: function(event, ui) { $(this).addClass('dragged-over'); }, out: function(event, ui) { $(this).removeClass('dragged-over'); } } $('#dashboard > div, #remove').droppable(droppableConfig); } function openCard() { $(document).on('click', '.expand-card', function(e) { $(this).parent().toggleClass('expanded'); e.preventDefault(); }); } function getAllNotes() { var getAllData = localStorage; var getTasks = []; for(var data in getAllData) { if(data.split('-')[0] == 'task') { getTasks.push(JSON.parse(localStorage[data])); } } return getTasks; } function printNotes() { var source = $("#task-card-template").html(); var template = Handlebars.compile(source); var status = ['rejected', 'pending', 'development', 'testing', 'production']; for(var i = 0, l = status.length; i < l; i++) { var result = App.getAllNotes().filter(function(obj) { return obj.status == status[i]; }); if(result) { var cards = template(result); $('#dashboard #' + status[i]).append(cards); draggable(); } } } function tips() { if(!JSON.parse(LocalStorage.get('showedTip'))) { $('#tips').removeClass('hide').addClass('tips'); } $('#tips').on('click', function() { $(this).addClass('hide'); LocalStorage.set('showedTip', true); }); } return { init: init, getAllNotes: getAllNotes } }(); App.init();