<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Rich FileManager</title>

<link rel="stylesheet" type="text/css" href="src/css/libs-main.css" />

<link rel="stylesheet" type="text/css" href="src/css/filemanager.min.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 -->

<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" data-bind="text: breadcrumbsModel.getLabel"></div>

<div data-bind="foreach: {data: breadcrumbsModel.items, as: 'bcItem'}">

<div data-bind="text: bcItem.label, click: bcItem.goto, css: bcItem.itemClass()"></div>

<!-- ko if: !bcItem.active -->

<div class="separator">&gt;</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" data-bind="click: headerModel.navLevelUp, attr: {title: lg.nav_level_up}">

<span>&nbsp;</span>

</button>

<button class="btn btn-nav-home no-label" type="button" data-bind="click: headerModel.navHome, attr: {title: lg.nav_home}">

<span>&nbsp;</span>

</button>

<button class="btn btn-nav-refresh no-label" type="button" data-bind="click: headerModel.navRefresh, attr: {title: lg.nav_refresh}">

<span>&nbsp;</span>

</button>

</div>

<div class="button-group">

<button class="separator" type="button">&nbsp;</button>

</div>

<div class="button-group viewmode-controls">

<button class="btn btn-grid-mode no-label" type="button" data-bind="click: headerModel.displayGrid, attr: {title: lg.grid_view}, css: {active: viewMode() === 'grid'}">

<span>&nbsp;</span>

</button>

<button class="btn btn-list-mode no-label" type="button" data-bind="click: headerModel.displayList, attr: {title: lg.list_view}, css: {active: viewMode() === 'list'}">

<span>&nbsp;</span>

</button>

</div>

<div class="button-group">

<button class="separator" type="button">&nbsp;</button>

</div>

<div class="button-group filter-controls">

<button class="btn btn-filter-image no-label" type="button" data-bind="event: {click: function(data, event) {filterModel.filter('image')}}, attr: {title: lg.filter_image}, css: {active: filterModel.name() === 'image'}"><span>&nbsp;</span></button>

<button class="btn btn-filter-media no-label" type="button" data-bind="event: {click: function(data, event) {filterModel.filter('media')}}, attr: {title: lg.filter_media}, css: {active: filterModel.name() === 'media'}"><span>&nbsp;</span></button>

<button class="btn btn-filter-office no-label" type="button" data-bind="event: {click: function(data, event) {filterModel.filter('office')}}, attr: {title: lg.filter_office}, css: {active: filterModel.name() === 'office'}"><span>&nbsp;</span></button>

<button class="btn btn-filter-archive no-label" type="button" data-bind="event: {click: function(data, event) {filterModel.filter('archive')}}, attr: {title: lg.filter_archive}, css: {active: filterModel.name() === 'archive'}"><span>&nbsp;</span></button>

<!--<button class="btn btn-filter-audio no-label" type="button" data-bind="event: {click: function(data, event) {filterModel.filter('audio')}}, attr: {title: lg.filter_audio}, css: {active: filterModel.name() === 'audio'}"><span>&nbsp;</span></button>-->

<!--<button class="btn btn-filter-video no-label" type="button" data-bind="event: {click: function(data, event) {filterModel.filter('video')}}, attr: {title: lg.filter_video}, css: {active: filterModel.name() === 'video'}"><span>&nbsp;</span></button>-->

<button class="btn btn-filter-reset no-label" type="button" data-bind="event: {click: function(data, event) {filterModel.reset()}}, attr: {title: lg.filter_reset}, css: {active: filterModel.name() === null}"><span>&nbsp;</span></button>

</div>

<div class="button-group">

<button class="separator" type="button">&nbsp;</button>

</div>

<!-- ko if: clipboardModel.enabled() -->

<div class="button-group clipboard-controls">

<button class="btn btn-clipboard-copy no-label" type="button" data-bind="click: clipboardModel.copy, visible: clipboardModel.hasCapability('copy'), attr: {title: lg.clipboard_copy}"><span>&nbsp;</span></button>

<button class="btn btn-clipboard-cut no-label" type="button" data-bind="click: clipboardModel.cut, visible: clipboardModel.hasCapability('cut'), attr: {title: lg.clipboard_cut}"><span>&nbsp;</span></button>

