overlay_me 0.12.0 → 0.12.1

data/javascripts/menu.js.coffee

@@ -1,29 +1,38 @@
 #= 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' }
+class OverlayMe.MenuClass extends OverlayMe.Draggable
+
+  id: 'overlay_me_menu'
+
+  initialize: (attributes) ->
+    super(attributes, { default_css: { top: '50px' } })
+    drag_me_line = (new Backbone.View).make 'div', { class: 'drag-me' }, 'Drag me up and down'
+    @menu_list = (new Backbone.View).make 'ul'
+
+    # stack them together
+    $o(@el).append drag_me_line
+    $o(@el).append @menu_list
+
+    # add it to the page
+    $o('body').append @render()
+
+    # add listeners
+    $o(drag_me_line).bind 'mousedown', (event) =>
+      @toggleMove(event)
+    $o(window).bind 'mouseup', (event) =>
+      @endMove(event)
+    $o(window).bind 'overlay_me:toggle_all_display', =>
+      @toggleDisplay()
+
+  append: (element) ->
+    @menu_list.appendChild element
+
+  toggleCollapse: ->
+    if $o(@el).hasClass('collapsed')
+      $o(@el).removeClass('collapsed')
     else
-      css = { visibility: 'visible' }
-    $(OverlayMe.menu_box.el).css(css)
-    OverlayMe.menu_box.saveCss()
+      $o(@el).addClass('collapsed')
+
 
+# create only 1 menu
+OverlayMe.menu = new OverlayMe.MenuClass() unless OverlayMe.menu_box

data/javascripts/menu_item.js.coffee

@@ -7,7 +7,7 @@ class OverlayMe.MenuItem extends Backbone.View
     @id = attributes.id
     @el.appendChild @collapseButton()
     @title = this.make 'label', { class: 'title' }, attributes.title
-    $(@title).bind 'click', =>
+    $o(@title).bind 'click', =>
       @toggleCollapse()
     @el.appendChild @title
     @content = this.make 'div', { class: 'item-content' }
@@ -17,7 +17,7 @@ class OverlayMe.MenuItem extends Backbone.View
 
   collapseButton: () ->
     @collapseButton = this.make 'a', { class: 'collaps-button' }, '<span>o</span>'
-    $(@collapseButton).bind 'click', =>
+    $o(@collapseButton).bind 'click', =>
       @toggleCollapse()
     @collapseButton
 
@@ -28,9 +28,9 @@ class OverlayMe.MenuItem extends Backbone.View
 
   setCollapse: (toCollapse) ->
     if toCollapse
-      $(@el).addClass 'collapsed'
+      $o(@el).addClass 'collapsed'
     else
-      $(@el).removeClass 'collapsed'
+      $o(@el).removeClass 'collapsed'
 
   append: (childElemt) ->
     @content.appendChild childElemt

data/javascripts/mixins/hideable.js.coffee

@@ -0,0 +1,13 @@
+OverlayMe.Mixin.Hideable = {
+
+  isDisplayed: ->
+    return $o(@el).css('display') != 'none'
+  
+  toggleDisplay: (default_display_type='block') ->
+    if @isDisplayed()
+      $o(@el).css { display: 'none' }
+    else
+      $o(@el).css { display: default_display_type }
+    @saveCss()
+
+}

data/javascripts/mixins/storable.js.coffee

@@ -0,0 +1,17 @@
+OverlayMe.Mixin.Storable = {
+
+  loadCss: (element=@el, default_css) ->
+    if ( cssData = localStorage.getItem(@id) )
+      $o(element).css(JSON.parse(cssData))
+    else
+      $o(element).css(default_css) unless default_css == undefined
+    
+  saveCss: (element=@el) ->
+    @css_attributes_to_save = ['top', 'left', 'display', 'opacity'] unless @css_attributes_to_save
+    cssData = {}
+    for css_attribute in @css_attributes_to_save
+      cssData[css_attribute] = $o(element).css(css_attribute)
+    localStorage.setItem(@id, JSON.stringify(cssData))
+
+}
+

data/javascripts/overlay_me.js.coffee

