Initial xentral_oss_20.3.c9ffacf

classes/Modules/Dashboard/www/js/dashboard.js

@@ -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);

classes/Modules/Dashboard/www/js/jquery.fittext.js

@@ -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);