README.md

World Clock

Description

A simple widget that's capable of displaying time for multiple locations around the world. Useful for displaying time in different offices for a multinational company.

Installation

1. Download moment.js 2.5.1 from MomentJS,

2. Download moment-timezone.js 0.0.3 from Moment Timezone.

3. Build the timezone data for locations you are interested in: http://momentjs.com/timezone/data/ and save the data file as moment-timezone-data.js. Note that for the timezone configuration shown below to work, you will need to include timezone data of Asia, America and Europe when building moment-timezone-data.js.

4. Put all the downloaded files in your /assets/javascripts directory.

5. Include them in application.coffee in the following order:

#= require moment.min
#= require moment-timezone.min
#= require moment-timezone-data

6. The files world_clock.coffee, world_clock.html and world_clock.scss go in the /widget/world_clock directory.

7. Last but not least, add the widget html to your dashboard:

<li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
  <div data-view="WorldClock" class="widget widget-world-clock" data-primary="SG" data-config='{"SG":"Asia/Singapore","JK":"Asia/Jakarta","SF":"America/Los_Angeles","NYC":"America/New_York","EDH":"Europe/London"}'></div>
</li>

Options

If you'd like the clock to be inverted, just add the inverted class ...

  <div data-view="WorldClock" class="widget widget-world-clock inverted" data-primary="SG" data-config='{...}'></div>

You can change the start/end hours using data-hours-start and data-hours-end respectively ...

  <div data-view="WorldClock" class="widget widget-world-clock" data-hours-start="6" data-hours-end="15" data-primary="SG" data-config='{...}'></div>

world_clock.coffee

class Dashing.WorldClock extends Dashing.Widget

  constructor: (context) ->
    # pull the config from the widget
    config = $(context.node).data 'config'

    # map the data into something the bindings can use
    locations = ({
      zone: zone
      display_location: name
      display_class: name.replace /[ :]/g, '_'
    } for name, zone of config)

    # pull primary location from widget definition and put it in the data
    @primary = $(context.node).data 'primary'
    location.primary = true for location in locations when location.display_location is @primary

    @mixin
      locations: locations

    # hook up batman
    super


  startClock: ->
    for location in @locations
      date = moment().tz(location.zone)
      # don't show seconds since we don't update at that frequency
      location.time = [date.hours(), date.minutes()].map (n)->
        ('0' + n).slice(-2)
      .join(':')
      minutes = 60 * date.hours() + date.minutes()
      totalWidth = document.querySelector('.hours').clientWidth - 1
      offset = (minutes / (24.0 * 60)) * totalWidth

      clock = $(".#{location.display_class}", @node).get 0
      if(clock)
        ['-webkit-transform', '-moz-transform', '-o-transform', '-ms-transform', 'transform'].forEach (vendor) ->
          clock.style[vendor] = "translateX(" + offset + "px)"

          if(location.primary)
            @set('time', location.time)
        , @

    setTimeout @startClock.bind(@), 4000

  setupHours: ->
    hoursMin = $(@node).data('hours-start') ? 7
    hoursMax = $(@node).data('hours-end') ? 19
    hours = []
    for h in [0..23]
      do (h) ->
        hours[h] = {}
        hours[h].dark = h< hoursMin || h>= hoursMax
        hours[h].name = if h == 12 then h else h%12
    @set('hours', hours)

  ready: ->
    @setupHours()
    @startClock()

world_clock.html

<ul class="hours">
  <li data-foreach-hour="hours" data-bind="hour.name" data-addclass-dark="hour.dark"></li>
</ul>
<ul class="locations">
  <li data-foreach-location="locations" data-addclass-primary="location.primary" data-bind-class="location.display_class">
    <div class="placeholder top" data-addclass-primary="location.primary"></div>
    <div class="label" >
      <div class="location" data-source="location.display_location" data-hideif="location.primary"></div>
      <div class="location local" data-source="time" data-showif="location.primary"></div>
    </div>
    <div class="placeholder bottom" data-addclass-primary="location.primary"></div>
  </li>
</ul>

world_clock.scss

.widget.widget-world-clock {
  $dark-text: #333;
  $dark-background: grey;
  font-size: 2em;
  padding-top: 55px;

  > ul li {
    box-sizing: border-box;
    display: inline-block;
    color: $dark-text;

    &.primary {
      font-size: 2em;
      margin-top: -185px;

      .location {
        margin-bottom: -10px;
      }

      .placeholder {
        background: white;
      }
    }
  }

  .hours {
    li {
      background: white;
      width: 4.16%;

      &:not(:last-child) {
        border-right: 1px solid;
      }
    }

    .dark {
      background: $dark-background;
      color: white;
    }
  }

  .locations {
    text-align: left;

    li {
      position: absolute;
    }

    .placeholder {
      height: 30px;
      width: 2px;
      background: $dark-background;

      &.top.primary {
        display: none;
      }

      &.bottom {
        display: none;
        &.primary {
          display: inherit;
        }
      }
    }

    .label {
      position: relative;
      color: $dark-background;

      .location {
        margin-left: -50%;
        &.local {
          color: white;
        }
      }

      .minute {
        position: absolute;
        top: 0;
      }
    }
  }
}

.widget.widget-world-clock.inverted {
  padding-top: 0px;

  .location.local {
    margin-top: -10px;
  }

  > ul li {
    &.primary {
      margin-top: 0px;
    }
  }

  .locations {
    li {
      margin-top: -140px;
    }

    .placeholder {
      &.top {
        display:none;
        &.primary {
          display: inherit;
        }
      }

      &.bottom {
        display: inherit;
        &.primary {
          display: none;
        }
      }
    }
  }
}