Web UI component: j-Dashboard
j-Dashboard
- Works only with
+v18
- Supports mobile devices
- Supports touches
- Movable
- Draggable
- Resizable
The component expects Array
of objects.
Configuration:
axisX
{Number} a size of grid of X axis (default:12
)axisY
{Number} a size of grid of Y axis (default:144
)padding
{Number} a padding between widgets (default:10
)delay
{Number} init delay (default:200
)serviceinterval
{Number} a service interval (default:5000
)ondrop
{String} a path to methodfunction(meta) {}
, is executed if someone drops some element into areameta.x
X grid positionmeta.y
Y grid positionmeta.el
dragged elementmeta.pageX
meta.pageY
meta.offsetX
meta.offsetY
meta.target
meta.d
a display modexs
,sm
,md
orlg
noemitresize
disables executing ofresize
method in all nested component (default:false
)parent
{String} a parent container which sets a minimal height (default:null
)
// Component declaration
var component = {
// Component ID
id: 'COMPONENT_ID',
// Positioning
// You can define specific display size and if the display size is not specified then the component tries to find a size for larger display
offset: {
xs: { x: 1, y: 1, width: 6, height: 6 }, // Number means the position in the grid, so e.g. width "2" takes "2" columns in X axis
lg: { x: 1, y: 1, width: 6, height: 6 }
},
html: 'THE CONTENT OF COMPONENT', // or can be raw HTMLElement
// Default settings
actions: { move: true, remove: true, resize: true, settings: true },
// Can disable header (default: true)
header: true,
// Can delay displaying (in "ms", default: config.delay)
delay: 0,
// A component title
title: 'Title for the component',
// Custom properties which will be assigned to the instance
template: Object,
config: Object,
// Handlers (optional):
destroy: function() {
// @el {jQuery} a content of the component
// @this {Instance}
// is executed when the component is destroyed
},
make: function(meta, el) {
// @el {jQuery} a content of the component
// @this {Instance}
// this.meta {Object} a reference to component object
// this.element {jQuery} a content element of the component
// this.container {jQuery} a main content element of the component
// this.main {Object} a reference to Dashboard component
// this.width {Number} a width of "this.element"
// this.height {Number} a height of "this.element"
// this.display {String} a current display size "xs", "sm", "md" or "lg"
// is executed when the component is making
},
data: function(type, data, el) {
// @type {String}
// @data {Object}
// @this {Instance}
// @el {jQuery} a content element of the component
// is executed when data are sent via SETTER('dashboard', 'send', 'TYPE', 'DATA')
},
settings: function(config, el) {
// @config {Object}
// @el {jQuery} a content element of the component
// is executed when the users clicks on the settings icon
},
resize: function(width, height, el, display) {
// @width {Number}
// @height {Number}
// @el {jQuery} a content of the component
// @display {String} a current display size "xs", "sm", "md" or "lg"
// @this {Instance}
// is executed when the component is resized
// @this {Instance}
},
service: function(counter, el) {
// @counter {Number} count of calls
// @el {jQuery} a content of the component
// @this {Instance}
// dashboard will execute this handler each 5 seconds
}
};
PUSH('components', component);
Methods:
SETTER('dashboard/send', type, body)
sends data to all widgets which containdata
delegate
Good to know:
- each component (in the Dashboard) contains
d-COMPONENTNAME
class - component adds classes to component's body:
d_colNUMBER
determins count of taken columns e.g.d_col2
d_rowNUMBER
determins count of taken rows e.g.d_row3
d_square
the component has same width/heightd_vertical
the component has only 1 step of width and more than 1 steps of heightd_horizontal
the component has only 1 step of height and more than 1 steps of width
Author
- Peter Širka petersirka@gmail.com
- License
Created
12. october 2019
Updated
18. november 2020
Version
v1
License
https://www.totaljs.com/license/
Dark mode
Yes
Responsive
Yes
Author
Peter Širka
Email
petersirka@gmail.com
