Expandable Widget for Dashing.io

README.md

An expandable widget base type for Dashing.io

Usage

Add data-expsizex and data-expsizey to the widget <li> tag:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-expsizex="2" data-expsizey="2">

When the mouse cursor moves over the widget, it expands to the size specified in these attributes. Also, the onExpand() method of the widget class gets called. When the mouse leaves the widget, its size gets back to the original, and the onReduce() method gets called.

Example

A bit stupid, but working example may be:

class MyWidgetClass extends Dashing.ExpandingWidget
  onData: (data) ->
    @exp_color = data.exp_color
    @color = data.color
    $(@node).css("background-color", data.color)

  onExpand: ->
    $(@node).css("background-color", @exp_color)

  onReduce: ->
    $(@node).css("background-color", @color)

This accepts color and exp_color in the incoming data, and assigns the normal background color immediately. When the widget is expanded, exp_color is set as the background.

resizeable-widget.coffee

class Dashing.ExpandingWidget extends Dashing.Widget
  @::on 'ready', ->
    @g = $('.gridster ul:first').gridster().data('gridster')
    dset = $(@node).parent()[0].dataset

    if dset.expsizex or dset.expsizey
      @orig_data = {
        "row": dset.row,
        "col": dset.col,
        "height": dset.sizey,
        "width": dset.sizex,
        "exp_height": dset.expsizey,
        "exp_width": dset.expsizex,
      }

      $(@node).parent().on 'mouseenter', null, this, (event) ->
        event.data.fire('expand')

      $(@node).parent().on 'mouseleave', null, this, (event) ->
        event.data.fire('reduce')

  @::on 'expand', ->
    widget_li = $(@node).parent()
    @g.resize_widget(widget_li, @orig_data.exp_width, @orig_data.exp_height)
    widget_li[0].dataset.row = @orig_data.row
    widget_li[0].dataset.col = @orig_data.col
    @onExpand()
            
  @::on 'reduce', ->
    widget_li = $(@node).parent()
    @g.resize_widget(widget_li, @orig_data.width, @orig_data.height)
    widget_li[0].dataset.row = @orig_data.row
    widget_li[0].dataset.col = @orig_data.col
    @onReduce()
        
  onExpand: =>
    # Widgets should override this to run stuff when the widget is expanded
        
  onReduce: =>
    # Widgets should override this to run stuff when the widget is reduced