<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>angular playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="config.js"></script>
<script src="trunk8.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
/* Styles go here */
.mention-hide{
display: inline-block;
}
.user-activity-box .mention-parent-close-btn {
display: none;
}
.mention-parent-inner {
display: inline-block;
color: #393939;
margin: 7px 9px;
max-width: 325px;
max-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
direction: ltr;
cursor: move;
font-family: MuseoSans-500;
font-size: 13px;
}
.mention-parent {
background-color: #dfdfdf;
cursor: default;
display: inline-block;
height: 30px;
white-space: nowrap;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 16px;
margin: 0 4px 3px;
position: relative;
padding-right: 17px;
}
.user-activity-box .mention-parent {
border: none;
background: transparent;
position: relative;
top: -1px;
margin: 0 0 0 4px;
padding: 0;
height: auto;
}
.mention-parent-close-btn {
color: #fff;
font-size: 13px;
line-height: 17px;
cursor: pointer;
position: absolute;
right: 7px;
top: 7px;
text-decoration: none;
display: block;
}
.ellipsis-conatiner-big {
padding: 5px 0px 10px 0px;
font-size: 16px;
}
.user-activity-box .mention-parent-inner {
margin: 0;
color: #1538f2;
cursor: initial;
}
.user-info-post {
padding: 0px;
}
.edit-post-content .mention-no-data {
top: -3px;
height: inherit;
line-height: inherit;
position: relative;
}
.user-activity-post {
background-color: #ffffff;
box-shadow: 0px 1px 1px -1px rgba(0, 0, 0, 0.95);
border: solid 1px rgba(210, 210, 210, 0.67);
margin-bottom: 15px;
}
.user-activity-box {
min-height: 50px;
float: left;
box-sizing: border-box;
width: 100%;
}
.edit-post-content {
margin-top: 1px;
}
.user-info {
font-family: 'MuseoSans-500';
color: #878787;
position: relative;
padding: 20px 20px 10px 20px;
float: left;
width: 100%;
box-sizing: border-box;
}
.ellipsis-conatiner {
margin-right: 0px;
padding-right: 0px;
padding-left: 0px;
color: #4a4a4a;
width: 559px;
}
### Angular Starter Plunker - Typescript
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms';
import {TimeLineModule} from './timeline.module';
@Component({
selector: 'my-app',
template: `
<my-timeline></my-timeline>
`,
})
export class App {
name:string;
id="mesa";
constructor() {
this.name = `Angular! v${VERSION.full}`
}
}
@NgModule({
imports: [ BrowserModule,FormsModule,TimeLineModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
/**!
* trunk8 v1.3.3
* https://github.com/rviscomi/trunk8
*
* Copyright 2012 Rick Viscomi
* Released under the MIT License.
*
* Date: September 26, 2012
Customized for PMLC Use April 2017
*/
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
factory(require('jquery'));
} else {
factory(root.jQuery);
}
}(this, function ($) {
var methods,
utils,
SIDES = {
/* cen...ter */
center: 'center',
/* ...left */
left: 'left',
/* right... */
right: 'right'
},
WIDTH = {
auto: 'auto'
};
function trunk8(element) {
this.$element = $(element);
this.original_text = $.trim(this.$element.html());
sessionStorage.setItem(this.$element[0].id, $.trim(this.$element.html()));
this.settings = $.extend({}, $.fn.trunk8.defaults);
}
trunk8.prototype.updateSettings = function (options) {
this.settings = $.extend(this.settings, options);
};
function stripHTML(html) {
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
if (typeof tmp.textContent != 'undefined') {
return tmp.textContent;
}
return tmp.innerText
}
function getHtmlArr(str) {
/* Builds an array of strings and designated */
/* HTML tags around them. */
if (stripHTML(str) === str) {
return str.split(/\s/g);
}
var allResults = [],
reg = /<([a-z]+)([^<]*)(?:>([\S\s]*?(?!<\1>))<\/\1>|\s+\/>)(['.?!,]*)|((?:[^<>\s])+['.?!,]*\w?|<br\s?\/?>)/ig,
outArr = reg.exec(str),
lastI,
ind;
while (outArr && lastI !== reg.lastIndex) {
lastI = reg.lastIndex;
if (outArr[5]) {
if (outArr[5] == "/span") {
outArr[5] = "</span>"
}
if (outArr[5] == "span") {
outArr[5] = "<span"
}
allResults.push(outArr[5]);
} else if (outArr[1]) {
allResults.push({
tag: outArr[1],
attribs: outArr[2],
content: outArr[3],
after: outArr[4]
});
}
outArr = reg.exec(str);
}
for (ind = 0; ind < allResults.length; ind++) {
if (typeof allResults[ind] !== 'string' &&
allResults[ind].content) {
allResults[ind].content = getHtmlArr(allResults[ind].content);
}
}
return allResults;
}
function rebuildHtmlFromBite(bite, htmlObject, fill) {
// Take the processed bite after binary-search
// truncated and re-build the original HTML
// tags around the processed string.
bite = bite.replace(fill, '');
var biteHelper = function (contentArr, tagInfo) {
var retStr = '',
content,
biteContent,
biteLength,
nextWord,
i;
for (i = 0; i < contentArr.length; i++) {
content = contentArr[i];
biteLength = $.trim(bite).split(' ').length;
if ($.trim(bite).length) {
if (typeof content === 'string') {
if (!/<br\s*\/?>/i.test(content)) {
if (biteLength === 1 && $.trim(bite).length <= content.length) {
content = bite;
// We want the fill to go inside of the last HTML
// element if the element is a container.
if (tagInfo === 'p' || tagInfo === 'div' || tagInfo === 'span') {
content += fill;
}
bite = '';
} else {
bite = bite.replace(content, '');
}
}
retStr += $.trim(content) + ((i === contentArr.length - 1 || biteLength <= 1) ? '' : ' ');
} else {
biteContent = biteHelper(content.content, content.tag);
if (content.after) bite = bite.replace(content.after, '');
if (biteContent) {
if (!content.after) content.after = ' ';
retStr += '<' + content.tag + content.attribs + '>' + biteContent + '</' + content.tag + '>' + content.after;
}
}
}
}
return retStr;
},
htmlResults = biteHelper(htmlObject);
// Add fill if doesn't exist. This will place it outside the HTML elements.
if (htmlResults.slice(htmlResults.length - fill.length) === fill) {
htmlResults += fill;
}
//mentions style fix
htmlResults = htmlResults.replace(/<span class=\"mention-hide\" @<\/span> /g, "</span><span class=\"mention-hide\">@</span>");
return htmlResults;
}
function replaceContent(content) {
/* ie fix PML-5539 */
var div = document.createElement('div')
div.innerHTML = content;
var pTags = div.getElementsByTagName('p');
var strLen = "";
if (pTags.length > 1) {
for (var i = 0; i < pTags.length;) {
var p = pTags[i],
div = document.createElement('div');
div.innerHTML = p.innerHTML;
p.parentNode.replaceChild(div, p);
strLen += div.outerHTML;
}
content = strLen;
}
//firefox
var str = (content != null) ? content.split('<br>') : "";
var tempStr = ""
if (str.length > 1 && content.indexOf("<div><br></div>")==-1) {
for (var el in str) {
var newElement = document.createElement('div');
newElement.id = str[el];
newElement.innerHTML = str[el];
tempStr += newElement.outerHTML;
}
content = tempStr;
}
content = (content != null) ? content : "";
return content;
}
function truncate() {
debugger;
var data = this.data('trunk8'),
settings = data.settings,
width = settings.width,
side = settings.side,
fill = settings.fill,
parseHTML = settings.parseHTML,
line_height = utils.getLineHeight(this) * settings.lines,
str = replaceContent(data.original_text),
length = str.length,
max_bite = '',
lower, upper,
bite_size,
bite,
text,
htmlObject;
/* Reset the field to the original string. */
this.html(str);
text = this.text()
/* If string has HTML and parse HTML is set, build */
/* the data struct to house the tags */
if (parseHTML && stripHTML(str) !== str) {
htmlObject = getHtmlArr(str);
str = stripHTML(str);
length = str.length;
}
if (width === WIDTH.auto) {
/* Assuming there is no "overflow: hidden". */
if (this.height() <= line_height) {
/* Text is already at the optimal trunkage. */
return;
}
/* Binary search technique for finding the optimal trunkage. */
/* Find the maximum bite without overflowing. */
lower = 0;
upper = length - 1;
while (lower <= upper) {
bite_size = lower + ((upper - lower) >> 1);
bite = utils.eatStr(str, side, length - bite_size, fill);
if (parseHTML && htmlObject) {
bite = rebuildHtmlFromBite(bite, htmlObject, fill);
}
this.html(bite);
/* Check for overflow. */
if (this.height() > line_height) {
upper = bite_size - 1;
}
else {
lower = bite_size + 1;
/* Save the bigger bite. */
max_bite = (max_bite.length > bite.length) ? max_bite : bite;
}
}
/* Reset the content to eliminate possible existing scroll bars. */
this.html('');
/* Display the biggest bite. */
max_bite=max_bite.replace("@</span&hellip", "</span>&hellip");
this.html(max_bite);
if (settings.tooltip) {
this.attr('title', text);
}
}
else if (!isNaN(width)) {
bite_size = length - width;
if (bite_size < 0) {
return;
}
bite = utils.eatStr(str, side, bite_size, fill);
this.html(bite);
if (settings.tooltip) {
this.attr('title', str);
}
}
else {
$.error('Invalid width "' + width + '".');
return;
}
settings.onTruncate();
}
/**
* Truncate HTML string and keep tag safe for @ mentions.
*
* @method truncate
* @param {String} string string needs to be truncated
* @param {Number} maxLength length of truncated string
* @param {Object} options (optional)
* @param {Boolean} [options.keepImageTag] flag to specify if keep image tag, false by default
* @param {Boolean} [options.truncateLastWord] truncates last word, true by default
* @param {Number} [options.slop] tolerance when options.truncateLastWord is false before we give up and just truncate at the maxLength position, 10 by default (but not greater than maxLength)
* @param {Boolean|String} [options.ellipsis] omission symbol for truncated string, '...' by default
* @return {String} truncated string
*/
function truncateHTML(string, maxLength, options) {
string = replaceContent(this.data('trunk8').original_text);
options = { ellipsis: this.data('trunk8').settings.fill, truncateLastWord: false }
str = stripHTML(string);
maxLength = str.length;
var EMPTY_OBJECT = {},
EMPTY_STRING = '',
DEFAULT_TRUNCATE_SYMBOL = '...',
DEFAULT_SLOP = 10 > maxLength ? maxLength : 10,
EXCLUDE_TAGS = ['img', 'br'], // non-closed tags
items = [], // stack for saving tags
total = 0, // record how many characters we traced so far
content = EMPTY_STRING, // truncated text storage
KEY_VALUE_REGEX = '([\\w|-]+\\s*(=\\s*"[^"]*")?\\s*)*',
IS_CLOSE_REGEX = '\\s*\\/?\\s*',
CLOSE_REGEX = '\\s*\\/\\s*',
SELF_CLOSE_REGEX = new RegExp('<\\/?\\w+\\s*' + KEY_VALUE_REGEX + CLOSE_REGEX + '>'),
HTML_TAG_REGEX = new RegExp('<\\/?\\w+\\s*' + KEY_VALUE_REGEX + IS_CLOSE_REGEX + '>'),
URL_REGEX = /(((ftp|https?):\/\/)[\-\w@:%_\+.~#?,&\/\/=]+)|((mailto:)?[_.\w\-]+@([\w][\w\-]+\.)+[a-zA-Z]{2,3})/g, // Simple regexp
IMAGE_TAG_REGEX = new RegExp('<img\\s*' + KEY_VALUE_REGEX + IS_CLOSE_REGEX + '>'),
WORD_BREAK_REGEX = new RegExp('\\W+', 'g'),
matches = true,
result,
index,
tail,
tag,
selfClose;
/**
* Remove image tag
*
* @private
* @method _removeImageTag
* @param {String} string not-yet-processed string
* @return {String} string without image tags
*/
function _removeImageTag(string) {
var match = IMAGE_TAG_REGEX.exec(string),
index,
len;
if (!match) {
return string;
}
index = match.index;
len = match[0].length;
return string.substring(0, index) + string.substring(index + len);
}
/**
* Dump all close tags and append to truncated content while reaching upperbound
*
* @private
* @method _dumpCloseTag
* @param {String[]} tags a list of tags which should be closed
* @return {String} well-formatted html
*/
function _dumpCloseTag(tags) {
var html = '';
tags.reverse().forEach(function (tag, index) {
// dump non-excluded tags only
if (-1 === EXCLUDE_TAGS.indexOf(tag)) {
html += '</' + tag + '>';
}
});
return html;
}
/**
* Process tag string to get pure tag name
*
* @private
* @method _getTag
* @param {String} string original html
* @return {String} tag name
*/
function _getTag(string) {
var tail = string.indexOf(' ');
// TODO:
// we have to figure out how to handle non-well-formatted HTML case
if (-1 === tail) {
tail = string.indexOf('>');
if (-1 === tail) {
throw new Error('HTML tag is not well-formed : ' + string);
}
}
return string.substring(1, tail);
}
/**
* Get the end position for String#substring()
*
* If options.truncateLastWord is FALSE, we try to the end position up to
* options.slop characters to avoid breaking in the middle of a word.
*
* @private
* @method _getEndPosition
* @param {String} string original html
* @param {Number} tailPos (optional) provided to avoid extending the slop into trailing HTML tag
* @return {Number} maxLength
*/
function _getEndPosition(string, tailPos) {
var defaultPos = maxLength - total,
position = defaultPos,
isShort = defaultPos < options.slop,
slopPos = isShort ? defaultPos : options.slop - 1,
substr,
startSlice = isShort ? 0 : defaultPos - options.slop,
endSlice = tailPos || (defaultPos + options.slop),
result;
if (!options.truncateLastWord) {
substr = string.slice(startSlice, endSlice);
if (tailPos && substr.length <= tailPos) {
position = substr.length;
}
else {
while ((result = WORD_BREAK_REGEX.exec(substr)) !== null) {
// a natural break position before the hard break position
if (result.index < slopPos) {
position = defaultPos - (slopPos - result.index);
// keep seeking closer to the hard break position
// unless a natural break is at position 0
if (result.index === 0 && defaultPos <= 1) break;
}
// a natural break position exactly at the hard break position
else if (result.index === slopPos) {
position = defaultPos;
break; // seek no more
}
// a natural break position after the hard break position
else {
position = defaultPos + (result.index - slopPos);
break; // seek no more
}
}
}
if (string.charAt(position - 1).match(/\s$/)) position--;
}
return position;
}
options = options || EMPTY_OBJECT;
options.ellipsis = (undefined !== options.ellipsis) ? options.ellipsis : DEFAULT_TRUNCATE_SYMBOL;
options.truncateLastWord = (undefined !== options.truncateLastWord) ? options.truncateLastWord : true;
options.slop = (undefined !== options.slop) ? options.slop : DEFAULT_SLOP;
while (matches) {
matches = HTML_TAG_REGEX.exec(string);
if (!matches) {
if (total >= maxLength) { break; }
matches = URL_REGEX.exec(string);
if (!matches || matches.index >= maxLength) {
content += string.substring(0, _getEndPosition(string));
break;
}
while (matches) {
result = matches[0];
index = matches.index;
content += string.substring(0, (index + result.length) - total);
string = string.substring(index + result.length);
matches = URL_REGEX.exec(string);
}
break;
}
result = matches[0];
index = matches.index;
if (total + index > maxLength) {
// exceed given `maxLength`, dump everything to clear stack
content += string.substring(0, _getEndPosition(string, index));
break;
} else {
total += index;
content += string.substring(0, index);
}
if ('/' === result[1]) {
// move out open tag
items.pop();
selfClose = null;
} else {
selfClose = SELF_CLOSE_REGEX.exec(result);
if (!selfClose) {
tag = _getTag(result);
items.push(tag);
}
}
if (selfClose) {
content += selfClose[0];
} else {
content += result;
}
string = string.substring(index + result.length);
}
if (string.length > maxLength - total && options.ellipsis) {
content += options.ellipsis;
}
content += _dumpCloseTag(items);
if (!options.keepImageTag) {
content = _removeImageTag(content);
}
this.html('');
this.html(content);
return content;
}
methods = {
init: function (options) {
debugger;
return this.each(function () {
debugger;
var $this = $(this),
data = $this.data('trunk8');
if (!data) {
$this.data('trunk8', (data = new trunk8(this)));
}
data.updateSettings(options);
if (data.original_text.indexOf("@")==-1 ) {
truncate.call($this);
}
else{
truncateHTML.call($this);
}
});
},
/** Updates the text value of the elements while maintaining truncation. */
update: function (new_string) {
return this.each(function () {
var $this = $(this);
/* Update text. */
if (new_string) {
$this.data('trunk8').original_text = new_string;
}
/* Truncate accordingly. */
truncate.call($this);
});
},
revert: function () {
return this.each(function () {
/* Get original text. */
var text = "";
if ($(this).data('trunk8') != undefined) {
text = $(this).data('trunk8').original_text;
}
else {
text = sessionStorage.getItem($(this).find("div")[0].id);
var str = text;
var mapObj = {
"<span class=\"mention-hide\">@</span>": "<span>@</span>",
"<span class=\"mention-hide\" …": "<span class=\"mention-hide\"> …",
};
var re = new RegExp(Object.keys(mapObj).join("|"), "gi");
text = str.replace(re, function (matched) {
return mapObj[matched];
});
}
/* Revert element to original text. */
$(this).html(text);
});
},
/** Returns this instance's settings object. NOT CHAINABLE. */
getSettings: function () {
return $(this.get(0)).data('trunk8').settings;
}
};
utils = {
/** Replaces [bite_size] [side]-most chars in [str] with [fill]. */
eatStr: function (str, side, bite_size, fill) {
var length = str.length,
key = utils.eatStr.generateKey.apply(null, arguments),
half_length,
half_bite_size;
/* If the result is already in the cache, return it. */
if (utils.eatStr.cache[key]) {
return utils.eatStr.cache[key];
}
/* Common error handling. */
if ((typeof str !== 'string') || (length === 0)) {
$.error('Invalid source string "' + str + '".');
}
if ((bite_size < 0) || (bite_size > length)) {
$.error('Invalid bite size "' + bite_size + '".');
}
else if (bite_size === 0) {
/* No bite should show no truncation. */
return str;
}
if (typeof (fill + '') !== 'string') {
$.error('Fill unable to be converted to a string.');
}
/* Compute the result, store it in the cache, and return it. */
switch (side) {
case SIDES.right:
/* str... */
return utils.eatStr.cache[key] =
$.trim(str.substr(0, length - bite_size)) + fill;
case SIDES.left:
/* ...str */
return utils.eatStr.cache[key] =
fill + $.trim(str.substr(bite_size));
case SIDES.center:
/* Bit-shift to the right by one === Math.floor(x / 2) */
half_length = length >> 1; // halve the length
half_bite_size = bite_size >> 1; // halve the bite_size
/* st...r */
return utils.eatStr.cache[key] =
$.trim(utils.eatStr(str.substr(0, length - half_length), SIDES.right, bite_size - half_bite_size, '')) +
fill +
$.trim(utils.eatStr(str.substr(length - half_length), SIDES.left, half_bite_size, ''));
default:
$.error('Invalid side "' + side + '".');
}
},
getLineHeight: function (elem) {
var floats = $(elem).css('float');
if (floats !== 'none') {
$(elem).css('float', 'none');
}
var pos = $(elem).css('position');
if (pos === 'absolute') {
$(elem).css('position', 'static');
}
var html = $(elem).html(),
wrapper_id = 'line-height-test',
line_height;
/* Set the content to a small single character and wrap. */
$(elem).html('i').wrap('<div id="' + wrapper_id + '" />');
/* Calculate the line height by measuring the wrapper.*/
line_height = $('#' + wrapper_id).innerHeight();
/* Remove the wrapper and reset the content. */
$(elem).html(html).css({ 'float': floats, 'position': pos }).unwrap();
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('firefox') > -1 || ua.indexOf('msie') != -1 || ua.indexOf('trident') != -1 || ua.indexOf('edge') != -1) { //firefox fix
line_height = line_height + 2;
}
return line_height;
}
};
utils.eatStr.cache = {};
utils.eatStr.generateKey = function () {
return Array.prototype.join.call(arguments, '');
};
$.fn.trunk8 = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
}
else {
$.error('Method ' + method + ' does not exist on jQuery.trunk8');
}
};
/* Default trunk8 settings. */
$.fn.trunk8.defaults = {
fill: '…',
lines: 1,
side: SIDES.right,
tooltip: true,
width: WIDTH.auto,
parseHTML: false,
onTruncate: function () { }
};
}));
import { Injectable } from '@angular/core';
@Injectable()
export class ShowMoreLessConfig {
public constructor() { }
//More config options here http://jrvis.com/trunk8/?rel=github#lines
public communityPostSettings: any = {
lines: 7,
fill: '… <a id="show-more" href="javascript:void(0)">Show More</a>',
parseHTML: true,
tooltip: false,
}
public communityCommentSetting: any = {
lines: 3,
fill: '… <a id="show-more" href="javascript:void(0)">Show More</a>',
width: 210,
hideShowMore: false,
parseHTML: true,
tooltip: false
}
public checkPointPromptSetting: any = {
lines: 2,
fill: '… <a id="show-more" href="javascript:void(0)">Show More</a>',
parseHTML: true
}
private defaultSettings: any = {
lines: 2,
fill: '… <a id="show-more" href="javascript:void(0)">Show More</a>',
parseHTML: true
}
public notificationCommentSetting: any = {
lines: 4,
fill: '…',
hideShowMore:true,
parseHTML: true
}
public todoContentSettings: any = {
lines: 3,
fill: '…',
parseHTML: true,
hideShowMore: true,
tooltip: false
}
}
import { OnInit, ElementRef, AfterViewInit, Directive, Component, Input, NgZone } from '@angular/core';
export interface ShowMoreLessConfig {
lines: number,
fill: string,
parseHTML: boolean,
width: number,
tooltip: boolean,
hideShowMore: boolean
}
@Component({
selector: 'showmore-less',
template: '<div id="{{id}}" [innerHTML]="content"></div>'
})
export class ShowMoreLessDirective implements AfterViewInit {
@Input('showMoreLessConfig') settings: ShowMoreLessConfig;
@Input() content: any
private currentWidth: number;
private id: string = Math.random().toString(36).substr(2, 5);
elementRef: ElementRef;
constructor(private el: ElementRef, private zone: NgZone) {
this.elementRef = el;
}
ngOnInit() {
if (!this.el.nativeElement.getAttribute('id'))
this.el.nativeElement.setAttribute('id', this.id);
else
this.id = this.el.nativeElement.getAttribute('id')
}
ngAfterViewInit() {
let thisRef = this;
var currentSettings = {}
currentSettings=Object.assign(currentSettings, this.settings);
var nodeName = (jQuery(jQuery.parseHTML(thisRef.content))[3] != undefined) ? jQuery(jQuery.parseHTML(thisRef.content))[3].nodeName : "";
debugger;
if (nodeName == "DIV" && !this.settings.hideShowMore) {
delete currentSettings["width"];
currentSettings["fill"] = '… <a id="' + thisRef.id + '" class="more-link" href="javascript:void(0)">Show More</a>'
jQuery(thisRef.elementRef.nativeElement).find("#" + thisRef.id).trunk8(currentSettings);
}
else if ( !this.settings.hideShowMore) {
setTimeout(function () {
if (thisRef.content.indexOf("div") == -1) {
thisRef.settings.parseHTML = false;
}
else {
thisRef.settings.parseHTML = true;
}
debugger;
thisRef.settings.fill = '… <a id="' + thisRef.id + '" class="more-link" href="javascript:void(0)">Show More</a>'
jQuery(thisRef.elementRef.nativeElement).find("#" + thisRef.id).trunk8(thisRef.settings);
},500)
} else if ( this.settings.hideShowMore){
thisRef.settings.fill = '…';
jQuery(thisRef.elementRef.nativeElement).find("#" + thisRef.id).trunk8(thisRef.settings);
}
jQuery(document).on('click', '#' + thisRef.id, (event) => {
event.stopPropagation();
var parentDiv = jQuery(thisRef.elementRef.nativeElement).find("#" + thisRef.id).parent();
if (event.currentTarget.innerHTML =="Show More") {
jQuery(parentDiv.find("#" + thisRef.id)[0]).trunk8('revert');
}
return false;
});
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { ShowMoreLessDirective } from './showmoreless.directive';
@NgModule({
imports: [FormsModule, CommonModule],
declarations: [ShowMoreLessDirective],
exports: [ShowMoreLessDirective]
})
export class ShowMoreLessModule { }
import {Component, NgModule, VERSION, ChangeDetectionStrategy, ChangeDetectorRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { ShowMoreLessConfig } from './showmoreless.config';
import { ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'my-timeline',
template: `
<i>Testing truncation. Scroll to bottom to see results after clicking button</i>
<h2> Case 1 html with @ mentions</h2>
<div #postcontent1 id="postcontentdiv" contenteditable="true" [textContent]="model" (input)="model=$event.target.textContent"></div>
<input type="button" value="Truncate" id="case1" (click)="saveHTML(model,$event)" />
<hr>
<div class="user-activity-box">
<div class="user-activity-post">
<div class="user-info user-info-post">
<div class="ellipsis-conatiner ellipsis-conatiner-big" *ngIf="true">
<showmore-less *ngIf="rerender" class="edit-post-content" [content]="model" [showMoreLessConfig]="communityPostSettings"></showmore-less>
</div>
</div>
</div>
</div>
`
})
export class TimeLineComponent {
private communityPostSettings: any;
case1Visible=false;
case2Visible=false;
case3Visible=false;
mytext1=`
<span class="mention-no-data"></span>
<span class="mention-parent">
<span class="mention-parent-inner 8_1503071811214_m_p_582893">
<span class="mention-hide">@</span>Abide Masaraure </span>
<span class="mention-parent-close-btn no-css-edit-post">✕</span></span>
<span class="mention-no-data"> 12222222222222222222222222222222222222222222222222222 </span>
<span class="mention-parent"><span class="mention-parent-inner 9_1503071860999_m_p_582893">
<span class="mention-hide">@</span>Abide Masaraure </span><span class="mention-parent-close-btn no-css-edit-post">✕</span>
</span>
<span class="mention-no-data"> 444444444444444444444444444444444444444</span>
<div class="mention-no-data"><span class="mention-no-data">5555555555566666666666666666</span>
<span class="mention-parent"><span class="mention-parent-inner 10_1503071871989_m_p_582893">
<span class="mention-hide">@</span>Abide Masaraure </span><span class="mention-parent-close-btn no-css-edit-post">✕</span>
</span></div><div class="mention-no-data">455555555555555555555555<br><span class="mention-parent">
<span class="mention-parent-inner 11_1503071881582_m_p_582893"><span class="mention-hide">@</span>Abide Masaraure </span>
<span class="mention-parent-close-btn no-css-edit-post">✕</span></span></div><span class="mention-no-data"> </span>
<span class="mention-no-data"> </span><div class="mention-no-data"><span class="mention-no-data">555555555555555555555555555</span></div>
<div class="mention-no-data"><span class="mention-no-data">666666666666666</span></div><div class="mention-no-data">
<span class="mention-no-data">677777777777777777777777</span></div>
`
mytext2=`<span><span class="mention-no-data"></span><span class="mention-parent"><span class="mention-parent-inner 2_1501787807503_m_p_582893"><span class="mention-hide">@</span>Abide Masaraure </span><span class="mention-parent-close-btn no-css-edit-post">✕</span></span>There is a lot riding on the continued global expansion, <a href=\"test\">perhaps</a> everything for investors,” Dave Lafferty, chief market strategist at Natixis Global Asset Management, wrote in a client note. “Investors should remain hyper-vigilant about the global economy and earnings. It is even more important today as neither central bankers nor troublesome valuations are an investor’s friends.`
mytext3=`<span class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 2_1502732299144_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732299176" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 3_1502732302033_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732302037" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 4_1502732303810_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732303814" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 5_1502732305366_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732305373" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 6_1502732307481_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732307489" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 7_1502732314104_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732314114" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 8_1502732316234_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732316245" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 9_1502732318538_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732318551" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 10_1502732320788_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732320802" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 11_1502732324648_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732324665" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 12_1502732327248_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732327265" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 13_1502732329334_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732329354" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 14_1502732330831_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732330850" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 15_1502732333002_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732333023" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 16_1502732335474_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732335493" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 17_1502732337528_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732337551" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 18_1502732339525_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732339546" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 19_1502732341585_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732341615" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 20_1502732343796_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732343821" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 21_1502732345795_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732345824" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 22_1502732348306_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732348336" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 23_1502732350509_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732350537" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 24_1502732352670_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732352700" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 25_1502732355076_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732355109" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 26_1502732356648_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732356680" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 27_1502732359324_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732359363" class="mention-no-data"> </span><span class="mention-parent" unselectable="on" contenteditable="false"><span unselectable="on" contenteditable="false" class="mention-parent-inner 28_1502732361478_m_p_591617"><span contenteditable="true" class="mention-hide">@</span>teacherAbide Masaraure </span><span onclick="this.parentNode.parentNode.removeChild(this.parentNode);" unselectable="on" contenteditable="false" class="mention-parent-close-btn no-css-edit-post">✕</span></span><span id="1502732361513" class="mention-no-data"> </span>
`
rerender=true;
constructor(private _showMoreLess: ShowMoreLessConfig,private ref: ChangeDetectorRef){
}
ngOnInit() {
this.communityPostSettings = this._showMoreLess.communityPostSettings;
this.model=this.mytext1;
}
saveHTML(model,event){
this.rerender=false;
debugger;
switch(event.target.id) {
case "case1": {
debugger;
this.case1Visible=true;
this.mytext1=this.model;
this.ref.detectChanges();
this.rerender = true;
break;
}
}
}
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TimeLineComponent } from './timeline.component';
import {ShowMoreLessModule} from './showmoreless.module';
import {ShowMoreLessConfig} from './showmoreless.config';
@NgModule({
imports: [FormsModule, CommonModule,ShowMoreLessModule],
declarations: [TimeLineComponent],
exports: [TimeLineComponent],
providers: [ShowMoreLessConfig],
})
export class TimeLineModule { }