Support:Sumodev/Gallery Rewrite

From MozillaWiki
Jump to: navigation, search
Draft-template-image.png THIS PAGE IS A WORKING DRAFT Pencil-emoji U270F-gray.png
The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly.
If you have any questions or ideas, please add them as a new topic on the discussion page.

Goals

  • Minimize confusion with uploaded drafts, simple enough, summarized:
  • Simplify DOM and JS, not as simple, but results:
  • Showcase HTML5 with the File API to indicate upload progress
  • Validate file extension client-side
  • Upload multiple images at once. (probably far future)

Related bugs

Bugs with [gallery] in the whiteboard.

Roadmap

  • Phase 1 estimate: ~15h
  • Phase 2 estimate: ~20h, fairly WAG, needs research

Phase 1

Focus: Improve UX

  • Minimize confusion with uploaded drafts, simple enough, summarized:
    • Add is_draft column and use that to save/publish
    • E.g. drafts cannot be inserted (you get warning: this is a draft).
    • Make sure replag can't cause weird issues with drafts being published/deleted.
  • Simplify DOM and JS, not as simple, but results:
    • This will fix a lot of localization bugs...
    • And a lot of weirdness with user interactions...
    • And make the code easier to maintain and understand.


Phase 2

Focus: Polish

After everything actually works and the code is cleaner, we can go beyond the basics and:

  • Use the File API to indicate progress (IE support not a must for gallery)
  • Consider minor/medium design changes for upload form, e.g. upload multiple images at once.
  • Validate file extension client side.
  • Allow for multiple images? (estimate: 10h, not included in roadmap)

Jotted ideas

Some further thoughts on either the above or other improvements...

  • Use 2 separate forms entirely:
    • upload video
    • upload image
    • + 3rd form for selecting which type, which is not really a form
  • Use class="open" (instead of "draft") to have the modal open straight away
  • Workflow:
    1. User selects type; image or video
    2. Specific form is shown.
    3. User uploads file.
      • progress bar indication
      • disable submit button
      • cancel upload option, which disables submit button
      • ensure full-cancel button stops uploads too - a $modal.close() that knows what to do
        • re-enable submit-file when upload completes - $modal.is_valid()?
    4. User fills in details (metadata), hits submit.
      • cannot hit submit while upload in progress
      • can hit cancel while upload in progress
  • User actions:
    • Select file (auto uploads, validates)
      • Check if extension can be validated client-side
    • Cancel upload while in progress
    • Enter title, description
    • Submit (Submit image, Submit video)
    • Close modal - X and Cancel
  • Thoughts on workflow:
    • modal setup() creates <iframes> if needed, else uses the FileAPI stuff
    • also defines the cancel upload callback
    • JS side form validation to enable submit button
    • if uploads are in progress, disable
    • if title/description are too short, disable
  • Make modal contained so it can be included in e.g. wiki
    • E.g. you can pass it image_form or video_form and it shows one or the other