overlay_me 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,29 @@
1
+ #= require 'draggable'
2
+
3
+ if OverlayMe.mustLoad()
4
+
5
+ # create elements
6
+ OverlayMe.menu_box = new OverlayMe.Draggable { id: 'overlay_me_dev_tools_menu' }, { default_css: { left: document.documentElement.clientWidth-300+'px', top: '0px' } }
7
+ drag_me_line = (new Backbone.View).make 'div', { class: 'drag-me' }, 'Drag me'
8
+ OverlayMe.Menu = (new Backbone.View).make 'ul'
9
+
10
+ # stack them together
11
+ $(OverlayMe.menu_box.el).append drag_me_line
12
+ $(OverlayMe.menu_box.el).append OverlayMe.Menu
13
+
14
+ # add it to the page
15
+ $('body').append OverlayMe.menu_box.render()
16
+
17
+ # add listeners
18
+ $(drag_me_line).bind 'mousedown', (event) =>
19
+ OverlayMe.menu_box.toggleMove(event)
20
+ $(window).bind 'mouseup', (event) =>
21
+ OverlayMe.menu_box.endMove(event)
22
+ $(OverlayMe.menu_box).bind 'toggle:visibility', (event) =>
23
+ if $(OverlayMe.menu_box.el).css('visibility') == 'visible'
24
+ css = { visibility: 'hidden' }
25
+ else
26
+ css = { visibility: 'visible' }
27
+ $(OverlayMe.menu_box.el).css(css)
28
+ OverlayMe.menu_box.saveCss()
29
+
@@ -0,0 +1,42 @@
1
+ class OverlayMe.MenuItem extends Backbone.View
2
+
3
+ tagName: 'li'
4
+ className: 'menu-item'
5
+
6
+ initialize: (attributes, options) ->
7
+ @id = attributes.id
8
+ @el.appendChild @collapseButton()
9
+ @title = this.make 'label', { class: 'title' }, attributes.title
10
+ $(@title).bind 'click', =>
11
+ @toggleCollapse()
12
+ @el.appendChild @title
13
+ @content = this.make 'div', { class: 'item-content' }
14
+ @el.appendChild @content
15
+ @collapsed = (if localStorage.getItem("#{@id}-collapsed") == '' then false else true)
16
+ @setCollapse @collapsed
17
+
18
+ collapseButton: () ->
19
+ @collapseButton = this.make 'a', { class: 'collaps-button' }, '<span>o</span>'
20
+ $(@collapseButton).bind 'click', =>
21
+ @toggleCollapse()
22
+ @collapseButton
23
+
24
+ toggleCollapse: ->
25
+ @collapsed = !@collapsed
26
+ @setCollapse @collapsed
27
+ @saveState()
28
+
29
+ setCollapse: (toCollapse) ->
30
+ if toCollapse
31
+ $(@el).addClass 'collapsed'
32
+ else
33
+ $(@el).removeClass 'collapsed'
34
+
35
+ append: (childElemt) ->
36
+ @content.appendChild childElemt
37
+
38
+ render: ->
39
+ @el
40
+
41
+ saveState: ->
42
+ localStorage.setItem "#{@id}-collapsed", (if @collapsed then 1 else '')
@@ -0,0 +1,3 @@
1
+ #= require 'init'
2
+ #= require 'basics'
3
+ #= require 'overlays'
@@ -0,0 +1,91 @@
1
+ class OverlayMe.Overlays.ContentDivManagementBlock extends Backbone.View
2
+
3
+ tagName: 'fieldset'
4
+ className: 'content-mgnt-block'
5
+
6
+ normal_zindex: '0'
7
+ over_zindex: '5'
8
+
9
+ initialize: ->
10
+
11
+ # move all page content to a sub-Div
12
+ our_page_container_div = @make 'div', { id: 'overlay_me_page_container' }
13
+ $('body').append our_page_container_div
14
+ $('body > *').each (index, thing) =>
15
+ unless thing.id.match(/^overlay_me/) || thing.tagName == 'SCRIPT'
16
+ $(our_page_container_div).append thing
17
+
18
+ # load previous css features of that container div
19
+ $("#overlay_me_page_container").css({'z-index': @normal_zindex})
20
+ if ( contentCss = localStorage.getItem("#overlay_me_page_container") )
21
+ $("#overlay_me_page_container").css(JSON.parse(contentCss))
22
+
23
+ # adding a hidden unicorny button
24
+ unicorn_button = @make 'div', { class: 'unicorns', title: 'Feeling corny?' }
25
+ $(unicorn_button).bind 'click', ->
26
+ OverlayMe.dyn_manager.addImage(OverlayMe.unicorns[Math.floor(Math.random()*OverlayMe.unicorns.length)], { default_css: { opacity: 1 } })
27
+ $(@el).append unicorn_button
28
+
29
+ # adding panel elements
30
+ $(@el).append @make 'legend', {}, 'Page content'
31
+ slider_block = @make 'div', { class: 'slider-block' }
32
+ $(@el).append slider_block
33
+ slider_block.appendChild @make 'label', {}, 'Opacity'
34
+ slider_block.appendChild @contentSlider()
35
+ $(@el).append @zIndexSwitch()
36
+ @bindEvents()
37
+
38
+ # adding a checkbox to flip HTML over images
39
+ zIndexSwitch: ->
40
+ block = @make 'div', { class: 'zindex-switch' }
41
+
42
+ @zIndexSwitch = @make 'input', { type: "checkbox" }
43
+ $(block).append @zIndexSwitch
44
+
45
+ setTimeout => # have to wait a bit to make sure to access the loaded css
46
+ @zIndexSwitch.checked = true if $("#overlay_me_page_container").css('z-index') == @over_zindex
47
+ , 500
48
+
49
+ label = @make 'label', {}, 'Content on top (touch "c")'
50
+ $(label).bind 'click', =>
51
+ $(@zIndexSwitch).trigger 'click'
52
+ $(block).append label
53
+
54
+
55
+ contentSlider: ->
56
+ @contentSlider = @make 'input', {
57
+ id: "contentSlider",
58
+ type: "range",
59
+ value: $("#overlay_me_page_container").css('opacity')*100
60
+ }
61
+
62
+ bindEvents: ->
63
+ $(@contentSlider).bind('change', =>
64
+ $("#overlay_me_page_container").css('opacity', $(@contentSlider)[0].value/100)
65
+ @saveContentCss()
66
+ )
67
+ $(@zIndexSwitch).bind('change', (event) =>
68
+ if @zIndexSwitch.checked
69
+ $("#overlay_me_page_container").css({'z-index': @over_zindex})
70
+ else
71
+ $("#overlay_me_page_container").css({'z-index': @normal_zindex})
72
+ @saveContentCss()
73
+ )
74
+ # if click is kind of boring
75
+ $(window).bind('keypress', (event) =>
76
+ #console.log event.keyCode, event.charCode
77
+ if event.charCode == 99 # C
78
+ $(@zIndexSwitch).trigger('click')
79
+ )
80
+
81
+
82
+ render: ->
83
+ @el
84
+
85
+ # adding some retention for #overlay_me_page_container
86
+ saveContentCss: ->
87
+ localStorage.setItem("#overlay_me_page_container", JSON.stringify({
88
+ opacity: $("#overlay_me_page_container").css('opacity'),
89
+ 'z-index': $("#overlay_me_page_container").css('z-index')
90
+ }))
91
+
@@ -0,0 +1,34 @@
1
+ #= require 'draggable'
2
+
3
+ class OverlayMe.Overlays.DraggableImage extends OverlayMe.Draggable
4
+
5
+ initialize: (attributes, options) ->
6
+ super(attributes, options)
7
+ @image = (new Backbone.View).make 'img', { src: options.image_src }
8
+ $(@el).append @image
9
+
10
+ # force positioning to 0 by default
11
+ $(@el).css('left', '0px') if $(@el).css('left') == 'auto' || $(@el).css('left') == ''
12
+ $(@el).css('top', '0px') if $(@el).css('top') == 'auto' || $(@el).css('top') == ''
13
+
14
+ $(@el).bind 'mousedown', (event) =>
15
+ @toggleMove(event)
16
+
17
+ $(window).bind 'mouseup', (event) =>
18
+ @endMove(event)
19
+
20
+ $(@el).bind 'mouseover', (event) =>
21
+ $(".overlay-image-block[data-img-id=#{@id}]").addClass 'hovered'
22
+
23
+ $(@el).bind 'mouseout', (event) =>
24
+ $(".overlay-image-block[data-img-id=#{@id}]").removeClass 'hovered'
25
+
26
+ fitDivToImage: ->
27
+ if @image.width > 0
28
+ $(@el).css('width', @image.width)
29
+ $(@el).css('height', @image.height)
30
+
31
+ render: ->
32
+ @el
33
+
34
+
@@ -0,0 +1,48 @@
1
+ #= require 'overlays/image'
2
+
3
+ class OverlayMe.Overlays.DynamicManager extends Backbone.Model
4
+
5
+ initialize: () ->
6
+ if ( listJSON = localStorage.getItem('dyn_image_list') )
7
+ @list = JSON.parse(listJSON)
8
+ else
9
+ @list = []
10
+
11
+ isPresent: (image_id) ->
12
+ for saved in @list
13
+ return true if saved.id == image_id
14
+ return false
15
+
16
+ isEmpty: ->
17
+ return @list.length == 0
18
+
19
+ addImage: (src, options = {} ) ->
20
+ new_image = @loadImage(src, options)
21
+ if new_image && !@isPresent(new_image.image_id)
22
+ @list.push { id: new_image.image_id, src: new_image.image_src }
23
+ @saveList()
24
+ new_image
25
+
26
+ loadImage: (src, options = {} ) ->
27
+ image_id = OverlayMe.Overlays.urlToId(src)
28
+ unless $("#overlay_me_images_container ##{image_id}").length > 0
29
+ _default_css = $.extend { visibility: 'visible' }, options.default_css
30
+ image = new OverlayMe.Overlays.Image(src, { destroyable: true, default_css: _default_css })
31
+ OverlayMe.images_management_div.append image.render()
32
+ image
33
+
34
+ delImage: (image_id) ->
35
+ for image in @list
36
+ if image.id == image_id
37
+ @list.splice(@list.indexOf(image), 1)
38
+ @saveList()
39
+ break
40
+ OverlayMe.images_management_div.del image_id
41
+
42
+ loadAll: () ->
43
+ for image in @list
44
+ @addImage(image.src)
45
+
46
+ saveList: ->
47
+ localStorage.setItem('dyn_image_list', JSON.stringify(@list))
48
+
@@ -0,0 +1,100 @@
1
+ #= require 'overlays/draggable_image'
2
+
3
+ class OverlayMe.Overlays.Image extends Backbone.View
4
+
5
+ tagName: 'div'
6
+ className: 'overlay-image-block'
7
+
8
+ initialize: (image_src, options = { destroyable: false }) ->
9
+ @image_src = image_src
10
+ @image_id = OverlayMe.Overlays.urlToId(image_src)
11
+ $(@el).attr 'data-img-id', @image_id
12
+
13
+ @images_container = $('#overlay_me_images_container')
14
+ if @images_container.length < 1
15
+ $('body').append (new Backbone.View).make 'div', { id: 'overlay_me_images_container' }
16
+ @images_container = $('#overlay_me_images_container')
17
+
18
+ @default_css = $.extend {visibility: 'hidden', opacity: 0.5}, options.default_css
19
+
20
+ unless $("##{@image_id}", @images_container).length > 0
21
+ $(@images_container).append @image()
22
+
23
+ $(@el).append @checkbox()
24
+ $(@el).append @label()
25
+ slider_block = @make 'div', { class: 'slider-block' }
26
+ $(@el).append slider_block
27
+ slider_block.appendChild @make 'label', {}, 'Opacity'
28
+ slider_block.appendChild @slider()
29
+ $(@el).append @delButton() if options.destroyable
30
+ $(@el).bind 'click', (event) =>
31
+ @flickCheckbox()
32
+ $(@el).bind 'mouseover', (event) =>
33
+ $(@image.el).css('opacity', 1)
34
+ $(@image.el).addClass 'highlight'
35
+ $(@el).addClass 'hovered'
36
+ $(@el).bind 'mouseout', (event) =>
37
+ $(@image.el).removeClass 'highlight'
38
+ $(@el).removeClass 'hovered'
39
+ $(@image.el).css('opacity', $(@slider)[0].value/100)
40
+
41
+
42
+ image: ->
43
+ @image = new OverlayMe.Overlays.DraggableImage { id: @image_id }, { image_src: @image_src, default_css: @default_css }
44
+ @image.render()
45
+
46
+ checkbox: ->
47
+ @checkbox = @make 'input', { type: "checkbox" }
48
+ if $(@image.el).css('visibility') == 'visible'
49
+ @checkbox.checked = true
50
+ $(@checkbox).bind 'click', (e) =>
51
+ e.stopPropagation()
52
+ @flickVisibility()
53
+ $(@checkbox).bind 'change', (e) =>
54
+ e.stopPropagation()
55
+ @flickVisibility()
56
+ @checkbox
57
+
58
+ delButton: ->
59
+ @delButton = @make 'button', { class: 'del-button', title: 'Delete' }, 'x'
60
+ $(@delButton).bind 'click', (e) =>
61
+ OverlayMe.dyn_manager.delImage @image_id
62
+ @delButton
63
+
64
+ flickCheckbox: ->
65
+ @checkbox.checked = !@checkbox.checked
66
+ @flickVisibility()
67
+
68
+ flickVisibility: ->
69
+ @image.fitDivToImage()
70
+ if @checkbox.checked
71
+ $(@image.el).css('visibility', 'visible')
72
+ else
73
+ $(@image.el).css('visibility', 'hidden')
74
+ @image.saveCss()
75
+
76
+ label: ->
77
+ # keep only 22 characters
78
+ @label = @make 'label', {}, @image_src.replace(/.*\//, '').slice(-22)
79
+
80
+ slider: ->
81
+ @slider = @make 'input', {
82
+ type: "range",
83
+ value: $(@image.el).css('opacity')*100
84
+ }
85
+ $(@slider).bind 'click', (e) =>
86
+ e.stopPropagation()
87
+ $(@slider).bind 'change', (e) =>
88
+ $(@image.el).css('opacity', $(@slider)[0].value/100)
89
+ @image.saveCss()
90
+ $(@slider).bind 'mouseover', (e) =>
91
+ e.stopPropagation()
92
+ $(@el).addClass 'hovered'
93
+ $(@slider).bind 'mouseout', (e) =>
94
+ e.stopPropagation()
95
+ $(@el).removeClass 'hovered'
96
+ @slider
97
+
98
+ render: ->
99
+ @el
100
+
@@ -0,0 +1,103 @@
1
+ class OverlayMe.Overlays.ImagesManagementDiv extends Backbone.View
2
+
3
+ tagName: 'fieldset'
4
+ id: 'images_mgnt'
5
+
6
+ initialize: ->
7
+ $(@el).append @make 'legend', {}, 'Overlaying images'
8
+ @controlBlock = @make 'div', { class: 'controls' }
9
+ $(@el).append @controlBlock
10
+
11
+ @controlBlock.appendChild @checkAllbox()
12
+ check_all_label = @make 'label', {}, 'All/None'
13
+ $(check_all_label).bind 'click', =>
14
+ $(@checkAllBox).trigger 'click'
15
+ @controlBlock.appendChild check_all_label
16
+
17
+ @controlBlock.appendChild @hideInactivesBox()
18
+ hide_inactives_label = @make 'label', {}, 'Hide Inactives'
19
+ @controlBlock.appendChild hide_inactives_label
20
+ $(hide_inactives_label).bind 'click', =>
21
+ $(@hideInactivesBox).trigger 'click'
22
+
23
+ @overlaysListBlock = @make 'div', { class: 'overlays-list' }
24
+ $(@el).append @overlaysListBlock
25
+
26
+ $(@el).append @dynamicAddsBlock()
27
+
28
+ append: (block) ->
29
+ @overlaysListBlock.appendChild block
30
+
31
+ del: (image_id) ->
32
+ $(".overlay-image-block[data-img-id=#{image_id}]", @el).remove()
33
+ $("#overlay_me_images_container ##{image_id}").remove()
34
+
35
+ dynamicAddsBlock: ->
36
+ dynamicAddsBlock = @make 'div', { class: 'dynamic-adds' }
37
+ dynamicAddsBlock.appendChild @make 'label', {}, 'Add an image'
38
+ @image_url_input = @make 'input', { type: 'text', placeholder: "http://" }
39
+ dynamicAddsBlock.appendChild @image_url_input
40
+ push_image_button = @make 'button', {}, 'Add'
41
+ dynamicAddsBlock.appendChild push_image_button
42
+ $(@image_url_input).bind 'keypress', (e) =>
43
+ @pushImage() if e.keyCode == 13
44
+ $(push_image_button).bind 'click', (e) =>
45
+ @pushImage()
46
+ dynamicAddsBlock
47
+
48
+ pushImage: ->
49
+ OverlayMe.dyn_manager.addImage @image_url_input.value
50
+ @image_url_input.value = ''
51
+
52
+ hideInactivesBox: ->
53
+ @hideInactivesBox = @make 'input', { type: "checkbox", class: 'hide-inactive' }
54
+ # if ( data = localStorage.getItem(@id) )
55
+ # console.log 'load:', data
56
+ # $(@hideInactivesBox).css(JSON.parse(data))
57
+ if $(@hideInactivesBox).css('visibility') == 'visible'
58
+ @hideInactivesBox.checked = true
59
+ $(@hideInactivesBox).bind 'change', (event) =>
60
+ @hideInactives()
61
+ @hideInactivesBox
62
+
63
+ hideInactives: ->
64
+ checkbox_state = @hideInactivesBox.checked
65
+ _.each $('.overlay-image-block'), (img_block) ->
66
+ checkbox = $('input[type=checkbox]', img_block)
67
+ img_id = $(img_block).attr 'data-img-id'
68
+ if checkbox_state and !checkbox.first()[0].checked
69
+ $(img_block).hide()
70
+ $("##{img_id}").hide()
71
+ else
72
+ $(img_block).show()
73
+ $("##{img_id}").show()
74
+ @saveState()
75
+
76
+ checkAllbox: ->
77
+ @checkAllBox = @make 'input', { type: "checkbox", class: 'check-all' }
78
+ # if ( data = localStorage.getItem(@id) )
79
+ # console.log 'load:', data
80
+ # $(@checkAllBox).css(JSON.parse(data))
81
+ if $(@checkAllBox).css('visibility') == 'visible'
82
+ @checkAllBox.checked = true
83
+ $(@checkAllBox).bind 'change', (event) =>
84
+ @checkAll()
85
+ @checkAllBox
86
+
87
+ checkAll: ->
88
+ checkbox_state = @checkAllBox.checked
89
+ for checkbox in $('.overlay-image-block input[type=checkbox]')
90
+ if checkbox.checked != checkbox_state
91
+ $(checkbox).trigger 'click'
92
+ @saveState()
93
+
94
+
95
+ # adding some retention (or not)
96
+ saveState: ->
97
+ # localStorage.setItem(@id, JSON.stringify({
98
+ # visibility:$(@checkbox).css('visibility')
99
+ # }))
100
+
101
+ render: ->
102
+ this.el
103
+
@@ -0,0 +1,13 @@
1
+ OverlayMe.Overlays = {}
2
+
3
+ OverlayMe.Overlays.urlToId = (url) ->
4
+ return url.replace(/[.:\/]/g, '_').replace(/[^a-zA-Z0-9_\-]/g, '')
5
+
6
+ OverlayMe.unicorns = [
7
+ "http://fc07.deviantart.net/fs49/f/2009/200/b/3/Fat_Unicorn_and_the_Rainbow_by_la_ratta.jpg",
8
+ "http://www.deviantart.com/download/126388773/Unicorn_Pukes_Rainbow_by_Angel35W.jpg",
9
+ "http://macmcrae.com/wp-content/uploads/2010/02/unicorn.jpg",
10
+ "http://4.bp.blogspot.com/-uPLiez-m9vY/TacC_Bmsn3I/AAAAAAAAAyg/jusQIA8aAME/s1600/Behold_A_Rainbow_Unicorn_Ninja_by_Jess4921.jpg",
11
+ "http://www.everquestdragon.com/everquestdragon/main/image.axd?picture=2009%2F9%2FPaperPaperNewrainbow.png"
12
+ ]
13
+
@@ -0,0 +1,49 @@
1
+ #= require 'menu'
2
+ #= require 'menu_item'
3
+ #= require 'overlays/init'
4
+ #= require 'overlays/image'
5
+ #= require 'overlays/dynamic_images_mngmt'
6
+ #= require 'overlays/content_div_mngmt'
7
+ #= require 'overlays/images_mngt_div'
8
+
9
+ if OverlayMe.mustLoad()
10
+
11
+ # creating a overlay_panel
12
+ overlay_panel = new OverlayMe.MenuItem({id: "overlay_panel", title: "Overlays" })
13
+
14
+ # adding the #container management block
15
+ overlay_panel.append new OverlayMe.Overlays.ContentDivManagementBlock().render()
16
+
17
+ # adding image management block
18
+ OverlayMe.images_management_div = new OverlayMe.Overlays.ImagesManagementDiv()
19
+ overlay_panel.append OverlayMe.images_management_div.render()
20
+
21
+ # add the panel to the page menu
22
+ $(OverlayMe.Menu).append overlay_panel.render()
23
+
24
+ # repeating original window#mousemove event
25
+ $(window).bind 'mousemove', (event) ->
26
+ $(window).trigger('mymousemove', event)
27
+
28
+ # once everything rendered, load dynamicly added images
29
+ OverlayMe.dyn_manager = new OverlayMe.Overlays.DynamicManager()
30
+ OverlayMe.dyn_manager.loadAll()
31
+
32
+ OverlayMe.loadDefaultImage = ->
33
+ # double check that the dynamic loading list is also empty
34
+ if OverlayMe.dyn_manager.isEmpty()
35
+ OverlayMe.dyn_manager.addImage('https://a248.e.akamai.net/assets.github.com/images/modules/about_page/octocat.png')
36
+
37
+ # adding all overlay images
38
+ $.ajax
39
+ url: '/overlay_images'
40
+ dataType: 'json'
41
+ success: (data) ->
42
+ if data.length == 0 # in case all is empty (default for newcomers)
43
+ OverlayMe.loadDefaultImage()
44
+ else
45
+ $.each data, (index, img_path) ->
46
+ OverlayMe.images_management_div.append new OverlayMe.Overlays.Image(img_path).render()
47
+ error: ->
48
+ OverlayMe.loadDefaultImage()
49
+
@@ -0,0 +1,7 @@
1
+ module OverlayMe
2
+ MAJOR_VERSION = 0
3
+ MINOR_VERSION = 12
4
+ PATCH_LEVEL = 0
5
+
6
+ VERSION = [MAJOR_VERSION, MINOR_VERSION, PATCH_LEVEL].join '.'
7
+ end
data/lib/overlay_me.rb ADDED
@@ -0,0 +1,22 @@
1
+ module OverlayMe
2
+
3
+ mattr_accessor :root_dir, :overlays_directory
4
+ self.root_dir = ''
5
+ self.overlays_directory = 'images/overlays'
6
+
7
+ class App
8
+ def self.call(env)
9
+ Dir.chdir OverlayMe.root_dir if Dir[OverlayMe.root_dir]
10
+ images_urls = Dir[ OverlayMe.overlays_directory + '/*.*' ].map{|path| '/'+path}
11
+ [200, {"Content-Type" => "text/html"}, images_urls.to_json]
12
+ end
13
+ end
14
+
15
+ module Rails
16
+ if defined? ::Rails
17
+ class Engine < ::Rails::Engine
18
+ end
19
+ end
20
+ end
21
+ end
22
+