first commit

.gitignore

@@ -0,0 +1,3 @@
+*.pyc
+*.egg-info
+*~

README.md

@@ -1,4 +1,5 @@
 xblock-ispace
 =============
 
-Xblock to provide carusel of multimedia content including images, video, documents.
+Xblock to provide carousel of multimedia content including images, video, documents(pdf, ppt, doc, etc...).
+

carousel/__init__.py

@@ -0,0 +1 @@
+from .carousel import CarouselBlock

carousel/carousel.py

@@ -0,0 +1,102 @@
+import textwrap
+import urllib
+from lxml import etree
+from xml.etree import ElementTree as ET
+
+from xblock.core import XBlock
+from xblock.fields import Scope, Integer, String
+from xblock.fragment import Fragment
+
+from .utils import load_resource, render_template
+
+from StringIO import StringIO
+
+class CarouselBlock(XBlock):
+    """
+    An XBlock providing a responsive images carousel
+    """
+
+    display_name = String(help="This name appears in horizontal navigation at the top of the page.", 
+        default="Carousel", 
+        scope=Scope.content
+    )
+
+    data = String(help="",  
+       scope=Scope.content,
+       default=textwrap.dedent("""
+            <carousel>
+              <img>http://met-content.bu.edu/etr2/content/images/Slide1.JPG</img>
+              <img>http://met-content.bu.edu/etr2/content/images/Slide2.JPG</img>
+              <img>http://met-content.bu.edu/etr2/content/images/Slide3.JPG</img>
+              <video>http://www.youtube.com/watch?v=7uHeNryKUWk</video>
+              <doc>http://www.bu.edu/met-eti/files/2013/03/Final_VirtualLaboratoriesForLearning.pdf</doc>
+            </carousel>
+          """
+    ))
+
+    def student_view(self, context):
+        """
+        Lab view, displayed to the student
+        """
+
+	root = ET.fromstring(self.data)
+        items = []
+        for child in root:
+            if child.tag == 'doc': child.text = urllib.quote(child.text, '')
+            width = child.attrib.get('width', '100%')
+            height = child.attrib.get('height', '625')
+            items.append((child.tag, child.text, width, height))
+
+        fragment = Fragment()
+
+        context = {
+            'items': items,
+        }
+
+        fragment.add_content(render_template('/templates/html/carousel.html', context))
+        fragment.add_javascript(load_resource('public/js/jquery-ui-1.10.4.custom.js'))
+        fragment.add_css(load_resource('public/css/responsive-carousel.css'))
+        fragment.add_css(load_resource('public/css/responsive-carousel.slide.css'))
+        fragment.add_javascript(load_resource('public/js/responsive-carousel.js'))
+        fragment.add_css_url("https://vjs.zencdn.net/4.5.1/video-js.css")
+        fragment.add_javascript_url("https://vjs.zencdn.net/4.5.1/video.js")
+        fragment.add_javascript(load_resource('public/js/youtube.js'))
+        fragment.add_javascript('function CarouselBlock(runtime, element) { console.log("ok..."); }')
+        fragment.initialize_js('CarouselBlock')
+
+        return fragment
+
+    def studio_view(self, context):
+        """
+        Studio edit view
+        """
+
+        fragment = Fragment()
+        fragment.add_content(render_template('templates/html/carousel_edit.html', {'self': self, }))
+        fragment.add_javascript(load_resource('public/js/jquery-ui-1.10.4.custom.js'))
+        fragment.add_javascript(load_resource('public/js/carousel_edit.js'))
+        fragment.initialize_js('CarouselEditBlock')
+
+        return fragment
+
+    @XBlock.json_handler
+    def studio_submit(self, submissions, suffix=''):
+        self.display_name = submissions['display_name']
+        xml_content = submissions['data']
+
+        try:
+            etree.parse(StringIO(xml_content))
+            self.data = xml_content
+        except etree.XMLSyntaxError as e:
+            return {
+                'result': 'error',
+                'message': e.message
+            }
+
+        return {
+            'result': 'success',
+        }
+
+    @staticmethod
+    def workbench_scenarios():
+            return [("carousel demo", "<carousel />")]

