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.
- data/.gitignore +4 -0
- data/CHANGELOG.md +37 -0
- data/Gemfile +7 -0
- data/Gemfile.lock +70 -0
- data/LICENSE +21 -0
- data/README.md +136 -0
- data/Rakefile +115 -0
- data/addons/layout_resizer.js +51 -0
- data/demo_page.html +33 -0
- data/javascripts/addons/layout_resizer.js.coffee +42 -0
- data/javascripts/basics.js.coffee +25 -0
- data/javascripts/draggable.js.coffee +51 -0
- data/javascripts/init.js.coffee +24 -0
- data/javascripts/lib/backbone.js +1154 -0
- data/javascripts/lib/html5slider.js +268 -0
- data/javascripts/lib/jquery.js +9404 -0
- data/javascripts/lib/underscore.js +807 -0
- data/javascripts/menu.js.coffee +29 -0
- data/javascripts/menu_item.js.coffee +42 -0
- data/javascripts/overlay_me.js.coffee +3 -0
- data/javascripts/overlays/content_div_mngmt.js.coffee +91 -0
- data/javascripts/overlays/draggable_image.js.coffee +34 -0
- data/javascripts/overlays/dynamic_images_mngmt.js.coffee +48 -0
- data/javascripts/overlays/image.js.coffee +100 -0
- data/javascripts/overlays/images_mngt_div.js.coffee +103 -0
- data/javascripts/overlays/init.js.coffee +13 -0
- data/javascripts/overlays.js.coffee +49 -0
- data/lib/overlay_me/version.rb +7 -0
- data/lib/overlay_me.rb +22 -0
- data/overlay_me.css +232 -0
- data/overlay_me.gemspec +23 -0
- data/overlay_me.js +12565 -0
- data/stylesheets/overlay_me.css.scss +213 -0
- data/vendor/assets/javascripts/overlay_me/addons/layout_resizer.js +51 -0
- data/vendor/assets/javascripts/overlay_me/overlay_me.min.js +733 -0
- metadata +200 -0
@@ -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,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
|
+
|
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
|
+
|