overlay_me 0.12.0

data/javascripts/menu.js.coffee

@@ -0,0 +1,29 @@
+#= require 'draggable'
+
+if OverlayMe.mustLoad()
+
+  # create elements
+  OverlayMe.menu_box = new OverlayMe.Draggable { id: 'overlay_me_dev_tools_menu' }, { default_css: { left: document.documentElement.clientWidth-300+'px', top: '0px' } }
+  drag_me_line = (new Backbone.View).make 'div', { class: 'drag-me' }, 'Drag me'
+  OverlayMe.Menu = (new Backbone.View).make 'ul'
+
+  # stack them together
+  $(OverlayMe.menu_box.el).append drag_me_line
+  $(OverlayMe.menu_box.el).append OverlayMe.Menu
+
+  # add it to the page
+  $('body').append OverlayMe.menu_box.render()
+
+  # add listeners
+  $(drag_me_line).bind 'mousedown', (event) =>
+    OverlayMe.menu_box.toggleMove(event)
+  $(window).bind 'mouseup', (event) =>
+    OverlayMe.menu_box.endMove(event)
+  $(OverlayMe.menu_box).bind 'toggle:visibility', (event) =>
+    if $(OverlayMe.menu_box.el).css('visibility') == 'visible'
+      css = { visibility: 'hidden' }
+    else
+      css = { visibility: 'visible' }
+    $(OverlayMe.menu_box.el).css(css)
+    OverlayMe.menu_box.saveCss()
+

data/javascripts/menu_item.js.coffee

@@ -0,0 +1,42 @@
+class OverlayMe.MenuItem extends Backbone.View
+
+  tagName: 'li'
+  className: 'menu-item'
+
+  initialize: (attributes, options) ->
+    @id = attributes.id
+    @el.appendChild @collapseButton()
+    @title = this.make 'label', { class: 'title' }, attributes.title
+    $(@title).bind 'click', =>
+      @toggleCollapse()
+    @el.appendChild @title
+    @content = this.make 'div', { class: 'item-content' }
+    @el.appendChild @content
+    @collapsed = (if localStorage.getItem("#{@id}-collapsed") == '' then false else true)
+    @setCollapse @collapsed
+
+  collapseButton: () ->
+    @collapseButton = this.make 'a', { class: 'collaps-button' }, '<span>o</span>'
+    $(@collapseButton).bind 'click', =>
+      @toggleCollapse()
+    @collapseButton
+
+  toggleCollapse: ->
+    @collapsed = !@collapsed
+    @setCollapse @collapsed
+    @saveState()
+
+  setCollapse: (toCollapse) ->
+    if toCollapse
+      $(@el).addClass 'collapsed'
+    else
+      $(@el).removeClass 'collapsed'
+
+  append: (childElemt) ->
+    @content.appendChild childElemt
+
+  render: ->
+    @el
+
+  saveState: ->
+    localStorage.setItem "#{@id}-collapsed", (if @collapsed then 1 else '')

data/javascripts/overlay_me.js.coffee

@@ -0,0 +1,3 @@
+#= require 'init'
+#= require 'basics'
+#= require 'overlays'

data/javascripts/overlays/content_div_mngmt.js.coffee

