Merge pull request #2 from pmitros/pmitros/accessibility-plus-ux

Accessibility+UX improvements

done/done.py

 """TO-DO: Show a toggle which lets students mark things as done."""
 
 import pkg_resources
+import uuid
 
 from xblock.core import XBlock
 from xblock.fields import Scope, Integer, String, Boolean, DateTime, Float
 from xblock.fragment import Fragment
 
-
 class DoneXBlock(XBlock):
     """
     Show a toggle which lets students mark things as done.
@@ -50,7 +50,10 @@ class DoneXBlock(XBlock):
         The primary view of the DoneXBlock, shown to students
         when viewing courses.
         """
-        html = self.resource_string("static/html/done.html")
+        html = self.resource_string("static/html/done.html").format(done=self.done, 
+                                                                    id=uuid.uuid1(0))
+        unchecked_png = self.runtime.local_resource_url(self, 'public/check-empty.png');
+        checked_png = self.runtime.local_resource_url(self, 'public/check-full.png');
         frag = Fragment(html)#.format(uid=self.scope_ids.usage_id))
         frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
         #frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
@@ -64,7 +67,9 @@ class DoneXBlock(XBlock):
             grow_right = 0
         frag.add_css(".done_left_spacer {{ flex-grow:{l}; }} .done_right_spacer {{ flex-grow:{r}; }}".format(r=grow_right, l=grow_left))
         frag.add_javascript(self.resource_string("static/js/src/done.js"))
-        frag.initialize_js("DoneXBlock", {'state':self.done})
+        frag.initialize_js("DoneXBlock", {'state':self.done, 
+                                          'unchecked':unchecked_png, 
+                                          'checked':checked_png})
         return frag
 
     # TO-DO: change this to create the scenarios you'd like to see in the

done/static/css/done.css

 /* CSS for DoneXBlock */
 
