Untitled

import { LightningElement, api } from 'lwc';
import sortable from '@salesforce/resourceUrl/sortable1140';
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';
import FORM_FACTOR from '@salesforce/client/formFactor';

export default class MeetingNotesTopicsMenu extends LightningElement {
    @api contents;
    @api canEdit;
    @api isAddTopicsButtonDisabled;

    sortableInitialized = false;
    touchInitialized = false;
    isKeyboardReorderActive = false;
    selectedTopic;
    isKeyboardReorderActive = false;
    isFingerMoved = false;
    fingerStartX;
    fingerStartY;



    get isMobile() {
        return FORM_FACTOR !== 'Large';
    }

   

    get listClass() {
        return 'list ' + (this.isMobile ? 'list-mobile' : 'list-desktop');
    }

  

    

    renderedCallback() {
        const active = this.template.querySelector('.tile-active');
        active && active.focus();
        if (!this.isMobile) {
            if (this.sortableInitialized) {
                return;
            }

            loadScript(this, sortable + '/sortable1140.js').then(() => {
                this.sortableInitialized = true;
                this.initializeSortable();
            });

            this.initializeClick();
        }

       
    }

   

    dispatchNewOrderEvent(newOrder) {
        const changeOrderevent = new CustomEvent('changeorder', {
            detail: newOrder
        });
        this.dispatchEvent(changeOrderevent);
    }

    initializeSortable() {
        const list = this.template.querySelector('.list');

        const that = this;
        new Sortable(list, {
            ghostClass: 'listItemGhost',
            animation: 150,

            onEnd: function (event) {
                const newOrder = [...event.to.children].map((element, idx) => ({
                    Id: element.dataset.id,
                    DisplayOrder__c: idx
                }));
                that.dispatchNewOrderEvent(newOrder);
            }
        });
    }

   
}