Skip to content

GitLab

Commit 78c59873 authored by Fabian-Andree Heidemann's avatar Fabian-Andree Heidemann
Browse files

[file] outsource upload progressbar template fo .jade file

parent 9c85fccb
Hide whitespace changes
Inline Side-by-side
vispa/extensions/file/static/html/uploadProgressbar.html 0 → 100644
View file @ 78c59873
<div class="progress-row">
<div class="progress-title"></div>
<div class="glyphicon glyphicon-remove"></div>
<div class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-stop"></i>abort</div>
<div class="progress">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;" class="progress-bar progress-bar-primary progress-bar-striped active">0%</div>
</div>
</div>
\ No newline at end of file
vispa/extensions/file/static/html/uploadProgressbar.jade 0 → 100644
View file @ 78c59873
.progress-row
.progress-title
.glyphicon.glyphicon-remove
.btn.btn-xs.btn-danger
i.glyphicon.glyphicon-stop
| abort
.progress
.progress-bar.progress-bar-primary.progress-bar-striped.active(role="progressbar", aria-valuenow="0", aria-valuemin="0", aria-valuemax="100" style="width: 0%;") 0%
vispa/extensions/file/static/js/base/actions.js
View file @ 78c59873
define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/infodialog.html", "text!../../html/infodialogmore.html"], function($, JClass, openTmpl, infoTmpl, moreTmpl) {
define([
"jquery",
"jclass",
"text!../../html/openDialog.html",
"text!../../html/infodialog.html",
"text!../../html/infodialogmore.html",
"text!../../html/uploadProgressbar.html"
], function (
$,
JClass,
openTmpl,
infoTmpl,
moreTmpl,
progressbarTmpl
) {
var FileBaseActions = JClass._extend({
init: function(FileBase) {
init: function (FileBase) {
this.FileBase = FileBase;
this.selections = FileBase.selections;
this.removebool = false;
......@@ -9,7 +23,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
},
// Reimplemented by the actions of the filebrowser / -selector
openFolder: function(data) {
openFolder: function (data) {
// Make the function callable with a string or a selection.
// In this case it is possible because the selection contains only one element.
var newPath = "";
......@@ -25,7 +39,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
this.FileBase.instance.setState("path", newPath);
},
openFolderInNewTab: function(data) {
openFolderInNewTab: function (data) {
var newPath = "";
if (typeof data == "string") {
newPath = this.FileBase.helper.abspath(data);
......@@ -40,14 +54,14 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
});
},
openFile: function(data) {
openFile: function (data) {
var self = this;
var path = null;
if (typeof data == "string") {
path = this.FileBase.helper.abspath(data);
} else {
$.each(Object.keys(this.FileBase.selections.entries), function() {
$.each(Object.keys(this.FileBase.selections.entries), function () {
// file is equal to this
self.openFile(String(this));
});
......@@ -70,7 +84,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
if (ext !== null && ext.toLowerCase() == "zip") {
self.FileBase.instance.confirm(
"Do you want to decompress \"" + path.split("/").pop() + "\"?",
function(res) {
function (res) {
if (res) {
self.FileBase.instance.POST("/ajax/fs/decompress", {
"file": path
......@@ -86,7 +100,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
if (!handlers.length) {
// search for the link with the right id and trigger the lightbox plugin
var boxId = this.FileBase.helper.makeIDfromPath(path);
var lb = function() {
var lb = function () {
var box = $("a#" + boxId);
if (!box.length) return;
box.trigger("click");
......@@ -146,16 +160,16 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
}
},
_openWithCodeEditor: function(path) {
_openWithCodeEditor: function (path) {
this.FileBase.instance.spawnInstance("codeeditor", "CodeEditor", {
path: path
});
},
rename: function() {
rename: function () {
var self = this;
var fullpaths = Object.keys(this.FileBase.selections.entries);
$.each(fullpaths, function() {
$.each(fullpaths, function () {
var fullpath = this;
// get the filename
var name = self.FileBase.helper.filenameFromPath(fullpath);
......@@ -164,12 +178,12 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
// the default value is given at the end of the prompt command
// bootbox.prompt("Enter a new name",
self.FileBase.instance.prompt("Enter a new name", // -> Does not support default argument
function(newName) {
function (newName) {
if (newName == name || newName === null || newName === "" || newName ===
undefined) {
return;
}
self._rename(self.FileBase.instance.getState("path"), name, newName);
}, {
defaultValue: name
......@@ -178,7 +192,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
},
_rename: function(path, name, newName) {
_rename: function (path, name, newName) {
var self = this;
if (newName === null || newName === "" || newName === undefined) {
newName = name;
......@@ -190,7 +204,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
"path": path,
"name": name,
"new_name": newName
}, function(err) {
}, function (err) {
if (err) return;
// rename triggers 2 events, let's try to wait for both
self.FileBase.updateView(400);
......@@ -198,7 +212,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
return true;
},
copy: function() {
copy: function () {
$(".file-node").css("opacity", "1.0");
this.removebool = false;
this.entries = Object.keys(this.FileBase.selections.entries);
......@@ -210,7 +224,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
});
},
cut: function() {
cut: function () {
$(".file-node").css("opacity", "1.0");
this.removebool = true;
this.entries = Object.keys(this.FileBase.selections.entries);
......@@ -225,7 +239,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
}
},
paste: function() {
paste: function () {
var self = this;
var cookie = $.cookie("vispaFile");
if (cookie === undefined || cookie === null) {
......@@ -240,7 +254,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
"path": this.FileBase.instance.getState("path"),
"paths": JSON.stringify(paths),
"cut": cut
}, function() {
}, function () {
if (cut) {
self.removebool = false;
// delete cookie
......@@ -253,23 +267,23 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
});
},
move: function(source, destination) {
move: function (source, destination) {
var self = this;
self.FileBase.instance.POST("/ajax/fs/move", {
"source" : JSON.stringify(source),
"source": JSON.stringify(source),
"destination": JSON.stringify(destination)
});
},
remove: function() {
remove: function () {
var self = this;
this.entries = Object.keys(this.FileBase.selections.entries);
var confirmDialog = this.FileBase.instance.getPreference("ShowDeleteDialog");
if (confirmDialog) {
this.FileBase.instance.confirm(
"Do you really want to delete the selected items?",
function(result) {
function (result) {
if (result === true) {
self._remove();
}
......@@ -281,18 +295,18 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
},
_remove: function() {
_remove: function () {
var self = this;
var dfd = self.FileBase.instance.POST("/ajax/fs/remove", {
"path": JSON.stringify(self.entries)
}, function(err) {
}, function (err) {
//self.FileBase.updateView();
self.entries = [];
self.FileBase.selections.entries = {};
});
},
download: function() {
download: function () {
var path = Object.keys(this.FileBase.selections.entries);
if (path.length != 1) {
this.FileBase.instance.alert("Please compress several files before downloading them.");
......@@ -312,12 +326,12 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
},
compress: function() {
compress: function () {
var self = this;
this.entries = Object.keys(this.FileBase.selections.entries);
self.FileBase.instance.prompt("Enter a name for the zip-file", function(newName) {
self.FileBase.instance.prompt("Enter a name for the zip-file", function (newName) {
if (newName == name || newName === null || newName === "") { //noinspection JSLint
return;
}
......@@ -332,7 +346,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
return this;
},
info: function() {
info: function () {
var self = this;
var sizeSuffix = null;
var totalSize = null;
......@@ -344,7 +358,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
if (numberOfSelectedItems > 0) {
// get name, size etc.
$.each(this.FileBase.selections.entries, function() {
$.each(this.FileBase.selections.entries, function () {
var value = this;
var name = value.data().data.name;
var size = value.data().data.size;
......@@ -383,10 +397,10 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
totalSize = self.FileBase.helper.convertSize(totalSize).size;
// render when only one item is selected
if (numberOfSelectedItems == 1) {
self.FileBase.instance.alert($(infoTmpl).render(infoObject), {
header: "Info",
okLabel: "Close"
});
self.FileBase.instance.alert($(infoTmpl).render(infoObject), {
header: "Info",
okLabel: "Close"
});
// render when more items are selected
} else {
var appendToRender = $(moteTmpl);
......@@ -405,10 +419,10 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
},
createFile: function() {
createFile: function () {
var self = this;
var newName = null;
self.FileBase.instance.prompt("Enter name for new file:", function(name) {
self.FileBase.instance.prompt("Enter name for new file:", function (name) {
if (name === null || name === "") {
return;
}
......@@ -420,10 +434,10 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
});
},
createFolder: function() {
createFolder: function () {
var self = this;
var newName = null;
self.FileBase.instance.prompt("Enter name for new directory:", function(name) {
self.FileBase.instance.prompt("Enter name for new directory:", function (name) {
if (name === null || name === "") {
return;
}
......@@ -438,7 +452,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
// The function takes up to two arguments.
// path: location of storage, default is current path
// files: list of files as FileList object. If not given, the browser's selector is used.
upload: function(path, files) {
upload: function (path, files) {
var self = this;
// set path
......@@ -478,49 +492,39 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
data.submit();
}
},
submit: function(event, data) {
submit: function (event, data) {
// create progress bar and save it in data
data.$progress = $("<div class='progress-row'> \
<div class='progress-title'></div> \
<div class='glyphicon glyphicon-remove'></div> \
<div class='btn btn-xs btn-danger'><i class='glyphicon glyphicon-stop'></i>abort</div> \
<div class='progress'> \
<div class='progress-bar progress-bar-primary progress-bar-striped active' role='progressbar' \
aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0%;'> \
0% \
</div> \
</div> \
</div>");
data.$progress = $(progressbarTmpl);
data.$progress.appendTo(self.$progressBarContainer);
self.$progressBarContainer.css("display", "inline");
$(".progress-title", data.$progress).html(data.files[0].name);
// abort button
var clicktype = vispa.device.hasTouch ? "tab" : "click";
$(".btn-danger", data.$progress).on(clicktype, function() {
$(".btn-danger", data.$progress).on(clicktype, function () {
if (data.jqXHR !== null) data.jqXHR.abort();
});
// remove icon
$(".glyphicon-remove", data.$progress).on(clicktype, function() {
$(".glyphicon-remove", data.$progress).on(clicktype, function () {
data.$progress.remove();
if (self.$progressBarContainer.children().length === 0)
self.$progressBarContainer.css("display", "none");
});
},
start: function() {
start: function () {
self.$input.val(null);
},
progress: function(event, data) {
progress: function (event, data) {
var percentage = parseInt(data.loaded / data.total * 100, 10);
$(".progress-bar", data.$progress).attr("aria-valuenow", percentage);
$(".progress-bar", data.$progress).css("width", percentage + "%");
$(".progress-bar", data.$progress).html(percentage + "%");
},
done: function(event, data) {
done: function (event, data) {
$(".progress-bar", data.$progress).toggleClass("progress-bar-primary progress-bar-success");
if (data.$progress.parents().length === 0)
vispa.messenger.info("Upload succeeded", "glyphicon glyphicon-ok-sign");
},
fail: function(event, data) {
fail: function (event, data) {
$(".progress-bar", data.$progress).toggleClass("progress-bar-primary progress-bar-danger");
if (data.errorThrown === "abort") {
if (data.$progress.parents().length === 0)
......@@ -532,9 +536,9 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
vispa.messenger.info("Upload failed", "glyphicon glyphicon-warning-sign");
}
},
always: function(event, data) {
always: function (event, data) {
$(".btn-danger", data.$progress).toggleClass("disabled", true);
vispa.nextTick(function() {
vispa.nextTick(function () {
data.$progress.remove();
if (self.$progressBarContainer.children().length === 0)
self.$progressBarContainer.css("display", "none");
......@@ -546,16 +550,18 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
if (!files) {
self.$input.click();
} else {
self.$input.fileupload("add", {files: files})
self.$input.fileupload("add", {
files: files
})
}
},
filter: function() {
filter: function () {
var self = this;
// if (content.filelist) {};
var filter = $("input", this.FileBase.view.filterField);
filter.keyup(function(event) {
filter.keyup(function (event) {
var filteredContent = $.extend({}, self.FileBase.workflow.data);
event.stopPropagation();
event.preventDefault();
......@@ -575,7 +581,7 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
if (inputString === "") {
self.FileBase.refresh(self.FileBase.workflow.data);
} else {
filteredContent.filelist = filteredContent.filelist.filter(function(elem) {
filteredContent.filelist = filteredContent.filelist.filter(function (elem) {
return ~elem.name.indexOf(inputString);
});
self.FileBase.refresh(filteredContent, self.FileBase.workflow.sort, self.FileBase
......@@ -587,4 +593,4 @@ define(["jquery", "jclass", "text!../../html/openDialog.html", "text!../../html/
});
return FileBaseActions;
});
});
\ 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