Implementation of UIkit uploader

bix_upload_uikit.js

/* *
 *  Bixie Printshop
 *  bix_upload_uikit.js
 *  Created on 21-12-2014 00:58
 *
 *  @author Matthijs
 *  @copyright Copyright (C)2014 Bixie.nl
 *
 */

(function (addon) {
    "use strict";

    var component;

    if (jQuery && UIkit) {
        component = addon(jQuery, UIkit);
    }

    if (typeof define === "function" && define.amd) {
        define("uikit-bixupload_uikit", ["uikit"], function () {
            return component || addon(jQuery, UIkit);
        });
    }


}(function ($, UI) {
    "use strict";

    UI.component('bixupload_uikit', {

        defaults: {
            debug: false,
            uploadID: '',
            uploadType: 'order',
            orderFilelimit: 0,
            selectors: {
                progressbar: '.bps-upload_uikit-progress',
                processbar: '.bps-upload_uikit-process',
                select: 'input[type=file]',
                drop: '.bps-upload_uikit-drop'
            },
            fileDetails: {
                showDate: true,
                allowDelete: true
            },
            deleteUrl: '/index.php?option=com_bixprintshop&format=raw&task=order.deleteFile',
            uploader: {
                action: '/index.php?option=com_bixprintshop&format=raw&task=order.upload',
                allow: '*.(pdf|jpg|jpeg|gif|png)',
                type: 'json',
                filelimit: false,
                sizelimit: 134217728, //128Mb
                params: {
                    settingsKey: 'plugins.upload_uikit',
                    uploadID: '',
                    uploadType: 'order',
                    orderID: 0,
                    sendMail: 0
                }
            },
            buttonTemplate: '<button type="button" class="uk-button uk-button-mini {{cls}}" data-bix-upload_uikit-button="{{task}}">' +
                '<i class="uk-icon-{{icon}} uk-margin-small-right"></i>{{text}}</button>',
            uploadTemplate: '<li><div data-bix-upload_uikit-fileid="{{fileID}}">' +
                '{{#hasImage}}' +
                '<div class="uk-float-right uk-thumbnail"><img src="{{thumb.url}}" width="{{thumb.width}}" height="{{thumb.height}}" alt="{{fileName}}"/></div>' +
                '{{/hasImage}}' +
                '<strong>{{fileName}}</strong><br/><small>{{sizeText}}</small><br/>' +
                '{{#showDate}}' +
                '<small>{{dateText}}</small><br/>' +
                '{{/showDate}}' +
                '<a class="uk-button uk-button-mini" href="/{{download}}"><i class="uk-icon-download uk-margin-small-right"></i>Downloaden</a>' +
                '{{#allowDelete}}' +
                '<button class="uk-button uk-button-mini uk-button-danger" type="button" data-bix-upload_uikit-button="delete"><i class="uk-icon-download uk-margin-small-right"></i>Verwijderen</button>' +
                '{{/allowDelete}}' +
                '{{!extraButtons}}' +
                '</div></li>'
        },

        boot: function () {
            // init code
            UI.ready(function (context) {
                $("[data-bix-upload_uikit]", context).each(function () {
                    var $ele = $(this);
                    if (!$ele.data("bixupload_uikit")) {
                        UI.bixupload_uikit($ele, UI.Utils.options($ele.attr('data-bix-upload_uikit')));
                    }
                });

            });
        },

        init: function () {
            var $this = this,
                progressbar = this.find(this.options.selectors.progressbar),
                processbar = this.find(this.options.selectors.processbar),
                bar = progressbar.find('.uk-progress-bar'),
                settings = $.extend(true, $this.options.uploader, {

                    notallowed: function (file, settings) {
                        var msg = UI.bixLang._('notAllowedExtension')
                            .replace('{file}', file.name)
                            .replace('{extensions}', UI.bixLang._('allowedExtensionsString'));
                        UI.notify(msg, {status: 'warning'});
                    },

                    before: function (settings, files) {
                        if ($this.options.uploader.sizelimit > 0 && files[0].size > $this.options.uploader.sizelimit) {
                            var msg = UI.bixLang._('fileTooLarge')
                                .replace('{file}', files[0].name)
                                .replace('{sizeLimit}', UI.bixTools.formatFileSize($this.options.uploader.sizelimit));
                            UI.notify(msg, {status: 'warning'});
                            return false;
                        }
                    },

                    loadstart: function () {
                        bar.css("width", "0%").text("0%");
                        progressbar.removeClass("uk-hidden");
                    },

                    progress: function (percent) {
                        percent = Math.ceil(percent);
                        if (percent === 100) {
                            processbar.removeClass("uk-hidden");
                        }
                        bar.css("width", percent + "%").text(percent + "%");
                    },

                    complete: function (response) {
                        $this.uploadCompleted(response);
                    },

                    allcomplete: function (response) {

                        bar.css("width", "100%").text("100%");

                        setTimeout(function () {
                            progressbar.addClass("uk-hidden");
                            processbar.addClass("uk-hidden");
                        }, 250);

                    }
                });

            var select = UI.uploadSelect(this.find(this.options.selectors.select), settings),
                drop = UI.uploadDrop(this.find(this.options.selectors.drop), settings);

            //requestvars
            this.options.uploader.params.uploadID = this.options.uploadID;
            this.options.uploader.params.uploadType = this.options.uploadType;

            //bestanden
            this.uploadTemplate = $('script[type="text/uploadTemplate"]').text();
            this.uploadTemplate = UI.Utils.template(this.uploadTemplate || this.options.uploadTemplate);
            this.buttonTemplate = UI.Utils.template(this.options.buttonTemplate);
            this.fileList = this.find('[data-bix-upload_uikit-bestanden]');
            this.bestandenData = UI.Utils.options(this.fileList.data('bix-upload_uikit-bestanden'));
            this.bestandenData.bestanden.forEach(function (uploadFile) {
                $this.fileList.append($($this.getUploadHtml(uploadFile)).data('uploadFile', uploadFile));
            });
            this.checkFileCount();
            //bestanden events
            this.fileList.on('click', '[data-bix-upload_uikit-button]', function (e) {
                var $button = $(e.target), task = $button.data('bix-upload_uikit-button'),
                    uploadFile = $button.closest('li').data('uploadFile');
                switch (task) {
                case 'delete':
                    $this.deleteFile($button, uploadFile);
                    break;
                default:
                    $this.trigger('clicked.bps.upload.' + task, [$this.options.uploadID, uploadFile, $this.options.uploader]);
                    break;
                }

            });

        },
        getUploadHtml: function (uploadFile) {
            var $this = this, buttonString = '';
            if (uploadFile.extraButtons && uploadFile.extraButtons.length) {
                uploadFile.extraButtons.forEach(function (buttonOptions) {
                    buttonString += $this.buttonTemplate(buttonOptions);
                });
            }
            uploadFile.extraButtons = buttonString;
            return this.uploadTemplate($.extend(true, this.options.fileDetails, uploadFile))
                .replace(new RegExp('\/\/', 'g'), '/'); //filter mystery slash vanuit DOM templates
        },
        uploadCompleted: function (response) {
            if (response.success) {
                this.fileList.append(this.getUploadHtml(response));
                this.checkFileCount();
            } else {
                UI.notify({message: response.error, status: 'danger'});
            }
        },
        deleteFile: function ($button, uploadFile) {
            var $this = this;
            UI.bixTools.confirm('verwijderBestandTitle', 'verwijderBestandText', function () {
                $button.find('i').addClass('uk-icon-spin');
                this.ajaxReq = $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    url: $this.options.deleteUrl,
                    data: {id: uploadFile.fileID, fileName: uploadFile.fileName, orderID: $this.options.uploader.params.orderID}
                })
                    .done(function (response) {
                        if (response.success) {
                            var fileHolder = $this.find('[data-bix-upload_uikit-fileid=' + uploadFile.fileID + ']').slideUp();
                            setTimeout(function () {
                                fileHolder.parent().append('<div class="uk-alert uk-alert-success" data-uk-alert>' +
                                    '<a href="" class="uk-alert-close uk-close"></a>' +
                                    UI.bixTools.icon('trash-o') + UI.bixLang._('verwijderBestandDeleted') + '</div>');
                                fileHolder.remove();
                                $this.checkFileCount();
                            }, 500);
                        }
                    })
                    .fail(function (jqXHR, textStatus) {
                        if (textStatus !== 'abort') {
                            UI.notify({message: UI.bixLang._('foutRequest'), status: 'danger'});
                        }
                    })
                    .always(function (response) {
                        $button.find('i').removeClass('uk-icon-spin');
                        if (response.messages) {
                            UI.bixTools.showNotifications(response.messages);
                        }
                    });


            });
        },
        checkFileCount: function () {
            if (this.options.orderFilelimit > 0) {
                var functionName = this.fileList.find('[data-bix-upload_uikit-fileid]').length >= this.options.orderFilelimit ?
                                            'addClass' : 'removeClass';
                this.find(this.options.selectors.drop)[functionName]('uk-hidden');
            }
        }
    });

    return UI.bixupload_uikit;
}));