ngx-truncate-text
Version:
This module is for shortening the text and also includes some useful features for text manipulation like finding hashtags, highlight words with favorite color and so on after version 1.0.0.
354 lines (347 loc) • 13.7 kB
JavaScript
import { Injectable, Directive, ElementRef, Input, Renderer2, NgModule } from '@angular/core';
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-truncate.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxTruncateService {
constructor() { }
/**
* check the word cut
* @param {?} number
* @param {?} text
* @return {?}
*/
checkWordCut(number, text) {
/** @type {?} */
let i = 0;
for (i = number; i < text.length; i++) {
if (text[i] == ' ')
break;
}
return text.substring(0, i);
}
/**
* find hashtag from text
* @param {?} text
* @return {?}
*/
findHashtag(text) {
//text = text.replace(new RegExp(pattern, 'ugmi'), match => {
text = text.replace(/(^|\s)(#[\p{Pc}\p{N}\p{L}\u200cÀ-ÖØ-öø-ʸ(_)]+)/ugmi, (/**
* @param {?} match
* @return {?}
*/
(match) => {
return `<span class="hashtag" style="color:#1b95e0">${match}</span>`;
}));
return text;
}
/**
* check conditions and return text with them
* @param {?} text
* @param {?} number
* @param {?=} completeWord
* @param {?=} hashtag
* @return {?}
*/
applyCondition(text, number, completeWord = false, hashtag = false) {
/** @type {?} */
let manipulatedText = "";
if (completeWord && hashtag) {
/** @type {?} */
const temp = this.checkWordCut(number, text);
manipulatedText = this.findHashtag(temp);
}
else if (completeWord) {
manipulatedText = this.checkWordCut(number, text);
}
else if (hashtag) {
/** @type {?} */
const temp = text.substring(0, number);
manipulatedText = this.findHashtag(temp);
}
else {
manipulatedText = text.substring(0, number);
}
return manipulatedText;
}
/**
* رنگ کردن کلمات داده شده در متن
* @param {?} content
* @param {?} highlightCondition
* @param {?} highlightQuery
* @return {?}
*/
highlight(content, highlightCondition, highlightQuery) {
//روی دایرکتیو تعریف نشود خود متن را بر می کرداند highlightList اگر ورودی
if (!highlightQuery.length) {
return content;
}
// دقیقا یافت می شود highlightList روی دایرکتیو تعریف نشود کلمات داده شده در highlightCondition اگر ورودی
if (highlightCondition == "exactly") {
for (let q of highlightQuery) {
/** @type {?} */
let pattern = '';
//به صورت آبجکت باشند highlightList اگر کلمات داده شده در
if (q.hasOwnProperty('name')) {
pattern = "(^|(?<!\\p{L}))(" + q.name + ")(?!(\\p{L}))";
content = content.replace(new RegExp(pattern, 'gmu'), (/**
* @param {?} match
* @return {?}
*/
match => {
return `<span style="background:${q.color}">${match}</span>`;
}));
}
//به صورت رشته باشند highlightList اگر کلمات داده شده در
else {
pattern = "(^|(?<!\\p{L}))(" + q + ")(?!(\\p{L}))";
content = content.replace(new RegExp(pattern, 'gmu'), (/**
* @param {?} match
* @return {?}
*/
match => {
return `<span style="background:yellow">${match}</span>`;
}));
}
}
return content;
}
//هر مشابهی از کلمات در متن پیدا شده و رنگ می شوند
else {
for (let q of highlightQuery) {
//به صورت آبجکت باشند highlightList اگر کلمات داده شده در
if (q.hasOwnProperty('name')) {
/** @type {?} */
let words = content.match(new RegExp(q.name, "gmi"));
if (words)
for (const word of words) {
content = content.replace(new RegExp(q.name, "gmi"), `<span style="background-color:${q.color}">${word}</span>`);
}
}
//به صورت رشته باشند highlightList اگر کلمات داده شده در
else {
/** @type {?} */
let words = content.match(new RegExp(q, "gmi"));
if (words)
for (const word of words) {
content = content.replace(new RegExp(q, "gmi"), `<span style="background-color:yellow">${word}</span>`);
}
}
}
return content;
}
}
}
NgxTruncateService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
NgxTruncateService.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-truncate-text.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxTruncateTextDirective {
/**
* @param {?} elRef
* @param {?} renderer
* @param {?} trunService
*/
constructor(elRef, renderer, trunService) {
this.elRef = elRef;
this.renderer = renderer;
this.trunService = trunService;
this._highlightQuery = [];
this.replace = false;
((/** @type {?} */ (window))).trun = this;
// elRef will get a reference to the element where
// the directive is placed
this.element = elRef.nativeElement;
}
/**
* @param {?} list
* @return {?}
*/
set highlightList(list) {
this._highlightQuery = JSON.parse(list);
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
//. ارسال می شوند highlightList نزولی کردن کلمات بر اساس طول آنها، کلماتی که در
//.ابتدا باید کلمات با طول بیشتر را پیدا کند replace به دلیل اینکه تابع
this._highlightQuery.sort((/**
* @param {?} a
* @param {?} b
* @return {?}
*/
(a, b) => {
if (a.hasOwnProperty('name'))
return b.name.length - a.name.length;
}));
if ((changes && changes.content && changes.content.previousValue)) {
this.fill(changes.content.currentValue);
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.fill(this.element.innerHTML);
}
/**
* @param {?} text
* @return {?}
*/
fill(text) {
if (!this.hasLiteral)
text = text.replace(/(\r\n\t|\n|\r\t)/gm, ' ');
this.text = text;
/** @type {?} */
let remainText = "";
if (text.length > this.number) {
remainText = this.trunService.applyCondition(text, this.number, this.completeWord, this.hashtag);
remainText = this.trunService.highlight(remainText, this.highlightCondition, this._highlightQuery);
this.replace = true;
this.element.innerHTML = remainText + ' ... ';
/** @type {?} */
const span = this.renderer.createElement('span');
span.innerHTML = this.more;
this.renderer.setStyle(span, 'color', '#ff00ff');
this.renderer.setStyle(span, 'cursor', 'pointer');
this.renderer.addClass(span, 'toggleText');
this.element.innerHTML = remainText + "... ";
this.renderer.listen(span, 'click', (/**
* @param {?} event
* @return {?}
*/
(event) => this.replace === true ? this.showFullText(event) : this.hideSomeText(event)));
this.element.appendChild(span);
}
else {
text = this.hashtag ? this.trunService.findHashtag(text) : text;
text = this.trunService.highlight(text, this.highlightCondition, this._highlightQuery);
this.element.innerHTML = text;
}
//اعمال شود این کلاس قرار داده می شود html در \n برای اینکه کاراکتر های
if (this.hasLiteral)
this.element.style.whiteSpace = 'pre-line';
}
/*
* نمایش کامل متن
* @param mouseDown {mousedown} mouse event
*/
/**
* @param {?} mouseDown
* @return {?}
*/
showFullText(mouseDown) {
/** @type {?} */
const span = this.renderer.createElement('span');
span.innerHTML = " " + this.less;
this.renderer.setStyle(span, 'color', '#ff00ff');
this.renderer.setStyle(span, 'cursor', 'pointer');
this.renderer.addClass(span, 'toggleText');
/** @type {?} */
let fullText = this.hashtag ? this.trunService.findHashtag(this.text) : this.text;
this.element.innerHTML = this.trunService.highlight(fullText, this.highlightCondition, this._highlightQuery);
//اعمال شود این کلاس قرار داده می شود html در \n برای اینکه کاراکتر های
if (this.hasLiteral)
this.element.style.whiteSpace = 'pre-line';
this.renderer.listen(span, 'click', (/**
* @param {?} event
* @return {?}
*/
(event) => this.hideSomeText(event)));
this.element.appendChild(span);
// جلوگیری از کلیک روی عنصر پدر
mouseDown.stopPropagation();
this.replace = false;
}
/*
* نمایش قسمتی از متن بر اساس تعداد کاراکتر خواسته شده
* @param mouseDown {mousedown} mouse event
*/
/**
* @param {?} mouseDown
* @return {?}
*/
hideSomeText(mouseDown) {
/** @type {?} */
const temp = this.trunService.applyCondition(this.text, this.number, this.completeWord, this.hashtag);
/** @type {?} */
const remainText = this.trunService.highlight(temp, this.highlightCondition, this._highlightQuery);
/** @type {?} */
const span = this.renderer.createElement('span');
this.renderer.setStyle(span, 'color', '#ff00ff');
this.renderer.setStyle(span, 'cursor', 'pointer');
this.renderer.addClass(span, 'toggleText');
span.innerHTML = this.more;
this.element.innerHTML = remainText + ' ... ';
//اعمال شود این کلاس قرار داده میشود html در n \برای اینکه کاراکتر های
if (this.hasLiteral)
this.element.style.whiteSpace = 'pre-line';
this.renderer.listen(span, 'click', (/**
* @param {?} event
* @return {?}
*/
(event) => this.showFullText(event)));
this.element.appendChild(span);
// جلوگیری از کلیک روی عنصر پدر
mouseDown.stopPropagation();
this.replace = true;
}
}
NgxTruncateTextDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxTruncateText]'
},] }
];
/** @nocollapse */
NgxTruncateTextDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: NgxTruncateService }
];
NgxTruncateTextDirective.propDecorators = {
more: [{ type: Input }],
less: [{ type: Input }],
number: [{ type: Input }],
completeWord: [{ type: Input }],
hashtag: [{ type: Input }],
hasLiteral: [{ type: Input }],
highlightCondition: [{ type: Input }],
highlightList: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-truncate-text.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxTruncateTextModule {
}
NgxTruncateTextModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgxTruncateTextDirective],
imports: [],
exports: [NgxTruncateTextDirective],
providers: [NgxTruncateService]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-truncate-text.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgxTruncateTextModule, NgxTruncateTextDirective, NgxTruncateService as ɵa };
//# sourceMappingURL=ngx-truncate-text.js.map