https://cnhc.org.uk/assets/controllers/sortable_controller.js

1import { Controller } from "@hotwired/stimulus"
2
3// Connects to data-controller="sortable"
4export default class extends Controller {
5  connect() {
6    var sortable = new Sortable(document.getElementById("content-frame"), {
7      draggable: '.sortable-container',
8      animation: 150, 
9      onStart: function (evt) {
10        $(".drop-area").addClass("show")
11        let id = evt.item.getAttribute("link_id")
12        $(`#drop-area-${id}`).removeClass("show") 
13      },
14      onEnd: function(evt){
15        $(".drop-area").removeClass("show")
16      },
17      onSort: function (evt) {
18        var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content');
19        $.ajax({
20          type: 'PATCH',
21          url: `/admin/content_blocks/${evt.item.getAttribute("content_id")}`,
22          remote: true,
23          data: { content_block: {order_position: evt.newIndex}, authenticity_token: AUTH_TOKEN},sort: true});
24      }
25    })
26    sortable.option("disabled", true)
27    
28    var toggle = document.getElementById('pages-toggle')
29    toggle.addEventListener('click', (event)=>{
30        if (toggle.value == 0){
31          sortable.option("disabled", false)
32          changeStyle()
33          toggle.value = 1
34        } else {
35          sortable.option("disabled", true)
36          changeStyle()
37          toggle.value = 0
38        }
39    })
40
41    function changeStyle(){
42      $('.content-block-buttons').each(function(i, btn) {
43        if (btn.hidden == false){
44          btn.hidden = true
45        } else {
46          btn.hidden = false
47        }
48      });
49
50      $('.sortable-container').each(function(i, obj) {
51        if ($(obj).hasClass('sortable-pointer')){
52          $(obj).removeClass('sortable-pointer')
53        } else{
54          $(obj).addClass('sortable-pointer')
55        }
56
57      });
58    }
59  }
60
61};