Added Sorting Feature

octoprint_customControl/__init__.py

@@ -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"
-

octoprint_customControl/static/css/customControls.css

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

octoprint_customControl/static/js/customControl.js

@@ -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) {

octoprint_customControl/static/less/customControls.less

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

octoprint_customControl/templates/customControl_hookedsettings.jinja2

@@ -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 -->

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())