Garnish Matrix

(function ($) {

    if (!window.Craft || !window.jQuery || typeof Craft === 'undefined') {
        return false;
    }

    Craft.MatrixColorization = Garnish.Base.extend({
        settings: {
            colors: [
                '#A7CECB', '#90ACAF', '#AAA998', '#D4D698', '#F4EBBE'
            ],
            matrixFieldHandle: 'myMatrix',
            matrixBlockTypes: {
                start: 'start',
                end: 'end'
            }
        },
        wrapperStart: '<li><a class="">',
        wrapperEnd: '</a></li>',
        currentIndex: 0,
        init: function (data) {
            this.settings = $.extend({}, this.settings, data.settings);
            this.settings['matrixFieldId'] = '#fields-' + this.settings.matrixFieldHandle;
            this.data = data;
            if($(this.settings['matrixFieldId']).length === 0){
                return false;
            }

            // Add event handlers
            Garnish.$doc.on('dragStop', '.matrixblock > .actions > .move', this.onMoveEnd.bind(this))
                .on('click', '.matrix .btn.add, .matrix .btn[data-type]', this.onMatrixBlockAddButtonClick.bind(this))
                .on('click', 'a[data-action="add"]', this.onMatrixBlockAddButtonClick.bind(this))
                .on('click', '[data-icon="remove"][data-action="delete"]', this.onMatrixBlockRemoveButton.bind(this))
                .ajaxComplete(this.onAjaxComplete.bind(this));

            var e = this;
            setTimeout(function () {
                var matrix = $('#fields-' + e.settings.matrixFieldHandle + '-field').find('.matrix-field').data('matrix');
                if (matrix) {
                    matrix.blockSort.on('sortChange', function () {
                        e.addFieldLinks();
                    });
                }
            }, 500);

            var div = $('#fields-' + e.settings.matrixFieldHandle).find('.btngroup').first();

            // collect all matrix elements
            var collection = e.settings.matrixBlockCollection;

            if (typeof collection !== 'undefined' && collection && div.length) {
                $.each(collection, function (index, items) {
                    var id = 'matrix-colorization-' + index;
                    var appendString = '<div id="matrix-menu' + index + '" class="matrix-button menubtn">' + index + '</div>' +
                        '<div class="menu"><ul id="' + id + '"></ul></div>';
                    div.append(appendString);
                    var ul = $('#' + id);
                    $.each(items, function (i, block) {
                        var originalElement = $('.btn[data-type="' + block.handle + '"]');
                        if (originalElement.length) {
                            originalElement.hide();
                            ul.append('<li>' + '<a data-handle="' + block.handle + '">' + block.label + '</a>' + '</li>');
                            $('a[data-handle="' + block.handle + '"]').click(function () {
                                originalElement.click();
                            });
                        }
                    });
                    new Garnish.MenuBtn('#matrix-menu' + index);
                });
            }

            this.render();
        },
        onMoveEnd: function () {
            alert("end of move");
        },
        onMatrixBlockRemoveButton: function () {
            this.addFieldLinks();
        },
        render: function () {
            $('.cpFieldInspect').remove();
            $('[data-cpfieldlinks]').removeAttr('data-cpfieldlinks');
            this.addFieldLinks();
        },
        clearStyle: function (callback) {
            var e = this;
            setTimeout(function () {
                var parent = $(e.settings.matrixFieldId);
                if (!parent.children().length) {
                    return false;
                }
                parent = parent.children().first();
                $.each(parent.children(), function (index, item) {
                    var blockItem = $(item);
                    blockItem.find('.titlebar').css('background', '#ebedef');
                    blockItem.find('.titlebar').children().first().css('color', '');
                    blockItem.css('margin-left', '0px');
                });
                if (typeof callback === 'function') {
                    callback();
                }
            }, 500);
        },
        addFieldLinks: function () {
            var e = this;
            this.clearStyle(function () {
                var parent = $(e.settings.matrixFieldId);
                if (!parent.children().length) {
                    return false;
                }
                parent = parent.children().first();

                var startSubs = parent.find('.matrixblock[data-type="' + e.settings.matrixBlockTypes.start + '"]');
                if (startSubs.length) {
                    e.currentIndex = 0;
                    var block = startSubs.first().parent();
                    $.each(startSubs, function (index, item) {
                        var color = e.settings.colors[e.currentIndex];
                        e.currentIndex = (e.currentIndex >= e.settings.colors.length - 1) ? 0 : e.currentIndex + 1;
                        var startIndex = $(item).index();
                        $.each(block.children(), function (i, blockItem) {
                            if (i >= startIndex) {
                                var blockElement = $(blockItem);
                                blockElement.find('.titlebar').css('background', color);
                                blockElement.find('.titlebar').children().first().css('color', 'black');
                                if (blockElement.data('type') !== e.settings.matrixBlockTypes.end &&
                                    blockElement.data('type') !== e.settings.matrixBlockTypes.start) {
                                    blockElement.css('margin-left', '50px');
                                }
                                if (blockElement.data('type') === e.settings.matrixBlockTypes.end) {
                                    return false;
                                }
                            }
                        });
                    });
                }
            });

        },
        onMatrixBlockAddButtonClick: function (e) {
            Garnish.requestAnimationFrame((function () {
                this.addFieldLinks();
            }).bind(this));
        },
        onAjaxComplete: function (e, status, requestData) {
            if (requestData.url.indexOf('switchEntryType') > -1) {// || Craft.path !== this.path) {
                this.render();
            }
        }
    });

}(jQuery));