From a1bb8ac46119133838a8119a5d15c98079d06a6c Mon Sep 17 00:00:00 2001
From: =?utf8?q?Benoi=CC=82t=20Pin?= <benoit.pin@gmail.com>
Date: Sun, 31 Aug 2014 10:25:16 +0200
Subject: [PATCH] =?utf8?q?Premi=C3=A8re=20exp=C3=A9rimentations=20(et=20pr?=
=?utf8?q?emi=C3=A8re=20gal=C3=A8res=E2=80=A6)=20de=20l'ordonnancement=20p?=
=?utf8?q?ar=20drag=20and=20drop.=20D=C3=A9sactivation=20du=20dragging=20p?=
=?utf8?q?ar=20d=C3=A9faut=20de=20Firefox=20/=20gecko=20based.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit
---
skins/photo_layout_macros.pt | 3 ++-
skins/photo_lightbox_viewer.js | 34 ++++++++++++++++++++++++++++++++++
skins/portfolio_style.css.dtml | 16 ++++++++++++++++
3 files changed, 52 insertions(+), 1 deletion(-)
diff --git a/skins/photo_layout_macros.pt b/skins/photo_layout_macros.pt
index 68d9f1d..7960516 100644
--- a/skins/photo_layout_macros.pt
+++ b/skins/photo_layout_macros.pt
@@ -19,7 +19,8 @@
selected info/selected|nothing"
tal:attributes="class info/className;
name info/cmf_uid"
- metal:define-macro="thumbnail">
+ metal:define-macro="thumbnail"
+ draggable="true">
<a class="slide" tal:attributes="href info/href; title info/title">
<img tal:attributes="src info/thumbUrl;
alt info/title;
diff --git a/skins/photo_lightbox_viewer.js b/skins/photo_lightbox_viewer.js
index bb27a67..cb8be26 100644
--- a/skins/photo_lightbox_viewer.js
+++ b/skins/photo_lightbox_viewer.js
@@ -46,8 +46,40 @@ Lightbox = function(grid, toolbar, complete, container_type) {
fm.onBeforeSubmit = function(fm_, evt) {return self.onBeforeSubmit(fm_, evt);};
fm.onResponseLoad = function(req) {return self.onResponseLoad(req);};
}
+ this.disableDefaultDragging();
+ addListener(this.grid,
+ 'dragstart',
+ function(evt) {
+ var target = getTargetedObject(evt);
+ console.info('dragstart',
+ target);
+ evt.dataTransfer.setData('text', '');
+ target.style.opacity = 0;
+ target.style.width = 0;
+ // disableDefault(evt);
+ });
};
+if (browser.isGecko) {
+ Lightbox.prototype.disableDefaultDragging = function(element) {
+ if (!element) {
+ element = this.grid;
+ }
+ var i, j, name, elements;
+ var elementsNames = ['a', 'img'];
+ for (i=0 ; i < elementsNames.length ; i++) {
+ name = elementsNames[i];
+ elements = element.getElementsByTagName(name);
+ for (j=0 ; j < elements.length ; j++) {
+ elements[j].draggable=false;
+ }
+ }
+ };
+}
+else {
+ Lightbox.prototype.disableDefaultDragging = function() {};
+}
+
Lightbox.prototype._buildSlidesIndex = function() {
this.slides = [];
var node, i;
@@ -350,6 +382,7 @@ Lightbox.prototype._refreshGrid = function(req) {
node = doc.childNodes[i];
if (node.nodeType === 1) {
node = getCopyOfNode(node);
+ this.disableDefaultDragging(node);
this.grid.replaceChild(node, this.slides[j]);
this.slides[j] = node;
j++;
@@ -392,6 +425,7 @@ Lightbox.prototype._appendTail = function(req) {
node = doc.childNodes[i];
if (node.nodeType === 1) {
this.lastSlide = this.grid.appendChild(getCopyOfNode(node));
+ this.disableDefaultDragging(this.lastSlide);
this.slides.push(this.lastSlide);
if (this.cbIndex) {
c = this.lastSlide.getElementsByTagName('input')[0];
diff --git a/skins/portfolio_style.css.dtml b/skins/portfolio_style.css.dtml
index 13a6782..df9811c 100755
--- a/skins/portfolio_style.css.dtml
+++ b/skins/portfolio_style.css.dtml
@@ -520,6 +520,22 @@ th.num {
color: &dtml-messageFontColor;;
}
+/* drag and drop */
+#lightbox img,
+#lightbox a {
+ user-drag: none;
+ -moz-user-select: none;
+ -webkit-user-drag: none;
+}
+
+*[draggable=true] {
+ -moz-user-select:none;
+ -khtml-user-drag: element;
+ -webkit-user-drag: element;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+}
+
/*
</dtml-with>
</dtml-with>
--
2.20.1