inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2135] Updated tables of contents and tools (#2820)

Browse Source
This commit is contained in:
Andy Stark
2018-01-11 10:15:00 +00:00
committed by Eugenio Romano
parent 9e706d68e4
commit 994041fb23
23 changed files with 353 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/README.md
View File

@@ -2,8 +2,9 @@
Below is an index of the documentation for ADF. The [User Guide](#user-guide) Below is an index of the documentation for ADF. The [User Guide](#user-guide)
section discusses particular techniques in depth. The other sections are references for the ADF section discusses particular techniques in depth. The other sections are references for the ADF
libraries. Items marked with an asterisk (\*) do not currently have documentation - the link leads libraries. Click the name of an item to see its documentation or click the source link to see
to the appropriate source file. its main source file. Note that ADF is developed continuously, so the source files for some items
may be listed here before their documentation is available.
## Contents ## Contents
@@ -61,13 +62,13 @@ for more information about installing and using the source code.
| [Toolbar title component](toolbar-title.component.md) | Supplies custom HTML to be included in a Toolbar component title. | [Source](../lib/core/toolbar/toolbar-title.component.ts) | | [Toolbar title component](toolbar-title.component.md) | Supplies custom HTML to be included in a Toolbar component title. | [Source](../lib/core/toolbar/toolbar-title.component.ts) |
| [Toolbar component](toolbar.component.md) | Simple container for headers, titles, actions and breadcrumbs. | [Source](../lib/core/toolbar/toolbar.component.ts) | | [Toolbar component](toolbar.component.md) | Simple container for headers, titles, actions and breadcrumbs. | [Source](../lib/core/toolbar/toolbar.component.ts) |
| [User info component](user-info.component.md) | Shows user information. | [Source](../lib/core/userinfo/components/user-info.component.ts) | | [User info component](user-info.component.md) | Shows user information. | [Source](../lib/core/userinfo/components/user-info.component.ts) |
| [Viewer component](viewer.component.md) | See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/) | [Source](../lib/core/viewer/components/viewer.component.ts) | | [Viewer component](viewer.component.md) | Displays content from an ACS repository. | [Source](../lib/core/viewer/components/viewer.component.ts) |
## Directives ## Directives
| Name | Description | Source link | | Name | Description | Source link |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| [Context menu directive](context-menu.directive.md) | See **Demo Shell** or **DocumentList** implementation for more details and use cases. | [Source](../lib/core/context-menu/context-menu.directive.ts) | | [Context menu directive](context-menu.directive.md) | Adds a context menu to a component. | [Source](../lib/core/context-menu/context-menu.directive.ts) |
| [Highlight directive](highlight.directive.md) | Adds highlighting to selected sections of an HTML element's content. | [Source](../lib/core/directives/highlight.directive.ts) | | [Highlight directive](highlight.directive.md) | Adds highlighting to selected sections of an HTML element's content. | [Source](../lib/core/directives/highlight.directive.ts) |
| [Logout directive](logout.directive.md) | Logs the user out when the decorated element is clicked. | [Source](../lib/core/directives/logout.directive.ts) | | [Logout directive](logout.directive.md) | Logs the user out when the decorated element is clicked. | [Source](../lib/core/directives/logout.directive.ts) |
| [Node delete directive](node-delete.directive.md) | Deletes multiple files and folders. | [Source](../lib/core/directives/node-delete.directive.ts) | | [Node delete directive](node-delete.directive.md) | Deletes multiple files and folders. | [Source](../lib/core/directives/node-delete.directive.ts) |
@@ -93,7 +94,7 @@ for more information about installing and using the source code.
| --------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------- | | --------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| [File size pipe](file-size.pipe.md) | Converts a number of bytes to the equivalent in KB, MB, etc. | [Source](../lib/core/pipes/file-size.pipe.ts) | | [File size pipe](file-size.pipe.md) | Converts a number of bytes to the equivalent in KB, MB, etc. | [Source](../lib/core/pipes/file-size.pipe.ts) |
| [Mime type icon pipe](mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../lib/core/pipes/mime-type-icon.pipe.ts) | | [Mime type icon pipe](mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../lib/core/pipes/mime-type-icon.pipe.ts) |
| [Node name tooltip pipe](node-name-tooltip.pipe.md) | Formats the tooltip of the underlying Node based on the following rules: | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) | | [Node name tooltip pipe](node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/core/pipes/node-name-tooltip.pipe.ts) |
| [Text highlight pipe](text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/pipes/text-highlight.pipe.ts) | | [Text highlight pipe](text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/pipes/text-highlight.pipe.ts) |
| [Time ago pipe](time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../lib/core/pipes/time-ago.pipe.ts) | | [Time ago pipe](time-ago.pipe.md) | Converts a recent past date into a number of days ago. | [Source](../lib/core/pipes/time-ago.pipe.ts) |
| [User initial pipe](user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../lib/core/pipes/user-initial.pipe.ts) | | [User initial pipe](user-initial.pipe.md) | Takes the name fields of a UserProcessModel object and extracts and formats the initials. | [Source](../lib/core/pipes/user-initial.pipe.ts) |
@@ -149,7 +150,7 @@ for more information about installing and using the source code.
### Other classes and interfaces ### Other classes and interfaces
| Name | Description | Source link | | Name | Description | Source link |
| -- | -- | -- | | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| [Data Table Adapter interface](DataTableAdapter.md) | Defines how table data is supplied to [DataTable](datatable.component.md) and [Tasklist](task-list.component.md) components. | [Source](../core/datatable/data/datatable-adapter.ts) | | [Data Table Adapter interface](DataTableAdapter.md) | Defines how table data is supplied to [DataTable](datatable.component.md) and [Tasklist](task-list.component.md) components. | [Source](../core/datatable/data/datatable-adapter.ts) |
| [Form Field Validator interface](FormFieldValidator.md) | Defines how the input fields of [ADF Form](form.component.md) and [ADF Task Details](task-details.component.md) components are validated. | [Source](../core/form/components/widgets/core/form-field-validator.ts) | | [Form Field Validator interface](FormFieldValidator.md) | Defines how the input fields of [ADF Form](form.component.md) and [ADF Task Details](task-details.component.md) components are validated. | [Source](../core/form/components/widgets/core/form-field-validator.ts) |
@@ -174,7 +175,7 @@ for more information about installing and using the source code.
| [Content action component](content-action.component.md) | Adds options to a Document List actions menu for a particular content type. | [Source](../lib/content-services/document-list/components/content-action/content-action.component.ts) | | [Content action component](content-action.component.md) | Adds options to a Document List actions menu for a particular content type. | [Source](../lib/content-services/document-list/components/content-action/content-action.component.ts) |
| [Document list component](document-list.component.md) | Displays the documents from a repository. | [Source](../lib/content-services/document-list/components/document-list.component.ts) | | [Document list component](document-list.component.md) | Displays the documents from a repository. | [Source](../lib/content-services/document-list/components/document-list.component.ts) |
| [Search control component](search-control.component.md) | Displays a input text which shows find-as-you-type suggestions. | [Source](../lib/content-services/search/components/search-control.component.ts) | | [Search control component](search-control.component.md) | Displays a input text which shows find-as-you-type suggestions. | [Source](../lib/content-services/search/components/search-control.component.ts) |
| [Search component](search.component.md) | You have to add a template that will be shown when the results are loaded. | [Source](../lib/content-services/search/components/search.component.ts) | | [Search component](search.component.md) | Searches items for supplied search terms. | [Source](../lib/content-services/search/components/search.component.ts) |
| [Sites dropdown component](sites-dropdown.component.md) | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../lib/content-services/site-dropdown/sites-dropdown.component.ts) | | [Sites dropdown component](sites-dropdown.component.md) | Displays a dropdown menu to show and interact with the sites of the current user. | [Source](../lib/content-services/site-dropdown/sites-dropdown.component.ts) |
| [Like component](like.component.md) | Allows a user to add "likes" to an item. | [Source](../lib/content-services/social/like.component.ts) | | [Like component](like.component.md) | Allows a user to add "likes" to an item. | [Source](../lib/content-services/social/like.component.ts) |
| [Rating component](rating.component.md) | Allows a user to add ratings to an item. | [Source](../lib/content-services/social/rating.component.ts) | | [Rating component](rating.component.md) | Allows a user to add ratings to an item. | [Source](../lib/content-services/social/rating.component.ts) |
@@ -186,7 +187,7 @@ for more information about installing and using the source code.
| [Upload drag area component](upload-drag-area.component.md) | Adds a drag and drop area to upload files to Alfresco. | [Source](../lib/content-services/upload/components/upload-drag-area.component.ts) | | [Upload drag area component](upload-drag-area.component.md) | Adds a drag and drop area to upload files to Alfresco. | [Source](../lib/content-services/upload/components/upload-drag-area.component.ts) |
| [Version list component](version-list.component.md) | Displays the version history of a node in a [Version Manager component](version-manager.component.md) | [Source](../lib/content-services/version-manager/version-list.component.ts) | | [Version list component](version-list.component.md) | Displays the version history of a node in a [Version Manager component](version-manager.component.md) | [Source](../lib/content-services/version-manager/version-list.component.ts) |
| [Version manager component](version-manager.component.md) | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/version-manager/version-manager.component.ts) | | [Version manager component](version-manager.component.md) | Displays the version history of a node with the ability to upload a new version. | [Source](../lib/content-services/version-manager/version-manager.component.ts) |
| [Webscript component](webscript.component.md) | Another example: | [Source](../lib/content-services/webscript/webscript.component.ts) | | [Webscript component](webscript.component.md) | Provides access to Webscript features. | [Source](../lib/content-services/webscript/webscript.component.ts) |
| _Content metadata card component_ | _Not currently documented_ | [Source](../lib/content-services/content-metadata/content-metadata-card.component.ts) | | _Content metadata card component_ | _Not currently documented_ | [Source](../lib/content-services/content-metadata/content-metadata-card.component.ts) |
| _Content metadata component_ | _Not currently documented_ | [Source](../lib/content-services/content-metadata/content-metadata.component.ts) | | _Content metadata component_ | _Not currently documented_ | [Source](../lib/content-services/content-metadata/content-metadata.component.ts) |
| _Content node selector panel component_ | _Not currently documented_ | [Source](../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) | | _Content node selector panel component_ | _Not currently documented_ | [Source](../lib/content-services/content-node-selector/content-node-selector-panel.component.ts) |

