Jakob has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/362180 )
Change subject: [WIP] Multi-variant form representations.
......................................................................
[WIP] Multi-variant form representations.
Integrates the RepresentationsWidget, which is mostly copied from the
LemmaWidget into the formview.
TODO:
* tests
* clean up code in places referring to Lemma where it should be
Representation
Bug: T165575
Change-Id: I5dda249fb2121db3b29804e202b9f90d3755a968
---
M extension.json
M resources/datamodel/LexemeForm.js
M resources/jquery.wikibase.lexemeformview.js
M resources/templates.php
A resources/widgets/RepresentationWidget.js
M src/View/LexemeView.php
6 files changed, 143 insertions(+), 31 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/WikibaseLexeme
refs/changes/80/362180/1
diff --git a/extension.json b/extension.json
index 543b87b..2b6df61 100644
--- a/extension.json
+++ b/extension.json
@@ -78,7 +78,10 @@
"dependencies": [
"jquery.ui.EditableTemplatedWidget",
"wikibase.templates.lexeme",
- "jquery.wikibase.grammaticalfeatureview"
+ "jquery.wikibase.grammaticalfeatureview",
+ "vue",
+ "vuex",
+ "wikibase.lexeme.widgets.RepresentationWidget"
],
"messages": [
"wikibase-lexeme-empty-form-representation",
@@ -144,6 +147,9 @@
"wikibase-remove"
]
},
+ "wikibase.lexeme.widgets.RepresentationWidget": {
+ "scripts": "widgets/RepresentationWidget.js"
+ },
"wikibase.lexeme.widgets.GlossWidget": {
"scripts": "widgets/GlossWidget.js",
"dependencies": [
diff --git a/resources/datamodel/LexemeForm.js
b/resources/datamodel/LexemeForm.js
index 46205f8..931bd17 100644
--- a/resources/datamodel/LexemeForm.js
+++ b/resources/datamodel/LexemeForm.js
@@ -9,10 +9,10 @@
*/
var LexemeForm = util.inherit(
'LexemeForm',
- function ( id, representation, grammaticalFeatures,
statementGroupSet ) {
+ function ( id, representations, grammaticalFeatures,
statementGroupSet ) {
statementGroupSet = statementGroupSet || new
wb.datamodel.StatementGroupSet();
this._id = id;
- this._representation = representation;
+ this._representations = representations;
this._grammaticalFeatures = grammaticalFeatures || [];
if (
@@ -31,9 +31,9 @@
_id: null,
/**
- * @type {string}
+ * @type {Object}
*/
- _representation: null,
+ _representations: null,
/**
* @return {string[]}
@@ -57,7 +57,7 @@
* @return {string}
*/
getRepresentation: function () {
- return this._representation;
+ return this._representations;
},
/**
diff --git a/resources/jquery.wikibase.lexemeformview.js
b/resources/jquery.wikibase.lexemeformview.js
index c713f49..b5f50da 100644
--- a/resources/jquery.wikibase.lexemeformview.js
+++ b/resources/jquery.wikibase.lexemeformview.js
@@ -3,6 +3,8 @@
var PARENT = $.ui.EditableTemplatedWidget;
+ var newRepresentationWidget = require(
'wikibase.lexeme.widgets.RepresentationWidget' );
+
/**
* Initializes StatementGroupListView on given DOM element
* @callback buildStatementGroupListView
@@ -63,7 +65,8 @@
templateShortCuts: {
$text: '.wikibase-lexeme-form-text',
$id: '.wikibase-lexeme-form-id',
- $grammaticalFeatures:
'.wikibase-lexeme-form-grammatical-features'
+ $grammaticalFeatures:
'.wikibase-lexeme-form-grammatical-features',
+ $representations: '.form-representations'
},
inputNodeName: 'TEXTAREA',
api: null,
@@ -76,6 +79,8 @@
_inEditMode: false,
_grammaticalFeatureView: null,
+
+ _representationsWidget: null,
/**
* This method acts as a setter if it is given a LexemeForm
object.
@@ -105,7 +110,7 @@
return new wikibase.lexeme.datamodel.LexemeForm(
this.options.value ? this.options.value.getId()
: null,
- $.trim( this.$text.children( this.inputNodeName
).val() ),
+ arrayToObject(
this._representationsWidget.representations ),
this._grammaticalFeatureView ?
this._grammaticalFeatureView.value() : []
);
},
@@ -118,6 +123,7 @@
this.value(),
$( '.wikibase-statementgrouplistview',
this.element )
);
+ this._buildRepresentations();
},
_buildGrammaticalFeatureView: function
buildGrammaticalFeatureView() {
@@ -143,6 +149,7 @@
_startEditing: function () {
this._inEditMode = true;
this._grammaticalFeatureView.startEditing();// FIXME
this line breaks edit mode when adding lexeme form
+ this._representationsWidget.edit();
return this.draw();
},
@@ -152,12 +159,26 @@
this.$text.children( this.inputNodeName ).val(
'' );
}
this._grammaticalFeatureView.stopEditing( dropValue );
+ this._representationsWidget.stopEditing();
return this.draw();
},
isInEditMode: function () {
return this._inEditMode;
+ },
+
+ _buildRepresentations: function () {
+ var self = this;
+
+ this._representationsWidget = new Vue(
newRepresentationWidget(
+ [ { value: 'foo', language: 'en' } ],
+ this.$representations[0],
+ '#representation-widget-vue-template',
+ function () {
+ self._trigger( 'change' );
+ }
+ ) );
},
/**
@@ -181,30 +202,17 @@
return deferred.resolve().promise();
}
- if ( !this.isInEditMode() ) {
- this.$text.text( value.getRepresentation() );
- this.$id.text( ' (' + value.getId() + ')' ); //
TODO: whitespace and brackets (?) should be i18nable
-
- return deferred.resolve().promise();
- }
-
- var $input = $( document.createElement(
this.options.inputNodeName ) )
- .attr( 'placeholder', mw.msg(
'wikibase-lexeme-enter-form-representation' ) )
- .on( 'change', function () { this._trigger(
'change' ); }.bind( this ) );
-
- if ( value ) {
- $input.val( value.getRepresentation() );
- }
-
- if ( $.fn.inputautoexpand ) {
- $input.inputautoexpand( {
- suppressNewLine: true
- } );
- }
-
- this.$text.empty().append( $input );
-
return deferred.resolve().promise();
}
} );
+
+ function arrayToObject( representations ) {
+ var result = {};
+
+ representations.forEach( function ( representation ) {
+ result[ representation.language ] =
representation.value;
+ } );
+
+ return result;
+ }
}( jQuery, mediaWiki ) );
diff --git a/resources/templates.php b/resources/templates.php
index 885d64d..a51eea2 100644
--- a/resources/templates.php
+++ b/resources/templates.php
@@ -16,6 +16,7 @@
$templates['wikibase-lexeme-form'] = <<<'HTML'
<div class="wikibase-lexeme-form">
+ <div class="form-representations"></div>
<h3 class="wikibase-lexeme-form-representation" lang="$1">
<span class="wikibase-lexeme-form-text">$2</span>
<span class="wikibase-lexeme-form-id wikibase-title-id">
$3</span>
diff --git a/resources/widgets/RepresentationWidget.js
b/resources/widgets/RepresentationWidget.js
new file mode 100644
index 0000000..c04c242
--- /dev/null
+++ b/resources/widgets/RepresentationWidget.js
@@ -0,0 +1,55 @@
+module.exports = ( function ( mw ) {
+ 'use strict';
+
+ var Lemma = require( 'wikibase.lexeme.datamodel.Lemma' );
+
+ function copyLemmaList( list ) {
+ return JSON.parse( JSON.stringify( list ) );
+ }
+
+ /**
+ * @callback wikibase.lexeme.widgets.LemmaWidget.newComponent
+ *
+ * @param {Vuex.Store} store
+ * @param {string} element
+ * @param {string} template - template string or selector
+ */
+ return function ( representations, element, template, beforeUpdate ) {
+ return {
+ el: element,
+ template: template,
+
+ beforeUpdate: beforeUpdate,
+
+ data: {
+ inEditMode: false,
+ representations: copyLemmaList( representations
)
+ },
+ computed: {
+ isSaving: function () {
+ return false;
+ }
+ },
+ methods: {
+ edit: function () {
+ this.inEditMode = true;
+ },
+ stopEditing: function() {
+ this.inEditMode = false;
+ },
+ add: function () {
+ this.representations.push( new Lemma(
'', '' ) );
+ },
+ remove: function ( lemma ) {
+ var index =
this.representations.indexOf( lemma );
+ this.representations.splice( index, 1 );
+ }
+ },
+ filters: {
+ message: function ( key ) {
+ return mw.messages.get( key );
+ }
+ }
+ };
+ };
+} )( mediaWiki );
diff --git a/src/View/LexemeView.php b/src/View/LexemeView.php
index 4ae5799..581ab2b 100644
--- a/src/View/LexemeView.php
+++ b/src/View/LexemeView.php
@@ -107,6 +107,7 @@
. $this->templateFactory->render( 'wikibase-toc' )
. $this->statementSectionsView->getHtml(
$entity->getStatements() )
. $this->formsView->getHtml( $entity->getForms() )
+ . $this->getRepresentationsVueTemplate()
. $this->sensesView->getHtml( $entity->getSenses() );
}
@@ -219,6 +220,47 @@
return $this->htmlTermRenderer->renderTerm( $label );
}
+ private function getRepresentationsVueTemplate() {
+ return <<<HTML
+<script id="representation-widget-vue-template" type="x-template">
+ {$this->getRawRepresentationVueTemplate()}
+</script>
+HTML;
+ }
+
+ private function getRawRepresentationVueTemplate() {
+ return <<<'HTML'
+<div class="lemma-widget">
+ <ul v-if="!inEditMode" class="lemma-widget_lemma-list">
+ <li v-for="lemma in representations" class="lemma-widget_lemma">
+ <span
class="lemma-widget_lemma-value">{{lemma.value}}</span>
+ <span
class="lemma-widget_lemma-language">{{lemma.language}}</span>
+ </li>
+ </ul>
+ <div v-else>
+ <div class="lemma-widget_edit-area">
+ <ul class="lemma-widget_lemma-list">
+ <li v-for="lemma in representations"
class="lemma-widget_lemma-edit-box">
+ <input size="1"
class="lemma-widget_lemma-value-input"
+ v-model="lemma.value"
:disabled="isSaving">
+ <input size="1"
class="lemma-widget_lemma-language-input"
+ v-model="lemma.language"
:disabled="isSaving">
+ <button
class="lemma-widget_lemma-remove" v-on:click="remove(lemma)"
+ :disabled="isSaving"
:title="'wikibase-remove'|message">
+ ×
+ </button>
+ </li>
+ <li>
+ <button type="button"
class="lemma-widget_add" v-on:click="add"
+ :disabled="isSaving"
:title="'wikibase-add'|message">+</button>
+ </li>
+ </ul>
+ </div>
+ </div>
+</div>
+HTML;
+ }
+
private function getLemmaVueTemplate() {
return <<<HTML
<script id="lemma-widget-vue-template" type="x-template">
--
To view, visit https://gerrit.wikimedia.org/r/362180
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I5dda249fb2121db3b29804e202b9f90d3755a968
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/WikibaseLexeme
Gerrit-Branch: master
Gerrit-Owner: Jakob <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
