Google Docs component in place

README.md

+xblock-google-drive
+=====================

google_drive/__init__.py

+from .google_docs import GoogleDocumentBlock
+from .google_calendar import GoogleCalendarBlock
\ No newline at end of file

google_drive/google_calendar.py

+# -*- coding: utf-8 -*-
+#
+
+# Imports ###########################################################
+
+import pkg_resources
+#import logging
+import textwrap
+#import json
+#import webob
+#from lxml import etree
+#from xml.etree import ElementTree as ET
+
+from xblock.core import XBlock
+from xblock.fields import Scope, String
+from xblock.fragment import Fragment
+
+# from StringIO import StringIO
+
+from .utils import render_template, AttrDict, load_resource
+
+
+# Globals ###########################################################
+
+#log = logging.getLogger(__name__)
+
+
+# Classes ###########################################################
+
+class GoogleCalendarBlock(XBlock):
+    """
+    XBlock providing a google calendar view for a specific calendar
+    """
+    display_name = String(
+        display_name="Display Name",
+        help="This name appears in the horizontal navigation at the top of the page.",
+        scope=Scope.settings,
+        default="Example Google Calendar"
+    )
+
+    embed_code = String(
+        display_name="Embed Code",
+        help="Google provides an embed code for Drive calendars with a variety of settings. From inside a Google Drive calendar, select Publish to the Web from within the File menu to get to your Embed Code with your desired settings.",
+        scope=Scope.settings,
+        default=textwrap.dedent("""
+            <iframe
+                src="https://docs.google.com/presentation/d/1B22AsMwG7jgE39vm1BuiJClir_JUz1q077cPEKJR2mI/embed?start=false&loop=false&delayms=3000"
+                frameborder="0"
+                width="960"
+                height="569"
+                allowfullscreen="true"
+                mozallowfullscreen="true"
+                webkitallowfullscreen="true">
+            </iframe>
+        """))
+
+    def student_view(self, context={}):
+        """
+        Player view, displayed to the student
+        """
+
+        fragment = Fragment()
+        context.update({
+            "self": self,
+        })
+        fragment.add_content(render_template('/templates/html/google_docs.html', context))
+        fragment.add_css(load_resource('public/css/google_docs.css'))
+        fragment.add_javascript(load_resource('public/js/google_docs.js'))
+
+        fragment.initialize_js('GoogleDocumentBlock')
+
+        return fragment
+
+    def studio_view(self, context):
+        """
+        Editing view in Studio
+        """
+        fragment = Fragment()
+        fragment.add_content(render_template('/templates/html/google_docs_edit.html', {
+            'self': self,
+        }))
+        fragment.add_javascript(load_resource('public/js/google_docs_edit.js'))
+
+        fragment.initialize_js('GoogleDocumentEditBlock')
+
+        return fragment
+
+    @XBlock.json_handler
+    def studio_submit(self, submissions, suffix=''):
+
+        self.display_name = submissions['display_name']
+        self.embed_code = submissions['embed_code']
+
+        return {
+            'result': 'success',
+        }

google_drive/google_docs.py

+# -*- coding: utf-8 -*-
+#
+
+# Imports ###########################################################
+
+import pkg_resources
+#import logging
+import textwrap
+#import json
+#import webob
+#from lxml import etree
+#from xml.etree import ElementTree as ET
+
+from xblock.core import XBlock
+from xblock.fields import Scope, String
+from xblock.fragment import Fragment
+
+# from StringIO import StringIO
+
+from .utils import render_template, AttrDict, load_resource
+
+
+# Globals ###########################################################
+
+#log = logging.getLogger(__name__)
+
+
+# Classes ###########################################################
+
+class GoogleDocumentBlock(XBlock):
+    """
+    XBlock providing a google document embed link
+    """
+    display_name = String(
+        display_name="Display Name",
+        help="This name appears in the horizontal navigation at the top of the page.",
+        scope=Scope.settings,
+        default="Google Document"
+    )
+
+    embed_code = String(
+        display_name="Embed Code",
+        help="Google provides an embed code for Drive documents with a variety of settings. From inside a Google Drive document, select Publish to the Web from within the File menuto get to your Embed Code with your desired settings.",
+        scope=Scope.settings,
+        default=textwrap.dedent("""
+            <iframe
+                src="https://docs.google.com/presentation/d/1B22AsMwG7jgE39vm1BuiJClir_JUz1q077cPEKJR2mI/embed?start=false&loop=false&delayms=3000"
+                frameborder="0"
+                width="960"
+                height="569"
+                allowfullscreen="true"
+                mozallowfullscreen="true"
+                webkitallowfullscreen="true">
+            </iframe>
+        """))
+
+    def student_view(self, context={}):
+        """
+        Player view, displayed to the student
+        """
+
+        fragment = Fragment()
+        context.update({
+            "self": self,
+        })
+        fragment.add_content(render_template('/templates/html/google_docs.html', context))
+        fragment.add_css(load_resource('public/css/google_docs.css'))
+        fragment.add_javascript(load_resource('public/js/google_docs.js'))
+
+        fragment.initialize_js('GoogleDocumentBlock')
+
+        return fragment
+
+    def studio_view(self, context):
+        """
+        Editing view in Studio
+        """
+        fragment = Fragment()
+        fragment.add_content(render_template('/templates/html/google_docs_edit.html', {
+            'self': self,
+        }))
+        fragment.add_javascript(load_resource('public/js/google_docs_edit.js'))
+
+        fragment.initialize_js('GoogleDocumentEditBlock')
+
+        return fragment
+
+    @XBlock.json_handler
+    def studio_submit(self, submissions, suffix=''):
+
+        self.display_name = submissions['display_name']
+        self.embed_code = submissions['embed_code']
+
+        return {
+            'result': 'success',
+        }

