Initial xentral_oss_20.3.c9ffacf
This commit is contained in:
Alex
@@ -0,0 +1,135 @@
|
||||
<?php
|
||||
|
||||
namespace Xentral\Modules\Dashboard;
|
||||
|
||||
/**
|
||||
* Klasse ist ohne Funktion; dient lediglich als Ideensammlung
|
||||
*/
|
||||
class DashboardWidget
|
||||
{
|
||||
/**
|
||||
* Einstellungsoptionen für Widget abrufen
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function getOptions()
|
||||
{
|
||||
// Allgemeine Einstelloptionen für alle Widgets
|
||||
$general = [
|
||||
'dashboard' => [
|
||||
'type' => 'int',
|
||||
'options' => [
|
||||
1 => 'Dashboard #1',
|
||||
2 => 'Dashboard #2',
|
||||
],
|
||||
],
|
||||
'project' => [
|
||||
'type' => 'int|list',
|
||||
'options' => [
|
||||
1 => 'Projekt 1',
|
||||
2 => 'Projekt 2',
|
||||
],
|
||||
],
|
||||
'size' => [
|
||||
'type' => 'string',
|
||||
'options' => [
|
||||
'1x1' => '1x1',
|
||||
'1x2' => '1x2',
|
||||
'2x1' => '2x1',
|
||||
'2x2' => '2x2',
|
||||
],
|
||||
],
|
||||
'color' => [
|
||||
'type' => 'string',
|
||||
'options' => [
|
||||
'#45B9D3' => 'Blau',
|
||||
'#0E8394' => 'Dunkelblau',
|
||||
'#A2C55A' => 'Grün',
|
||||
'#F69E06' => 'Orange',
|
||||
],
|
||||
],
|
||||
'color_inverted' => [
|
||||
'type' => 'bool',
|
||||
],
|
||||
];
|
||||
|
||||
// Spezielle Einstellungsoptionen für Uhrzeit-Widget
|
||||
$clock = [
|
||||
'time_format' => [
|
||||
'type' => 'string',
|
||||
'default' => '%H:%i',
|
||||
],
|
||||
'date_format' => [
|
||||
'type' => 'string',
|
||||
'default' => '%d.%m.%Y',
|
||||
],
|
||||
];
|
||||
|
||||
// Spezielle Einstellungsoptionen für Chart-Widget
|
||||
$chart = [
|
||||
'source' => [
|
||||
'type' => 'string',
|
||||
'options' => [
|
||||
'offers' => 'Angebote',
|
||||
'orders' => 'Bestellungen',
|
||||
'invoices' => 'Rechnungen',
|
||||
'creditnotes' => 'Gutschriften',
|
||||
],
|
||||
],
|
||||
'interval' => [
|
||||
'type' => 'string',
|
||||
'default' => 'day',
|
||||
'options' => [
|
||||
'day' => 'Tag',
|
||||
'week' => 'Woche',
|
||||
'month' => 'Monat',
|
||||
],
|
||||
],
|
||||
'period' => [
|
||||
'type' => 'int',
|
||||
'min' => 2,
|
||||
'max' => 14,
|
||||
],
|
||||
];
|
||||
|
||||
return [];
|
||||
}
|
||||
|
||||
/**
|
||||
* In welcher Kategorie wird das Widget gelistet?
|
||||
*
|
||||
* @return string
|
||||
*/
|
||||
public function getCategory()
|
||||
{
|
||||
$all = ['time', 'sales', 'chart', 'email'];
|
||||
|
||||
return 'time';
|
||||
}
|
||||
|
||||
/**
|
||||
* Unter welchen Tags wird das Widget gelistet
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
public function getTags()
|
||||
{
|
||||
$all = [
|
||||
'time',
|
||||
'sales',
|
||||
'chart',
|
||||
'shop',
|
||||
'article',
|
||||
'email',
|
||||
'ticket',
|
||||
'customer',
|
||||
'supplier',
|
||||
'orders',
|
||||
'offers',
|
||||
'invoices',
|
||||
'creditnotes',
|
||||
];
|
||||
|
||||
return ['sales', 'chart'];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
|
||||
.dashboard {
|
||||
position: relative;
|
||||
margin-top: 50px;
|
||||
max-width: 77vw;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1079px) {
|
||||
.dashboard {
|
||||
max-width: 93vw;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard .item {
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
background-color: #F0F0F0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.dashboard .item-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
FULLSIZE (fünf Spalten)
|
||||
*/
|
||||
|
||||
.dashboard .item {
|
||||
width: 14.75vw;
|
||||
height: 14.75vw;
|
||||
margin: 0 0.5vw 0.5vw 0;
|
||||
}
|
||||
|
||||
.dashboard .item.item-width-2 {
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.dashboard .item.item-height-2 {
|
||||
height: 30vw;
|
||||
}
|
||||
|
||||
.dashboard .title {
|
||||
width: 75.75vw;
|
||||
}
|
||||
|
||||
/**
|
||||
HALFSIZE (drei Spalten)
|
||||
*/
|
||||
|
||||
.dashboard.halfsize .item {
|
||||
width: 30vw;
|
||||
height: 30vw;
|
||||
margin: 0 1vw 1vw 0;
|
||||
}
|
||||
|
||||
.dashboard.halfsize .item.item-width-2 {
|
||||
width: 61vw;
|
||||
}
|
||||
|
||||
.dashboard.halfsize .item.item-height-2 {
|
||||
height: 61vw;
|
||||
}
|
||||
|
||||
.dashboard.halfsize .title {
|
||||
width: 92vw;
|
||||
}
|
||||
|
||||
/**
|
||||
STATE
|
||||
*/
|
||||
|
||||
.dashboard .item.muuri-item-dragging {
|
||||
z-index: 3;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.dashboard .item.muuri-item-releasing {
|
||||
z-index: 2;
|
||||
background-color: darkorange;
|
||||
}
|
||||
|
||||
.dashboard .muuri-item-positioning {
|
||||
background-color: mediumseagreen;
|
||||
}
|
||||
|
||||
.dashboard .item.muuri-item-shown {
|
||||
}
|
||||
|
||||
.dashboard .item.muuri-item-hidden {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
BACKGROUND
|
||||
*/
|
||||
|
||||
|
||||
.dashboard .item.bg-green {
|
||||
background-color: #A2C55A;
|
||||
}
|
||||
|
||||
.dashboard .item.bg-orange {
|
||||
background-color: #F69E06;
|
||||
}
|
||||
|
||||
.dashboard .item.bg-blue {
|
||||
background-color: #45B9D3;
|
||||
}
|
||||
|
||||
.dashboard .item.bg-darkblue {
|
||||
background-color: #0E8394;
|
||||
}
|
||||
|
||||
/**
|
||||
TITLE
|
||||
*/
|
||||
|
||||
.dashboard .title {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
margin: -45px 0 0 0;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
background-color: #5c2699;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dashboard .title h2,
|
||||
.dashboard .title h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.dashboard .dashboard-controls {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.dashboard .dashboard-controls .icon-add {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 3px;
|
||||
background: url('../themes/new/images/add.png');
|
||||
}
|
||||
|
||||
.dashboard .dashboard-controls .icon-edit {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 3px;
|
||||
background: url('../themes/new/images/edit.svg');
|
||||
}
|
||||
|
||||
/**
|
||||
CONTROLS
|
||||
*/
|
||||
|
||||
.dashboard .item-controls {
|
||||
clear: both;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
.dashboard .item-controls-left {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dashboard .item-controls-right {
|
||||
float: right;
|
||||
width: 40%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dashboard .item-controls a {
|
||||
display: inline-block;
|
||||
font-size: 80%;
|
||||
margin: 9px 2px;
|
||||
}
|
||||
|
||||
.dashboard .item-controls span {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.dashboard .item:hover .item-controls {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
.dashboard .item-controls .icon-move {
|
||||
cursor: move;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url('../themes/new/images/move.svg');
|
||||
}
|
||||
|
||||
.dashboard .item-controls .icon-settings {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url('../themes/new/images/edit.svg');
|
||||
}
|
||||
|
||||
/**
|
||||
CONTENT
|
||||
*/
|
||||
|
||||
.item-content .title {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
right: 10px;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: unset;
|
||||
border-radius: unset;
|
||||
color: #545454;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.item-content .xx-large {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 4.5em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-content .green {
|
||||
color: #A2C55A;
|
||||
}
|
||||
|
||||
.item-content .orange {
|
||||
color: #F69E06;
|
||||
}
|
||||
|
||||
.item-content .blue {
|
||||
color: #45B9D3;
|
||||
}
|
||||
|
||||
.item-content .darkblue {
|
||||
color: #0E8394;
|
||||
}
|
||||
|
||||
/**
|
||||
CHARTS
|
||||
*/
|
||||
|
||||
.dashboard .chart-wrapper {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 14.75vw;
|
||||
height: 14.75vw;
|
||||
padding: 1vw;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dashboard .chart-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dashboard .chart-content {
|
||||
|
||||
}
|
||||
|
||||
.dashboard .chart-wrapper {
|
||||
width: 14.75vw;
|
||||
height: 14.75vw;
|
||||
}
|
||||
|
||||
.dashboard .item-width-2 .chart-wrapper {
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
.dashboard .item-height-2 .chart-wrapper {
|
||||
height: 30vw;
|
||||
}
|
||||
|
||||
.dashboard.halfsize .chart-wrapper {
|
||||
width: 30vw;
|
||||
height: 30vw;
|
||||
}
|
||||
|
||||
.dashboard.halfsize .item-width-2 .chart-wrapper {
|
||||
width: 61vw;
|
||||
}
|
||||
|
||||
.dashboard.halfsize .item-height-2 .chart-wrapper {
|
||||
height: 61vw;
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
.dashboard {
|
||||
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
clear: both;
|
||||
position: relative;
|
||||
max-width: 1260px;
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
.dashboard .item {
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 5px;
|
||||
background-color: #F0F0F0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.dashboard .item.muuri-item-dragging {
|
||||
z-index: 3;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
.dashboard .item.muuri-item-releasing {
|
||||
z-index: 2;
|
||||
background-color: darkorange;
|
||||
}
|
||||
|
||||
.dashboard .muuri-item-positioning {
|
||||
background-color: mediumseagreen;
|
||||
}
|
||||
|
||||
.dashboard .item.muuri-item-shown {
|
||||
}
|
||||
|
||||
.dashboard .item.muuri-item-hidden {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.dashboard .item.item-width-2 {
|
||||
width: 410px;
|
||||
}
|
||||
|
||||
.dashboard .item.item-width-3 {
|
||||
width: 615px;
|
||||
}
|
||||
|
||||
.dashboard .item.item-height-2 {
|
||||
height: 410px;
|
||||
}
|
||||
|
||||
.dashboard .item.item-height-3 {
|
||||
height: 615px;
|
||||
}
|
||||
|
||||
.dashboard .item-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
CONTROLS
|
||||
*/
|
||||
|
||||
.dashboard .item-controls {
|
||||
clear: both;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 0, 0, .15);
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
.dashboard .item-controls-left {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dashboard .item-controls-right {
|
||||
float: right;
|
||||
width: 40%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dashboard .item-controls a {
|
||||
display: inline-block;
|
||||
font-size: 80%;
|
||||
margin: 9px 2px;
|
||||
}
|
||||
|
||||
.dashboard .item-controls span {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.dashboard .item:hover .item-controls {
|
||||
opacity: 1;
|
||||
transition: opacity 500ms;
|
||||
}
|
||||
|
||||
.dashboard .item-controls .icon-move {
|
||||
cursor: move;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url('../themes/new/images/move.svg');
|
||||
}
|
||||
|
||||
.dashboard .item-controls .icon-settings {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url('../themes/new/images/edit.svg');
|
||||
}
|
||||
|
||||
/**
|
||||
TITLE
|
||||
*/
|
||||
|
||||
.dashboard .title {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 15px;
|
||||
padding: 10px;
|
||||
margin: -40px 5px 5px 5px;
|
||||
color: #FFF;
|
||||
font-weight: bold;
|
||||
background-color: #5c2699;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.dashboard .title h2,
|
||||
.dashboard .title h3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.dashboard .title-controls {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.dashboard .title-controls .icon-add {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: url('../themes/new/images/add.png');
|
||||
}
|
||||
|
||||
/**
|
||||
CHARTS
|
||||
*/
|
||||
|
||||
.dashboard .chart-wrapper {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
var Dashboard = (function ($, ChartHelper) {
|
||||
|
||||
var me = {
|
||||
|
||||
elem: {
|
||||
$dashboards: null,
|
||||
$dashboardDialog: null,
|
||||
$widgetDialog: null
|
||||
},
|
||||
|
||||
storage: {
|
||||
dashboards: [],
|
||||
debounceTimer: null
|
||||
},
|
||||
|
||||
template: {
|
||||
dashboardControls:
|
||||
'<span class="icon-edit dashboard-edit-button"></span>' +
|
||||
'<span class="icon-add dashboard-add-button"></span>',
|
||||
widgetControls:
|
||||
'<div class="item-controls-left">' +
|
||||
'<a href="#" class="resize" data-width="1" data-height="1">1x1</a>' +
|
||||
'<a href="#" class="resize" data-width="1" data-height="2">1x2</a>' +
|
||||
'<a href="#" class="resize" data-width="2" data-height="1">2x1</a>' +
|
||||
'<a href="#" class="resize" data-width="2" data-height="2">2x2</a>' +
|
||||
'</div>' +
|
||||
'<div class="item-controls-right">' +
|
||||
'<span class="icon-settings"></span>' +
|
||||
'<span class="icon-move"></span>' +
|
||||
'</div>'
|
||||
},
|
||||
|
||||
init: function () {
|
||||
if ($('#dashboard').length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
me.elem.$dashboards = $('.dashboard');
|
||||
me.initDashboards();
|
||||
me.fillDashboardControls();
|
||||
|
||||
me.fillWidgetControls();
|
||||
|
||||
me.setGridLayout();
|
||||
|
||||
me.initDashboardDialog();
|
||||
me.initWidgetDialog();
|
||||
|
||||
me.registerEvents();
|
||||
},
|
||||
|
||||
registerEvents: function () {
|
||||
|
||||
$(window).on('resize', function () {
|
||||
me.debounce(me.setGridLayout, 250);
|
||||
});
|
||||
|
||||
$(document).on('click', '.item-controls .icon-settings', function (e) {
|
||||
e.preventDefault();
|
||||
me.elem.$widgetDialog.dialog('open');
|
||||
});
|
||||
|
||||
$(document).on('click', '.item-controls .resize', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var $elem = $(this);
|
||||
var $item = $elem.parents('.item');
|
||||
var width = parseInt($elem.data('width'));
|
||||
var height = parseInt($elem.data('height'));
|
||||
var newAspectRatio = width / height;
|
||||
|
||||
$item.removeClass('item-width-2').removeClass('item-height-2');
|
||||
|
||||
if (width > 1) {
|
||||
$item.addClass('item-width-' + width);
|
||||
}
|
||||
if (height > 1) {
|
||||
$item.addClass('item-height-' + height);
|
||||
}
|
||||
|
||||
var $chart = $item.find('canvas');
|
||||
var graphId = $chart.data('graph-id');
|
||||
var graph = ChartHelper.getChart(graphId);
|
||||
|
||||
if (typeof graph === 'object') {
|
||||
graph.aspectRatio = newAspectRatio;
|
||||
graph.update();
|
||||
}
|
||||
|
||||
me.refreshGridLayouts();
|
||||
});
|
||||
|
||||
$(document).on('click', '.dashboard-edit-button', function () {
|
||||
me.elem.$dashboadDialog.dialog('open');
|
||||
});
|
||||
|
||||
$(document).on('click', '.dashboard-add-button', function () {
|
||||
alert('TODO');
|
||||
});
|
||||
},
|
||||
|
||||
initDashboards: function () {
|
||||
me.elem.$dashboards.each(function (index, container) {
|
||||
var grid = new Muuri(container, {
|
||||
items: '.item',
|
||||
dragEnabled: true,
|
||||
dragStartPredicate: {
|
||||
distance: 0,
|
||||
delay: 0,
|
||||
handle: '.icon-move'
|
||||
},
|
||||
dragSort: function () {
|
||||
return me.storage.dashboards;
|
||||
},
|
||||
dragSortPredicate: {
|
||||
action: 'move',
|
||||
threshold: 50
|
||||
},
|
||||
layout: {
|
||||
fillGaps: true, // Default: false
|
||||
horizontal: false,
|
||||
alignRight: false,
|
||||
alignBottom: false,
|
||||
rounding: true // true für relative Abmessungen; false für absolute Abmessungen besser
|
||||
},
|
||||
layoutOnInit: true,
|
||||
layoutOnResize: 200
|
||||
});
|
||||
|
||||
/*grid.on('layoutEnd', function () {
|
||||
console.log('layoutEnd');
|
||||
//me.resizeTitle();
|
||||
});*/
|
||||
|
||||
me.storage.dashboards.push(grid);
|
||||
});
|
||||
},
|
||||
|
||||
fillDashboardControls: function () {
|
||||
var $controls = $('.dashboard .dashboard-controls');
|
||||
$controls.each(function () {
|
||||
$(this).html(me.template.dashboardControls);
|
||||
});
|
||||
},
|
||||
|
||||
fillWidgetControls: function () {
|
||||
var $controls = $('.dashboard .item-controls');
|
||||
$controls.each(function () {
|
||||
$(this).html(me.template.widgetControls);
|
||||
});
|
||||
},
|
||||
|
||||
setGridLayout: function () {
|
||||
var windowWidth = $(window).width();
|
||||
var $dashboards = $('.dashboard');
|
||||
|
||||
if (windowWidth < 1080) {
|
||||
$dashboards.addClass('halfsize');
|
||||
} else {
|
||||
$dashboards.removeClass('halfsize');
|
||||
}
|
||||
|
||||
me.refreshGridLayouts();
|
||||
},
|
||||
|
||||
refreshGridLayouts: function () {
|
||||
me.storage.dashboards.forEach(function (dashboard) {
|
||||
dashboard.refreshItems();
|
||||
dashboard.layout();
|
||||
});
|
||||
|
||||
$('.xx-large').fitText(.5);
|
||||
},
|
||||
|
||||
initDashboardDialog: function () {
|
||||
me.elem.$dashboadDialog = $('#dashboard-dialog').dialog({
|
||||
title: 'Dashboard-Einstellungen',
|
||||
modal: true,
|
||||
minWidth: 900,
|
||||
closeOnEscape: false,
|
||||
autoOpen: false,
|
||||
resizable: false
|
||||
});
|
||||
},
|
||||
|
||||
initWidgetDialog: function () {
|
||||
me.elem.$widgetDialog = $('#widget-dialog').dialog({
|
||||
title: 'Widget-Einstellungen',
|
||||
modal: true,
|
||||
minWidth: 500,
|
||||
closeOnEscape: false,
|
||||
autoOpen: false,
|
||||
resizable: false
|
||||
});
|
||||
},
|
||||
|
||||
updateChartAspectRatio: function (chart, aspectRatio) {
|
||||
chart.options.aspectRatio = aspectRatio;
|
||||
chart.update();
|
||||
},
|
||||
|
||||
resizeTitle: function () {
|
||||
var $titleElements = $('.dashboard .title');
|
||||
$titleElements.each(function () {
|
||||
var $title = $(this);
|
||||
var $dashboard = $title.parent();
|
||||
var dashboardWidth = $dashboard.width();
|
||||
var columnCount = Math.floor(dashboardWidth / 210);
|
||||
var titleWidthCalc = columnCount * 210;
|
||||
$title.outerWidth(titleWidthCalc - 10);
|
||||
});
|
||||
},
|
||||
|
||||
debounce: function (callback, delay) {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
|
||||
clearTimeout(me.storage.debounceTimer);
|
||||
me.storage.debounceTimer = setTimeout(function () {
|
||||
callback.apply(context, args);
|
||||
}, delay || 250);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
init: me.init
|
||||
};
|
||||
|
||||
})(jQuery, ChartHelper);
|
||||
|
||||
$(document).ready(Dashboard.init);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,43 @@
|
||||
/*global jQuery */
|
||||
/*!
|
||||
* FitText.js 1.2
|
||||
*
|
||||
* Copyright 2011, Dave Rupert http://daverupert.com
|
||||
* Released under the WTFPL license
|
||||
* http://sam.zoy.org/wtfpl/
|
||||
*
|
||||
* Date: Thu May 05 14:23:00 2011 -0600
|
||||
*/
|
||||
|
||||
(function ($) {
|
||||
|
||||
$.fn.fitText = function (kompressor, options) {
|
||||
|
||||
// Setup options
|
||||
var compressor = kompressor || 1,
|
||||
settings = $.extend({
|
||||
'minFontSize': Number.NEGATIVE_INFINITY,
|
||||
'maxFontSize': Number.POSITIVE_INFINITY
|
||||
}, options);
|
||||
|
||||
return this.each(function () {
|
||||
|
||||
// Store the object
|
||||
var $this = $(this);
|
||||
|
||||
// Resizer() resizes items based on the object width divided by the compressor * 10
|
||||
var resizer = function () {
|
||||
$this.css('font-size', Math.max(Math.min($this.width() / (compressor * 10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
|
||||
};
|
||||
|
||||
// Call once to set.
|
||||
resizer();
|
||||
|
||||
// Call on resize. Opera debounces their resize by default.
|
||||
$(window).on('resize.fittext orientationchange.fittext', resizer);
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user