Commit 83e52ee9 authored by asseldonk's avatar asseldonk
Browse files

file: sorting carets and code cleaning

parent da2a8823
......@@ -24,6 +24,18 @@
border-bottom: #DCDCDC 3px solid;
}
.files-table-first-row .file-table-name {
cursor: pointer;
}
.files-table-first-row .file-table-size {
cursor: pointer;
}
.files-table-first-row .file-table-last-changed {
cursor: pointer;
}
.file-table-object {
margin: 0px;
padding: 0px;
......@@ -43,6 +55,7 @@
padding: 8px 0px 0px 0px;
}
/*
.file-table-center {
text-align: center;
}
......@@ -54,6 +67,7 @@
.file-table-left {
text-align: left;
}
*/
.file-table-select {
text-align: center;
......@@ -72,7 +86,7 @@
/*min-width: 100px;*/
}
.file-table-time {
.file-table-last-changed {
text-align: left;
}
......@@ -85,28 +99,3 @@
.file-table-object[selected] {
background-color: #D6D6D6;
}
/* carets für sorting */
.table-view thead .unsorted {
background-image: url("../../../../img/unsorted.gif");
background-position: center right;
background-repeat: no-repeat;
cursor: pointer;
white-space: normal;
}
.table-view thead .desc {
background-image: url("../../../../img/sort-desc.gif");
background-position: center right;
background-repeat: no-repeat;
cursor: pointer;
white-space: normal;
}
.table-view thead .asc {
background-image: url("../../../../img/sort-asc.gif");
background-position: center right;
background-repeat: no-repeat;
cursor: pointer;
white-space: normal;
}
\ No newline at end of file
......@@ -3,9 +3,9 @@
<div class="row files-table-first-row">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 file-table-select"><input type="checkbox" class="file-table-select-all" /></div>
<div class="col-xs-2 col-sm-1 col-md-1 col-lg-1 file-table-icon"></div>
<div class="col-xs-8 col-sm-5 col-md-4 col-lg-6 file-table-name">Name</div>
<div class=" col-md-2 col-lg-1 hidden-sm hidden-xs file-table-size">Size</div>
<div class=" col-sm-4 col-md-3 col-lg-2 hidden-xs file-table-time">Date modified </div>
<div class="col-xs-8 col-sm-5 col-md-4 col-lg-6 file-table-name">Name <i class="glyphicon glyphicon-sort-by-alphabet"></i></div>
<div class=" col-md-2 col-lg-1 hidden-sm hidden-xs file-table-size">Size <i class="glyphicon glyphicon-sort"></i></div>
<div class=" col-sm-4 col-md-3 col-lg-2 hidden-xs file-table-last-changed">Date modified <i class="glyphicon glyphicon-sort"></i></div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 .file-table-options"></div>
</div>
......@@ -15,7 +15,7 @@
<div class="col-xs-2 col-sm-1 col-md-1 col-lg-1 file-table-icon"><img data-bind="icon"></div>
<div class="col-xs-8 col-sm-5 col-md-4 col-lg-6 file-table-name"><span data-bind="name"></span></div>
<div class=" col-md-2 col-lg-1 hidden-sm hidden-xs file-table-size"><span data-bind="size"></span> <span data-bind="sizeSuffix"></span></div>
<div class=" col-sm-4 col-md-3 col-lg-2 hidden-xs file-table-time"><span data-bind="mtime"></span></div>
<div class=" col-sm-4 col-md-3 col-lg-2 hidden-xs file-table-last-changed"><span data-bind="mtime"></span></div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 file-properties file-table-options"><span class="glyphicon glyphicon-cog"></span></div>
</div>
</div>
......
......@@ -62,30 +62,121 @@ var FileBaseHelper = Class.extend({
};
},
changeSortButtons: function(pushed, reverse) {
var sortButtons = this.FileBase.instance._getFastMenuEntryNode("Sort");
var pushedButton = $("#fastmenu-" + pushed, sortButtons);
var activeButton = $(".active", sortButtons);
if (!pushedButton.hasClass("active")) {
// remove class = active from former active button
activeButton.removeClass("active");
pushedButton.addClass("active");
// set unsorted button on former active button
$("i.glyphicon", activeButton).attr("class", "").addClass("glyphicon glyphicon-sort")
changeSortItems: function(pushed, trigger) {
// available sort items
var sortGlyphicons = ["name", "last-changed", "size", "type"];
// variables for buttons
var sortMenu = this.FileBase.instance._getFastMenuEntryNode("Sort");
var pushedButton = $("#fastmenu-" + pushed, sortMenu);
var pushedGlyphicon = $("i.glyphicon", pushedButton);
// get current sorting and get new type of glyphicon
var obj = this.glyphiconForSortItem(pushed, pushedGlyphicon);
var newGlyphicon = obj["newGlyphicon"];
var reverse = obj["reverse"];
// call function for sorting file list
this.wf = this.FileBase.workflow;
if (pushed == "name") {
this.wf.reverse[0] = reverse;
this.FileBase.refresh(this.wf.data, ["name", "type"], this.wf.reverse);
}
if (pushed == "last-changed") {
this.wf.reverse[0] = reverse;
this.wf.reverse[1] = reverse;
this.FileBase.refresh(this.wf.data, ["name", "time", "type"], this.wf.reverse);
}
if (pushed == "size") {
this.wf.reverse[0] = reverse;
this.wf.reverse[1] = reverse;
this.FileBase.refresh(this.wf.data, ["name", "size", "type"], this.wf.reverse);
}
if (pushed == "type") {
this.wf.reverse[0] = reverse;
this.wf.reverse[1] = reverse;
this.wf.reverse[2] = false;
this.FileBase.refresh(this.wf.data, ["name", "ext", "type"], this.wf.reverse);
}
// set new sorted glyphicon to the pushed button
if ((pushed == "name" || pushed == "type") && reverse == false)
$("i.glyphicon", pushedButton).attr("class", "").addClass("glyphicon glyphicon-sort-by-alphabet");
else if ((pushed == "name" || pushed == "type") && reverse == true)
$("i.glyphicon", pushedButton).attr("class", "").addClass("glyphicon glyphicon-sort-by-alphabet-alt");
if (pushed == "last-changed" && reverse == false)
$("i.glyphicon", pushedButton).attr("class", "").addClass("glyphicon glyphicon-sort-by-order-alt");
else if (pushed == "last-changed" && reverse == true)
$("i.glyphicon", pushedButton).attr("class", "").addClass("glyphicon glyphicon-sort-by-order");
if (pushed == "size" && reverse == false)
$("i.glyphicon", pushedButton).attr("class", "").addClass("glyphicon glyphicon-sort-by-order");
else if (pushed == "size" && reverse == true)
$("i.glyphicon", pushedButton).attr("class", "").addClass("glyphicon glyphicon-sort-by-order-alt");
// the carrets which has to become a new glyphicon
var pushedCaret = $(".file-table-" + pushed, ".files-table-first-row");
// set all other glyphicons to unsorted-glyphicon and deselect all buttons
for (item in sortGlyphicons) { //ueberpruefen,ob sortitems existieren
// set carets to unsorted
var firstRowItem = $(".file-table-" + sortGlyphicons[item], ".files-table-first-row");
$("i.glyphicon", firstRowItem).attr("class", "").addClass("glyphicon glyphicon-sort");
// set buttons to unsorted
$("i.glyphicon", "#fastmenu-" + sortGlyphicons[item], sortMenu).attr("class", "").addClass("glyphicon glyphicon-sort");
if ($("#fastmenu-" + sortGlyphicons[item], sortMenu).hasClass("active"))
$("#fastmenu-" + sortGlyphicons[item], sortMenu).removeClass("active")
}
// set new glyphicon to pushed caret
$("i.glyphicon", pushedCaret).attr("class", "").addClass(newGlyphicon);
// set new glyphicon to pushed button
$("i.glyphicon", pushedButton).attr("class", "").addClass(newGlyphicon);
// set active class to pushed button
pushedButton.addClass("active");
},
// if file-up button is pressed: set right caret
getCurrentSort: function() {
var sortGlyphicons = ["name", "last-changed", "size", "type"];
var sortMenu = this.FileBase.instance._getFastMenuEntryNode("Sort");
for (item in sortGlyphicons) {
var allButtons = $("#fastmenu-" + sortGlyphicons[item], sortMenu);
var allGlyphicon = $("i.glyphicon", allButtons);
if (!allGlyphicon.hasClass("glyphicon-sort")) {
var activeSort = sortGlyphicons[item];
}
}
var obj = this.glyphiconForSortItem(activeSort, allGlyphicon);
var newGlyphicon = obj["newGlyphicon"];
var reverse = obj["reverse"];
if (reverse == true)
var CurrentSort = false;
else
var CurrentSort = true;
for (item in sortGlyphicons) {
var firstRowItem = $(".file-table-" + sortGlyphicons[item], ".files-table-first-row");
if (sortGlyphicons[item] == activeSort) {
$("i.glyphicon", firstRowItem).attr("class", "").addClass(newGlyphicon);
} else {
$("i.glyphicon", firstRowItem).attr("class", "").addClass("glyphicon glyphicon-sort");
}
}
},
glyphiconForSortItem: function(sortItem, pushedGlyphicon) {
// determine current sorting
if ((sortItem != "last-changed") && (pushedGlyphicon.hasClass("glyphicon-sort") || pushedGlyphicon.hasClass("glyphicon-sort-by-order-alt") || pushedGlyphicon.hasClass("glyphicon-sort-by-alphabet-alt")))
reverse = false;
else if ((sortItem != "last-changed") && (pushedGlyphicon.hasClass("glyphicon-sort-by-order") || pushedGlyphicon.hasClass("glyphicon-sort-by-alphabet")))
reverse = true;
else if ((sortItem == "last-changed") && (pushedGlyphicon.hasClass("glyphicon-sort") || pushedGlyphicon.hasClass("glyphicon-sort-by-order")))
reverse = false;
if ((sortItem == "last-changed") && (pushedGlyphicon.hasClass("glyphicon-sort-by-order-alt")))
reverse = true;
// determine new glyphicon
if ((sortItem == "name" || sortItem == "type") && reverse == false)
newGlyphicon = "glyphicon glyphicon-sort-by-alphabet";
else if ((sortItem == "name" || sortItem == "type") && reverse == true)
newGlyphicon = "glyphicon glyphicon-sort-by-alphabet-alt";
if (sortItem == "last-changed" && reverse == false)
newGlyphicon = "glyphicon glyphicon-sort-by-order-alt";
else if (sortItem == "last-changed" && reverse == true)
newGlyphicon = "glyphicon glyphicon-sort-by-order";
if (sortItem == "size" && reverse == false)
newGlyphicon = "glyphicon glyphicon-sort-by-order";
else if (sortItem == "size" && reverse == true)
newGlyphicon = "glyphicon glyphicon-sort-by-order-alt";
// return object with new glyphicon and sorting type
var obj = {
"newGlyphicon": newGlyphicon,
"reverse": reverse
};
return obj;
},
abspath: function(name) {
......
var Tableview = Class.extend({
init: function(FileBase) {
this.FileBase = FileBase;
this.instance = FileBase.instance;
......@@ -35,17 +36,41 @@ var Tableview = Class.extend({
// render the content
$(".files-table", this.fileContentContainer).render(data.filelist, this.FileBase.view.directives);
// make select-all-checkboc clickable
$(".file-table-select-all", self.fileContentContainer).click(function() {
setTimeout(function() {
$(this).prop("checked", $(this).prop("checked") ? "" : "checked");
if ($(this).prop("checked")) {
self.FileBase.selections.selectAll();
self.FileBase.selections.selectAll();
} else {
self.FileBase.selections.unselectAll();
self.FileBase.selections.unselectAll();
}
}.bind(this), 0);
});
},
// stay on sorted method only call when up button is cklicked
self.FileBase.helper.getCurrentSort();
// call function for sorting carets
var firstRowName = $(".file-table-name", ".files-table-first-row");
var newGlyphicon = 0;
firstRowName.click(function() {
self.FileBase.helper.changeSortItems("name", "caret");
// self.FileBase.helper.changeSortCarets("name", "", "", "caret");
});
var firstRowLastChanged = $(".file-table-last-changed", ".files-table-first-row");
firstRowLastChanged.click(function() {
self.FileBase.helper.changeSortItems("last-changed", "carets");
// self.FileBase.helper.changeSortCarets("last-changed", "", "", "carets");
});
var firstRowSize = $(".file-table-size", ".files-table-first-row");
firstRowSize.click(function() {
self.FileBase.helper.changeSortItems("size", "carets");
// self.FileBase.helper.changeSortCarets("size", "", "", "carets");
});
}
});
\ No newline at end of file
......@@ -57,7 +57,6 @@ var fileMenuEntries = [
iconClass: "glyphicon glyphicon-repeat",
buttonClass: "btn-default",
callback: function() {
// this.fb.refresh(this.fb.workflow.data);
this.fb.updateView();
}
},
......@@ -66,6 +65,7 @@ var fileMenuEntries = [
id: "Sort",
label: "Sort",
buttonClass: "btn-default",
iconClass: "glyphicon glyphicon-sort-by-alphabet",
childrenStyle: "group",
children: [{
id: "name",
......@@ -73,14 +73,7 @@ var fileMenuEntries = [
iconClass: "glyphicon glyphicon-sort-by-alphabet",
buttonClass: "btn-default active",
callback: function() {
this.wf = this.fb.workflow;
if (~this.wf.sort.indexOf("name") && !~this.wf.sort.indexOf("ext")) {
this.wf.reverse[0] = !this.wf.reverse[0];
this.fb.refresh(this.wf.data, ["name", "type"], this.wf.reverse);
} else {
this.fb.refresh(this.wf.data, ["name", "type"], [false, false]);
}
this.fb.helper.changeSortButtons("name", this.wf.reverse[0]);
this.fb.helper.changeSortItems("name", "button");
}
}, {
id: "size",
......@@ -88,14 +81,7 @@ var fileMenuEntries = [
iconClass: "glyphicon glyphicon-sort",
buttonClass: "btn-default",
callback: function() {
this.wf = this.fb.workflow;
if (~this.wf.sort.indexOf("size")) {
this.wf.reverse[0] = !this.wf.reverse[0];
this.fb.refresh(this.wf.data, ["size", "type"], this.wf.reverse);
} else {
this.fb.refresh(this.wf.data, ["size", "type"], [false, false]);
}
this.fb.helper.changeSortButtons("size", this.wf.reverse[0]);
this.fb.helper.changeSortItems("size", "button");
}
}, {
id: "last-changed",
......@@ -103,14 +89,7 @@ var fileMenuEntries = [
iconClass: "glyphicon glyphicon-sort",
buttonClass: "btn-default",
callback: function() {
this.wf = this.fb.workflow;
if (~this.wf.sort.indexOf("time")) {
this.wf.reverse[0] = !this.wf.reverse[0];
this.fb.refresh(this.wf.data, ["time", "type"], this.wf.reverse);
} else {
this.fb.refresh(this.wf.data, ["time", "type"], [false, false]);
}
this.fb.helper.changeSortButtons("last-changed", this.wf.reverse[0]);
this.fb.helper.changeSortItems("last-changed", "button");
}
}, {
id: "type",
......@@ -118,20 +97,9 @@ var fileMenuEntries = [
iconClass: "glyphicon glyphicon-sort",
buttonClass: "btn-default",
callback: function() {
this.wf = this.fb.workflow;
if (~this.wf.sort.indexOf("ext")) {
this.wf.reverse[0] = !this.wf.reverse[0];
this.wf.reverse[1] = !this.wf.reverse[1];
this.wf.reverse[2] = false;
this.fb.refresh(this.wf.data, ["name", "ext", "type"], this.wf.reverse);
} else {
this.fb.refresh(this.wf.data, ["name", "ext", "type"], [false, false, false]);
}
this.fb.helper.changeSortButtons("type", this.wf.reverse[1]);
this.fb.helper.changeSortItems("type", "button");
}
}
]
},
......
Supports Markdown
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