Plum Landing UGC Widget

plum.coffee

class Dashing.Plum extends Dashing.Widget
 
  ready: ->
    container = $(@node).parent()
    @width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
    @height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
    @currentIndex = 0
    @imgElem = $(@node).find('.plum-image')
    @nextPhoto()
    @startCarousel()
    $(@node).find('.plum-image-holder').css('height', @height)
    $(@node).find('.plum-image-holder').css('width', @width)
 
  onData: (data) ->
    @currentIndex = 0
 
  startCarousel: ->
    setInterval(@nextPhoto, 10000)
 
  nextPhoto: =>
    photos = @get('photos')
    if photos
      @currentIndex = (@currentIndex + 1) % photos.length
      preloaded = new Image()
      preloaded.src = photos[@currentIndex].photo
      preloaded.onload = =>
        @imgElem.fadeOut =>
          @set 'current_photo', photos[@currentIndex]
          if @imgElem.height() < @imgElem.width()
            @imgElem.css('height', @height)
            @imgElem.css('width', 'auto')
          else
            @imgElem.css('width', @width)
            @imgElem.css('height', 'auto')
          $(@node).find('.plum-image-position').css('top', (-(100 - (@height / @imgElem.height() * 100))) + '%')
          @imgElem.css('top', (100 - (@height / @imgElem.height() * 75)) + '%')
          $(@node).find('.plum-image-position').css('left', (-(100 - (@imgElem.width() / @width * 100))) + '%')
          @imgElem.css('left', (100 - (@imgElem.width() / @width * 100)) + '%')
          @imgElem.fadeIn()

plum.html

<div class="plum-image-holder">
    <div class="plum-image-position">
        <!-- <img class="plum-image" data-bind-src='current_photo.photo'/> -->
        <img class="plum-image" data-bind-src='current_photo.photo'/>
    </div>
</div>

plum.rb

require 'json'
require 'net/http'

baseurl = "http://pbskids.org"
response = Net::HTTP.get_response("pbskids.org","/plumlanding/backend/missions/?limit=10")
raw_missions = response.body
missions = JSON.parse(raw_missions)

SCHEDULER.every '10m', :first_in => 0 do |job|
    image_urls = []
    submitted_images = []
    missions["missions"].each do |m|
        image_urls.push(baseurl + m["submission"]["image"])
        image_urls.each do |url|
            submitted_images.push( { "photo" => url } )
        end
    end
    send_event('plum_submissions',  photos: submitted_images)
end

plum.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #222222;

// ----------------------------------------------------------------------------
// Widget styles
// ----------------------------------------------------------------------------

.plum-image-holder {
  position: relative;
  text-align: center;
  overflow: hidden;
  border-radius: 0px;
  // border-radius: 12px;
  background-color: $background-color;
}
 
.plum-image-position {
  position: absolute;
}
 
.plum-image {
  max-width: none;
  position: relative;
}