Merge branch 'fix-firefox-dragging-dropping' into 'develop'

fix: dragging and dropping should work in firefox now

See merge request !218

assets/js/landing.js

@@ -16,7 +16,7 @@ window.pinned_cards = [
 let create_card = function(icon, title, caption, link) {
     let new_div = document.createElement('div');
     new_div.innerHTML = `
-    <a class="card-link card-dynamic" href="${link}">
+    <a class="card-link card-dynamic" ondragstart="window.cardDragStart(event)" ondragend="window.cardDragEnd(event)" href="${link}">
     <div class="card" draggable="True" ondragstart="window.cardDragStart(event)" ondragend="window.cardDragEnd(event)" data-icon='${icon}' data-title='${title}' data-caption='${caption}' data-link="${link}">
         <div class="card-header">
             <div class="card-icon">${icon}</div>
@@ -33,8 +33,8 @@ let create_card = function(icon, title, caption, link) {
 let create_pinned_card = function(icon, title, caption, link) {
     let new_div = document.createElement('div');
     new_div.innerHTML = `
-    <a class="card-link card-dynamic-pinned" href="${link}">
-    <div class="card-pinned" draggable="True" ondragstart="window.pinnedCardDragStart(event)" ondragend="window.pinnedCardDragEnd(event)"  data-icon='${icon}' data-title='${title}' data-caption='${caption}' data-link="${link}">
+    <a class="card-link card-dynamic-pinned" ondragstart="window.pinnedCardDragStart(event)" ondragend="window.pinnedCardDragEnd(event)"   href="${link}">
+    <div class="card-pinned" draggable="True" draggable="false" ondragstart="window.pinnedCardDragStart(event)" ondragend="window.pinnedCardDragEnd(event)"  data-icon='${icon}' data-title='${title}' data-caption='${caption}' data-link="${link}">
         <div class="card-header">
             <div class="card-icon">${icon}</div>
         </div>
@@ -77,17 +77,21 @@ let remove_from_list = function(the_list, the_object, key) {
 }
 // =============  DRAG&DROP functions  ========================================
 window.cardDragStart = function(event) {
+    var target = event.target;
+    if (target.nodeName == 'A') {
+        target = target.firstElementChild;
+    }
     // First, attach classes for animations
-    event.target.classList.add('card-dragged');
-    event.target.children[0].classList.add('card-dragged');
-    event.target.children[1].classList.add('card-dragged');
+    target.classList.add('card-dragged');
+    target.children[1].classList.add('card-dragged');
+    target.children[0].classList.add('card-dragged');
     $right_inner_container.classList.add('droppable');
     // Attach data about the card to drag&drop event
     let card = {
-        "title": event.target.dataset['title'],
-        "icon": event.target.dataset['icon'],
-        "caption": event.target.dataset['caption'],
-        "link": event.target.dataset['link'],
+        "title": target.dataset['title'],
+        "icon": target.dataset['icon'],
+        "caption": target.dataset['caption'],
+        "link": target.dataset['link'],
         "type": "big"
     }
     event.dataTransfer.setData("card", JSON.stringify(card));
@@ -96,20 +100,28 @@ window.cardDragStart = function(event) {
     return true;
 }
 window.cardDragEnd = function(event) {
-    event.target.classList.remove('card-dragged');
-    event.target.children[0].classList.remove('card-dragged');
-    event.target.children[1].classList.remove('card-dragged');
+    var target = event.target;
+    if (target.nodeName == 'A') {
+        target = target.firstElementChild;
+    }
+    target.classList.remove('card-dragged');
+    target.children[1].classList.remove('card-dragged');
+    target.children[0].classList.remove('card-dragged');
     $right_inner_container.classList.remove('droppable');
     return true;
 }
 window.pinnedCardDragStart = function(event) {
+    var target = event.target;
+    if (target.nodeName == 'A') {
+        target = target.firstElementChild;
+    }
     $left_inner_container.classList.add('droppable');
     // Attach data about the card to drag&drop event
     let card = {
-        "title": event.target.dataset['title'],
-        "icon": event.target.dataset['icon'],
-        "caption": event.target.dataset['caption'],
-        "link": event.target.dataset['link'],
+        "title": target.dataset['title'],
+        "icon": target.dataset['icon'],
+        "caption": target.dataset['caption'],
+        "link": target.dataset['link'],
         "type": "small"
     }
     event.dataTransfer.setData("card", JSON.stringify(card));