<button class="btn btn-clipboard-paste no-label" type="button" data-bind="click: clipboardModel.paste, visible: clipboardModel.hasCapability('paste'), attr: {title: lg.clipboard_paste_full}, css: {disabled: clipboardModel.itemsNum() === 0}"><span>&nbsp;</span></button>

<button class="btn btn-clipboard-clear no-label" type="button" data-bind="click: clipboardModel.clear, visible: clipboardModel.hasCapability('clear'), attr: {title: lg.clipboard_clear_full}, css: {disabled: clipboardModel.itemsNum() === 0}"><span>&nbsp;</span></button>

</div>

<div class="button-group">

<button class="separator" type="button">&nbsp;</button>

</div>

<!-- /ko -->

<!-- ko if: isCapable('upload') && !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 data-bind="text: lg.action_upload"></span>

</button>

</form>

</div>

<!-- /ko -->

<!-- ko if: isCapable('createFolder') && !browseOnly() -->

<div class="button-group create-controls">

<button class="btn btn-create-folder" type="button" data-bind="click: headerModel.createFolder">

<span data-bind="text: lg.new_folder"></span>

</button>

</div>

<!-- /ko -->

<!-- ko if: headerModel.langSwitcher -->

<div class="button-group">

<select class="btn lang-selector" data-bind="value: currentLang, options: config().language.available, optionsText: function(item) {return item.toUpperCase();}, event: {change: function(data, event) {headerModel.switchLang(event)}}"></select>

</div>

<!-- /ko -->

<!-- ko if: headerModel.closeButton() -->

<div class="button-group">

<button class="btn btn-close-window no-label" type="button" data-bind="click: headerModel.closeButtonOnClick, attr: {title: lg.close}">

<span>&nbsp;</span>

</button>

</div>

<!-- /ko -->

</div>

</div>

<div class="fm-splitter">

<div class="fm-filetree" data-bind="visible: config().filetree.enabled">

<div data-bind="template: {name: 'node-parent-template', foreach: treeModel.rootNode.children, as: 'koNode', afterRender: treeModel.nodeRendered}"></div>

</div>

<div class="fm-fileinfo">

<div class="fm-loading-view" data-bind="visible: loadingView()"></div>

<div class="view-items-wrapper" data-bind="visible: !loadingView() && !previewFile()">

<!-- ko if: config().manager.renderer.position === 'top' && itemsModel.descriptivePanel.renderer() -->

<div class="fm-renderer-wrapper" data-bind="visible: itemsModel.descriptivePanel.content()">

<!-- ko template: {name: 'renderer-template', data: itemsModel.descriptivePanel} --><!-- /ko -->

</div>

<!-- /ko -->

<div class="view-items">

<ul class="grid" data-bind="visible: viewMode() === 'grid'">

<!-- ko with: itemsModel.parentItem -->

<!-- ko if: $data -->

<li class="directory-parent" data-bind="event: {click: open, dblclick: open}, droppableView: $data, css: itemClass()" oncontextmenu="return false;">

<div class="clip">

<img src="" class="grid-icon ico_folder_parent" data-bind="attr: {src: null, width: $root.config().viewer.image.thumbMaxWidth}" />

</div>

<p>..</p>

</li>

<!-- /ko -->

<!-- /ko -->

<!-- ko foreach: {data: itemsModel.objects, as: 'koItem'} -->

<li data-bind="event: {click: koItem.open, dblclick: koItem.open, mousedown: koItem.mouseDown}, droppableView: koItem, visible: koItem.visible, attr: {title: koItem.title()}, css: koItem.itemClass()">

<div class="item-background"></div>

<div class="item-content" data-bind="draggableView: koItem">

<div class="clip">

<!-- ko if: koItem.lazyPreview -->

<img src="" data-bind="css: koItem.gridIconClass(), attr: {'data-original': koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}"/>

<!-- /ko -->

<!-- ko if: !koItem.lazyPreview -->

<img src="" data-bind="css: koItem.gridIconClass(), attr: {src: koItem.cdo.imageUrl, width: koItem.cdo.previewWidth}"/>

<!-- /ko -->

</div>

<p data-bind="text: koItem.rdo.attributes.name"></p>

</div>

</li>

<!-- /ko -->

</ul>

<table class="list" data-bind="visible: viewMode() === 'list'">

<thead>