@@ -0,0 +1,91 @@
+class OverlayMe.Overlays.ContentDivManagementBlock extends Backbone.View
+
+  tagName: 'fieldset'
+  className: 'content-mgnt-block'
+
+  normal_zindex: '0'
+  over_zindex: '5'
+
+  initialize: ->
+
+    # move all page content to a sub-Div
+    our_page_container_div = @make 'div', { id: 'overlay_me_page_container' }
+    $('body').append our_page_container_div
+    $('body > *').each (index, thing) =>
+      unless thing.id.match(/^overlay_me/) || thing.tagName == 'SCRIPT'
+        $(our_page_container_div).append thing
+
+    # load previous css features of that container div
+    $("#overlay_me_page_container").css({'z-index': @normal_zindex})
+    if ( contentCss = localStorage.getItem("#overlay_me_page_container") )
+      $("#overlay_me_page_container").css(JSON.parse(contentCss))
+
+    # adding a hidden unicorny button
+    unicorn_button = @make 'div', { class: 'unicorns', title: 'Feeling corny?' }
+    $(unicorn_button).bind 'click', ->
+      OverlayMe.dyn_manager.addImage(OverlayMe.unicorns[Math.floor(Math.random()*OverlayMe.unicorns.length)], { default_css: { opacity: 1 } })
+    $(@el).append unicorn_button
+
+    # adding panel elements
+    $(@el).append @make 'legend', {}, 'Page content'
+    slider_block = @make 'div', { class: 'slider-block' }
+    $(@el).append slider_block
+    slider_block.appendChild @make 'label', {}, 'Opacity'
+    slider_block.appendChild @contentSlider()
+    $(@el).append @zIndexSwitch()
+    @bindEvents()
+
+  # adding a checkbox to flip HTML over images
+  zIndexSwitch: ->
+    block = @make 'div', { class: 'zindex-switch' }
+
+    @zIndexSwitch = @make 'input', { type: "checkbox" }
+    $(block).append @zIndexSwitch
+
+    setTimeout => # have to wait a bit to make sure to access the loaded css
+      @zIndexSwitch.checked = true if $("#overlay_me_page_container").css('z-index') == @over_zindex
+    , 500
+
+    label = @make 'label', {}, 'Content on top (touch "c")'
+    $(label).bind 'click', =>
+      $(@zIndexSwitch).trigger 'click'
+    $(block).append label
+
+
+  contentSlider: ->
+    @contentSlider = @make 'input', {
+      id: "contentSlider",
+      type: "range",
+      value: $("#overlay_me_page_container").css('opacity')*100
+    }
+
+  bindEvents: ->
+    $(@contentSlider).bind('change', =>
+      $("#overlay_me_page_container").css('opacity', $(@contentSlider)[0].value/100)
+      @saveContentCss()
+    )
+    $(@zIndexSwitch).bind('change', (event) =>
+      if @zIndexSwitch.checked
+        $("#overlay_me_page_container").css({'z-index': @over_zindex})
+      else
+        $("#overlay_me_page_container").css({'z-index': @normal_zindex})
+      @saveContentCss()
+    )
+    # if click is kind of boring
+    $(window).bind('keypress', (event) =>
+      #console.log event.keyCode, event.charCode
+      if event.charCode == 99 # C
+        $(@zIndexSwitch).trigger('click')
+    )
+
+
+  render: ->
+    @el
+
+  # adding some retention for #overlay_me_page_container
+  saveContentCss: ->
+    localStorage.setItem("#overlay_me_page_container", JSON.stringify({
+      opacity: $("#overlay_me_page_container").css('opacity'),
+      'z-index': $("#overlay_me_page_container").css('z-index')
+    }))
+

data/javascripts/overlays/draggable_image.js.coffee

@@ -0,0 +1,34 @@
+#= require 'draggable'
+
+class OverlayMe.Overlays.DraggableImage extends OverlayMe.Draggable
+
+  initialize: (attributes, options) ->
+    super(attributes, options)
+    @image = (new Backbone.View).make 'img', { src: options.image_src }
+    $(@el).append @image
+
+    # force positioning to 0 by default
+    $(@el).css('left', '0px') if $(@el).css('left') == 'auto' || $(@el).css('left') == ''
+    $(@el).css('top', '0px') if $(@el).css('top') == 'auto' || $(@el).css('top') == ''
+
+    $(@el).bind 'mousedown', (event) =>
+      @toggleMove(event)
+
+    $(window).bind 'mouseup', (event) =>
+      @endMove(event)
+
+    $(@el).bind 'mouseover', (event) =>
+      $(".overlay-image-block[data-img-id=#{@id}]").addClass 'hovered'
+
+    $(@el).bind 'mouseout', (event) =>
+      $(".overlay-image-block[data-img-id=#{@id}]").removeClass 'hovered'
+
+  fitDivToImage: ->
+    if @image.width > 0
+      $(@el).css('width', @image.width)
+      $(@el).css('height', @image.height)
+
+  render: ->
+    @el
+
+

data/javascripts/overlays/dynamic_images_mngmt.js.coffee