@@ -1,3 +1,7 @@
 #= require 'init'
 #= require 'basics'
 #= require 'overlays'
+
+# flag as loaded
+window.overlay_me_loaded = true
+

data/javascripts/overlays.js.coffee

@@ -19,11 +19,11 @@ if OverlayMe.mustLoad()
   overlay_panel.append OverlayMe.images_management_div.render()
 
   # add the panel to the page menu
-  $(OverlayMe.Menu).append overlay_panel.render()
+  OverlayMe.menu.append overlay_panel.render()
   
   # repeating original window#mousemove event
-  $(window).bind 'mousemove', (event) ->
-    $(window).trigger('mymousemove', event)
+  $o(window).bind 'mousemove', (event) ->
+    $o(window).trigger('mymousemove', event)
 
   # once everything rendered, load dynamicly added images
   OverlayMe.dyn_manager = new OverlayMe.Overlays.DynamicManager()
@@ -35,14 +35,14 @@ if OverlayMe.mustLoad()
       OverlayMe.dyn_manager.addImage('https://a248.e.akamai.net/assets.github.com/images/modules/about_page/octocat.png')
 
   # adding all overlay images
-  $.ajax
+  $o.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) ->
+        $o.each data, (index, img_path) ->
           OverlayMe.images_management_div.append new OverlayMe.Overlays.Image(img_path).render()
     error: ->
       OverlayMe.loadDefaultImage()

data/javascripts/overlays/content_div_mngmt.js.coffee

@@ -1,7 +1,11 @@
+#= require 'mixins/storable'
+
 class OverlayMe.Overlays.ContentDivManagementBlock extends Backbone.View
 
   tagName: 'fieldset'
   className: 'content-mgnt-block'
+  id: 'content_div_management_block'
+  css_attributes_to_save: ['z-index', 'opacity']
 
   normal_zindex: '0'
   over_zindex: '5'
@@ -9,30 +13,28 @@ class OverlayMe.Overlays.ContentDivManagementBlock extends Backbone.View
   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) =>
+    @page_container_div = @make 'div', { id: 'overlay_me_page_container' }
+    $o('body').append @page_container_div
+    $o('body > *').each (index, thing) =>
       unless thing.id.match(/^overlay_me/) || thing.tagName == 'SCRIPT'
-        $(our_page_container_div).append thing
+        $o(@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))
+    @loadCss(@page_container_div, {'z-index': @normal_zindex})
 
     # adding a hidden unicorny button
     unicorn_button = @make 'div', { class: 'unicorns', title: 'Feeling corny?' }
