Merge pull request #2 from ExtensionEngine/vkaracic/KF-725

KF-725: Remove page reload from done xblock.

Author: vkaracic

done/done.py

@@ -1,7 +1,9 @@
 """ Show a toggle which lets students mark things as done."""
 
+import json
 import pkg_resources
 import uuid
+
 from django.template import Context, Template
 from xblock.core import XBlock
 from xblock.fields import Scope, String, Boolean, DateTime, Float
@@ -18,7 +20,6 @@ class DoneXBlock(XBlock):
     """
     Show a toggle which lets students mark things as done.
     """
-
     done = Boolean(
         scope=Scope.user_state,
         help="Is the student done?",
@@ -76,9 +77,15 @@ def toggle_button(self, data, suffix=''):
             # is finished for XBlocks.
             self.runtime.publish(self, "edx.done.toggled", {'done': self.done, 'helpful': self.helpful})
 
-
         return {'state': {'done': self.done, 'helpful': self.helpful}}
 
+    @XBlock.handler
+    def get_state(self, *args, **kwargs):
+        return Response(body=json.dumps({
+            'state': self.done,
+            'helpful': self.helpful,
+        }))
+
     def student_view(self, context=None):  # pylint: disable=unused-argument
         """
         The primary view of the DoneXBlock, shown to students

done/static/js/src/done.js

@@ -16,8 +16,25 @@ function update_knob(element, data) {
   }
 }
 
+function addCheckIcon($element) {
+    var icon = '<i class="fa fa-check-circle"></i>';
+    $element.empty()
+            .append(icon);
+}
+
+
 function DoneXBlock(runtime, element, data) {
-    $('.done_onoffswitch-checkbox', element).prop("checked", data.state);
+    // Updating the xblock state every time it's initialized.
+    $.ajax({
+        url: runtime.handlerUrl(element, 'get_state'),
+        method: 'GET',
+        success: function (data) {
+            $('.done_onoffswitch-checkbox', element).prop("checked", data.state);
+            if (data.helpful != null) {
+                $('.done-radio input[value="' + data.helpful + '"]', element).prop('checked', true);
+            }
+        }
+    });
 
     if (data.align != "right") {
 	$('.done_right_spacer', element).addClass("done_grow");
@@ -32,22 +49,30 @@ function DoneXBlock(runtime, element, data) {
     $(function ($) {
 	$('.done_onoffswitch', element).addClass("done_animated");
 	$('.done_onoffswitch-checkbox', element).change(function(){
-	    var checked = $('.done_onoffswitch-checkbox', element).prop("checked");
+	    var isChecked = $('.done_onoffswitch-checkbox', element).prop("checked");
 	    $.ajax({
-		type: "POST",
-		url: handlerUrl,
-		data: JSON.stringify({'done':checked})
+            type: "POST",
+            url: handlerUrl,
+            data: JSON.stringify({'done':isChecked}),
+            success: function() {
+                var $element = $('.menu-item.active .accordion-nav .icon-container');
+                isChecked ? addCheckIcon($element) : $element.empty();
+            }
 	    });
-	    Logger.log("edx.done.toggled", {'done': checked});
+	    Logger.log("edx.done.toggled", {'done': isChecked});
 	    update_knob(element, data);
     });
     $('.done-radio input[type=radio]').on('change', function(event) {
-        var checked = event.target.checked;
-        if(checked) {
+        var isChecked = event.target.checked;
+        if(isChecked) {
             $.ajax({
                 type: "POST",
                 url: handlerUrl,
-                data: JSON.stringify({'helpful': event.target.value})
+                data: JSON.stringify({'helpful': event.target.value}),
+                success: function() {
+                    var $element = $('.accordion-unit.active .icon-container');
+                    addCheckIcon($element);
+                }
             });
         }
     });

setup.py

@@ -16,7 +16,7 @@ def package_data(pkg, root):
 
 setup(
     name='done-xblock',
-    version='FT-1.0',
+    version='FT-1.1',
     description='done XBlock',   # TODO: write a better description.
     packages=[
         'done',