<tr class="rowHeader" data-bind="with: tableViewModel">

<th data-bind="click: thName.sort, css: thName.sortClass()"><span data-bind="text: $root.lg.name"></span></th>

<th data-bind="click: thType.sort, css: thType.sortClass()"><span data-bind="text: $root.lg.type"></span></th>

<th data-bind="click: thSize.sort, css: thSize.sortClass()"><span data-bind="text: $root.lg.size"></span></th>

<th data-bind="click: thDimensions.sort, css: thDimensions.sortClass()"><span data-bind="text: $root.lg.dimensions"></span></th>

<th data-bind="click: thModified.sort, css: thModified.sortClass()"><span data-bind="text: $root.lg.modified"></span></th>

</tr>

</thead>

<tbody>

<!-- ko with: itemsModel.parentItem -->

<!-- ko if: $data -->

<tr class="directory-parent" data-bind="event: {click: open, dblclick: open}, droppableView: $data, css: itemClass()" oncontextmenu="return false;">

<td>

<div class="list-item">..</div>

</td>

<td></td>

<td></td>

<td></td>

<td></td>

</tr>

<!-- /ko -->

<!-- /ko -->

<!-- ko foreach: {data: itemsModel.objects, as: 'koItem'} -->

<tr data-bind="event: {click: koItem.open, dblclick: koItem.open, mousedown: koItem.mouseDown}, droppableView: koItem, visible: koItem.visible, attr: {title: koItem.title()}, css: koItem.itemClass()" oncontextmenu="return false;">

<td>

<div class="list-item" data-bind="draggableView: koItem">

<span class="list-icon" data-bind="css: koItem.listIconClass()"></span>

<span data-bind="text: koItem.rdo.attributes.name"></span>

</div>

</td>

<td data-bind="text: koItem.cdo.extension"></td>

<td data-bind="text: koItem.cdo.sizeFormatted"></td>

<td data-bind="text: koItem.cdo.dimensions"></td>

<td data-bind="text: koItem.cdo.modifiedFormatted"></td>

</tr>

<!-- /ko -->

</tbody>

</table>

</div>

<!-- ko if: config().manager.renderer.position === 'bottom' && itemsModel.descriptivePanel.renderer() -->

<div class="fm-renderer-wrapper" data-bind="visible: itemsModel.descriptivePanel.content()">

<!-- ko template: {name: 'renderer-template', data: itemsModel.descriptivePanel} --><!-- /ko -->

</div>

<!-- /ko -->

</div>

<div class="fm-preview-wrapper" data-bind="visible: !loadingView() && previewFile()">

<!-- ko template: {if: previewFile(), afterRender: previewModel.afterRender} -->

<div class="fm-preview" data-bind="with: previewModel">

<div class="fm-preview-toolbar button-group">

<form id="fm-js-preview-toolbar">

<button class="btn btn-file-preview-close" type="button" data-bind="click: closePreview">

<span data-bind="text: $root.lg.close"></span>

</button>

<!-- ko if: buttonVisibility('select') -->

<button class="btn btn-file-select" type="button" data-bind="event: {click: function(data, event) {bindToolbar('select')}}">

<span data-bind="text: $root.lg.action_select"></span>

</button>

<!-- /ko -->

<!-- ko if: buttonVisibility('download') -->

<button class="btn btn-file-download" type="button" data-bind="event: {click: function(data, event) {bindToolbar('download')}}">

<span data-bind="text: $root.lg.action_download"></span>

</button>

<!-- /ko -->

<!-- ko if: buttonVisibility('rename') -->

<button class="btn btn-file-rename" type="button" data-bind="event: {click: function(data, event) {bindToolbar('rename')}}">

<span data-bind="text: $root.lg.action_rename"></span>

</button>

<!-- /ko -->

<!-- ko if: buttonVisibility('move') -->

<button class="btn btn-file-move" type="button" data-bind="event: {click: function(data, event) {bindToolbar('move')}}">

<span data-bind="text: $root.lg.action_move"></span>

</button>

<!-- /ko -->

<!-- ko if: buttonVisibility('delete') -->

<button class="btn btn-file-delete" type="button" data-bind="event: {click: function(data, event) {bindToolbar('delete')}}">

<span data-bind="text: $root.lg.action_delete"></span>

</button>

<!-- /ko -->

