add icons for Character groups
This commit is contained in:
coderkun
commit
2d9a41a5fe
3461 changed files with 594457 additions and 0 deletions
306
www/analytics/plugins/Dashboard/javascripts/dashboard.js
Normal file
306
www/analytics/plugins/Dashboard/javascripts/dashboard.js
Normal file
|
|
@ -0,0 +1,306 @@
|
|||
/*!
|
||||
* 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.$element.toggleClass('visible');
|
||||
|
||||
$(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').on('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._destroy.call(this);
|
||||
|
||||
$('body').off('mouseup', null, 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 () {
|
||||
this.hide();
|
||||
resetDashboard();
|
||||
});
|
||||
|
||||
$(this).on('showChangeDashboardLayoutDialog', function () {
|
||||
this.hide();
|
||||
showChangeDashboardLayoutDialog();
|
||||
});
|
||||
|
||||
$(this).on('renameDashboard', function () {
|
||||
this.hide();
|
||||
renameDashboard();
|
||||
});
|
||||
|
||||
$(this).on('removeDashboard', function () {
|
||||
this.hide();
|
||||
removeDashboard();
|
||||
});
|
||||
|
||||
$(this).on('setAsDefaultWidgets', function () {
|
||||
this.hide();
|
||||
setAsDefaultWidgets();
|
||||
});
|
||||
|
||||
$(this).on('copyDashboardToUser', function () {
|
||||
this.hide();
|
||||
copyDashboardToUser();
|
||||
});
|
||||
|
||||
$(this).on('createDashboard', function () {
|
||||
this.hide();
|
||||
createDashboard();
|
||||
});
|
||||
};
|
||||
|
||||
$.extend(DashboardManagerControl.prototype, DashboardSettingsControlBase.prototype, {
|
||||
onOpen: function () {
|
||||
if ($('#dashboardWidgetsArea').dashboard('isDefaultDashboard')) {
|
||||
$('.removeDashboardLink', this.$element).hide();
|
||||
} else {
|
||||
$('.removeDashboardLink', this.$element).show();
|
||||
}
|
||||
},
|
||||
|
||||
hide: function () {
|
||||
this.$element.removeClass('visible');
|
||||
},
|
||||
|
||||
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;
|
||||
}());
|
||||
577
www/analytics/plugins/Dashboard/javascripts/dashboardObject.js
Normal file
577
www/analytics/plugins/Dashboard/javascripts/dashboardObject.js
Normal file
|
|
@ -0,0 +1,577 @@
|
|||
/*!
|
||||
* Piwik - Web Analytics
|
||||
*
|
||||
* @link http://piwik.org
|
||||
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
/**
|
||||
* Current dashboard column layout
|
||||
* @type {object}
|
||||
*/
|
||||
var dashboardLayout = {};
|
||||
/**
|
||||
* Id of current dashboard
|
||||
* @type {int}
|
||||
*/
|
||||
var dashboardId = 1;
|
||||
/**
|
||||
* Name of current dashboard
|
||||
* @type {string}
|
||||
*/
|
||||
var dashboardName = '';
|
||||
/**
|
||||
* Holds a reference to the dashboard element
|
||||
* @type {object}
|
||||
*/
|
||||
var dashboardElement = null;
|
||||
/**
|
||||
* Boolean indicating wether the layout config has been changed or not
|
||||
* @type {boolean}
|
||||
*/
|
||||
var dashboardChanged = false;
|
||||
|
||||
/**
|
||||
* public methods of dashboard plugin
|
||||
* all methods defined here are accessible with $(selector).dashboard('method', param, param, ...)
|
||||
*/
|
||||
var methods = {
|
||||
|
||||
/**
|
||||
* creates a dashboard object
|
||||
*
|
||||
* @param {object} options
|
||||
*/
|
||||
init: function (options) {
|
||||
|
||||
dashboardElement = this;
|
||||
|
||||
if (options.idDashboard) {
|
||||
dashboardId = options.idDashboard;
|
||||
}
|
||||
|
||||
if (options.name) {
|
||||
dashboardName = options.name;
|
||||
}
|
||||
|
||||
if (options.layout) {
|
||||
generateLayout(options.layout);
|
||||
buildMenu();
|
||||
} else {
|
||||
methods.loadDashboard.apply(this, [dashboardId]);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Destroys the dashboard object and all its childrens
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
destroy: function () {
|
||||
$(dashboardElement).remove();
|
||||
dashboardElement = null;
|
||||
var widgets = $('[widgetId]');
|
||||
for (var i = 0; i < widgets.length; i++) {
|
||||
$(widgets[i]).dashboardWidget('destroy');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Load dashboard with the given id
|
||||
*
|
||||
* @param {int} dashboardIdToLoad
|
||||
*/
|
||||
loadDashboard: function (dashboardIdToLoad) {
|
||||
$(dashboardElement).empty();
|
||||
dashboardName = '';
|
||||
dashboardLayout = null;
|
||||
dashboardId = dashboardIdToLoad;
|
||||
piwikHelper.showAjaxLoading();
|
||||
broadcast.updateHashOnly = true;
|
||||
broadcast.propagateAjax('?idDashboard=' + dashboardIdToLoad);
|
||||
fetchLayout(generateLayout);
|
||||
buildMenu();
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Change current column layout to the given one
|
||||
*
|
||||
* @param {String} newLayout
|
||||
*/
|
||||
setColumnLayout: function (newLayout) {
|
||||
adjustDashboardColumns(newLayout);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the current column layout
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
getColumnLayout: function () {
|
||||
return dashboardLayout.config.layout;
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the current dashboard name
|
||||
*
|
||||
* @return {String}
|
||||
*/
|
||||
getDashboardName: function () {
|
||||
return dashboardName;
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the current dashboard id
|
||||
*
|
||||
* @return {int}
|
||||
*/
|
||||
getDashboardId: function () {
|
||||
return dashboardId;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets a new name for the current dashboard
|
||||
*
|
||||
* @param {String} newName
|
||||
*/
|
||||
setDashboardName: function (newName) {
|
||||
dashboardName = newName;
|
||||
dashboardChanged = true;
|
||||
saveLayout();
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds a new widget to the dashboard
|
||||
*
|
||||
* @param {String} uniqueId
|
||||
* @param {int} columnNumber
|
||||
* @param {object} widgetParameters
|
||||
* @param {boolean} addWidgetOnTop
|
||||
* @param {boolean} isHidden
|
||||
*/
|
||||
addWidget: function (uniqueId, columnNumber, widgetParameters, addWidgetOnTop, isHidden) {
|
||||
addWidgetTemplate(uniqueId, columnNumber, widgetParameters, addWidgetOnTop, isHidden);
|
||||
reloadWidget(uniqueId);
|
||||
saveLayout();
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets the current layout to the defaults
|
||||
*/
|
||||
resetLayout: function () {
|
||||
var ajaxRequest = new ajaxHelper();
|
||||
ajaxRequest.addParams({
|
||||
module: 'Dashboard',
|
||||
action: 'resetLayout',
|
||||
idDashboard: dashboardId
|
||||
}, 'get');
|
||||
ajaxRequest.setCallback(
|
||||
function () {
|
||||
methods.loadDashboard.apply(this, [dashboardId])
|
||||
}
|
||||
);
|
||||
ajaxRequest.setLoadingElement();
|
||||
ajaxRequest.setFormat('html');
|
||||
ajaxRequest.send(true);
|
||||
},
|
||||
|
||||
/**
|
||||
* Removes the current dashboard
|
||||
*/
|
||||
removeDashboard: function () {
|
||||
removeDashboard();
|
||||
},
|
||||
|
||||
/**
|
||||
* Saves the current layout aus new default widget layout
|
||||
*/
|
||||
saveLayoutAsDefaultWidgetLayout: function () {
|
||||
saveLayout('saveLayoutAsDefault');
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns if the current loaded dashboard is the default dashboard
|
||||
*/
|
||||
isDefaultDashboard: function () {
|
||||
return (dashboardId == 1);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Generates the dashboard out of the given layout
|
||||
*
|
||||
* @param {object|string} layout
|
||||
*/
|
||||
function generateLayout(layout) {
|
||||
|
||||
dashboardLayout = parseLayout(layout);
|
||||
piwikHelper.hideAjaxLoading();
|
||||
adjustDashboardColumns(dashboardLayout.config.layout);
|
||||
|
||||
var dashboardContainsWidgets = false;
|
||||
for (var column = 0; column < dashboardLayout.columns.length; column++) {
|
||||
for (var i in dashboardLayout.columns[column]) {
|
||||
if (typeof dashboardLayout.columns[column][i] != 'object') {
|
||||
// Fix IE8 bug: the "i in" loop contains i="indexOf", which would yield type function.
|
||||
// If we would continue with i="indexOf", an invalid widget would be created.
|
||||
continue;
|
||||
}
|
||||
var widget = dashboardLayout.columns[column][i];
|
||||
dashboardContainsWidgets = true;
|
||||
addWidgetTemplate(widget.uniqueId, column + 1, widget.parameters, false, widget.isHidden)
|
||||
}
|
||||
}
|
||||
|
||||
if (!dashboardContainsWidgets) {
|
||||
$(dashboardElement).trigger('dashboardempty');
|
||||
}
|
||||
|
||||
makeWidgetsSortable();
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches the layout for the currently set dashboard id
|
||||
* and passes the response to given callback function
|
||||
*
|
||||
* @param {function} callback
|
||||
*/
|
||||
function fetchLayout(callback) {
|
||||
globalAjaxQueue.abort();
|
||||
var ajaxRequest = new ajaxHelper();
|
||||
ajaxRequest.addParams({
|
||||
module: 'Dashboard',
|
||||
action: 'getDashboardLayout',
|
||||
idDashboard: dashboardId
|
||||
}, 'get');
|
||||
ajaxRequest.setCallback(callback);
|
||||
ajaxRequest.send(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust the dashboard columns to fit the new layout
|
||||
* removes or adds new columns if needed and sets the column sizes.
|
||||
*
|
||||
* @param {String} layout new layout in format xx-xx-xx
|
||||
* @return {void}
|
||||
*/
|
||||
function adjustDashboardColumns(layout) {
|
||||
var columnWidth = layout.split('-');
|
||||
var columnCount = columnWidth.length;
|
||||
|
||||
var currentCount = $('.col', dashboardElement).length;
|
||||
|
||||
if (currentCount < columnCount) {
|
||||
$('.menuClear', dashboardElement).remove();
|
||||
for (var i = currentCount; i < columnCount; i++) {
|
||||
if (dashboardLayout.columns.length < i) {
|
||||
dashboardLayout.columns.push({});
|
||||
}
|
||||
$(dashboardElement).append('<div class="col"> </div>');
|
||||
}
|
||||
$(dashboardElement).append('<div class="menuClear"> </div>');
|
||||
} else if (currentCount > columnCount) {
|
||||
for (var i = columnCount; i < currentCount; i++) {
|
||||
if (dashboardLayout.columns.length >= i) {
|
||||
dashboardLayout.columns.pop();
|
||||
}
|
||||
// move widgets to other columns depending on columns height
|
||||
$('[widgetId]', $('.col:last')).each(function (id, elem) {
|
||||
var cols = $('.col').slice(0, columnCount);
|
||||
var smallestColumn = $(cols[0]);
|
||||
var smallestColumnHeight = null;
|
||||
cols.each(function (colId, col) {
|
||||
if (smallestColumnHeight == null || smallestColumnHeight > $(col).height()) {
|
||||
smallestColumnHeight = $(col).height();
|
||||
smallestColumn = $(col);
|
||||
}
|
||||
});
|
||||
|
||||
$(elem).appendTo(smallestColumn);
|
||||
});
|
||||
|
||||
$('.col:last').remove();
|
||||
}
|
||||
}
|
||||
|
||||
for (var i = 0; i < columnCount; i++) {
|
||||
$('.col', dashboardElement)[i].className = 'col width-' + columnWidth[i];
|
||||
}
|
||||
|
||||
makeWidgetsSortable();
|
||||
|
||||
// if dashboard column count is changed (not on initial load)
|
||||
if (currentCount > 0 && dashboardLayout.config.layout != layout) {
|
||||
dashboardChanged = true;
|
||||
dashboardLayout.config.layout = layout;
|
||||
saveLayout();
|
||||
}
|
||||
|
||||
// trigger resize event on all widgets
|
||||
$('.widgetContent').each(function () {
|
||||
$(this).trigger('widget:resize');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the given layout as an layout object
|
||||
* Used to parse old layout format into the new syntax
|
||||
*
|
||||
* @param {object} layout layout object or string
|
||||
* @return {object}
|
||||
*/
|
||||
function parseLayout(layout) {
|
||||
|
||||
// Handle layout array used in piwik before 1.7
|
||||
// column count was always 3, so use layout 33-33-33 as default
|
||||
if ($.isArray(layout)) {
|
||||
layout = {
|
||||
config: {layout: '33-33-33'},
|
||||
columns: layout
|
||||
};
|
||||
}
|
||||
|
||||
if (!layout.config.layout) {
|
||||
layout.config.layout = '33-33-33';
|
||||
}
|
||||
|
||||
return layout;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reloads the widget with the given uniqueId
|
||||
*
|
||||
* @param {String} uniqueId
|
||||
*/
|
||||
function reloadWidget(uniqueId) {
|
||||
$('[widgetId=' + uniqueId + ']', dashboardElement).dashboardWidget('reload', false, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds an empty widget template to the dashboard in the given column
|
||||
* @param {String} uniqueId
|
||||
* @param {int} columnNumber
|
||||
* @param {object} widgetParameters
|
||||
* @param {boolean} addWidgetOnTop
|
||||
* @param {boolean} isHidden
|
||||
*/
|
||||
function addWidgetTemplate(uniqueId, columnNumber, widgetParameters, addWidgetOnTop, isHidden) {
|
||||
if (!columnNumber) {
|
||||
columnNumber = 1;
|
||||
}
|
||||
|
||||
// do not try to add widget if given column number is to high
|
||||
if (columnNumber > $('.col', dashboardElement).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var widgetContent = '<div class="sortable" widgetId="' + uniqueId + '"></div>';
|
||||
|
||||
if (addWidgetOnTop) {
|
||||
$('.col:nth-child(' + columnNumber + ')', dashboardElement).prepend(widgetContent);
|
||||
} else {
|
||||
$('.col:nth-child(' + columnNumber + ')', dashboardElement).append(widgetContent);
|
||||
}
|
||||
|
||||
$('[widgetId=' + uniqueId + ']', dashboardElement).dashboardWidget({
|
||||
uniqueId: uniqueId,
|
||||
widgetParameters: widgetParameters,
|
||||
onChange: function () {
|
||||
saveLayout();
|
||||
},
|
||||
isHidden: isHidden
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Make all widgets on the dashboard sortable
|
||||
*/
|
||||
function makeWidgetsSortable() {
|
||||
function onStart(event, ui) {
|
||||
if (!jQuery.support.noCloneEvent) {
|
||||
$('object', this).hide();
|
||||
}
|
||||
}
|
||||
|
||||
function onStop(event, ui) {
|
||||
$('object', this).show();
|
||||
$('.widgetHover', this).removeClass('widgetHover');
|
||||
$('.widgetTopHover', this).removeClass('widgetTopHover');
|
||||
if ($('.widget:has(".piwik-graph")', ui.item).length) {
|
||||
reloadWidget($('.widget', ui.item).attr('id'));
|
||||
}
|
||||
saveLayout();
|
||||
}
|
||||
|
||||
//launch 'sortable' property on every dashboard widgets
|
||||
$( "div.col:data('ui-sortable')", dashboardElement ).sortable('destroy');
|
||||
|
||||
$('div.col', dashboardElement)
|
||||
.sortable({
|
||||
items: 'div.sortable',
|
||||
opacity: 0.6,
|
||||
forceHelperSize: true,
|
||||
forcePlaceholderSize: true,
|
||||
placeholder: 'hover',
|
||||
handle: '.widgetTop',
|
||||
helper: 'clone',
|
||||
start: onStart,
|
||||
stop: onStop,
|
||||
connectWith: 'div.col'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle clicks for menu items for choosing between available dashboards
|
||||
*/
|
||||
function buildMenu() {
|
||||
var success = function (dashboards) {
|
||||
var dashboardMenuList = $('#Dashboard').find('> ul');
|
||||
var dashboardMenuListItems = dashboardMenuList.find('>li');
|
||||
|
||||
dashboardMenuListItems.filter(function () {
|
||||
return $(this).attr('id').indexOf('Dashboard_embeddedIndex') == 0;
|
||||
}).remove();
|
||||
|
||||
if (dashboards.length > 1
|
||||
|| dashboardMenuListItems.length >= 1
|
||||
) {
|
||||
dashboardMenuList.show();
|
||||
var items = [];
|
||||
for (var i = 0; i < dashboards.length; i++) {
|
||||
var $link = $('<a/>').attr('data-idDashboard', dashboards[i].iddashboard).text(dashboards[i].name);
|
||||
var $li = $('<li/>').attr('id', 'Dashboard_embeddedIndex_' + dashboards[i].iddashboard)
|
||||
.addClass('dashboardMenuItem').append($link);
|
||||
items.push($li);
|
||||
|
||||
if (dashboards[i].iddashboard == dashboardId) {
|
||||
dashboardName = dashboards[i].name;
|
||||
$li.addClass('sfHover');
|
||||
}
|
||||
}
|
||||
dashboardMenuList.prepend(items);
|
||||
} else {
|
||||
dashboardMenuList.hide();
|
||||
}
|
||||
|
||||
dashboardMenuList.find('a[data-idDashboard]').click(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var idDashboard = $(this).attr('data-idDashboard');
|
||||
|
||||
if (typeof piwikMenu != 'undefined') {
|
||||
piwikMenu.activateMenu('Dashboard', 'embeddedIndex');
|
||||
}
|
||||
$('#Dashboard ul li').removeClass('sfHover');
|
||||
if ($(dashboardElement).length) {
|
||||
$(dashboardElement).dashboard('loadDashboard', idDashboard);
|
||||
} else {
|
||||
broadcast.propagateAjax('module=Dashboard&action=embeddedIndex&idDashboard=' + idDashboard);
|
||||
}
|
||||
$(this).closest('li').addClass('sfHover');
|
||||
});
|
||||
};
|
||||
|
||||
var ajaxRequest = new ajaxHelper();
|
||||
ajaxRequest.addParams({
|
||||
module: 'Dashboard',
|
||||
action: 'getAllDashboards'
|
||||
}, 'get');
|
||||
ajaxRequest.setCallback(success);
|
||||
ajaxRequest.send(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Save the current layout in database if it has changed
|
||||
* @param {string} [action] action to perform (defaults to saveLayout)
|
||||
*/
|
||||
function saveLayout(action) {
|
||||
var columns = [];
|
||||
|
||||
var columnNumber = 0;
|
||||
$('.col').each(function () {
|
||||
columns[columnNumber] = [];
|
||||
var items = $('[widgetId]', this);
|
||||
for (var j = 0; j < items.size(); j++) {
|
||||
columns[columnNumber][j] = $(items[j]).dashboardWidget('getWidgetObject');
|
||||
|
||||
// Do not store segment in the dashboard layout
|
||||
delete columns[columnNumber][j].parameters.segment;
|
||||
|
||||
}
|
||||
columnNumber++;
|
||||
});
|
||||
|
||||
if (JSON.stringify(dashboardLayout.columns) != JSON.stringify(columns) || dashboardChanged || action) {
|
||||
|
||||
dashboardLayout.columns = JSON.parse(JSON.stringify(columns));
|
||||
columns = null;
|
||||
|
||||
if (!action) {
|
||||
action = 'saveLayout';
|
||||
}
|
||||
|
||||
var ajaxRequest = new ajaxHelper();
|
||||
ajaxRequest.addParams({
|
||||
module: 'Dashboard',
|
||||
action: action,
|
||||
idDashboard: dashboardId
|
||||
}, 'get');
|
||||
ajaxRequest.addParams({
|
||||
layout: JSON.stringify(dashboardLayout),
|
||||
name: dashboardName
|
||||
}, 'post');
|
||||
ajaxRequest.setCallback(
|
||||
function () {
|
||||
if (dashboardChanged) {
|
||||
dashboardChanged = false;
|
||||
buildMenu();
|
||||
}
|
||||
}
|
||||
);
|
||||
ajaxRequest.setFormat('html');
|
||||
ajaxRequest.send(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the current dashboard
|
||||
*/
|
||||
function removeDashboard() {
|
||||
if (dashboardId == 1) {
|
||||
return; // dashboard with id 1 should never be deleted, as it is the default
|
||||
}
|
||||
|
||||
var ajaxRequest = new ajaxHelper();
|
||||
ajaxRequest.setLoadingElement();
|
||||
ajaxRequest.addParams({
|
||||
module: 'Dashboard',
|
||||
action: 'removeDashboard',
|
||||
idDashboard: dashboardId
|
||||
}, 'get');
|
||||
ajaxRequest.setCallback(
|
||||
function () {
|
||||
methods.loadDashboard.apply(this, [1]);
|
||||
}
|
||||
);
|
||||
ajaxRequest.setFormat('html');
|
||||
ajaxRequest.send(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Make plugin methods available
|
||||
*/
|
||||
$.fn.dashboard = function (method) {
|
||||
if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
} else if (typeof method === 'object' || !method) {
|
||||
return methods.init.apply(this, arguments);
|
||||
} else {
|
||||
$.error('Method ' + method + ' does not exist on jQuery.dashboard');
|
||||
}
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
331
www/analytics/plugins/Dashboard/javascripts/dashboardWidget.js
Executable file
331
www/analytics/plugins/Dashboard/javascripts/dashboardWidget.js
Executable file
|
|
@ -0,0 +1,331 @@
|
|||
/*!
|
||||
* Piwik - Web Analytics
|
||||
*
|
||||
* @link http://piwik.org
|
||||
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
$.widget('piwik.dashboardWidget', {
|
||||
|
||||
/**
|
||||
* Boolean indicating wether the widget is currently maximised
|
||||
* @type {Boolean}
|
||||
*/
|
||||
isMaximised: false,
|
||||
/**
|
||||
* Unique Id of the widget
|
||||
* @type {String}
|
||||
*/
|
||||
uniqueId: null,
|
||||
/**
|
||||
* Object holding the widget parameters
|
||||
* @type {Object}
|
||||
*/
|
||||
widgetParameters: {},
|
||||
|
||||
/**
|
||||
* Options available for initialization
|
||||
*/
|
||||
options: {
|
||||
uniqueId: null,
|
||||
isHidden: false,
|
||||
onChange: null,
|
||||
widgetParameters: {},
|
||||
title: null,
|
||||
onRemove: null,
|
||||
onRefresh: null,
|
||||
onMaximise: null,
|
||||
onMinimise: null,
|
||||
autoMaximiseVisualizations: ['tableAllColumns', 'tableGoals']
|
||||
},
|
||||
|
||||
/**
|
||||
* creates a widget object
|
||||
*/
|
||||
_create: function () {
|
||||
|
||||
if (!this.options.uniqueId) {
|
||||
piwikHelper.error('widgets can\'t be created without an uniqueId');
|
||||
return;
|
||||
} else {
|
||||
this.uniqueId = this.options.uniqueId;
|
||||
}
|
||||
|
||||
if (this.options.widgetParameters) {
|
||||
this.widgetParameters = this.options.widgetParameters;
|
||||
}
|
||||
|
||||
this._createDashboardWidget(this.uniqueId);
|
||||
|
||||
var self = this;
|
||||
this.element.on('setParameters.dashboardWidget', function (e, params) { self.setParameters(params); });
|
||||
|
||||
this.reload(true, true);
|
||||
},
|
||||
|
||||
/**
|
||||
* Cleanup some events and dialog
|
||||
* Called automatically upon removing the widgets domNode
|
||||
*/
|
||||
destroy: function () {
|
||||
if (this.isMaximised) {
|
||||
$('[widgetId=' + this.uniqueId + ']').dialog('destroy');
|
||||
}
|
||||
$('*', this.element).off('.dashboardWidget'); // unbind all events
|
||||
$('.widgetContent', this.element).trigger('widget:destroy');
|
||||
require('piwik/UI').UIControl.cleanupUnusedControls();
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the data currently set for the widget
|
||||
* @return {object}
|
||||
*/
|
||||
getWidgetObject: function () {
|
||||
return {
|
||||
uniqueId: this.uniqueId,
|
||||
parameters: this.widgetParameters,
|
||||
isHidden: this.options.isHidden
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the current widget in an ui.dialog
|
||||
*/
|
||||
maximise: function () {
|
||||
this.isMaximised = true;
|
||||
|
||||
if (this.options.onMaximise) {
|
||||
this.options.onMaximise(this.element);
|
||||
} else {
|
||||
this._maximiseImpl();
|
||||
}
|
||||
|
||||
$('.widgetContent', this.element).trigger('widget:maximise');
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Reloads the widgets content with the currently set parameters
|
||||
*/
|
||||
reload: function (hideLoading, notJQueryUI, overrideParams) {
|
||||
if (!notJQueryUI) {
|
||||
piwikHelper.log('widget.reload() was called by jquery.ui, ignoring', arguments.callee.caller);
|
||||
return;
|
||||
}
|
||||
|
||||
var self = this, currentWidget = this.element;
|
||||
|
||||
function onWidgetLoadedReplaceElementWithContent(loadedContent) {
|
||||
$('.widgetContent', currentWidget).html(loadedContent);
|
||||
$('.widgetContent', currentWidget).removeClass('loading');
|
||||
$('.widgetContent', currentWidget).trigger('widget:create', [self]);
|
||||
}
|
||||
|
||||
// Reading segment from hash tag (standard case) or from the URL (when embedding dashboard)
|
||||
var segment = broadcast.getValueFromHash('segment') || broadcast.getValueFromUrl('segment');
|
||||
if (segment.length) {
|
||||
this.widgetParameters.segment = segment;
|
||||
}
|
||||
|
||||
if (!hideLoading) {
|
||||
$('.widgetContent', currentWidget).addClass('loading');
|
||||
}
|
||||
|
||||
var params = $.extend(this.widgetParameters, overrideParams || {});
|
||||
widgetsHelper.loadWidgetAjax(this.uniqueId, params, onWidgetLoadedReplaceElementWithContent);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Update widget parameters
|
||||
*
|
||||
* @param {object} parameters
|
||||
*/
|
||||
setParameters: function (parameters) {
|
||||
if (!this.isMaximised
|
||||
&& this.options.autoMaximiseVisualizations.indexOf(parameters.viewDataTable) !== -1
|
||||
) {
|
||||
this.maximise();
|
||||
}
|
||||
for (var name in parameters) {
|
||||
this.widgetParameters[name] = parameters[name];
|
||||
}
|
||||
if (!this.isMaximised) {
|
||||
this.options.onChange();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Get widget parameters
|
||||
*
|
||||
* @param {object} parameters
|
||||
*/
|
||||
getParameters: function () {
|
||||
return $.extend({}, this.widgetParameters);
|
||||
},
|
||||
|
||||
/**
|
||||
* Creaates the widget markup for the given uniqueId
|
||||
*
|
||||
* @param {String} uniqueId
|
||||
*/
|
||||
_createDashboardWidget: function (uniqueId) {
|
||||
|
||||
var widgetName = widgetsHelper.getWidgetNameFromUniqueId(uniqueId);
|
||||
if (!widgetName) {
|
||||
widgetName = _pk_translate('Dashboard_WidgetNotFound');
|
||||
}
|
||||
|
||||
var title = this.options.title === null ? $('<span/>').text(widgetName) : this.options.title;
|
||||
var emptyWidgetContent = require('piwik/UI/Dashboard').WidgetFactory.make(uniqueId, title);
|
||||
this.element.html(emptyWidgetContent);
|
||||
|
||||
var widgetElement = $('#' + uniqueId, this.element);
|
||||
var self = this;
|
||||
widgetElement
|
||||
.on('mouseenter.dashboardWidget', function () {
|
||||
if (!self.isMaximised) {
|
||||
$(this).addClass('widgetHover');
|
||||
$('.widgetTop', this).addClass('widgetTopHover');
|
||||
}
|
||||
})
|
||||
.on('mouseleave.dashboardWidget', function () {
|
||||
if (!self.isMaximised) {
|
||||
$(this).removeClass('widgetHover');
|
||||
$('.widgetTop', this).removeClass('widgetTopHover');
|
||||
}
|
||||
});
|
||||
|
||||
if (this.options.isHidden) {
|
||||
$('.widgetContent', widgetElement).toggleClass('hidden').closest('.widget').toggleClass('hiddenContent');
|
||||
}
|
||||
|
||||
$('.button#close', widgetElement)
|
||||
.on('click.dashboardWidget', function (ev) {
|
||||
piwikHelper.modalConfirm('#confirm', {yes: function () {
|
||||
if (self.options.onRemove) {
|
||||
self.options.onRemove(self.element);
|
||||
} else {
|
||||
self.element.remove();
|
||||
self.options.onChange();
|
||||
}
|
||||
}});
|
||||
});
|
||||
|
||||
$('.button#maximise', widgetElement)
|
||||
.on('click.dashboardWidget', function (ev) {
|
||||
if (self.options.onMaximise) {
|
||||
self.options.onMaximise(self.element);
|
||||
} else {
|
||||
if ($('.widgetContent', $(this).parents('.widget')).hasClass('hidden')) {
|
||||
self.showContent();
|
||||
} else {
|
||||
self.maximise();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.button#minimise', widgetElement)
|
||||
.on('click.dashboardWidget', function (ev) {
|
||||
if (self.options.onMinimise) {
|
||||
self.options.onMinimise(self.element);
|
||||
} else {
|
||||
if (!self.isMaximised) {
|
||||
self.hideContent();
|
||||
} else {
|
||||
self.element.dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('.button#refresh', widgetElement)
|
||||
.on('click.dashboardWidget', function (ev) {
|
||||
if (self.options.onRefresh) {
|
||||
self.options.onRefresh(self.element);
|
||||
} else {
|
||||
self.reload(false, true);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the widget content. Triggers the onChange event.
|
||||
*/
|
||||
hideContent: function () {
|
||||
$('.widgetContent', this.element.find('.widget').addClass('hiddenContent')).addClass('hidden');
|
||||
this.options.isHidden = true;
|
||||
this.options.onChange();
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the widget content. Triggers the onChange event.
|
||||
*/
|
||||
showContent: function () {
|
||||
this.isMaximised = false;
|
||||
this.options.isHidden = false;
|
||||
this.element.find('.widget').removeClass('hiddenContent').find('.widgetContent').removeClass('hidden');
|
||||
this.element.find('.widget').find('div.piwik-graph').trigger('resizeGraph');
|
||||
this.options.onChange();
|
||||
$('.widgetContent', this.element).trigger('widget:minimise');
|
||||
},
|
||||
|
||||
/**
|
||||
* Default maximise behavior. Will create a dialog that is 70% of the document's width,
|
||||
* displaying the widget alone.
|
||||
*/
|
||||
_maximiseImpl: function () {
|
||||
this.detachWidget();
|
||||
|
||||
var width = Math.floor($('body').width() * 0.7);
|
||||
|
||||
var self = this;
|
||||
this.element.dialog({
|
||||
title: '',
|
||||
modal: true,
|
||||
width: width,
|
||||
position: ['center', 'center'],
|
||||
resizable: true,
|
||||
autoOpen: true,
|
||||
close: function (event, ui) {
|
||||
self.isMaximised = false;
|
||||
$('body').off('.dashboardWidget');
|
||||
$(this).dialog("destroy");
|
||||
$('#' + self.uniqueId + '-placeholder').replaceWith(this);
|
||||
$(this).removeAttr('style');
|
||||
self.options.onChange();
|
||||
$(this).find('div.piwik-graph').trigger('resizeGraph');
|
||||
$('.widgetContent', self.element).trigger('widget:minimise');
|
||||
}
|
||||
});
|
||||
this.element.find('div.piwik-graph').trigger('resizeGraph');
|
||||
|
||||
var currentWidget = this.element;
|
||||
$('body').on('click.dashboardWidget', function (ev) {
|
||||
if (/ui-widget-overlay/.test(ev.target.className)) {
|
||||
$(currentWidget).dialog("close");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Detaches the widget from the DOM and replaces it with a placeholder element.
|
||||
* The placeholder element will have the save dimensions as the widget and will have
|
||||
* the widgetPlaceholder CSS class.
|
||||
*
|
||||
* @return {jQuery} the detached widget
|
||||
*/
|
||||
detachWidget: function () {
|
||||
this.element.before('<div id="' + this.uniqueId + '-placeholder" class="widgetPlaceholder widget"> </div>');
|
||||
$('#' + this.uniqueId + '-placeholder').height(this.element.height());
|
||||
$('#' + this.uniqueId + '-placeholder').width(this.element.width() - 16);
|
||||
|
||||
return this.element.detach();
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
421
www/analytics/plugins/Dashboard/javascripts/widgetMenu.js
Normal file
421
www/analytics/plugins/Dashboard/javascripts/widgetMenu.js
Normal file
|
|
@ -0,0 +1,421 @@
|
|||
/*!
|
||||
* Piwik - Web Analytics
|
||||
*
|
||||
* @link http://piwik.org
|
||||
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
|
||||
*/
|
||||
|
||||
function widgetsHelper() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the available widgets fetched via AJAX (if not already done)
|
||||
*
|
||||
* @return {object} object containing available widgets
|
||||
*/
|
||||
widgetsHelper.getAvailableWidgets = function () {
|
||||
if (!widgetsHelper.availableWidgets) {
|
||||
var ajaxRequest = new ajaxHelper();
|
||||
ajaxRequest.addParams({
|
||||
module: 'Dashboard',
|
||||
action: 'getAvailableWidgets'
|
||||
}, 'get');
|
||||
ajaxRequest.setCallback(
|
||||
function (data) {
|
||||
widgetsHelper.availableWidgets = data;
|
||||
}
|
||||
);
|
||||
ajaxRequest.send(true);
|
||||
}
|
||||
|
||||
return widgetsHelper.availableWidgets;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the complete widget object by its unique id
|
||||
*
|
||||
* @param {string} uniqueId
|
||||
* @return {object} widget object
|
||||
*/
|
||||
widgetsHelper.getWidgetObjectFromUniqueId = function (uniqueId) {
|
||||
var widgets = widgetsHelper.getAvailableWidgets();
|
||||
for (var widgetCategory in widgets) {
|
||||
var widgetInCategory = widgets[widgetCategory];
|
||||
for (var i in widgetInCategory) {
|
||||
if (widgetInCategory[i]["uniqueId"] == uniqueId) {
|
||||
return widgetInCategory[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the name of a widget by its unique id
|
||||
*
|
||||
* @param {string} uniqueId unique id of the widget
|
||||
* @return {string}
|
||||
*/
|
||||
widgetsHelper.getWidgetNameFromUniqueId = function (uniqueId) {
|
||||
var widget = this.getWidgetObjectFromUniqueId(uniqueId);
|
||||
if (widget == false) {
|
||||
return false;
|
||||
}
|
||||
return widget["name"];
|
||||
};
|
||||
|
||||
/**
|
||||
* Sends and ajax request to query for the widgets html
|
||||
*
|
||||
* @param {string} widgetUniqueId unique id of the widget
|
||||
* @param {object} widgetParameters parameters to be used for loading the widget
|
||||
* @param {function} onWidgetLoadedCallback callback to be executed after widget is loaded
|
||||
* @return {object}
|
||||
*/
|
||||
widgetsHelper.loadWidgetAjax = function (widgetUniqueId, widgetParameters, onWidgetLoadedCallback) {
|
||||
var disableLink = broadcast.getValueFromUrl('disableLink');
|
||||
if (disableLink.length) {
|
||||
widgetParameters['disableLink'] = disableLink;
|
||||
}
|
||||
|
||||
widgetParameters['widget'] = 1;
|
||||
|
||||
var ajaxRequest = new ajaxHelper();
|
||||
ajaxRequest.addParams(widgetParameters, 'get');
|
||||
ajaxRequest.setCallback(onWidgetLoadedCallback);
|
||||
ajaxRequest.setFormat('html');
|
||||
ajaxRequest.send(false);
|
||||
return ajaxRequest;
|
||||
};
|
||||
|
||||
(function ($, require) {
|
||||
var exports = require('piwik/UI/Dashboard');
|
||||
|
||||
/**
|
||||
* Singleton instance that creates widget elements. Normally not needed even
|
||||
* when embedding/re-using dashboard widgets, but it can be useful when creating
|
||||
* elements with the same look and feel as dashboard widgets, but different
|
||||
* behavior (such as the widget preview in the dashboard manager control).
|
||||
*
|
||||
* @constructor
|
||||
*/
|
||||
var WidgetFactory = function () {
|
||||
// empty
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates an HTML element for displaying a widget.
|
||||
*
|
||||
* @param {string} uniqueId unique id of the widget
|
||||
* @param {string} widgetName name of the widget
|
||||
* @return {Element} the empty widget
|
||||
*/
|
||||
WidgetFactory.prototype.make = function (uniqueId, widgetName) {
|
||||
var $result = this.getWidgetTemplate().clone();
|
||||
$result.attr('id', uniqueId).find('.widgetName').append(widgetName);
|
||||
return $result;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the base widget template element. The template is stored in the
|
||||
* element with id == 'widgetTemplate'.
|
||||
*
|
||||
* @return {Element} the widget template
|
||||
*/
|
||||
WidgetFactory.prototype.getWidgetTemplate = function () {
|
||||
if (!this.widgetTemplate) {
|
||||
this.widgetTemplate = $('#widgetTemplate').find('>.widget').detach();
|
||||
}
|
||||
return this.widgetTemplate;
|
||||
};
|
||||
|
||||
exports.WidgetFactory = new WidgetFactory();
|
||||
})(jQuery, require);
|
||||
|
||||
/**
|
||||
* widgetPreview jQuery Extension
|
||||
*
|
||||
* Converts an dom element to a widget preview
|
||||
* Widget preview contains an categorylist, widgetlist and a preview
|
||||
*/
|
||||
(function ($) {
|
||||
$.extend({
|
||||
widgetPreview: new function () {
|
||||
|
||||
/**
|
||||
* Default settings for widgetPreview
|
||||
* @type {object}
|
||||
*/
|
||||
var defaultSettings = {
|
||||
/**
|
||||
* handler called after a widget preview is loaded in preview element
|
||||
* @type {function}
|
||||
*/
|
||||
onPreviewLoaded: function () {},
|
||||
/**
|
||||
* handler called on click on element in widgetlist or widget header
|
||||
* @type {function}
|
||||
*/
|
||||
onSelect: function () {},
|
||||
/**
|
||||
* callback used to determine if a widget is available or not
|
||||
* unavailable widgets aren't chooseable in widgetlist
|
||||
* @type {function}
|
||||
*/
|
||||
isWidgetAvailable: function (widgetUniqueId) { return true; },
|
||||
/**
|
||||
* should the lists and preview be reset on widget selection?
|
||||
* @type {boolean}
|
||||
*/
|
||||
resetOnSelect: false,
|
||||
/**
|
||||
* css classes for various elements
|
||||
* @type {string}
|
||||
*/
|
||||
baseClass: 'widgetpreview-base',
|
||||
categorylistClass: 'widgetpreview-categorylist',
|
||||
widgetlistClass: 'widgetpreview-widgetlist',
|
||||
widgetpreviewClass: 'widgetpreview-preview',
|
||||
choosenClass: 'widgetpreview-choosen',
|
||||
unavailableClass: 'widgetpreview-unavailable'
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the div to show category list in
|
||||
* - if element doesn't exist it will be created and added
|
||||
* - if element already exist it's content will be removed
|
||||
*
|
||||
* @return {$} category list element
|
||||
*/
|
||||
function createWidgetCategoryList(widgetPreview, availableWidgets) {
|
||||
var settings = widgetPreview.settings;
|
||||
|
||||
if (!$('.' + settings.categorylistClass, widgetPreview).length) {
|
||||
$(widgetPreview).append('<ul class="' + settings.categorylistClass + '"></ul>');
|
||||
} else {
|
||||
$('.' + settings.categorylistClass, widgetPreview).empty();
|
||||
}
|
||||
|
||||
for (var widgetCategory in availableWidgets) {
|
||||
|
||||
$('.' + settings.categorylistClass, widgetPreview).append('<li>' + widgetCategory + '</li>');
|
||||
}
|
||||
|
||||
return $('.' + settings.categorylistClass, widgetPreview);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the div to show widget list in
|
||||
* - if element doesn't exist it will be created and added
|
||||
* - if element already exist it's content will be removed
|
||||
*
|
||||
* @return {$} widget list element
|
||||
*/
|
||||
function createWidgetList(widgetPreview) {
|
||||
var settings = widgetPreview.settings;
|
||||
|
||||
if (!$('.' + settings.widgetlistClass, widgetPreview).length) {
|
||||
$(widgetPreview).append('<ul class="' + settings.widgetlistClass + '"></ul>');
|
||||
} else {
|
||||
$('.' + settings.widgetlistClass + ' li', widgetPreview).off('mouseover');
|
||||
$('.' + settings.widgetlistClass + ' li', widgetPreview).off('click');
|
||||
$('.' + settings.widgetlistClass, widgetPreview).empty();
|
||||
}
|
||||
|
||||
if ($('.' + settings.categorylistClass + ' .' + settings.choosenClass, widgetPreview).length) {
|
||||
var position = $('.' + settings.categorylistClass + ' .' + settings.choosenClass, widgetPreview).position().top -
|
||||
$('.' + settings.categorylistClass, widgetPreview).position().top;
|
||||
|
||||
$('.' + settings.widgetlistClass, widgetPreview).css('top', position);
|
||||
$('.' + settings.widgetlistClass, widgetPreview).css('marginBottom', position);
|
||||
}
|
||||
|
||||
return $('.' + settings.widgetlistClass, widgetPreview);
|
||||
}
|
||||
|
||||
/**
|
||||
* Display the given widgets in a widget list
|
||||
*
|
||||
* @param {object} widgets widgets to be displayed
|
||||
* @return {void}
|
||||
*/
|
||||
function showWidgetList(widgets, widgetPreview) {
|
||||
var settings = widgetPreview.settings;
|
||||
|
||||
var widgetList = createWidgetList(widgetPreview),
|
||||
widgetPreviewTimer;
|
||||
|
||||
for (var j = 0; j < widgets.length; j++) {
|
||||
var widgetName = widgets[j]["name"];
|
||||
var widgetUniqueId = widgets[j]["uniqueId"];
|
||||
// var widgetParameters = widgets[j]["parameters"];
|
||||
var widgetClass = '';
|
||||
if (!settings.isWidgetAvailable(widgetUniqueId)) {
|
||||
widgetClass += ' ' + settings.unavailableClass;
|
||||
}
|
||||
|
||||
widgetList.append('<li class="' + widgetClass + '" uniqueid="' + widgetUniqueId + '">' + widgetName + '</li>');
|
||||
}
|
||||
|
||||
// delay widget preview a few millisconds
|
||||
$('li', widgetList).on('mouseenter', function () {
|
||||
var that = this,
|
||||
widgetUniqueId = $(this).attr('uniqueid');
|
||||
clearTimeout(widgetPreview);
|
||||
widgetPreviewTimer = setTimeout(function () {
|
||||
$('li', widgetList).removeClass(settings.choosenClass);
|
||||
$(that).addClass(settings.choosenClass);
|
||||
|
||||
showPreview(widgetUniqueId, widgetPreview);
|
||||
}, 400);
|
||||
});
|
||||
|
||||
// clear timeout after mouse has left
|
||||
$('li:not(.' + settings.unavailableClass + ')', widgetList).on('mouseleave', function () {
|
||||
clearTimeout(widgetPreview);
|
||||
});
|
||||
|
||||
$('li:not(.' + settings.unavailableClass + ')', widgetList).on('click', function () {
|
||||
if (!$('.widgetLoading', widgetPreview).length) {
|
||||
settings.onSelect($(this).attr('uniqueid'));
|
||||
if (settings.resetOnSelect) {
|
||||
resetWidgetPreview(widgetPreview);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the div to show widget preview in
|
||||
* - if element doesn't exist it will be created and added
|
||||
* - if element already exist it's content will be removed
|
||||
*
|
||||
* @return {$} preview element
|
||||
*/
|
||||
function createPreviewElement(widgetPreview) {
|
||||
var settings = widgetPreview.settings;
|
||||
|
||||
if (!$('.' + settings.widgetpreviewClass, widgetPreview).length) {
|
||||
$(widgetPreview).append('<div class="' + settings.widgetpreviewClass + '"></div>');
|
||||
} else {
|
||||
$('.' + settings.widgetpreviewClass + ' .widgetTop', widgetPreview).off('click');
|
||||
$('.' + settings.widgetpreviewClass, widgetPreview).empty();
|
||||
}
|
||||
|
||||
return $('.' + settings.widgetpreviewClass, widgetPreview);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show widget with the given uniqueId in preview
|
||||
*
|
||||
* @param {string} widgetUniqueId unique id of widget to display
|
||||
* @return {void}
|
||||
*/
|
||||
function showPreview(widgetUniqueId, widgetPreview) {
|
||||
// do not reload id widget already displayed
|
||||
if ($('#' + widgetUniqueId, widgetPreview).length) return;
|
||||
|
||||
var settings = widgetPreview.settings;
|
||||
|
||||
var previewElement = createPreviewElement(widgetPreview);
|
||||
|
||||
var widget = widgetsHelper.getWidgetObjectFromUniqueId(widgetUniqueId);
|
||||
var widgetParameters = widget['parameters'];
|
||||
|
||||
var emptyWidgetHtml = require('piwik/UI/Dashboard').WidgetFactory.make(
|
||||
widgetUniqueId,
|
||||
$('<div/>')
|
||||
.attr('title', _pk_translate("Dashboard_AddPreviewedWidget"))
|
||||
.text(_pk_translate('Dashboard_WidgetPreview'))
|
||||
);
|
||||
previewElement.html(emptyWidgetHtml);
|
||||
|
||||
var onWidgetLoadedCallback = function (response) {
|
||||
var widgetElement = $('#' + widgetUniqueId);
|
||||
$('.widgetContent', widgetElement).html($(response));
|
||||
$('.widgetContent', widgetElement).trigger('widget:create');
|
||||
settings.onPreviewLoaded(widgetUniqueId, widgetElement);
|
||||
$('.' + settings.widgetpreviewClass + ' .widgetTop', widgetPreview).on('click', function () {
|
||||
settings.onSelect(widgetUniqueId);
|
||||
if (settings.resetOnSelect) {
|
||||
resetWidgetPreview(widgetPreview);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
// abort previous sent request
|
||||
if (widgetPreview.widgetAjaxRequest) {
|
||||
widgetPreview.widgetAjaxRequest.abort();
|
||||
}
|
||||
|
||||
widgetPreview.widgetAjaxRequest = widgetsHelper.loadWidgetAjax(widgetUniqueId, widgetParameters, onWidgetLoadedCallback);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset function
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
function resetWidgetPreview(widgetPreview) {
|
||||
var settings = widgetPreview.settings;
|
||||
|
||||
$('.' + settings.categorylistClass + ' li', widgetPreview).removeClass(settings.choosenClass);
|
||||
createWidgetList(widgetPreview);
|
||||
createPreviewElement(widgetPreview);
|
||||
}
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
*
|
||||
* @param {object} userSettings Settings to be used
|
||||
* @return {void}
|
||||
*/
|
||||
this.construct = function (userSettings) {
|
||||
|
||||
if (userSettings == 'reset') {
|
||||
resetWidgetPreview(this);
|
||||
return;
|
||||
}
|
||||
|
||||
this.widgetAjaxRequest = null;
|
||||
|
||||
$(this).addClass('widgetpreview-base');
|
||||
|
||||
this.settings = jQuery.extend({}, defaultSettings, userSettings);
|
||||
|
||||
// set onSelect callback
|
||||
if (typeof this.settings.onSelect == 'function') {
|
||||
this.onSelect = this.settings.onSelect;
|
||||
}
|
||||
|
||||
// set onPreviewLoaded callback
|
||||
if (typeof this.settings.onPreviewLoaded == 'function') {
|
||||
this.onPreviewLoaded = this.settings.onPreviewLoaded;
|
||||
}
|
||||
|
||||
availableWidgets = widgetsHelper.getAvailableWidgets();
|
||||
|
||||
var categoryList = createWidgetCategoryList(this, availableWidgets);
|
||||
|
||||
var self = this;
|
||||
$('li', categoryList).on('mouseover', function () {
|
||||
var category = $(this).text();
|
||||
var widgets = availableWidgets[category];
|
||||
$('li', categoryList).removeClass(self.settings.choosenClass);
|
||||
$(this).addClass(self.settings.choosenClass);
|
||||
showWidgetList(widgets, self);
|
||||
createPreviewElement(self); // empty preview
|
||||
});
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Makes widgetPreview available with $().widgetPreview()
|
||||
*/
|
||||
$.fn.extend({
|
||||
widgetPreview: $.widgetPreview.construct
|
||||
})
|
||||
})(jQuery);
|
||||
Loading…
Add table
Add a link
Reference in a new issue