Introduction

    The updated link dialogs were introduced in the Itasca release and have been critical tools for linking together content. However, they were developed for targeted use cases: creating links, inserting images, and moving pages/files. MindTouch's landscape has evolved into a platform for developers to build rich applications upon.  By revisiting the dialogs and generalizing their use cases, we can provide reuseable tools for developers that are building on the platform.

    Need to find a page, launch the browser. Need to find an image, launch the browser with image filtering enabled.

    Intended Audience

    Improving the dialog experience will benefit the end users by handling edge cases better and developers by providing an intuitive UI for finding pages and content.

    Status

    Initial scoping by the UI team (Karen, Kalid, Guerric)

    Functional Specification

    Users interact with the dialogs in the editor: insert link, insert image.

    Users interact with the dialogs via move operations: move/rename page, move file

    Use Cases

    Common scenarios in all cases

    • Autocomplete search
    • Display resource results (page, image, user)
    • Optional meta-area for a result (a preview, attribute editor, etc.)
    • Know current location in hierarchy (if exposed)
    • Change current location in hierarchy

    Inserting Links

    • User inserts a link to an internal page or file
    • User edits a link to an internal page or file
    • User edits a link to a page or file that no longer exists
    • User inserts a link to an external url
    • User edits a link to an external url
    • User wants to customize the link attributes
      • Title, id, class, href (advanced editing)
     

    Inserting Media (Images, Video)

    • Ability to select size, etc.
     

    Moving page & files

    Page viewing experience

     

    Link dialog

    User opens dialog with or without selected text. In case when user selected text and opened link dialog this text should be appear in "Link to" input box, browser should display all pages and files which match of selected text.

    Users shouls be able to create internal links to pages and files, links to anchor of the page, external links and e-mail links.

    "Link to" input box should support autocomplete feature. In case of internal links autocomplete should suggest internal pages and files. In case of links to anchor autocomplete should suggest anchors of current page or of page with path before # sign. In case of external links with http/https protocol autocomplete should use google custom search api to suggest URLs.

    Link dialog should allow users to browse site structure - pages and files.

    Link dialog should allow users to set advanced parameters of the link - id, stylesheet classes, title, target etc.

    When user clicks "Create link" button:

    • if user selected text before opening link dialog editor should create link with this text
    • if user didn't select text editor should create link with the following text:
      • page title for internal pages
      • file name for internal files
      • section title for page section
      • URL for external links
      • e-mail for maillto links

    If user edits the current link, the "Link to" input box should contain link href on dialog initialization. If link text was generated automatically by link dialog (page title, external url etc.) it should be replaced according to the new link location (old page title should be replaced with new page title, old URL should be replaced with new URL) on updating link.

    Link dialog should allow to attach files to the current page without closing the dialog. After attaching files, path to the first of attached files should be appear into "Link to" input box.

    Browser

    Browser should display all subpages, attached files and sections of selected page. It also should allow to select predefined and defined by users paths.

    Browser should has search field to search pages and files. Search engine should support search criteria to search by page titles and file names with filters, by tags, user names and modification dates.

    Browser should be configurable to display files with specified filter (for example, only images).

    Browser should allow to preview images.

    Creating new content
    Updating existing content

     

    Developer integrations

     

    Non-goals

    Technical Specification

    Current dialogs params

    Link dialog

    Input

    • f_href - current link href or empty string
    • f_text - current link text or selected text if link does not exist
    • contextTopic - page title
    • contextTopicID - page id
    • userName - user name
    • newlink - (bool) true if link does not exist
      • via GET
        • href - @see f_href
        • contextID - page id
        • cntxt - page title
        • userName - user name

    Output

    • f_text - new link text
    • f_href - new link href

    Image Dialog

    Input

    • bInternal - true if current image has class "internal"
    • sSrc - current image source
    • sAlt - current image alt attribute
    • sWrap - current image wrap ("right", "left" or "default")
    • nWidth - (int) current image width
    • nHeight - (int) current image height
    • nPageId - page id
    • sUserName - user name
      • via GET
        • contextID - page id
        • update - (bool) true if user edits an existing image

    Output

    • sSrc - image source
    • nWidth - image width
    • nHeight - image height
    • sAlt - image alt
    • bInternal - true if image is internal
    • sWrapClass - class name
    • sWrap - image align
    • sFullSrc - path to image full size, if exists image will be linked to this path

    Move File

    Input

    • via GET
      • titleID - page id
      • attachID - attach id

    Output

    • pageId - (unused) page id

    Move Page

    Input

    • via GET
      • titleID - page id

    Output

    (none)

    UI requirements

    API requirements

     

    Next Steps

    Goal: Prototype primary use case to test: link dialog


    Goal: Componentize the browsing widget for other uses

    • Use case: insert image
      • What can be reused? The file/folder navigation? Sidebar?
    Tag page

    Files 2

    FileVersionSizeModified 
    You must login to post a comment.

    Copyright © 2011 MindTouch, Inc. Powered by