# ECLArchiveViewer

ECLArchiveViewer fetches and displays a workunit's archive files. It extends _SplitPanel_ and displays two widgets side by side in the target element's available space.

The two widgets are:
1) _DirectoryList_ on the left
2) _Editor_ on the right

_url_ can be used to specify a direct link to the archives to fetch.

```sample-code
import { ECLArchiveViewer } from "@hpcc-js/eclwatch";

new ECLArchiveViewer()
    .target("target")
    .baseUrl("http://play.hpccsystems.com:8010/")
    .wuid("W20200107-160602")
    .render()
    ;
```

Or _baseUrl_ and _wuid_ can be used to fetch the archive files.

_verticalScroll_ can be set to _false_ to hide the _DirectoryList_ vertical scroll bar.

```sample-code
import { ECLArchiveViewer } from "@hpcc-js/eclwatch";

new ECLArchiveViewer()
    .target("target")
    .baseUrl("http://play.hpccsystems.com:8010/")
    .wuid("W20200107-160602")
    .verticalScroll(false)
    .render()
    ;
```

_iconSize_ and _fontSize_ set the size of the _DirectoryList_ icons and fonts. 

_folderIconOpen_ and _folderIconClosed_ can specify CSS classes assigned to open and closed folder icons. 

```sample-code
import { ECLArchiveViewer } from "@hpcc-js/eclwatch";

new ECLArchiveViewer()
    .target("target")
    .baseUrl("http://play.hpccsystems.com:8010/")
    .wuid("W20200107-160602")
    .verticalScroll(false)
    .iconSize(16)
    .fontSize(12)
    .folderIconOpen("fa fa-minus-square-o")
    .folderIconClosed("fa fa-plus-square-o")
    .render()
    ;
```

_codeFileIcon_ and _textFileIcon_ allow CSS classes to be assigned to file icons.

_fontColor_ can be used to set the font color of the _DirectoryList_ text and icons.

_fontFamily_ can be used to set the font family of the _DirectoryList_ text.

_directoryPaneHoverColor_ sets the background color of hovered _DirectoryList_ rows.

```sample-code
import { ECLArchiveViewer } from "@hpcc-js/eclwatch";

new ECLArchiveViewer()
    .target("target")
    .baseUrl("http://play.hpccsystems.com:8010/")
    .wuid("W20200107-160602")
    .iconSize(16)
    .fontSize(12)
    .folderIconOpen("fa fa-minus-circle")
    .folderIconClosed("fa fa-plus-circle")
    .codeFileIcon("fa fa-code")
    .textFileIcon("fa fa-font")
    .fontColor("#333")
    .fontFamily("Tahoma")
    .directoryPaneHoverColor("#1A9BD7")
    .render()
    ;
```


## API

## Published Properties
```@hpcc-js/eclwatch:ECLArchiveViewer
```