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
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
|
/*
* This file is part of the MediaWiki extension MultimediaViewer.
*
* MultimediaViewer is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 2 of the License, or
* (at your option) any later version.
*
* MultimediaViewer is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with MultimediaViewer. If not, see <http://www.gnu.org/licenses/>.
*/
( function ( mw, $, oo ) {
var TTFP;
/**
* Represents any text field that might need to be truncated to be readable. Text will be adjusted to
* fit into its container.
*
* More specifically, TruncatableTextField should be invoked with a fixed-height container as the first
* parameter and a flexible-width content (which gets its size from the text inside it) as the second
* one. The container gets overflow: hidden, and the content is placed inside it; if the content
* overflows the container, TruncatableTextField will cycle through a set of styles and apply to the
* container the first one that makes the content not overflow anymore. If none of the styles do that,
* the last one is applied anyway.
*
* The list of styles can be customized; by default, they set progressively smaller font size, and the
* last one adds an ellipsis to the end. (An ellipsis element is automatically appended to the end of
* the container to help with this, but it is hidden unless made visible by one of the styles.)
*
* grow() and shrink() can be used to show full text (by making the container flexible-height) and hiding
* them again; TruncatableTextField will not call them automatically (the caller class should e.g. set up
* a click handler on the ellipsis).
*
* repaint() should be called after layout changes to keep the truncation accurate.
*
* @class mw.mmv.ui.TruncatableTextField
* @extends mw.mmv.ui.Element
* @constructor
* @param {jQuery} $container The container for the element.
* @param {jQuery} $element The element where we should put the text.
* @param {Object} [options]
* @param {string[]} [options.styles] a list of styles to try if the text does not fit into the container.
* Will stop at the first which makes the text fit; the last one will be used even if it does not make
* the text fit.
*/
function TruncatableTextField( $container, $element, options ) {
mw.mmv.ui.Element.call( this, $container );
/** @property {jQuery} $element The DOM element that holds text for this element. */
this.$element = $element;
/** @property {Object} options - */
this.options = $.extend( {}, this.defaultOptions, options );
/** @property {boolean} expanded true if the text is long enough to be truncated but the full text is shown */
this.expanded = false;
/** @property {jQuery} ellipsis the element which marks that the text was truncated */
this.$ellipsis = null;
/** @property {string} normalTitle title attribute to show when the text is not truncated */
this.normalTitle = null;
/** @property {string} truncatedTitle title attribute to show when the text is not truncated */
this.truncatedTitle = null;
/** @property {mw.mmv.HtmlUtils} htmlUtils Our HTML utility instance. */
this.htmlUtils = new mw.mmv.HtmlUtils();
this.init();
}
oo.inheritClass( TruncatableTextField, mw.mmv.ui.Element );
TTFP = TruncatableTextField.prototype;
/**
* Default options
* @property {Object} defaultOptions
*/
TTFP.defaultOptions = {
styles: [ 'mw-mmv-ttf-small', 'mw-mmv-ttf-smaller', 'mw-mmv-ttf-smallest' ]
};
/**
* Initializes the DOM.
*
* @private
*/
TTFP.init = function () {
this.$ellipsis = $( '<span>' )
.text( '…' )
.hide()
.addClass( 'mw-mmv-ttf-ellipsis' );
this.$container
.addClass( 'mw-mmv-ttf-container empty' )
.append( this.$element, this.$ellipsis );
};
TTFP.attach = function () {
$( window ).on( 'resize.mmv-ttf', $.debounce( 100, $.proxy( this.repaint, this ) ) );
};
TTFP.unattach = function () {
$( window ).off( 'resize.mmv-ttf' );
};
/**
* Sets the string for the element.
*
* @param {string} value Warning - unsafe HTML is allowed here.
*/
TTFP.set = function ( value ) {
this.$element.empty().append( this.htmlUtils.htmlToTextWithTags( value ) );
this.changeStyle();
this.$container.toggleClass( 'empty', !value );
this.$ellipsis.hide();
this.shrink();
};
TTFP.empty = function () {
this.$element.empty();
this.$container
.removeClass( this.options.styles.join( ' ' ) )
.removeClass( 'mw-mmv-ttf-untruncated mw-mmv-ttf-truncated' )
.addClass( 'empty' );
this.$ellipsis.hide();
this.setTitle( '', '' );
this.expanded = false;
};
/**
* Recalculate truncation after layout changes (such as resize)
*/
TTFP.repaint = function () {
this.changeStyle();
this.$ellipsis.hide();
this.shrink();
};
/**
* Allows setting different titles for fully visible and for truncated text.
*
* @param {string} normal
* @param {string} truncated
*/
TTFP.setTitle = function ( normal, truncated ) {
this.normalTitle = normal;
this.truncatedTitle = truncated;
this.updateTitle();
};
/**
* Selects the right title to use (for full or for truncated version). The title can be set with setTitle().
*/
TTFP.updateTitle = function () {
var $elementsWithTitle = this.$element.add( this.$ellipsis );
$elementsWithTitle.attr( 'original-title', this.isTruncated() ? this.truncatedTitle : this.normalTitle );
};
/**
* Returns true if the text is long enough that it needs to be truncated.
*
* @return {boolean}
*/
TTFP.isTruncatable = function () {
// height calculation logic does not work for expanded state since the container expands
// to envelop the element, but we never go into expanded state for non-truncatable elements anyway
return this.$container.height() < this.$element.height() || this.expanded;
};
/**
* Returns true if the text is truncated at the moment.
*
* @return {boolean}
*/
TTFP.isTruncated = function () {
return this.isTruncatable() && !this.expanded;
};
/**
* Makes the container fixed-width, clipping the text.
* This will only add a .mw-mmv-ttf-truncated class; it's the caller's responsibility to define the fixed
* height for that class.
*/
TTFP.shrink = function () {
if ( this.isTruncatable() ) {
this.expanded = false;
this.$container.addClass( 'mw-mmv-ttf-truncated' ).removeClass( 'mw-mmv-ttf-untruncated' );
this.$ellipsis.show();
this.updateTitle();
}
};
/**
* Makes the container flexible-width, thereby restoring the full text.
*/
TTFP.grow = function () {
if ( this.isTruncatable() ) {
this.expanded = true;
this.$container.removeClass( 'mw-mmv-ttf-truncated' ).addClass( 'mw-mmv-ttf-untruncated' );
this.$ellipsis.hide();
this.updateTitle();
}
};
/**
* Changes the element style if a certain length is reached.
*/
TTFP.changeStyle = function () {
var oldClass,
newClass = 'mw-mmv-ttf-normal',
field = this;
this.$container
.removeClass( this.options.styles.join( ' ' ) )
.removeClass( 'mw-mmv-ttf-untruncated mw-mmv-ttf-truncated' )
.addClass( newClass );
this.expanded = false;
$.each( this.options.styles, function ( k, v ) {
if ( !field.isTruncatable() ) {
return false;
}
oldClass = newClass;
newClass = v;
field.$container.removeClass( oldClass ).addClass( newClass );
} );
};
mw.mmv.ui.TruncatableTextField = TruncatableTextField;
}( mediaWiki, jQuery, OO ) );
|