<!-- ko if: viewer.isEditable() && !editor.enabled() -->

<button class="btn btn-file-edit" type="button" data-bind="click: editFile">

<span data-bind="text: $root.lg.editor_edit"></span>

</button>

<!-- /ko -->

<!-- ko if: viewer.isEditable() && editor.enabled() -->

<button class="btn btn-file-save" type="button" data-bind="click: saveFile">

<span data-bind="text: $root.lg.editor_save"></span>

</button>

<button class="btn btn-file-editor-close" type="button" data-bind="click: closeEditor">

<span data-bind="text: $root.lg.editor_quit"></span>

</button>

<!-- /ko -->

</form>

</div>

<div class="fm-preview-viewer" data-bind="css: {'side-by-side-panels': editor.enabled() && editor.isInteractive()}">

<!-- ko template: {if: viewer.isEditable(), afterRender: initiateEditor} -->

<div class="fm-preview-edit-panel" data-bind="visible: editor.enabled()">

<form id="fm-js-editor-form">

<textarea class="fm-cm-editor-content" name="content" data-bind="textInput: editor.content()"></textarea>

<input type="hidden" name="mode" value="savefile" />

<input type="hidden" name="path" value="" data-bind="textInput: rdo().id" />

</form>

</div>

<!-- /ko -->

<div class="fm-preview-view-panel">

<!-- ko if: viewer.type() === 'default' -->

<img src="" data-bind="css: previewIconClass(), attr: {src: null}" />

<!-- /ko -->

<!-- ko if: viewer.type() === 'image' -->

<img src="" data-bind="css: previewIconClass(), attr: {src: viewer.url()}" />

<!-- /ko -->

<!-- ko if: viewer.type() === 'audio' -->

<audio src="" controls="controls" data-bind="attr: {src: viewer.url()}"></audio>

<!-- /ko -->

<!-- ko if: viewer.type() === 'video' -->

<video src="" controls="controls" data-bind="attr: {src: viewer.url(), width: viewer.options().width, height: viewer.options().height}"></video>

<!-- /ko -->

<!-- ko if: viewer.type() === 'onlyoffice' -->

<iframe src="" data-bind="attr: {src: viewer.url(), width: viewer.options().width, height: viewer.options().height}" allowfullscreen webkitallowfullscreen></iframe>

<!-- /ko -->

<!-- ko if: viewer.type() === 'opendoc' -->

<iframe src="" data-bind="attr: {src: viewer.url(), width: viewer.options().width, height: viewer.options().height}" allowfullscreen webkitallowfullscreen></iframe>

<!-- /ko -->

<!-- ko if: viewer.type() === 'google' -->

<iframe src="" data-bind="attr: {src: viewer.url(), width: viewer.options().width, height: viewer.options().height}" allowfullscreen webkitallowfullscreen></iframe>

<!-- /ko -->

<!-- ko if: viewer.type() === 'iframe' && !editor.enabled() -->

<iframe src="" data-bind="attr: {src: viewer.url(), width: viewer.options().width, height: viewer.options().height}" allowfullscreen webkitallowfullscreen></iframe>

<!-- /ko -->

<!-- ko if: viewer.type() === 'renderer' && renderer.renderer() -->

<div data-bind="visible: !editor.enabled() || editor.isInteractive()">

<!-- ko template: {name: 'renderer-template', data: renderer} --><!-- /ko -->

</div>

<!-- /ko -->

</div>

</div>

<div class="fm-preview-title">

<h1 data-bind="text: rdo().attributes.name, attr: {title: rdo().id}"></h1>

<div class="fm-preview-title-controls">

<a href="#" class="btn-copy-url" data-bind="attr: {title: $root.lg.copy_to_clipboard, 'data-clipboard-text': viewer.pureUrl()}"></a>

<!-- ko if: viewer.isEditable() && !editor.enabled() && viewer.options().is_writable -->

<a href="#" class="btn-editor-open" data-bind="attr: {title: $root.lg.editor_edit}, click: editFile"></a>

<!-- /ko -->

<!-- ko if: viewer.isEditable() && editor.enabled() -->

<a href="#" class="btn-editor-save" data-bind="attr: {title: $root.lg.editor_save}, click: saveFile"></a>

<a href="#" class="btn-editor-quit" data-bind="attr: {title: $root.lg.editor_quit}, click: closeEditor"></a>

