dashboard.js

/*!
 * Piwik - Web Analytics
 *
 * @link http://piwik.org
 * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
 */

function initDashboard(dashboardId, dashboardLayout) {

    $('.dashboardSettings').show();

    // Embed dashboard
    if (!$('#topBars').length) {
        $('.dashboardSettings').after($('#Dashboard'));
        $('#Dashboard_embeddedIndex_' + dashboardId).addClass('sfHover');
    }

    widgetsHelper.getAvailableWidgets();

    $('#dashboardWidgetsArea')
        .on('dashboardempty', showEmptyDashboardNotification)
        .dashboard({
            idDashboard: dashboardId,
            layout: dashboardLayout
        });

    $('#columnPreview').find('>div').each(function () {
        var width = [];
        $('div', this).each(function () {
            width.push(this.className.replace(/width-/, ''));
        });
        $(this).attr('layout', width.join('-'));
    });

    $('#columnPreview').find('>div').on('click', function () {
        $('#columnPreview').find('>div').removeClass('choosen');
        $(this).addClass('choosen');
    });
}

function createDashboard() {
    $('#createDashboardName').val('');
    piwikHelper.modalConfirm('#createDashboardConfirm', {yes: function () {
        var dashboardName = $('#createDashboardName').val();
        var type = ($('#dashboard_type_empty:checked').length > 0) ? 'empty' : 'default';

        var ajaxRequest = new ajaxHelper();
        ajaxRequest.setLoadingElement();
        ajaxRequest.addParams({
            module: 'Dashboard',
            action: 'createNewDashboard'
        }, 'get');
        ajaxRequest.addParams({
            name: encodeURIComponent(dashboardName),
            type: type
        }, 'post');
        ajaxRequest.setCallback(
            function (id) {
                $('#dashboardWidgetsArea').dashboard('loadDashboard', id);
            }
        );
        ajaxRequest.send(true);
    }});
}

function resetDashboard() {
    piwikHelper.modalConfirm('#resetDashboardConfirm', {yes: function () { $('#dashboardWidgetsArea').dashboard('resetLayout'); }});
}

function renameDashboard() {
    $('#newDashboardName').val($('#dashboardWidgetsArea').dashboard('getDashboardName'));
    piwikHelper.modalConfirm('#renameDashboardConfirm', {yes: function () { $('#dashboardWidgetsArea').dashboard('setDashboardName', $('#newDashboardName').val()); }});
}

function removeDashboard() {
    $('#removeDashboardConfirm').find('h2 span').text($('#dashboardWidgetsArea').dashboard('getDashboardName'));
    piwikHelper.modalConfirm('#removeDashboardConfirm', {yes: function () { $('#dashboardWidgetsArea').dashboard('removeDashboard'); }});
}

function showChangeDashboardLayoutDialog() {
    $('#columnPreview').find('>div').removeClass('choosen');
    $('#columnPreview').find('>div[layout=' + $('#dashboardWidgetsArea').dashboard('getColumnLayout') + ']').addClass('choosen');
    piwikHelper.modalConfirm('#changeDashboardLayout', {yes: function () {
        $('#dashboardWidgetsArea').dashboard('setColumnLayout', $('#changeDashboardLayout').find('.choosen').attr('layout'));
    }});
}

function showEmptyDashboardNotification() {
    piwikHelper.modalConfirm('#dashboardEmptyNotification', {
        resetDashboard: function () { $('#dashboardWidgetsArea').dashboard('resetLayout'); },
        addWidget: function () { $('.dashboardSettings').trigger('click'); }
    });
}

function setAsDefaultWidgets() {
    piwikHelper.modalConfirm('#setAsDefaultWidgetsConfirm', {
        yes: function () { $('#dashboardWidgetsArea').dashboard('saveLayoutAsDefaultWidgetLayout'); }
    });
}

function copyDashboardToUser() {
    $('#copyDashboardName').val($('#dashboardWidgetsArea').dashboard('getDashboardName'));
    var ajaxRequest = new ajaxHelper();
    ajaxRequest.addParams({
        module: 'API',
        method: 'UsersManager.getUsers',
        format: 'json'
    }, 'get');
    ajaxRequest.setCallback(
        function (availableUsers) {
            $('#copyDashboardUser').empty();
            $('#copyDashboardUser').append(
                $('<option></option>').val(piwik.userLogin).text(piwik.userLogin)
            );
            $.each(availableUsers, function (index, user) {
                if (user.login != 'anonymous' && user.login != piwik.userLogin) {
                    $('#copyDashboardUser').append(
                        $('<option></option>').val(user.login).text(user.login + ' (' + user.alias + ')')
                    );
                }
            });
        }
    );
    ajaxRequest.send(true);

    piwikHelper.modalConfirm('#copyDashboardToUserConfirm', {
        yes: function () {
            var copyDashboardName = $('#copyDashboardName').val();
            var copyDashboardUser = $('#copyDashboardUser').val();

            var ajaxRequest = new ajaxHelper();
            ajaxRequest.addParams({
                module: 'Dashboard',
                action: 'copyDashboardToUser'
            }, 'get');
            ajaxRequest.addParams({
                name: encodeURIComponent(copyDashboardName),
                dashboardId: $('#dashboardWidgetsArea').dashboard('getDashboardId'),
                user: encodeURIComponent(copyDashboardUser)
            }, 'post');
            ajaxRequest.setCallback(
                function (id) {
                    $('#alert').find('h2').text(_pk_translate('Dashboard_DashboardCopied'));
                    piwikHelper.modalConfirm('#alert', {});
                }
            );
            ajaxRequest.send(true);
        }
    });
}

