Cacher is the code snippet organizer for pro developers

$(document).ready(function() {
    $('.agm-sortable-container').sortable({
        connectWith: ".agm-sortable-container",
        handle: ".card-handle",
        containment: ".ms-site-content-container",
        dropOnEmpty: true,
        placeholder: "card-placeholder",
        start: function(e, ui) {
            ui.placeholder.width(ui.item.width());
            ui.placeholder.height(ui.item.height());
            //ui.placeholder.addClass(ui.item.attr("class"));
        }
    });
    
    let widget = new Widget({
        element: '#widget-1',
        title: 'Hola Pepe',
        editBtn: true,
    });

    
});

class Widget {
    constructor({
        element = '',
        title = '',
        closeBtn = true,
        expandBtn = true,
        collapseBtn = true,
        editBtn = false,
        sortable = true
    }) {
        this.element  = element;
        this.title = title;
        this.closeBtn = closeBtn;
        this.expandBtn = expandBtn;
        this.collapseBtn = collapseBtn;
        this.editBtn = editBtn;
        this.sortable = sortable;

        // Create Controls Buttons
        this.createBtns();
        // Set Sorteable Handler
        this.setSortable('.card-title', this.sortable);
    }

    setSortable(element, value) {
        if (value) {
            $(this.element).find(element).addClass('card-handle');
        }
        else {
            $(this.element).find(element).removeClass('card-handle');
        }
    }

    createBtns() {
        this.editBtnHTML = $(`<a href="${ this.element }" class="card-btn card-btn-edit withripple"></a>`);
        this.collapseBtnHTML = $(`<a data-toggle="collapse" href="${ this.element + '-collapse' }" role="button" aria-expanded="true" aria-controls="${ this.element.substring(1) + '-collapse' }" class="card-btn card-btn-collapse withripple"></a>`);
        this.expandBtnHTML = $(`<a href="${ this.element }" class="card-btn card-btn-expand withripple"></a>`);
        this.closeBtnHTML = $(`<a href="${ this.element }" class="card-btn card-btn-close withripple"></a>`);        
        
        let cardCrl = $(`<div class="card-controls"></div>`);

        if (this.editBtn) {
            cardCrl.append(this.editBtnHTML);
            $(this.editBtnHTML).click(event => this.editAction(event));
        }

        if (this.collapseBtn) {
            cardCrl.append(this.collapseBtnHTML);
            $(this.collapseBtnHTML).click(event => this.collapseAction(event));
            
            this.bodyWidget = $(this.element).find('.widget-content');
            this.bodyWidget.addClass('collapse show');
            this.bodyWidget.attr('id', this.element.substring(1) + '-collapse');
        }

        if (this.expandBtn) {
            cardCrl.append(this.expandBtnHTML);
            $(this.expandBtnHTML).click(event => this.expandAction(event));
        }

        if (this.closeBtn) {
            cardCrl.append(this.closeBtnHTML);
            $(this.closeBtnHTML).click(event => this.closeAction(event));
        }

        $(this.element).find('.card-header').append(cardCrl);                
    }

    setClose(value) {
        if (value) {

        }
        else {
        }
    }

    getTitle()  {
        return this.title;
    }

    closeAction(event) {
        event.preventDefault();
        let card = $($(event.target).attr('href'));
        
        this.bodyWidget.collapse('hide');
        
        card.animate({
            height: '0',
            opacity: '0'
        }, 300, function() {
            card.remove();
        });
    }

    editAction(event) {
        event.preventDefault();
        console.log('Edit');
    }

    collapseAction(event) {
        event.preventDefault();
    }

    expandAction(event) {
        event.preventDefault();
        let card = $($(event.target).attr('href'));
 
        if (card.hasClass('card-full')) {
            card.removeClass('card-full');
            $($(card.find('.card-title')[0]).addClass('card-handle'));
            this.closeBtnHTML.show();
            this.collapseBtnHTML.show();
            this.editBtnHTML.show();
            $('body').css({
                overflow: 'visible'
            });
        } else {
            card.addClass('card-full');
            card.removeAttr('style');
            $($(card.find('.card-title')[0]).removeClass('card-handle'));
            this.bodyWidget.collapse('show');
            $(this.closeBtnHTML).hide();
            this.collapseBtnHTML.hide();
            this.editBtnHTML.hide();
            $('body').css({
                overflow: 'hidden'
            });
        }
    }
}