/public/admin/js/media.browser.js

(function ($) {
    'use strict';

    function MediaBrowser(browser, options) {
        this.document = $(document);
        this.browser = $(browser);
        this.upload = this.browser.find('.media-upload');
        this.dropzone = this.upload.find('.dropzone');
        this.container = this.browser.find('.media-container');
        this.details = this.browser.find('.media-details');
        this.form = this.browser.find('.media-form');
        this.filter = this.browser.find('.media-filter');
        this.items = {
            files: [],
            paging: {
                "next_url": "",
                "current_page": 1,
                "per_page": 10
            }
        };
        this.selected = {};
        this.settings = $.extend({
            templates: {
                download: 'template-download',
                upload: 'template-upload',
                details: 'template-details',
                form: 'template-form'
            },
            url: {
                upload: 'index.php?r=media/ajax-upload',
                update: 'index.php?r=media/ajax-update',
                json: 'index.php?r=media-browser/get-json',
                insert: 'index.php?r=media-browser/field-insert'
            },
            editor: false,
            multiple: false,
            callback: '',
            autoload: true
        }, options);
        this.lockGetData = false;

        if (this.settings.callback !== '') {
            this.callback = this.settings.callback;
        }

        var self = this;

        this.actionGetData = function (data, paging) {
            if (this.lockGetData === false) {
                var url = '';

                if (paging === true) {
                    url = this.items.paging.next_url
                } else {
                    url = this.settings.url.json
                }

                $.ajax({
                    url: url,
                    data: self.filter.serializeObject(),
                    dataType: 'json',
                    success: function (response) {
                        if (paging === true) {
                            self.items.files = self.items.files.concat(response.files);
                            self.items.paging = response.paging;
                            self.container.append(tmpl(self.settings.templates.download, response));
                            self.lockGetData = false;
                        } else {
                            self.items = response;
                            self.container.html(tmpl(self.settings.templates.download, response));
                            self.lockGetData = false;
                        }
                    }
                })
            }
        };

        this.actionScroll = function () {
            var containerParent = self.container.parent();

            if ((this.container.height() <= containerParent.height()) && this.items.paging.next_url) {
                this.actionGetData(this.filter.serializeObject(), true);
                this.lockGetData = true;
            }

            containerParent.scroll(function () {
                var $this = $(this);

                if ((($this.height() * (3 / 2)) >= ((this).scrollHeight - $this.scrollTop) ) && self.items.paging.next_url) {
                    self.actionGetData(self.filter.serializeObject(), true);
                    self.lockGetData = true;
                }
            })
        };

        this.actionUpload = function () {
            this.upload.fileupload({
                    url: this.settings.url.upload,
                    dropZone: this.dropzone,
                    autoUpload: true,
                    filesContainer: this.container,
                    prependFiles: true
                })
                .fileupload("option", "redirect", window.location.href.replace(/\/[^\/]*$/, "/cors/result.html?%s"))
                .addClass('fileupload-processing');

            this.document.bind('dragover', function (e) {
                var found = false,
                    node = e.target,
                    foundDropzone,
                    timeout = window.dropZoneTimeout;

                if (!timeout) {
                    self.dropzone.addClass('in');
                } else {
                    clearTimeout(timeout);
                }

                do {
                    if ($(node).hasClass('dropzone')) {
                        found = true;
                        foundDropzone = $(node);
                        break
                    }
                    node = node.parentNode;
                } while (node !== null);

                self.dropzone.removeClass('in hover');

                if (found) {
                    foundDropzone.addClass('hover');
                }

                window.dropZoneTimeout = setTimeout(function () {
                    window.dropZoneTimeout = null;
                    self.dropzone.removeClass('in hover');
                }, 100);
            });

            self.upload.bind('fileuploaddone', function (e, data) {
                $.each(data.result, function (i, file) {
                    self.items.files[self.items.files.length] = file[0];
                });
            });

            self.upload.bind('fileuploadstart', function () {
                self.browser.find('a[href="#media-library"]').click();
            });
        };

        this.actionRemoveItem = function (id) {
            this.details.html('');
            this.form.html('');
            delete this.selected[id];
            var selectedIndex = Object.keys(this.selected);

            if (selectedIndex.length > 0) {
                var index = parseInt(selectedIndex[selectedIndex.length - 1]);
                $.each(this.items.files, function (i, file) {
                    if (file.id === index) {
                        self.details.html(tmpl(self.settings.templates.details, file));
                        self.form.html(tmpl(self.settings.templates.form, file));

                        return false
                    }
                });
            } else {
                this.browser.removeClass('visible-lr');
            }
        };

        this.actionAddItem = function (id, ui) {
            $.each(this.items.files, function (i, file) {
                if (id === file.id) {
                    self.details.html(tmpl(self.settings.templates.details, file));
                    file.for_editor = !!self.settings.editor;
                    self.form.html(tmpl(self.settings.templates.form, file));

                    if (!self.settings.multiple || self.settings.multiple === 'false') {
                        $(ui.selected).addClass('ui-selected').siblings().removeClass('ui-selected').each(
                            function (key, value) {
                                $(value).find('*').removeClass('ui-selected');
                            }
                        );
                        self.selected = {};
                    }

                    self.selected[id] = self.browser.find('.media-form-inner').first().serializeObject();
                    self.browser.addClass('visible-lr');

                    if (Object.keys(self.selected).length === 1) {
                        window.location.hash = 'media-' + id;
                    }

                    return false;
                }
            });
        };

        this.actionSelectItem = function () {
            this.container.on('touchstart mousedown', 'li', function (event, ui) {
                event.metaKey = true;
                var $this = $(this);

                if ($this.hasClass('ui-selected')) {
                    $this.removeClass('ui-selected');
                    self.actionRemoveItem($this.data('id'));

                    return false;
                }
            }).selectable({
                filter: 'li',
                tolerance: 'touch',
                selected: function (event, ui) {
                    var id = $(ui.selected).data('id');
                    self.actionAddItem(id, ui);
                },
                unselected: function (event, ui) {
                    var id = $(ui.unselected).data('id');
                    self.actionRemoveItem(id);
                }
            });
        };

        this.actionUpdateItem = function () {
            this.browser.on('blur', '.media-form-inner [id^="media-"]', function () {
                var $this = $(this),
                    parent = $this.parents('.media-form-inner'),
                    id = parent.data('id');

                self.selected[id] = parent.serializeObject();
            })
        };

        this.actionDeleteItem = function () {
            self.browser.on('click', '.delete-media', function (e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                var $this = $(this);

                if (confirm($this.data('confirm'))) {
                    $.ajax({
                        url: $this.data('url'),
                        type: "POST",
                        success: function () {
                            self.container.find('.media-item[data-id="' + $this.data('id') + '"]').remove();
                            self.details.html('');
                            self.form.html('');
                            delete self.selected[$this.data('id')];
                        }
                    });
                }
            });
        };

        this.actionUpdateAttribute = function () {
            self.browser.on('blur', '.media-form-inner [data-ajax-update]', function () {
                var $this = $(this),
                    parent = $this.parents('.media-form-inner');

                $.ajax({
                    url: self.settings.url.update,
                    type: "POST",
                    dataType: 'json',
                    data: {
                        id: parent.data('id'),
                        attribute: $this.data('ajax-update'),
                        value: $this.val(),
                        _csrf: yii.getCsrfToken()
                    }
                });
            });
        };

        this.actionChangeLink = function () {
            self.browser.on('change', '#media-link-to', function () {
                var $this = $(this),
                    value = self.browser.find('#media-link-value');

                if ($this.val() === 'none') {
                    value.val('');
                    value.attr('readonly', true);
                } else if ($this.val() === 'custom') {
                    value.val('http://');
                    value.attr('readonly', false);
                } else {
                    value.val($this.val());
                    value.attr('readonly', true);
                }
            });
        };

        this.actionFilter = function () {
            this.filter.on('submit', function (e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                var $this = $(this);

                self.selected = {};
                self.actionGetData($this.serializeObject());
            });
        };

        this.actionInsert = function () {
            self.browser.on('click', '.insert-media', function (e) {
                e.preventDefault();

                if (Object.keys(self.selected).length === 0) {
                    return false;
                }

                $.ajax({
                    url: self.settings.url.insert,
                    data: {Media: self.selected, _csrf: yii.getCsrfToken()},
                    type: 'POST',
                    success: function (response) {
                        if (top.tinymce !== undefined && self.settings.editor) {
                            top.tinymce.activeEditor.execCommand("mceInsertContent", false, response);
                            window.top.$('#media-browser-modal').modal('hide');
                        }

                        if (window.top) {
                            if (self.callback && typeof window['top'][self.callback](response) === 'function') {
                                window['top'][self.callback](response);
                            }
                            window.top.$('#media-browser-modal').modal('hide');
                        }
                    }
                });
            });
        };

        this.actionInit = function () {
            this.actionGetData(this.filter.serializeObject());
            this.actionScroll();
            this.actionUpload();
            this.actionSelectItem();
            this.actionUpdateItem();
            this.actionDeleteItem();
            this.actionUpdateAttribute();
            this.actionChangeLink();
            this.actionFilter();
            this.actionInsert();
        };

        return this.actionInit();
    }

    $.fn.mediabrowser = function (options) {
        return this.each(function () {
            var $this = $(this);

            if ($this.data('mediabrowser')) {
                return;
            }

            var mediabrowser = new MediaBrowser(this, options);

            $this.data('mediabrowser', mediabrowser);
        });
    };
}(jQuery));