Skip to content

A
AnimationXBlock
Commit d948eddd by Piotr Mitros
Options

Cleaned up styling

parent 9ac34b7e
Showing with 82 additions and 18 deletions
animation/animation.py
......@@ -52,7 +52,6 @@ class AnimationXBlock(XBlock):
@XBlock.json_handler
def update_position(self, data, suffix):
print data
if 'position' in data:
self.position = data['position']
if 'max_position' in data:
......@@ -82,7 +81,9 @@ class AnimationXBlock(XBlock):
max_position = self.max_position))
# frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
frag.add_css_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css")
frag.add_css(self.resource_string("static/css/jquery.ui.labeledslider.css"))
frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
frag.add_javascript(self.resource_string("static/js/src/jquery.ui.labeledslider.js"))
frag.add_css(self.resource_string("static/css/animation.css"))
frag.add_javascript(self.resource_string("static/js/src/animation.js"))
frag.initialize_js('AnimationXBlock')
......@@ -125,7 +126,7 @@ class AnimationXBlock(XBlock):
return [
("AnimationXBlock",
"""<vertical_demo>
<animation width="460" height="384" textheight="200">
<animation width="460" height="384" textheight="100">
http://upload.wikimedia.org/wikipedia/commons/e/e8/Pin_tumbler_no_key.svg
Without a key in the lock, the driver pins (blue) are pushed downwards, preventing the plug (yellow) from rotating.
http://upload.wikimedia.org/wikipedia/commons/5/54/Pin_tumbler_bad_key.svg
......
animation/static/css/animation.css
/* CSS for AnimationXBlock */
/*div {
border-width:1px;
border-style:solid;
border-color:rgba(0,0,0,0.1);
}
Above is useful for debugging
*/
.animation_header {
border-width:1px;
border-style:solid;
border-color:rgba(0,0,0,0.1);
border-radius: 16 16 16 16;
background:rgba(255,255,255,1);
display:flex;
}
.animation_wrapper { // Whole XBlock. Gray background
display:block;
background:rgb(200, 200, 200); // TODO: edX gray
padding:20px !important;
background:rgba(0,0,0,0.01);
/*background:rgb(200, 200, 200); // TODO: edX gray*/
border-width:1px;
border-style:solid;
border-color:black;
border-radius:5px;
border-color:rgba(0,0,0,0.1);
border-radius: 16 16 16 16;
width:100%;
}
......@@ -14,6 +31,7 @@
display:block;
width:100%;
padding:10px;
}
.ui-widget-content .ui-state-default,
......@@ -31,13 +49,23 @@
color: #222222;
}
.animation_flex_column {
display:flex;
flex-direction: column;
}
.animation_flex_row {
display:flex;
flex-direction: column;
}
.animation_text {
border-width:1px;
border-style:solid;
border-color:black;
border-color:rgba(0,0,0,0.05);
border-radius:5px;
padding:10px;
text-align:center;
margin:10px;
background:rgb(255, 255, 255);
background:rgba(255,255,255,1);
}
animation/static/html/animation.html
......@@ -5,14 +5,33 @@
"max_position":{max_position}
}}
</script>
<div class="animation_slider_wrapper">
<div class="animation_slider" style="width:{inner_width}; "></div>
</div>
<div class="animation_image_wrapper">
<img class="animation_image" src="" height={height} width={width}>
<div class="animation_header">
<div class="animation_flex_column animation_left">
<div style="flex-grow:1;"> </div>
<span class="ui-icon ui-icon-triangle-1-w" style="vertical-align:middle; height:16;"></span>
<div style="flex-grow:1">
</div>
</div>
<div class="animation_slider_wrapper" style="flex-grow:1">
<div class="animation_slider" ></div>
</div>
<div class="animation_flex_column animation_right">
<div style="flex-grow:1"> </div>
<span class="ui-icon ui-icon-triangle-1-e" style="vertical-align:middle; height:16;"></span>
<div style="flex-grow:1">
</div>
</div>
</div>
<div class="animation_text_wrapper" style="height:{textheight}">
<div class="animation_text">
<div style="display:flex">
<div style="flex-grow:1"> </div>
<div class="animation_image_wrapper">
<img class="animation_image" src="" height={height} width={width}>
</div>
<div style="flex-grow:1"> </div>
</div>
<div class="animation_text_wrapper" style="display:flex;height:{textheight}">
<div style="flex-grow:1"> </div>
<div class="animation_text" style="width:{width}"></div>
<div style="flex-grow:1"> </div>
</div>
</div>
animation/static/js/src/animation.js
......@@ -16,7 +16,7 @@ function AnimationXBlock(runtime, element) {
// TODO: Should we do this less often for lower load?
// (It's okay right now, but less would be cleaner)
function update_animation() {
position = $(".animation_slider").slider("value")
position = $(".animation_slider", element).labeledslider("value")
$(".animation_image").attr("src", animation[position].src);
$(".animation_text").html(animation[position].desc);
if (position > max_position) { max_position = position; }
......@@ -32,7 +32,7 @@ function AnimationXBlock(runtime, element) {
}
// Initialize slider. On any change, update the state
$( ".animation_slider", element ).slider({
$( ".animation_slider", element ).labeledslider({
value: position,
min: 0,
max: animation.length-1,
......@@ -45,10 +45,26 @@ function AnimationXBlock(runtime, element) {
// Go to current position in animation
update_animation();
$(".animation_left", element).click(function(){
new_position = position-1;
if(new_position<0) {
new_position = 0;
}
$(".animation_slider", element).labeledslider("value", new_position);
});
$(".animation_right", element).click(function(){
new_position = position + 1;
if(new_position > animation.length - 1) {
new_position = animation.length - 1;
}
$(".animation_slider", element).labeledslider("value", new_position);
});
// Preload images. I'm not sure this works. Internet
// said it did, but I think it might not, just from
// performance
for(i=0; i<position.length; i++){
for(i=0; i<animation.length; i++){
animation[position]["image"] = new Image();
animation[position]["image"].src = animation[position].src;
}
......
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