<!-- /ko -->

</div>

</div>

<div class="fm-preview-details">

<table>

<tr data-bind="visible: cdo().sizeFormatted">

<td data-bind="text: $root.lg.size"></td>

<td data-bind="text: cdo().sizeFormatted"></td>

</tr>

<tr data-bind="visible: cdo().dimensions">

<td data-bind="text: $root.lg.dimensions"></td>

<td data-bind="text: cdo().dimensions"></td>

</tr>

<tr data-bind="visible: cdo().createdFormatted">

<td data-bind="text: $root.lg.created"></td>

<td data-bind="text: cdo().createdFormatted"></td>

</tr>

<tr data-bind="visible: cdo().modifiedFormatted">

<td data-bind="text: $root.lg.modified"></td>

<td data-bind="text: cdo().modifiedFormatted"></td>

</tr>

</table>

</div>

</div>

<!-- /ko -->

</div>

</div>

</div>

<div class="fm-footer">

<div class="left">

<div class="search-box input-group" data-bind="visible: config().search.enabled">

<span class="input-group-addon clickable" data-bind="event: {click: searchModel.seekItems}">

<span class="icon search-icon"></span>

</span>

<input class="input-group-input" type="text" data-bind="value: searchModel.value, event: {keyup: searchModel.inputKeyUp}" />

<span class="input-group-addon clickable" data-bind="event: {click: searchModel.reset}">

<span class="icon reset-icon"></span>

</span>

</div>

</div>

<div class="right">

<div id="folder-info">

<span data-bind="text: itemsModel.objectsNumber() + ' ' + lg.items"></span> -

<span data-bind="text: lg.size + ': ' + itemsModel.objectsSize()"></span>

</div>

<div id="summary" data-bind="click: summaryModel.doSummarize"></div>

<a href="" target="_blank" id="link-to-project" data-bind="attr: {href: config().url, title: lg.support_fm + ' [' + lg.version + ' : ' + config().version + ']'}"></a>

</div>

<div style="clear: both"></div>

</div>

<!-- ko if: summaryModel.enabled() -->

<div id="summary-popup" data-bind="visible: false">

<div class="title" data-bind="text: lg.summary_title"></div>

<div class="line" data-bind="text: lg.summary_files + ': ' + summaryModel.files()"></div>

<div class="line" data-bind="text: lg.summary_folders + ': ' + summaryModel.folders(), visible: summaryModel.folders()"></div>

<div class="line" data-bind="text: lg.summary_size + ': ' + summaryModel.size()"></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" data-bind="html: content()"></div>

<!-- /ko -->

<!-- ko if: renderer().name === 'codeMirror' -->

<textarea class="fm-cm-renderer-content" data-bind="textInput: content()"></textarea>

<!-- /ko -->

</div>

<!-- /ko -->

</script>

<script type="text/html" id="node-parent-template">

<li data-bind="template: {name: 'node-template', data: koNode}, css: koNode.itemClass(), visible: koNode.visible"></li>

</script>

<script type="text/html" id="node-template">

<div class="row" data-bind="droppableTree: $data"></div>

<span class="button switch" data-bind="css: switcherClass(), click: switchNode"></span>

<a data-bind="attr: {class: cdo.cssItemClass}, event: {click: nodeClick, dblclick: nodeDblClick, mousedown: mouseDown}, draggableTree: $data">

<span class="button" data-bind="css: iconClass()"></span>

<span class="node_name" data-bind="text: nodeTitle(), attr: {title: title()}"></span>

</a>

<ul data-bind="template: {name: 'node-parent-template', if: children().length > 0, foreach: children, as: 'koNode', afterRender: $root.treeModel.nodeRendered}, css: clusterClass(), toggleNodeVisibility: $data"></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" data-bind="visible: itemsModel.selectedNumber() > 1">

<span data-bind="text: itemsModel.selectedNumber()"></span>

</div>

</div>

</div>

<script type="text/javascript" src="src/js/libs-main.js"></script>

<script type="text/javascript" src="src/js/filemanager.min.js"></script>

<script type="text/javascript" src="config/filemanager.init.js"></script>

<!-- Start RichFilemanager plugin -->

<script type="application/javascript">

$(function() {

$('.fm-container').richFilemanager();

});

</script>

</div>