mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-1586] Added files for core services (#2529)
* [ADF-1586] Added files for core services * [ADF-1586] Fixed syntax error in example
This commit is contained in:
committed by
Popovics András
parent
f33284a2e3
commit
553c71c958
@@ -227,6 +227,7 @@ for more information about installing and using the source code.
|
|||||||
### Other classes and interfaces
|
### Other classes and interfaces
|
||||||
|
|
||||||
- [FormFieldValidator interface](FormFieldValidator.md)
|
- [FormFieldValidator interface](FormFieldValidator.md)
|
||||||
|
|
||||||
[(Back to Contents)](#contents)
|
[(Back to Contents)](#contents)
|
||||||
|
|
||||||
## ADF Processlist
|
## ADF Processlist
|
||||||
@@ -327,6 +328,7 @@ for more information about installing and using the source code.
|
|||||||
### Directives
|
### Directives
|
||||||
|
|
||||||
- [Context menu directive](context-menu.directive.md)
|
- [Context menu directive](context-menu.directive.md)
|
||||||
|
- [Highlight directive](highlight.directive.md)
|
||||||
- [Logout directive](logout.directive.md)
|
- [Logout directive](logout.directive.md)
|
||||||
- [Node delete directive](node-delete.directive.md)
|
- [Node delete directive](node-delete.directive.md)
|
||||||
- [Node favorite directive](node-favorite.directive.md)
|
- [Node favorite directive](node-favorite.directive.md)
|
||||||
@@ -334,14 +336,13 @@ for more information about installing and using the source code.
|
|||||||
- [Node restore directive](node-restore.directive.md)
|
- [Node restore directive](node-restore.directive.md)
|
||||||
- [Upload directive](upload.directive.md)
|
- [Upload directive](upload.directive.md)
|
||||||
- [*Card view content proxy directive](../ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts)
|
- [*Card view content proxy directive](../ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts)
|
||||||
- [*Highlight directive](../ng2-components/ng2-alfresco-core/src/directives/highlight.directive.ts)
|
|
||||||
|
|
||||||
### Pipes
|
### Pipes
|
||||||
|
|
||||||
- [Node name tooltip pipe](node-name-tooltip.pipe.md)
|
- [Node name tooltip pipe](node-name-tooltip.pipe.md)
|
||||||
|
- [Text highlight pipe](text-highlight.pipe.md)
|
||||||
- [*File size pipe](../ng2-components/ng2-alfresco-core/src/pipes/file-size.pipe.ts)
|
- [*File size pipe](../ng2-components/ng2-alfresco-core/src/pipes/file-size.pipe.ts)
|
||||||
- [*Mime type icon pipe](../ng2-components/ng2-alfresco-core/src/pipes/mime-type-icon.pipe.ts)
|
- [*Mime type icon pipe](../ng2-components/ng2-alfresco-core/src/pipes/mime-type-icon.pipe.ts)
|
||||||
- [*Text highlight pipe](../ng2-components/ng2-alfresco-core/src/pipes/text-highlight.pipe.ts)
|
|
||||||
- [*Time ago pipe](../ng2-components/ng2-alfresco-core/src/pipes/time-ago.pipe.ts)
|
- [*Time ago pipe](../ng2-components/ng2-alfresco-core/src/pipes/time-ago.pipe.ts)
|
||||||
- [*User initial pipe](../ng2-components/ng2-alfresco-core/src/pipes/user-initial.pipe.ts)
|
- [*User initial pipe](../ng2-components/ng2-alfresco-core/src/pipes/user-initial.pipe.ts)
|
||||||
|
|
||||||
@@ -351,6 +352,8 @@ for more information about installing and using the source code.
|
|||||||
- [App config service](app-config.service.md)
|
- [App config service](app-config.service.md)
|
||||||
- [Authentication service](authentication.service.md)
|
- [Authentication service](authentication.service.md)
|
||||||
- [Card view update service](card-view-update.service.md)
|
- [Card view update service](card-view-update.service.md)
|
||||||
|
- [Highlight transform service](highlight-transform.service.md)
|
||||||
|
- [Log service](log.service.md)
|
||||||
- [Notification service](notification.service.md)
|
- [Notification service](notification.service.md)
|
||||||
- [Renditions service](renditions.service.md)
|
- [Renditions service](renditions.service.md)
|
||||||
- [Translation service](translation.service.md)
|
- [Translation service](translation.service.md)
|
||||||
@@ -369,8 +372,6 @@ for more information about installing and using the source code.
|
|||||||
- [*Deleted nodes api service](../ng2-components/ng2-alfresco-core/src/services/deleted-nodes-api.service.ts)
|
- [*Deleted nodes api service](../ng2-components/ng2-alfresco-core/src/services/deleted-nodes-api.service.ts)
|
||||||
- [*Discovery api service](../ng2-components/ng2-alfresco-core/src/services/discovery-api.service.ts)
|
- [*Discovery api service](../ng2-components/ng2-alfresco-core/src/services/discovery-api.service.ts)
|
||||||
- [*Favorites api service](../ng2-components/ng2-alfresco-core/src/services/favorites-api.service.ts)
|
- [*Favorites api service](../ng2-components/ng2-alfresco-core/src/services/favorites-api.service.ts)
|
||||||
- [*Highlight transform service](../ng2-components/ng2-alfresco-core/src/services/highlight-transform.service.ts)
|
|
||||||
- [Log service](log.service.md)
|
|
||||||
- [*Nodes api service](../ng2-components/ng2-alfresco-core/src/services/nodes-api.service.ts)
|
- [*Nodes api service](../ng2-components/ng2-alfresco-core/src/services/nodes-api.service.ts)
|
||||||
- [*Page title service](../ng2-components/ng2-alfresco-core/src/services/page-title.service.ts)
|
- [*Page title service](../ng2-components/ng2-alfresco-core/src/services/page-title.service.ts)
|
||||||
- [*People content service](../ng2-components/ng2-alfresco-core/src/services/people-content.service.ts)
|
- [*People content service](../ng2-components/ng2-alfresco-core/src/services/people-content.service.ts)
|
||||||
@@ -590,3 +591,5 @@ for more information about installing and using the source code.
|
|||||||
|
|
||||||
- [Webscript component](webscript.component.md)
|
- [Webscript component](webscript.component.md)
|
||||||
<!-- ng2-alfresco-webscript end -->
|
<!-- ng2-alfresco-webscript end -->
|
||||||
|
|
||||||
|
[(Back to Contents)](#contents)
|
45
docs/highlight-transform.service.md
Normal file
45
docs/highlight-transform.service.md
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
# Highlight Transform service
|
||||||
|
|
||||||
|
Adds HTML to a string to highlight chosen sections.
|
||||||
|
|
||||||
|
## Methods
|
||||||
|
|
||||||
|
`public highlight(text: string, search: string, wrapperClass: string = 'highlight'): HightlightTransformResult`<br/>
|
||||||
|
Searches for `search` string(s) within `text` and highlights all occurrences.
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
A typical use case for this service is to display the results from a search engine.
|
||||||
|
An excerpt of a retrieved document can be shown with the matching search terms
|
||||||
|
highlighted to indicate where they were found.
|
||||||
|
|
||||||
|
The service works by adding HTML <span> elements around all sections of text
|
||||||
|
that match the `search` string. You can specify multiple search strings at once by
|
||||||
|
separating them with spaces, so passing "Apple Banana Cherry" in `search` will
|
||||||
|
highlight any of those words individually. The <span> element includes a
|
||||||
|
`class` attribute which defaults to "highlight" but you can pass any class name
|
||||||
|
you like using the `wrapperClass` parameter.
|
||||||
|
|
||||||
|
The resulting text with HTML highlighting is returned within a `HightlightTransformResult`
|
||||||
|
object:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
interface HightlightTransformResult {
|
||||||
|
text: string;
|
||||||
|
changed: boolean;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
The `changed` flag will be false if the search string was not found (ie, no highlighting
|
||||||
|
took place) and true otherwise.
|
||||||
|
|
||||||
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Text highlight pipe](text-highlight.pipe.md)
|
||||||
|
- [Highlight directive](highlight.directive.md)
|
||||||
|
<!-- seealso end -->
|
||||||
|
|
||||||
|
|
||||||
|
|
60
docs/highlight.directive.md
Normal file
60
docs/highlight.directive.md
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
# Highlight directive
|
||||||
|
|
||||||
|
Adds highlighting to selected sections of an HTML element's content.
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<div
|
||||||
|
[adf-highlight]="dance"
|
||||||
|
adf-highlight-selector=".highlightable"
|
||||||
|
adf-highlight-class="greenHighlight"
|
||||||
|
>
|
||||||
|
<div class="highlightable">You can dance if you want to</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
Add `adf-highlight` with a search term to an element to highlight occurrences
|
||||||
|
of that term in its content. For example:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<div [adf-highlight]="'dance'" adf-highlight-selector=".highlightable">
|
||||||
|
<div class="highlightable">
|
||||||
|
You can dance if you want to
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
...will result in the word "dance" being highlighted. Note that you must also
|
||||||
|
specify `adf-highlight-selector`, a CSS selector that specifies which
|
||||||
|
elements can have their contents highlighted.
|
||||||
|
|
||||||
|
If the search string contain spaces then each section between the spaces will
|
||||||
|
be treated as a separate item to highlight. For example, you could use this to
|
||||||
|
highlight all occurrences of words in a list.
|
||||||
|
|
||||||
|
The highlighting works by adding an HTML <span> element around the
|
||||||
|
selected text. The <span> includes a CSS class; this defaults to
|
||||||
|
"adf-highlight" but you can supply your own class using the `adf-highlight-class`
|
||||||
|
property:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<div
|
||||||
|
[adf-highlight]="'dance'"
|
||||||
|
adf-highlight-selector=".highlightable"
|
||||||
|
adf-highlight-class="myGreenHighlight">
|
||||||
|
<div class="highlightable">
|
||||||
|
You can dance if you want to
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Text highlight pipe](text-highlight.pipe.md)
|
||||||
|
- [Highlight transform service](highlight-transform.service.md)
|
||||||
|
<!-- seealso end -->
|
@@ -49,6 +49,8 @@
|
|||||||
],
|
],
|
||||||
"form.service": [],
|
"form.service": [],
|
||||||
"FormFieldValidator": [],
|
"FormFieldValidator": [],
|
||||||
|
"highlight.directive": ["text-highlight.pipe"],
|
||||||
|
"highlight-transform.service": ["text-highlight.pipe", "highlight.directive"],
|
||||||
"info-drawer.component": ["info-drawer-layout.component"],
|
"info-drawer.component": ["info-drawer-layout.component"],
|
||||||
"info-drawer-layout.component": [],
|
"info-drawer-layout.component": [],
|
||||||
"like.component": ["rating.component"],
|
"like.component": ["rating.component"],
|
||||||
@@ -87,6 +89,7 @@
|
|||||||
"task-filters.component": [],
|
"task-filters.component": [],
|
||||||
"task-header.component": [],
|
"task-header.component": [],
|
||||||
"task-list.component": [],
|
"task-list.component": [],
|
||||||
|
"text-highlight.pipe": [],
|
||||||
"theming": [],
|
"theming": [],
|
||||||
"toolbar-divider.component": [],
|
"toolbar-divider.component": [],
|
||||||
"toolbar-title.component": [],
|
"toolbar-title.component": [],
|
||||||
|
26
docs/text-highlight.pipe.md
Normal file
26
docs/text-highlight.pipe.md
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
# Text Highlight pipe
|
||||||
|
|
||||||
|
Adds highlighting to words or sections of text that match a search string.
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<div>
|
||||||
|
Some rude words have been detected in your summary: {{ summary | highlight:rudeWordList }}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Details
|
||||||
|
|
||||||
|
The pipe's parameter is a string to search for in the text. Any occurrences of the string will
|
||||||
|
be highlighted with added HTML (see the
|
||||||
|
[Highlight Transform service](highlight-transform.service.md) for more information about how
|
||||||
|
this is implemented). The parameter can contain spaces, in which case each separate "word" in the string will be highlighted individually.
|
||||||
|
|
||||||
|
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
|
||||||
|
<!-- seealso start -->
|
||||||
|
## See also
|
||||||
|
|
||||||
|
- [Highlight directive](highlight.directive.md)
|
||||||
|
- [Highlight transform service](highlight-transform.service.md)
|
||||||
|
<!-- seealso end -->
|
Reference in New Issue
Block a user