Skip to content

Commit

Permalink
bugfix: scrollbar issue with renderer enabled in view mode #88
Browse files Browse the repository at this point in the history
  • Loading branch information
@psolom
psolom committed Mar 12, 2017
1 parent 397e496 commit dec891e
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 66 deletions.
16 changes: 9 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@

<div class="view-items-wrapper" data-bind="visible: !loadingView() && !previewFile()">
<!-- ko if: config().manager.renderer.position === 'top' && itemsModel.descriptivePanel.renderer() -->
<div data-bind="visible: itemsModel.descriptivePanel.content()">
<!-- ko template: {name: 'renderer-template', data: itemsModel.descriptivePanel, afterRender: itemsModel.initiateRenderer} --><!-- /ko -->
<div class="fm-renderer-wrapper" data-bind="visible: itemsModel.descriptivePanel.content()">
<!-- ko template: {name: 'renderer-template', data: itemsModel.descriptivePanel} --><!-- /ko -->
</div>
<!-- /ko -->

Expand Down Expand Up @@ -182,8 +182,8 @@
</div>

<!-- ko if: config().manager.renderer.position === 'bottom' && itemsModel.descriptivePanel.renderer() -->
<div data-bind="visible: itemsModel.descriptivePanel.content()">
<!-- ko template: {name: 'renderer-template', data: itemsModel.descriptivePanel, afterRender: itemsModel.initiateRenderer} --><!-- /ko -->
<div class="fm-renderer-wrapper" data-bind="visible: itemsModel.descriptivePanel.content()">
<!-- ko template: {name: 'renderer-template', data: itemsModel.descriptivePanel} --><!-- /ko -->
</div>
<!-- /ko -->
</div>
Expand Down Expand Up @@ -235,7 +235,7 @@
<!-- 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 id="fm-js-editor-content" name="content" data-bind="textInput: editor.content()"></textarea>
<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>
Expand Down Expand Up @@ -263,7 +263,7 @@
<!-- /ko -->
<!-- ko if: viewer.type() === 'renderer' && renderer.renderer() -->
<div data-bind="visible: !editor.enabled() || editor.interactive()">
<!-- ko template: {name: 'renderer-template', data: renderer, afterRender: initiateRenderer} --><!-- /ko -->
<!-- ko template: {name: 'renderer-template', data: renderer} --><!-- /ko -->
</div>
<!-- /ko -->
</div>
Expand Down Expand Up @@ -341,14 +341,16 @@ <h1 data-bind="text: rdo().attributes.name, attr: {title: rdo().id}"></h1>

<!-- 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 id="fm-js-viewer-content" data-bind="textInput: content()"></textarea>
<textarea class="fm-cm-renderer-content" data-bind="textInput: content()"></textarea>
<!-- /ko -->
</div>
<!-- /ko -->
</script>

<script type="text/html" id="preview-editor-controls">
Expand Down
53 changes: 26 additions & 27 deletions scripts/filemanager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,9 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
$footer = $wrapper.children('.fm-footer'),
$fileinfo = $splitter.children('.fm-fileinfo'),
$filetree = $splitter.children('.fm-filetree'),
$viewItems = $fileinfo.find('.view-items'),
$viewItemsWrapper = $fileinfo.find('.view-items-wrapper'),
$previewWrapper = $fileinfo.find('.fm-preview-wrapper'),
$viewItems = $viewItemsWrapper.find('.view-items'),
$uploadButton = $uploader.children('.fm-upload'),

config = null, // configuration options
Expand Down Expand Up @@ -466,7 +467,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)

return $wrapper.append($cloned.html());
},
appendTo: config.customScrollbar.enabled ? $fileinfo.find('.view-items-wrapper').find('.mCustomScrollBox') : $fileinfo,
appendTo: config.customScrollbar.enabled ? $viewItemsWrapper.find('.mCustomScrollBox') : $fileinfo,
start: function(event, ui) {
if(!koItem.selected()) {
fmModel.itemsModel.unselectItems(false);
Expand Down Expand Up @@ -535,7 +536,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
}
};

$viewItems.selectable({
$viewItems.selectable({
filter: "li:not(.directory-parent), tbody > tr:not(.directory-parent)",
cancel: ".directory-parent, thead",
disabled: !config.manager.selection.enabled,
Expand Down Expand Up @@ -708,7 +709,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
}
});

$fileinfo.find('.view-items-wrapper').mCustomScrollbar({
$viewItemsWrapper.mCustomScrollbar({
theme: config.customScrollbar.theme,
scrollButtons: {
enable: config.customScrollbar.button
Expand Down Expand Up @@ -945,16 +946,13 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
});

this.initiateEditor = function(elements) {
preview_model.editor.createInstance(preview_model.rdo().attributes.extension, 'fm-js-editor-content', {
var textarea = $previewWrapper.find('.fm-cm-editor-content')[0];
preview_model.editor.createInstance(preview_model.rdo().attributes.extension, textarea, {
readOnly: false,
styleActiveLine: true
});
};

this.initiateRenderer = function(elements) {
preview_model.renderer.setContainer(elements);
};

// fires specific action by clicking toolbar buttons in detail view
this.bindToolbar = function(action) {
if (has_capability(preview_model.rdo(), action)) {
Expand Down Expand Up @@ -1411,10 +1409,6 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
return new ItemObject(resourceObject);
};

this.initiateRenderer = function(elements) {
items_model.descriptivePanel.setContainer(elements);
};

this.addNew = function(dataObjects) {
if(!$.isArray(dataObjects)) {
dataObjects = [dataObjects];
Expand Down Expand Up @@ -1482,7 +1476,9 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
items_model.descriptivePanel.content(null);

$.each(dataObjects, function (i, resourceObject) {
if (config.manager.renderer.position && resourceObject.attributes.name.toLowerCase() === config.manager.renderer.indexFile.toLowerCase()) {
if (config.manager.renderer.position && typeof config.manager.renderer.indexFile === 'string' &&
resourceObject.attributes.name.toLowerCase() === config.manager.renderer.indexFile.toLowerCase()
) {
items_model.descriptivePanel.setRenderer(resourceObject);
// load and render index file content
previewItem(items_model.descriptivePanel.rdo()).then(function(response) {
Expand Down Expand Up @@ -2024,10 +2020,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
}
});

// make sure html is rendered
setTimeout(function() {
render_model.renderer().processDomElements();
}, 0);
render_model.renderer().processDomElements($containerElement);
};

var CodeMirrorRenderer = function() {
Expand All @@ -2040,11 +2033,15 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
render_model.content(data);
};

this.processDomElements = function() {
instance.createInstance(render_model.rdo().attributes.extension, 'fm-js-viewer-content', {
readOnly: 'nocursor',
styleActiveLine: false
});
this.processDomElements = function($container) {
if (!instance.instance) {
var textarea = $container.find('.fm-cm-renderer-content')[0];
instance.createInstance(render_model.rdo().attributes.extension, textarea, {
readOnly: 'nocursor',
styleActiveLine: false,
lineNumbers: false
});
}
};
};

Expand Down Expand Up @@ -2099,7 +2096,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
setLinksBehavior();
};

this.processDomElements = function() {};
this.processDomElements = function($container) {};

function setLinksBehavior() {
// add onClick events to local .md file links (to perform AJAX previews)
Expand Down Expand Up @@ -2155,7 +2152,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
}
};

this.createInstance = function(extension, elementId, options) {
this.createInstance = function(extension, element, options) {
var cm,
defaults = {
readOnly: 'nocursor',
Expand All @@ -2175,7 +2172,7 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
}
};

cm = CodeMirror.fromTextArea(document.getElementById(elementId), $.extend({}, defaults, options));
cm = CodeMirror.fromTextArea(element, $.extend({}, defaults, options));

cm.on("changes", function(cm, change) {
editor_model.content(cm.getValue());
Expand All @@ -2194,7 +2191,9 @@ $.richFilemanagerPlugin = function(element, pluginOptions)
editor_model.enabled(true);
editor_model.instance.setValue(content);
editor_model.instance.setOption('mode', editor_model.mode());
editor_model.instance.refresh();
setTimeout(function() {
editor_model.instance.refresh();
}, 0);
}

function includeAssets(extension) {
Expand Down
60 changes: 33 additions & 27 deletions styles/filemanager.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -341,9 +341,36 @@ html[data-useragent*='MSIE 11.0'] .fm-container #newfile {
width: 70%;
}

.fm-container .view-items-wrapper .fm-renderer-container {
.fm-container .fm-fileinfo .view-items-wrapper .fm-renderer-wrapper {
margin-top: 25px;
margin-bottom: 25px;
flex: 0 1 auto;
}

.fm-container .fm-fileinfo div.CodeMirror {
text-align: left;
height: auto;
}

.fm-container .fm-fileinfo div.CodeMirror * {
font-family: monospace;
line-height: 17px;
font-size: 14px;
}

.fm-container .fm-fileinfo div.CodeMirror.CodeMirror-fullscreen {
width: 100%;
margin: 0;
z-index: 9;
}

.fm-container .fm-fileinfo .fm-renderer-container div.CodeMirror {
padding: 10px;
background-color: #F7F7F7;
}

.fm-container .fm-preview .fm-preview-edit-panel div.CodeMirror {
background-color: #FFFFFF;
}

.fm-container div#tools {
Expand Down Expand Up @@ -427,31 +454,6 @@ html[data-useragent*='MSIE 11.0'] .fm-container #newfile {
color: black;
}

.fm-container .fm-preview div.CodeMirror {
text-align: left;
height: auto;
}

.fm-container .fm-preview div.CodeMirror * {
font-family: monospace;
line-height: 17px;
font-size: 14px;
}

.fm-container .fm-preview div.CodeMirror.CodeMirror-fullscreen {
width: 100%;
margin: 0;
z-index: 9;
}

.fm-container .fm-preview .fm-preview-view-panel div.CodeMirror {
background-color: #F7F7F7;
}

.fm-container .fm-preview .fm-preview-edit-panel div.CodeMirror {
background-color: #FFFFFF;
}

.fm-container .fm-preview .fm-preview-viewer.side-by-side-panels .fm-preview-edit-panel {
float: left;
width: 49%;
Expand Down Expand Up @@ -601,16 +603,20 @@ html[data-useragent*='MSIE 11.0'] .fm-container #newfile {
/* to expand selectable area to 100% vertically in case no scroll */
.fm-container .fm-fileinfo .mCSB_container.mCS_no_scrollbar_y {
height: 100%;
display: flex;
flex-flow: column;
}

.fm-container .view-items-wrapper {
height: 100%;
display: flex;
flex-flow: column;
}

.fm-container .view-items {
position: relative;
width: 100%;
height: 100%;
flex: 1 1 auto;
}

.fm-container .view-items .grid {
Expand Down
5 changes: 0 additions & 5 deletions userfiles/.gitignore
View file

This file was deleted.

0 comments on commit dec891e

Please sign in to comment.