Henning Snater has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/80542


Change subject: Implemented movetoolbar widget
......................................................................

Implemented movetoolbar widget

Change-Id: I277c9d05fcd79e74933575919240532d208ad62b
---
M lib/WikibaseLib.hooks.php
M lib/resources/Resources.php
A lib/resources/jquery.wikibase/toolbar/movetoolbar.js
A lib/resources/jquery.wikibase/toolbar/themes/default/movetoolbar.css
M lib/resources/jquery.wikibase/toolbar/themes/default/toolbarbutton.css
M lib/resources/jquery.wikibase/toolbar/toolbarcontroller.js
A lib/tests/qunit/jquery.wikibase/toolbar/movetoolbar.tests.js
M repo/Wikibase.i18n.php
8 files changed, 358 insertions(+), 3 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Wikibase 
refs/changes/42/80542/1

diff --git a/lib/WikibaseLib.hooks.php b/lib/WikibaseLib.hooks.php
index 5a01da5..774567a 100644
--- a/lib/WikibaseLib.hooks.php
+++ b/lib/WikibaseLib.hooks.php
@@ -164,6 +164,16 @@
                        ),
                );
 
+               $testModules['qunit']['jquery.wikibase.movetoolbar.tests'] = 
$moduleBase + array(
+                       'scripts' => array(
+                               
'tests/qunit/jquery.wikibase/toolbar/movetoolbar.tests.js',
+                       ),
+                       'dependencies' => array(
+                               'jquery.wikibase.movetoolbar',
+                               'jquery.wikibase.listview',
+                       ),
+               );
+
                $testModules['qunit']['jquery.wikibase.snaklistview.tests'] = 
$moduleBase +  array(
                        'scripts' => array(
                                
'tests/qunit/jquery.wikibase/jquery.wikibase.snaklistview.tests.js',
diff --git a/lib/resources/Resources.php b/lib/resources/Resources.php
index 1b70ded..1d24618 100644
--- a/lib/resources/Resources.php
+++ b/lib/resources/Resources.php
@@ -402,6 +402,7 @@
                        'dependencies' => array(
                                'jquery.wikibase.addtoolbar',
                                'jquery.wikibase.edittoolbar',
+                               'jquery.wikibase.movetoolbar',
                                'jquery.wikibase.removetoolbar',
                        )
                ),
@@ -439,6 +440,22 @@
                        )
                ),
 
+               'jquery.wikibase.movetoolbar' => $moduleTemplate + array(
+                       'scripts' => array(
+                               'jquery.wikibase/toolbar/movetoolbar.js',
+                       ),
+                       'styles' => array(
+                               
'jquery.wikibase/toolbar/themes/default/movetoolbar.css',
+                       ),
+                       'dependencies' => array(
+                               'jquery.wikibase.toolbarbase',
+                       ),
+                       'messages' => array(
+                               'wikibase-move-up',
+                               'wikibase-move-down',
+                       ),
+               ),
+
                'jquery.wikibase.removetoolbar' => $moduleTemplate + array(
                        'scripts' => array(
                                'jquery.wikibase/toolbar/removetoolbar.js',
diff --git a/lib/resources/jquery.wikibase/toolbar/movetoolbar.js 
b/lib/resources/jquery.wikibase/toolbar/movetoolbar.js
new file mode 100644
index 0000000..759098b
--- /dev/null
+++ b/lib/resources/jquery.wikibase/toolbar/movetoolbar.js
@@ -0,0 +1,134 @@
+/**
+ * @file
+ * @ingroup WikibaseLib
+ *
+ * @licence GNU GPL v2+
+ * @author H. Snater < [email protected] >
+ */
+( function( mw, wb, $ ) {
+       'use strict';
+
+       var PARENT = $.wikibase.toolbarbase;
+
+       /**
+        * "Move" toolbar widget
+        * @since 0.4
+        * @extends jQuery.wikibase.toolbarbase
+        *
+        * This widget offers two buttons to move a referenced object within a 
list up or down. With the
+        * corresponding toolbar definition being initialized on a parent item, 
the movetoolbar itself
+        * needs to be initialized on every list item.
+        *
+        * @option listView {jQuery.wikibase.listview} The listview widget the 
toolbar controls an
+        *         element of.
+        *
+        * @event up: Triggered when the "move up" button is hit.
+        *        (1) {jQuery.Event}
+        *
+        * @event down: Triggered when the "move down" button is hit.
+        *        (1) {jQuery.Event}
+        */
+       $.widget( 'wikibase.movetoolbar', PARENT, {
+               widgetBaseClass: 'wb-movetoolbar',
+
+               /**
+                * Options
+                * @type {Object}
+                */
+               options: {
+                       listView: null
+               },
+
+               /**
+                * "Move up" button.
+                * @type {jQuery}
+                */
+               $btnMoveUp: null,
+
+               /**
+                * "Move down" button.
+                * @type {jQuery}
+                */
+               $btnMoveDown: null,
+
+               /**
+                * @see jQuery.Widget._create
+                */
+               _create: function() {
+                       var self = this;
+
+                       if ( !this.options.listView ) {
+                               throw new Error( 'Need reference to listview 
widget' );
+                       }
+
+                       PARENT.prototype._create.call( this );
+
+                       var $toolbar = mw.template( 'wikibase-toolbar', '', '' 
).toolbar();
+                       this.toolbar = $toolbar.data( 'toolbar' );
+
+                       this.$btnMoveUp = this._initButton(
+                               mw.msg( 'wikibase-move-up' ),
+                               'ui-icon-triangle-1-n'
+                       );
+
+                       this.$btnMoveDown = this._initButton(
+                               mw.msg( 'wikibase-move-down' ),
+                               'ui-icon-triangle-1-s'
+                       );
+
+                       var btnMoveUp = this.$btnMoveUp.data( 'toolbarbutton' ),
+                               btnMoveDown = this.$btnMoveDown.data( 
'toolbarbutton' );
+
+                       this.$btnMoveUp.on( 'toolbarbuttonaction.' + 
this.widgetName, function( event ) {
+                               if( btnMoveUp.isEnabled() ) {
+                                       self._trigger( 'up' );
+                               }
+                       } );
+
+                       this.$btnMoveDown.on( 'toolbarbuttonaction.' + 
this.widgetName, function( event ) {
+                               if( btnMoveDown.isEnabled() ) {
+                                       self._trigger( 'down' );
+                               }
+                       } );
+
+                       $toolbar.appendTo(
+                               $( '<div/>' ).addClass( 'wb-editsection' 
).appendTo( this.$toolbarParent )
+                       );
+               },
+
+               /**
+                * @see jQuery.wikibase.toolbarbase.destroy
+                */
+               destroy: function() {
+                       this.options.listView.element.off( '.' + 
this.widgetName );
+
+                       // toolbar's destroy() will tear down the buttons:
+                       PARENT.prototype.destroy.call( this );
+               },
+
+               /**
+                * Initializes a toolbar button and adds it to the toolbar.
+                * @since 0.4
+                *
+                * @param {string} title
+                * @param {string} iconClass
+                * @return {jQuery}
+                */
+               _initButton: function( title, iconClass ) {
+                       var $btn = mw.template(
+                               'wikibase-toolbarbutton',
+                               $( '<span/>', {
+                                       title: title,
+                                       'class': 'ui-icon ' + iconClass
+                               } ),
+                               'javascript:void(0);'
+                       ).toolbarbutton();
+
+                       this.toolbar.addElement( $btn );
+
+                       return $btn;
+               }
+
+       } );
+
+}( mediaWiki, wikibase, jQuery ) );
diff --git 
a/lib/resources/jquery.wikibase/toolbar/themes/default/movetoolbar.css 
b/lib/resources/jquery.wikibase/toolbar/themes/default/movetoolbar.css
new file mode 100644
index 0000000..e3a3d60
--- /dev/null
+++ b/lib/resources/jquery.wikibase/toolbar/themes/default/movetoolbar.css
@@ -0,0 +1,24 @@
+/**
+ * @since 0.4
+ * @file
+ * @ingroup WikibaseLib
+ *
+ * @license GNU GPL v2+
+ * @author H. Snater < [email protected] >
+ */
+
+.wb-movetoolbar .wikibase-toolbarbutton {
+       float: left;
+}
+
+.wb-movetoolbar .ui-icon {
+       width: 8px;
+}
+
+.wb-movetoolbar .ui-icon-triangle-1-n {
+       background-position: -4px -16px;
+}
+
+.wb-movetoolbar .ui-icon-triangle-1-s {
+       background-position: -68px -16px;
+}
diff --git 
a/lib/resources/jquery.wikibase/toolbar/themes/default/toolbarbutton.css 
b/lib/resources/jquery.wikibase/toolbar/themes/default/toolbarbutton.css
index 880d954..e252834 100644
--- a/lib/resources/jquery.wikibase/toolbar/themes/default/toolbarbutton.css
+++ b/lib/resources/jquery.wikibase/toolbar/themes/default/toolbarbutton.css
@@ -17,3 +17,7 @@
        color: grey;
        text-decoration: none;
 }
+
+.wikibase-toolbarbutton-disabled .ui-icon {
+       background-image: 
url(../../../../../../../../resources/jquery.ui/themes/default/images/ui-icons_888888_256x240.png);
+}
diff --git a/lib/resources/jquery.wikibase/toolbar/toolbarcontroller.js 
b/lib/resources/jquery.wikibase/toolbar/toolbarcontroller.js
index 9833b97..b3394e2 100644
--- a/lib/resources/jquery.wikibase/toolbar/toolbarcontroller.js
+++ b/lib/resources/jquery.wikibase/toolbar/toolbarcontroller.js
@@ -9,12 +9,12 @@
        'use strict';
 
        /**
-        * The toolbar types we have.
+        * Supported toolbar types.
         * TODO: create a registry for allowing adding additional toolbar types
         *
         * @type {string[]}
         */
-       var TOOLBAR_TYPES = ['addtoolbar', 'edittoolbar', 'removetoolbar'];
+       var TOOLBAR_TYPES = ['addtoolbar', 'edittoolbar', 'removetoolbar', 
'movetoolbar'];
 
        /**
         * Toolbar controller widget
@@ -46,7 +46,8 @@
                options: {
                        addtoolbar: [],
                        edittoolbar: [],
-                       removetoolbar: []
+                       removetoolbar: [],
+                       movetoolbar: []
                },
 
                /**
diff --git a/lib/tests/qunit/jquery.wikibase/toolbar/movetoolbar.tests.js 
b/lib/tests/qunit/jquery.wikibase/toolbar/movetoolbar.tests.js
new file mode 100644
index 0000000..9b2fac7
--- /dev/null
+++ b/lib/tests/qunit/jquery.wikibase/toolbar/movetoolbar.tests.js
@@ -0,0 +1,161 @@
+/**
+ * @since 0.4
+ * @file
+ * @ingroup WikibaseLib
+ *
+ * @licence GNU GPL v2+
+ * @author H. Snater < [email protected] >
+ */
+
+( function( mw, wb, $, QUnit ) {
+       'use strict';
+
+       /**
+        * Generates a listview widget suitable for testing.
+        *
+        * @param {*[]} [value]
+        * @return {jQuery}
+        */
+       function createListview( value ) {
+               var $node = $( '<div/>' ).addClass( 'test_listview' );
+
+               $node.listview( {
+                       listItemAdapter: new 
$.wikibase.listview.ListItemAdapter( {
+                               listItemWidget: $.wikibasetest.valuewidget,
+                               listItemWidgetValueAccessor: 'value',
+                               newItemOptionsFn: function( value ) {
+                                       return { value: value || null };
+                               }
+                       } ),
+                       value: ( value ) ? value : null
+               } );
+
+               return $node;
+       }
+
+       /**
+        * Generates a movetoolbar widget suitable for testing.
+        *
+        * @param {*[]} listviewValue
+        * @return {jQuery}
+        */
+       function createListViewWithMovetoolbar( listviewValue ) {
+               var $listview = createListview( listviewValue ),
+                       listview = $listview.data( 'listview' );
+
+               listview.items().each( function( i, itemNode ) {
+                       $( itemNode ).movetoolbar( { listView: listview } );
+               } );
+
+               return $listview;
+       }
+
+       QUnit.module( 'jquery.wikibase.movetoolbar', QUnit.newWbEnvironment( {
+               setup: function() {
+                       /**
+                        * Basic widget to be used as list item.
+                        */
+                       $.widget( 'wikibasetest.valuewidget', {
+                               value: function( value ) {
+                                       if( value ) {
+                                               this.options.value = value;
+                                       }
+                                       return this.options.value;
+                               }
+                       } );
+               },
+               teardown: function() {
+                       $( '.test_listview' ).each( function( i, node ) {
+                               var $node = $( node ),
+                                       listview = $node.data( 'listview' );
+
+                               if( listview ) {
+                                       listview.items().each( function( j, 
itemNode ) {
+                                               var $itemNode = $( itemNode ),
+                                                       movetoolbar = 
$itemNode.data( 'movetoolbar' );
+
+                                               if( movetoolbar ) {
+                                                       movetoolbar.destroy();
+                                               }
+                                       } );
+
+                                       listview.destroy();
+                                       $node.remove();
+                               }
+                       } );
+
+                       delete( $.wikibasetest.valuewidget );
+               }
+       } ) );
+
+       QUnit.test( 'Initialize and destroy', function( assert ) {
+               var items = ['a', 'b', 'c'],
+                       $listview = createListViewWithMovetoolbar( items ),
+                       listview = $listview.data( 'listview' ),
+                       $toolbar = listview.items().first(),
+                       toolbar = $toolbar.data( 'movetoolbar' );
+
+               assert.ok(
+                       toolbar !== undefined,
+                       'Initialized widget.'
+               );
+
+               assert.equal(
+                       toolbar.toolbar.element.children().length,
+                       2,
+                       'Toolbar features two child nodes.'
+               );
+
+               assert.equal(
+                       toolbar.$btnMoveUp.get( 0 ),
+                       toolbar.toolbar.element.children().get( 0 ),
+                       'First child node is the "move up" button.'
+               );
+
+               assert.equal(
+                       toolbar.$btnMoveDown.get( 0 ),
+                       toolbar.toolbar.element.children().get( 1 ),
+                       'Second child node is the "move down" button.'
+               );
+
+               toolbar.destroy();
+
+               assert.equal(
+                       $toolbar.data( 'toolbar' ),
+                       null,
+                       'Destroyed widget.'
+               );
+
+               assert.strictEqual(
+                       listview.items().length,
+                       items.length,
+                       'Items in referenced listview widget remain.'
+               );
+       } );
+
+       QUnit.test( 'Button events', 2, function( assert ) {
+               var items = ['a', 'b', 'c'],
+                       $listview = createListViewWithMovetoolbar( items ),
+                       listview = $listview.data( 'listview' ),
+                       $toolbar = listview.items().first(),
+                       toolbar = $toolbar.data( 'movetoolbar' );
+
+               $toolbar.on( 'movetoolbarup', function( event ) {
+                       assert.ok(
+                               true,
+                               'Triggered "up" event.'
+                       );
+               } );
+
+               $toolbar.on( 'movetoolbardown', function( event ) {
+                       assert.ok(
+                               true,
+                               'Triggered "down" event.'
+                       );
+               } );
+
+               toolbar.$btnMoveUp.trigger( 'click' );
+               toolbar.$btnMoveDown.trigger( 'click' );
+       } );
+
+}( mediaWiki, wikibase, jQuery, QUnit ) );
diff --git a/repo/Wikibase.i18n.php b/repo/Wikibase.i18n.php
index 8a2f74d..c7b20ba 100644
--- a/repo/Wikibase.i18n.php
+++ b/repo/Wikibase.i18n.php
@@ -47,6 +47,8 @@
        'wikibase-sitelinks-empty' => 'No site-link for this item yet.',
        'wikibase-sitelinks-input-help-message' => 'Set a link to a page 
related to this item.',
        'wikibase-remove' => 'remove',
+       'wikibase-move-up' => 'move up',
+       'wikibase-move-down' => 'move down',
        'wikibase-undo-title' => 'Undoing edit to "$1"',
        'wikibase-restore-title' => 'Restoring old revision of "$1"',
        'wikibase-partial-undo' => 'The edit can partially be undone.',
@@ -521,6 +523,8 @@
 This is a generic text used for a link (fig. 3 on 
[[m:Wikidata/Notes/JavaScript ui implementation]]) that removes an element of 
some kind, without the the user interface being put in edit mode.',
        'wikibase-undo-title' => 'Title shown on the form for undoing edits. 
Example is Undoing edit to "Spain". Parameters:
 * $1 is the item label.',
+       'wikibase-move-up' => 'Label of a link to move a list item one step up 
within an ordered list. The label should be a rather generic expression since 
it is used for lists featuring various content.',
+       'wikibase-move-down' => 'Label of a link to move a list item one step 
down within an ordered list. The label should be a rather generic expression 
since it is used for lists featuring various content.',
        'wikibase-restore-title' => 'Title shown on the form for restoring old 
revisions. Example is Restoring Old Revision of "Spain". Parameters:
 * $1 is the item label.',
        'wikibase-partial-undo' => 'Message indicating that an edit can only 
partially be undone. This happens when the respective value has been changed 
again after the edit that is being undone.',

-- 
To view, visit https://gerrit.wikimedia.org/r/80542
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I277c9d05fcd79e74933575919240532d208ad62b
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Wikibase
Gerrit-Branch: master
Gerrit-Owner: Henning Snater <[email protected]>

_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to