Skip to content

Commit 3a25ef4

Browse files
FinalAngelFinalAngel
authoredJan 6, 2017
Remove drag & drop image support (divio#125)
* Remove dnd support from image * added small adaption
·
1.2.0
1 parent 25c0b6e commit 3a25ef4

File tree

5 files changed

+121
-93
lines changed

5 files changed

+121
-93
lines changed
 

‎.editorconfig

+3
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,6 @@ insert_final_newline = false
3535

3636
[*plugins/responsive.html]
3737
insert_final_newline = false
38+
39+
[*plugins/image.html]
40+
insert_final_newline = false

‎CHANGELOG.rst

+5-3
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,11 @@ Changelog
3030
``PANEL_CONTEXT_DEFAULT``, ``ACCORDION_ITEM_CONTEXT_CHOICES``,
3131
``ACCORDION_ITEM_CONTEXT_DEFAULT``, ``LIST_GROUP_ITEM_CONTEXT_CHOICES``,
3232
``LIST_GROUP_ITEM_CONTEXT_DEFAULT``
33-
* **Backwards incompatible** change using the Bootstrap 3 Panel plugin:
34-
the Panel only allows header, body and footer now to be its direct decendands
35-
and the descendends require the "Panel" parent.
33+
* **Backwards incompatible** changes:
34+
* The Panel only allows header, body and footer now to be its direct
35+
decendands and the descendends require the "Panel" parent.
36+
* Drag & drop support has been removed from the rendered plugin markup
37+
until a cleaner version is ready
3638

3739

3840
1.1.2 (2016-09-05)

‎aldryn_bootstrap3/models.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -390,7 +390,7 @@ class Boostrap3ImagePlugin(CMSPlugin):
390390
attributes = AttributesField(
391391
verbose_name=_('Attributes'),
392392
blank=True,
393-
excluded_keys=['alt', 'class'],
393+
excluded_keys=['src', 'alt', 'class', 'title'],
394394
)
395395
classes = model_fields.Classes()
396396

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

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
{% comment %}
2+
3+
NOTE: Drag and drop support has been removed for now, this file is kept
4+
for reference on the old implementation / assets
5+
6+
DOCS: https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
7+
the browser assumes size="100vw" by default, which means
8+
"assume this image will be displayed at full width on the
9+
current viewport and pick an image from srcset accordingly".
10+
11+
{# only load js and css required for dnd upload if toolbar is available #}
12+
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
13+
{% addtoblock "css" %}<link rel="stylesheet" href="{% static 'aldryn_bootstrap3/css/base.css' %}">{% endaddtoblock %}
14+
{% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.min.js' %}"></script>{% endaddtoblock %}
15+
{% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.init.js' %}"></script>{% endaddtoblock %}
16+
{% endif %}
17+
18+
{% endcomment %}
19+
20+
{% comment %}
21+
# attached before the image
22+
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
23+
{% if has_dnd_support %}
24+
<span class="js-filer-dropzone filer-dropzone filer-dropzone-image-plugin" data-filer-url="{% url 'admin:bootstrap3_image_ajax_upload' pk=instance.pk %}">
25+
{% endif %}
26+
{% endif %}
27+
28+
# attached after the image
29+
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
30+
{% if has_dnd_support %}
31+
<span class="filer-dropzone-info-message js-filer-dropzone-info-message" style="display: none">
32+
<span class="filer-dropzone-icon"><span class="fa fa-cloud-upload"></span></span>
33+
34+
<span class="filer-dropzone-upload-welcome js-filer-dropzone-upload-welcome">
35+
<span class="text">{% trans 'Drop your file to change image:' %}</span>
36+
</span>
37+
38+
<span class="filer-dropzone-upload-info js-filer-dropzone-upload-info" style="display: none">
39+
<span class="js-filer-dropzone-file-name filer-dropzone-file-name"></span>
40+
<span class="filer-dropzone-progress js-filer-dropzone-progress"></span>
41+
</span>
42+
43+
<span class="js-filer-dropzone-upload-success" style="display: none">
44+
{% trans 'Upload success!' %}
45+
</span>
46+
</span>
47+
<span class="filer-dropzone-error-message js-filer-dropzone-error-message" style="display: none">
48+
<span class="icon"><span class="fa fa-cloud-upload"></span></span>
49+
<span class="js-filer-dropzone-upload-accept filer-dropzone-text">
50+
{% trans 'Error! Files of this type are not accepted.' %}
51+
</span>
52+
</span>
53+
</span>
54+
{% endif %}{# has_dnd_support #}
55+
{% endif %}
56+
57+
# attached to the css
58+
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}js-original-image {% endif %}
59+
{% endcomment %}
60+
61+
{% comment %}
62+
The raw image (original image) can be accessed via:
63+
* {{ instance.file.url }}
64+
There are additional parameters available for thumbnailing purposes:
65+
* {{ instance.srcset.lg }} large
66+
* {{ instance.srcset.md }} medium
67+
* {{ instance.srcset.sm }} small
68+
* {{ instance.srcset.xs }} extra small
69+
Example: {% thumbnail instance.file instance.srcset.lg.size ... %}
70+
71+
In addition, an iterable object is available via ``instance.srcset.items`` to
72+
access all size settings at once.
73+
Example: {% for device, src in instance.srcset.items %}
74+
{% endcomment %}

‎aldryn_bootstrap3/templates/aldryn_bootstrap3/plugins/image.html

+38-89
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,45 @@
1-
{% load i18n cms_tags thumbnail staticfiles sekizai_tags %}
2-
{% comment %}
3-
DOCS: https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
4-
the browser assumes size="100vw" by default, which means
5-
"assume this image will be displayed at full width on the
6-
current viewport and pick an image from srcset accordingly".
1+
{% load i18n cms_tags thumbnail staticfiles sekizai_tags %}{% comment %}
2+
The raw image (original image) can be accessed via:
3+
* {{ instance.file.url }}
4+
There are additional parameters available for thumbnailing purposes:
5+
* {{ instance.srcset.lg }} large
6+
* {{ instance.srcset.md }} medium
7+
* {{ instance.srcset.sm }} small
8+
* {{ instance.srcset.xs }} extra small
9+
Example: {% thumbnail instance.file instance.srcset.lg.size ... %}
710

8-
TODO: currently we're always upscaling the image physically.
9-
would it be better to upscale it with css? img-response
10-
does not seem to do that yet.
11-
{% endcomment %}
12-
13-
{# only load js and css required for dnd upload if toolbar is available #}
14-
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
15-
{% addtoblock "css" %}<link rel="stylesheet" href="{% static 'aldryn_bootstrap3/css/base.css' %}">{% endaddtoblock %}
16-
{% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.min.js' %}"></script>{% endaddtoblock %}
17-
{% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.init.js' %}"></script>{% endaddtoblock %}
18-
{% endif %}
19-
20-
{% spaceless %}
21-
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
22-
{% if has_dnd_support %}
23-
<span class="js-filer-dropzone filer-dropzone filer-dropzone-image-plugin" data-filer-url="{% url 'admin:bootstrap3_image_ajax_upload' pk=instance.pk %}">
24-
{% endif %}
25-
{% endif %}
26-
<img
27-
{% if instance.use_original_image %}
28-
src="{{ instance.file.url }}"
29-
{% else %}
30-
{% with main_src=instance.srcset.lg %}
31-
{% thumbnail instance.file main_src.size crop=main_src.crop upscale=main_src.upscale subject_location=main_src.subject_location as main_thumb %}
32-
src="{{ main_thumb.url }}"
33-
{% endwith %}
34-
{% endif %}
35-
alt="{{ instance.alt }}"
36-
{% if instance.title %}title="{{ instance.title }}"{% endif %}
37-
{% if instance.img_responsive or instance.shape or instance.thumbnail or instance.classes or request.toolbar %}
38-
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 %}"
39-
{% endif %}
40-
{% comment %}
41-
{# INFO: needs proper attributes for validation #}
42-
srcset="{% for device, src in instance.srcset.items %}
43-
{% if not forloop.first %}
44-
{% 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 %}
45-
{% endif %}
46-
{% endfor %}"
47-
{% endcomment %}
48-
>
49-
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
50-
{% if has_dnd_support %}
51-
<span class="filer-dropzone-info-message js-filer-dropzone-info-message" style="display: none">
52-
<span class="filer-dropzone-icon"><span class="fa fa-cloud-upload"></span></span>
53-
54-
<span class="filer-dropzone-upload-welcome js-filer-dropzone-upload-welcome">
55-
<span class="text">{% trans 'Drop your file to change image:' %}</span>
56-
</span>
57-
58-
<span class="filer-dropzone-upload-info js-filer-dropzone-upload-info" style="display: none">
59-
<span class="js-filer-dropzone-file-name filer-dropzone-file-name"></span>
60-
<span class="filer-dropzone-progress js-filer-dropzone-progress"></span>
61-
</span>
62-
63-
<span class="js-filer-dropzone-upload-success" style="display: none">
64-
{% trans 'Upload success!' %}
65-
</span>
66-
</span>
67-
<span class="filer-dropzone-error-message js-filer-dropzone-error-message" style="display: none">
68-
<span class="icon"><span class="fa fa-cloud-upload"></span></span>
69-
<span class="js-filer-dropzone-upload-accept filer-dropzone-text">
70-
{% trans 'Error! Files of this type are not accepted.' %}
71-
</span>
72-
</span>
73-
</span>
74-
{% endif %}{# has_dnd_support #}
75-
{% endif %}{# toolbar #}
76-
{% endspaceless %}
77-
{% if 0 %}
78-
<pre>
11+
In addition, an iterable object is available via ``instance.srcset.items`` to
12+
access all size settings at once.
13+
Example: {% for device, src in instance.srcset.items %}
14+
{% endcomment %}<img
15+
{% if instance.use_original_image %}
16+
src="{{ xwinstance.file.url }}"
17+
{% else %}
7918
{% with main_src=instance.srcset.lg %}
8019
{% thumbnail instance.file main_src.size crop=main_src.crop upscale=main_src.upscale subject_location=main_src.subject_location as main_thumb %}
8120
src="{{ main_thumb.url }}"
8221
{% endwith %}
83-
alt="{{ instance.alt }}"
84-
title="{{ instance.title }}"
85-
class="img-responsive{% if instance.shape %} img-{{ instance.shape }}{% endif %}{% if instance.thumbnail %} img-thumbnail{% endif %}"
22+
{% endif %}
23+
alt="{{ instance.alt }}"
24+
{% if instance.title %} title="{{ instance.title }}"{% endif %}
25+
{% if instance.img_responsive or instance.shape or instance.thumbnail or instance.classes or request.toolbar %}
26+
class="
27+
{% if instance.img_responsive %}img-responsive {% endif %}
28+
{% if instance.shape %}img-{{ instance.shape }} {% endif %}
29+
{% if instance.thumbnail %}img-thumbnail {% endif %}
30+
{% if instance.classes %}{{ instance.classes }} {% endif %}
31+
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode and has_dnd_support %} js-aldryn-bootstrap3-image-dnd{% endif %}
32+
"
33+
{% endif %}
34+
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode and has_dnd_support %}
35+
data-dnd-filer-url="{% url 'admin:bootstrap3_image_ajax_upload' pk=instance.pk %}"
36+
{% endif %}
37+
{% if srcset_support %}
8638
srcset="{% for device, src in instance.srcset.items %}
87-
{% 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 %}
39+
{% if not forloop.first %}
40+
{% 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 %}
41+
{% endif %}
8842
{% endfor %}"
89-
</pre>
90-
91-
<pre>
92-
{% for device, src in instance.srcset.items %}
93-
{{ src|pprint }}
94-
{% endfor %}
95-
</pre>
96-
{% endif %}
43+
{% endif %}
44+
{{ instance.attributes_str }}
45+
>{# include "admin/aldryn_bootstrap3/widgets/dragndrop.html" #}

0 commit comments

Comments
 (0)
Please sign in to comment.