htmlcsssassdashing

Dashing.io Widget with a marquee


iam working with dashing.io and i want to build a widget with a marquee. I did a marquee with css animation and html (http://jsfiddle.net/oLLzsyud/). It works with that, but it got it the widget like that: sccs:

    .widget-marquee {
    background: #004894;
    $color_celeste_approx: #cccccc;

    .marquee {
        width: 200px;
        margin: auto;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        border: solid 1px $color_celeste_approx;
        animation: marquee 10s linear infinite;
        &:hover {
            animation-play-state: paused;
        }
    }

    @keyframes marquee {
        100% {
            text-indent: -100%;
        }
        0% {
            text-indent: 100%;
        }
    }
}

html:

<div class="marquee">
    <span data-bind="stoer"></span>
</div>

In dashing it is shown like this and doesnt move

I didnt touch the coffee script. It is default from the widget generation.

I didnt see what is wrong and why it isnt working in dashing. Maybe someone here knows why it isnt working in dashing, but with css and html on a normal page.

Thank you for your answers.


Solution

  • I got it by myself. I just put the marqueere into the html file:

        <style>
    .marquee {
      width: 1500px;
      margin: auto;
      padding: 2px;
      overflow: hidden;
      white-space: nowrap;
      border: solid 1px #cccccc;
      animation: marquee 10s linear infinite;
    }
    
    .marquee:hover {
      animation-play-state: paused;
    }
    
    @keyframes marquee {
      100% {
        text-indent: -125%;
      }
      0% {
        text-indent: 125%;
      }
    }
    </style>
    
    <div class="marquee">
        <span data-bind="status"></span>
    </div>
    

    And the data is read in the coffeescript file:

    class Dashing.Marquee extends Dashing.Widget
    
      statusalt = [" "]
      Array::unique = ->
        output = {}
        output[@[key]] = @[key] for key in [0...@length]
        value for key, value of output
    
      ready: ->
        # This is fired when the widget is done being rendered
    
      onData: (data) ->
        # Handle incoming data
        # You can access the html node of this widget with `@node`
        # Example: $(@node).fadeOut().fadeIn() will make the node flash each time data comes in.
    
        statusneu = [
          @get('bsm') + " +++ ",
          @get('stoer') + " +++ ",
          @get('lzeit') + " +++ ",
          @get('sla') + " +++ ",
          @get('bkob') + " +++ ",
          @get('major') + " +++ ",
          @get('probl') + " +++ ",
          @get('fulfil') + " +++ ",
          @get('bm') + " +++ ",
          @get('bk') + " +++ ",
          @get('pm') + " +++ ",
          @get('fianz') + " +++ ",
        ]
        statusfilter = statusneu.filter (x) -> x !=  "undefined +++ "
    
        if statusfilter is statusalt
          status = statusalt.toString().split(",").join(" ")
        else
          statusneu= statusfilter.concat statusalt
          status = statusneu.unique().toString().split(",").join(" ")
          statusalt = statusfilter
    
        @set 'status', status.concat(@get('updatedAtMessage') + " +++ ")
    

    Its maybe not the best solution, but it works on my dashboard. The scss just does an blue background.