11
docs/alfresco-api.service.md
View File

@@ -2,17 +2,6 @@
Provides access to initialized **AlfrescoJSApi** instance. Provides access to initialized **AlfrescoJSApi** instance.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
```ts ```ts

11
docs/analytics-generator.component.md
View File

@@ -14,20 +14,13 @@ Generates and shows charts
### Properties ### Properties
| Name | Type | Description | | Name | Type | Description |
| --- | --- | -- | | ---- | ---- | ----------- |
| reportId | string | The report id | | reportId | string | The report id |
| reportParamQuery | ReportQuery | The object contains all the parameters that the report needs | | reportParamQuery | ReportQuery | The object contains all the parameters that the report needs |
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| success | Raised when the charts are loaded | | success | Raised when the charts are loaded |
| error | Raised when an error occurs during the loading | | error | Raised when an error occurs during the loading |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

11
docs/analytics-report-list.component.md
View File

@@ -13,7 +13,7 @@ Shows a list of all available reports
### Properties ### Properties
| Name | Type | Required | Default | Description | | Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- | | ---- | ---- | -------- | ------- | ----------- |
| appId | string | optional | | The application id | | appId | string | optional | | The application id |
| layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value | | layoutType | string | required | | Define the layout of the apps. There are two possible values: GRID or LIST. LIST is the default value |
| selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default | | selectFirst | boolean | optional | false | Change the value to true if you want to select the first item in the list as default |
@@ -21,14 +21,7 @@ Shows a list of all available reports
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| success | The event is emitted when the report list is loaded | | success | The event is emitted when the report list is loaded |
| error | The event is emitted when an error occurs during the loading | | error | The event is emitted when an error occurs during the loading |
| reportClick | The event is emitted when the report in the list is selected | | reportClick | The event is emitted when the report in the list is selected |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

11
docs/analytics.component.md
View File

