1

I have seen this done on several web pages (for example fitbit) where a widget is flipped to display new information when it is clicked.

I was wondering whether anyone could give me some help on how to achieve this or provide a code sample of it.

Thank you for any help or tips.

mpals
  • 121
  • 3
  • 15

1 Answers1

2

You can do it setting an attribute on your widget's Coffescript starting it with false and bind a toggle function using data-event-click on your view. That will toggle the value of your attribute. Them, you put what you want to show and hide on two containers and bind that attribute on them, using data-hideif='attributeName' on the container you want to hide when raise a click event on your widget and using data-showif='attributeName' on the container you want to show when raise the click event.

So, your coffescript would become something like:

class Dashing.ToggleableWidget extends Dashing.Widget
  toggleDetails: -> 
    @set('showDetails', !@showDetails)

# you could still use accessor with:
# @accessor 'toggleDetails',
#   get: -> @set('showDetails', !@showDetails)
#   cache: false 
# 
# ... but it is not necessary, and using a normal function will solve your problem

  ready: -> 
    @showDetails = false

And your view would become something like:

<div class="status-accounts" data-event-click="toggleDetails">
  <div class="summary" data-hideif="showDetails" data-bind="summary"></div>
  <div class="details" data-showif="showDetails">
    <div class="account" data-foreach-account='accounts' data-bind-title='account.status'>
      <span class="name" data-bind="account.account_name | append ' - '"></span>
      <span class="status" data-bind="account.status | truncate 3, ''"></span>
    </div>
  </div>
</div>

With that, when your widget be rendered (or re-rendered after changing data), it will show your summary container, and if you click, it will show your details container.

cefigueiredo
  • 738
  • 3
  • 12
  • Thank you so much for your answer, it helped me greatly. I have one issue and one question though. I have used more or less exactly the code you gave me (without the account stuff) and the first "page" does not re-render when I click the widget again. It seems like it should since showDetails should be false again when the widget has been clicked twice. Also is there a way to differentiate between a drag and a click so that the on click method does not activate when the widget is dragged to another position? – mpals Sep 18 '14 at 10:14
  • Ok it seems like the toggle details function only triggers once...Why is this? – mpals Sep 18 '14 at 10:33
  • I think that I misunderstood the accessor behaviour. Or at least his default behaviour, because it has a cache that when you bind accessors with data-bind, it prevents to re-execute every time and executes once until some of theirs variables changes (at least when you call that attributes with @get). That cache can be disabled, but on your case it would be better implement the function as a normal function. I 'm gonna edit my answer for that. – cefigueiredo Sep 20 '14 at 22:08