carousel/public/css/responsive-carousel.css

@@ -0,0 +1,20 @@
+/*
+ * responsive-carousel
+ * https://github.com/filamentgroup/responsive-carousel
+ *
+ * Copyright (c) 2012 Filament Group, Inc.
+ * Licensed under the MIT, GPL licenses.
+ */
+.carousel {
+	width: 100%;
+	position: relative;
+}
+.carousel .carousel-item {
+	display: none;
+}
+.carousel .carousel-active {
+	display: block;
+}
+.carousel .carousel-nav:nth-child(2) {
+	display: none;
+}

carousel/public/css/responsive-carousel.slide.css

@@ -0,0 +1,61 @@
+/*
+ * responsive-carousel
+ * https://github.com/filamentgroup/responsive-carousel
+ *
+ * Copyright (c) 2012 Filament Group, Inc.
+ * Licensed under the MIT, GPL licenses.
+*/
+.carousel-slide {
+	position: relative;
+	overflow: hidden;
+	-webkit-transform: translate3d(0, 0, 0);
+	-moz-transform: translate3d(0, 0, 0);
+	-ms-transform: translate3d(0, 0, 0);
+	-o-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.carousel-slide .carousel-item {
+	position: absolute;
+	left: 100%;
+	top: 0;
+	width: 100%;
+	display: block; /* overrides basic carousel styles */
+	z-index: 1;
+	-webkit-transition: left .2s ease;
+	-moz-transition: left .2s ease;
+	-ms-transition: left .2s ease;
+	-o-transition: left .2s ease;
+	transition: left .2s ease;
+}
+.carousel-no-transition .carousel-item {
+	-webkit-transition: none;
+	-moz-transition: none;
+	-ms-transition: none;
+	-o-transition: none;
+	transition: none;
+}
+.carousel-slide .carousel-active {
+	left: 0;
+	position: relative;
+	z-index: 2;
+}
+.carousel-slide .carousel-in {
+	left: 0;
+}
+.carousel-slide-reverse .carousel-out {
+	left: 100%;
+}
+.carousel-slide .carousel-out,
+.carousel-slide-reverse .carousel-in {
+	left: -100%;
+}
+.carousel-slide-reverse .carousel-item {
+	-webkit-transition: left .1s ease;
+	-moz-transition: left .1s ease;
+	-ms-transition: left .1s ease;
+	-o-transition: left .1s ease;
+	transition: left .1s ease;
+}
+.carousel-slide-reverse .carousel-active {
+	left: 0;
+}

carousel/public/js/carousel_edit.js

@@ -0,0 +1,27 @@
+function CarouselEditBlock(runtime, element) {
+    var xmlEditorTextarea = $('.block-xml-editor', element),
+        xmlEditor = CodeMirror.fromTextArea(xmlEditorTextarea[0], { mode: 'xml', lineWrapping: true });
+
+    $(element).find('.save-button').bind('click', function() {
+        var data = {
+            'display_name': $(element).find('.edit-display-name').val(),
+            'data': xmlEditor.getValue(),
+        };
+
+        $('.xblock-editor-error-message', element).html();
+        $('.xblock-editor-error-message', element).css('display', 'none');
+        var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
+        $.post(handlerUrl, JSON.stringify(data)).done(function(response) {
+            if (response.result === 'success') {
+                window.location.reload(false);
+            } else {
+                $('.xblock-editor-error-message', element).html('Error: '+response.message);
+                $('.xblock-editor-error-message', element).css('display', 'block');
+            }
+        });
+    });
+
+    $(element).find('.cancel-button').bind('click', function() {
+        runtime.notify('cancel', {});
+    });
+}