workarea-admin 3.4.12

data/app/assets/javascripts/workarea/admin/modules/datepicker_fields.js

@@ -0,0 +1,113 @@
+/**
+ * @namespace WORKAREA.datepickerFields
+ */
+WORKAREA.registerModule('datepickerFields', (function () {
+    'use strict';
+
+    var setDates = function (event) {
+            var dates = event.target.value.split('|'),
+                range = { starts_at: dates[0], ends_at: dates[1] || dates[0] },
+                $ui = $(event.delegateTarget),
+                $startsAt = $ui.find('[data-datepicker-field-starts-at]'),
+                $endsAt = $ui.find('[data-datepicker-field-ends-at]');
+
+            $startsAt.data('datepicker').datepicker('setDate', range.starts_at);
+            $endsAt.data('datepicker').datepicker('setDate', range.ends_at);
+        },
+
+        getConfig = function (input, options) {
+            return _.merge(
+                {},
+                WORKAREA.config.datepickerFields.uiOptions,
+                options.uiOptions || {}
+            );
+        },
+
+        clearDatepickerActiveState = function($inlineCalendar) {
+            $('.ui-state-highlight.ui-state-active', $inlineCalendar)
+            .removeClass('ui-state-highlight ui-state-active');
+        },
+
+        datepickerAlreadyInjected = function($input) {
+            return !_.isEmpty($input.siblings('.datepicker--inline'));
+        },
+
+        injectInlinePlaceholder = function($input, inputId) {
+            var placeholder = JST['workarea/admin/templates/inline_datepicker']({
+                id: inputId
+            });
+
+            // Remove the UI if it was already injected
+            // this condition is only needed because of turbolinks
+            if (datepickerAlreadyInjected($input)) {
+                $input.siblings('.datepicker--inline').remove();
+            }
+
+            $input.before(placeholder);
+
+            return $input.siblings('.datepicker--inline');
+        },
+
+        initInlineDatePicker = function (input, options) {
+            var $input = $(input),
+                initialValue = $(input).val(),
+                inputId = $input.attr('id'),
+                $inlineCalendar = injectInlinePlaceholder($input, inputId);
+
+            if (_.isUndefined(options.uiOptions)) {
+                options.uiOptions = {};
+            }
+
+            options.uiOptions.altField = '#' + inputId;
+
+            $inlineCalendar.datepicker(getConfig(input, options));
+            $input.data('datepicker', $inlineCalendar);
+
+            if (_.isEmpty(initialValue)) {
+                $inlineCalendar.datepicker('setDate', null);
+                //Active state isn't cleared by datepicker setDate: null
+                clearDatepickerActiveState($inlineCalendar);
+            } else {
+                $inlineCalendar.datepicker('setDate', WORKAREA.date.formatDate(initialValue));
+            }
+        },
+
+        initDatepicker = function (input, options) {
+            var $input = $(input),
+                initialValue = $input.val();
+
+            $input.datepicker(getConfig(input, options));
+
+            if (_.isEmpty(initialValue)) {
+                $input.datepicker('setDate', null);
+            } else {
+                $input.datepicker('setDate', WORKAREA.date.formatDate(initialValue));
+            }
+        },
+
+        initByType = function (index, input) {
+            var options = $(input).data('datepickerField');
+
+            if (options.inline) {
+                initInlineDatePicker(input, options);
+            } else {
+                initDatepicker(input, options);
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.datepickerFields
+         */
+        init = function ($scope) {
+            $('[data-datepicker-field]', $scope)
+            .each(initByType)
+                .closest('.browsing-controls__filter-dropdown')
+                .on('change', '[name=quick_range]', setDates);
+        };
+
+    return {
+        init: init
+    };
+}()));

data/app/assets/javascripts/workarea/admin/modules/datetimepicker_fields.js

@@ -0,0 +1,160 @@
+/**
+ * @namespace WORKAREA.datetimepickerFields
+ */
+WORKAREA.registerModule('datetimepickerFields', (function () {
+    'use strict';
+
+    var altFieldId = function (input, options) {
+            if(options.inline) {
+                return '#' + $(input).attr('id') + WORKAREA.config.datetimepickerFields.fieldSuffixes.date;
+            } else {
+                return '';
+            }
+        },
+
+        getConfig = function (input, options) {
+            return _.merge(
+                {},
+                WORKAREA.config.datepickerFields.uiOptions,
+                options.uiOptions || {},
+                {
+                    altField: altFieldId(input, options)
+                }
+            );
+        },
+
+        twentyFourHourHours = function(hours, ampm) {
+            if (hours !== 12) {
+                return ampm === 'pm' ? hours + 12 : hours;
+            } else if(ampm === 'am') {
+                return 0;
+            } else {
+                return 12;
+            }
+        },
+
+        composeDate = function($dateTimePicker, inputId) {
+            var fieldSuffixes = WORKAREA.config.datetimepickerFields.fieldSuffixes,
+                date = $dateTimePicker.find('#' + inputId + fieldSuffixes.date).val(),
+                hours = parseInt($dateTimePicker.find('#' + inputId + fieldSuffixes.hours).val()),
+                minutes = $dateTimePicker.find('#' + inputId + fieldSuffixes.minutes).val(),
+                ampm = $dateTimePicker.find('#' + inputId + fieldSuffixes.ampm).val(),
+                dateParts = date.toString().split('-');
+
+            if (_.isEmpty(date)) {
+                return '';
+            } else {
+                return new Date(
+                    dateParts[0],
+                    dateParts[1] -1, //Date counts months from 0
+                    dateParts[2],
+                    twentyFourHourHours(hours, ampm),
+                    minutes
+                );
+            }
+        },
+
+        updateDateTimeField = function($input, $dateTimePicker) {
+            var dateTime = composeDate($dateTimePicker, $input.attr('id'));
+
+            $input.val(WORKAREA.date.formatDateTime(dateTime));
+        },
+
+        serializeOnSubmit = function($dateTimePicker, $input) {
+            var $form = $input.closest('form');
+
+            $form.on('submit', function () {
+                updateDateTimeField($input, $dateTimePicker);
+            });
+        },
+
+        parseDate = function($dateField) {
+            return {
+                hours: WORKAREA.date.parseHoursFromDate($dateField.val()),
+                minutes: WORKAREA.date.parseMinutesFromDate($dateField.val()),
+                ampm: WORKAREA.date.parseAmPmFromDate($dateField.val())
+            };
+        },
+
+        getCalendar = function($dateTimePicker, $input) {
+            return $dateTimePicker.find('#' + $input.attr('id') + WORKAREA.config.datetimepickerFields.fieldSuffixes.picker);
+        },
+
+        clearDatepickerActiveState = function($inlineCalendar) {
+            $('.ui-state-highlight.ui-state-active', $inlineCalendar)
+            .removeClass('ui-state-highlight ui-state-active');
+        },
+
+        handleDateFieldChange = function($inlineCalendar, event) {
+            var $dateField = $(event.currentTarget),
+                dateValue = $dateField.val();
+
+            if (WORKAREA.date.testDateFormat(dateValue)) {
+                $inlineCalendar.datepicker('setDate', dateValue);
+            } else {
+                clearDatepickerActiveState($inlineCalendar);
+            }
+        },
+
+        datepickerAlreadyInjected = function($input) {
+            return !_.isEmpty($input.siblings('.datetimepicker'));
+        },
+
+        injectUI = function($input) {
+            var placeholder = JST['workarea/admin/templates/datetime_picker']({
+                id: $input.attr('id'),
+                initialDateTime: parseDate($input),
+                fieldSuffixes: WORKAREA.config.datetimepickerFields.fieldSuffixes,
+                name: $input.attr('id')
+            });
+
+            // Prevents UI being injected twice on browser back
+            // this condition is only needed because of turbolinks
+            if (datepickerAlreadyInjected($input)) {
+                $input.siblings('.datetimepicker').remove();
+            }
+
+            $input.before(placeholder);
+
+            return $input.siblings('.datetimepicker');
+        },
+
+        initInlineDatetimePicker = function (index, input) {
+            var $input = $(input),
+                options = $input.data('datetimepickerField'),
+                $dateTimePicker = injectUI($input),
+                $inlineCalendar = getCalendar($dateTimePicker, $input),
+                $dateField = $('[data-datetimepicker-field-date-input]', $dateTimePicker);
+
+            $inlineCalendar.datepicker(getConfig(input, options));
+
+            // Set the initial state of the datepicker inputs
+            if (_.isEmpty($input.val())) {
+                $inlineCalendar.datepicker('setDate', null);
+                //Active state isn't cleared by datepicker setDate: null
+                clearDatepickerActiveState($inlineCalendar);
+            } else {
+                $inlineCalendar.datepicker('setDate', WORKAREA.date.formatDateTime($input.val()));
+            }
+
+            // On form submit serialize the injected date/time inputs back into the hidden field
+            serializeOnSubmit($dateTimePicker, $input);
+
+            // Update the calendar UI when the date input changes
+            $dateField.on('keyup input', _.partial(handleDateFieldChange, $inlineCalendar));
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.datetimepickerFields
+         */
+        init = function ($scope) {
+            $('[data-datetimepicker-field]', $scope).each(initInlineDatetimePicker);
+        };
+
+    return {
+        init: init,
+        updateDateTimeField: updateDateTimeField
+    };
+}()));

data/app/assets/javascripts/workarea/admin/modules/direct_uploads.js

@@ -0,0 +1,329 @@
+/**
+ * @namespace WORKAREA.directUploads
+ */
+WORKAREA.registerModule('directUploads', (function () {
+    'use strict';
+
+    var processingTemplate = JST['workarea/admin/templates/direct_upload_processing'],
+        tableRowTemplate = JST['workarea/admin/templates/direct_upload_table_row'],
+
+        savingFile = function (type, filename) {
+            return $.post({
+                url: WORKAREA.routes.admin.directUploadsPath({
+                    type: type,
+                    filename: filename
+                })
+            });
+        },
+
+        uploadingFile = function (type, file, url) {
+            return $.ajax({
+                url: url,
+                method: 'put',
+                data: file,
+                contentType: file.type,
+                processData: false
+            });
+        },
+
+        gettingUploadEndpoint = function (type, filename) {
+            return $.get({
+                url: WORKAREA.routes.admin.newDirectUploadsPath({
+                    type: type,
+                    filename: filename
+                })
+            });
+        },
+
+        markTableRow = function(status, file, response) {
+            var $tableBody = file.$element.closest('tbody');
+
+            file.$element
+            .addClass('direct-upload__table-row--' + status)
+                .find('[data-direct-upload-file-status]')
+                .text(function () {
+                    var defaultMessage = I18n.t(
+                        'workarea.admin.direct_uploads.' + status + '_status'
+                    );
+
+                    if (_.isEmpty((response.responseJSON || {}).error)) {
+                        return defaultMessage;
+                    } else {
+                        return response.responseJSON.error;
+                    }
+                });
+
+            if (status === 'failure') {
+                file.$element.prependTo($tableBody);
+            }
+        },
+
+        incrementCount = function ($dropzone) {
+            var $count = $('[data-direct-upload-count]', $dropzone),
+                count = $count.data('directUploadCount') + 1;
+
+            $count.text(count).data('directUploadCount', count);
+        },
+
+        stopProcessing = function ($dropzone) {
+            $dropzone.removeClass('direct-upload--processing');
+
+            WORKAREA.unsavedChanges.reset();
+        },
+
+        scrollToFailures = function ($dropzone) {
+            $('html, body').animate({
+                scrollTop: $dropzone.offset().top
+            }, 1000);
+        },
+
+        updateFailUI = function ($dropzone) {
+            $dropzone
+            .addClass('direct-upload--fail')
+                .find('.direct-upload__heading')
+                .text(I18n.t('workarea.admin.direct_uploads.something_went_wrong'))
+            .end()
+                .find('.direct-upload__info')
+                .text(I18n.t('workarea.admin.direct_uploads.upload_failed'));
+        },
+
+        failUI = function ($dropzone) {
+            updateFailUI($dropzone);
+            scrollToFailures($dropzone);
+        },
+
+        refresh = function ($dropzone) {
+            var $takeover = $dropzone.closest('.takeover');
+
+            _.delay(function () {
+                if (_.isEmpty($takeover)) {
+                    window.location.reload();
+                } else {
+                    WORKAREA.takeover.reload();
+                }
+            }, WORKAREA.config.messages.delay);
+        },
+
+        updateSuccessUI = function ($dropzone) {
+            $dropzone
+            .addClass('direct-upload--success')
+                .find('.direct-upload__heading')
+                .text(I18n.t('workarea.admin.direct_uploads.everything_went_great'))
+            .end()
+                .find('.direct-upload__info')
+                .text(I18n.t('workarea.admin.direct_uploads.upload_succeeded'));
+        },
+
+        successUI = function ($dropzone) {
+            updateSuccessUI($dropzone);
+            refresh($dropzone);
+        },
+
+        uploadFile = function (type, $dropzone, file) {
+            var endpointRequest = WORKAREA.directUploads.gettingUploadEndpoint(
+                    type, file.name
+                ),
+                uploadPromise = $.Deferred(),
+                requests = [];
+
+            requests.push(endpointRequest);
+
+            endpointRequest.done(function (result) {
+                var uploadRequest = WORKAREA.directUploads.uploadingFile(
+                    type, file, result.upload_url
+                );
+
+                requests.push(uploadRequest);
+
+                uploadRequest.done(function () {
+                    var saveRequest = WORKAREA.directUploads.savingFile(
+                        type, file.name
+                    );
+
+                    requests.push(saveRequest);
+
+                    saveRequest.done(function(response) {
+                        uploadPromise.resolve.apply(null, requests);
+                        markTableRow('success', file, response);
+                    }).fail(function (response) {
+                        uploadPromise.reject(requests);
+                        markTableRow('failure', file, response);
+                    });
+                }).fail(function (response) {
+                    uploadPromise.reject(requests);
+                    markTableRow('failure', file, response);
+                });
+            }).fail(function (response) {
+                uploadPromise.reject(requests);
+                markTableRow('failure', file, response);
+            }).always(_.partial(incrementCount, $dropzone));
+
+            return uploadPromise;
+        },
+
+
+        activateUI = function (event) {
+            var $dropzone = $(event.delegateTarget);
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            $dropzone.addClass('direct-upload--active');
+        },
+
+
+        prepareFiles = function (event) {
+            var data = (event.originalEvent || {}).dataTransfer,
+                files;
+
+            if (data.items) {
+                files = _.filter(data.items, function (item) {
+                    return item.kind === 'file';
+                });
+
+                files = _.map(files, function (item) {
+                    return item.getAsFile();
+                });
+
+                data.items.clear();
+            } else {
+                files = data.files;
+
+                data.clearData();
+            }
+
+            return _.map(files, function (file) {
+                return Object.defineProperty(file, '$element', {
+                    value: $(tableRowTemplate({ fileName: file.name })),
+                    writable: false
+                });
+            });
+        },
+
+        testUnload = function ($dropzone) {
+            if ($dropzone.data('directUploadProcessing')) {
+                WORKAREA.unsavedChanges.set();
+            }
+        },
+
+        processFiles = function ($dropzone, files) {
+            var type = $dropzone.data('directUpload').type,
+                upload = _.partial(uploadFile, type, $dropzone),
+                done = _.partial(successUI, $dropzone),
+                fail = _.partial(failUI, $dropzone),
+                always = _.partial(stopProcessing, $dropzone),
+                requests = _.map(files, upload);
+
+            $.when.apply($, requests)
+            .done(done)
+            .fail(fail)
+            .always(always);
+        },
+
+        processingUI = function ($dropzone, files) {
+            var $tableBody;
+
+            $dropzone
+            .addClass('direct-upload--processing')
+                .data('directUploadProcessing', true)
+                .find('.direct-upload__content')
+                .empty()
+                .append(processingTemplate({ count: 0, total: files.length }));
+
+            $tableBody = $('[data-direct-upload-table-body]', $dropzone);
+
+            _.forEach(files, function (file) {
+                $tableBody.append(file.$element);
+            });
+        },
+
+        thresholdError = function () {
+            WORKAREA.messages.insertMessage(
+                I18n.t(
+                    'workarea.admin.direct_uploads.threshold_error', {
+                        count: WORKAREA.config.directUploads.countThreshold,
+                        size: WORKAREA.config.directUploads.sizeThreshold
+                    }
+                ),
+                'error'
+            );
+        },
+
+        thresholdExceeded = function (files) {
+            var safeCount = 500,
+                safeSize = 500,
+                countThreshold = WORKAREA.config.directUploads.countThreshold,
+                sizeThreshold = WORKAREA.config.directUploads.sizeThreshold,
+                count = files.length,
+                size = _.reduce(files, function (totalMegabytes, file) {
+                    return totalMegabytes + file.size / 1000000;
+                }, 0);
+
+            if (WORKAREA.environment.isDevelopment
+             && ! WORKAREA.config.directUploads.suppressWarning) {
+                if (countThreshold > safeCount || sizeThreshold > safeSize) {
+                    window.console.warn(
+                        'WORKAREA.directUploads.thresholdExceeded: you have ' +
+                        'increased either the file or file size threshold in ' +
+                        'this module\'s configuration. Testing revealed that ' +
+                        'raising this value too far past the default ' +
+                        'thresholds causes instability and random failure ' +
+                        'during the upload process. PROCEED WITH CAUTION!\n\n' +
+                        'To suppress this warning, set the `WORKAREA.config.' +
+                        'directUploads.suppressWarning` equal to `true`.'
+                    );
+                }
+            }
+
+            return count > countThreshold || size > sizeThreshold;
+        },
+
+        processingWarning = function () {
+            WORKAREA.messages.insertMessage(
+                I18n.t('workarea.admin.direct_uploads.processing_warning'),
+                'warning'
+            );
+        },
+
+        process = function (event) {
+            var $dropzone = $(event.delegateTarget),
+                files;
+
+            event.preventDefault();
+
+            if ($dropzone.is('.direct-upload--processing')) {
+                processingWarning();
+            } else {
+                files = WORKAREA.directUploads.prepareFiles(event);
+
+                if (thresholdExceeded(files)) {
+                    thresholdError();
+                } else {
+                    processingUI($dropzone, files);
+                    processFiles($dropzone, files);
+                    testUnload($dropzone);
+                }
+            }
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.directUploads
+         */
+        init = function($scope) {
+            $('[data-direct-upload]', $scope)
+            .on('drop', process)
+            .on('dragover dragenter', activateUI);
+        };
+
+    return {
+        init: init,
+        // for testing
+        savingFile: savingFile,
+        prepareFiles: prepareFiles,
+        processFiles: processFiles,
+        uploadingFile: uploadingFile,
+        gettingUploadEndpoint: gettingUploadEndpoint
+    };
+}()));