@@ -0,0 +1,48 @@
+#= require 'overlays/image'
+
+class OverlayMe.Overlays.DynamicManager extends Backbone.Model
+  
+  initialize: () ->
+    if ( listJSON = localStorage.getItem('dyn_image_list') )
+      @list = JSON.parse(listJSON)
+    else
+      @list = []
+
+  isPresent: (image_id) ->
+    for saved in @list
+      return true if saved.id == image_id
+    return false
+
+  isEmpty: ->
+    return @list.length == 0
+
+  addImage: (src, options = {} ) ->
+    new_image = @loadImage(src, options)
+    if new_image && !@isPresent(new_image.image_id)
+      @list.push { id: new_image.image_id, src: new_image.image_src }
+      @saveList()
+    new_image
+
+  loadImage: (src, options = {} ) ->
+    image_id = OverlayMe.Overlays.urlToId(src)
+    unless $("#overlay_me_images_container ##{image_id}").length > 0
+      _default_css = $.extend { visibility: 'visible' }, options.default_css
+      image = new OverlayMe.Overlays.Image(src, { destroyable: true, default_css: _default_css })
+      OverlayMe.images_management_div.append image.render()
+    image
+
+  delImage: (image_id) ->
+    for image in @list
+      if image.id == image_id
+        @list.splice(@list.indexOf(image), 1)
+        @saveList()
+        break
+    OverlayMe.images_management_div.del image_id
+
+  loadAll: () ->
+    for image in @list
+      @addImage(image.src)
+
+  saveList: ->
+    localStorage.setItem('dyn_image_list', JSON.stringify(@list))
+

data/javascripts/overlays/image.js.coffee