google_drive/public/js/google_docs.js

+/* Javascript for GoogleDocumentBlock. */
+function GoogleDocumentBlock(runtime, element) {
+
+    $(function ($) {
+        /* Here's where you'd do things on page load. */
+    });
+}
\ No newline at end of file

google_drive/public/js/google_docs_edit.js

+function GoogleDocumentEditBlock(runtime, element) {
+    $('.save-button', element).bind('click', function() {
+        var data = {
+            'display_name': $('.edit-display-name', element).val(),
+            'embed_code': $('.edit-embed-code', element).val(),
+        };
+
+        $('.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');
+            }
+        });
+    });
+
+    $('.cancel-button', element).bind('click', function() {
+        runtime.notify('cancel', {});
+    });
+}

google_drive/templates/html/google_docs.html

+{% autoescape off %}
+<div class="google-docs-xblock-wrapper">
+{{ self.embed_code }}
+</div>
+{% endautoescape %}

google_drive/templates/html/google_docs_edit.html

+{% load i18n %}
+
+<!-- TODO: Replace by default edit view once available in Studio -->
+<div class="wrapper-comp-settings is-active editor-with-buttons " id="settings-tab">
+  <ul class="list-input settings-list">
+      <li class="field comp-setting-entry is-set">
+          <div class="wrapper-comp-setting">
+            <label class="label setting-label" for="edit_display_name">{% trans "Display Name" %}</label>
+            <input class="input setting-input edit-display-name" id="edit_display_name" value="{{ self.display_name }}" type="text">
+          </div>
+          <span class="tip setting-help">{% trans "This name appears in the horizontal navigation at the top of the page." %}</span>
+      </li>
+      <li class="field comp-setting-entry is-set">
+          <div class="wrapper-comp-setting">
+            <label class="label setting-label" for="edit_embed_code">{% trans "Embed Code" %}</label>
+            <textarea rows="4" class="input setting-input edit-embed-code" id="edit_embed_code">
+              {{ self.embed_code }}
+            </textarea>
+          </div>
+          <span class="tip setting-help">{% trans "Google provides an embed code for Drive documents with a variety of settings. From inside a Google Drive document, select Publish to the Web from within the File menuto get to your Embed Code with your desired settings." %}</span>
+      </li>
+  </ul>
+  <div class="xblock-actions">
+    <span class="xblock-editor-error-message"></span>
+    <ul>
+      <li class="action-item">
+        <a href="#" class="button action-primary save-button">{% trans "Save" %}</a>
+      </li>
+
+      <li class="action-item">
+        <a href="#" class="button cancel-button">{% trans "Cancel" %}</a>
+      </li>
+    </ul>
+  </div>
+</div>

google_drive/utils.py

+# -*- coding: utf-8 -*-
+#
+
+# Imports ###########################################################
+
+import logging
+import pkg_resources
+
+from django.template import Context, Template
+
+
+# Globals ###########################################################
+
+log = logging.getLogger(__name__)
+
+
+# Functions #########################################################
+
+def load_resource(resource_path):
+    """
+    Gets the content of a resource
+    """
+    resource_content = pkg_resources.resource_string(__name__, resource_path)
+    return resource_content.decode("utf-8")
+
+def render_template(template_path, context={}):
+    """
+    Evaluate a template by resource path, applying the provided context
+    """
+    template_str = load_resource(template_path)
+    template = Template(template_str)
+    return template.render(Context(context))
+
+class AttrDict(dict):
+    def __init__(self, *args, **kwargs):
+        super(AttrDict, self).__init__(*args, **kwargs)
+        self.__dict__ = self

requirements.txt

+-e .
+-e git://github.com/nosedjango/nosedjango.git@ed7d7f9aa969252ff799ec159f828eaa8c1cbc5a#egg=nosedjango-dev
+lxml==3.0.1

setup.py

+"""Setup for my_google_drive XBlock."""
+
+import os
+from setuptools import setup
+
+
+def package_data(pkg, roots):
+    """Generic function to find package_data.
+
+    All of the files under each of the `roots` will be declared as package
+    data for package `pkg`.
+
+    """
+    data = []
+    for root in roots:
+        for dirname, _, files in os.walk(os.path.join(pkg, root)):
+            for fname in files:
+                data.append(os.path.relpath(os.path.join(dirname, fname), pkg))
+
+    return {pkg: data}
+
+
+setup(
+    name='xblock-google-drive',
+    version='0.1',
+    description='my_google_drive XBlock',   # TODO: write a better description.
+    packages=[
+        'google_drive',
+    ],
+    install_requires=[
+        'XBlock',
+    ],
+    entry_points={
+        'xblock.v1': [
+            'google-document = google_drive:GoogleDocumentBlock',
+            #'google-calendar = google_drive:GoogleCalendarBlock',
+        ]
+    },
+    package_data=package_data("google_drive", ["static", "templates", "public"]),
+)
\ No newline at end of file