Added Sorting Feature
This commit is contained in:
Salandora
parent
7b191b3480
commit
b3fabef34c
@ -8,10 +8,10 @@ from octoprint.settings import settings
|
||||
|
||||
import octoprint.plugin
|
||||
|
||||
|
||||
class CustomControlPlugin(octoprint.plugin.SettingsPlugin,
|
||||
octoprint.plugin.TemplatePlugin,
|
||||
octoprint.plugin.AssetPlugin):
|
||||
|
||||
def get_settings_defaults(self):
|
||||
return dict(
|
||||
controls=[]
|
||||
@ -20,7 +20,8 @@ class CustomControlPlugin(octoprint.plugin.SettingsPlugin,
|
||||
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)
|
||||
dict(type="plugin_editorcollection_EditorCollection", template="customControl_hookedsettings.jinja2",
|
||||
custom_bindings=True)
|
||||
]
|
||||
else:
|
||||
return [
|
||||
@ -34,6 +35,7 @@ class CustomControlPlugin(octoprint.plugin.SettingsPlugin,
|
||||
def get_assets(self):
|
||||
return dict(
|
||||
js=[
|
||||
"js/jquery.ui.sortable.js",
|
||||
"js/customControl.js",
|
||||
"js/customControlDialog.js",
|
||||
],
|
||||
@ -49,7 +51,7 @@ class CustomControlPlugin(octoprint.plugin.SettingsPlugin,
|
||||
|
||||
# version check: github repository
|
||||
type="github_release",
|
||||
user="Salanddora",
|
||||
user="Salandora",
|
||||
repo="octoprint-customControl",
|
||||
current=self._plugin_version,
|
||||
|
||||
@ -58,7 +60,10 @@ class CustomControlPlugin(octoprint.plugin.SettingsPlugin,
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
__plugin_name__ = "Custom Control Editor"
|
||||
|
||||
|
||||
def __plugin_load__():
|
||||
global __plugin_implementation__
|
||||
__plugin_implementation__ = CustomControlPlugin()
|
||||
@ -70,4 +75,3 @@ def __plugin_load__():
|
||||
|
||||
global __plugin_license__
|
||||
__plugin_license__ = "AGPLv3"
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -1,8 +1,14 @@
|
||||
#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 {
|
||||
@ -21,13 +27,30 @@
|
||||
cursor: text !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
@ -36,4 +59,11 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.custom_control {
|
||||
.slider {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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 -->
|
||||
|
||||
19
setup.py
19
setup.py
@ -17,7 +17,7 @@ plugin_package = "octoprint_%s" % plugin_identifier
|
||||
plugin_name = "OctoPrint-CustomControlPlugin"
|
||||
|
||||
# The plugin's version. Can be overwritten within OctoPrint's internal data via __plugin_version__ in the plugin module
|
||||
plugin_version = "0.1"
|
||||
plugin_version = "0.2"
|
||||
|
||||
# The plugin's description. Can be overwritten within OctoPrint's internal data via __plugin_description__ in the plugin
|
||||
# module
|
||||
@ -27,7 +27,7 @@ plugin_description = "Makes Custom Controls editable via settings"
|
||||
plugin_author = "Marc Hannappel (Salandora)"
|
||||
|
||||
# The plugin's author's mail address.
|
||||
plugin_author_email = "sunpack@web.de"
|
||||
plugin_author_email = "salandora@gmail.com"
|
||||
|
||||
# The plugin's homepage URL. Can be overwritten within OctoPrint's internal data via __plugin_url__ in the plugin module
|
||||
plugin_url = "https://github.com/Salandora/octoprint-customControl"
|
||||
@ -63,6 +63,7 @@ EXTRA_REQUIRES = dict(
|
||||
]
|
||||
)
|
||||
|
||||
|
||||
def package_data_dirs(source, sub_folders):
|
||||
import os
|
||||
dirs = []
|
||||
@ -79,6 +80,7 @@ def package_data_dirs(source, sub_folders):
|
||||
|
||||
return dirs
|
||||
|
||||
|
||||
def _recursively_handle_files(directory, file_matcher, folder_handler=None, file_handler=None):
|
||||
applied_handler = False
|
||||
|
||||
@ -90,7 +92,8 @@ def _recursively_handle_files(directory, file_matcher, folder_handler=None, file
|
||||
applied_handler = True
|
||||
|
||||
elif os.path.isdir(path):
|
||||
sub_applied_handler = _recursively_handle_files(path, file_matcher, folder_handler=folder_handler, file_handler=file_handler)
|
||||
sub_applied_handler = _recursively_handle_files(path, file_matcher, folder_handler=folder_handler,
|
||||
file_handler=file_handler)
|
||||
if sub_applied_handler:
|
||||
applied_handler = True
|
||||
|
||||
@ -99,6 +102,7 @@ def _recursively_handle_files(directory, file_matcher, folder_handler=None, file
|
||||
|
||||
return applied_handler
|
||||
|
||||
|
||||
class CleanCommand(Command):
|
||||
description = "clean build artifacts"
|
||||
user_options = []
|
||||
@ -165,6 +169,7 @@ class CleanCommand(Command):
|
||||
file_handler=delete_file
|
||||
)
|
||||
|
||||
|
||||
class NewTranslation(Command):
|
||||
description = "create a new translation"
|
||||
user_options = [
|
||||
@ -190,6 +195,7 @@ class NewTranslation(Command):
|
||||
def run(self):
|
||||
self.babel_init_messages.run()
|
||||
|
||||
|
||||
class ExtractTranslation(Command):
|
||||
description = "extract translations"
|
||||
user_options = []
|
||||
@ -214,6 +220,7 @@ class ExtractTranslation(Command):
|
||||
def run(self):
|
||||
self.babel_extract_messages.run()
|
||||
|
||||
|
||||
class RefreshTranslation(Command):
|
||||
description = "refresh translations"
|
||||
user_options = [
|
||||
@ -248,6 +255,7 @@ class RefreshTranslation(Command):
|
||||
self.babel_extract_messages.run()
|
||||
self.babel_update_messages.run()
|
||||
|
||||
|
||||
class CompileTranslation(Command):
|
||||
description = "compile translations"
|
||||
user_options = []
|
||||
@ -282,6 +290,7 @@ class CompileTranslation(Command):
|
||||
I18N_DOMAIN
|
||||
)
|
||||
|
||||
|
||||
def params():
|
||||
# Our metadata, as defined above
|
||||
name = plugin_name
|
||||
@ -304,7 +313,8 @@ def params():
|
||||
packages = [plugin_package]
|
||||
|
||||
# we might have additional data files in sub folders that need to be installed too
|
||||
package_data = {plugin_package: package_data_dirs(plugin_package, ['static', 'templates', 'translations'] + plugin_additional_data)}
|
||||
package_data = {plugin_package: package_data_dirs(plugin_package,
|
||||
['static', 'templates', 'translations'] + plugin_additional_data)}
|
||||
include_package_data = True
|
||||
|
||||
# If you have any package data that needs to be accessible on the file system, such as templates or static assets
|
||||
@ -328,4 +338,5 @@ def params():
|
||||
|
||||
return locals()
|
||||
|
||||
|
||||
setup(**params())
|
||||
Loading…
Reference in New Issue
Block a user