Commits

Tatham Oddie committed 9787f3f

Implemented client-side color change call.

  • Participants
  • Parent commits b48e922

Comments (0)

Files changed (2)

Web/Scripts/librarian.js

 
 $(function () {
 
-    $("ol.backlog")
+    $('ol.backlog')
         .each(function () {
 
             var backlogTable = $(this);
 
-            var contextMenu = $("<ul id='backlog-contextMenu' class='contextMenu'></ul>");
-            contextMenu.append($("<li><a href='#white'>White</a></li>"));
-            contextMenu.append($("<li><a href='#yellow'>Yellow</a></li>"));
-            contextMenu.append($("<li><a href='#orange'>Orange</a></li>"));
-            contextMenu.append($("<li><a href='#red'>Red</a></li>"));
-            contextMenu.append($("<li><a href='#green'>Green</a></li>"));
-            contextMenu.append($("<li><a href='#blue'>Blue</a></li>"));
+            var contextMenu = $('<ul id="backlog-contextMenu" class="contextMenu"></ul>');
+            contextMenu.append($('<li><a href="#color-white">White</a></li>'));
+            contextMenu.append($('<li><a href="#color-yellow">Yellow</a></li>'));
+            contextMenu.append($('<li><a href="#color-orange">Orange</a></li>'));
+            contextMenu.append($('<li><a href="#color-red">Red</a></li>'));
+            contextMenu.append($('<li><a href="#color-green">Green</a></li>'));
+            contextMenu.append($('<li><a href="#color-blue">Blue</a></li>'));
             contextMenu.insertAfter(backlogTable);
 
             backlogTable
-                .find("li")
+                .find('li')
                 .contextMenu(
                     { menu: 'backlog-contextMenu' },
                     function (action, element) {
-                        alert(action);
+                        var storyId = $(element).data('story-id');
+
+                        var colorAction = /^color-(\w*)/i.exec(action);
+                        if (colorAction) {
+                            var newColor = colorAction[1];
+                            setStoryColor(element, storyId, newColor);
+                        }
                     }
                 );
 
         });
 
-});
+});
+
+function setStoryColor(storyElement, storyId, newColor) {
+    storyElement = $(storyElement);
+    $.post(
+        'backlog/' + storyId + '/set-color',
+        'color=' + newColor,
+        function () {
+            var existingColorClass = /story-color-\w*/i.exec(storyElement.attr('class'));
+            if (existingColorClass) storyElement.removeClass(existingColorClass[0]);
+            storyElement.addClass('story-color-' + newColor);
+        }
+    );
+}

Web/Views/Story/Backlog.cshtml

     <ol class="backlog">
         @foreach (var story in Model)
         {
-            <li class="story-color-@story.ColorKey">
+            <li class="story-color-@story.ColorKey" data-story-id="@story.Id">
                 <span class="story-id">#@story.Id</span>
                 <span class="estimated-effort @(story.EstimatedEffort.HasValue ? "" : "unestimated")">@(story.EstimatedEffort.HasValue ? story.EstimatedEffort.ToString() : "?")</span>
                 <div>