rich-filemanager
Version:
Highly customizable open-source file manager
455 lines (423 loc) • 15.4 kB
HTML
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rich FileManager</title>
<link rel="stylesheet" type="text/css" href="styles/reset.css" />
<link rel="stylesheet" type="text/css" href="styles/filemanager.css" />
<link rel="stylesheet" type="text/css" href="scripts/jquery.contextmenu/dist/jquery.contextMenu.min.css" />
<link rel="stylesheet" type="text/css" href="scripts/custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css" />
<link rel="stylesheet" type="text/css" href="scripts/alertify.js/dist/css/alertify.css">
<style type="text/css">
.fm-container .fm-loading-wrap {
position: fixed;
height: 100%;
width: 100%;
overflow: hidden;
top: 0;
left: 0;
display: block;
background: white url(./images/spinner.gif) no-repeat center center;
z-index: 999;
}
</style>
<!-- CSS dynamically added using 'config.options.theme' defined in config file -->
</head>
<body>
<div class="fm-container">
<!--<div class="fm-loading-wrap"><!– loading wrapper / removed when loaded –></div>-->
<div class="fm-wrapper">
<div class="fm-header">
<div class="breadcrumbs">
<div class="nav-title">{{ lg.current_folder }}</div>
<div>
<div></div>
<!-- ko if: !bcItem.active -->
<div class="separator">></div>
<!-- /ko -->
</div>
</div>
<div class="buttons-panel">
<div class="button-group navigate-controls">
<button class="btn btn-nav-level-up no-label" type="button" >
<span> </span>
</button>
<button class="btn btn-nav-home no-label" type="button">
<span> </span>
</button>
<button class="btn btn-nav-refresh no-label" type="button">
<span> </span>
</button>
</div>
<div class="button-group">
<button class="separator" type="button"> </button>
</div>
<div class="button-group viewmode-controls">
<button class="btn btn-grid-mode no-label" type="button">
<span> </span>
</button>
<button class="btn btn-list-mode no-label" type="button">
<span> </span>
</button>
</div>
<div class="button-group">
<button class="separator" type="button"> </button>
</div>
<div class="button-group filter-controls">
<button class="btn btn-filter-image no-label" type="button"><span> </span></button>
<button class="btn btn-filter-media no-label" type="button" ><span> </span></button>
<button class="btn btn-filter-office no-label" type="button" ><span> </span></button>
<button class="btn btn-filter-archive no-label" type="button" ><span> </span></button>
<!--<button class="btn btn-filter-audio no-label" type="button" ><span> </span></button>-->
<!--<button class="btn btn-filter-video no-label" type="button" ><span> </span></button>-->
<button class="btn btn-filter-reset no-label" type="button" ><span> </span></button>
</div>
<div class="button-group">
<button class="separator" type="button"> </button>
</div>
<!-- ko if: clipboardModel.enabled() -->
<div class="button-group clipboard-controls">
<button class="btn btn-clipboard-copy no-label" type="button" ><span> </span></button>
<button class="btn btn-clipboard-cut no-label" type="button" ><span> </span></button>
<button class="btn btn-clipboard-paste no-label" type="button" ><span> </span></button>
<button class="btn btn-clipboard-clear no-label" type="button" ><span> </span></button>
</div>
<div class="button-group">
<button class="separator" type="button"> </button>
</div>
<!-- /ko -->
<!-- ko if: !browseOnly() -->
<div class="button-group upload-controls">
<form class="fm-uploader" method="post">
<input id="mode" type="hidden" value="add"/>
<input id="newfile" class="hidden-file-input" name="newfile" type="file" />
<button class="btn fm-upload" type="button">
<span ></span>
</button>
</form>
</div>
<div class="button-group create-controls">
<button class="btn btn-create-folder" type="button" >
<span ></span>
</button>
</div>
<!-- /ko -->
<!-- ko if: headerModel.langSwitcher -->
<div class="button-group">
<select class="btn lang-selector" ></select>
</div>
<!-- /ko -->
<!-- ko if: headerModel.closeButton() -->
<div class="button-group">
<button class="btn btn-close-window no-label" type="button" >
<span> </span>
</button>
</div>
<!-- /ko -->
</div>
</div>
<div class="fm-splitter">
<div class="fm-filetree" >
<div ></div>
</div>
<div class="fm-fileinfo">
<div class="fm-loading-view" v-show="loadingView"></div>
<div class="view-items-wrapper" >
<!-- ko if: config().manager.renderer.position === 'top' && itemsModel.descriptivePanel.renderer() -->
<div class="fm-renderer-wrapper" >
<!-- ko template: {name: 'renderer-template', data: itemsModel.descriptivePanel} --><!-- /ko -->
</div>
<!-- /ko -->
<div class="view-items">
<ul class="grid" >
<!-- ko if: koItem.rdo.type === "parent" -->
<li class="directory-parent" >
<div class="clip">
<img src="" class="grid-icon ico_folder_parent" />
</div>
<p>..</p>
</li>
<!-- /ko -->
<!-- ko if: koItem.rdo.type !== "parent" -->
<li >
<div class="item-background"></div>
<div class="item-content" >
<div class="clip">
<!-- ko if: koItem.lazyPreview -->
<img src="" />
<!-- /ko -->
<!-- ko if: !koItem.lazyPreview -->
<img src="" />
<!-- /ko -->
</div>
<p ></p>
</div>
</li>
<!-- /ko -->
</ul>
<table class="list" >
<thead>
<tr class="rowHeader" >
<th ></span></th>
<th ></span></th>
<th ></span></th>
<th ></span></th>
<th ></span></th>
</tr>
</thead>
<tbody >
<!-- ko if: koItem.rdo.type === "parent" -->
<tr class="directory-parent" >
<td>
<div class="list-item">..</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- /ko -->
<!-- ko if: koItem.rdo.type !== "parent" -->
<tr >
<td>
<div class="list-item" >
<span class="list-icon" ></span>
<span ></span>
</div>
</td>
<td ></td>
<td ></td>
<td ></td>
<td ></td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- ko if: config().manager.renderer.position === 'bottom' && itemsModel.descriptivePanel.renderer() -->
<div class="fm-renderer-wrapper" >
<!-- ko template: {name: 'renderer-template', data: itemsModel.descriptivePanel} --><!-- /ko -->
</div>
<!-- /ko -->
</div>
<div class="fm-preview-wrapper" >
<!-- ko template: {if: previewFile(), afterRender: previewModel.afterRender} -->
<div class="fm-preview" >
<div class="fm-preview-toolbar button-group">
<form id="fm-js-preview-toolbar">
<button class="btn btn-file-preview-close" type="button" >
<span ></span>
</button>
<!-- ko if: buttonVisibility('select') -->
<button class="btn btn-file-select" type="button" >
<span ></span>
</button>
<!-- /ko -->
<!-- ko if: buttonVisibility('download') -->
<button class="btn btn-file-download" type="button" >
<span ></span>
</button>
<!-- /ko -->
<!-- ko if: buttonVisibility('rename') -->
<button class="btn btn-file-rename" type="button" >
<span ></span>
</button>
<!-- /ko -->
<!-- ko if: buttonVisibility('move') -->
<button class="btn btn-file-move" type="button" >
<span ></span>
</button>
<!-- /ko -->
<!-- ko if: buttonVisibility('delete') -->
<button class="btn btn-file-delete" type="button" >
<span ></span>
</button>
<!-- /ko -->
<!-- ko if: viewer.isEditable() && !editor.enabled() -->
<button class="btn btn-file-edit" type="button" >
<span ></span>
</button>
<!-- /ko -->
<!-- ko if: viewer.isEditable() && editor.enabled() -->
<button class="btn btn-file-save" type="button" >
<span ></span>
</button>
<button class="btn btn-file-editor-close" type="button" >
<span ></span>
</button>
<!-- /ko -->
</form>
</div>
<div class="fm-preview-viewer" >
<!-- ko template: {if: viewer.isEditable(), afterRender: initiateEditor} -->
<div class="fm-preview-edit-panel" >
<form id="fm-js-editor-form">
<textarea class="fm-cm-editor-content" name="content" ></textarea>
<input type="hidden" name="mode" value="savefile" />
<input type="hidden" name="path" value="" />
</form>
</div>
<!-- /ko -->
<div class="fm-preview-view-panel">
<!-- ko if: viewer.type() === 'default' -->
<img src="" />
<!-- /ko -->
<!-- ko if: viewer.type() === 'image' -->
<img src="" />
<!-- /ko -->
<!-- ko if: viewer.type() === 'audio' -->
<audio src="" controls="controls" ></audio>
<!-- /ko -->
<!-- ko if: viewer.type() === 'video' -->
<video src="" controls="controls" ></video>
<!-- /ko -->
<!-- ko if: viewer.type() === 'onlyoffice' -->
<iframe src="" allowfullscreen webkitallowfullscreen></iframe>
<!-- /ko -->
<!-- ko if: viewer.type() === 'opendoc' -->
<iframe src="" allowfullscreen webkitallowfullscreen></iframe>
<!-- /ko -->
<!-- ko if: viewer.type() === 'google' -->
<iframe src="" allowfullscreen webkitallowfullscreen></iframe>
<!-- /ko -->
<!-- ko if: viewer.type() === 'iframe' && !editor.enabled() -->
<iframe src="" allowfullscreen webkitallowfullscreen></iframe>
<!-- /ko -->
<!-- ko if: viewer.type() === 'renderer' && renderer.renderer() -->
<div >
<!-- ko template: {name: 'renderer-template', data: renderer} --><!-- /ko -->
</div>
<!-- /ko -->
</div>
</div>
<div class="fm-preview-title">
<h1 ></h1>
<div class="fm-preview-title-controls">
<a href="#" class="btn-copy-url" ></a>
<!-- ko if: viewer.isEditable() && !editor.enabled() && viewer.options().is_writable -->
<a href="#" class="btn-editor-open" ></a>
<!-- /ko -->
<!-- ko if: viewer.isEditable() && editor.enabled() -->
<a href="#" class="btn-editor-save" ></a>
<a href="#" class="btn-editor-quit" ></a>
<!-- /ko -->
</div>
</div>
<div class="fm-preview-details">
<table>
<tr >
<td ></td>
<td ></td>
</tr>
<tr >
<td ></td>
<td ></td>
</tr>
<tr >
<td ></td>
<td ></td>
</tr>
<tr >
<td ></td>
<td ></td>
</tr>
</table>
</div>
</div>
<!-- /ko -->
</div>
</div>
</div>
<div class="fm-footer">
<div class="left">
<div class="search-box" >
<input type="text" />
<div class="search-box-reset" ></div>
</div>
</div>
<div class="right">
<div id="folder-info">
<span ></span> -
<span ></span>
</div>
<div id="summary" ></div>
<a href="" target="_blank" id="link-to-project" ></a>
</div>
<div style="clear: both"></div>
</div>
<!-- ko if: summaryModel.enabled() -->
<div id="summary-popup" >
<div class="title" ></div>
<div class="line" ></div>
<div class="line" ></div>
<div class="line" ></div>
</div>
<!-- /ko -->
<!-- TEMPLATES Start -->
<script type="text/html" id="renderer-template">
<!-- ko template: {afterRender: setContainer} -->
<div class="fm-renderer-container">
<!-- ko if: renderer().name === 'markdown' -->
<div class="fm-markdown-renderer" ></div>
<!-- /ko -->
<!-- ko if: renderer().name === 'codeMirror' -->
<textarea class="fm-cm-renderer-content" ></textarea>
<!-- /ko -->
</div>
<!-- /ko -->
</script>
<script type="text/html" id="node-parent-template">
<li ></li>
</script>
<script type="text/html" id="node-template">
<div class="row" ></div>
<span class="button switch" ></span>
<a >
<span class="button" ></span>
<span class="node_name" ></span>
</a>
<ul ></ul>
</script>
<!-- TEMPLATES End-->
<div id="drag-helper-template" style="display: none">
<div class="drag-helper">
<div class="item-background"></div>
<div class="item-content">
<div class="clip grid-icon"></div>
</div>
<div class="dragging-stop">
<div class="cancel-image"></div>
</div>
<div class="dragging-counter" >
<span ></span>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
<!-- drag&drop + selectable build (includes customizations for RichFilemanager) -->
<script type="text/javascript" src="scripts/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/jquery-browser.js"></script>
<script type="text/javascript" src="scripts/knockout-3.4.0.js"></script>
<script type="text/javascript" src="scripts/jquery-mousewheel/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="scripts/jquery.splitter/dist/jquery-splitter.js"></script>
<script type="text/javascript" src="scripts/jquery.contextmenu/dist/jquery.contextMenu.min.js"></script>
<script type="text/javascript" src="scripts/alertify.js/dist/js/alertify.js"></script>
<script type="text/javascript" src="scripts/clipboard.js/dist/clipboard.min.js"></script>
<script type="text/javascript" src="scripts/jquery.fileDownload/jquery.fileDownload.min.js"></script>
<script type="text/javascript" src="scripts/javascript-templates/js/tmpl.min.js"></script>
<script type="text/javascript" src="scripts/toast/lib/toast.min.js"></script>
<script type="text/javascript" src="scripts/purl/purl.min.js"></script>
<!-- Load filemanager script -->
<script type="text/javascript" src="scripts/filemanager.js"></script>
<script type="text/javascript" src="config/filemanager.init.js"></script>
<!-- Start RichFilemanager plugin -->
<script type="application/javascript">
$(function() {
$('.fm-container').richFilemanager();
});
</script>
</body>
</html>