@magicbruno/fm_viewer
Version:
Simple web file viewer
240 lines (239 loc) • 15.7 kB
text/xml
<h1 id="1-fm-viewer">1. FM Viewer</h1>
<p>Simple javascript file viewer.</p>
<p><a href="https://magicbruno.github.io/FM_Viewer/">Demo and documentation.</a></p>
<h2 id="11-introduction">1.1. Introduction</h2>
<p>FM Viewer is a simple file and gallery viewer whose UI is modelled on popular FancyBox javascript component. </p>
<p>Main features:</p>
<ul>
<li>Completely free and open source</li>
<li>No dependencies</li>
<li>Very light (js + css about 20 Kb minimized)</li>
<li>Completely customizable</li>
<li>Written using ES6 classes</li>
<li>Works in all <em>modern browsers</em></li>
</ul>
<h2 id="12-getting-started">1.2. Getting started</h2>
<p>Install via npm:</p>
<pre><code>npm install @magicbruno/fm_viewer
</code></pre>
<p>or link directly from CDN:</p>
<pre><code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@magicbruno/fm_viewer@1.0.1/dist/css/file-man.min.css">
<script src="https://cdn.jsdelivr.net/npm/@magicbruno/fm_viewer@1.0.1/FM_Viewer.min.js"></script>
</code></pre>
<p>If you prefer yuo can <a href="https://github.com/magicbruno/FM_Viewer/archive/refs/heads/main.zip">Download</a> <code>or</code> clone repository. Distribution files are in the <strong>dist</strong> folder.</p>
<p>Link css stuff in the <code>head</code> of your page:</p>
<pre><code><head>
...
<link rel="stylesheet" href="..../file-man.css">
...
</head>
</code></pre>
<p>Link script file at the end of body section of the html page.</p>
<pre><code><script src="..../FM_Viewer.js"></script>
</code></pre>
<p>and then create an instance of the FM_Viewer class to initialize the viewer.</p>
<pre><code><script>
(function(win){
win.TheViewer = new FM_Viewer(<selector>);
})(window);
</script>
</code></pre>
<p>The <code><selector></code> parameter is the HTML element on which the viewer is built. </p>
<h2 id="13-basic-usage">1.3. Basic usage</h2>
<p>If you create the viewer instance with no parameter, FM_Viewer will build its own element on the fly and append it to the <code>body</code> of the page.</p>
<pre><code>const TheViewer = new FM_Viewer();
</code></pre>
<p>All <code><a></code> elements with <code>data-fmviewer</code> attribute are registered to the viewer when the <code>DOMContentLoaded</code> event is fired. On click its links will opened in the viewer.</p>
<p>You can optionally specify the type of the document to show using <code>data-type</code> attribute. Valid types are: <code>image</code>, <code>video</code>, <code>audio</code> and <code>iframe</code>.</p>
<blockquote>
<h4 id="notes">NOTES</h4>
<ul>
<li>The viewer try to determine the type of the document linked to by file extension. If the url has no extension you must specify the type using <code>data-type</code> attribute.</li>
<li>Use <code>video</code> type only for link to real video files. For Vimeo or YouTube video use <code>iframe</code> type instead (see example).</li>
</ul>
</blockquote>
<p>If you add links after document load, for example via ajax call, you may call the viewer refresh method to update the viewer and add new links to registered ones.</p>
<pre><code>TheViewer.refresh();
</code></pre>
<p>Here is the code appended to the <code>body</code> by default. You may provide your customized viewer instead and pass its selector to FM_viewer constructor.</p>
<pre><code><div class="fm-viewer off-screen" id="fm-828573602">
<nav class="fm-navbar" role="navigation">
<h3 class="viewer-title"></h3>
<ul class="fm-navbar-nav" style="margin-left:auto">
<li class="">
<button type="button" data-action="download-file" title="Scarica" class="btn btn-dark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M.6 13.7c0-.6.6-1.1 1.1-1.1s1.1.6 1.1 1.1v5.7c0 1.3 1 2.3 2.3 2.3h13.6c1.3 0 2.3-1 2.3-2.3v-5.7c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v5.7c0 2.5-2 4.5-4.5 4.5H5.2c-2.5 0-4.5-2-4.5-4.5-.1-3.4-.1-5.3-.1-5.7z" opacity=".5" fill="#fff"></path>
<path d="M12 16c-.6 0-1.1-.5-1.1-1.1V1.2c0-.6.5-1.1 1.1-1.1.6 0 1.1.5 1.1 1.1v13.6c0 .7-.5 1.2-1.1 1.2z" fill-rule="evenodd" clip-rule="evenodd" fill="#fff"></path>
<path d="M16.9 9.5c.4-.5 1.1-.5 1.6 0s.4 1.2 0 1.6l-5.7 5.7c-.4.4-1.1.4-1.6 0l-5.7-5.1c-.5-.4-.5-1.1-.1-1.6.5-.5 1.2-.5 1.7-.1l4.9 4.4 4.9-4.9z" fill="#fff"></path>
</svg>
</button>
</li>
<li class="">
<button type="button" data-action="previous" title="Precedente" class="btn btn-dark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M18.4 2.9c.7-.7.7-1.8 0-2.4-.7-.7-1.8-.7-2.4 0L5.6 10.8c-.6.6-.6 1.7 0 2.4L15 23.4c.6.7 1.7.7 2.4.1s.7-1.7.1-2.4L9.2 12l9.2-9.1z" fill="#fff"></path>
</svg>
</button>
</li>
<li class="">
<button type="button" data-action="next" title="Successivo" class="btn btn-dark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M5.6 2.9C5 2.3 5 1.2 5.6.5c.7-.7 1.8-.7 2.4 0l10.3 10.3c.6.6.7 1.7.1 2.4L9 23.4c-.6.7-1.7.7-2.4.1s-.7-1.7-.1-2.4l8.3-9.1-9.2-9.1z" fill="#fff"></path>
</svg>
</button>
</li>
<li class="">
<button type="button" data-action="fullscreen-on" title="Fullscreen on" class="btn btn-dark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M9.9 12L2.2 4.3c-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0L12 9.9 21.3.6c.6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1L14.1 12l9.3 9.3c.6.6.6 1.5 0 2.1s-1.5.6-2.1 0L12 14.1l-7.7 7.7c-.6.6-1.5.6-2.1 0s-.6-1.5 0-2.1L9.9 12z" opacity=".7" fill-rule="evenodd" clip-rule="evenodd" fill="#fff"></path>
<path d="M3 21h4.5c1 .2 1.5.7 1.5 1.5s-.5 1.3-1.5 1.5H0v-7.5c0-1 .5-1.5 1.5-1.5s1.5.5 1.5 1.5V21zm18 0v-4.5c.2-1 .7-1.5 1.5-1.5s1.3.5 1.5 1.5V24h-7.5c-1 0-1.5-.5-1.5-1.5s.5-1.5 1.5-1.5H21zm0-18h-4.5c-1-.2-1.5-.7-1.5-1.5S15.5.2 16.5 0H24v7.5c0 1-.5 1.5-1.5 1.5S21 8.5 21 7.5V3zM3 3v4.5C2.8 8.5 2.3 9 1.5 9S.2 8.5 0 7.5V0h7.5C8.5 0 9 .5 9 1.5S8.5 3 7.5 3H3z" fill="#fff"></path>
</svg>
</button>
</li>
<li class="">
<button type="button" data-action="fullscreen-off" title="Fullscreen off" class="btn btn-dark">
<svg version="1.1" id="prefix__Livello_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<style>
.prefix__st2 {
fill: none;
stroke: #fff;
stroke-width: 2.9537;
stroke-linecap: round;
stroke-miterlimit: 10
}
</style>
<path id="prefix__Bound" fill="none" d="M0 0h24v24H0z"></path>
<path id="prefix__Combined-Shape_00000038379922521257236590000010407855033361335999_" d="M6.1 17.9H1.7c-1-.1-1.5-.6-1.5-1.5s.4-1.3 1.5-1.5H9v7.4c0 1-.4 1.5-1.5 1.5S6 23.4 6 22.3v-4.4zm11.8 0v4.4c-.1 1-.6 1.5-1.5 1.5s-1.3-.4-1.5-1.5V15h7.4c1 0 1.5.4 1.5 1.5s-.4 1.5-1.5 1.5h-4.4zm0-11.8h4.4c1 .1 1.5.6 1.5 1.5s-.4 1.3-1.5 1.4H15V1.7c0-1 .4-1.5 1.5-1.5S18 .6 18 1.7v4.4zm-11.8 0V1.7C6.2.7 6.7.2 7.6.2S8.9.6 9 1.7V9H1.7C.7 9 .2 8.6.2 7.5S.6 6 1.7 6h4.4z" fill="#fff"></path>
<path class="prefix__st2" d="M7.3 7.1L1.8 1.7M22.3 22.2l-5.4-5.5M7.3 16.9l-5.5 5.4M22.5 1.7L17 7.1"></path>
<circle cx="12" cy="12.1" r="2.2" opacity=".7" fill="#fff"></circle>
</svg>
</button>
</li>
<li class="">
<button type="button" data-action="close-viewer" title="Chiudi" class="btn btn-dark">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g fill-rule="evenodd" clip-rule="evenodd" fill="#fff">
<path d="M.616 20.556L20.556.616a2.006 2.006 0 012.828 0c.778.777.778 2.05 0 2.828l-19.94 19.94a2.006 2.006 0 01-2.828 0 2.006 2.006 0 010-2.828z"></path>
<path d="M3.444.616l19.94 19.94c.778.778.778 2.05 0 2.828a2.006 2.006 0 01-2.828 0L.616 3.444a2.006 2.006 0 010-2.828 2.006 2.006 0 012.828 0z"></path>
</g>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</code></pre>
<p>FM_Viewer has no dependance. No jQuery, nor Bootstrap and icons are self contained svg graphics. You only need its style sheet.</p>
<h2 id="14-customizing">1.4. Customizing</h2>
<p>You can customize your FM_Viewer constructing your interface using HTML and/or modifying stylesheet file.</p>
<p>The example below expose only basic buttons (close viewer, next and previous) with customized icons and allows viewer closing on clicking on backdrop.</p>
<pre><code> <div class="fm-viewer off-screen" id="theViewer" data-action="close-viewer">
<a href="javascript:;" data-action="close-viewer">
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<defs>
<style>
.b {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 8.68px;
}
</style>
</defs>
<line class="b" x1="39.9" y1="38.47" x2="140.53" y2="139.1" />
<line class="b" x1="39.47" y1="139.53" x2="140.1" y2="38.9" />
</svg>
</a>
<a href="javascript:;" data-action="next">
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<defs>
<style>
.b {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 8.75px;
}
</style>
</defs>
<line class="b" x1="64.84" y1="38.28" x2="115.6" y2="89.03" />
<line class="b" x1="64.4" y1="140.22" x2="115.6" y2="89.03" />
</svg>
</a>
<a href="javascript:;" data-action="previous">
<svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
<defs>
<style>
.b {
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-miterlimit: 10;
stroke-width: 8.79px;
}
</style>
</defs>
<line class="b" x1="115.27" y1="38.05" x2="64.29" y2="89.03" />
<line class="b" x1="115.71" y1="140.45" x2="64.29" y2="89.03" />
</svg>
</a>
<footer><div class="viewer-title d-none"></div></footer>
</div>
</code></pre>
<p>Elements functionality and button actions are defined through CSS classes and <code>data-</code> attributes:</p>
<table>
<thead>
<tr>
<th>Element (CSS selector)</th>
<th>Type</th>
<th>Functionality/Action</th>
</tr>
</thead>
<tbody><tr>
<td><code>.fm-viewer</code></td>
<td>element</td>
<td>Viewer container (mandatory). Add class <code>off-screen</code> if you want that the viewer is initially off screen.</td>
</tr>
<tr>
<td><code>.viewer-title</code></td>
<td>element</td>
<td>Title/caption obtained from <code>title</code> attribute of <code><a></code> element. Hidden if empty.</td>
</tr>
<tr>
<td><code>[data-action="close-viewer"]</code></td>
<td>button or element</td>
<td>Close the viewer. If added to viewer container itself allows closing viewer clicking the backdrop.</td>
</tr>
<tr>
<td><code>[data-action="download-file"]</code></td>
<td>button</td>
<td>Starts file downloading. Available only for same domain files otherwise hidden.</td>
</tr>
<tr>
<td><code>[data-action="previous"]</code></td>
<td>button</td>
<td>Shows previous file in gallery.</td>
</tr>
<tr>
<td><code>[data-action="next"]</code></td>
<td>button</td>
<td>Shows next file in gallery.</td>
</tr>
<tr>
<td><code>[data-action="fullscreen-on"]</code></td>
<td>button</td>
<td>Opens full screen view. Automatically hidden if fullscreen view is active.</td>
</tr>
<tr>
<td><code>[data-action="fullscreen-off"]</code></td>
<td>button</td>
<td>Closes full screen view. Automatically hidden if fullscreen view is not active.</td>
</tr>
</tbody></table>