Adds imagemodal, submit-and-comparexblocks

.gitignore

@@ -217,3 +217,6 @@ __marimo__/
 
 # Sphinx documentation
 docs/_build/
+
+# macOS system files
+**/.DS_Store

pyproject.toml

@@ -30,6 +30,7 @@ keywords = [
 dependencies = [
     "XBlock",
     "Django>=4.2",
+    "six"
 ]
 
 [project.urls]
@@ -46,6 +47,10 @@ test = [
     "pytest>=7.0",
     "pytest-cov",
     "pytest-django",
+    "coverage",
+    "edx-lint",
+    "edx-opaque-keys",
+    "mock",
 ]
 docs = [
     "sphinx",
@@ -54,6 +59,8 @@ docs = [
 
 [project.entry-points."xblock.v1"]
 audio = "audio:AudioXBlock"
+imagemodal = "imagemodal.xblocks:ImageModal"
+submit-and-compare = "submit_and_compare.xblocks:SubmitAndCompareXBlock"
 
 # Packages live in src/ but are installed without the src prefix
 # e.g., src/foo_xblock/ is installed as foo_xblock

src/imagemodal/README.rst

@@ -0,0 +1,126 @@
+Image Modal XBlock
+==================
+
+A full-screen image modal XBlock,
+for use within the Open edX platform.
+
+|badge-ci|
+
+The full-screen image tool is another way of enabling participants to
+see more detail in your provided images. This tool is useful for large
+images with lots of details. A re-sized version of the image displays in
+the page, but clicking on the image pops open a full-screen modal with
+the full-size version of the image.
+
+|image-lms-view-normal|
+
+
+Installation
+------------
+
+
+System Administrator
+~~~~~~~~~~~~~~~~~~~~
+
+To install the XBlock on your platform,
+add the following to your `requirements.txt` file:
+
+    xblock-image-modal
+
+You'll also need to add this to your `INSTALLED_APPS`:
+
+    imagemodal
+
+
+Course Staff
+~~~~~~~~~~~~
+
+To install the XBlock in your course,
+access your `Advanced Module List`:
+
+    Settings -> Advanced Settings -> Advanced Module List
+
+|image-cms-settings-menu|
+
+and add the following:
+
+    imagemodal
+
+|image-cms-advanced-module-list|
+
+
+Use
+---
+
+
+Course Staff
+~~~~~~~~~~~~
+
+To add a full-screen image to your course:
+
+- upload the image file onto your course's Files & Uploads page
+
+  - note: you can skip this step if you've already uploaded the image
+    elsewhere, e.g.: S3.
+
+- copy the URL on that page
+- go to a unit in Studio
+- select "Image Modal XBlock" from the Advanced Components menu
+
+|image-cms-add|
+
+You can now edit and preview the new component.
+
+|image-cms-view|
+
+Using the Studio editor, you can edit the following fields:
+
+- display name
+- image URL
+- thumbnail URL (defaults to image URL, if not specified)
+- description (useful for screen readers, longer descriptions)
+- alt text (useful for screen readers, captions, tags; displays when image does not)
+
+|image-cms-editor-1|
+|image-cms-editor-2|
+
+
+Participants
+~~~~~~~~~~~~
+
+|image-lms-view-normal|
+
+Click on the image to zoom in full-screen.
+
+|image-lms-view-zoom|
+
+Click on the image again to zoom out.
+
+Click and drag to pan around.
+
+`View a demo of the CMS`_
+
+`View a demo of the LMS`_
+
+
+.. |badge-ci| image:: https://github.com/openedx/xblock-image-modal/workflows/Python%20CI/badge.svg?branch=master
+   :target: https://github.com/openedx/xblock-image-modal/actions?query=workflow%3A%22Python+CI%22
+.. |image-cms-add| image:: https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/cms-add.jpg
+   :width: 100%
+.. |image-cms-advanced-module-list| image:: https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/advanced-module-list.png
+   :width: 100%
+.. |image-cms-editor-1| image:: https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/studio-editor-1.png
+   :width: 100%
+.. |image-cms-editor-2| image:: https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/studio-editor-2.png
+   :width: 100%
+.. |image-cms-settings-menu| image:: https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/settings-menu.png
+   :width: 100%
+.. |image-cms-view| image:: https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/studio-view.png
+   :width: 100%
+.. |image-lms-view-normal| image:: https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/lms-view-normal.png
+   :width: 100%
+.. |image-lms-view-zoom| image:: https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/lms-view-zoom.png
+   :width: 100%
+.. _View a demo of the CMS: https://youtu.be/IcbGYfbav2w
+.. _View a demo of the LMS: https://youtu.be/0mpjuThDoyE
+.. https://s3-us-west-1.amazonaws.com/stanford-openedx-docs/xblocks/image-modal/static/images/xblock-image-modal-demo-lms.mov

src/imagemodal/__init__.py

@@ -0,0 +1,5 @@
+"""
+A fullscreen, zooming image modal XBlock
+"""
+
+from .xblocks import ImageModal as ImageModal

src/imagemodal/conf/locale/config.yaml

@@ -0,0 +1,4 @@
+# Configuration for i18n workflow.
+
+locales:
+    - en  # English - Source Language

src/imagemodal/conf/locale/en/LC_MESSAGES/django.po

@@ -0,0 +1,62 @@
+# Stanford's Image Modal XBlock.
+# Copyright (C) 2019
+# This file is distributed under the same license as the package.
+# Steven Burch <stv@stanford.edu>, 2019.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: PACKAGE VERSION\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2019-03-09 18:45-0600\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: Steven Burch <stv@stanford.edu>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"Language: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: imagemodal/imagemodal.py:35
+msgid "Display Name"
+msgstr ""
+
+#: imagemodal/imagemodal.py:38
+msgid "This is the XBlock's display name"
+msgstr ""
+
+#: imagemodal/imagemodal.py:42
+msgid "Image URL"
+msgstr ""
+
+#: imagemodal/imagemodal.py:51
+msgid "This is the location of the full-screen image to be displayed."
+msgstr ""
+
+#: imagemodal/imagemodal.py:56
+msgid "Thumbnail URL"
+msgstr ""
+
+#: imagemodal/imagemodal.py:60
+msgid ""
+"This is the (optional) location of a thumbnail image to be displayed before "
+"the main image has been enlarged."
+msgstr ""
+
+#: imagemodal/imagemodal.py:66
+msgid "Description"
+msgstr ""
+
+#: imagemodal/imagemodal.py:69
+msgid "Description text, displayed to screen readers"
+msgstr ""
+
+#: imagemodal/imagemodal.py:74
+msgid "Alt Text"
+msgstr ""
+
+#: imagemodal/imagemodal.py:78
+msgid ""
+"This field allows you to add alternate or descriptive text that pertains to "
+"your image."
+msgstr ""

src/imagemodal/conf/locale/en/LC_MESSAGES/text.po

@@ -0,0 +1 @@
+django.po

src/imagemodal/mixins/__init__.py

@@ -0,0 +1,3 @@
+"""
+Mixin behavior to XBlocks
+"""

src/imagemodal/mixins/fragment.py

@@ -0,0 +1,89 @@
+"""
+Mixin fragment/html behavior into XBlocks
+
+Note: We should resume test coverage for all lines in this file once
+split into its own library.
+"""
+
+from django.template.context import Context
+from xblock.core import XBlock
+
+try:
+    from web_fragments.fragment import Fragment
+except Exception:
+    from xblock.fragment import Fragment  # For backward compatibility with quince and earlier.
+
+
+class XBlockFragmentBuilderMixin:
+    """
+    Create a default XBlock fragment builder
+    """
+
+    static_css = [
+        "view.css",
+    ]
+    static_js = [
+        "view.js",
+    ]
+    static_js_init = None
+    template = "view.html"
+
+    def provide_context(self, context):  # pragma: no cover
+        """
+        Build a context dictionary to render the student view
+
+        This should generally be overriden by child classes.
+        """
+        context = context or {}
+        context = dict(context)
+        return context
+
+    @XBlock.supports("multi_device")
+    def student_view(self, context=None):
+        """
+        Build the fragment for the default student view
+        """
+        template = self.template
+        context = self.provide_context(context)
+        static_css = self.static_css or []
+        static_js = self.static_js or []
+        js_init = self.static_js_init
+        fragment = self.build_fragment(
+            template=template,
+            context=context,
+            css=static_css,
+            js=static_js,
+            js_init=js_init,
+        )
+        return fragment
+
+    def build_fragment(self, *, template="", context=None, css=None, js=None, js_init=None):
+        """
+        Creates a fragment for display.
+        """
+        context = context or {}
+        css = css or []
+        js = js or []
+        rendered_template = ""
+        if template:  # pragma: no cover
+            template = "templates/" + template
+            rendered_template = self.loader.render_django_template(
+                template,
+                context=Context(context),
+                i18n_service=self.runtime.service(self, "i18n"),
+            )
+        fragment = Fragment(rendered_template)
+        for item in css:
+            if item.startswith("/"):
+                url = item
+            else:
+                item = "public/" + item
+                url = self.runtime.local_resource_url(self, item)
+            fragment.add_css_url(url)
+        for item in js:
+            item = "public/" + item
+            url = self.runtime.local_resource_url(self, item)
+            fragment.add_javascript_url(url)
+        if js_init:  # pragma: no cover
+            fragment.initialize_js(js_init)
+        return fragment

src/imagemodal/mixins/scenario.py

@@ -0,0 +1,24 @@
+"""
+Mixin workbench behavior into XBlocks
+"""
+
+try:
+    from xblock.utils.resources import ResourceLoader
+except ModuleNotFoundError:
+    from xblockutils.resources import ResourceLoader
+
+
+loader = ResourceLoader(__name__)
+
+
+class XBlockWorkbenchMixin:
+    """
+    Provide a default test workbench for the XBlock
+    """
+
+    @classmethod
+    def workbench_scenarios(cls):
+        """
+        Gather scenarios to be displayed in the workbench
+        """
+        return loader.load_scenarios_from_path("../scenarios")