@@ -16,7 +16,7 @@ Shows the charts related to the reportId passed as input
### Properties ### Properties
| Name | Type | Description | | Name | Type | Description |
| --- | --- | --- | | ---- | ---- | ----------- |
| appId | string | The application id | | appId | string | The application id |
| reportId | string | The report id | | reportId | string | The report id |
| hideParameters | boolean | Toggle the analytics parameters | | hideParameters | boolean | Toggle the analytics parameters |
@@ -36,15 +36,8 @@ You can also hide chart parameters UI by setting the `hideParameters` to `true`:
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| success | The event is emitted when the report parameters are loaded | | success | The event is emitted when the report parameters are loaded |
| error | The event is emitted when an error occurs during the loading | | error | The event is emitted when an error occurs during the loading |
| reportSaved | The event is emitted when a report is saved | | reportSaved | The event is emitted when a report is saved |
| reportDeleted | The event is emitted when a report is deleted | | reportDeleted | The event is emitted when a report is deleted |
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
<!-- seealso end -->

13
docs/app-config.service.md
View File

@@ -2,17 +2,6 @@
Supports app configuration settings, stored server side. Supports app configuration settings, stored server side.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Details](#details)
* [Variable substitution in configuration strings](#variable-substitution-in-configuration-strings)
<!-- tocstop -->
<!-- markdown-toc end -->
## Details ## Details
The `AppConfigService` service provides support for loading and accessing global application configuration settings that you store on the server side in the form of a JSON file. The `AppConfigService` service provides support for loading and accessing global application configuration settings that you store on the server side in the form of a JSON file.
@@ -102,6 +91,6 @@ The `AppConfigService` also supports a limited set of variable substitutions to
The supported variables are: The supported variables are:
| Variable name | Runtime value | | Variable name | Runtime value |
| --- | --- | | ------------- | ------------- |
| hostname | `location.hostname` | | hostname | `location.hostname` |
| port | `location.port` | | port | `location.port` |

14
docs/authentication.service.md
View File

@@ -2,18 +2,6 @@
Provides authentication for use with the Login component. Provides authentication for use with the Login component.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
**app.component.ts** **app.component.ts**
@@ -39,7 +27,7 @@ export class AppComponent {
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| onLogin | Raised when user logs in | | onLogin | Raised when user logs in |
| onLogout | Raised when user logs out | | onLogout | Raised when user logs out |

14
docs/comment-list.component.md
View File

@@ -1,9 +1,11 @@
# Comment list component # Comment list component
Shows a list of comments. Shows a list of comments.
![ADF Comment List](docassets/images/adf-comment-list.png) ![ADF Comment List](docassets/images/adf-comment-list.png)
## Basic Usage ## Basic Usage
Populate the comments in the component class: Populate the comments in the component class:
```ts ```ts
@@ -39,7 +41,6 @@ export class SomeComponent implements OnInit {
onClickCommentRow(comment: CommentProcessModel) { onClickCommentRow(comment: CommentProcessModel) {
console.log('Clicked row: ', comment); console.log('Clicked row: ', comment);
} }
``` ```
In the component template use the comment list component: In the component template use the comment list component:
@@ -54,16 +55,11 @@ In the component template use the comment list component:
### Properties ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| comments | CommentProcessModel[] | | The comments data used to populate the list | | comments | CommentProcessModel\[] | | The comments data used to populate the list |
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| clickRow | Emitted when the user clicks on one of the comment rows | | clickRow | Emitted when the user clicks on one of the comment rows |
<!-- seealso start -->
<!-- seealso end -->

35
docs/content-action.component.md
View File

@@ -4,26 +4,21 @@ Adds options to a Document List actions menu for a particular content type.
![Document Actions](docassets/images/document-actions.png) ![Document Actions](docassets/images/document-actions.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it--> ## Contents
<!-- toc -->
- [Basic Usage](#basic-usage) - [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events) - [Properties](#properties)
- [Events](#events)
- [Details](#details) - [Details](#details)
* [Built-in action examples](#built-in-action-examples)
+ [Delete - System handler combined with custom handler](#delete---system-handler-combined-with-custom-handler) - [Built-in action examples](#built-in-action-examples)
+ [Download](#download) - [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
+ [Copy and move](#copy-and-move) - [Customizing built-in actions](#customizing-built-in-actions)
* [Error, Permission and Success callbacks](#error-permission-and-success-callbacks)
* [Customizing built-in actions](#customizing-built-in-actions)
- [See also](#see-also) - [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
```html ```html
@@ -80,19 +75,19 @@ export class MyView {
### Properties ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| `target` | string | | "document" or "folder" | | `target` | string | | "document" or "folder" |
| `title` | string | | The title of the action as shown in the menu | | `title` | string | | The title of the action as shown in the menu |
| `icon` | string | | The name of the icon to display next to the menu command (can be left blank) | | `icon` | string | | The name of the icon to display next to the menu command (can be left blank) |
| `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" | | `handler` | string | | System type actions. Can be "delete", "download", "copy" or "move" |
| `permission` | string | | The name of the permission | | `permission` | string | | The name of the permission |
| `disabled` | boolean | | Is the menu item disabled? | `disabled` | boolean | | Is the menu item disabled? |
| `disableWithNoPermission` | boolean | | Should this action be disabled in the menu if the user doesn't have permission for it? | | `disableWithNoPermission` | boolean | | Should this action be disabled in the menu if the user doesn't have permission for it? |
### Events ### Events
| Name | Handler | Description | | Name | Handler | Description |
| --- | --- | --- | | ---- | ------- | ----------- |
| `execute` | All | Emitted when user clicks on the action. For combined handlers see below | | `execute` | All | Emitted when user clicks on the action. For combined handlers see below |
| `permissionEvent` | All | Emitted when a permission error happens | | `permissionEvent` | All | Emitted when a permission error happens |
| `success` | copy, move, delete | Emitted on successful action with the success string message | | `success` | copy, move, delete | Emitted on successful action with the success string message |
@@ -113,7 +108,7 @@ A number of built-in actions are defined to handle common use cases:
You can use one of the built-in handlers by assigning its name to the `handler` property. You can use one of the built-in handlers by assigning its name to the `handler` property.
(The names are case-insensitive, so `handler="download"` and `handler="DOWNLOAD"` (The names are case-insensitive, so `handler="download"` and `handler="DOWNLOAD"`
will trigger the same action.) You can also add your own handler by implementing the will trigger the same action.) You can also add your own handler by implementing the
`execute` event. Note that you can use *both* a built-in handler and your own `execute` `execute` event. Note that you can use _both_ a built-in handler and your own `execute`
function in the same action. function in the same action.
### Built-in action examples ### Built-in action examples
@@ -255,7 +250,9 @@ and override the default implementations. See the doc pages for
for details and examples. for details and examples.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js --> <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start --> <!-- seealso start -->
## See also ## See also
- [Document list component](document-list.component.md) - [Document list component](document-list.component.md)

18
docs/content.widget.md
View File

@@ -1,18 +1,6 @@
# Activiti Content Component # Activiti Content Component
The component shows the content preview. Shows the content preview.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
@@ -27,11 +15,11 @@ The component shows the content preview.
The recommended set of properties can be found in the following table: The recommended set of properties can be found in the following table:
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| contentId | string | | The content id to show. | | contentId | string | | The content id to show. |
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| contentClick | Invoked when the content is clicked. | | contentClick | Invoked when the content is clicked. |

13
docs/context-menu.directive.md
View File

@@ -1,15 +1,6 @@
# Context Menu directive # Context Menu directive
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it--> Adds a context menu to a component.
<!-- toc -->
- [Basic Usage](#basic-usage)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
@@ -48,7 +39,7 @@ export class MyComponent implements OnInit {
### Properties ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| showIcons | boolean | false | Render defined icons | | showIcons | boolean | false | Render defined icons |
## Details ## Details

32
docs/data-column.component.md
View File

@@ -2,25 +2,21 @@
Defines column properties for DataTable, Tasklist, Document List and other components. Defines column properties for DataTable, Tasklist, Document List and other components.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it--> ## Contents
<!-- toc -->
- [Basic Usage](#basic-usage) - [Basic Usage](#basic-usage)
* [Properties](#properties)
- [Properties](#properties)
- [Details](#details) - [Details](#details)
* [Automatic column header translation](#automatic-column-header-translation)
* [Custom tooltips](#custom-tooltips) - [Automatic column header translation](#automatic-column-header-translation)
* [Column Template](#column-template) - [Custom tooltips](#custom-tooltips)
* [Styling Techniques](#styling-techniques) - [Column Template](#column-template)
+ [Custom icons for selected rows](#custom-icons-for-selected-rows) - [Styling Techniques](#styling-techniques)
+ [Hiding columns on small screens](#hiding-columns-on-small-screens)
- [See also](#see-also) - [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
```html ```html
@@ -38,7 +34,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
### Properties ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` | | key | string | | Data source key, can be either column/property key like `title` or property path like `createdBy.name` |
| type | string | text | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. | | type | string | text | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize' and 'location'. |
| format | string | | Value format (if supported by components), for example format of the date | | format | string | | Value format (if supported by components), for example format of the date |
@@ -105,7 +101,7 @@ You can provide custom column/cell templates that may contain other Angular comp
Every cell in the DataTable component is bound to the dynamic data context containing the following properties: Every cell in the DataTable component is bound to the dynamic data context containing the following properties:
| Name | Type | Description | | Name | Type | Description |
| --- | --- | --- | | ---- | ---- | ----------- |
| data | [DataTableAdapter](DataTableAdapter.md) | Data adapter instance. | | data | [DataTableAdapter](DataTableAdapter.md) | Data adapter instance. |
| row | [DataRow](DataTableAdapter.md) | Current data row instance. | | row | [DataRow](DataTableAdapter.md) | Current data row instance. |
| col | [DataColumn](DataTableAdapter.md) | Current data column instance. | | col | [DataColumn](DataTableAdapter.md) | Current data column instance. |
@@ -145,7 +141,7 @@ You may want using **row** api to get raw value access.
</data-column> </data-column>
``` ```
Use **data** api to get values with post-processing, like datetime/icon conversion._ Use **data** api to get values with post-processing, like datetime/icon conversion.\_
In the Example below we will prepend `Hi!` to each file and folder name in the list: In the Example below we will prepend `Hi!` to each file and folder name in the list:
@@ -272,7 +268,9 @@ Now you can declare columns and assign `desktop-only` class where needed:
![Responsive Mobile](docassets/images/responsive-mobile.png) ![Responsive Mobile](docassets/images/responsive-mobile.png)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js --> <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start --> <!-- seealso start -->
## See also ## See also
- [Document list component](document-list.component.md) - [Document list component](document-list.component.md)

52
docs/datatable.component.md
View File

@@ -6,32 +6,24 @@ Displays data as a table with customizable columns and presentation.
See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/) See it live: [DataTable Quickstart](https://embed.plnkr.co/80qr4YFBeHjLMdAV0F6l/)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it--> ## Contents
<!-- toc -->
- [Basic usage](#basic-usage) - [Basic usage](#basic-usage)
* [Properties](#properties)
* [Events](#events) - [Properties](#properties)
- [Events](#events)
- [Details](#details) - [Details](#details)
* [Supplying data for the table](#supplying-data-for-the-table)
* [Customizing columns](#customizing-columns) - [Supplying data for the table](#supplying-data-for-the-table)
* [DataTable DOM Events](#datatable-dom-events) - [Customizing columns](#customizing-columns)
* [Custom Empty content template](#custom-empty-content-template) - [DataTable DOM Events](#datatable-dom-events)
* [Loading content template](#loading-content-template) - [Custom Empty content template](#custom-empty-content-template)
* [Events](#events-1) - [Loading content template](#loading-content-template)
+ [row-keyup DOM event](#row-keyup-dom-event) - [Events](#events-1)
+ [rowClick event](#rowclick-event)
+ [rowDblClick event](#rowdblclick-event)
+ [showRowContextMenu event](#showrowcontextmenu-event)
+ [showRowActionsMenu event](#showrowactionsmenu-event)
+ [executeRowAction event](#executerowaction-event)
- [See also](#see-also) - [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage ## Basic usage
**app.component.html** **app.component.html**
@@ -127,12 +119,12 @@ export class DataTableDemo {
### Properties ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. | | selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples | | rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
| rowStyleClass | string | | The CSS class to apply to every row | | rowStyleClass | string | | The CSS class to apply to every row |
| data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source | | data | DataTableAdapter | instance of **ObjectDataTableAdapter** | data source |
| rows | Object[] | [] | The rows that the datatable should show | | rows | Object\[] | \[] | The rows that the datatable should show |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row | | multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| actions | boolean | false | Toggles data actions column | | actions | boolean | false | Toggles data actions column |
| actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. | | actionsPosition | string (left\|right) | right | Position of the actions dropdown menu. |
@@ -141,12 +133,12 @@ export class DataTableDemo {
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) | | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template | | loading | boolean | false | Flag that indicates if the datatable is in loading state and needs to show the loading template. Read the documentation above to see how to configure a loading template |
| showHeader | boolean | true | Toggles header visibility | | showHeader | boolean | true | Toggles header visibility |
| selection | DataRow[] | [] | Contains selected rows | | selection | DataRow\[] | \[] | Contains selected rows |
### Events ### Events
| Name | Description | Name | Description |
| --- | --- | | ---- | ----------- |
| [rowClick](#rowclick-event) | Emitted when user clicks the row | | [rowClick](#rowclick-event) | Emitted when user clicks the row |
| [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row | | [rowDblClick](#rowdblclick-event) | Emitted when user double-clicks the row |
| [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row | | [showRowContextMenu](#showrowcontextmenu-event) | Emitted before context menu is displayed for a row |
@@ -174,7 +166,7 @@ Below are the DOM events raised by DataTable component.
These events bubble up the component tree and can be handled by any parent component. These events bubble up the component tree and can be handled by any parent component.
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| row-click | Raised when user clicks a row | | row-click | Raised when user clicks a row |
| row-dblclick | Raised when user double-clicks a row | | row-dblclick | Raised when user double-clicks a row |
| row-select | Raised after user selects a row | | row-select | Raised after user selects a row |
@@ -250,8 +242,8 @@ You can use any HTML layout or Angular component as a content of the empty templ
</adf-datatable> </adf-datatable>
``` ```
| Name | Type | Default | Description | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| emptyListImageUrl | String | empty_doc_lib.svg | The default image used as background | | emptyListImageUrl | String | empty_doc_lib.svg | The default image used as background |
| emptyMsg | String | This list is empty | The default title message | | emptyMsg | String | This list is empty | The default title message |
| dragDropMsg | String | Drag and drop | The default drag and drop message | | dragDropMsg | String | Drag and drop | The default drag and drop message |
@@ -462,7 +454,9 @@ where you can handle the process, inspect the action payload and all custom prop
and do corresponding actions. and do corresponding actions.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js --> <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start --> <!-- seealso start -->
## See also ## See also
- [Data column component](data-column.component.md) - [Data column component](data-column.component.md)

75
docs/document-list.component.md
View File

@@ -4,38 +4,36 @@ Displays the documents from a repository.
![Custom columns](docassets/images/custom-columns.png) ![Custom columns](docassets/images/custom-columns.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it--> ## Contents
<!-- toc -->
- [Basic Usage](#basic-usage) - [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events) - [Properties](#properties)
- [Events](#events)
- [Details](#details) - [Details](#details)
* [DOM Events](#dom-events)
* [Pagination strategy](#pagination-strategy) - [DOM Events](#dom-events)
* [Data Sources](#data-sources) - [Pagination strategy](#pagination-strategy)
+ [Node ID](#node-id) - [Data Sources](#data-sources)
+ [Repository aliases](#repository-aliases) - [Setting default folder](#setting-default-folder)
+ [DocumentList aliases](#documentlist-aliases) - [Calling DocumentList api directly](#calling-documentlist-api-directly)
* [Setting default folder](#setting-default-folder) - [Underlying node object](#underlying-node-object)
* [Calling DocumentList api directly](#calling-documentlist-api-directly) - [Custom columns](#custom-columns)
* [Underlying node object](#underlying-node-object) - [Date Column](#date-column)
* [Custom columns](#custom-columns) - [Location Column](#location-column)
* [Date Column](#date-column) - [Actions](#actions)
* [Location Column](#location-column) - [Navigation mode](#navigation-mode)
* [Actions](#actions)
* [Navigation mode](#navigation-mode)
- [Advanced usage and customization](#advanced-usage-and-customization) - [Advanced usage and customization](#advanced-usage-and-customization)
* [Custom row filter](#custom-row-filter)
* [Custom image resolver](#custom-image-resolver) - [Custom row filter](#custom-row-filter)
* [Custom 'empty folder' template](#custom-empty-folder-template) - [Custom image resolver](#custom-image-resolver)
- [Custom 'empty folder' template](#custom-empty-folder-template)
- [Custom 'permission denied' template](#custom-permission-denied-template)
- [See also](#see-also) - [See also](#see-also)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
```html ```html
@@ -52,8 +50,8 @@ Displays the documents from a repository.
The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case. The properties currentFolderId, folderNode and node are the entry initialization properties of the document list. They cannot be used together, choose the one that suites more your use case.
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| permissionsStyle | [PermissionStyleModel[]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. | | permissionsStyle | [PermissionStyleModel\[\]](permissions-style.model.md) | null | Define a set of CSS styles styles to apply depending on the permission of the user on that node. See the [Permission Style model](permissions-style.model.md) page for further details and examples. |
| locationFormat | string | '/' | The default route for all the location-based columns (if declared). | | locationFormat | string | '/' | The default route for all the location-based columns (if declared). |
| navigate | boolean | true | Toggles navigation to folder content or file preview | | navigate | boolean | true | Toggles navigation to folder content or file preview |
| navigationMode | string (click,dblclick) | dblclick | User interaction for folder navigation or file preview | | navigationMode | string (click,dblclick) | dblclick | User interaction for folder navigation or file preview |
@@ -65,7 +63,7 @@ The properties currentFolderId, folderNode and node are the entry initialization
| contextMenuActions | boolean | false | Toggles context menus for each row | | contextMenuActions | boolean | false | Toggles context menus for each row |
| emptyFolderImageUrl | string | assets/images/empty_doc_lib.svg | Custom image for empty folder | | emptyFolderImageUrl | string | assets/images/empty_doc_lib.svg | Custom image for empty folder |
| allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) | | allowDropFiles | boolean | false | Toggle file drop support for rows (see **ng2-alfresco-core/UploadDirective** for more details) |
| sorting | string[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. | | sorting | string\[] | | Defines default sorting. The format is an array of 2 strings `[key, direction]` i.e. `['name', 'desc']` or `['name', 'asc']`. Set this value only if you want to override default sorting detected by the component based on columns. |
| rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples | | rowStyle | string | | The inline style to apply to every row, see [NgStyle](https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html) docs for more details and usage examples |
| rowStyleClass | string | | The CSS class to apply to every row | | rowStyleClass | string | | The CSS class to apply to every row |
| loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. | | loading | boolean | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
@@ -81,7 +79,7 @@ The properties currentFolderId, folderNode and node are the entry initialization
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| nodeClick | emitted when user clicks a list node | | nodeClick | emitted when user clicks a list node |
| nodeDblClick | emitted when user double-clicks list node | | nodeDblClick | emitted when user double-clicks list node |
| folderChange | emitted once current display folder has changed | | folderChange | emitted once current display folder has changed |
@@ -98,7 +96,7 @@ Below are the DOM events the DocumentList component emits.
All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s). All of them are `bubbling`, meaning you can handle them in any component up the parent hierarchy, even if DocumentList is wrapped by another component(s).
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| node-click | Raised when user clicks the node | | node-click | Raised when user clicks the node |
| node-dblclick | Raised when user double-clicks the node | | node-dblclick | Raised when user double-clicks the node |
| node-select | Raised when user selects a node | | node-select | Raised when user selects a node |
@@ -183,7 +181,7 @@ The default column layout for non-reserved views is:
- Modified (date) - Modified (date)
- Modified by - Modified by
__Trashcan__ **Trashcan**
```html ```html
<adf-document-list <adf-document-list
@@ -201,7 +199,7 @@ Default layout:
- Deleted - Deleted
- Deleted by - Deleted by
__Shared Links__ **Shared Links**
```html ```html
<adf-document-list <adf-document-list
@@ -220,7 +218,7 @@ Default layout:
- Modified by - Modified by
- Shared by - Shared by
__Sites__ **Sites**
```html ```html
<adf-document-list <adf-document-list
@@ -234,7 +232,7 @@ Default layout:
- Title - Title
- Status - Status
__My Sites__ **My Sites**
```html ```html
<adf-document-list <adf-document-list
@@ -248,7 +246,7 @@ Default layout:
- Title - Title
- Status - Status
__Favorites__ **Favorites**
```html ```html
<adf-document-list <adf-document-list
@@ -266,7 +264,7 @@ Default layout:
- Modified - Modified
- Modified by - Modified by
__Recent Files__ **Recent Files**
```html ```html
<adf-document-list <adf-document-list
@@ -756,8 +754,11 @@ This can be changed by means of the custom html template:
That will give the following output: That will give the following output:
![Custom no permission](docassets/images/no-permission-custom.png) ![Custom no permission](docassets/images/no-permission-custom.png)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js --> <!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start --> <!-- seealso start -->
## See also ## See also
- [Datatable component](datatable.component.md) - [Datatable component](datatable.component.md)

15
docs/form-list.component.md
View File

@@ -1,17 +1,6 @@
# ADF Form List Component # ADF Form List Component
The component shows the activiti forms as a list. Shows APS forms as a list.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
@@ -26,5 +15,5 @@ The component shows the activiti forms as a list.
The recommended set of properties can be found in the following table: The recommended set of properties can be found in the following table:
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| forms | any | | The array that contains the information to show inside the list. | | forms | any | | The array that contains the information to show inside the list. |

27
docs/node-name-tooltip.pipe.md
View File

@@ -1,21 +1,6 @@
# Node Name Tooltip directive # Node Name Tooltip directive
Formats the tooltip of the underlying Node based on the following rules: Formats the tooltip for a Node.
* if the *title* and *description* are missing, then the tooltip shows the *name*;
* if the *title* is missing, then the tooltip shows the *name* and *description*;
* if the *description* is missing, then the tooltip shows the *name* and *title*;
* if *name* and *title*, *name* and *description*, or *title* and *description* are the same, then only a single line is displayed.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage ## Basic Usage
@@ -29,9 +14,11 @@ Formats the tooltip of the underlying Node based on the following rules:
</data-column> </data-column>
``` ```
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js --> ## Details
<!-- seealso start -->
## See also The tooltip is formatted according to the following rules:
<!-- seealso end --> - if the _title_ and _description_ are missing, then the tooltip shows the _name_;
- if the _title_ is missing, then the tooltip shows the _name_ and _description_;
- if the _description_ is missing, then the tooltip shows the _name_ and _title_;
- if _name_ and _title_, _name_ and _description_, or _title_ and _description_ are the same, then only a single line is displayed.

24
docs/search.component.md
View File

@@ -1,19 +1,6 @@
# Search component # Search component
Searches items for supplied search terms.
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage ## Basic usage
@@ -27,7 +14,7 @@
### Properties ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results | | searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results |
| maxResults | number | 20 | Maximum number of results to show in the search. | | maxResults | number | 20 | Maximum number of results to show in the search. |
| skipResults | number | 0 | Number of results to skip from the results pagination. | | skipResults | number | 0 | Number of results to skip from the results pagination. |
@@ -37,12 +24,13 @@
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| resultLoaded | Emitted when search results have fully loaded | | resultLoaded | Emitted when search results have fully loaded |
## Details ## Details
### Customise Search Results ### Customise Search Results
You have to add a template that will be shown when the results are loaded. You have to add a template that will be shown when the results are loaded.
```html ```html
@@ -56,6 +44,7 @@ You have to add a template that will be shown when the results are loaded.
</ng-template> </ng-template>
</adf-search> </adf-search>
``` ```
The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like : The results are provided via the [$implicit variable of angular2](https://angular.io/api/common/NgTemplateOutlet) and can be accessed via the sugar sintax 'let-yourChosenName'. As per example above the result will be something like :
![adf-search-control](docassets/images/search-component-simple-template.png) ![adf-search-control](docassets/images/search-component-simple-template.png)
@@ -106,8 +95,8 @@ Which will look like :
![adf-search-control](docassets/images/search-component-complex-template.png) ![adf-search-control](docassets/images/search-component-complex-template.png)
### Attach an input field to the search ### Attach an input field to the search
You can also attach your input field to the adf-search component via the trigger [searchAutocomplete] You can also attach your input field to the adf-search component via the trigger [searchAutocomplete]
```html ```html
@@ -121,4 +110,5 @@ You can also attach your input field to the adf-search component via the trigger
</ng-template> </ng-template>
</adf-search> </adf-search>
``` ```
In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable. In this way it is possible to fetch the results from the word typed into the input text straight into the adf-search component via the custom template variable.

42
docs/viewer.component.md
View File

@@ -1,22 +1,27 @@
# Alfresco Viewer component # Alfresco Viewer component
Displays content from an ACS repository.
See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/) See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it--> ## Contents
<!-- toc -->
- [Basic usage](#basic-usage) - [Basic usage](#basic-usage)
- [Properties](#properties) - [Properties](#properties)
- [Events](#events)
- [Details](#details) - [Details](#details)
* [Supported file formats](#supported-file-formats)
* [PDF Conversion](#pdf-conversion)
* [Configuring PDF.js library](#configuring-pdfjs-library)
* [Custom extension handler](#custom-extension-handler)
<!-- tocstop --> - [Integrating with DocumentList component](#integrating-with-documentlist-component)
- [Supported file formats](#supported-file-formats)
<!-- markdown-toc end --> - [PDF Conversion](#pdf-conversion)
- [Configuring PDF.js library](#configuring-pdfjs-library)
- [Custom toolbar](#custom-toolbar)
- [Custom sidebar](#custom-sidebar)
- [Custom "Open With" menu](#custom-open-with-menu)
- [Custom "More actions" menu](#custom-more-actions-menu)
- [Extending the Viewer](#extending-the-viewer)
## Basic usage ## Basic usage
@@ -39,10 +44,10 @@ Using with file url:
</adf-viewer> </adf-viewer>
``` ```
## Properties ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| --- | --- | --- | --- | | ---- | ---- | ------- | ----------- |
| fileNodeId | string | | Node Id of the file to load | | fileNodeId | string | | Node Id of the file to load |
| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file | | urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file |
| urlFileViewer | string | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. | | urlFileViewer | string | null | Viewer to use with the `urlFile` address (`pdf`, `image`, `media`, `text`). Used when `urlFile` has no filename and extension. |
@@ -60,16 +65,18 @@ Using with file url:
| sidebarPosition | string | right | The position of the sidebar. Can be `left` or `right`. | | sidebarPosition | string | right | The position of the sidebar. Can be `left` or `right`. |
| sidebarTemplate | TemplateRef<any> | null | The template intended to be used as a sidebar. The template context contains the loaded node data. | | sidebarTemplate | TemplateRef<any> | null | The template intended to be used as a sidebar. The template context contains the loaded node data. |
## Events ### Events
| Name | Argument Type | Cancelable | Description | | Name | Argument Type | Cancelable | Description |
| --- | --- | --- | --- | | ---- | ------------- | ---------- | ----------- |
| goBack | any | Yes | Raised when user clicks the 'Back' button. | | goBack | any | Yes | Raised when user clicks the 'Back' button. |
| download | any | Yes | Raised when user clicks the 'Download' button. | | download | any | Yes | Raised when user clicks the 'Download' button. |
| print | any | Yes | Raised when user clicks the 'Print' button. | | print | any | Yes | Raised when user clicks the 'Print' button. |
| share | any | Yes | Raised when user clicks the 'Share' button. | | share | any | Yes | Raised when user clicks the 'Share' button. |
## Integrating with DocumentList component ## Details
### Integrating with DocumentList component
Below is the most simple integration of Viewer and DocumentList components within your custom component: Below is the most simple integration of Viewer and DocumentList components within your custom component:
@@ -105,12 +112,10 @@ export class OverlayViewerComponent {
} }
``` ```
## Details
### Supported file formats ### Supported file formats
| Type | Extension | | Type | Extension |
| --- | --- | | ---- | --------- |
| Media | wav, Mp3, Mp4, WebM, Ogv | | Media | wav, Mp3, Mp4, WebM, Ogv |
| Images | png, jpg, jpeg, gif, bmp | | Images | png, jpg, jpeg, gif, bmp |
| Text | pdf, txt | | Text | pdf, txt |
@@ -176,6 +181,7 @@ The Viewer component also supports custom sidebar components and layouts.
The `allowSidebar` property should be set to `true` to enable this feature. The `allowSidebar` property should be set to `true` to enable this feature.
Custom sidebar for the viewer can be injected in two different ways: Custom sidebar for the viewer can be injected in two different ways:
- using transclusion - using transclusion
- using template **(only works when using the viewer with fileNodeId)** - using template **(only works when using the viewer with fileNodeId)**

28
docs/webscript.component.md
View File

@@ -1,19 +1,6 @@
# Alfresco Webscript Get component # Alfresco Webscript Get component
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it--> Provides access to Webscript features.
<!-- toc -->
- [Basic usage](#basic-usage)
* [Properties](#properties)
- [Details](#details)
* [Webscript View HTML example](#webscript-view-html-example)
* [Webscript View DATATABLE example](#webscript-view-datatable-example)
* [Webscript View JSON example](#webscript-view-json-example)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage ## Basic usage
@@ -56,7 +43,7 @@ export class AppComponent {
### Properties ### Properties
| Attribute | Type | Default | Description | | Attribute | Type | Default | Description |
| --- | --- | --- | --- | | --------- | ---- | ------- | ----------- |
| scriptPath | string | | (**mandatory**) path to Web Script (as defined by Web Script) | | scriptPath | string | | (**mandatory**) path to Web Script (as defined by Web Script) |
| scriptArgs | Object | | arguments to pass to Web Script | | scriptArgs | Object | | arguments to pass to Web Script |
| contextRoot | string | | path where application is deployed | | contextRoot | string | | path where application is deployed |
@@ -65,15 +52,14 @@ export class AppComponent {
| contentType | string | TEXT | how to handle the data received from the web script JSON , HTML , DATATABLE or TEXT | | contentType | string | TEXT | how to handle the data received from the web script JSON , HTML , DATATABLE or TEXT |
| showData | boolean | true | render the webscript data | | showData | boolean | true | render the webscript data |
### Events ### Events
| Name | Description | | Name | Description |
| --- | --- | | ---- | ----------- |
| success | You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application | | success | You can get the plain data from the webscript through the **success** event parameter and use it as you need in your application |
**contentType** {string} **contentType** {string}
***data*** {string} data containing the plain value you get from the webscipt as an output parameter **_data_** {string} data containing the plain value you get from the webscipt as an output parameter
## Details ## Details
@@ -82,7 +68,7 @@ export class AppComponent {
This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here: This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
```http://localhost:8080/alfresco/service/sample/folder/Company%20Home``` `http://localhost:8080/alfresco/service/sample/folder/Company%20Home`
```html ```html
<adf-webscript-get <adf-webscript-get
@@ -100,7 +86,7 @@ This sample Web Scripts reside in your Alfresco Server. You can access the folde
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
```http://localhost:8080/alfresco/service/sample/folder/DATATABLE``` `http://localhost:8080/alfresco/service/sample/folder/DATATABLE`
```html ```html
<adf-webscript-get <adf-webscript-get
@@ -158,7 +144,7 @@ that will render the following table
This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript
This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here: This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here:
```http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE``` `http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE`
```html ```html
<adf-webscript-get <adf-webscript-get

13
lib/config/DocProcessor/docProcessor.js
View File

@@ -17,6 +17,7 @@ var aggData = {};
var toolsFolderName = "tools"; var toolsFolderName = "tools";
var configFileName = "doctool.config.json"; var configFileName = "doctool.config.json";
var defaultFolder = path.resolve("..", "docs");
function initPhase(aggData) { function initPhase(aggData) {
@@ -78,8 +79,7 @@ function updatePhase(srcFolder, destFolder, filenames, aggData) {
}); });
if (modified) if (modified)
fs.writeFileSync(path.resolve(destFolder, filenames[i]), remark().stringify(tree)); fs.writeFileSync(path.resolve(destFolder, filenames[i]), remark().data("settings", {paddedTable: false}).stringify(tree));
//console.log(JSON.stringify(tree)); //console.log(JSON.stringify(tree));
} }
} }
@@ -119,7 +119,15 @@ if (program.args.length === 0) {
return 0; return 0;
} }
/*
var sourcePath;
if (program.args.length > 0)
sourcePath = path.resolve(program.args[0]);
else
sourcePath = defaultFolder;
*/
var sourcePath = path.resolve(program.args[0]); var sourcePath = path.resolve(program.args[0]);
var sourceInfo = fs.statSync(sourcePath); var sourceInfo = fs.statSync(sourcePath);
@@ -150,6 +158,7 @@ if (sourceInfo.isDirectory()) {
} else if (sourceInfo.isFile()) { } else if (sourceInfo.isFile()) {
files = [ path.basename(sourcePath) ]; files = [ path.basename(sourcePath) ];
sourcePath = path.dirname(sourcePath); sourcePath = path.dirname(sourcePath);
destPath = path.dirname(destPath);
} }
files = files.filter(filename => files = files.filter(filename =>

2
lib/config/DocProcessor/doctool.config.json
View File

@@ -1,5 +1,5 @@
{ {
"enabledTools": [ "enabledTools": [
"index" "toc"
] ]
} }

2
lib/config/DocProcessor/tools/index.js
View File

@@ -91,7 +91,7 @@ function aggPhase(aggData) {
] ]
}); });
fs.writeFileSync(path.resolve("..", "docs", "README.md"), remark().stringify(indexFileTree)); fs.writeFileSync(path.resolve("..", "docs", "README.md"), remark().data("settings", {paddedTable: false}).stringify(indexFileTree));
//fs.writeFileSync(indexMdFilePath, remark().stringify(indexFileTree)); //fs.writeFileSync(indexMdFilePath, remark().stringify(indexFileTree));
//fs.writeFileSync(path.resolve(".", "testJson.md"), JSON.stringify(indexFileTree)); //fs.writeFileSync(path.resolve(".", "testJson.md"), JSON.stringify(indexFileTree));
} }

27
lib/config/DocProcessor/tools/toc.js
View File

@@ -8,7 +8,17 @@ const contentsHeading = "Contents";
const minHeadingsForToc = 8; const minHeadingsForToc = 8;
const maxTocHeadingDepth = 3; const maxTocHeadingDepth = 3;
module.exports = process; module.exports = {
"initPhase": initPhase,
"readPhase": readPhase,
"aggPhase": aggPhase,
"updatePhase": updatePhase
}
function initPhase(aggData) {}
function readPhase(tree, pathname, aggData) {}
function aggPhase(aggData) {}
// Find an existing Contents section or add a new empty one if needed. // Find an existing Contents section or add a new empty one if needed.
// Returns true if section is present/needed, false if not needed. // Returns true if section is present/needed, false if not needed.
@@ -47,7 +57,7 @@ function establishContentsSection(mdTree) {
// If there are enough headings for a ToC to be necessary then // If there are enough headings for a ToC to be necessary then
// add one in the right place. // add one in the right place.
if (!foundContentsHeading) { if (!foundContentsHeading) {
var newContsHeading = unist.makeHeading(contentsHeading, 2); var newContsHeading = unist.makeHeading(unist.makeText(contentsHeading), 2);
// If we found another L2 heading then add the Contents in just before it. // If we found another L2 heading then add the Contents in just before it.
if (firstL2HeadingPos != -1) { if (firstL2HeadingPos != -1) {
@@ -62,21 +72,22 @@ function establishContentsSection(mdTree) {
return numTocHeadings; return numTocHeadings;
} }
function updatePhase(tree, pathname, aggData) {
function process(mdTree, file) {
// If we need a contents section then add one or update the existing one. // If we need a contents section then add one or update the existing one.
var numTocHeadings = establishContentsSection(mdTree); var numTocHeadings = establishContentsSection(tree);
if (numTocHeadings >= minHeadingsForToc) { if (numTocHeadings >= minHeadingsForToc) {
var newToc = tocGenerator(mdTree, {heading: contentsHeading, maxDepth: 3}); var newToc = tocGenerator(tree, {heading: contentsHeading, maxDepth: 3});
replaceSection(mdTree, contentsHeading, function(before, oldSection, after) { replaceSection(tree, contentsHeading, function(before, oldSection, after) {
return [before, newToc.map, after]; return [before, newToc.map, after];
}); });
} else { } else {
// Otherwise, we don't need one, so remove any existing one. // Otherwise, we don't need one, so remove any existing one.
replaceSection(mdTree, contentsHeading, function(before, oldSection, after) { replaceSection(tree, contentsHeading, function(before, oldSection, after) {
return [after]; return [after];
}); });
} }
return true;
} }