diff --git a/assets/js/landing.js b/assets/js/landing.js index 412dc003ea77220ef62a65e1f5380505040218aa..d80789aeb6948ac9c8f3af317c34fe4f688695a0 100644 --- a/assets/js/landing.js +++ b/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));