Gabriel Birke has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/358561 )
Change subject: Add Search Preview Pills
......................................................................
Add Search Preview Pills
Search preview is now shown again, with TagItemWidget.
Closing items does not remove text from text input and
ArbitraryWordInput yet, as the form widgets are not
connected to the store update event.
Change-Id: I6b346a947212d7949bae2bf7e36b6fc077896483
---
M extension.json
M modules/dm/ext.advancedSearch.SearchModel.js
M modules/ext.advancedSearch.css
M modules/ext.advancedSearch.init.js
M modules/ui/ext.advancedSearch.ExpandablePane.js
A modules/ui/ext.advancedSearch.SearchPreview.js
6 files changed, 104 insertions(+), 23 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/AdvancedSearch
refs/changes/61/358561/1
diff --git a/extension.json b/extension.json
index 5a46f33..54d1f83 100644
--- a/extension.json
+++ b/extension.json
@@ -68,7 +68,8 @@
"ext.advancedSearch.ui.ExpandablePane",
"ext.advancedSearch.ui.ImageDimensionInput",
"ext.advancedSearch.ui.MenuedInput",
- "ext.advancedSearch.ui.OptionalElementLayout"
+ "ext.advancedSearch.ui.OptionalElementLayout",
+ "ext.advancedSearch.ui.SearchPreview"
]
},
"ext.advancedSearch.ui.ArbitraryWordInput": {
@@ -145,6 +146,14 @@
"oojs-ui"
]
},
+ "ext.advancedSearch.ui.SearchPreview": {
+ "scripts": [
+ "modules/ui/ext.advancedSearch.SearchPreview.js"
+ ],
+ "dependencies": [
+ "oojs-ui"
+ ]
+ },
"ext.advancedSearch.dm.SearchModel": {
"scripts": [
"modules/dm/ext.advancedSearch.SearchModel.js"
diff --git a/modules/dm/ext.advancedSearch.SearchModel.js
b/modules/dm/ext.advancedSearch.SearchModel.js
index 69d5d67..83655d7 100644
--- a/modules/dm/ext.advancedSearch.SearchModel.js
+++ b/modules/dm/ext.advancedSearch.SearchModel.js
@@ -59,6 +59,15 @@
return this.searchOptions[ optionId ];
};
+ mw.libs.advancedSearch.dm.SearchModel.prototype.removeOption = function
( optionId ) {
+ delete this.searchOptions[ optionId ];
+ if ( optionId == 'filetype' ) {
+ this.searchOptions.filew = [ '>', '' ];
+ this.searchOptions.fileh = [ '>', '' ];
+ }
+ this.emit( 'update' );
+ };
+
/**
* Get non-empty search options
*
diff --git a/modules/ext.advancedSearch.css b/modules/ext.advancedSearch.css
index 9b887b0..176b1fe 100644
--- a/modules/ext.advancedSearch.css
+++ b/modules/ext.advancedSearch.css
@@ -81,6 +81,11 @@
right: 0.9375em;
}
+.advancedSearch-searchPreview-label {
+ font-weight: bold;
+ margin-right: 0.3125em;
+}
+
.advancedSearch-previewLabel.oo-ui.widget-enabled {
background: white;
}
diff --git a/modules/ext.advancedSearch.init.js
b/modules/ext.advancedSearch.init.js
index d8bd20c..f102b31 100644
--- a/modules/ext.advancedSearch.init.js
+++ b/modules/ext.advancedSearch.init.js
@@ -488,10 +488,14 @@
}
var $advancedButtonLabel = $( '<span>' ).prop( { 'class':
'advancedSearch-optionTags' } );
+ var searchPreview = new mw.libs.advancedSearch.ui.SearchPreview( state,
{
+ label: msg( 'advanced-search' ),
+ previewOptions: getPreviewOptions()
+ } );
var pane = new mw.libs.advancedSearch.ui.ExpandablePane( {
$paneContent: $allOptions,
- $buttonLabel: $( '<strong></strong>' ).text( msg(
'advanced-search' ) )
+ $buttonLabel: searchPreview.$element
} );
$( '.mw-search-profile-tabs' ).before( pane.$element );
@@ -506,6 +510,17 @@
return '';
}
+ function getPreviewOptions() {
+ var previewOptions = {};
+ advancedOptions.forEach( function ( option ) {
+ previewOptions[ option.id ] = {
+ formatter: option.formatter,
+ label: mw.msg( 'advancedsearch-field-' +
option.id )
+ };
+ } );
+ return previewOptions;
+ }
+
// FIXME make this "button" its own GUI class that does all the things
described in mockup.
function updateAdvancedButtonLabel() {
$advancedButtonLabel.empty();
diff --git a/modules/ui/ext.advancedSearch.ExpandablePane.js
b/modules/ui/ext.advancedSearch.ExpandablePane.js
index c7b341a..1d87db6 100644
--- a/modules/ui/ext.advancedSearch.ExpandablePane.js
+++ b/modules/ui/ext.advancedSearch.ExpandablePane.js
@@ -44,27 +44,6 @@
this.$dependentPane.append( config.$paneContent );
}
- // TODO Move the following code to a separate widget
- /*
- var $labelContainer = $( '<div><strong>Advanced
Parameters</strong></div>' );
- $bar.append( $labelContainer );
-
- var dummyDemoWidgets = [
- new OO.ui.TagItemWidget( { label: 'First demo label:
foo' } ),
- new OO.ui.TagItemWidget( { label: 'Second demo label:
bar' } ),
- new OO.ui.TagItemWidget( { label: 'Third demo label:
baz' } ),
- new OO.ui.TagItemWidget( { label: 'Fourth demo label:
quux' } ),
- new OO.ui.TagItemWidget( { label: 'Fivth demo label:
quuz' } )
- ];
-
- $.each( dummyDemoWidgets, function ( _, w ) {
- // TODO Create custom TagItemWidget classes that have
special classes (for styling) and disable clicking
- w.$element.on( 'click', function () { return false; } );
- w.$element.addClass( 'advancedSearch-previewLabel' );
- $labelContainer.append( w.$element );
- } );
- */
-
this.$btn.addClass( 'oo-ui-buttonElement-framed' );
this.$element.addClass( 'advancedSearch-expandablePane' );
this.$element.append( this.$btn, this.$dependentPane );
diff --git a/modules/ui/ext.advancedSearch.SearchPreview.js
b/modules/ui/ext.advancedSearch.SearchPreview.js
new file mode 100644
index 0000000..2cadff8
--- /dev/null
+++ b/modules/ui/ext.advancedSearch.SearchPreview.js
@@ -0,0 +1,64 @@
+( function ( mw ) {
+ 'use strict';
+
+ mw.libs = mw.libs || {};
+ mw.libs.advancedSearch = mw.libs.advancedSearch || {};
+ mw.libs.advancedSearch.ui = mw.libs.advancedSearch.ui || {};
+
+ /**
+ * @class
+ * @extends {OO.ui.Widget}
+ * @constructor
+ *
+ * @param {ext.advancedSearch.dm.SearchModel} store
+ * @param {Object} config
+ */
+ mw.libs.advancedSearch.ui.SearchPreview = function ( store, config ) {
+ var myConfig = $.extend( { previewOptions: {} }, config || {} );
+ this.store = store;
+ this.previewOptions = myConfig.previewOptions;
+
+ store.connect( this, { update: 'onStoreUpdate' } );
+
+ mw.libs.advancedSearch.ui.SearchPreview.parent.call( this,
myConfig );
+
+ this.label = new OO.ui.LabelWidget( {
+ label: config.label,
+ classes: [ 'advancedSearch-searchPreview-label' ]
+ } );
+ this.$element.append( this.label.$element );
+
+ this.$element.addClass( 'advancedSearch-searchPreview' );
+ this.updatePreview();
+ };
+
+ OO.inheritClass( mw.libs.advancedSearch.ui.SearchPreview, OO.ui.Widget
);
+
+ mw.libs.advancedSearch.ui.SearchPreview.prototype.onStoreUpdate =
function () {
+ this.updatePreview();
+ };
+
+ mw.libs.advancedSearch.ui.SearchPreview.prototype.updatePreview =
function () {
+ var self = this;
+ // TODO check if we really need to re-generate
+ this.$element.find( '.advancedSearch-searchPreview-previewPill'
).remove();
+
+ // TODO only generate previews if in preview mode, hide
previews when form is shown
+ $.each( this.previewOptions, function ( optionId, option ) {
+ var val = self.store.getOption( optionId );
+ if ( !val || ( optionId.match( '^file[hw]$' ) && (
!$.isArray( val ) || !val[ 1 ] ) ) ) {
+ return;
+ }
+ var tag = new OO.ui.TagItemWidget( { label:
option.label } );
+ tag.connect( this, {
+ remove: function () {
+ self.store.removeOption( optionId );
+ }
+ } );
+ tag.$label.attr( 'title', option.formatter( val ) );
+ tag.$element.addClass(
'advancedSearch-searchPreview-previewPill' );
+ self.$element.append( tag.$element );
+ } );
+ };
+
+} )( mediaWiki );
--
To view, visit https://gerrit.wikimedia.org/r/358561
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6b346a947212d7949bae2bf7e36b6fc077896483
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/AdvancedSearch
Gerrit-Branch: master
Gerrit-Owner: Gabriel Birke <gabriel.bi...@wikimedia.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
