diff --git a/SUMMARY.md b/SUMMARY.md index b8c33cd..3d23fe4 100755 --- a/SUMMARY.md +++ b/SUMMARY.md @@ -76,9 +76,10 @@ * [Breadcrumbs]({%}?page=frontend/elements/breadcrumbs/breadcrumbs) * [Progress]({%}?page=frontend/elements/progress/progress) * [Layout]({%}?page=frontend/grid/grid) +* [Drag & Drop]({%}?page=frontend/elements/dragndrop/dragndrop) * [Charting]({%}?page=services/charting) ### Forms -* [Forms]({%}?page=frontend/elements/forms/forms) +* [Forms]({%}?page=frontend/forms/forms) * [Inputs]({%}?page=frontend/elements/inputs/inputs) * [Tables]({%}?page=frontend/elements/tables/tables) diff --git a/frontend/elements/dragndrop/dragndrop.md b/frontend/elements/dragndrop/dragndrop.md new file mode 100644 index 0000000..a261c8f --- /dev/null +++ b/frontend/elements/dragndrop/dragndrop.md @@ -0,0 +1,29 @@ +# Drag & Drop + +Elements can be made drag and droppable which can be helpful to allow users to re-order and re-position elements in a list, table or customize the user interface. + +## Container + +In order to make elements drag and droppable you must define a container which contains all the drag and droppable elements. + +```html +
+
+``` + +## Draggable elements + +Elements which should be draggable in the container must be marked with `draggable="true"`. + +```html +
+
1
+
2
+
3
+
4
+
+``` + +> If new draggable elements are dynamically added to the container they automatically get recognized, no additional event binding is necessary. + +![Button normal](Developer-Guide/frontend/elements/dragndrop/dragndrop.png) \ No newline at end of file diff --git a/frontend/elements/dragndrop/dragndrop.png b/frontend/elements/dragndrop/dragndrop.png new file mode 100644 index 0000000..13451ef Binary files /dev/null and b/frontend/elements/dragndrop/dragndrop.png differ diff --git a/frontend/forms/forms.md b/frontend/forms/forms.md new file mode 100644 index 0000000..6feaa43 --- /dev/null +++ b/frontend/forms/forms.md @@ -0,0 +1,60 @@ +# Forms + +## Bindings + +data-tag : tells the element how to behave (e.g. turn none-form elements into forms by defining it as "form") +data-method : method definition for none-form elements (not used for actual forms, where method can be used) + +data-marker=tpl : ??? maybe entries which are templates (e.g. inline add or inline edit?) **check** +data-id : Data id (primary id value, by which it is stored in the database) + +data-ui-content +data-ui-element + +data-tpl-text +data-tpl-value +data-value +value + +data-add-form : form template to use for the inline add **check** +data-add-content +data-add-element +data-add-tpl + +data-update-form : form where updates/changes are handled (this means there is an external form where the data gets copied to for modification) +data-update-content +data-update-element +data-update-tpl + +data-tpl-text-path : remote path for the text +data-tpl-value-path : remote path for the text + + +## Todos + +### General +- [x] Order +- [ ] Remote order +- [x] DragDrop +- [ ] Remote DragDrop +- [x] Remove +- [ ] Remote Remove +- [ ] Remote Update on change (no save button required) + +### Heartbeat +- [ ] Remote adds (heartbeat checks) +- [ ] Remote updates (heartbeat checks) +- [ ] Remote removes (heartbeat checks) + +### External +- [x] add +- [ ] update +- [ ] remote add +- [ ] remote update +- [x] cancel + +### Internal +- [ ] add +- [ ] update +- [ ] remote add +- [ ] remote update \ No newline at end of file