https://github.com/grtjn/view-binary-element

Native Web Component for previewing a few common types of binary files
https://github.com/grtjn/view-binary-element

html5 javascript web-components

Last synced: about 1 month ago
JSON representation

Native Web Component for previewing a few common types of binary files

• Host: GitHub
• URL: https://github.com/grtjn/view-binary-element
• Owner: grtjn
• License: apache-2.0
• Created: 2018-03-22T19:32:07.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2020-11-18T08:19:42.000Z (over 5 years ago)
• Last Synced: 2025-09-30T23:11:24.106Z (9 months ago)
• Topics: html5, javascript, web-components
• Language: HTML
• Homepage: http://grtjn.github.io/view-binary-element/
• Size: 2.77 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# view-binary-element

Native Web Component for previewing a few common types of binary files

This is essentially a refactored version of https://github.com/grtjn/view-file-ng to eliminate AngularJS. Not yet as feature rich though.

Disclaimer: Work in Progress, and not tested in production. Feedback welcome though.

Check https://caniuse.com/ to verify how well Web Components is covered by current browsers. This component uses Custom Elements v1, (optionally) HTML Imports, HTML Templates, Shadow DOM v1 (gracefull decay would be possible).

## Installation

### CDN and polyfill

Simplest way:

    

Likely together with this polyfill:

    

### NPM and html-loader

This component is also published on npm:

    npm install --save view-binary-element

Potentially combined with something like:

    <%= require('html-loader!../node_modules/view-binary-element/view-binary.html') %>

### Bower, wiredep, and gulp

This component is also published on bower:

    bower install --save view-binary-element

You can combine that with gulp and wiredep with something like:

    .pipe(gulpWiredep({

      fileTypes: {

        html: {

          block: /(([ \t]*))(\n|\r|.)*?()/gi,

          detect: {

            js: /',

            css: '',

            html: ''

          }

        }

      }

    }))

Add this to your index.html:

    

    

    

    

    

    

This relies on the html-import polyfill loaded from CDN. If you prefer not to rely on that, or if your tooling builds minified versions of everything, you can include the html similarly to html-loader mentioned above in NPM, and strip off the polyfill using gulp-preprocessor roughly like this:

    .pipe(gulpReplace(//g, ''))

    .pipe(gulpPreprocess())

## Usage

Example:

    

      Download sample-music.mp3

    

Does not emit events.

### Plaing HTML and JavaScript

- Assumes CDN and polyfill installation

- In your html:

        

        view-binary {

          display: block;

          height: 300px;

        }

        view-binary.audio {

          height: 32px;

        }

        

    

        

          Download sample-music.mp3

        

### Vue.js

- Import or include the web component in your index.html (see for instance NPM and html-loader installation)

- Add `view-binary` to ignoreElements to stop it from squeaking:

        Vue.config.ignoredElements = ["view-binary"];

- Use it in any component:

        

          Download {{ fileName }}

        

### AngularJS

- Assumes Bower, wiredep, and gulp installation

- In your html template:

        

          Download {{ fileName }}

        

## Test locally

- Uncomment the local import line in docs/index.html

- Run something like `python -m SimpleHTTPServer 8888` from project root

- Open http://localhost:8888/docs/