@striven-erp/striven-fileviewer v0.5.1

Supported Frameworks

🥋 Knockout | ✌ Vue

Getting Started

Install Package

$ 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.

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.

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

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

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

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

Binding with a view element

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

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

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.

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

Binding with a view element

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

Example View Model

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

ko.applyBindings(new AppViewModel());

File Viewer Properties

File Viewer Methods