diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index b4b114e1f..fcd1e2420 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -401,7 +401,7 @@ visibility: hidden; } -.bubbles-list__divider--positioned { +.bubbles-list__divider--installed { visibility: visible; } diff --git a/app/javascript/controllers/divider_controller.js b/app/javascript/controllers/divider_controller.js index e93b98a58..847563d8f 100644 --- a/app/javascript/controllers/divider_controller.js +++ b/app/javascript/controllers/divider_controller.js @@ -5,7 +5,7 @@ const DIVIDER_ITEM_NODE_NAME = "LI" export default class extends Controller { static targets = [ "divider", "dragImage", "count" ] - static classes = [ "positioned" ] + static classes = [ "installed" ] static values = { startCount: Number, maxCount: Number } connect() { @@ -14,7 +14,7 @@ export default class extends Controller { install() { this.#moveDividerTo(this.startCountValue) - this.dividerTarget.classList.add(this.positionedClass) + this.dividerTarget.classList.add(this.installedClass) } configureDrag(event) { @@ -25,6 +25,12 @@ export default class extends Controller { } } + acceptDrop(event) { + if (event.dataTransfer.types.includes(MOVE_ITEM_DATA_TYPE)) { + event.preventDefault() + } + } + moveDivider({ target }) { if (target.nodeName == DIVIDER_ITEM_NODE_NAME) { this.#moveDividerTo(this.#items.indexOf(target)) @@ -35,11 +41,6 @@ export default class extends Controller { // TODO } - acceptDrop(event) { - const isDroppable = event.dataTransfer.types.includes(MOVE_ITEM_DATA_TYPE) - if (isDroppable) event.preventDefault() - } - #moveDividerTo(index) { if (index <= this.maxCountValue) { if (this.#dividerIndex < index) { diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb index 4308ddf2c..f7255893a 100644 --- a/app/views/bubbles/index.html.erb +++ b/app/views/bubbles/index.html.erb @@ -38,7 +38,7 @@ data-controller="divider" data-divider-start-count-value="10" data-divider-max-count-value="10" - data-divider-positioned-class="bubbles-list__divider--positioned" + data-divider-installed-class="bubbles-list__divider--installed" data-action="turbo:morph@document->divider#install dragstart->divider#configureDrag dragenter->divider#acceptDrop dragover->divider#acceptDrop dragover->divider#moveDivider drop->divider#persist"> <%= render partial: "bubbles/list/bubble", collection: @bubbles, cached: true %> <%= render "bubbles/list/divider", filter: @filter %>