-    $(unicorn_button).bind 'click', ->
+    $o(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
+    $o(@el).append unicorn_button
 
     # adding panel elements
-    $(@el).append @make 'legend', {}, 'Page content'
+    $o(@el).append @make 'legend', {}, 'Page content'
     slider_block = @make 'div', { class: 'slider-block' }
-    $(@el).append slider_block
+    $o(@el).append slider_block
     slider_block.appendChild @make 'label', {}, 'Opacity'
     slider_block.appendChild @contentSlider()
-    $(@el).append @zIndexSwitch()
+    $o(@el).append @zIndexSwitch()
     @bindEvents()
 
   # adding a checkbox to flip HTML over images
@@ -40,52 +42,46 @@ class OverlayMe.Overlays.ContentDivManagementBlock extends Backbone.View
     block = @make 'div', { class: 'zindex-switch' }
 
     @zIndexSwitch = @make 'input', { type: "checkbox" }
-    $(block).append @zIndexSwitch
+    $o(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
+      @zIndexSwitch.checked = true if $o("#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
+    label = @make 'label', {}, 'Content on top (t)'
+    $o(label).bind 'click', =>
+      $o(@zIndexSwitch).trigger 'click'
+    $o(block).append label
 
 
   contentSlider: ->
     @contentSlider = @make 'input', {
       id: "contentSlider",
       type: "range",
-      value: $("#overlay_me_page_container").css('opacity')*100
+      value: $o("#overlay_me_page_container").css('opacity')*100
     }
 
   bindEvents: ->
-    $(@contentSlider).bind('change', =>
-      $("#overlay_me_page_container").css('opacity', $(@contentSlider)[0].value/100)
-      @saveContentCss()
+    $o(@contentSlider).bind('change', =>
+      $o("#overlay_me_page_container").css('opacity', $o(@contentSlider)[0].value/100)
+      @saveCss(@page_container_div)
     )
-    $(@zIndexSwitch).bind('change', (event) =>
+    $o(@zIndexSwitch).bind('change', (event) =>
       if @zIndexSwitch.checked
-        $("#overlay_me_page_container").css({'z-index': @over_zindex})
+        $o("#overlay_me_page_container").css({'z-index': @over_zindex})
       else
-        $("#overlay_me_page_container").css({'z-index': @normal_zindex})
-      @saveContentCss()
+        $o("#overlay_me_page_container").css({'z-index': @normal_zindex})
+      @saveCss(@page_container_div)
     )
     # if click is kind of boring
-    $(window).bind('keypress', (event) =>
+    $o(window).bind('keypress', (event) =>
       #console.log event.keyCode, event.charCode
-      if event.charCode == 99 # C
-        $(@zIndexSwitch).trigger('click')
+      if event.charCode == 116 # t
+        $o(@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')
-    }))
-
+# extending few mixins - thx Derick - http://stackoverflow.com/questions/7853731/proper-way-of-doing-view-mixins-in-backbone
+_.extend OverlayMe.Overlays.ContentDivManagementBlock.prototype, OverlayMe.Mixin.Storable

data/javascripts/overlays/draggable_image.js.coffee

@@ -4,29 +4,32 @@ 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
+    @image = new Image()
+    $o(@image).load => # when image loaded
+      @fitDivToImage()
+    $o(@image).attr 'src', options.image_src
+    $o(@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') == ''
+    $o(@el).css('left', '0px') if $o(@el).css('left') == 'auto' || $o(@el).css('left') == ''
+    $o(@el).css('top', '0px') if $o(@el).css('top') == 'auto' || $o(@el).css('top') == ''
 
-    $(@el).bind 'mousedown', (event) =>
+    $o(@el).bind 'mousedown', (event) =>
       @toggleMove(event)
 
-    $(window).bind 'mouseup', (event) =>
+    $o(window).bind 'mouseup', (event) =>
       @endMove(event)
 
-    $(@el).bind 'mouseover', (event) =>
-      $(".overlay-image-block[data-img-id=#{@id}]").addClass 'hovered'
+    $o(@el).bind 'mouseover', (event) =>
+      $o(".overlay-image-block[data-img-id=#{@id}]").addClass 'hovered'
 
-    $(@el).bind 'mouseout', (event) =>
-      $(".overlay-image-block[data-img-id=#{@id}]").removeClass 'hovered'
+    $o(@el).bind 'mouseout', (event) =>
+      $o(".overlay-image-block[data-img-id=#{@id}]").removeClass 'hovered'
 
   fitDivToImage: ->
     if @image.width > 0
-      $(@el).css('width', @image.width)
-      $(@el).css('height', @image.height)
+      $o(@el).css('width', @image.width)
+      $o(@el).css('height', @image.height)
 
   render: ->
     @el

data/javascripts/overlays/dynamic_images_mngmt.js.coffee

@@ -25,8 +25,8 @@ class OverlayMe.Overlays.DynamicManager extends Backbone.Model
 
   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
+    unless $o("#overlay_me_images_container ##{image_id}").length > 0
+      _default_css = $o.extend { display: 'block' }, options.default_css
       image = new OverlayMe.Overlays.Image(src, { destroyable: true, default_css: _default_css })
       OverlayMe.images_management_div.append image.render()
     image

data/javascripts/overlays/image.js.coffee

@@ -1,3 +1,4 @@
+#= require 'overlays/images_container'
 #= require 'overlays/draggable_image'
 
 class OverlayMe.Overlays.Image extends Backbone.View
@@ -8,35 +9,30 @@ class OverlayMe.Overlays.Image extends Backbone.View
   initialize: (image_src, options = { destroyable: false }) ->
     @image_src = image_src
     @image_id = OverlayMe.Overlays.urlToId(image_src)
-    $(@el).attr 'data-img-id', @image_id
+    $o(@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')
+    OverlayMe.images_container = new OverlayMe.Overlays.ImagesContainer() unless OverlayMe.images_container
 
-    @default_css = $.extend {visibility: 'hidden', opacity: 0.5}, options.default_css
+    @default_css = $o.extend {display: 'none', opacity: 0.5}, options.default_css
 
-    unless $("##{@image_id}", @images_container).length > 0
-      $(@images_container).append @image()
+    unless $o("##{@image_id}", OverlayMe.images_container.el).length > 0
+      $o(OverlayMe.images_container.el).append @image()
 
-    $(@el).append @checkbox()
-    $(@el).append @label()
+    $o(@el).append @checkbox()
+    $o(@el).append @label()
     slider_block = @make 'div', { class: 'slider-block' }
-    $(@el).append slider_block
+    $o(@el).append slider_block
     slider_block.appendChild @make 'label', {}, 'Opacity'
     slider_block.appendChild @slider()
-    $(@el).append @delButton() if options.destroyable
-    $(@el).bind 'click', (event) =>
+    $o(@el).append @delButton() if options.destroyable
+    $o(@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)
+    $o(@el).bind 'mouseover', (event) =>
+      $o(@image.el).addClass 'highlight'
+      $o(@el).addClass 'hovered'
+    $o(@el).bind 'mouseout', (event) =>
+      $o(@image.el).removeClass 'highlight'
+      $o(@el).removeClass 'hovered'
 
 
   image: ->
@@ -45,19 +41,19 @@ class OverlayMe.Overlays.Image extends Backbone.View
 
   checkbox: ->
     @checkbox = @make 'input', { type: "checkbox" }
-    if $(@image.el).css('visibility') == 'visible'
+    if @image.isDisplayed()
       @checkbox.checked = true
-    $(@checkbox).bind 'click', (e) =>
+    $o(@checkbox).bind 'click', (e) =>
       e.stopPropagation()
       @flickVisibility()
-    $(@checkbox).bind 'change', (e) =>
+    $o(@checkbox).bind 'change', (e) =>
       e.stopPropagation()
       @flickVisibility()
     @checkbox
 
   delButton: ->
     @delButton = @make 'button', { class: 'del-button', title: 'Delete' }, 'x'
-    $(@delButton).bind 'click', (e) =>
+    $o(@delButton).bind 'click', (e) =>
       OverlayMe.dyn_manager.delImage @image_id
     @delButton
 
@@ -66,11 +62,10 @@ class OverlayMe.Overlays.Image extends Backbone.View
     @flickVisibility()
 
   flickVisibility: ->
-    @image.fitDivToImage()
     if @checkbox.checked
-      $(@image.el).css('visibility', 'visible')
+      $o(@image.el).css('display', 'block')
     else
-      $(@image.el).css('visibility', 'hidden')
+      $o(@image.el).css('display', 'none')
     @image.saveCss()
 
   label: ->
@@ -80,19 +75,19 @@ class OverlayMe.Overlays.Image extends Backbone.View
   slider: ->
     @slider = @make 'input', {
       type: "range",
-      value: $(@image.el).css('opacity')*100
+      value: $o(@image.el).css('opacity')*100
     }
-    $(@slider).bind 'click', (e) =>
+    $o(@slider).bind 'click', (e) =>
       e.stopPropagation()
-    $(@slider).bind 'change', (e) =>
-      $(@image.el).css('opacity', $(@slider)[0].value/100)
+    $o(@slider).bind 'change', (e) =>
+      $o(@image.el).css('opacity', $o(@slider)[0].value/100)
       @image.saveCss()
-    $(@slider).bind 'mouseover', (e) =>
+    $o(@slider).bind 'mouseover', (e) =>
       e.stopPropagation()
-      $(@el).addClass 'hovered'
-    $(@slider).bind 'mouseout', (e) =>
+      $o(@el).addClass 'hovered'
+    $o(@slider).bind 'mouseout', (e) =>
       e.stopPropagation()
-      $(@el).removeClass 'hovered'
+      $o(@el).removeClass 'hovered'
     @slider
 
   render: ->