@@ -28,7 +28,10 @@ angular.module('mm.core')
2828 * -after-render: Scope function to call once the content is renderered. Passes the current scope as argument.
2929 * -clean: True if all HTML tags should be removed, false otherwise.
3030 * -singleline: True if new lines should be removed (all the text in a single line). Only valid if clean is true.
31- * -shorten: Number of characters to shorten the text.
31+ * -shorten: To shorten the text. If a number is supplied, it will shorten the text to that number of characters.
32+ * If a percentage is supplied the number of characters to short will be the percentage of element's width.
33+ * E.g. 50% of an element with 1000px width = 500 characters.
34+ * If the element has no width it'll use 100 characters. If the attribute is empty it'll use 30% width.
3235 * -expand-on-click: Indicate if contents should be expanded on click (undo shorten). Only applied if "shorten" is set.
3336 * -fullview-on-click: Indicate if should open a new state with the full contents on click. Only applied if "shorten" is set.
3437 * -watch: True if the variable used inside the directive should be watched for changes. If the variable data is retrieved
@@ -39,6 +42,44 @@ angular.module('mm.core')
3942 var extractVariableRegex = new RegExp ( '{{([^|]+)(|.*)?}}' , 'i' ) ,
4043 tagsToIgnore = [ 'AUDIO' , 'VIDEO' , 'BUTTON' , 'INPUT' , 'SELECT' , 'TEXTAREA' , 'A' ] ;
4144
45+ /**
46+ * Returns the number of characters to shorten the text. If the text shouldn't be shortened, returns undefined.
47+ *
48+ * @param {Object } element Directive root DOM element.
49+ * @param {String } [shorten] Shorten attribute. Can be undefined or a string: empty, number or a percentage.
50+ * @return {Number } Number of characters to shorten the text to. Undefined if it shouldn't shorten.
51+ */
52+ function calculateShorten ( element , shorten ) {
53+ var multiplier ;
54+
55+ if ( typeof shorten == 'string' && shorten . indexOf ( '%' ) > - 1 ) {
56+ // It's a percentage. Extract the multiplier.
57+ multiplier = parseInt ( shorten . replace ( / % / g, '' ) . trim ( ) ) / 100 ;
58+ if ( isNaN ( multiplier ) ) {
59+ multiplier = 0.3 ;
60+ }
61+ } else if ( typeof shorten != 'undefined' && shorten === '' ) {
62+ // Not defined, use default value.
63+ multiplier = 0.3 ;
64+ } else {
65+ var number = parseInt ( shorten ) ;
66+ if ( isNaN ( number ) ) {
67+ return ; // Return undefined so it's not shortened.
68+ } else {
69+ return number ;
70+ }
71+ }
72+
73+ var el = element [ 0 ] ,
74+ elWidth = el . offsetWidth || el . width || el . clientWidth ;
75+ if ( ! elWidth ) {
76+ // Cannot calculate element's width, use default value.
77+ return 100 ;
78+ } else {
79+ return Math . round ( elWidth * multiplier ) ;
80+ }
81+ }
82+
4283 /**
4384 * Format contents and render.
4485 *
@@ -55,6 +96,8 @@ angular.module('mm.core')
5596 return ;
5697 }
5798
99+ attrs . shorten = calculateShorten ( element , attrs . shorten ) ;
100+
58101 // If expandOnClick or fullviewOnClick are set we won't shorten the text on formatContents, we'll do it later.
59102 var shorten = ( attrs . expandOnClick || attrs . fullviewOnClick ) ? 0 : attrs . shorten ;
60103
0 commit comments