@striven-erp/striven-fileviewer/README.md

A pure javascript fileviewer made for Striven ERP

<h1 align="center">Striven File Viewer</h1>

<p align="center">
    <img src="./file-view.gif" />
</p>

<p align="center">
    <img src="https://img.shields.io/github/size/striven-erp/striven-fileviewer/dist/strivenfileviewer.js"/>
    <img src="https://img.shields.io/github/issues-raw/striven-erp/striven-fileviewer" />
    <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/striven-erp/striven-fileviewer">
    <img src="https://img.shields.io/npm/v/@striven-erp/striven-fileviewer" />
</p>

## Supported Frameworks

🥋 [Knockout](#implementing-with-knockout)
|
✌ [Vue](#implementing-with-vue)

## Getting Started

### Install Package

```sh
$ npm install @striven-erp/striven-fileviewer
```

### Initialize File Viewer

The element that is passed in will be bound to an ```onclick``` event that triggers the file view lightbox.

```js
import { StrivenFileViewer } from '@striven-erp/striven-fileviewer';

const viewerOptions = {
    path: './assets/images/image.jpeg',
    name: 'image',
    type: 'jpeg'
}

const fileviewer = new StrivenFileViewer(fileviewerEl, viewerOptions);
```

### Initializing with a View Element

Alternatively, you can pass an element that you want the file to displayed in. This will disable the lightbox feature.

```js
import { StrivenFileViewer } from '@striven-erp/striven-fileviewer';

const viewerOptions = {
    path: './assets/images/image.jpeg',
    name: 'image',
    type: 'jpeg'
}

const fileviewer = new StrivenFileViewer(fileviewerEl, viewerOptions, viewEl);
```

## Implementing with Vue

### Import the Vue Directive

```js
import Vue from 'vue';
import App from './App.vue'

import { VueStrivenFileViewer } from '@striven-erp/striven-fileviewer';

new VueStrivenFileViewer(Vue);

new Vue({
  render: h => h(App),
}).$mount('#app')
```

### Bind the directive to the element

```html
<a vue-fileviewer="viewerOptions" href="#" />
```

```js
export default {
    data () {
        return {
            viewerOptions: {
                path: './assets/images/image.jpeg',
                name: 'image',
                type: 'jpeg'
            }
        }
    }
}
```

### Binding with a view element 

```html
<a vue-fileviewer="viewerOptions" href="#" />
```

```js
export default {
    data () {
        return {
            viewerOptions: {
                path: './assets/images/image.jpeg',
                name: 'image',
                type: 'jpeg',
                viewer: document.getElementById('view-element');
            }
        }
    }
}
```

## Implementing with Knockout

### Import the Knockout Binding

```js
import ko from 'knockout';
import { KoStrivenFileViewer } from '@striven-erp/striven-fileviewer';

new KoStrivenFileViewer(ko);
```

### Template the binding

Attach the binding to the element you want the ```StrivenFileViewer``` to attach the ```onclick``` event to.

```html
<a href="#" data-bind="fileViewer: imagePath">View this File</a>
```

#### Binding with a view element

```html
<a href="#" data-bind="fileviewer: imagePath, viewElement: viewElement">View this File</a>
```

#### Example View Model

```js
function AppViewModel() {
    this.imagePath = './path/to/the/file.jpeg/';
    this.viewElement = document.getElementById('view-element');
}

ko.applyBindings(new AppViewModel());
```

## File Viewer Properties

|Property|Type|Description|
|:-:|:-:|:-:|
|path|```String```|Path to the file to view.|
|name|```String```|Name of the viewing file <br /> Download purposes.|
|type|```String```|Extension of the viewing file <br /> Viewing behavior purposes.|
|useSVG|```Boolean```|Use default SVG icons provided <br /> If ```false```, must pass class names|
|downloadIconClass|```String```|Class name for icon <br /> **Example:** ```fa fa-download```|
|closeIconClass|```String```|Class name for icon <br /> **Example:** ```fa fa-close```|

## File Viewer Methods

|Method|Return Type|Description|
|:-:|:-:|:-:|
|downloadFile|None|Manually invoke the downloading of the referenced file|
|viewFile|None|Manually invoke the click event that views the file|