Remove drag & drop image support (#125)

* Remove dnd support from image

* added small adaption

.editorconfig

@@ -35,3 +35,6 @@ insert_final_newline = false
 
 [*plugins/responsive.html]
 insert_final_newline = false
+
+[*plugins/image.html]
+insert_final_newline = false

CHANGELOG.rst

@@ -30,9 +30,11 @@ Changelog
   ``PANEL_CONTEXT_DEFAULT``, ``ACCORDION_ITEM_CONTEXT_CHOICES``,
   ``ACCORDION_ITEM_CONTEXT_DEFAULT``, ``LIST_GROUP_ITEM_CONTEXT_CHOICES``,
   ``LIST_GROUP_ITEM_CONTEXT_DEFAULT``
-* **Backwards incompatible** change using the Bootstrap 3 Panel plugin:
-  the Panel only allows header, body and footer now to be its direct decendands
-  and the descendends require the "Panel" parent.
+* **Backwards incompatible** changes:
+    * The Panel only allows header, body and footer now to be its direct
+      decendands and the descendends require the "Panel" parent.
+    * Drag & drop support has been removed from the rendered plugin markup
+      until a cleaner version is ready
 
 
 1.1.2 (2016-09-05)

aldryn_bootstrap3/models.py

@@ -390,7 +390,7 @@ class Boostrap3ImagePlugin(CMSPlugin):
     attributes = AttributesField(
         verbose_name=_('Attributes'),
         blank=True,
-        excluded_keys=['alt', 'class'],
+        excluded_keys=['src', 'alt', 'class', 'title'],
     )
     classes = model_fields.Classes()
 

aldryn_bootstrap3/templates/admin/aldryn_bootstrap3/widgets/dragndrop.html

@@ -0,0 +1,74 @@
+{% comment %}
+
+NOTE: Drag and drop support has been removed for now, this file is kept
+for reference on the old implementation / assets
+
+DOCS: https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
+the browser assumes size="100vw" by default, which means
+"assume this image will be displayed at full width on the
+current viewport and pick an image from srcset accordingly".
+
+{# only load js and css required for dnd upload if toolbar is available #}
+{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
+    {% addtoblock "css" %}<link rel="stylesheet" href="{% static 'aldryn_bootstrap3/css/base.css' %}">{% endaddtoblock %}
+    {% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.min.js' %}"></script>{% endaddtoblock %}
+    {% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.init.js' %}"></script>{% endaddtoblock %}
+{% endif %}
+
+{% endcomment %}
+
+{% comment %}
+# attached before the image
+{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
+    {% if has_dnd_support %}
+        <span class="js-filer-dropzone filer-dropzone filer-dropzone-image-plugin" data-filer-url="{% url 'admin:bootstrap3_image_ajax_upload' pk=instance.pk %}">
+    {% endif %}
+{% endif %}
+
+# attached after the image
+{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
+    {% if has_dnd_support %}
+            <span class="filer-dropzone-info-message js-filer-dropzone-info-message" style="display: none">
+                <span class="filer-dropzone-icon"><span class="fa fa-cloud-upload"></span></span>
+
+                <span class="filer-dropzone-upload-welcome js-filer-dropzone-upload-welcome">
+                    <span class="text">{% trans 'Drop your file to change image:' %}</span>
+                </span>
+
+                <span class="filer-dropzone-upload-info js-filer-dropzone-upload-info" style="display: none">
+                    <span class="js-filer-dropzone-file-name filer-dropzone-file-name"></span>
+                    <span class="filer-dropzone-progress js-filer-dropzone-progress"></span>
+                </span>
+
+                <span class="js-filer-dropzone-upload-success" style="display: none">
+                    {% trans 'Upload success!' %}
+                </span>
+            </span>
+            <span class="filer-dropzone-error-message js-filer-dropzone-error-message" style="display: none">
+                <span class="icon"><span class="fa fa-cloud-upload"></span></span>
+                <span class="js-filer-dropzone-upload-accept filer-dropzone-text">
+                    {% trans 'Error! Files of this type are not accepted.' %}
+                </span>
+            </span>
+        </span>
+    {% endif %}{# has_dnd_support #}
+{% endif %}
+
+# attached to the css
+{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}js-original-image {% endif %}
+{% endcomment %}
+
+{% comment %}
+The raw image (original image) can be accessed via:
+    * {{ instance.file.url }}
+There are additional parameters available for thumbnailing purposes:
+    * {{ instance.srcset.lg }} large
+    * {{ instance.srcset.md }} medium
+    * {{ instance.srcset.sm }} small
+    * {{ instance.srcset.xs }} extra small
+Example: {% thumbnail instance.file instance.srcset.lg.size ... %}
+
+In addition, an iterable object is available via ``instance.srcset.items`` to
+access all size settings at once.
+Example: {% for device, src in instance.srcset.items %}
+{% endcomment %}

aldryn_bootstrap3/templates/aldryn_bootstrap3/plugins/image.html

@@ -1,96 +1,45 @@
-{% load i18n cms_tags thumbnail staticfiles sekizai_tags %}
-{% comment %}
-DOCS: https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
-the browser assumes size="100vw" by default, which means
-"assume this image will be displayed at full width on the
-current viewport and pick an image from srcset accordingly".
+{% load i18n cms_tags thumbnail staticfiles sekizai_tags %}{% comment %}
+The raw image (original image) can be accessed via:
+    * {{ instance.file.url }}
+There are additional parameters available for thumbnailing purposes:
+    * {{ instance.srcset.lg }} large
+    * {{ instance.srcset.md }} medium
+    * {{ instance.srcset.sm }} small
+    * {{ instance.srcset.xs }} extra small
+Example: {% thumbnail instance.file instance.srcset.lg.size ... %}
 
-TODO: currently we're always upscaling the image physically.
-      would it be better to upscale it with css? img-response
-      does not seem to do that yet.
-{% endcomment %}
-
-{# only load js and css required for dnd upload if toolbar is available #}
-{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
-    {% addtoblock "css" %}<link rel="stylesheet" href="{% static 'aldryn_bootstrap3/css/base.css' %}">{% endaddtoblock %}
-    {% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.min.js' %}"></script>{% endaddtoblock %}
-    {% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.init.js' %}"></script>{% endaddtoblock %}
-{% endif %}
-
-{% spaceless %}
-    {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
-        {% if has_dnd_support %}
-            <span class="js-filer-dropzone filer-dropzone filer-dropzone-image-plugin" data-filer-url="{% url 'admin:bootstrap3_image_ajax_upload' pk=instance.pk %}">
-        {% endif %}
-    {% endif %}
-                <img
-                    {% if instance.use_original_image %}
-                        src="{{ instance.file.url }}"
-                    {% else %}
-                        {% with main_src=instance.srcset.lg %}
-                            {% thumbnail instance.file main_src.size crop=main_src.crop upscale=main_src.upscale subject_location=main_src.subject_location as main_thumb %}
-                            src="{{ main_thumb.url }}"
-                        {% endwith %}
-                    {% endif %}
-                    alt="{{ instance.alt }}"
-                    {% if instance.title %}title="{{ instance.title }}"{% endif %}
-                    {% if instance.img_responsive or instance.shape or instance.thumbnail or instance.classes or request.toolbar %}
-                        class="{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}js-original-image {% endif %}{% if instance.img_responsive %}img-responsive{% endif %}{% if instance.shape %} img-{{ instance.shape }}{% endif %}{% if instance.thumbnail %} img-thumbnail{% endif %}{% if instance.classes %} {{ instance.classes }}{% endif %}"
-                    {% endif %}
-                    {% comment %}
-                    {# INFO: needs proper attributes for validation #}
-                    srcset="{% for device, src in instance.srcset.items %}
-                        {% if not forloop.first %}
-                            {% thumbnail instance.file src.size crop=src.crop upscale=src.upscale subject_location=src.subject_location as thumb %}{{ thumb.url }} {{ src.width_str }}{% if not forloop.last %},{% endif %}
-                        {% endif %}
-                    {% endfor %}"
-                    {% endcomment %}
-                >
-    {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
-        {% if has_dnd_support %}
-                <span class="filer-dropzone-info-message js-filer-dropzone-info-message" style="display: none">
-                    <span class="filer-dropzone-icon"><span class="fa fa-cloud-upload"></span></span>
-
-                    <span class="filer-dropzone-upload-welcome js-filer-dropzone-upload-welcome">
-                        <span class="text">{% trans 'Drop your file to change image:' %}</span>
-                    </span>
-
-                    <span class="filer-dropzone-upload-info js-filer-dropzone-upload-info" style="display: none">
-                        <span class="js-filer-dropzone-file-name filer-dropzone-file-name"></span>
-                        <span class="filer-dropzone-progress js-filer-dropzone-progress"></span>
-                    </span>
-
-                    <span class="js-filer-dropzone-upload-success" style="display: none">
-                        {% trans 'Upload success!' %}
-                    </span>
-                </span>
-                <span class="filer-dropzone-error-message js-filer-dropzone-error-message" style="display: none">
-                    <span class="icon"><span class="fa fa-cloud-upload"></span></span>
-                    <span class="js-filer-dropzone-upload-accept filer-dropzone-text">
-                        {% trans 'Error! Files of this type are not accepted.' %}
-                    </span>
-                </span>
-            </span>
-        {% endif %}{# has_dnd_support #}
-    {% endif %}{# toolbar #}
-{% endspaceless %}
-{% if 0 %}
-    <pre>
+In addition, an iterable object is available via ``instance.srcset.items`` to
+access all size settings at once.
+Example: {% for device, src in instance.srcset.items %}
+{% endcomment %}<img
+    {% if instance.use_original_image %}
+        src="{{ xwinstance.file.url }}"
+    {% else %}
         {% with main_src=instance.srcset.lg %}
             {% thumbnail instance.file main_src.size crop=main_src.crop upscale=main_src.upscale subject_location=main_src.subject_location as main_thumb %}
             src="{{ main_thumb.url }}"
         {% endwith %}
-        alt="{{ instance.alt }}"
-        title="{{ instance.title }}"
-        class="img-responsive{% if instance.shape %} img-{{ instance.shape }}{% endif %}{% if instance.thumbnail %} img-thumbnail{% endif %}"
+    {% endif %}
+    alt="{{ instance.alt }}"
+    {% if instance.title %} title="{{ instance.title }}"{% endif %}
+    {% if instance.img_responsive or instance.shape or instance.thumbnail or instance.classes or request.toolbar %}
+        class="
+            {% if instance.img_responsive %}img-responsive {% endif %}
+            {% if instance.shape %}img-{{ instance.shape }} {% endif %}
+            {% if instance.thumbnail %}img-thumbnail {% endif %}
+            {% if instance.classes %}{{ instance.classes }} {% endif %}
+            {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode and has_dnd_support %} js-aldryn-bootstrap3-image-dnd{% endif %}
+        "
+    {% endif %}
+    {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode and has_dnd_support %}
+        data-dnd-filer-url="{% url 'admin:bootstrap3_image_ajax_upload' pk=instance.pk %}"
+    {% endif %}
+    {% if srcset_support %}
         srcset="{% for device, src in instance.srcset.items %}
-            {% thumbnail instance.file src.size crop=src.crop upscale=src.upscale subject_location=src.subject_location as thumb %}{{ thumb.url }} {{ src.width_str }}{% if not forloop.last %},{% endif %}
+            {% if not forloop.first %}
+                {% thumbnail instance.file src.size crop=src.crop upscale=src.upscale subject_location=src.subject_location as thumb %}{{ thumb.url }} {{ src.width_str }}{% if not forloop.last %},{% endif %}
+            {% endif %}
         {% endfor %}"
-    </pre>
-
-    <pre>
-        {% for device, src in instance.srcset.items %}
-            {{ src|pprint }}
-        {% endfor %}
-    </pre>
-{% endif %}
+    {% endif %}
+    {{ instance.attributes_str }}
+>{# include "admin/aldryn_bootstrap3/widgets/dragndrop.html" #}