PHPackages data-values/value-view - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. data-values/value-view ActiveMediawiki-extension[Utility & Helpers](/categories/utility) data-values/value-view ====================== Provides JS widgets to edit values defined by the DataValues library 0.21.0(8y ago)977.0k8[3 PRs](https://github.com/wikimedia/data-values-value-view/pulls)GPL-2.0+JavaScriptPHP >=5.5.9 Since Dec 23Pushed 2w ago19 watchersCompare [ Source](https://github.com/wikimedia/data-values-value-view)[ Packagist](https://packagist.org/packages/data-values/value-view)[ Docs](https://www.mediawiki.org/wiki/Extension:ValueView)[ RSS](/packages/data-values-value-view/feed)WikiDiscussions master Synced 2d ago READMEChangelog (10)Dependencies (3)Versions (67)Used By (0) ValueView ========= [](#valueview) ValueView introduces the `jQuery.valueview` widget which may be used to display and edit data values (`DataValue` objects defined in the [DataValues](https://github.com/DataValues/DataValues) library and supported via the [DataValues JavaScript](https://github.com/wmde/DataValuesJavascript) package). The `jQuery.valueview` widget and its resources may be extended to support custom `DataValue`implementations. Recent changes can be found in the [release notes](RELEASE-NOTES.md). Components ---------- [](#components) ### jQuery.valueview [](#jqueryvalueview) `jQuery.valueview` may be used to display and edit data values. While the widget's original constructor is located at `jQuery.valueview.valueview`, the widget should be instantiated via its bridge `jQuery.valueview`. ### jQuery.valueview.Expert [](#jqueryvalueviewexpert) `jQuery.valueview.Expert`s are widgets that deal with editing `DataValue`s. An `Expert` provides the functionality to edit a specific `DataValue` (e.g. `StringValue`) or a `DataValue` suitable for a certain `DataType` (e.g. the `url` `DataType` which uses the `StringValue` for representation; see also [DataTypes](https://github.com/wmde/DataTypes) library). `jQuery.valueview.Expert` is the base constructor for such `Expert`s. ### jQuery.valueview.ExpertExtender [](#jqueryvalueviewexpertextender) `jQuery.valueview.ExpertExtender` may be used to provide additional information and/or input elements while interacting with the `Expert`. The `ExpertExtender` may, for example, be used to provide a preview of how the parsed value will be displayed after saving (see `jQuery.ExpertExtender.Preview`). Options provided by the `ValueParser` corresponding to the `DataValue` being edited may be set using `jQuery.valueview.ExpertExtender.*` input elements added to the `ExpertExtender` instance. ### jQuery.valueview.ExpertStore [](#jqueryvalueviewexpertstore) `Expert`s are managed by `jQuery.valueview.ExpertStore` instance which provides its `Expert`s to `jQuery.valueview`. ### ViewState [](#viewstate) `ViewState` acts as a *Facade* linking `Expert`s and `jQuery.valueview`. `ViewState` allows `Expert`s to observe certain aspects of `jQuery.valueview` and enables `Expert`s to update the linked `jQuery.valueview` instance. Usage ----- [](#usage) For the usage examples, it is assumed the following packages are installed: - [DataValues](https://github.com/DataValues/DataValues) - [DataValues JavaScript](https://github.com/wmde/DataValuesJavascript) - [DataTypes](https://github.com/wmde/DataTypes) When using `jQuery.valueview` for handling a `DataValue`, a `jQuery.valueview.ExpertStore` with knowledge about an `Expert` dedicated to the `DataValue`'s type is required and can be set up as follows: ``` var dv = dataValues, vv = jQuery.valueview, dt = dataTypes, experts = new vv.ExpertStore(); var stringValue = new dv.StringValue( 'foo' ); // Consider this a DataType using the StringValue DataValue internally: var urlDataType = new dt.DataType( 'url', dv.StringValue.TYPE ); experts.registerDataValueExpert( vv.experts.StringValue, dv.StringValue.TYPE ); console.log( experts.getExpert( stringValue.getType() ) === experts.getExpert( urlDataType.getDataValueType(), urlDataType.getId() ) ); // true because "url" DataType's DataValue type is "string"; The "string" DataValue's Expert will be // used as fall-back. ``` Now, the `jQuery.valueview.ExpertStore` can be injected into a new `jQuery.valueview` instance enabling it to edit "string" `DataValue`s. ``` var $subject = $( '' ).appendTo( $( 'body' ).empty() ); // In addition to the Expert store, a ValueParser store and two ValueFormatters need to be provided. The parser store // features the same mechanisms as the Expert store. For this example, we just initialize the parser store with // the "string" parser as default. The formatters will format a string as it is. var parsers = new valueParsers.ValueParserStore( valueParsers.StringParser ); $subject.valueview( { expertStore: experts, parserStore: parsers, plaintextFormatter: new valueFormatters.StringFormatter(), htmlFormatter: new valueFormatters.StringFormatter(), language: 'en', // language code transmitted to Parser value: new dv.StringValue( 'text' ) } ); var valueView = $subject.data( 'valueview' ); ``` Having created a `jQuery.valueview` displaying *text*, the widget's member functions may be used for interaction, for example: - Emptying the view: `valueView.value( null );` - Allowing the user to edit the value: `valueView.startEditing();` - Stopping the user from editing the value: `valueView.stopEditing();` - Returning the current value: `valueView.value();` Setting a `jQuery.valueview` instance's value to a `DataValue` it cannot handle because no suitable `Expert` can be determined from the `ExpertStore` will result in an error notification being displayed. Calling `.value()` will still return the value but the user can neither see nor edit the value. Architecture ------------ [](#architecture) `jQuery.valueview` heavily depends on `ValueFormatter`s and `ValueParser`s defined via the [DataValues JavaScript](https://github.com/wmde/DataValuesJavascript) library. `ValueFormatter`s are used to convert `DataValue` instances to DOM elements, and `ValueParser`s are used to convert plain strings (which may be accompanied by some options) to `DataValue` instances. Since `Expert`s only are used for editing values, they are constructed when starting edit mode and destroyed after leaving edit mode. `Expert`s have the following lifecycle: - `_init()`: Load parsed, formatted and raw (text) values from the `jQuery.valueview` instance linked via `ViewState` and initialize DOM. - Edit loop - (User edits) - `Expert` calls `viewNotifier.notify( 'change' )` and triggers parsing and formatting. - `rawValue()`: Return the current raw (text) value. - (optional) `preview.showSpinner()`: Replace preview with a loading spinner. - `draw()`: (Re-)draw non-editable parts of the `Expert` using the (new) parsed and formatted value from the `jQuery.valueview` instance (via `ViewState`) - `destroy()`: Destroy DOM. Other methods an `Expert` needs to provide: - `valueCharacteristics()` - `focus()` - `blur()` Bugs on Phabricator =================== [](#bugs-on-phabricator) ### Health Score 50 — FairBetter than 95% of packages Maintenance63 Regular maintenance activity Popularity35 Limited adoption so far Community31 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor3 3 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~21 days Recently: every ~63 days Total 67 Last Release 3185d ago PHP version history (2 changes)0.1PHP >=5.3.0 0.21.0PHP >=5.5.9 ### Community Maintainers ![](https://www.gravatar.com/avatar/451bd4039d530fed8f9c3da91bfa519233a397d2182cdfdcad700f6cfea19b7f?d=identicon)[Jeroen De Dauw](/maintainers/Jeroen%20De%20Dauw) ![](https://www.gravatar.com/avatar/054adb441e7ee248ec924bc45fa793835c284710eb31627587fa5de21bab9e96?d=identicon)[wmde](/maintainers/wmde) ![](https://www.gravatar.com/avatar/5406ed1d40d50ffc61d67e9f5149914dbfe0b8a52bdf297299f5ccfab0a73d91?d=identicon)[thiemowmde](/maintainers/thiemowmde) ![](https://www.gravatar.com/avatar/fe4220e5a109212ea1a84969fbcb0795ceaf975145c1f0577bd758d0500e6428?d=identicon)[manicki](/maintainers/manicki) ![](https://avatars.githubusercontent.com/u/5956296?v=4)[DataValues](/maintainers/DataValues)[@DataValues](https://github.com/DataValues) --- Top Contributors [![translatewiki](https://avatars.githubusercontent.com/u/24829418?v=4)](https://github.com/translatewiki "translatewiki (305 commits)")[![thiemowmde](https://avatars.githubusercontent.com/u/6576639?v=4)](https://github.com/thiemowmde "thiemowmde (189 commits)")[![snaterlicious](https://avatars.githubusercontent.com/u/5755120?v=4)](https://github.com/snaterlicious "snaterlicious (122 commits)")[![tobijat](https://avatars.githubusercontent.com/u/2997252?v=4)](https://github.com/tobijat "tobijat (91 commits)")[![adrianheine](https://avatars.githubusercontent.com/u/139208?v=4)](https://github.com/adrianheine "adrianheine (83 commits)")[![DanweDE](https://avatars.githubusercontent.com/u/101926?v=4)](https://github.com/DanweDE "DanweDE (47 commits)")[![mariushoch](https://avatars.githubusercontent.com/u/2446964?v=4)](https://github.com/mariushoch "mariushoch (36 commits)")[![JeroenDeDauw](https://avatars.githubusercontent.com/u/146040?v=4)](https://github.com/JeroenDeDauw "JeroenDeDauw (28 commits)")[![manicki](https://avatars.githubusercontent.com/u/3524114?v=4)](https://github.com/manicki "manicki (21 commits)")[![JonasKress](https://avatars.githubusercontent.com/u/13198391?v=4)](https://github.com/JonasKress "JonasKress (21 commits)")[![addshore](https://avatars.githubusercontent.com/u/3308769?v=4)](https://github.com/addshore "addshore (18 commits)")[![jakobw](https://avatars.githubusercontent.com/u/453024?v=4)](https://github.com/jakobw "jakobw (14 commits)")[![Ladsgroup](https://avatars.githubusercontent.com/u/5351225?v=4)](https://github.com/Ladsgroup "Ladsgroup (13 commits)")[![lucaswerkmeister](https://avatars.githubusercontent.com/u/2346599?v=4)](https://github.com/lucaswerkmeister "lucaswerkmeister (13 commits)")[![JanZerebecki](https://avatars.githubusercontent.com/u/7452727?v=4)](https://github.com/JanZerebecki "JanZerebecki (7 commits)")[![filbertkm](https://avatars.githubusercontent.com/u/135401?v=4)](https://github.com/filbertkm "filbertkm (5 commits)")[![rosalieper](https://avatars.githubusercontent.com/u/15235452?v=4)](https://github.com/rosalieper "rosalieper (5 commits)")[![bekh6ex](https://avatars.githubusercontent.com/u/4264331?v=4)](https://github.com/bekh6ex "bekh6ex (4 commits)")[![Benestar](https://avatars.githubusercontent.com/u/2998254?v=4)](https://github.com/Benestar "Benestar (4 commits)")[![jdforrester](https://avatars.githubusercontent.com/u/881572?v=4)](https://github.com/jdforrester "jdforrester (4 commits)") --- Tags javascriptwidget ### Embed Badge ![Health badge](/badges/data-values-value-view/health.svg) ``` [![Health](https://phpackages.com/badges/data-values-value-view/health.svg)](https://phpackages.com/packages/data-values-value-view) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)