1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
/*!
* VisualEditor user interface MWGalleryItemWidget class.
*
* @copyright See AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/**
* Draggable item widget for the MWGalleryGroupWidget
*
* @class
* @extends OO.ui.Widget
* @mixes OO.ui.mixin.DraggableElement
*
* @constructor
* @param {Object} imageInfo Image information object
* @param {Object} [config] Configuration options
* @param {boolean} [config.isMobile=false]
* @param {boolean} [config.draggable=true]
*/
ve.ui.MWGalleryItemWidget = function VeUiMWGalleryItemWidget( imageInfo, config ) {
this.resource = imageInfo.resource;
this.altText = imageInfo.altText || '';
this.altTextSame = imageInfo.altTextSame;
this.href = imageInfo.href;
// Keep the original value which may be null
this.originalAltText = imageInfo.altText;
this.src = imageInfo.src;
this.height = imageInfo.height;
this.width = imageInfo.width;
this.thumbUrl = imageInfo.thumbUrl;
this.captionDocument = imageInfo.captionDocument;
this.highlighted = false;
this.tagName = imageInfo.tagName;
this.isError = imageInfo.isError;
this.imageClassAttr = imageInfo.imageClassAttr;
this.imgWrapperClassAttr = imageInfo.imgWrapperClassAttr;
this.mw = imageInfo.mw;
this.mediaClass = imageInfo.mediaClass;
this.mediaTag = imageInfo.mediaTag;
// Configuration initialization
config = config || {};
// Parent constructor
ve.ui.MWGalleryItemWidget.super.call( this, config );
this.$element
.addClass( 've-ui-mwGalleryDialog-image-container mw-no-invert' ) // TODO: put in new CSS file?
.addClass( config.isMobile ?
've-ui-mwGalleryDialog-image-container-mobile' :
've-ui-mwGalleryDialog-image-container-desktop'
)
.css( 'background-image', 'url(' + this.thumbUrl + ')' );
// Mixin constructors
OO.ui.mixin.DraggableElement.call( this, ve.extendObject( { $handle: this.$element }, config ) );
OO.ui.mixin.TabIndexedElement.call( this, config );
this.$element.on( {
click: this.onItemClick.bind( this ),
keypress: this.onItemKeyPress.bind( this )
} );
};
/* Inheritance */
OO.inheritClass( ve.ui.MWGalleryItemWidget, OO.ui.Widget );
OO.mixinClass( ve.ui.MWGalleryItemWidget, OO.ui.mixin.DraggableElement );
OO.mixinClass( ve.ui.MWGalleryItemWidget, OO.ui.mixin.TabIndexedElement );
/* Events */
/**
* @event ve.ui.MWGalleryItemWidget#edit
*/
/* Methods */
/**
* Handle clicking on an item
*
* @fires ve.ui.MWGalleryItemWidget#edit
*/
ve.ui.MWGalleryItemWidget.prototype.onItemClick = function () {
this.emit( 'edit', this );
};
/**
* Handle key press events
*
* @param {jQuery.Event} e Key press event
* @return {boolean|undefined}
* @fires ve.ui.MWGalleryItemWidget#edit
*/
ve.ui.MWGalleryItemWidget.prototype.onItemKeyPress = function ( e ) {
if ( e.which === OO.ui.Keys.ENTER ) {
this.emit( 'edit', this );
return false;
}
};
/**
* Set the captionDocument property
*
* @param {ve.dm.Document} captionDocument The caption document
*/
ve.ui.MWGalleryItemWidget.prototype.setCaptionDocument = function ( captionDocument ) {
this.captionDocument = captionDocument;
};
/**
* Set the altText property
*
* @param {string} altText The altText
*/
ve.ui.MWGalleryItemWidget.prototype.setAltText = function ( altText ) {
this.altText = altText;
};
/**
* Set the altTextSame property
*
* @param {boolean} same
*/
ve.ui.MWGalleryItemWidget.prototype.setAltTextSame = function ( same ) {
this.altTextSame = same;
};
/**
* Toggle highlighted class
*
* @param {boolean} highlighted The item is highlighted
*/
ve.ui.MWGalleryItemWidget.prototype.toggleHighlighted = function ( highlighted ) {
highlighted = highlighted !== undefined ? highlighted : !this.highlighted;
this.$element.toggleClass( 've-ui-mwGalleryDialog-image-container-highlighted', !!highlighted );
};
|
