Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-54757

Atto: Remove atto-image-helper-* class(es) when necessary.

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Login as an admin.
      2. In the navigation, expand "Site page".
      3. Under "Site page", click "Site blogs".
      4. Click "Add a new entry".
      5. In the atto editor, add an image.
      6. Open inspector.
      7. Manually add class "atto-image-helper-test" to image.
      8. Save.
      9. Open inspector for the image, and it should have no "atto-image-helper-test" class.
      Show
      Login as an admin. In the navigation, expand "Site page". Under "Site page", click "Site blogs". Click "Add a new entry". In the atto editor, add an image. Open inspector. Manually add class "atto-image-helper-test" to image. Save. Open inspector for the image, and it should have no "atto-image-helper-test" class.
    • Affected Branches:
      MOODLE_27_STABLE
    • Epic Link:
    • Pull from Repository:
    • Pull Master Branch:
      wip-MDL-54757
    • Pull Master Diff URL:

      Description

      One of the use of MDL-54710 is to hide the original while resizing or add a border styling while resizing. These are accomplish by attaching classes to images (or other html elements) that is under a css rule. For instance:

      demo.css

      		 
      atto-helper-border {
      		 
        border: 1px solid black;
      		 
      }

      demo.html

      		 
      <div class="atto-helper-border">
      		 
        <!-- some contents. -->
      		 
      </div>

      The problem arises when save/autosave kicks in, saving unwanted styling. For instance, the border that is only intended as a helper will be saved.

      To solve this, I will need to point you to the atto's clean.js (found in atto javascript source files). It contains getCleanHTML which is called before save/autosave. So what needs to be done is remove all classes that starts with "atto-helper" so that styles attached to "atto-helper-*" classes are not saved. This is a perfect solution since it goes with the name of the function getCleanHTML, that is, the intended html.

        Attachments

          Issue Links

          blocks

          Task - A task that needs to be completed. Tasks usually refer to work that must be done outside the product. MDL-54710 Atto: Allow users to resize images in atto

          • Minor - Minor loss of function where workaround is possible
          • Closed
          is blocked by

          Task - A task that needs to be completed. Tasks usually refer to work that must be done outside the product. MDL-54848 Atto: Add hook to allow atto plugins to clean up after themselves.

          • Minor - Minor loss of function where workaround is possible
          • Closed

            Activity

              People

              • Assignee:
                joeyandres Joey Andres
                Reporter:
                joeyandres Joey Andres
                Peer reviewer:
                Mark Nelson
                Participants:
                Component watchers:
                Andrew Nicols, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze
              • Votes:
                0 Vote for this issue
                Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: