Skip to content

D
DoneXBlock
Commit da93ba6e by Piotr Mitros
Options

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

Accessibility+UX improvements
parents 765795dc 090504c9
Showing with 81 additions and 93 deletions
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);
});
});
}
done_xblock.png
done_xblock.png

4.48 KB | W: | H:

done_xblock.png

4.75 KB | W: | H:

done_xblock.png
done_xblock.png
done_xblock.png
done_xblock.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment