From 6fa0604b07de1ac378ab439122b517a747223acc Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 23 Sep 2016 14:53:03 +0200 Subject: [PATCH] Refactor task_open/shot_open into item_open Also renamed task-details div to item-details div. Much nicer and generic. Thanks a lot to Dr. Sybren for the code review and unlimited support <3 --- attract/static/js/tasks.js | 103 ++++++++++--------- src/templates/attract/shots/for_project.jade | 6 +- src/templates/attract/tasks/for_project.jade | 2 +- 3 files changed, 58 insertions(+), 53 deletions(-) diff --git a/attract/static/js/tasks.js b/attract/static/js/tasks.js index 2d048d7..9981968 100644 --- a/attract/static/js/tasks.js +++ b/attract/static/js/tasks.js @@ -66,11 +66,12 @@ function _remove_task_from_list(task_id) { } /** - * Shows a task in the #task-details div. + * Open an item such as tasks/shots in the #item-details div */ -function task_open(task_id) { - if (task_id === undefined) { - throw new ReferenceError("task_open(" + task_id + ") called."); +function item_open(item_id, item_type, pushState) +{ + if (item_id === undefined || item_type === undefined) { + throw new ReferenceError("item_open(" + item_id + ", " + item_type + ") called."); } var project_url = ProjectUtils.projectUrl(); @@ -78,60 +79,64 @@ function task_open(task_id) { throw new ReferenceError("ProjectUtils.projectUrl() undefined"); } - $('#col_right .col_header span.header_text').text('Task details'); + $('#col_right .col_header span.header_text').text(item_type + ' details'); - $('[id^="task-"]').removeClass('active'); - $('#task-' + task_id).addClass('active'); + // Style elements starting with item_type and dash, e.g. "#shot-uuid" + $('[id^="' + item_type + '-"]').removeClass('active'); + $('#' + item_type + '-' + item_id).addClass('active'); - var task_url = '/attract/' + project_url + '/tasks/' + task_id; + var item_url = '/attract/' + project_url + '/' + item_type + 's/' + item_id; + var push_url = item_url; + if (ProjectUtils.context() == 'shot' && item_type == 'task'){ + push_url = '/attract/' + project_url + '/shots/with-task/' + item_id; + } - $.get(task_url, function(task_data) { - $('#task-details').html(task_data); + $.get(item_url, function(item_data) { + $('#item-details').html(item_data); }).fail(function(xhr) { if (console) { - console.log('Error fetching task', task_id, 'from', task_url); + console.log('Error fetching task', item_id, 'from', item_url); console.log('XHR:', xhr); } - $('#task-details').html(xhr.responseText); + $('#item-details').html(xhr.responseText); }); + + // Determine whether we should push the new state or not. + pushState = (typeof pushState !== 'undefined') ? pushState : true; + if (!pushState) return; + + // Push the correct URL onto the history. + var push_state = {itemId: item_id, itemType: item_type}; + + window.history.pushState( + push_state, + item_type + ': ' + item_id, + push_url + ); +} + +function task_open(task_id) +{ + item_open(task_id, 'task'); +} + +function shot_open(shot_id) +{ + item_open(shot_id, 'shot'); +} + +window.onpopstate = function(event) +{ + var state = event.state; + + item_open(state.itemId, state.itemType, false); } /** - * Shows a shot in the #task-details div. + * Create a task and show it in the #item-details div. */ -function shot_open(shot_id) { - if (shot_id === undefined) { - throw new ReferenceError("shot_open(" + shot_id + ") called."); - } - - var project_url = ProjectUtils.projectUrl(); - if (typeof project_url === 'undefined') { - throw new ReferenceError("ProjectUtils.projectUrl() undefined"); - } - - $('#col_right .col_header span.header_text').text('Shot details'); - - $('[id^="shot-"]').removeClass('active'); - $('#shot-' + shot_id).addClass('active'); - - var shot_url = '/attract/' + project_url + '/shots/' + shot_id; - console.log('shot_url is ' + shot_url); - - $.get(shot_url, function(shot_data) { - $('#task-details').html(shot_data); - }).fail(function(xhr) { - if (console) { - console.log('Error fetching shot', shot_id, 'from', shot_url); - console.log('XHR:', xhr); - } - $('#task-details').html(xhr.responseText); - }); -} - -/** - * Create a task and show it in the #task-details div. - */ -function task_create(shot_id, project_url, task_type) { +function task_create(shot_id, project_url, task_type) +{ if (shot_id === undefined || project_url === undefined || task_type === undefined) { throw new ReferenceError("task_create(" + shot_id + ", " + project_url+ ", " + task_type + ") called."); } @@ -150,7 +155,7 @@ function task_create(shot_id, project_url, task_type) { console.log('Error creating task'); console.log('XHR:', xhr); } - $('#task-details').html(xhr.responseText); + $('#item-details').html(xhr.responseText); }); } @@ -224,7 +229,7 @@ function task_save(task_id, task_url) { // TODO: implement something nice here. Just make sure we don't throw // away the user's edits. It's up to the user to handle this. } else { - $('#task-details').html(xhr_or_response_data.responseText); + $('#item-details').html(xhr_or_response_data.responseText); } }, type: 'task' @@ -247,7 +252,7 @@ function shot_save(shot_id, shot_url) { // TODO: implement something nice here. Just make sure we don't throw // away the user's edits. It's up to the user to handle this. } else { - $('#task-details').html(xhr_or_response_data.responseText); + $('#item-details').html(xhr_or_response_data.responseText); } }, type: 'shot' diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade index 3da8cba..070c9c7 100644 --- a/src/templates/attract/shots/for_project.jade +++ b/src/templates/attract/shots/for_project.jade @@ -59,16 +59,16 @@ .col_header span.header_text Shot details #status-bar - #task-details + #item-details | {% endblock %} | {% block footer_scripts %} script. {% if open_task_id %} - $(function() { task_open('{{ open_task_id }}'); }); + $(function() { item_open('{{ open_task_id }}', 'task', false); }); {% endif %} {% if open_shot_id %} - $(function() { shot_open('{{ open_shot_id }}'); }); + $(function() { item_open('{{ open_shot_id }}', 'shot', false); }); {% endif %} diff --git a/src/templates/attract/tasks/for_project.jade b/src/templates/attract/tasks/for_project.jade index 668f774..2abe5d7 100644 --- a/src/templates/attract/tasks/for_project.jade +++ b/src/templates/attract/tasks/for_project.jade @@ -25,7 +25,7 @@ .col_header span.header_text Task Details #status-bar - #task-details + #item-details #task-view | {{ tasks | count }} tasks so far. a(href="javascript:task_create('{{ project.url }}');") Create a new one!