Web Component: j-Dashboard


  • Info
  • HTML
  • JS
  • CSS
  • Meta

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 method function(meta) {}, is executed if someone drops some element into area
    • meta.x X grid position
    • meta.y Y grid position
    • meta.el dragged element
    • meta.pageX
    • meta.pageY
    • meta.offsetX
    • meta.offsetY
    • meta.target
    • meta.d a display mode xs, sm, md or lg
  • noemitresize disables executing of resize method in all nested component (default: false)
  • parent {String} a parent container which sets a minimal height (default: null)
  • minsizexs {Number} a minimal column/row size for extra small displays (default: 2)
  • minsizesm {Number} a minimal column/row size for small displays (default: 2)
  • minsizemd {Number} a minimal column/row size for mediun displays (default: 1)
  • minsizelg {Number} a minimal column/row size for large displays (default: 1)
  • iconsettings {String} settings icon
  • iconremove {String} remove icon
  • change {String} a path to the method function(type, id) (executed if the dashboard captures a change move or remove)
  • animation {Number} style of animation:
    • 1 opacity
    • 2 scale from big to normal
    • 3 scale from small to normal (default)
    • 4 rotation Z
    • 5 changing of X position
    • 6 changing of Y position
  • grid {Boolean} renders background grid (default: false)
// 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, resizeX: true, resizeY: true, resizeP: false, settings: true },
    // resizeP means: resize "proportionally"

    // 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,
    // reset: true, // NEW: reloads the component again
    // class: String // adds a class to the item

    make: function(exports, config, el) {

        // @exports {Object}
        // @config {Object}
        // @el {jQuery} a content of the component

        // Handlers (optional):
        exports.destroy = function() {
            // @el {jQuery} a content of the component
            // @this {Instance}

            // is executed when the component is destroyed
        };

        exports.data = function(data, el) {
            // @data {Object}
            // @this {Instance}
            // @el {jQuery} a content element of the component
            // It can be executed via SETTER('dashboard/send', ....)
        };

        exports.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
        };

        exports.focus = function() {
            // Optional, when the "window" is focused the delegate will be executed
        };

        exports.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}
        };

        exports.settings = function(config, el, elbtn) {
            // @config {Object}
            // @el {jQuery} a content element of the component
            // @elbtn {jQuery} button element
            // is executed when the users clicks on the settings icon
        };

        exports.remove = function(remove) {
            // remove {Function} removes that widget
            remove();
        };

        exports.configure = function(config) {
            // @config {Object}
            // is executed when the configuration is changed
        };

        // 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
    }
};

PUSH('components', component);

Methods:

  • SETTER('dashboard/send', id, body) sends data to all widgets which contain data delegate
    • id {String}
      • null sends to all components
      • @component sends to the specific components according to the component name
      • string sends to a specific component according to the identifier
  • SETTER('dashboard/call', method_name, [a], [b], [c], [d]) executes a method in each widget
  • RETURN('dashboard/pixel') returns a size of the pixel (square)
  • RETURN('dashboard/display') returns a current display width

Good to know:

  • 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/height
    • d_vertical the component has only 1 step of width and more than 1 steps of height
    • d_horizontal the component has only 1 step of height and more than 1 steps of width

Author