workarea-admin 3.4.12

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

@@ -0,0 +1,130 @@
+/**
+ * Handles aspects of the Calendar's UI, such as the vertical positioning of
+ * release elements within the calendar & the adjustment of the heigh of each
+ * calendar day based on the tallest day. Also ensures that the Next and Back
+ * buttons on the calendar are handled via AJAX.
+ *
+ * @namespace WORKAREA.calendars
+ */
+WORKAREA.registerModule('calendars', (function () {
+    'use strict';
+
+    var countReleases = function (container) {
+            return $('.calendar__release', container).length;
+        },
+
+        daysWithReleases = function (calendar) {
+            return $('td', calendar).has('.calendar__release');
+        },
+
+        compensatePosition = function (top, release) {
+            return top - $(release).position().top;
+        },
+
+        getReleaseOnPrevDay = function (releaseId, $prev) {
+            var $releases = $('[data-calendar-release-id]', $prev);
+
+            return $releases.filter(function (index, release) {
+                return $(release).data('calendarReleaseId') === releaseId;
+            });
+        },
+
+        resetCalendar = function (event) {
+            var calendar = event.delegateTarget,
+                today = new Date(),
+                endpoint = WORKAREA.routes.admin.calendarReleasesPath();
+
+            event.preventDefault();
+
+            WORKAREA.releaseCalendarPlaceholders.requestCalendar(
+                today, calendar, endpoint
+            );
+        },
+
+        requestNewCalendar = function (event) {
+            var calendar = event.delegateTarget,
+                parsedHref = WORKAREA.url.parse(event.currentTarget.href),
+                startDate = parsedHref.queryKey.start_date,
+                endpoint = parsedHref.path;
+
+            event.preventDefault();
+
+            WORKAREA.releaseCalendarPlaceholders.requestCalendar(
+                startDate, calendar, endpoint
+            );
+        },
+
+        showTodayButton = function (calendar) {
+            var $todayButton = $('.calendar__today-button', calendar);
+
+            if (_.isEmpty($('.calendar__day--today', calendar))) {
+                $todayButton.addClass('calendar__today-button--active');
+            } else {
+                $todayButton.removeClass('calendar__today-button--active');
+            }
+        },
+
+        adjustHeightOfCell = function (top, release) {
+
+            var topInteger = parseInt(top);
+
+            if (topInteger > 0) {
+                var currentHeight = $(release).closest('.calendar__day').css('height'),
+                    newHeight = parseInt(currentHeight) + topInteger;
+
+                $(release).closest('.calendar__day').css({height: newHeight + 'px'});
+            }
+        },
+
+        adjustRelease = function ($prev, index, release) {
+            var releaseId = $(release).data('calendarReleaseId'),
+                $prevRelease = getReleaseOnPrevDay(releaseId, $prev),
+                top,
+                $prevReleaseOnDay = $(release).prev('.calendar__release');
+
+            if (_.isEmpty($prevRelease)) {
+                top =  $prevReleaseOnDay.css('top');
+                adjustHeightOfCell(top, release);
+            } else {
+                top = compensatePosition($prevRelease.position().top, release);
+                top = top || $prevRelease.css('marginTop');
+            }
+
+            $(release).css({ position: 'relative', top: top });
+        },
+
+        findReleasesToAdjust = function (index, day) {
+            var $day = $(day),
+                $prev = $(day).prev(),
+                releasesOnDay = countReleases($day);
+
+            $(day).data('releasesOnDay', {
+                $day: $day,
+                releaseCount: releasesOnDay
+            });
+
+            $('.calendar__release', $day).each(_.partial(adjustRelease, $prev));
+        },
+
+        initCalendar = function (index, calendar) {
+            daysWithReleases(calendar).each(findReleasesToAdjust);
+            showTodayButton(calendar);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.calendars
+         */
+        init = function ($scope) {
+            $('.calendar', $scope)
+                .addBack('.calendar')
+                .on('click', '.calendar__control', requestNewCalendar)
+                .on('click', '[data-calendar-today-button]', resetCalendar)
+                .each(initCalendar);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,58 @@
+/**
+ * @namespace WORKAREA.categorizedAutocompleteFields
+ */
+WORKAREA.registerModule('categorizedAutocompleteFields', (function () {
+    'use strict';
+
+    var getSource = function (request, response) {
+            $.getJSON('/admin/jump_to', { q: request.term }, function (data) {
+                response(data.results);
+            });
+        },
+
+        openSelected = function (event, ui) {
+            var $adminToolbar = $(event.target).closest('.admin-toolbar');
+
+            if (_.isEmpty($adminToolbar)) {
+                Turbolinks.visit(ui.item.url);
+            } else {
+                window.top.location.href = ui.item.url;
+            }
+        },
+
+        getConfig = function () {
+            return _.assign({}, WORKAREA.config.categorizedAutocompleteFields.uiOptions, {
+                source: getSource,
+                select: openSelected,
+                position: {
+                    my: 'center top',
+                    at: 'center bottom',
+                    collision: 'none'
+                }
+            });
+        },
+
+        initAutocomplete = function ($field) {
+            $field.categorizedAutocomplete(getConfig());
+        },
+
+        defineInjectionPoint = function (index, field) {
+            $(field).parent().addClass('ui-front');
+            return $(field);
+        },
+
+        setup = _.flow(defineInjectionPoint, initAutocomplete),
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.categorizedAutocompleteFields
+         */
+        init = function ($scope) {
+            $('[data-categorized-autocomplete-field]', $scope).each(setup);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,58 @@
+/**
+ * @namespace WORKAREA.cloneableRows
+ */
+WORKAREA.registerModule('cloneableRows', (function () {
+    'use strict';
+
+    var createClonedID = function (index, id) {
+            return id + '_cloned_' + index;
+        },
+
+        getDefaultValue = function () {
+            return this.defaultValue;
+        },
+
+        cloneRow = function ($row) {
+            var $clonedRow = $row.clone();
+
+            $clonedRow
+            .insertAfter($row)
+                .find('[name],[for]')
+                .val(getDefaultValue)
+                .prop('id', createClonedID)  // needed to pass integration tests
+                .prop('for', createClonedID);
+
+            $row
+                .find('.value__note')
+                .remove();
+
+            WORKAREA.initModules($clonedRow);
+        },
+
+        removeListeners = function ($row) {
+            return $row.off('input.cloneableRows click.cloneableRows');
+        },
+
+        getTarget = function (event) {
+            return $(event.delegateTarget);
+        },
+
+        handleInput = _.flowRight(cloneRow, removeListeners, getTarget),
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.cloneableRows
+         */
+        init = function ($scope) {
+            $scope
+                .find('[data-cloneable-row]')
+                    .addBack('[data-cloneable-row]')
+                    .on('input.cloneableRows', '[name]', handleInput)
+                    .on('click.cloneableRows', 'input[type=file]', handleInput);
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,70 @@
+/**
+ * @namespace WORKAREA.contentBlockList
+ */
+WORKAREA.registerModule('contentBlockList', (function () {
+    'use strict';
+
+    var patchPosition = function ($form) {
+            $.ajax($form.attr('action'), {
+                method: $('[name="_method"]', $form).val(),
+                data: $form.serialize()
+            });
+        },
+
+        updateBlockOrder = function (event) {
+            var $ui = $(event.target),
+                $form = $ui.closest('form'),
+                $names = $('.content-block-list__item', $ui);
+
+            $names.each(function (index, name) {
+                var $block = $($(name).data('blockId'));
+
+                $('input', name).val(index);
+
+                $block.data('blockOrder', index).css({ order: index });
+            });
+
+            return $form;
+        },
+
+        reorder = _.flow(
+            updateBlockOrder,
+            patchPosition,
+            WORKAREA.addContentBlockButtons.reorder
+        ),
+
+        scrollBlockIntoView = function($block) {
+            $('html, body').animate({
+                scrollTop: $block.offset().top - 70
+            }, 200);
+
+            return $block;
+        },
+
+        enableEditMode = _.flow(scrollBlockIntoView, WORKAREA.contentBlocks.activateBlock),
+
+        handleListItemclick = function(event) {
+            var $blockButton = $(event.currentTarget).closest('.content-block-list__item'),
+                $activeBlock = $($blockButton.data('blockId'));
+
+            enableEditMode($activeBlock);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.contentBlockList
+         */
+        init = function ($scope) {
+            $('.content-block-list', $scope)
+            .on('click', '.content-block-list__name', handleListItemclick)
+            .sortable({
+                stop: reorder,
+                handle: '.content-block-list__icon--move'
+            });
+        };
+
+    return {
+        init: init
+    };
+}()));

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

@@ -0,0 +1,248 @@
+/**
+ * @namespace WORKAREA.contentBlocks
+ */
+WORKAREA.registerModule('contentBlocks', (function () {
+    'use strict';
+
+    var iframe = JST['workarea/admin/templates/content_block_iframe'],
+        loadingIndicator = JST['workarea/admin/templates/loading'],
+
+        /**
+         * Utility
+         */
+
+        allIframesLoaded = function ($iframe) {
+            var $container = $iframe.closest('.content-editor__area'),
+                $allIframes = $('.content-block__iframe', $container),
+                $loadedIframes = $allIframes.filter(function (index, iframe) {
+                    return $(iframe).data('contentBlockIframeLoaded');
+                });
+
+            return $loadedIframes.length === $allIframes.length;
+        },
+
+        withinViewport = function ($block) {
+            var rect = $block[0].getBoundingClientRect();
+
+            return (
+                rect.top >= 0 &&
+                rect.left >= 0 &&
+                rect.bottom <= $(window).height() &&
+                rect.right <= $(window).width()
+            );
+        },
+
+        scrollToNewBlock = function () {
+            var $newBlock = $('#new_content_block'),
+                offsets = {};
+
+            if (_.isEmpty($newBlock)) { return; }
+            if (withinViewport($newBlock)) { return; }
+
+            offsets.newBlock = $newBlock.offset().top;
+            offsets.header = $('#header').height();
+
+            $(window).scrollTop(offsets.newBlock - offsets.header - 48);
+        },
+
+
+        /**
+         * Handle Loading Indicator
+         */
+
+        stopLoading = _.flow(scrollToNewBlock, WORKAREA.takeover.close),
+
+        ensureLoadingIndicatorCloses = function () {
+            var timer = _.delay(
+                stopLoading, WORKAREA.config.contentBlocks.loadingTimeout
+            );
+
+            $(window).on('contentBlocks:blocksLoaded', function () {
+                window.clearTimeout(timer);
+            });
+        },
+
+        openLoadingIndicator = function () {
+            WORKAREA.takeover.open(loadingIndicator({
+                cssModifiers: 'loading--large loading--fill-parent'
+            }));
+        },
+
+        loading = _.flow(openLoadingIndicator, ensureLoadingIndicatorCloses),
+
+
+        /**
+         * Handle Block Activation
+         */
+
+        hideEditorAside = function ($activeBlock) {
+            var $editor = $activeBlock.closest('.content-editor');
+
+            $('.content-editor__aside', $editor).hide();
+            $editor.trigger('close:contentEditorAside');
+        },
+
+        showEditorAside = function ($activeBlock) {
+            var $editor = $activeBlock.closest('.content-editor');
+
+            $('.content-editor__aside', $editor).show();
+            $editor.trigger('open:contentEditorAside');
+        },
+
+        /**
+         * @method
+         * @name activateBlock
+         * @memberof WORKAREA.contentBlocks
+         */
+        activateBlock = function ($activeBlock) {
+            var $otherBlocks = $activeBlock.siblings('.content-block');
+
+            $activeBlock
+            .addClass('content-block--active')
+            .removeClass('content-block--inactive');
+
+            $otherBlocks
+            .addClass('content-block--inactive')
+            .removeClass('content-block--active');
+
+            hideEditorAside($activeBlock);
+
+            return $activeBlock;
+        },
+
+        /**
+         * @method
+         * @name deactivateBlock
+         * @memberof WORKAREA.contentBlocks
+         */
+        deactivateBlock = function ($activeBlock) {
+            var $editor = $activeBlock.closest('.content-editor'),
+                $blocks = $('.content-block', $editor);
+
+            $blocks
+            .removeClass('content-block--active')
+            .removeClass('content-block--inactive');
+
+            showEditorAside($activeBlock);
+
+            return $activeBlock;
+        },
+
+        handleBlockActivation = function(event) {
+            var $activeBlock = $(event.currentTarget).closest('.content-block');
+
+            event.preventDefault();
+
+            activateBlock($activeBlock);
+        },
+
+        /**
+         * Manage Block Heights
+         */
+
+        observeAsyncBlocks = function ($iframe, iframeBlock) {
+            var observer = new window.MutationObserver(function () {
+                setBlockHeight($iframe, iframeBlock);
+            });
+
+            try {
+                observer.observe(iframeBlock, {
+                    childList: true,
+                    subtree: true
+                });
+            } catch (error) {
+                if ( ! _.includes(error.message, 'MutationObserver')) {
+                    throw new Error(error);
+                }
+
+                window.console.warn(
+                    'WORKAREA.contentBlocks.observeAsyncBlocks: the ' +
+                    'following content block has failed to load:',
+                    $iframe,
+                    '\n\nThis is a known, development-only issue. If this ' +
+                    'becomes a nuisance, you can avoid this issue by running ' +
+                    'a single-threaded development server, like `thin`.'
+                );
+            }
+        },
+
+        setBlockHeight = function ($iframe, iframeBlock) {
+            $iframe.height($(iframeBlock).height());
+        },
+
+        resetBlockHeight = function (index, block) {
+            var $iframe = $('.content-block__iframe', block),
+                iframeDocument = $iframe[0].contentDocument,
+                iframeBlock = $('[data-content-block]', iframeDocument)[0];
+
+            setBlockHeight($iframe, iframeBlock);
+        },
+
+        listenForWindowResize = _.once(function ($blocks) {
+            $(window).on('resize', _.debounce(function () {
+                $blocks.each(resetBlockHeight);
+            }, 250));
+        }),
+
+
+        /**
+         * Iframe Setup
+         */
+
+        setupIframe = function (event) {
+            var $iframe = $(event.currentTarget),
+                iframeDocument = event.currentTarget.contentDocument,
+                iframeBlock = $('[data-content-block]', iframeDocument)[0];
+
+            $iframe.data('contentBlockIframeLoaded', true);
+
+            $iframe
+                .next('.content-block__overlay')
+                .on('click', handleBlockActivation);
+
+            setBlockHeight($iframe, iframeBlock);
+            observeAsyncBlocks($iframe, iframeBlock);
+
+            if (allIframesLoaded($iframe)) {
+                stopLoading();
+                $(window).trigger('contentBlocks:blocksLoaded');
+            }
+        },
+
+        injectIframe = function (index, block) {
+            var $block = $(block),
+                $placeholder = $('.content-block__iframe-placeholder', $block),
+                src = $block.data('contentBlock'),
+                $iframe = $(iframe({ src: src }));
+
+            $placeholder.replaceWith($iframe);
+            $iframe.on('load', setupIframe);
+        },
+
+        /**
+         * @method
+         * @name init
+         * @memberof WORKAREA.contentBlocks
+         */
+        init = function ($scope) {
+            var $blocks = $('[data-content-block]', $scope);
+
+            if (_.isEmpty($blocks)) { return; }
+
+            loading();
+            listenForWindowResize($blocks);
+
+            $blocks
+            .each(injectIframe)
+                .filter('.content-block--active')
+                .each(function(index, activeBlock) {
+                    hideEditorAside($(activeBlock));
+                });
+        };
+
+    return {
+        init: init,
+        activateBlock: activateBlock,
+        deactivateBlock: deactivateBlock
+    };
+}()));