admin.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./admin-bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('submit-button', require('./components/SubmitButton.vue'));

const app = new Vue({
    el: '#app',

    data: {
        sidebarExpanded: false,
        windowWidth: 992
    },

    methods: {
        toggleSidebar() {
            this.sidebarExpanded = !this.sidebarExpanded;
        },
        getWindowWidth() {
            this.windowWidth = window.innerWidth;
        }
    },

    computed: {
        sidebarVisible: function () {
            if (this.windowWidth > 992) {
                return true;
            }
            return this.sidebarExpanded;
        }
    },

    mounted() {
        this.$nextTick(function () {
            window.addEventListener('resize', this.getWindowWidth);
            this.getWindowWidth();
        })
    }
});

// jQuery
// -------------------------------------------------- //
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

$(document).ready(function () {
    $('form').ncsForms();
});

// Sortable
// -------------------------------------------------- //
var changePosition = function (requestData) {
    $.ajax({
        url: '/admin/sort',
        type: 'POST',
        data: requestData,
        success: function (data) {
            if (data.success) {
                console.log('Saved!');
            } else {
                console.error(data.errors);
            }
        },
        error: function () {
            console.error('Something wrong!');
        }
    });
};

$(document).ready(function () {
    const $container = $('.sortable');
    if ($container.length > 0) {
        $container.sortable({
            handle: '.sortable-handle',
            cursor: "move",
            helper: function (event, ui) {
                ui.children().each(function () {
                    $(this).width($(this).width());
                });
                return ui;
            },
            update: function (event, ui) {

                const entityName = $(this).data('entity-name');
                const $sorted = ui.item;

                const $previous = $sorted.prev();
                const $next = $sorted.next();

                if ($previous.length > 0) {
                    changePosition({
                        parentId: $sorted.data('parent-id'),
                        type: 'moveAfter',
                        entityName: entityName,
                        id: $sorted.data('item-id'),
                        positionEntityId: $previous.data('item-id')
                    });
                } else if ($next.length > 0) {
                    changePosition({
                        parentId: $sorted.data('parent-id'),
                        type: 'moveBefore',
                        entityName: entityName,
                        id: $sorted.data('item-id'),
                        positionEntityId: $next.data('item-id')
                    });
                } else {
                    console.error('Something wrong!');
                }
            },
        });
    }
});

// Tiny MCE
// -------------------------------------------------- //
tinymce.init({
    path_absolute: "/",
    selector: "textarea.rte",
    plugins: 'code hr link image paste importcss',
    paste_as_text: true,
    toolbar: [
        'undo redo | cut copy paste | bold italic removeformat | bullist numlist |  link unlink | hr | code',
    ],
    relative_urls: false,
    menubar: false,
    path_absolute: "/",
    selector: "textarea.rte",
    plugins: 'code hr link lists image paste table textcolor',
    toolbar: [
        'format | styleselect | bold italic removeformat forecolor | bullist numlist | link unlink image | table | hr | undo redo | code',
    ],
    relative_urls: false,
    menubar: 'format',
    content_css: '/css/app.css',
    importcss_append: true,
    importcss_file_filter: '/css/app.css',
    file_browser_callback: function (field_name, url, type, win) {
        var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
        var y = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;

        var cmsURL = '/uploads?field_name=' + field_name;
        if (type == 'image') {
            cmsURL = cmsURL + "&type=Images";
        } else {
            cmsURL = cmsURL + "&type=Files";
        }

        tinyMCE.activeEditor.windowManager.open({
            file: cmsURL,
            title: 'Filemanager',
            width: x * 0.8,
            height: y * 0.8,
            resizable: "yes",
            close_previous: "no"
        });
    }
});