Initial commit

Add everything

Author: JoaRiski

.gitignore

@@ -0,0 +1,36 @@
+*,cover
+*.egg
+*.egg-info/
+*.log
+*.manifest
+*.pot
+*.py[cod]
+*.so
+*.spec
+.cache
+.coverage
+.coverage.*
+.eggs/
+.idea
+.installed.cfg
+.Python
+.tox/
+__pycache__/
+build/
+coverage.xml
+develop-eggs/
+dist/
+docs/_build/
+downloads/
+eggs/
+env/
+htmlcov/
+lib/
+lib64/
+nosetests.xml
+parts/
+pip-delete-this-directory.txt
+pip-log.txt
+sdist/
+target/
+var/

LICENSE

@@ -0,0 +1,4 @@
+include README.rst
+include LICENSE
+
+recursive-include django_sorting_field *.css *.html *.js

MANIFEST.in

@@ -0,0 +1,106 @@
+Django Sorting Field
+====================
+
+* This package implements a Django form field + widget for drag & drog sorting of items
+* Sorting any item with a field called ``id`` is supported
+* The drag and drop feature has been implemented with `html5sortable <https://lukasoppermann.github.io/html5sortable/index.html>`_.
+
+Example of the widget
+---------------------
+
+.. image:: readme-media/example.gif
+
+Usage
+-----
+
+The sort order field should be implemented on the model containing the sorted objects.
+This allows ordering of different instances of the same item set differently.
+
+Let's say you have image CarouselPlugin, Carousel, and Picture models, and you wish to be able to
+sort the same Carousel instance differently on each CarouselPlugin.
+
+You also have a CMSPlugin object for the carousel.
+
+.. code-block:: python
+
+	class Carousel(models.Model):
+		pass
+
+
+	class Picture(models.Model):
+		carousel = models.ForeignKey(Carousel, related_name="pictures")
+		image = SomeImageField()
+		name = models.CharField()
+
+
+	class CarouselPlugin(CMSPlugin):
+		carousel = models.ForeignKey(Carousel, related_name="x")
+	
+
+	class CMSCarouselPlugin(CMSPluginBase):
+		model = CarouselPlugin
+
+		def render(self, context, instance, placeholder):
+			context.update({
+				"pictures": self.instance.carousel.pictures.all(),
+			})
+			return context
+
+
+Achieving the wanted behavior can be done in the following steps:
+
+Add a (nullable) TextField to the model containing the order information
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+.. code-block:: python
+
+	class CarouselPlugin(CMSPlugin):
+		carousel = models.ForeignKey(Carousel, related_name="x")
+		carousel_order = models.TextField(null=True)
+
+
+Add the SortingFormField to the CMS Plugin and populate it
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+.. code-block:: python
+
+	from django_sorting_field.fields import SortingFormField
+
+	class CarouselPluginForm(forms.ModelForm):
+		carousel_order = SortingFormField()
+
+		def __init__(self, *args, **kwargs):
+			super(CarouselPluginForm, self).__init__(*args, **kwargs)
+			self.fields["carousel_order"].populate(
+				items=self.instance.carousel.pictures.all(),
+			)
+
+	class CMSCarouselPlugin(CMSPluginBase):
+		model = CarouselPlugin
+		form = CarouselPluginForm
+
+		def render(self, context, instance, placeholder):
+			context.update({
+				"pictures": self.instance.carousel.pictures.all(),
+			})
+			return context
+
+Finally, sort the items passed to the context data
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+.. code-block:: python
+
+	from django_sorting_field.utils import iterate_in_order
+
+		class CMSCarouselPlugin(CMSPluginBase):
+		model = CarouselPlugin
+		form = CarouselPluginForm
+
+		def render(self, context, instance, placeholder):
+			context.update({
+				"pictures": iterate_in_order(
+					self.instance.carousel.pictures.all(),
+					self.instance.carousel_order
+				),
+			})
+			return context

README.rst

@@ -0,0 +1,34 @@
+from django import forms
+import json
+
+from widgets import SortingWidget
+from utils import iterate_in_order, clean_order_json
+
+
+class SortedItem(object):
+
+    def __init__(self, identifier, label):
+        self.id = identifier
+        self.label = label
+
+
+class SortingFormField(forms.CharField):
+
+    def __init__(self, *args, **kwargs):
+        kwargs.update({
+            "widget": SortingWidget(),
+            "required": False,
+        })
+        self.items = ()
+        super(SortingFormField, self).__init__(*args, **kwargs)
+
+    def populate(self, items):
+        self.items = (SortedItem(item.pk, unicode(item)) for item in items)
+
+    def prepare_value(self, value):
+        value = clean_order_json(value)
+        return iterate_in_order(self.items, value)
+
+    def to_python(self, value):
+        value = clean_order_json(value)
+        return json.dumps(value)

django_sorting_field/__init__.py

@@ -0,0 +1,19 @@
+.sortable-widget-list {
+}
+
+.sortable-widget-list .sortable-widget-placeholder,
+.sortable-widget-list .sortable-widget-item {
+    padding: 10px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    color: rgb(255, 255, 255);
+    background-color: #0bf;
+    border: 1px solid #0bf;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.sortable-widget-list .sortable-widget-placeholder {
+    border: 1px dashed #0bf;
+    background-color: inherit;
+}

django_sorting_field/fields.py

@@ -0,0 +1,19 @@
+const CreateSortableWidget = function(sortable_id) {
+    var sortable_list_id = "#" + sortable_id + "_list";
+
+    var refreshInputValue = function() {
+        result = [];
+        $(sortable_list_id).children(".sortable-widget-item").each(function(index, element) {
+            result.push($(element).data("id"));
+        });
+        $("input#" + sortable_id).val(JSON.stringify(result));
+    }
+
+    sortable(sortable_list_id, {
+        placeholder: '<div class="sortable-widget-placeholder">&nbsp;</div>'
+    })[0].addEventListener("sortstop", function() {
+        refreshInputValue();
+    });
+
+    refreshInputValue();
+};

django_sorting_field/static/sorting/css/sorting_widget.css

@@ -0,0 +1,11 @@
+<div class="sortable-widget-list" id="{{ id }}_list">
+    {% for item in items %}
+        <div class="sortable-widget-item" data-id="{{ item.id }}">{{ item.label }}</div>
+    {% endfor %}
+</div>
+<input type="hidden" id="{{ id }}" name="{{ name }}" value="">
+<script type="text/javascript">
+    $(document).ready(function() {
+        CreateSortableWidget("{{ id }}");
+    });
+</script>