Jump To …

statistics.coffee

src/settings/

class window.StatisticsPlugin extends window.LimePlugin
  init: ->
    @name = 'StatisticsPlugin'
    annotation = undefined
    console.info "Initialize StatisticsPlugin"

insert widget click function

    $("div .stats").click => #click behaviour - highlight the related widgets by adding a class to them
      @lime.player.pause()
      @displayStatisticsInModal()

  renderStatisticsInModalWindow: ->
    result = "<div class=\"statistic\" ><img src=\"img/stats.png\" style=\"width: 90%;  display:block; /*images must be set to block in order use auto margins*/ margin:0 auto; /*centers images in most browsers*/   text-align:center; /*centers images in older browsers*/\" /></div>";
    modalContent = $("#modalContent");
    modalContent.css('overflow','auto');
    modalContent.append(result);

  displayStatisticsInModal: -> # Modal window script usin jquery

Get Modal Window var modalcontainer;

    if @lime.player.isFullScreen
      modalcontainer = $(".modalwindow")
    else
      modalcontainer = $("#modalWindow")

Get mask element

    mask = undefined
    if @lime.player.isFullScreen
      mask = $(".mask")
    else
      mask = $("#mask")
    $(modalcontainer).css "height", "70%"
    $(modalcontainer).css "max-height", "1200px"
    $(modalcontainer).empty()
    $(modalcontainer).append "<a href=\"#\" class=\"close\" role=\"button\"><img src=\"img/close-icon.png\" style=\"width: 22px; height: 22px;\"/></a>"
    $(modalcontainer).append "<div id=\"modalContent\" style=\"height: 95%; width: 100%; position: relative; margin: 0 auto; color: black; \"> &nbsp"

$(modalcontainer).append("

" + "

" + locationName + "

" + " lat: " + latitude + "; long: " + longitude + "

");

    $(modalcontainer).append "</div>"

console.log("$(modalcontainer) = " + $(modalcontainer).html() + " modalcontainer " + modalcontainer.html());

Get the screen height and width

    maskHeight = $(window).height()
    maskWidth = $(window).width()

Set heigth and width to mask to fill up the whole screen

    $(mask).css
      width: maskWidth
      height: maskHeight

transition effect

    $(mask).fadeIn 100
    $(mask).fadeTo "fast", 0.8

Get the window height and width

    winH = $(window).height()
    winW = $(window).width()

Set the popup window to center

    $(modalcontainer).css "top", winH / 2 - $(modalcontainer).height() / 2
    $(modalcontainer).css "left", winW / 2 - $(modalcontainer).width() / 2

transition effect

    $(modalcontainer).fadeIn 100

if close button is clicked

    $(".close").click (e) =>

Cancel the link behavior

      e.preventDefault()
      $(mask).hide()
      $(modalcontainer).hide()

if mask is clicked

    $(mask).click (e) =>
      $(mask).hide()
      $(modalcontainer).hide()
      $(modalcontainer).empty()

    $(window).resize (e) =>

var box = modalcontainer;

Get the screen height and width

      maskHeight = $(document).height()
      maskWidth = $(document).width()

Set height and width to mask to fill up the whole screen

      $(mask).css
        width: maskWidth
        height: maskHeight

Get the window height and width

      winH = $(window).height()
      winW = $(window).width()

Set the popup window to center

      $(modalcontainer).css "top", winH / 2 - $(modalcontainer).height() / 2
      $(modalcontainer).css "left", winW / 2 - $(modalcontainer).width() / 2

box.blur(function() { setTimeout(, 100); });

    @renderStatisticsInModalWindow()

LIME - Linked Media Player