jenkins-bot has submitted this change and it was merged. Change subject: Open search interface full screen when focused ......................................................................
Open search interface full screen when focused Bug: T95778 Change-Id: Ied6ae3246c301e67c57c7e5cad48d561792f197b --- M resources/ext.gather.collection.editor/CollectionEditOverlay.js M resources/ext.gather.collection.editor/header.hogan M resources/ext.gather.page.search/CollectionSearchPanel.js 3 files changed, 76 insertions(+), 9 deletions(-) Approvals: Jhernandez: Looks good to me, approved jenkins-bot: Verified diff --git a/resources/ext.gather.collection.editor/CollectionEditOverlay.js b/resources/ext.gather.collection.editor/CollectionEditOverlay.js index c711351..4963649 100644 --- a/resources/ext.gather.collection.editor/CollectionEditOverlay.js +++ b/resources/ext.gather.collection.editor/CollectionEditOverlay.js @@ -16,6 +16,11 @@ * @uses CollectionSearchPanel */ CollectionEditOverlay = Overlay.extend( { + _selectors: { + edit: '.continue-header, .editor-pane', + manage: '.save-header, .manage-members-pane .content, .manage-members-pane .results, .manage-members-pane .search', + search: '.search-header, .manage-members-pane .results' + }, /** @inheritdoc */ className: 'collection-editor-overlay overlay', titleMaxLength: 90, @@ -38,6 +43,9 @@ /** @inheritdoc */ events: $.extend( {}, Overlay.prototype.events, { 'click .edit-action': 'onEditActionClick', + 'focus .manage-members-pane input': 'onFocusSearch', + 'input .search-header input': 'onRunSearch', + 'click .search-header .back': 'onExitSearch', 'click .continue': 'onNextClick', 'click .back': 'onBackClick', 'click .save': 'onSaveClick' @@ -70,7 +78,8 @@ collection: options.collection, pages: pages, el: self.$( '.panel' ) - } ).show(); + } ); + self.searchPanel.show(); } ); }, /** @@ -78,15 +87,58 @@ * @private */ _switchToFirstPane: function () { - this.$( '.continue-header, .editor-pane' ).addClass( 'hidden' ); - this.$( '.save-header, .manage-members-pane' ).removeClass( 'hidden' ); + this.$( this._selectors.edit ) + .add( this._selectors.search ) + .addClass( 'hidden' ); + this.$( this._selectors.manage ).removeClass( 'hidden' ); + }, + /** + * Switch to search pane. + * @private + */ + _switchToSearchPane: function () { + this.$( this._selectors.edit ) + .add( this._selectors.manage ) + .addClass( 'hidden' ); + this.$( this._selectors.search ).removeClass( 'hidden' ); + this.$( '.search-header input' ).focus(); + }, + /** + * Switch to edit pane. + * @private + */ + _switchToEditPane: function () { + this.$( this._selectors.manage ) + .add( this._selectors.search ) + .addClass( 'hidden' ); + this.$( this._selectors.edit ).removeClass( 'hidden' ); + }, + /** + * Event handler when the search input is focused + */ + onFocusSearch: function () { + this.searchPanel.search( this.$( '.search-header input' ).val() ); + this._switchToSearchPane(); + }, + /** + * Event handler when the edit button is clicked. + * @param {jQuery.Event} ev + */ + onRunSearch: function ( ev ) { + this.searchPanel.search( $( ev.currentTarget ).val() ); + }, + /** + * Event handler when the exit search button is clicked. + */ + onExitSearch: function () { + this.searchPanel.search( '' ); + this._switchToFirstPane(); }, /** * Event handler when the edit button is clicked. */ onEditActionClick: function () { - this.$( '.save-header, .manage-members-pane' ).addClass( 'hidden' ); - this.$( '.continue-header, .editor-pane' ).removeClass( 'hidden' ); + this._switchToEditPane(); }, /** * Event handler when the back button is clicked on the title/edit description pane. diff --git a/resources/ext.gather.collection.editor/header.hogan b/resources/ext.gather.collection.editor/header.hogan index b5498c7..c633393 100644 --- a/resources/ext.gather.collection.editor/header.hogan +++ b/resources/ext.gather.collection.editor/header.hogan @@ -18,3 +18,13 @@ </div> <div class="overlay-action"><button class="continue">{{continueMsg}}</button></div> </div> +<div class="overlay-header search-header hideable hidden"> + <ul> + <li>{{{backButton}}}</li> + </ul> + <div class="overlay-title"> + <div class="search"> + <input class="search" type="text"> + </div> + </div> +</div> diff --git a/resources/ext.gather.page.search/CollectionSearchPanel.js b/resources/ext.gather.page.search/CollectionSearchPanel.js index 8355a3f..d3972e7 100644 --- a/resources/ext.gather.page.search/CollectionSearchPanel.js +++ b/resources/ext.gather.page.search/CollectionSearchPanel.js @@ -114,9 +114,14 @@ * Event handler for when search input changes */ onSearchInput: function () { - var self = this, - $input = this.$( 'input' ), - query = $input.val(); + this.search( this.$( 'input' ).val() ); + }, + /** + * Trigger search + * @param {String} query + */ + search: function ( query ) { + var self = this; if ( query !== this.lastQuery ) { this.api.abort(); @@ -131,7 +136,7 @@ // check if we're getting the rights response in case of out of // order responses (need to get the current value of the input) - if ( data.query === $input.val() ) { + if ( data.query === query ) { results = $.map( data.results, function ( page ) { page.isMember = self.hasMember( page.title ); return page; -- To view, visit https://gerrit.wikimedia.org/r/203978 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: Ied6ae3246c301e67c57c7e5cad48d561792f197b Gerrit-PatchSet: 2 Gerrit-Project: mediawiki/extensions/Gather Gerrit-Branch: master Gerrit-Owner: Jdlrobson <jrob...@wikimedia.org> Gerrit-Reviewer: Jhernandez <jhernan...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits