Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

ember-gridstack

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-gridstack

Ember Gridstack


Version published
Weekly downloads
3.4K
decreased by-11.77%
Maintainers
3
Weekly downloads
 
Created

ember-gridstack

Travis

Ember components to build drag-and-drop multi-column grids powered by gridstack.js

Compatibility

  • Ember.js v3.12 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above

Installation

ember install ember-gridstack

Ember <= 2.4

ember install ember-assign-polyfill

Basic Usage

{{#grid-stack
  options=(hash animate=true)
  onChange=(action 'change')
}}
  {{#grid-stack-item
     options=(hash x=0 y=0 width=6 height=2)
  }}
    Widget #1
  {{/grid-stack-item}}
  {{#grid-stack-item
     options=(hash x=6 y=0 width=6 height=2)
  }}
    Widget #2
  {{/grid-stack-item}}
{{/grid-stack}}

Components

{{grid-stack}}

Used to construct a grid-stack layout

Options

{{grid-stack}} can take an options object attribute to configure the grid. All gridstack grid options are valid and take the form data-gs-{option}. However, when using {{grid-stack}} the data-gs is omitted.

Example:

{{#grid-stack
  options=(hash
    animate=true
    column=12
    maxRow=10
  )
}}
  ...
{{/grid-stack}}

The full list of options can be found here: https://github.com/troolee/gridstack.js/tree/master/doc#grid-attributes

Actions

All gridstack events can be handled as Ember actions. They take the form on{Eventname}.

Example:

{{#grid-stack
  onDragstart=(action 'dragStart')
  onDragstop=(action 'dragStop')
  onResizestart=(action 'resizeStart')
  onResizestop=(action 'resizeStop')
  onAdded=(action 'added')
  onChange=(action 'change')
  onEnable=(action 'enable')
  onRemoved=(action 'remove')
}}

The full list of events can found here: https://github.com/troolee/gridstack.js/tree/master/doc#events

Block Form

The {{grid-stack}} component uses the block form to yield {{grid-stack-item}} components. In addition, {{grid-stack}} yields a reference to itself in the case inner components need the reference or would like to listen to events triggered on the grid element.

Example:

{{#grid-stack as |grid|}}
  {{#grid-stack-item
     options=(hash x=0 y=0 width=6 height=2)
  }}
    Widget #1
  {{/grid-stack-item}}
{{/grid-stack}}

{{grid-stack-item}}

Used to construct a grid item inside a {{grid-stack}} component

Options

{{grid-stack-item}} can take an options object attribute to configure the grid item. All gridstack item options are valid and take the form data-gs-{option}. However, when using {{grid-stack-item}} the data-gs is omitted.

Example:

{{#grid-stack-item
  options=(hash
    width=4
    height=4
    x=0
    y=0
    noMove=true
  )
}}
  ...
{{/grid-stack}}

The full list of options can be found here: https://github.com/troolee/gridstack.js/tree/master/doc#item-attributes

Block Form

The {{grid-stack-item}} component uses the block form to yield the content of the item. In addition, {{grid-stack-item}} yields a reference to itself in the case inner components need the reference or would like to listen to events triggered on the grid.

Example:

{{#grid-stack-item
   options=(hash x=0 y=0 width=6 height=2)
   as |item|
}}
  {{custom-component
    parentContainer=item
  }}
{{/grid-stack-item}}
//custom-component.js
export default Ember.Component.extend({
  didInsertElement() {
    this._super(...arguments);
    this.get('parentContainer').$().on('resizestop', () => {
      //handle resize
    });
  }
});

Touch Support

For touch support do the following

ember-grid-stack < 2.x

By default, the bower dependencies for Gridstack will be installed automatically.

Exclude Optional Dependencies

You can exclude the optional jquery.ui.touch-punch dependency by using the following configuration in your config/environment.js:

// config.environment.js
module.exports = function(environment) {
  return {
    'ember-gridstack': {
      // Exclude the optional jquery.ui.touch-punch dependency
      exclude: ['jquery.ui.touch-punch']
    }
  };

ember-grid-stack >= 2.x

npm install jquery.ui.touch-punch
  • Verify the installed path and include the package in your index.js
// config.environment.js
app.import({
  development: 'node_modules/jquery.ui.touch-punch/jquery.ui.touch-punch.js',
  production: 'node_modules/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js'
});

FAQs

Package last updated on 04 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts