Wikidata/Notes/JavaScript ui implementation/old ui

As the Old ui we refer to the project's initial repository sided implementation of the user interface for editing an Entity's label, description, aliases and site-links as well as the terms table for editing label and description in different languages. Everything within wikibase.ui has been created as part of the old ui. Some parts have been re-factored out by now, e.g. toolbar related code.

All remaining parts of the old ui are to be refactored to follow the current approach (see bug 56241[1] (links from mw m w)).

Implementation around "Editable Values"

The following figures show the label of an item. It can be edited by clicking edit, after that it will expand (second figure).

[Fig. 1] Item label (not in edit mode)

[Fig. 2] Item label in edit mode

The following figure shows a more complex example of the implementation, the list of site-links which contains of a list of values. Values can be added and removed, not just edited

[Fig. 3] List of site-links (not in edit mode)

The following list relates to the pictures and explains which JavaScript prototypes are responsible for which parts of the user interface. For a more detailed figure of the prototypes and their relations, take a look at the diagram.

(1) wikibase.ui.PropertyEditTool: A container managing several values. When the page is loaded and one of these is initialized for a DOM element, all existing values within will be initialzed and a Toolbar (4) will be served. This will also serve the functionality to add new values with its own Toolbar (5). In certain cases it is not required (at the moment) to manage several values or to add and remove values. This is the case for an items label and description.

(2) wikibase.ui.PropertyEditTool.EditableValue: Is representing a values representation in the DOM as well as the input interface for the value when in edit mode. One editable value can contain several Interfaces (3) depending on the values structure and requirement. Serves functionality to start and stop editing the value and will trigger its interfaces to transform from the static DOM into an editable form. It also holds necessary information to make an API call to change the represented value there.

(3) wikibase.ui.PropertyEditTool.EditableValue.Interface: Used by an EditableValue (2), representing one part of the value within the DOM and serves the input form to edit the value. Usually different variations of this are just used as wrappers, holding a jQuery widget (e.g. a data picker or a map). This is necessary to have a very basic common (programming-) interface for different widgets as well as managing the widgets static DOM representation.

(4) wikibase.ui.Toolbar: Serves a toolbar which can hold several buttons, labels etc. to control the edit process and to remove the whole value in case the functionality is available for the related PropertyEditTool (1)

(5) wikibase.ui.Toolbar: Serves a toolbar which can hold several buttons, labels etc. to control the process of adding whole new values in case the functionality is available for the related PropertyEditTool (1)

History

The implementation started during April 2012 as initial front-end component of the wikibase repository extension. A few milestones along the way:

April 2012: Support for labels got implemented
April 2012: Support for descriptions got implemented
Mai 2012: Initial implementation of site-links
June 2012: Initial implementation of aliases
August 2012: Started implementation on new "Grid Layout"
November 2012: Start of new ui implementation as jQuery.wikibase. Plan to abandon and port old ui over time.
February 2013: "Terms table" with edit features for label and description in other languages
July 2013: wikibase.ui.Toolbar and related components got refactored as jQuery.wikibase.toolbar