(function () {
    var exports = window.require('piwik/UI');
    var UIControl = exports.UIControl;

    /**
     * Contains logic common to all dashboard management controls. This is the JavaScript analog of
     * the DashboardSettingsControlBase PHP class.
     *
     * @param {Element} element The HTML element generated by the SegmentSelectorControl PHP class. Should
     *                          have the CSS class 'segmentEditorPanel'.
     * @constructor
     */
    var DashboardSettingsControlBase = function (element) {
        UIControl.call(this, element);

        // on menu item click, trigger action event on this
        var self = this;
        this.$element.on('click', 'ul.submenu li[data-action]', function (e) {
            $(self).trigger($(this).attr('data-action'));
        });

        // open manager on open
        this.$element.on('click', function (e) {
            if ($(e.target).is('.dashboardSettings,.dashboardSettings>span')) {
                self.$element.toggleClass('visible');

                // fix position
                self.$element
                    .find('.widgetpreview-widgetlist')
                    .css('paddingTop', self.$element.find('.widgetpreview-categorylist').parent('li').position().top);

                self.onOpen();
            }
        });

        // handle manager close
        this.onBodyMouseUp = function (e) {
            if (!$(e.target).closest('.dashboardSettings').length
                && !$(e.target).is('.dashboardSettings')
            ) {
                self.$element.widgetPreview('reset');
                self.$element.removeClass('visible');
            }
        };

        $('body')[0].addEventListener('mouseup', this.onBodyMouseUp);

        // setup widgetPreview
        this.$element.widgetPreview({
            isWidgetAvailable: function (widgetUniqueId) {
                return self.isWidgetAvailable(widgetUniqueId);
            },
            onSelect: function (widgetUniqueId) {
                var widget = widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId);
                self.$element.removeClass('visible');

                self.widgetSelected(widget);
            },
            resetOnSelect: true
        });

        // on enter widget list category, reset widget preview
        this.$element.on('mouseenter', '.submenu > li', function (event) {
            if (!$('.widgetpreview-categorylist', event.target).length) {
                self.$element.widgetPreview('reset');
            }
        });
    };

    $.extend(DashboardSettingsControlBase.prototype, UIControl.prototype, {
        _destroy: function () {
            UIControl.prototype.call(this);

            $('body')[0].removeEventListener('mouseup', this.onBodyMouseUp);
        }
    });

    exports.DashboardSettingsControlBase = DashboardSettingsControlBase;

    /**
     * Sets up and handles events for the dashboard manager control.
     *
     * @param {Element} element The HTML element generated by the SegmentSelectorControl PHP class. Should
     *                          have the CSS class 'segmentEditorPanel'.
     * @constructor
     */
    var DashboardManagerControl = function (element) {
        DashboardSettingsControlBase.call(this, element);

        $(this).on('resetDashboard', function () {
            resetDashboard();
        });

        $(this).on('showChangeDashboardLayoutDialog', function () {
            showChangeDashboardLayoutDialog();
        });

        $(this).on('renameDashboard', function () {
            renameDashboard();
        });

        $(this).on('removeDashboard', function () {
            removeDashboard();
        });

        $(this).on('setAsDefaultWidgets', function () {
            setAsDefaultWidgets();
        });

        $(this).on('copyDashboardToUser', function () {
            copyDashboardToUser();
        });

        $(this).on('createDashboard', function () {
            createDashboard();
        });
    };

    $.extend(DashboardManagerControl.prototype, DashboardSettingsControlBase.prototype, {
        onOpen: function () {
            if ($('#dashboardWidgetsArea').dashboard('isDefaultDashboard')) { 
                $('.removeDashboardLink', this.$element).hide();
            } else {
                $('.removeDashboardLink', this.$element).show();
            }
        },

        isWidgetAvailable: function (widgetUniqueId) {
            return !$('#dashboardWidgetsArea').find('[widgetId=' + widgetUniqueId + ']').length;
        },

        widgetSelected: function (widget) {
            $('#dashboardWidgetsArea').dashboard('addWidget', widget.uniqueId, 1, widget.parameters, true, false);
        }
    });

    DashboardManagerControl.initElements = function () {
        UIControl.initElements(this, '.dashboard-manager');
    };

    exports.DashboardManagerControl = DashboardManagerControl;
}());