From abee170f0e85bd6dca986f41145d868f55fef198 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Wed, 30 Oct 2024 09:52:49 -0400 Subject: [PATCH 01/16] WIP --- playbook-website/config/menu.yml | 2 +- .../docs/_draggable_default.html.erb | 7 +++ .../playbook/pb_draggable/docs/example.yml | 3 + .../playbook/pb_draggable/draggable.html.erb | 61 +++++++++++++++++++ .../playbook/pb_draggable/draggable.rb | 14 +++++ 5 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/draggable.rb diff --git a/playbook-website/config/menu.yml b/playbook-website/config/menu.yml index 61f8012c84..edb6ad85cd 100644 --- a/playbook-website/config/menu.yml +++ b/playbook-website/config/menu.yml @@ -431,7 +431,7 @@ kits: platforms: *1 status: stable - name: draggable - platforms: *2 + platforms: *1 description: status: stable - category: message_text_patterns diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb new file mode 100644 index 0000000000..81e782c129 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb @@ -0,0 +1,7 @@ +<% initial_items = [ + { id: "21", name: "Image 1" }, + { id: "22", name: "Image 2" }, + { id: "23", name: "Image 3" }, +] %> + +<%= pb_rails("draggable", props: {initial_items: initial_items}) %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml b/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml index 141356a735..42fa668461 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml @@ -8,4 +8,7 @@ examples: - draggable_with_cards: Draggable with Cards - draggable_multiple_containers: Dragging Across Multiple Containers + rails: + - draggable_default: Default + diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb new file mode 100644 index 0000000000..1c9d648d3c --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb @@ -0,0 +1,61 @@ +<%= pb_content_tag do %> +
+ <% object.initial_items.each do |item| %> +
+ <%= item[:name] %> +
+ <% end %> +
+<% end %> + + diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable.rb b/playbook/app/pb_kits/playbook/pb_draggable/draggable.rb new file mode 100644 index 0000000000..c14cfcadf1 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable.rb @@ -0,0 +1,14 @@ +# frozen_string_literal: true + +module Playbook + module PbDraggable + class Draggable < ::Playbook::KitBase + prop :initial_items, type: Playbook::Props::Array, + default: [] + + def classname + generate_classname("pb_draggable") + end + end + end +end From b53e06c65d149034a509e9e8250262c4fc7b3e46 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Wed, 30 Oct 2024 13:19:49 -0400 Subject: [PATCH 02/16] WIP added enhanced element file --- playbook/app/entrypoints/playbook-rails.js | 3 + .../playbook/pb_draggable/draggable.html.erb | 46 ---------------- .../playbook/pb_draggable/draggable.rb | 4 ++ .../pb_kits/playbook/pb_draggable/index.js | 55 +++++++++++++++++++ 4 files changed, 62 insertions(+), 46 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/index.js diff --git a/playbook/app/entrypoints/playbook-rails.js b/playbook/app/entrypoints/playbook-rails.js index 7769cb5fb9..7c73e41eb8 100644 --- a/playbook/app/entrypoints/playbook-rails.js +++ b/playbook/app/entrypoints/playbook-rails.js @@ -50,6 +50,9 @@ PbStarRating.start() import PbRadio from 'kits/pb_radio' PbRadio.start() +import PbDraggable from 'kits/pb_draggable' +PbDraggable.start() + import 'flatpickr' // React-Rendered Rails Kits ===== diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb index 1c9d648d3c..25c317baf4 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb @@ -13,49 +13,3 @@ <% end %> <% end %> - - diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable.rb b/playbook/app/pb_kits/playbook/pb_draggable/draggable.rb index c14cfcadf1..fd1dfff29c 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable.rb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable.rb @@ -6,6 +6,10 @@ class Draggable < ::Playbook::KitBase prop :initial_items, type: Playbook::Props::Array, default: [] + def data + Hash(prop(:data)).merge(pb_draggable: true) + end + def classname generate_classname("pb_draggable") end diff --git a/playbook/app/pb_kits/playbook/pb_draggable/index.js b/playbook/app/pb_kits/playbook/pb_draggable/index.js new file mode 100644 index 0000000000..bae75b930e --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/index.js @@ -0,0 +1,55 @@ +import PbEnhancedElement from "../pb_enhanced_element"; + +const DRAGGABLE_SELECTOR = "[data-pb-draggable]"; + +export default class PbDragabble extends PbEnhancedElement { + static get selector() { + return DRAGGABLE_SELECTOR; + } + + connect() { + this.bindEventListeners(); + } + + bindEventListeners() { + // Event listeners for all draggable items and containers + this.element.querySelectorAll(".draggable-item").forEach(item => { + item.addEventListener("dragstart", this.handleDragStart.bind(this)); + item.addEventListener("dragend", this.handleDragEnd.bind(this)); + }); + + this.element.querySelectorAll(".draggable-container").forEach(container => { + container.addEventListener("dragover", this.handleDragOver.bind(this)); + container.addEventListener("drop", this.handleDrop.bind(this)); + }); + } + + handleDragStart(event) { + this.draggedItemId = event.target.id; + event.target.classList.add("is-dragging"); + } + + handleDragOver(event) { + event.preventDefault(); + event.target.classList.add("active-container"); + } + + handleDrop(event) { + event.preventDefault(); + const target = event.target; + const draggedElement = document.getElementById(this.draggedItemId); + + if (target && draggedElement && target !== draggedElement) { + target.appendChild(draggedElement); + draggedElement.classList.remove("is-dragging"); + } + + target.classList.remove("active-container"); + this.draggedItemId = null; + } + + handleDragEnd(event) { + event.target.classList.remove("is-dragging"); + this.draggedItemId = null; + } +} From 4c86aff01687db9d824e1dc706b2ecac74e92a91 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Thu, 31 Oct 2024 12:38:09 -0400 Subject: [PATCH 03/16] Added card for easier debugging --- .../app/pb_kits/playbook/pb_draggable/draggable.html.erb | 6 ++++-- playbook/app/pb_kits/playbook/pb_draggable/index.js | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb index 25c317baf4..efab7407f6 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb @@ -1,14 +1,16 @@ <%= pb_content_tag do %> -
+
<% object.initial_items.each do |item| %>
+ <%= pb_rails("card") do %> <%= item[:name] %> + <% end %>
<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_draggable/index.js b/playbook/app/pb_kits/playbook/pb_draggable/index.js index bae75b930e..a58a8ac7ea 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/index.js +++ b/playbook/app/pb_kits/playbook/pb_draggable/index.js @@ -13,12 +13,12 @@ export default class PbDragabble extends PbEnhancedElement { bindEventListeners() { // Event listeners for all draggable items and containers - this.element.querySelectorAll(".draggable-item").forEach(item => { + this.element.querySelectorAll(".pb_draggable_item").forEach(item => { item.addEventListener("dragstart", this.handleDragStart.bind(this)); item.addEventListener("dragend", this.handleDragEnd.bind(this)); }); - this.element.querySelectorAll(".draggable-container").forEach(container => { + this.element.querySelectorAll(".pb_draggable_container").forEach(container => { container.addEventListener("dragover", this.handleDragOver.bind(this)); container.addEventListener("drop", this.handleDrop.bind(this)); }); From 0185b4cbcd1ffb70d283c5a03eaf9c0db817975a Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Thu, 31 Oct 2024 14:02:53 -0400 Subject: [PATCH 04/16] Fixed issue with drag item becoming drag container --- .../playbook/pb_draggable/draggable.html.erb | 10 ++--- .../pb_kits/playbook/pb_draggable/index.js | 41 ++++++++++++------- 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb index efab7407f6..69d035f7de 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb @@ -1,16 +1,14 @@ <%= pb_content_tag do %> -
+
<% object.initial_items.each do |item| %>
- <%= pb_rails("card") do %> - <%= item[:name] %> - <% end %> + <%= pb_rails("card") do %> + <%= item[:name] %> + <% end %>
<% end %>
diff --git a/playbook/app/pb_kits/playbook/pb_draggable/index.js b/playbook/app/pb_kits/playbook/pb_draggable/index.js index a58a8ac7ea..f0e8daabec 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/index.js +++ b/playbook/app/pb_kits/playbook/pb_draggable/index.js @@ -1,55 +1,68 @@ import PbEnhancedElement from "../pb_enhanced_element"; const DRAGGABLE_SELECTOR = "[data-pb-draggable]"; +const DRAGGABLE_CONTAINER = ".pb_draggable_container"; -export default class PbDragabble extends PbEnhancedElement { +export default class PbDraggable extends PbEnhancedElement { static get selector() { return DRAGGABLE_SELECTOR; } connect() { - this.bindEventListeners(); + document.addEventListener("DOMContentLoaded", () => this.bindEventListeners()); } bindEventListeners() { - // Event listeners for all draggable items and containers this.element.querySelectorAll(".pb_draggable_item").forEach(item => { item.addEventListener("dragstart", this.handleDragStart.bind(this)); item.addEventListener("dragend", this.handleDragEnd.bind(this)); + item.addEventListener("dragenter", this.handleDragEnter.bind(this)); }); - this.element.querySelectorAll(".pb_draggable_container").forEach(container => { + const container = this.element.querySelector(DRAGGABLE_CONTAINER); + if (container) { container.addEventListener("dragover", this.handleDragOver.bind(this)); container.addEventListener("drop", this.handleDrop.bind(this)); - }); + } } + handleDragEnter(event) { + if (event.target.id === this.draggedItemId) { + event.target.classList.add("is_dragging"); + } + } handleDragStart(event) { this.draggedItemId = event.target.id; - event.target.classList.add("is-dragging"); + event.target.classList.add("is_dragging"); } handleDragOver(event) { event.preventDefault(); - event.target.classList.add("active-container"); + event.target.classList.add("active_container"); } handleDrop(event) { event.preventDefault(); const target = event.target; + + if (!target.classList.contains("pb_draggable_container")) { + return; + } + const draggedElement = document.getElementById(this.draggedItemId); - - if (target && draggedElement && target !== draggedElement) { + + if (draggedElement) { target.appendChild(draggedElement); - draggedElement.classList.remove("is-dragging"); + draggedElement.classList.remove("is_dragging"); } - - target.classList.remove("active-container"); - this.draggedItemId = null; + + target.classList.remove("active_container"); + this.draggedItemId = null; } + handleDragEnd(event) { - event.target.classList.remove("is-dragging"); + event.target.classList.remove("is_dragging"); this.draggedItemId = null; } } From 910f0217aeed6bbd7890266e0e95392f49d6f772 Mon Sep 17 00:00:00 2001 From: Jasper Date: Thu, 31 Oct 2024 14:49:52 -0400 Subject: [PATCH 05/16] Testing Rails Side With Placeholder --- .../playbook/pb_draggable/_draggable.scss | 18 +++ .../pb_kits/playbook/pb_draggable/index.js | 123 ++++++++++++++---- 2 files changed, 118 insertions(+), 23 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss b/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss index 366b4d2ac0..098f45f292 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss +++ b/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss @@ -8,4 +8,22 @@ .pb_draggable_item:hover { cursor: grab; } + &.active_container { + background-color: rgba(0, 0, 0, 0.05); + } +} + +.pb_draggable_placeholder { + background-color: #e0e0e0; + border: 2px dashed #999; + margin: 4px 0; + border-radius: 4px; +} + +.pb_draggable_item { + &.is_dragging { + opacity: 0.5; + position: relative; + z-index: 1000; + } } diff --git a/playbook/app/pb_kits/playbook/pb_draggable/index.js b/playbook/app/pb_kits/playbook/pb_draggable/index.js index f0e8daabec..c4c1aa6d3d 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/index.js +++ b/playbook/app/pb_kits/playbook/pb_draggable/index.js @@ -9,14 +9,26 @@ export default class PbDraggable extends PbEnhancedElement { } connect() { + this.draggedItem = null; + this.draggedItemId = null; + this.placeholder = this.createPlaceholder(); document.addEventListener("DOMContentLoaded", () => this.bindEventListeners()); } + createPlaceholder() { + const placeholder = document.createElement('div'); + placeholder.classList.add('pb_draggable_placeholder'); + placeholder.style.height = '0'; + placeholder.style.transition = 'height 0.2s'; + return placeholder; + } + bindEventListeners() { this.element.querySelectorAll(".pb_draggable_item").forEach(item => { item.addEventListener("dragstart", this.handleDragStart.bind(this)); item.addEventListener("dragend", this.handleDragEnd.bind(this)); item.addEventListener("dragenter", this.handleDragEnter.bind(this)); + item.addEventListener("dragleave", this.handleDragLeave.bind(this)); }); const container = this.element.querySelector(DRAGGABLE_CONTAINER); @@ -26,43 +38,108 @@ export default class PbDraggable extends PbEnhancedElement { } } - handleDragEnter(event) { - if (event.target.id === this.draggedItemId) { - event.target.classList.add("is_dragging"); - } - } handleDragStart(event) { + this.draggedItem = event.target; this.draggedItemId = event.target.id; event.target.classList.add("is_dragging"); + + // Store initial height for placeholder + const rect = event.target.getBoundingClientRect(); + this.placeholder.style.height = `${rect.height}px`; + + // Set drag image + if (event.dataTransfer) { + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('text/plain', this.draggedItemId); + } + + setTimeout(() => { + event.target.style.opacity = '0.5'; + }, 0); + } + + handleDragEnter(event) { + if (!this.draggedItem || event.target === this.draggedItem) return; + + const targetItem = event.target.closest('.pb_draggable_item'); + if (!targetItem) return; + + const container = targetItem.parentNode; + const items = [...container.children]; + const draggedIndex = items.indexOf(this.draggedItem); + const targetIndex = items.indexOf(targetItem); + + if (draggedIndex !== -1 && targetIndex !== -1) { + // Remove existing placeholder + this.placeholder.remove(); + + // Insert placeholder based on mouse position + const rect = targetItem.getBoundingClientRect(); + const midpoint = rect.top + rect.height / 2; + + if (event.clientY < midpoint) { + targetItem.parentNode.insertBefore(this.placeholder, targetItem); + } else { + targetItem.parentNode.insertBefore(this.placeholder, targetItem.nextSibling); + } + } + } + + handleDragLeave(event) { + if (event.target.closest(DRAGGABLE_CONTAINER) !== event.relatedTarget?.closest(DRAGGABLE_CONTAINER)) { + this.placeholder.remove(); + } } handleDragOver(event) { - event.preventDefault(); - event.target.classList.add("active_container"); + event.preventDefault(); + const container = event.target.closest(DRAGGABLE_CONTAINER); + if (container) { + container.classList.add("active_container"); + + // Handle empty container + if (!container.querySelector('.pb_draggable_item:not(.is_dragging)')) { + container.appendChild(this.placeholder); + } + } } handleDrop(event) { event.preventDefault(); - const target = event.target; - - if (!target.classList.contains("pb_draggable_container")) { - return; - } - - const draggedElement = document.getElementById(this.draggedItemId); - - if (draggedElement) { - target.appendChild(draggedElement); - draggedElement.classList.remove("is_dragging"); + const container = event.target.closest(DRAGGABLE_CONTAINER); + if (!container || !this.draggedItem) return; + + container.classList.remove("active_container"); + this.draggedItem.style.opacity = '1'; + + // Replace placeholder with dragged item + if (this.placeholder.parentNode) { + this.placeholder.parentNode.insertBefore(this.draggedItem, this.placeholder); + this.placeholder.remove(); + } else { + container.appendChild(this.draggedItem); } - - target.classList.remove("active_container"); - this.draggedItemId = null; + + // Trigger custom event + const customEvent = new CustomEvent('pb-draggable-reorder', { + detail: { + itemId: this.draggedItemId, + containerId: container.id, + newIndex: Array.from(container.children).indexOf(this.draggedItem) + } + }); + this.element.dispatchEvent(customEvent); } - handleDragEnd(event) { event.target.classList.remove("is_dragging"); - this.draggedItemId = null; + event.target.style.opacity = '1'; + this.placeholder.remove(); + this.draggedItem = null; + this.draggedItemId = null; + + this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => { + container.classList.remove("active_container"); + }); } } From fe3d96dd6af92d02175435b3090647f483f13458 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Fri, 1 Nov 2024 09:08:57 -0400 Subject: [PATCH 06/16] Fixes for scss --- .../playbook/pb_draggable/_draggable.scss | 16 +--------------- .../app/pb_kits/playbook/pb_draggable/index.js | 5 ----- 2 files changed, 1 insertion(+), 20 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss b/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss index 098f45f292..dd4c468c32 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss +++ b/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss @@ -8,22 +8,8 @@ .pb_draggable_item:hover { cursor: grab; } - &.active_container { - background-color: rgba(0, 0, 0, 0.05); - } } .pb_draggable_placeholder { - background-color: #e0e0e0; - border: 2px dashed #999; - margin: 4px 0; - border-radius: 4px; -} - -.pb_draggable_item { - &.is_dragging { - opacity: 0.5; - position: relative; - z-index: 1000; - } + background-color: rgba($neutral, $opacity_5); } diff --git a/playbook/app/pb_kits/playbook/pb_draggable/index.js b/playbook/app/pb_kits/playbook/pb_draggable/index.js index c4c1aa6d3d..60c85a5521 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/index.js +++ b/playbook/app/pb_kits/playbook/pb_draggable/index.js @@ -70,10 +70,8 @@ export default class PbDraggable extends PbEnhancedElement { const targetIndex = items.indexOf(targetItem); if (draggedIndex !== -1 && targetIndex !== -1) { - // Remove existing placeholder this.placeholder.remove(); - // Insert placeholder based on mouse position const rect = targetItem.getBoundingClientRect(); const midpoint = rect.top + rect.height / 2; @@ -97,7 +95,6 @@ export default class PbDraggable extends PbEnhancedElement { if (container) { container.classList.add("active_container"); - // Handle empty container if (!container.querySelector('.pb_draggable_item:not(.is_dragging)')) { container.appendChild(this.placeholder); } @@ -112,7 +109,6 @@ export default class PbDraggable extends PbEnhancedElement { container.classList.remove("active_container"); this.draggedItem.style.opacity = '1'; - // Replace placeholder with dragged item if (this.placeholder.parentNode) { this.placeholder.parentNode.insertBefore(this.draggedItem, this.placeholder); this.placeholder.remove(); @@ -120,7 +116,6 @@ export default class PbDraggable extends PbEnhancedElement { container.appendChild(this.draggedItem); } - // Trigger custom event const customEvent = new CustomEvent('pb-draggable-reorder', { detail: { itemId: this.draggedItemId, From 890e67393ab8813ee65f354c9ed155db56a83496 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Sun, 3 Nov 2024 00:20:35 -0400 Subject: [PATCH 07/16] Remove placeholder --- .../pb_kits/playbook/pb_draggable/index.js | 55 +++---------------- 1 file changed, 8 insertions(+), 47 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/index.js b/playbook/app/pb_kits/playbook/pb_draggable/index.js index 60c85a5521..b0d2739f61 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/index.js +++ b/playbook/app/pb_kits/playbook/pb_draggable/index.js @@ -11,24 +11,14 @@ export default class PbDraggable extends PbEnhancedElement { connect() { this.draggedItem = null; this.draggedItemId = null; - this.placeholder = this.createPlaceholder(); document.addEventListener("DOMContentLoaded", () => this.bindEventListeners()); } - createPlaceholder() { - const placeholder = document.createElement('div'); - placeholder.classList.add('pb_draggable_placeholder'); - placeholder.style.height = '0'; - placeholder.style.transition = 'height 0.2s'; - return placeholder; - } - bindEventListeners() { this.element.querySelectorAll(".pb_draggable_item").forEach(item => { item.addEventListener("dragstart", this.handleDragStart.bind(this)); item.addEventListener("dragend", this.handleDragEnd.bind(this)); item.addEventListener("dragenter", this.handleDragEnter.bind(this)); - item.addEventListener("dragleave", this.handleDragLeave.bind(this)); }); const container = this.element.querySelector(DRAGGABLE_CONTAINER); @@ -42,12 +32,7 @@ export default class PbDraggable extends PbEnhancedElement { this.draggedItem = event.target; this.draggedItemId = event.target.id; event.target.classList.add("is_dragging"); - - // Store initial height for placeholder - const rect = event.target.getBoundingClientRect(); - this.placeholder.style.height = `${rect.height}px`; - - // Set drag image + if (event.dataTransfer) { event.dataTransfer.effectAllowed = 'move'; event.dataTransfer.setData('text/plain', this.draggedItemId); @@ -65,39 +50,23 @@ export default class PbDraggable extends PbEnhancedElement { if (!targetItem) return; const container = targetItem.parentNode; - const items = [...container.children]; + const items = Array.from(container.children); const draggedIndex = items.indexOf(this.draggedItem); const targetIndex = items.indexOf(targetItem); - if (draggedIndex !== -1 && targetIndex !== -1) { - this.placeholder.remove(); - - const rect = targetItem.getBoundingClientRect(); - const midpoint = rect.top + rect.height / 2; - - if (event.clientY < midpoint) { - targetItem.parentNode.insertBefore(this.placeholder, targetItem); - } else { - targetItem.parentNode.insertBefore(this.placeholder, targetItem.nextSibling); - } - } - } - - handleDragLeave(event) { - if (event.target.closest(DRAGGABLE_CONTAINER) !== event.relatedTarget?.closest(DRAGGABLE_CONTAINER)) { - this.placeholder.remove(); + if (draggedIndex > targetIndex) { + container.insertBefore(this.draggedItem, targetItem); + } else { + container.insertBefore(this.draggedItem, targetItem.nextSibling); } } handleDragOver(event) { event.preventDefault(); const container = event.target.closest(DRAGGABLE_CONTAINER); + if (container) { container.classList.add("active_container"); - - if (!container.querySelector('.pb_draggable_item:not(.is_dragging)')) { - container.appendChild(this.placeholder); - } } } @@ -108,13 +77,6 @@ export default class PbDraggable extends PbEnhancedElement { container.classList.remove("active_container"); this.draggedItem.style.opacity = '1'; - - if (this.placeholder.parentNode) { - this.placeholder.parentNode.insertBefore(this.draggedItem, this.placeholder); - this.placeholder.remove(); - } else { - container.appendChild(this.draggedItem); - } const customEvent = new CustomEvent('pb-draggable-reorder', { detail: { @@ -129,10 +91,9 @@ export default class PbDraggable extends PbEnhancedElement { handleDragEnd(event) { event.target.classList.remove("is_dragging"); event.target.style.opacity = '1'; - this.placeholder.remove(); this.draggedItem = null; this.draggedItemId = null; - + this.element.querySelectorAll(DRAGGABLE_CONTAINER).forEach(container => { container.classList.remove("active_container"); }); From ac758e6e262a95193c5640388a56e931df06b26d Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Sun, 3 Nov 2024 00:27:41 -0400 Subject: [PATCH 08/16] store reordered list as data attribute --- .../pb_kits/playbook/pb_draggable/index.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/index.js b/playbook/app/pb_kits/playbook/pb_draggable/index.js index b0d2739f61..19f6edcf8f 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/index.js +++ b/playbook/app/pb_kits/playbook/pb_draggable/index.js @@ -74,19 +74,30 @@ export default class PbDraggable extends PbEnhancedElement { event.preventDefault(); const container = event.target.closest(DRAGGABLE_CONTAINER); if (!container || !this.draggedItem) return; - + container.classList.remove("active_container"); this.draggedItem.style.opacity = '1'; - + + // Updated order of items as an array of item IDs + const reorderedItems = Array.from(container.children) + .filter(item => item.classList.contains("pb_draggable_item")) + .map(item => item.id.replace("item_", "")); + + // Store reordered items in a data attribute on the container + container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems)); + const customEvent = new CustomEvent('pb-draggable-reorder', { detail: { - itemId: this.draggedItemId, + reorderedItems, containerId: container.id, - newIndex: Array.from(container.children).indexOf(this.draggedItem) } }); this.element.dispatchEvent(customEvent); + + this.draggedItem = null; + this.draggedItemId = null; } + handleDragEnd(event) { event.target.classList.remove("is_dragging"); From ebe0c512a84a8a04a56705786d2cf7a24b1e080b Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Mon, 11 Nov 2024 10:59:12 -0500 Subject: [PATCH 09/16] Subcomponent structure --- .../docs/_draggable_default.html.erb | 10 +++++++++- .../playbook/pb_draggable/draggable.html.erb | 12 +----------- .../pb_draggable/draggable_item.html.erb | 7 +++++++ .../playbook/pb_draggable/draggable_item.rb | 18 ++++++++++++++++++ .../playbook/utilities/globalPropNames.mjs | 1 - 5 files changed, 35 insertions(+), 13 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb index 81e782c129..377222615e 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb @@ -4,4 +4,12 @@ { id: "23", name: "Image 3" }, ] %> -<%= pb_rails("draggable", props: {initial_items: initial_items}) %> \ No newline at end of file +<%= pb_rails("draggable", props: {initial_items: initial_items}) do %> + <% initial_items.each do |item| %> + <%= pb_rails("draggable/draggable_item", props:{item: item}) do %> + <%= pb_rails("card") do %> + <%= item[:name] %> + <% end %> + <% end %> + <% end %> +<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb index 69d035f7de..94b1c7c002 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb @@ -1,15 +1,5 @@ <%= pb_content_tag do %>
- <% object.initial_items.each do |item| %> -
- <%= pb_rails("card") do %> - <%= item[:name] %> - <% end %> -
- <% end %> + <%= content.presence %>
<% end %> diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb new file mode 100644 index 0000000000..76fc693004 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb @@ -0,0 +1,7 @@ +<%= pb_content_tag(:div, { +id: "item_#{object.item[:id]}", +draggable: true +}) do %> + <%= content.presence %> +<% end %> + \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb new file mode 100644 index 0000000000..f9c199e7fc --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb @@ -0,0 +1,18 @@ +# frozen_string_literal: true + +module Playbook + module PbDraggable + class DraggableItem < ::Playbook::KitBase + prop :item, type: Playbook::Props::HashProp, + default: {} + + def data + Hash(prop(:data)).merge(pb_draggable_item: true) + end + + def classname + generate_classname("pb_draggable_item") + end + end + end +end diff --git a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs index 639cc31619..a9f5db1490 100644 --- a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs +++ b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs @@ -7,7 +7,6 @@ export default [ "right", "top", "hover", - "groupHover", "zIndex", "verticalAlign", "truncate", From 8f193b6dd7aeadf216c0aa17a3f4d235787a8176 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Mon, 11 Nov 2024 12:41:59 -0500 Subject: [PATCH 10/16] Drag id prop --- .../pb_draggable/docs/_draggable_default.html.erb | 8 ++++---- .../docs/_draggable_with_cards.html.erb | 15 +++++++++++++++ .../playbook/pb_draggable/docs/example.yml | 2 ++ .../playbook/pb_draggable/draggable_item.html.erb | 2 +- .../playbook/pb_draggable/draggable_item.rb | 2 ++ 5 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb index 377222615e..5b38bc0cfd 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb @@ -1,12 +1,12 @@ <% initial_items = [ - { id: "21", name: "Image 1" }, - { id: "22", name: "Image 2" }, - { id: "23", name: "Image 3" }, + { id: "21", name: "Joe Black" }, + { id: "22", name: "Nancy White" }, + { id: "23", name: "Bill Green" }, ] %> <%= pb_rails("draggable", props: {initial_items: initial_items}) do %> <% initial_items.each do |item| %> - <%= pb_rails("draggable/draggable_item", props:{item: item}) do %> + <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> <%= pb_rails("card") do %> <%= item[:name] %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb new file mode 100644 index 0000000000..5b38bc0cfd --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb @@ -0,0 +1,15 @@ +<% initial_items = [ + { id: "21", name: "Joe Black" }, + { id: "22", name: "Nancy White" }, + { id: "23", name: "Bill Green" }, +] %> + +<%= pb_rails("draggable", props: {initial_items: initial_items}) do %> + <% initial_items.each do |item| %> + <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> + <%= pb_rails("card") do %> + <%= item[:name] %> + <% end %> + <% end %> + <% end %> +<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml b/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml index 42fa668461..4eea951e5a 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml @@ -10,5 +10,7 @@ examples: rails: - draggable_default: Default + - draggable_with_cards: Draggable with Cards + diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb index 76fc693004..cb55c38284 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb @@ -1,5 +1,5 @@ <%= pb_content_tag(:div, { -id: "item_#{object.item[:id]}", +id: "item_#{object.drag_id}", draggable: true }) do %> <%= content.presence %> diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb index f9c199e7fc..87ed80d040 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb @@ -5,6 +5,8 @@ module PbDraggable class DraggableItem < ::Playbook::KitBase prop :item, type: Playbook::Props::HashProp, default: {} + prop :drag_id, type: Playbook::Props::String, + default: "" def data Hash(prop(:data)).merge(pb_draggable_item: true) From 20e741688ca888aab56502ee3cf458ff177fe7ac Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Mon, 11 Nov 2024 15:59:40 -0500 Subject: [PATCH 11/16] Added container subcomponent --- .../pb_draggable/docs/_draggable_default.html.erb | 10 ++++++---- .../docs/_draggable_with_cards.html.erb | 10 ++++++---- .../pb_draggable/draggable_container.html.erb | 3 +++ .../playbook/pb_draggable/draggable_container.rb | 15 +++++++++++++++ 4 files changed, 30 insertions(+), 8 deletions(-) create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/draggable_container.rb diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb index 5b38bc0cfd..1b3b01e91d 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb @@ -5,10 +5,12 @@ ] %> <%= pb_rails("draggable", props: {initial_items: initial_items}) do %> - <% initial_items.each do |item| %> - <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> - <%= pb_rails("card") do %> - <%= item[:name] %> + <%= pb_rails("draggable/draggable_container") do %> + <% initial_items.each do |item| %> + <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> + <%= pb_rails("card") do %> + <%= item[:name] %> + <% end %> <% end %> <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb index 5b38bc0cfd..1b3b01e91d 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb @@ -5,10 +5,12 @@ ] %> <%= pb_rails("draggable", props: {initial_items: initial_items}) do %> - <% initial_items.each do |item| %> - <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> - <%= pb_rails("card") do %> - <%= item[:name] %> + <%= pb_rails("draggable/draggable_container") do %> + <% initial_items.each do |item| %> + <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> + <%= pb_rails("card") do %> + <%= item[:name] %> + <% end %> <% end %> <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb new file mode 100644 index 0000000000..0e15ba7c0b --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb @@ -0,0 +1,3 @@ +<%= pb_content_tag do %> + <%= content.presence %> + <% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable_container.rb b/playbook/app/pb_kits/playbook/pb_draggable/draggable_container.rb new file mode 100644 index 0000000000..6c51290350 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable_container.rb @@ -0,0 +1,15 @@ +# frozen_string_literal: true + +module Playbook + module PbDraggable + class DraggableContainer < ::Playbook::KitBase + def data + Hash(prop(:data)).merge(pb_draggable_container: true) + end + + def classname + generate_classname("pb_draggable_container") + end + end + end +end From 68defa5d060e8dc36ee02032cfb373ddd87b1ce8 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Mon, 11 Nov 2024 17:19:34 -0500 Subject: [PATCH 12/16] examples with cards --- .../docs/_draggable_default.html.erb | 17 -------- .../docs/_draggable_default_rails.html.erb | 26 +++++++++++++ .../docs/_draggable_with_cards.html.erb | 17 -------- .../docs/_draggable_with_cards_rails.html.erb | 39 +++++++++++++++++++ .../playbook/pb_draggable/docs/example.yml | 4 +- 5 files changed, 67 insertions(+), 36 deletions(-) delete mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb delete mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb deleted file mode 100644 index 1b3b01e91d..0000000000 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb +++ /dev/null @@ -1,17 +0,0 @@ -<% initial_items = [ - { id: "21", name: "Joe Black" }, - { id: "22", name: "Nancy White" }, - { id: "23", name: "Bill Green" }, -] %> - -<%= pb_rails("draggable", props: {initial_items: initial_items}) do %> - <%= pb_rails("draggable/draggable_container") do %> - <% initial_items.each do |item| %> - <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> - <%= pb_rails("card") do %> - <%= item[:name] %> - <% end %> - <% end %> - <% end %> - <% end %> -<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb new file mode 100644 index 0000000000..dff08f2d2c --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb @@ -0,0 +1,26 @@ +<% initial_items = [ + { + id: "1", + url: "https://unsplash.it/500/400/?image=633", + }, + { + id: "2", + url: "https://unsplash.it/500/400/?image=634", + }, + { + id: "3", + url: "https://unsplash.it/500/400/?image=637", + }, +] %> + +<%= pb_rails("draggable", props: {initial_items: initial_items}) do %> + <%= pb_rails("draggable/draggable_container") do %> + <%= pb_rails("flex") do %> + <% initial_items.each do |item| %> + <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> + <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %> + <% end %> + <% end %> + <% end %> + <% end %> +<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb deleted file mode 100644 index 1b3b01e91d..0000000000 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb +++ /dev/null @@ -1,17 +0,0 @@ -<% initial_items = [ - { id: "21", name: "Joe Black" }, - { id: "22", name: "Nancy White" }, - { id: "23", name: "Bill Green" }, -] %> - -<%= pb_rails("draggable", props: {initial_items: initial_items}) do %> - <%= pb_rails("draggable/draggable_container") do %> - <% initial_items.each do |item| %> - <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> - <%= pb_rails("card") do %> - <%= item[:name] %> - <% end %> - <% end %> - <% end %> - <% end %> -<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb new file mode 100644 index 0000000000..554ddf7704 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb @@ -0,0 +1,39 @@ +<% initial_items = [ + { id: "21", name: "Joe Black" }, + { id: "22", name: "Nancy White" }, + { id: "23", name: "Bill Green" }, +] %> + +<%= pb_rails("draggable", props: {initial_items: initial_items}) do %> + <%= pb_rails("draggable/draggable_container") do %> + <% initial_items.each do |item| %> + <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> + <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %> + <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %> + <%= pb_rails("flex", props:{gap: "xs"}) do %> + <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %> + <%= pb_rails("badge", props: {text:"35-12345" ,variant: "primary"}) %> + <% end %> + <%= pb_rails("caption", props: { size: "xs", text: "8:00A • Township Name • 90210" }) %> + <%= pb_rails("flex", props:{gap: "xxs", spacing:"between"}) do %> + <%= pb_rails("flex", props:{gap: "xxs"}) do %> + <%= pb_rails("caption", props: { size: "xs" , color: "error" }) do %> + <%= pb_rails("icon", props: { icon: "house-circle-exclamation", fixed_width: true }) %> + <% end %> + <%= pb_rails("caption", props: { size: "xs" , color: "success" }) do %> + <%= pb_rails("icon", props: { icon: "file-circle-check", fixed_width: true }) %> + <% end %> + <% end %> + <%= pb_rails("flex") do %> + <%= pb_rails("badge", props: {text:"Schedule QA" ,variant: "warning", rounded: true}) %> + <%= pb_rails("badge", props: {text:"Flex" ,variant: "primary", rounded: true}) %> + <%= pb_rails("badge", props: {text:"R99" ,variant: "primary", rounded: true}) %> + <% end %> + + <% end %> + <% end %> + <% end %> + <% end %> + <% end %> + <% end %> +<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml b/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml index 4eea951e5a..6d79e769bc 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml @@ -9,8 +9,8 @@ examples: - draggable_multiple_containers: Dragging Across Multiple Containers rails: - - draggable_default: Default - - draggable_with_cards: Draggable with Cards + - draggable_default_rails: Default + - draggable_with_cards_rails: Draggable with Cards From 0e3ac937d8585ac520aad27f18d075c9709c3a99 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Mon, 11 Nov 2024 20:59:24 -0500 Subject: [PATCH 13/16] Fixes for images within drag items --- .../pb_kits/playbook/pb_draggable/_draggable.scss | 4 ---- .../docs/_draggable_default_rails.html.erb | 2 +- .../playbook/pb_draggable/draggable.html.erb | 4 +--- playbook/app/pb_kits/playbook/pb_draggable/index.js | 13 +++++++++++++ 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss b/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss index dd4c468c32..366b4d2ac0 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss +++ b/playbook/app/pb_kits/playbook/pb_draggable/_draggable.scss @@ -9,7 +9,3 @@ cursor: grab; } } - -.pb_draggable_placeholder { - background-color: rgba($neutral, $opacity_5); -} diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb index dff08f2d2c..5424668b74 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb @@ -18,7 +18,7 @@ <%= pb_rails("flex") do %> <% initial_items.each do |item| %> <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> - <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %> + <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url], margin: "xs" }) %> <% end %> <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb index 94b1c7c002..919544cc91 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable.html.erb @@ -1,5 +1,3 @@ <%= pb_content_tag do %> -
- <%= content.presence %> -
+ <%= content.presence %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_draggable/index.js b/playbook/app/pb_kits/playbook/pb_draggable/index.js index 19f6edcf8f..e16f8806cf 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/index.js +++ b/playbook/app/pb_kits/playbook/pb_draggable/index.js @@ -15,6 +15,12 @@ export default class PbDraggable extends PbEnhancedElement { } bindEventListeners() { + // Needed to prevent images within draggable items from being independently draggable + // Needed if using Image kit in draggable items + this.element.querySelectorAll(".pb_draggable_item img").forEach(img => { + img.setAttribute("draggable", "false"); + }); + this.element.querySelectorAll(".pb_draggable_item").forEach(item => { item.addEventListener("dragstart", this.handleDragStart.bind(this)); item.addEventListener("dragend", this.handleDragEnd.bind(this)); @@ -29,6 +35,13 @@ export default class PbDraggable extends PbEnhancedElement { } handleDragStart(event) { + // Needed to prevent images within draggable items from being independently draggable + // Needed if using Image kit in draggable items + if (event.target.tagName.toLowerCase() === 'img') { + event.preventDefault(); + return; + } + this.draggedItem = event.target; this.draggedItemId = event.target.id; event.target.classList.add("is_dragging"); From 00de38dc58b558faf55c2f4f20eed3b03aacb413 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Mon, 11 Nov 2024 21:06:26 -0500 Subject: [PATCH 14/16] remove unused prop --- playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb | 2 -- playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb index 87ed80d040..ae9d094228 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb +++ b/playbook/app/pb_kits/playbook/pb_draggable/draggable_item.rb @@ -3,8 +3,6 @@ module Playbook module PbDraggable class DraggableItem < ::Playbook::KitBase - prop :item, type: Playbook::Props::HashProp, - default: {} prop :drag_id, type: Playbook::Props::String, default: "" diff --git a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs index a9f5db1490..639cc31619 100644 --- a/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs +++ b/playbook/app/pb_kits/playbook/utilities/globalPropNames.mjs @@ -7,6 +7,7 @@ export default [ "right", "top", "hover", + "groupHover", "zIndex", "verticalAlign", "truncate", From a2a55c7fc78be4267091c17a3d3f67082716fb12 Mon Sep 17 00:00:00 2001 From: "nida.ghuman" Date: Mon, 11 Nov 2024 21:33:34 -0500 Subject: [PATCH 15/16] Added List example + copy --- .../docs/_draggable_default_rails.md | 7 +++++++ .../docs/_draggable_with_cards_rails.html.erb | 1 - .../docs/_draggable_with_cards_rails.md | 0 .../docs/_draggable_with_list_rails.html.erb | 19 +++++++++++++++++++ .../playbook/pb_draggable/docs/example.yml | 1 + 5 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md create mode 100644 playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md new file mode 100644 index 0000000000..e08b403cae --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md @@ -0,0 +1,7 @@ +The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kits. + +`initial_items` is a REQUIRED prop, which is the array of objects that contains data for the the draggable items. + +`draggable/draggable_container` = This specifies the container within which items can be dropped. + +`draggable/draggable_item` = This specifies the items that can be dragged and dropped. `drag_id` is a REQUIRED prop for draggable_item and must match the id on the items within `initial_items`. \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb index 554ddf7704..ce95ab7ead 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb @@ -29,7 +29,6 @@ <%= pb_rails("badge", props: {text:"Flex" ,variant: "primary", rounded: true}) %> <%= pb_rails("badge", props: {text:"R99" ,variant: "primary", rounded: true}) %> <% end %> - <% end %> <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb new file mode 100644 index 0000000000..485e9c0915 --- /dev/null +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb @@ -0,0 +1,19 @@ +<% initial_items = [ + { id: "31", name: "Philadelphia" }, + { id: "32", name: "New Jersey" }, + { id: "33", name: "Maryland" }, + { id: "34", name: "Connecticut" }, + +] %> + +<%= pb_rails("draggable", props: {initial_items: initial_items}) do %> + <%= pb_rails("draggable/draggable_container") do %> + <%= pb_rails("list", props: {ordered: false}) do %> + <% initial_items.each do |item| %> + <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %> + <%= pb_rails("list/item") do %><%= item[:name] %><% end %> + <% end %> + <% end %> + <% end %> + <% end %> +<% end %> \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml b/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml index 6d79e769bc..681ce6c7a1 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/example.yml @@ -10,6 +10,7 @@ examples: rails: - draggable_default_rails: Default + - draggable_with_list_rails: Draggable with List Kit - draggable_with_cards_rails: Draggable with Cards From 1da51fc6ae197ebeca2950d75be35869db773ea9 Mon Sep 17 00:00:00 2001 From: Nida Ghuman Date: Tue, 12 Nov 2024 10:10:58 -0500 Subject: [PATCH 16/16] Update playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md Co-authored-by: Jasper Furniss --- .../playbook/pb_draggable/docs/_draggable_default_rails.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md index e08b403cae..23ee195754 100644 --- a/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md +++ b/playbook/app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md @@ -1,4 +1,4 @@ -The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kits. +The `draggable` kit gives you a full subcomponent structure that allows it to be used with almost any kit. `initial_items` is a REQUIRED prop, which is the array of objects that contains data for the the draggable items.