ManuelW/octoprint-customControl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Sorting Feature

Browse Source
This commit is contained in:
Salandora
2015-08-31 09:01:25 +02:00
parent 7b191b3480
commit b3fabef34c
6 changed files with 448 additions and 282 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
octoprint_customControl/static/css/customControls.css
View File

@ -1 +1,54 @@
#customControls .custom_section_horizontal .custom_control{display:inline-block}#customControls .custom_section_vertical .custom_control{display:block}#customControls .custom_section_vertical_section{min-width:15px;min-height:15px;border:1px dashed #000}#customControls .slider.slider-disabled .slider-track{cursor:default!important}#customControls input[disabled]{background:#fff!important;cursor:text!important}#customControls .custom_section h1{cursor:pointer;display:block;width:100%;padding:0;margin-bottom:20px;font-size:21px;line-height:40px;color:#333;border:0;border-bottom:1px solid #E5E5E5;font-weight:400}
#customControls .innerSortable {
width: 100%;
min-height: 50px;
}
#customControls .custom_section_horizontal > .custom_control {
display: inline-block;
}
#customControls .custom_section_vertical > .custom_control {
display: block;
}
#customControls .custom_section_vertical_section {
min-width: 15px;
min-height: 15px;
border: 1px dashed #000000;
}
#customControls .slider.slider-disabled .slider-track {
cursor: default !important;
}
#customControls input[disabled] {
background: #fff !important;
cursor: text !important;
}
#customControls .btn-group {
margin-bottom: 10px;
}
#customControls .btn-group.distance > .btn {
width: 43px;
padding: 3px 0;
height: 30px;
}
#customControls .slider-handle {
width: 14px;
height: 14px;
margin-left: -7px;
margin-top: -3px;
}
#customControls .custom_section h1 {
cursor: pointer;
display: block;
width: 100%;
padding: 0;
margin-bottom: 10px;
font-size: 21px;
line-height: 40px;
color: #333;
border: 0;
border-bottom: 1px solid #E5E5E5;
font-weight: normal;
}
#customControls .custom_control .slider {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 2px;
}

72
octoprint_customControl/static/js/customControl.js
View File

@ -56,7 +56,75 @@
// TODO: Brainstorming about how to handle additionalControls...
self.staticID = 0;
self.controls(self._processControls(undefined, self.controlsFromServer))
self.controls(undefined);
self.controls(self._processControls(undefined, self.controlsFromServer));
$(".innerSortable").sortable({
connectWith: ".innerSortable",
items: "> .sortable",
cancel: '',
sort: function (event, ui) {
var self = $(this),
width = ui.helper.outerWidth(),
top = ui.helper.position().top;//changed to ;
self.children().each(function () {
if ($(this).hasClass('ui-sortable-helper') || $(this).hasClass('ui-sortable-placeholder')) {
return true;
}
// If overlap is more than half of the dragged item
var distance = Math.abs(ui.position.left - $(this).position().left),
before = ui.position.left > $(this).position().left;
if ((width - distance) > (width / 2) && (distance < width) && $(this).position().top === top) {
if (before) {
$('.ui-sortable-placeholder', self).insertBefore($(this));
} else {
$('.ui-sortable-placeholder', self).insertAfter($(this));
}
return false;
}
});
},
update: function(event, ui) {
var target = ko.dataFor(this);
var item = ko.dataFor(ui.item[0]);
if (target == undefined) {
return;
} else {
if (target == self) {
if (!item.hasOwnProperty("children")) {
return;
}
}
else if (!target.hasOwnProperty("children")) {
return;
}
}
var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
if (position >= 0) {
if (item.parent != undefined) {
item.parent.children.remove(item);
if (target == self)
self.controlsFromServer.splice(position, 0, item);
else
target.children.splice(position, 0, item);
} else {
self.controlsFromServer = _.without(self.controlsFromServer, item);
if (target == self)
self.controlsFromServer.splice(position, 0, item);
else
target.children.splice(position, 0, item);
}
}
},
stop: function(event, ui) {
self.rerenderControls();
}
}).disableSelection();
};
self._processControls = function (parent, controls) {
@ -197,7 +265,7 @@
if (customControl.hasOwnProperty("offset") && customControl.offset() != "") {
offset = "offset" + customControl.offset();
}
return span + " " + offset;
return "sortable " + span + " " + offset;
};
self.searchElement = function (list, id) {

46
octoprint_customControl/static/less/customControls.less
View File

@ -1,14 +1,20 @@
#customControls {
.custom_section_horizontal .custom_control {
.innerSortable {
width: 100%;
min-height: 50px;
}
.custom_section_horizontal > .custom_control {
display:inline-block;
}
.custom_section_vertical .custom_control {
.custom_section_vertical > .custom_control {
display:block;
}
.custom_section_vertical_section {
min-width:15px;
min-height:15px;
border:1px dashed #000000;
}
@ -21,19 +27,43 @@
cursor: text !important;
}
.custom_section {
h1 {
.btn-group {
margin-bottom: 10px;
}
.btn-group.distance > .btn {
width: 43px;
padding: 3px 0;
height: 30px;
}
.slider-handle {
width: 14px;
height: 14px;
margin-left: -7px;
margin-top: -3px;
}
.custom_section {
h1 {
cursor: pointer;
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
margin-bottom: 10px;
font-size: 21px;
line-height: 40px;
color: #333;
border: 0;
border-bottom: 1px solid #E5E5E5;
font-weight: normal;
}
font-weight: normal;
}
}
.custom_control {
.slider {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 2px;
}
}
}