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

104
octoprint_customControl/__init__.py
View File

@ -8,66 +8,70 @@ from octoprint.settings import settings
import octoprint.plugin
class CustomControlPlugin(octoprint.plugin.SettingsPlugin,
octoprint.plugin.TemplatePlugin,
octoprint.plugin.AssetPlugin):
octoprint.plugin.TemplatePlugin,
octoprint.plugin.AssetPlugin):
def get_settings_defaults(self):
return dict(
controls=[]
)
def get_settings_defaults(self):
return dict(
controls = []
)
def get_template_configs(self):
if "editorcollection" in self._plugin_manager.enabled_plugins:
return [
dict(type="plugin_editorcollection_EditorCollection", template="customControl_hookedsettings.jinja2",
custom_bindings=True)
]
else:
return [
dict(type="settings", template="customControl_hookedsettings.jinja2", custom_bindings=True)
]
def get_template_configs(self):
if "editorcollection" in self._plugin_manager.enabled_plugins:
return [
dict(type="plugin_editorcollection_EditorCollection", template="customControl_hookedsettings.jinja2", custom_bindings=True)
]
else:
return [
dict(type="settings", template="customControl_hookedsettings.jinja2", custom_bindings=True)
]
def on_settings_save(self, data):
s = settings()
s.set(["controls"], data["controls"])
def on_settings_save(self, data):
s = settings()
s.set(["controls"], data["controls"])
def get_assets(self):
return dict(
js=[
"js/jquery.ui.sortable.js",
"js/customControl.js",
"js/customControlDialog.js",
],
css=["css/customControls.css"],
less=["less/customControls.less"]
)
def get_assets(self):
return dict(
js=[
"js/customControl.js",
"js/customControlDialog.js",
],
css=["css/customControls.css"],
less=["less/customControls.less"]
)
def get_update_information(self):
return dict(
customcontrol=dict(
displayName="Custom Control Editor Plugin",
displayVersion=self._plugin_version,
def get_update_information(self):
return dict(
customcontrol=dict(
displayName="Custom Control Editor Plugin",
displayVersion=self._plugin_version,
# version check: github repository
type="github_release",
user="Salandora",
repo="octoprint-customControl",
current=self._plugin_version,
# version check: github repository
type="github_release",
user="Salanddora",
repo="octoprint-customControl",
current=self._plugin_version,
# update method: pip
pip="https://github.com/Salandora/octoprint-customControl/archive/{target_version}.zip"
)
)
# update method: pip
pip="https://github.com/Salandora/octoprint-customControl/archive/{target_version}.zip"
)
)
__plugin_name__ = "Custom Control Editor"
def __plugin_load__():
global __plugin_implementation__
__plugin_implementation__ = CustomControlPlugin()
global __plugin_implementation__
__plugin_implementation__ = CustomControlPlugin()
global __plugin_hooks__
__plugin_hooks__ = {
"octoprint.plugin.softwareupdate.check_config": __plugin_implementation__.get_update_information
}
global __plugin_license__
__plugin_license__ = "AGPLv3"
global __plugin_hooks__
__plugin_hooks__ = {
"octoprint.plugin.softwareupdate.check_config": __plugin_implementation__.get_update_information
}
global __plugin_license__
__plugin_license__ = "AGPLv3"

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;
}
}
}

14
octoprint_customControl/templates/customControl_hookedsettings.jinja2
View File

@ -4,7 +4,7 @@
</div>
<!-- "width: 588px" to be the same as teh real Control tab-->
<div style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
<div class="innerSortable" style="width: 588px; clear: both; display: none;" id="customControls" data-bind="visible: loginState.isUser, template: { name: $root.displayMode, foreach: controls }"></div>
<ul id="controlContextMenu" class="dropdown-menu" role="menu" style="display:block;position:fixed !important;margin-bottom:5px;">
<li>
@ -47,27 +47,27 @@
<!-- Templates for custom controls -->
<script type="text/html" id="settingsCustomControls_containerTemplate_nameless">
<div class="custom_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
<div class="custom_section sortable" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
<!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate_collapsable">
<div class="custom_section" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, css: { 'custom_section_vertical_section': name() == '' }, attr: { 'id': id }">
<div class="custom_section sortable" data-bind="contextMenu: { menuSelector: '#containerContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
<h1 onclick="$(this).children().first().toggleClass('icon-caret-down icon-caret-right').parent().next().slideToggle('fast')"><i data-bind="css: {'icon-caret-down': !collapsed(), 'icon-caret-right': collapsed()}"></i> <span data-bind="text: name"></span></h1>
<!-- ko template: { name: 'settingsCustomControls_containerTemplate', data: $data } --><!-- /ko -->
</div>
</script>
<script type="text/html" id="settingsCustomControls_containerTemplate">
<!-- ko if: layout() == 'vertical' -->
<div class="custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
<div class="custom_section_vertical innerSortable" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal' -->
<div class="custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
<div class="custom_section_horizontal innerSortable" data-bind="template: { name: $root.displayMode, foreach: children }, css: {hide: collapsed() && name() != '' }"></div>
<!-- /ko -->
<!-- ko if: layout() == 'horizontal_grid' -->
<div class="row-fluid custom_section_horizontal_grid" data-bind="css: {hide: collapsed() && name() != ''}">
<div class="row-fluid custom_section_horizontal_grid innerSortable" data-bind="css: {hide: collapsed() && name() != ''}">
<!-- ko foreach: children -->
<div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
<!-- /ko -->
@ -75,7 +75,7 @@
<!-- /ko -->
</script>
<script type="text/html" id="settingsCustomControls_controlTemplate">
<form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, attr: { 'id': id }">
<form class="form-inline custom_control" style="min-height:15px; border:1px dotted #000000" data-bind="contextMenu: { menuSelector: '#commandContextMenu', menuSelected: $root.controlContextMenu }, css: { 'sortable': $parent.layout() != 'horizontal_grid' }, attr: { 'id': id }">
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_input', data: $data, if: $data.hasOwnProperty('input') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_command', data: $data, if: $data.hasOwnProperty('command') || $data.hasOwnProperty('commands') || $data.hasOwnProperty('script') || $data.hasOwnProperty('javascript') } --><!-- /ko -->
<!-- ko template: { name: 'settingsCustomControls_controlTemplate_output', data: $data, if: $data.hasOwnProperty('value') } --><!-- /ko -->