@@ -0,0 +1,100 @@
+#= require 'overlays/draggable_image'
+
+class OverlayMe.Overlays.Image extends Backbone.View
+
+  tagName: 'div'
+  className: 'overlay-image-block'
+
+  initialize: (image_src, options = { destroyable: false }) ->
+    @image_src = image_src
+    @image_id = OverlayMe.Overlays.urlToId(image_src)
+    $(@el).attr 'data-img-id', @image_id
+
+    @images_container = $('#overlay_me_images_container')
+    if @images_container.length < 1
+      $('body').append (new Backbone.View).make 'div', { id: 'overlay_me_images_container' }
+      @images_container = $('#overlay_me_images_container')
+
+    @default_css = $.extend {visibility: 'hidden', opacity: 0.5}, options.default_css
+
+    unless $("##{@image_id}", @images_container).length > 0
+      $(@images_container).append @image()
+
+    $(@el).append @checkbox()
+    $(@el).append @label()
+    slider_block = @make 'div', { class: 'slider-block' }
+    $(@el).append slider_block
+    slider_block.appendChild @make 'label', {}, 'Opacity'
+    slider_block.appendChild @slider()
+    $(@el).append @delButton() if options.destroyable
+    $(@el).bind 'click', (event) =>
+      @flickCheckbox()
+    $(@el).bind 'mouseover', (event) =>
+      $(@image.el).css('opacity', 1)
+      $(@image.el).addClass 'highlight'
+      $(@el).addClass 'hovered'
+    $(@el).bind 'mouseout', (event) =>
+      $(@image.el).removeClass 'highlight'
+      $(@el).removeClass 'hovered'
+      $(@image.el).css('opacity', $(@slider)[0].value/100)
+
+
+  image: ->
+    @image = new OverlayMe.Overlays.DraggableImage { id: @image_id }, { image_src: @image_src, default_css: @default_css }
+    @image.render()
+
+  checkbox: ->
+    @checkbox = @make 'input', { type: "checkbox" }
+    if $(@image.el).css('visibility') == 'visible'
+      @checkbox.checked = true
+    $(@checkbox).bind 'click', (e) =>
+      e.stopPropagation()
+      @flickVisibility()
+    $(@checkbox).bind 'change', (e) =>
+      e.stopPropagation()
+      @flickVisibility()
+    @checkbox
+
+  delButton: ->
+    @delButton = @make 'button', { class: 'del-button', title: 'Delete' }, 'x'
+    $(@delButton).bind 'click', (e) =>
+      OverlayMe.dyn_manager.delImage @image_id
+    @delButton
+
+  flickCheckbox: ->
+    @checkbox.checked = !@checkbox.checked
+    @flickVisibility()
+
+  flickVisibility: ->
+    @image.fitDivToImage()
+    if @checkbox.checked
+      $(@image.el).css('visibility', 'visible')
+    else
+      $(@image.el).css('visibility', 'hidden')
+    @image.saveCss()
+
+  label: ->
+    # keep only 22 characters
+    @label = @make 'label', {}, @image_src.replace(/.*\//, '').slice(-22)
+
+  slider: ->
+    @slider = @make 'input', {
+      type: "range",
+      value: $(@image.el).css('opacity')*100
+    }
+    $(@slider).bind 'click', (e) =>
+      e.stopPropagation()
+    $(@slider).bind 'change', (e) =>
+      $(@image.el).css('opacity', $(@slider)[0].value/100)
+      @image.saveCss()
+    $(@slider).bind 'mouseover', (e) =>
+      e.stopPropagation()
+      $(@el).addClass 'hovered'
+    $(@slider).bind 'mouseout', (e) =>
+      e.stopPropagation()
+      $(@el).removeClass 'hovered'
+    @slider
+
+  render: ->
+    @el
+

data/javascripts/overlays/images_mngt_div.js.coffee

@@ -0,0 +1,103 @@
+class OverlayMe.Overlays.ImagesManagementDiv extends Backbone.View
+
+  tagName: 'fieldset'
+  id: 'images_mgnt'
+
+  initialize: ->
+    $(@el).append @make 'legend', {}, 'Overlaying images'
+    @controlBlock = @make 'div', { class: 'controls' }
+    $(@el).append @controlBlock
+
+    @controlBlock.appendChild @checkAllbox()
+    check_all_label = @make 'label', {}, 'All/None'
+    $(check_all_label).bind 'click', =>
+      $(@checkAllBox).trigger 'click'
+    @controlBlock.appendChild check_all_label
+
+    @controlBlock.appendChild @hideInactivesBox()
+    hide_inactives_label = @make 'label', {}, 'Hide Inactives'
+    @controlBlock.appendChild hide_inactives_label
+    $(hide_inactives_label).bind 'click', =>
+      $(@hideInactivesBox).trigger 'click'
+
+    @overlaysListBlock = @make 'div', { class: 'overlays-list' }
+    $(@el).append @overlaysListBlock
+
+    $(@el).append @dynamicAddsBlock()
+
+  append: (block) ->
+    @overlaysListBlock.appendChild block
+
+  del: (image_id) ->
+    $(".overlay-image-block[data-img-id=#{image_id}]", @el).remove()
+    $("#overlay_me_images_container ##{image_id}").remove()
+
+  dynamicAddsBlock: ->
+    dynamicAddsBlock = @make 'div', { class: 'dynamic-adds' }
+    dynamicAddsBlock.appendChild @make 'label', {}, 'Add an image'
+    @image_url_input = @make 'input', { type: 'text', placeholder: "http://" }
+    dynamicAddsBlock.appendChild @image_url_input
+    push_image_button = @make 'button', {}, 'Add'
+    dynamicAddsBlock.appendChild push_image_button
+    $(@image_url_input).bind 'keypress', (e) =>
+      @pushImage() if e.keyCode == 13
+    $(push_image_button).bind 'click', (e) =>
+      @pushImage()
+    dynamicAddsBlock
+
+  pushImage: ->
+    OverlayMe.dyn_manager.addImage @image_url_input.value
+    @image_url_input.value = ''
+
+  hideInactivesBox: ->
+    @hideInactivesBox = @make 'input', { type: "checkbox", class: 'hide-inactive' }
+    # if ( data = localStorage.getItem(@id) )
+    #   console.log 'load:', data
+    #   $(@hideInactivesBox).css(JSON.parse(data))
+    if $(@hideInactivesBox).css('visibility') == 'visible'
+      @hideInactivesBox.checked = true
+    $(@hideInactivesBox).bind 'change', (event) =>
+      @hideInactives()
+    @hideInactivesBox
+
+  hideInactives: ->
+    checkbox_state = @hideInactivesBox.checked
+    _.each $('.overlay-image-block'), (img_block) ->
+      checkbox = $('input[type=checkbox]', img_block)
+      img_id = $(img_block).attr 'data-img-id'
+      if checkbox_state and !checkbox.first()[0].checked
+        $(img_block).hide()
+        $("##{img_id}").hide()
+      else
+        $(img_block).show()
+        $("##{img_id}").show()
+    @saveState()
+
+  checkAllbox: ->
+    @checkAllBox = @make 'input', { type: "checkbox", class: 'check-all' }
+    # if ( data = localStorage.getItem(@id) )
+    #   console.log 'load:', data
+    #   $(@checkAllBox).css(JSON.parse(data))
+    if $(@checkAllBox).css('visibility') == 'visible'
+      @checkAllBox.checked = true
+    $(@checkAllBox).bind 'change', (event) =>
+      @checkAll()
+    @checkAllBox
+
+  checkAll: ->
+    checkbox_state = @checkAllBox.checked
+    for checkbox in $('.overlay-image-block input[type=checkbox]')
+      if checkbox.checked != checkbox_state
+        $(checkbox).trigger 'click'
+    @saveState()
+
+
+  # adding some retention (or not)
+  saveState: ->
+    # localStorage.setItem(@id, JSON.stringify({
+    #   visibility:$(@checkbox).css('visibility')
+    # }))
+
+  render: ->
+    this.el
+

data/javascripts/overlays/init.js.coffee

@@ -0,0 +1,13 @@
+OverlayMe.Overlays = {}
+
+OverlayMe.Overlays.urlToId = (url) ->
+  return url.replace(/[.:\/]/g, '_').replace(/[^a-zA-Z0-9_\-]/g, '')
+
+OverlayMe.unicorns = [
+  "http://fc07.deviantart.net/fs49/f/2009/200/b/3/Fat_Unicorn_and_the_Rainbow_by_la_ratta.jpg",
+  "http://www.deviantart.com/download/126388773/Unicorn_Pukes_Rainbow_by_Angel35W.jpg",
+  "http://macmcrae.com/wp-content/uploads/2010/02/unicorn.jpg",
+  "http://4.bp.blogspot.com/-uPLiez-m9vY/TacC_Bmsn3I/AAAAAAAAAyg/jusQIA8aAME/s1600/Behold_A_Rainbow_Unicorn_Ninja_by_Jess4921.jpg",
+  "http://www.everquestdragon.com/everquestdragon/main/image.axd?picture=2009%2F9%2FPaperPaperNewrainbow.png"
+]
+

data/javascripts/overlays.js.coffee

@@ -0,0 +1,49 @@
+#= require 'menu'
+#= require 'menu_item'
+#= require 'overlays/init'
+#= require 'overlays/image'
+#= require 'overlays/dynamic_images_mngmt'
+#= require 'overlays/content_div_mngmt'
+#= require 'overlays/images_mngt_div'
+
+if OverlayMe.mustLoad()
+
+  # creating a overlay_panel
+  overlay_panel = new OverlayMe.MenuItem({id: "overlay_panel", title: "Overlays" })
+
+  # adding the #container management block
+  overlay_panel.append new OverlayMe.Overlays.ContentDivManagementBlock().render()
+
+  # adding image management block
+  OverlayMe.images_management_div = new OverlayMe.Overlays.ImagesManagementDiv()
+  overlay_panel.append OverlayMe.images_management_div.render()
+
+  # add the panel to the page menu
+  $(OverlayMe.Menu).append overlay_panel.render()
+  
+  # repeating original window#mousemove event
+  $(window).bind 'mousemove', (event) ->
+    $(window).trigger('mymousemove', event)
+
+  # once everything rendered, load dynamicly added images
+  OverlayMe.dyn_manager = new OverlayMe.Overlays.DynamicManager()
+  OverlayMe.dyn_manager.loadAll()
+
+  OverlayMe.loadDefaultImage = ->
+    # double check that the dynamic loading list is also empty
+    if OverlayMe.dyn_manager.isEmpty()
+      OverlayMe.dyn_manager.addImage('https://a248.e.akamai.net/assets.github.com/images/modules/about_page/octocat.png')
+
+  # adding all overlay images
+  $.ajax
+    url: '/overlay_images'
+    dataType: 'json'
+    success: (data) ->
+      if data.length == 0 # in case all is empty (default for newcomers)
+        OverlayMe.loadDefaultImage()
+      else
+        $.each data, (index, img_path) ->
+          OverlayMe.images_management_div.append new OverlayMe.Overlays.Image(img_path).render()
+    error: ->
+      OverlayMe.loadDefaultImage()
+

data/lib/overlay_me/version.rb

@@ -0,0 +1,7 @@
+module OverlayMe
+  MAJOR_VERSION = 0
+  MINOR_VERSION = 12
+  PATCH_LEVEL = 0
+
+  VERSION = [MAJOR_VERSION, MINOR_VERSION, PATCH_LEVEL].join '.'
+end

data/lib/overlay_me.rb

@@ -0,0 +1,22 @@
+module OverlayMe
+  
+  mattr_accessor :root_dir, :overlays_directory
+  self.root_dir = ''
+  self.overlays_directory = 'images/overlays'
+
+  class App
+    def self.call(env)
+      Dir.chdir OverlayMe.root_dir if Dir[OverlayMe.root_dir]
+      images_urls = Dir[ OverlayMe.overlays_directory + '/*.*' ].map{|path| '/'+path}
+      [200, {"Content-Type" => "text/html"}, images_urls.to_json]
+    end
+  end
+
+  module Rails
+    if defined? ::Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end
+