From 9112de2309a6c431dabb643a0ad1f2938490ad5a Mon Sep 17 00:00:00 2001 From: stv Date: Wed, 20 Jul 2016 12:48:52 -0700 Subject: [PATCH] Deprecate ImageModal HtmlModule Stop displaying the template in CMS. This has no effect on already-existing components; it merely prevents new components from being created with this template. All functionality has been replaced by the XBlock version [1][2]. Backstory: This was written by Stanford, circa 2013; it was always a bit of a hack. While it masquerades as if it were an XBlock/XModule, it's really a YAML template for the HTML module. It depends on JS/CSS that is embedded as a first-class citizen of the platform. This has all caused confusion. Worse, it's a pain to edit/configure/update, since it uses none of the XBlock infrastructure. Nearly two years ago, we XBlock-ified the component and have been running it ever since [1][2]. As such, we no longer support this "component" and would suggest edX follow suite. Consider this a request-for-comments on the path forward. Process: Deprecation of this module would follow a few steps: 1. Prevent new components from being added in Studio with this template. - This PR represents step 1. - This is backward compatible; it will have no effect on existing components. 2. (optional) Install the XBlock version. - This allows new ImageModal components to be added, now via the XBlock. 3. (optional) Identify and convert existing HTML modules to XBlocks [3]. - We have enough of the legacy components in use that we can't just break support by removing this feature; we need a conversion process. - Because these are really just HTML modules with special contents, we have to query based on file contents (see, I told you this thing was hacky!): - All such components must contain an HTML anchor tag with the class `modal-content`. - Beyond the query, we don't intend to automate the actual conversion. Our use of the original component is limited enough that it's probably not worth converting from one module type to the other. Exacerbating the situation, because it's HTML, other changes could have been made to the module that would prevent automatic parity. As such, we'll work with our CoureOperations team to convert these manually at Stanford. 4. Remove all references. - At this point, we can safely remove all supporting static assets like CSS, JS, etc. 5. Enjoy less technical debt. [1] https://github.com/Stanford-Online/xblock-image-modal [2] https://pypi.python.org/pypi/xblock-image-modal/ [3] The one saving grace of the legacy component is that it was designed to degrade gracefully. Specifically, the HTML itself is just an image inside a link. The extra platform JavaScript progressively enhances the display, if the relevant CSS classes are found. As such, even if you removed all supporting CSS/JS from the platform tomorrow, existing legacy components would simply render as an image that links to a larger copy of itself. This is deemed an acceptable failure mode; graceful degradation FTW! --- .../xmodule/templates/html/image_modal.yaml | 24 ------------------- 1 file changed, 24 deletions(-) delete mode 100644 common/lib/xmodule/xmodule/templates/html/image_modal.yaml diff --git a/common/lib/xmodule/xmodule/templates/html/image_modal.yaml b/common/lib/xmodule/xmodule/templates/html/image_modal.yaml deleted file mode 100644 index 9ed87e9b68..0000000000 --- a/common/lib/xmodule/xmodule/templates/html/image_modal.yaml +++ /dev/null @@ -1,24 +0,0 @@ ---- -metadata: - display_name: Full Screen Image Tool -data: | -

Full Screen Image Tool

-

Use the Full Screen Image tool to allow learners to open and zoom in on a larger version of an image in your course.

-

With the Full Screen Image tool, learners can see the image's details as well as its context within the unit.

-

To enable users to view the larger image, you wrap the smaller image in a link to the larger version of the image.

-

The following HTML code shows the format required to use the Full Screen Image tool. For the example in this template, you must replace the values in italics.

- 
-        <a href="Path to full screen image" class="modal-content">
-          <img alt="Text for screen readers"
-          src="Path to image to include in unit page"/>
-        </a>
-
-

You can modify the example below for your own use.

-
    -
  1. Replace the value of the link's href attribute with the path to the full size image. Do not change the value of the class attribute.
    2. -
  2. Replace the value of the image's src attribute with the path to the image that will appear in the unit before a learner opens it in full screen mode.
    3. -
  3. Replace the value of the image's alt attribute with text that both describes the image and the action or destination of clicking on the image. You must include alt text to provide an accessible label.
    4. -
-

Note: Test viewing the image in full screen mode in the LMS; you cannot view it in full screen from within Studio.

- - An image of the Stanford Hills. Select the image to open it in full screen mode.