3 * Quick links menu option widget
5 * @extends OO.ui.Widget
6 * @mixins OO.ui.mixin.LabelElement
7 * @mixins OO.ui.mixin.IconElement
8 * @mixins OO.ui.mixin.TitledElement
11 * @param {mw.rcfilters.dm.SavedQueryItemModel} model View model
12 * @param {Object} [config] Configuration object
13 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
15 mw
.rcfilters
.ui
.SavedLinksListItemWidget
= function MwRcfiltersUiSavedLinksListWidget( model
, config
) {
16 config
= config
|| {};
21 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.parent
.call( this, $.extend( {
22 data
: this.model
.getID()
26 OO
.ui
.mixin
.LabelElement
.call( this, $.extend( {
27 label
: this.model
.getLabel()
29 OO
.ui
.mixin
.IconElement
.call( this, $.extend( {
32 OO
.ui
.mixin
.TitledElement
.call( this, $.extend( {
33 title
: this.model
.getLabel()
37 this.$overlay
= config
.$overlay
|| this.$element
;
39 this.popupButton
= new OO
.ui
.ButtonWidget( {
40 classes
: [ 'mw-rcfilters-ui-savedLinksListItemWidget-button' ],
44 this.menu
= new OO
.ui
.MenuSelectWidget( {
45 classes
: [ 'mw-rcfilters-ui-savedLinksListItemWidget-menu' ],
46 widget
: this.popupButton
,
48 horizontalPosition
: 'end',
49 $floatableContainer
: this.popupButton
.$element
,
51 new OO
.ui
.MenuOptionWidget( {
54 label
: mw
.msg( 'rcfilters-savedqueries-rename' )
56 new OO
.ui
.MenuOptionWidget( {
59 label
: mw
.msg( 'rcfilters-savedqueries-remove' )
61 new OO
.ui
.MenuOptionWidget( {
64 label
: mw
.msg( 'rcfilters-savedqueries-setdefault' )
69 this.editInput
= new OO
.ui
.TextInputWidget( {
70 classes
: [ 'mw-rcfilters-ui-savedLinksListItemWidget-input' ]
72 this.saveButton
= new OO
.ui
.ButtonWidget( {
74 flags
: [ 'primary', 'progressive' ]
76 this.toggleEdit( false );
79 this.model
.connect( this, { update
: 'onModelUpdate' } );
80 this.popupButton
.connect( this, { click
: 'onPopupButtonClick' } );
81 this.menu
.connect( this, {
82 choose
: 'onMenuChoose'
84 this.saveButton
.connect( this, { click
: 'onSaveButtonClick' } );
85 this.editInput
.connect( this, { enter
: 'onEditInputEnter' } );
86 this.editInput
.$input
.on( {
87 blur
: this.onInputBlur
.bind( this ),
88 keyup
: this.onInputKeyup
.bind( this )
90 this.$element
.on( { click
: this.onClick
.bind( this ) } );
91 this.$label
.on( { click
: this.onClick
.bind( this ) } );
92 // Prevent propagation on mousedown for the save button
93 // so the menu doesn't close
94 this.saveButton
.$element
.on( { mousedown: function () { return false; } } );
97 this.toggleDefault( !!this.model
.isDefault() );
98 this.$overlay
.append( this.menu
.$element
);
100 .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget' )
101 .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-query-' + this.model
.getID() )
104 .addClass( 'mw-rcfilters-ui-table' )
107 .addClass( 'mw-rcfilters-ui-row' )
110 .addClass( 'mw-rcfilters-ui-cell' )
111 .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-content' )
114 .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-label' ),
115 this.editInput
.$element
,
116 this.saveButton
.$element
119 .addClass( 'mw-rcfilters-ui-cell' )
120 .addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
121 .append( this.$icon
),
122 this.popupButton
.$element
123 .addClass( 'mw-rcfilters-ui-cell' )
130 OO
.inheritClass( mw
.rcfilters
.ui
.SavedLinksListItemWidget
, OO
.ui
.Widget
);
131 OO
.mixinClass( mw
.rcfilters
.ui
.SavedLinksListItemWidget
, OO
.ui
.mixin
.LabelElement
);
132 OO
.mixinClass( mw
.rcfilters
.ui
.SavedLinksListItemWidget
, OO
.ui
.mixin
.IconElement
);
133 OO
.mixinClass( mw
.rcfilters
.ui
.SavedLinksListItemWidget
, OO
.ui
.mixin
.TitledElement
);
140 * The delete option was selected for this item
145 * @param {boolean} default Item is default
147 * The 'make default' option was selected for this item
152 * @param {string} newLabel New label for the query
154 * The label has been edited
160 * Respond to model update event
162 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.onModelUpdate = function () {
163 this.setLabel( this.model
.getLabel() );
164 this.toggleDefault( this.model
.isDefault() );
168 * Respond to click on the element or label
172 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.onClick = function () {
173 if ( !this.editing
) {
174 this.emit( 'click' );
178 * Respond to popup button click event
180 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.onPopupButtonClick = function () {
185 * Respond to menu choose event
187 * @param {OO.ui.MenuOptionWidget} item Chosen item
191 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.onMenuChoose = function ( item
) {
192 var action
= item
.getData();
194 if ( action
=== 'edit' ) {
195 this.toggleEdit( true );
196 } else if ( action
=== 'delete' ) {
197 this.emit( 'delete' );
198 } else if ( action
=== 'default' ) {
199 this.emit( 'default', !this.default );
202 this.menu
.selectItem( null );
204 this.menu
.toggle( false );
208 * Respond to save button click
210 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.onSaveButtonClick = function () {
211 this.emit( 'edit', this.editInput
.getValue() );
212 this.toggleEdit( false );
216 * Respond to input enter event
218 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.onEditInputEnter = function () {
219 this.emit( 'edit', this.editInput
.getValue() );
220 this.toggleEdit( false );
224 * Respond to input keyup event, this is the way to intercept 'escape' key
226 * @param {jQuery.Event} e Event data
227 * @returns {boolean} false
229 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.onInputKeyup = function ( e
) {
230 if ( e
.which
=== OO
.ui
.Keys
.ESCAPE
) {
231 // Return the input to the original label
232 this.editInput
.setValue( this.getLabel() );
233 this.toggleEdit( false );
239 * Respond to blur event on the input
241 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.onInputBlur = function () {
242 this.emit( 'edit', this.editInput
.getValue() );
243 this.toggleEdit( false );
247 * Toggle edit mode on this widget
249 * @param {boolean} isEdit Widget is in edit mode
251 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.toggleEdit = function ( isEdit
) {
252 isEdit
= isEdit
=== undefined ? !this.editing
: isEdit
;
254 if ( this.editing
!== isEdit
) {
255 this.$element
.toggleClass( 'mw-rcfilters-ui-savedLinksListItemWidget-edit', isEdit
);
256 this.editInput
.setValue( this.getLabel() );
258 this.editInput
.toggle( isEdit
);
259 this.$label
.toggleClass( 'oo-ui-element-hidden', isEdit
);
260 this.$icon
.toggleClass( 'oo-ui-element-hidden', isEdit
);
261 this.popupButton
.toggle( !isEdit
);
262 this.saveButton
.toggle( isEdit
);
265 this.editInput
.$input
.focus();
267 this.editing
= isEdit
;
272 * Toggle default this widget
274 * @param {boolean} isDefault This item is default
276 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.toggleDefault = function ( isDefault
) {
277 isDefault
= isDefault
=== undefined ? !this.default : isDefault
;
279 if ( this.default !== isDefault
) {
280 this.default = isDefault
;
281 this.setIcon( this.default ? 'pushPin' : '' );
282 this.menu
.getItemFromData( 'default' ).setLabel(
284 mw
.msg( 'rcfilters-savedqueries-unsetdefault' ) :
285 mw
.msg( 'rcfilters-savedqueries-setdefault' )
293 * @returns {string} Query identifier
295 mw
.rcfilters
.ui
.SavedLinksListItemWidget
.prototype.getID = function () {
296 return this.model
.getID();