Commit 7f3c77bb authored by ThorbenQuast's avatar ThorbenQuast
Browse files

editor: some fixes in the previews (incl. fix #2048)

parent 249d31d2
......@@ -161,7 +161,7 @@
}
.codeeditor-right-bottom .codeeditor-preview img {
padding-top: 24px;
height: 100px;
height: auto;
width: auto;
}
.codeeditor-ace div.ace_scrollbar {
......
......@@ -62,6 +62,29 @@
<button class="btn btn-default select-button" type="button">
<i class="glyphicon glyphicon-folder-close"></i>
</button>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" title="Thumbnail sizes">
<i class="glyphicon glyphicon-eye-open"></i>
</button>
<ul id="zoom" class="dropdown-menu" role="menu">
<li data-action="in">
<a>
<i class="glyphicon glyphicon-zoom-in"></i>
+50%
</a>
</li>
<li data-action="default">
<a>
<i class="glyphicon glyphicon-th-large"></i>
Default
</a>
</li>
<li data-action="out">
<a>
<i class="glyphicon glyphicon-zoom-out"></i>
-33%
</a>
</li>
</ul>
</span>
<input type="text" class="form-control" id="path-input" style="height:35px" placeholder="Directory to inspect" />
</div>
......
......@@ -325,16 +325,18 @@ var CodeEditor = Emitter.extend({
save: function(callback, option, path) {
var self = this;
var isNew = option == "new";
this.setupAutoSave();
this.removeAutoSaveFile();
if (this.path && !this.view.isModified() && option != "new") {
if (this.path && !this.view.isModified() && !isNew) {
if ($.isFunction(callback))
callback();
return this;
}
if (this.writable == false && option != "new") {
if (this.writable == false && !isNew) {
console.log("No writing access!");
if ($.isFunction(callback))
callback();
......@@ -364,8 +366,9 @@ var CodeEditor = Emitter.extend({
self.lastContent = self.getContent();
self.checkModifications();
self.setMode();
self.view.commandLine.handleSave(option == "new");
self.view.preview.setPath(self.path, true);
self.view.commandLine.handleSave(isNew);
if (isNew)
self.view.preview.setPath(self.path, true);
if ($.isFunction(callback))
callback();
}
......
......@@ -78,8 +78,8 @@ var getDefaultCodeEditorPreferences = function() {
},
// preview
previewHeight: {
description: "The height of the preview pictures.",
previewSize: {
description: "The size of the preview pictures.",
type: "integer",
value: 150,
range: [50, 500, 10]
......
......@@ -6,13 +6,12 @@ var CodeEditorPreview = Emitter.extend({
this.view = view;
this.editor = view.editor;
this.loaderBtn = null;
this.zoomBtn = null;
this.loaderInterval = null;
this.previewArea = null;
this.pathInput = null;
this.previewChanged = true;
this.previewUpdating = false;
this.inputFocused = false;
this.shadowTmpl = "inset {0}px 0px #428cba";
......@@ -21,6 +20,8 @@ var CodeEditorPreview = Emitter.extend({
this.allowedExtensions = ["png", "jpg", "jpeg", "bmp"];
this.previewData = [];
this.thumbnailSize = null;
},
setup: function(node) {
......@@ -28,12 +29,20 @@ var CodeEditorPreview = Emitter.extend({
var rightBottomNode = node.find(".codeeditor-right-bottom");
this.loaderBtn = $(".loader-button", rightBottomNode);
this.zoomBtn = $("#zoom", rightBottomNode);
this.previewArea = $(".well", rightBottomNode);
this.pathInput = $("#path-input", rightBottomNode);
// events
//set the previewSize
this.zoomBtn.find("li").click(function() {
var action = $(this).data("action");
self.thumbnailSize = self.giveThumbnailSize(action);
self.previewChanged = true;
});
//open fileselector
$(".select-button", rightBottomNode).click(this.selectPath.bind(this));
this.pathInput.on("keypress", function(event) {
if (event.keyCode == 13)
this.blur();
......@@ -43,8 +52,8 @@ var CodeEditorPreview = Emitter.extend({
self.previewChanged = true;
self.inputFocused = false;
});
this.view.onSocket("watch", function(data){
this.view.onSocket("watch", function(data) {
if (data.watch_id != "preview") {
return;
}
......@@ -54,6 +63,8 @@ var CodeEditorPreview = Emitter.extend({
self.previewChanged = true;
});
this.thumbnailSize = this.giveThumbnailSize();
if (this.editor.path)
this.setPath(this.editor.path, true);
......@@ -70,7 +81,7 @@ var CodeEditorPreview = Emitter.extend({
},
clearInterval: function() {
if (this.loaderInterval!==null) {
if (this.loaderInterval !== null) {
clearInterval(this.loaderInterval);
}
return this;
......@@ -78,7 +89,6 @@ var CodeEditorPreview = Emitter.extend({
refresh: function() {
var self = this;
if (this.inputFocused) {
return this;
}
......@@ -88,20 +98,23 @@ var CodeEditorPreview = Emitter.extend({
if (!path) {
return this;
}
if (this.previewUpdating) {
return this;
}
if (!this.previewChanged) {
return this;
}
this.previewUpdating = true;
this.previewChanged = false;
//clear the entire preview
this.clearPreviews();
if (path.substr(-1) == "/")
path = path.substr(0, path.length - 1);
self.view.GET(vispa.url.dynamic("/ajax/fs/filelist"), {
path: path,
filefilter: "\\.(" + this.allowedExtensions.join("|") + ")$",
......@@ -109,16 +122,15 @@ var CodeEditorPreview = Emitter.extend({
watch_id: "preview"
}).done(function(res) {
var files = $.grep(res.filelist, function(file) {
return file.type == "f" && ~self.allowedExtensions.indexOf(file.
name.split(".").pop().toLowerCase());
return file.type == "f" && ~self.allowedExtensions.indexOf(file.name.split(".").pop().toLowerCase());
});
var previewData = [];
files.forEach(function(file) {
var filePath = path + "/" + file.name;
var src = vispa.url.dynamic(vispa.format(
"/fs/thumbnail?path={0}&height={1}&_workspaceId={2}&_mtime={3}",
"/fs/thumbnail?path={0}&height={1}&width={1}&_workspaceId={2}&_mtime={3}",
filePath,
self.view.getPreference("previewHeight"),
self.thumbnailSize,
self.view.getWorkspaceId(),
file.mtime
));
......@@ -142,25 +154,10 @@ var CodeEditorPreview = Emitter.extend({
return a.mtime - b.mtime;
});
var processedFilePaths = [];
previewData.forEach(function(data) {
processedFilePaths.push(data.filePath);
var _data = self.getPreviewData(data.filePath);
if (_data) {
// there is already an image with this filePath, compare mtime's
if (data.mtime != _data.mtime)
self.removePreview(data.filePath);
else
return;
}
self.addPreview(data);
});
self.previewData.forEach(function(data) {
if (!~processedFilePaths.indexOf(data.filePath))
self.removePreview(data.filePath);
});
self.previewUpdating = false;
}).fail(function() {
self.previewUpdating = false;
......@@ -169,6 +166,13 @@ var CodeEditorPreview = Emitter.extend({
return this;
},
clearPreviews: function() {
this.previewData = [];
this.previewArea.children().each(function(i, child) {
$(child).remove();
});
},
getPreviewData: function(filePath) {
var data = null;
this.previewData.forEach(function(_data) {
......@@ -184,16 +188,6 @@ var CodeEditorPreview = Emitter.extend({
return this;
},
removePreview: function(filePath) {
// remove the node
this._removePreviewNode(filePath);
// remove the data entry
var idx = this.previewData.indexOf(this.getPreviewData(filePath));
if (~idx)
this.previewData.splice(idx, 1);
return this;
},
_addPreviewNode: function(data) {
var node = $(this.previewTmpl).prependTo(this.previewArea);
node.find("span").html(data.filePath.split("/").pop());
......@@ -205,19 +199,6 @@ var CodeEditorPreview = Emitter.extend({
return this;
},
_removePreviewNode: function(filePath) {
var data = this.getPreviewData(filePath);
if (!data)
return this;
this.previewArea.children().each(function(i, child) {
child = $(child);
if (child.find("img").attr("src") == data.src)
child.remove();
});
return this;
},
selectPath: function() {
var self = this;
var args = {
......@@ -247,5 +228,24 @@ var CodeEditorPreview = Emitter.extend({
this.refresh();
}
return this;
},
giveThumbnailSize: function(action) {
var size;
switch (action) {
case "default":
size = this.view.getPreference("previewSize");
break;
case "in":
size = Math.round(this.thumbnailSize * 1.5);
break;
case "out":
size = Math.round(this.thumbnailSize * 2.0 / 3.0);
break;
default:
size = this.view.getPreference("previewSize");
}
return size;
}
});
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment