mirror of
https://github.com/mail-in-a-box/mailinabox.git
synced 2025-04-03 00:07:05 +00:00
58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
/////
|
|
///// This file is part of Mail-in-a-Box-LDAP which is released under the
|
|
///// terms of the GNU Affero General Public License as published by the
|
|
///// Free Software Foundation, either version 3 of the License, or (at
|
|
///// your option) any later version. See file LICENSE or go to
|
|
///// https://github.com/downtownallday/mailinabox-ldap for full license
|
|
///// details.
|
|
/////
|
|
|
|
/*
|
|
* This component adds <wbr> elements after all characters given by
|
|
* `break_chars` in the given text.
|
|
*
|
|
* <wbr> enables the browser to wrap long text at those points
|
|
* (without it the browser will only wrap at space and hyphen).
|
|
*
|
|
* Additionally, if `text_break_threshold` is greater than 0 and there
|
|
* is a segment of text that exceeds that length, the bootstrap css
|
|
* class "text-break" will be added to the <span>, which causes the
|
|
* browser to wrap at any character of the text.
|
|
*/
|
|
|
|
export default Vue.component('wbr-text', {
|
|
props: {
|
|
text: { type:String, required: true },
|
|
break_chars: { type:String, default:'@_.,:+=' },
|
|
text_break_threshold: { type:Number, default:0 },
|
|
},
|
|
|
|
render: function(ce) {
|
|
var children = [];
|
|
var start=-1;
|
|
var idx=0;
|
|
var longest=-1;
|
|
while (idx < this.text.length) {
|
|
if (this.break_chars.indexOf(this.text[idx]) != -1) {
|
|
var sliver = this.text.substring(start+1, idx+1);
|
|
longest = Math.max(longest, sliver.length);
|
|
children.push(sliver);
|
|
children.push(ce('wbr'));
|
|
start=idx;
|
|
}
|
|
idx++;
|
|
}
|
|
|
|
if (start < this.text.length-1) {
|
|
var sliver = this.text.substring(start+1);
|
|
longest = Math.max(longest, sliver.length);
|
|
children.push(sliver);
|
|
}
|
|
|
|
var data = { };
|
|
if (this.text_break_threshold>0 && longest>this.text_break_threshold)
|
|
data['class'] = { 'text-break': true };
|
|
return ce('span', data, children);
|
|
}
|
|
});
|