-.done_block {
-    width:100%; 
-    height:35px;
-    display:flex;
-    flex-direction: row;
+.done_aria_hidden {
+    position:absolute;
+    color:rgba(0,0,0,0);
+    overflow:hidden;
+    height:1px;
+    width:1px;
 }
 
-.done_wipe {
-    -webkit-transition: width 0.2s;
-    transition: width 0.2s;
-    text-align:center;
+.done_onoffswitch {
+    position: relative; width: 180px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
 }
-
-.done_windshield_animated {
-    -webkit-transition: background-color 0.4s, box-shadow 0.4s, color 0.4s, text-shadow 0.4s, background-image 0.4s;
-    transition: background-color 0.4s, box-shadow 0.4s, color 0.4s, text-shadow 0.4s, background-image 0.4s;
+.done_onoffswitch-checkbox {
+    display: none;
 }
 
-.done_windshield {
-    cursor: pointer;
-    width:200px; 
-    height:100%;
-    border: 1px solid #0d72a2;
-    border-radius: 3px;
-    font-family: 'Open Sans', Verdana, Geneva, sans-serif, sans-serif;
-    font-size: 13.333333015441895px;
-    font-weight : bold;
-    letter-spacing: normal;
+.done_onoffswitch-label {
+    display: block; overflow: hidden; cursor: pointer;
+    border: 2px solid #999999; border-radius: 10px;
 }
 
-.done_windshield_on { /* "Mark as complete"*/
-    -webkit-font-smoothing: antialiased;
-    background-color: #1e8bbe;
-    background-image: linear-gradient(rgb(109, 204, 241), rgb(56, 168, 229));
-    border-radius: 3px;
-    border: 1px solid rgb(43, 122, 163);
-    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px;
-    color: #fff;
-    text-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 0px;
+.done_onoffswitch-inner {
+    display: block; width: 200%; margin-left: -100%;
 }
 
-.done_windshield_off { /* Undo */
-    -webkit-font-smoothing: antialiased;
-    background-color: #e1e1e1;
-    background-image: linear-gradient(rgb(225, 255, 225), rgb(202, 232, 202));
-    border-radius: 3px;
-    border: 1px solid #cacaca;
-    box-shadow: rgb(251, 251, 251) 0px 1px 0px 0px inset;
-    color: #048904; 
-    text-shadow: rgb(248, 248, 248) 0px 1px 0px;
+.done_animated .done_onoffswitch-inner {
+    -moz-transition: margin 0.1s ease-in 0s; -webkit-transition: margin 0.1s ease-in 0s;
+    -o-transition: margin 0.1s ease-in 0s; transition: margin 0.1s ease-in 0s;
 }
 
-.done_windshield_on .done_wipe_on {
-  display:inline-block;
-  width:80%;
-  overflow:hidden;
-  text-overflow: clip;
-  white-space:nowrap;
+.done_onoffswitch-inner:before, .done_onoffswitch-inner:after {
+    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
+    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
+    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 
-.done_windshield_off .done_wipe_on {
-  display:inline-block;
-  width:0;
-  overflow:hidden;
-  text-overflow: clip;
-  white-space:nowrap;
+.done_onoffswitch-inner:after {
+    content: "Mark as complete";
+    padding-left: 40px;
+    background-color: rgb(0, 158, 231); color: #FFFFFF;
+}
+.done_onoffswitch-inner:before {
+    content: "Unmark";
+    padding-right: 100px;
+    background-color: #EEEEEE; color: #999999;
+    text-align: right;
 }
 
-.done_wiper {
-  display:inline-block;
-  width:7%;
-  vertical-align:-10 !important;
+.done_animated .done_onoffswitch-switch {
+    -moz-transition: all 0.1s ease-in 0s; -webkit-transition: all 0.1s ease-in 0s;
+    -o-transition: all 0.1s ease-in 0s; transition: all 0.1s ease-in 0s; 
 }
 
-.done_windshield_off .done_wipe_off {
-  display:inline-block;
-  width:80%;
-  overflow:hidden;
-  text-overflow: clip;
-  white-space:nowrap;
+.done_onoffswitch-switch {
+    display: block; width: 18px; margin: 6px 6px 6px 6px;
+    padding: -20px -20px -20px -20px;
+    background-position: center;
+    border: 2px solid #999999; border-radius: 20px;
+    position: absolute; top: 0; bottom: 0; right: 146px;
+    content: "X";
+    text-color:black;
 }
 
-.done_windshield_on .done_wipe_off {
-  display:inline-block;
-  width:0;
-  overflow:hidden;
-  text-overflow: clip;
-  white-space: nowrap;
+.done_onoffswitch-checkbox:checked + .done_onoffswitch-label .done_onoffswitch-inner {
+    margin-left: 0;
 }
 
-.ui_icon_gray {
-    background-image: url("//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/images/ui-icons_888888_256x240.png");
+.done_onoffswitch-checkbox:checked + .done_onoffswitch-label .done_onoffswitch-switch {
+    right: 0px; 
 }
\ No newline at end of file

done/static/html/done.html

-<div class="done_block">
-  <div class="done_left_spacer"> </div>
-  <div class="done_windshield"> 
-    <div style="display:block; width:100%; height:6px"></div>
-    <div class="done_wipe done_wipe_off"> Undo </div>
-    <div class="done_wiper"> <span class="ui-icon ui-icon-circle-plus ui_icon_white" style="padding-bottom:2px"></span> </div>
-    <div class="done_wipe done_wipe_on"> Mark as complete </div>
-  </div>
-  <div class="done_right_spacer"> </div>
+<div class="done_onoffswitch">
+    <input type="checkbox" name="onoffswitch" class="done_onoffswitch-checkbox" id="{id}_myonoffswitch" checked="{done}">  </input>
+    <label class="done_onoffswitch-label" for="{id}_myonoffswitch">
+        <span class="done_aria_hidden">I have completed this</span>
+        <span class="done_onoffswitch-inner"></span>
+        <span class="done_onoffswitch-switch"></span>
+    </label>
 </div>

done/static/js/src/done.js

+function update_knob(element, data) {
+  if($('.done_onoffswitch-checkbox', element).prop("checked")) {
+    $(".done_onoffswitch-switch", element).css("background-image", "url("+data['checked']+")");
+    $(".done_onoffswitch-switch", element).css("background-color", "#018801;");
+  } else {
+    $(".done_onoffswitch-switch", element).css("background-image", "url("+data['unchecked']+")");
+    $(".done_onoffswitch-switch", element).css("background-color", "#FFFFFF;");
+  }
+}
+
 function DoneXBlock(runtime, element, data) {
-    if (data.state) {
-	$('.done_windshield', element).addClass("done_windshield_off").removeClass("done_windshield_on");
-    } else {
-	$('.done_windshield', element).addClass("done_windshield_on").removeClass("done_windshield_off");
-    }
+    $('.done_onoffswitch-checkbox', element).prop("checked", data.state);
+    update_knob(element, data);
     var handlerUrl = runtime.handlerUrl(element, 'toggle_button');
 
     function updateCount(result) {}
@@ -12,16 +19,16 @@ function DoneXBlock(runtime, element, data) {
 	// Don't have animations on for above class changes. This is probably not necessary. I 
 	// was seeing animations on page load. I did a few things to fix it. The line below 
 	// wasn't the one that fixed it, but I decided to keep it anyways. 
-	$('.done_windshield', element).addClass("done_windshield_animated")
-	$('.done_windshield', element).click(function(){
-            $(this).toggleClass("done_windshield_on");
-            $(this).toggleClass("done_windshield_off");
+	//$('.done_block', element).addClass("done_windshield_animated");
+	$('.done_onoffswitch', element).addClass("done_animated");
+	$('.done_onoffswitch-checkbox', element).change(function(){
 	    $.ajax({
 		type: "POST",
 		url: handlerUrl,
-		data: JSON.stringify({"done":$(this).hasClass("done_windshield_off")}),
+		data: JSON.stringify({"done":$('.done_onoffswitch-checkbox', element).prop("checked")}),
 		success: updateCount
 	    });
+	    update_knob(element, data);
 	});
     });
 }