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

@@ -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) {
+function item_open(item_id, item_type, pushState)
-    if (task_id === undefined) {
+{
-        throw new ReferenceError("task_open(" + task_id + ") called.");
+    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');
+    // Style elements starting with item_type and dash, e.g. "#shot-uuid"
-    $('#task-' + task_id).addClass('active');
+    $('[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) {
+    $.get(item_url, function(item_data) {
-        $('#task-details').html(task_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) {
+function task_create(shot_id, project_url, task_type)
-    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) {
     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'

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 %}
 
 

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!