Skip to content

A
AnimationXBlock
Commit 8912f8c7 by Piotr Mitros
Options

Pretty styling

parent d5233efc
Showing with 117 additions and 23 deletions
animation/animation.py
......@@ -8,7 +8,6 @@ from xblock.core import XBlock
from xblock.fields import Scope, Integer, List
from xblock.fragment import Fragment
class AnimationXBlock(XBlock):
"""
TO-DO: document what your XBlock does.
......@@ -39,6 +38,27 @@ class AnimationXBlock(XBlock):
help="Width"
)
position = Integer(
scope=Scope.user_state,
help="Current position",
default=0
)
max_position = Integer(
scope=Scope.user_state,
help="Maximum position (for progress)",
default=0
)
@XBlock.json_handler
def update_position(self, data, suffix):
print data
if 'position' in data:
self.position = data['position']
if 'max_position' in data:
self.max_position = data['max_position']
return {"status":"success"}
def resource_string(self, path):
"""Handy helper for getting resources from our kit."""
data = pkg_resources.resource_string(__name__, path)
......@@ -51,8 +71,14 @@ class AnimationXBlock(XBlock):
when viewing courses.
"""
html = self.resource_string("static/html/animation.html")
frag = Fragment(html.format(height = self.height, textheight = self.textheight, width=self.width, animation = json.dumps(self.animation)))
frag.add_javascript_url("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
frag = Fragment(html.format(height = self.height,
textheight = self.textheight,
width=self.width,
inner_width=self.width-20,
animation = json.dumps(self.animation),
position = self.position,
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_javascript_url("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js")
frag.add_css(self.resource_string("static/css/animation.css"))
......
animation/static/css/animation.css
/* CSS for AnimationXBlock */
.animation_wrapper {
display:block;
background:rgb(200, 200, 200); // TODO: edX gray
padding:20px !important;
border-width:1px;
border-style:solid;
border-color:black;
border-radius:5px;
}
.animation_block {
display:inline-block;
}
.animation_block .count {
font-weight: bold;
.animation_text {
border-width:1px;
border-style:solid;
border-color:black;
border-radius:5px;
padding:10px;
text-align:center;
margin:10px;
background:rgb(255, 255, 255);
}
.animation_block p {
cursor: pointer;
}
\ No newline at end of file
.ui-widget-content .ui-state-default,
.animation_slider
.ui-widget-header .ui-state-default, .animation_slider {
border: 1px solid #222222;
background: #e6e6e6 linear-gradient(rgb(109, 204, 241), rgb(56, 168, 229));
font-weight: normal;
color: #555555;
}
.ui-widget-content, .animation_slider {
border: 1px solid #222222;
background: #23c400 linear-gradient(90deg, rgb(109, 204, 241), rgb(202, 232, 202));
color: #222222;
}
animation/static/html/animation.html
<div style="display:inline">
<div class="animation_block" style="height:{height}; width:{width}; display:inline-block;">
<script type="data/animation" class="animation_source">
{animation}
</script>
<img class="animation_image" src="http://www.learningandteaching.info/learning/graphics/klb4kind.gif" height={height} width={width}>
<div class="animation_text" style="height:{textheight}">
<div class="animation_wrapper" style="width:{width};">
<div class="animation_block" style="width:{width};">
<script type="data/animation" class="animation_source">
{{"position":{position},
"animation":{animation},
"max_position":{max_position}
}}
</script>
<div style="display:block; width:100%; padding:10px;">
<div class="animation_slider" style="width:{inner_width}; "></div>
</div>
<img class="animation_image" src="" height={height} width={width}>
<div class="animation_text_wrapper" style="height:{textheight}">
<div class="animation_text">
</div>
</div>
</div>
<div class="animation_slider"></div>
</div>
</div>
animation/static/js/src/animation.js
/* Javascript for AnimationXBlock. */
function AnimationXBlock(runtime, element) {
$(function ($) {
function update_animation() {
$(".animation_image").attr("src", animation[$(".animation_slider").slider("value")].src);
$(".animation_text").html(animation[$(".animation_slider").slider("value")].desc);
// Grab XBlocks data.
handlerUrl = runtime.handlerUrl(element, 'update_position');
var data = JSON.parse($(".animation_source", element).text())
var animation = data['animation'];
var position = data['position'];
var max_position = data['max_position'];
// Set the correct image and text when the slider moves. Also,
// make an AJAX call to the server to save position and
// maximum position.
//
// 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")
$(".animation_image").attr("src", animation[position].src);
$(".animation_text").html(animation[position].desc);
if (position > max_position) { max_position = position; }
$.ajax({
type: "POST",
url: handlerUrl,
data: JSON.stringify({"position" : position,
"max_position" : max_position}),
});
}
var animation = JSON.parse($(".animation_source", element).text());
// Initialize slider. On any change, update the state
$( ".animation_slider", element ).slider({
value: 0,
value: position,
min: 0,
max: animation.length-1,
step: 1,
......@@ -16,6 +38,14 @@ function AnimationXBlock(runtime, element) {
slide: function( event, ui) { update_animation(); },
change: function( event, ui) { update_animation(); }
});
// Go to current position in animation
update_animation();
// Preload images
for(i=0; i<position.length; i++){
animation[position]["image"] = new Image();
animation[position]["image"].src = animation[position].src;
}
});
}
\ No newline at end of file
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