lighter_box 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.gitignore +9 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +21 -0
- data/README.md +70 -0
- data/Rakefile +1 -0
- data/lib/assets/javascripts/lighter_box.coffee +252 -0
- data/lib/assets/stylesheets/lighter_box.sass +159 -0
- data/lib/lighter_box/version.rb +3 -0
- data/lib/lighter_box.rb +9 -0
- data/lighter_box.gemspec +26 -0
- metadata +110 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 1ca805cbc44387bcd1da3ecbd5d595628f44c417
|
4
|
+
data.tar.gz: 067d9f737fa192fb37a2f6c3a5b39cfff6bee774
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: bd58de1a00f2f309930f1735b0e229dd5880577df91e9e4344d7566f331b6104631e551cdd81ece4fbc83cfc6f1542eb04b4b22ff061a452c4fd055f23b571a2
|
7
|
+
data.tar.gz: 86ed656540f815b8f7295724cb90093632ad0fe7b2b1fc32d2959784b89381a7bc0511a02a4db51fe862fe5daf46cf696287fb50fa085bf8e68ab906ef6d804c
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright (c) 2016 Stefan Daschek
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in
|
13
|
+
all copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
21
|
+
THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,70 @@
|
|
1
|
+
# LighterBox
|
2
|
+
|
3
|
+
A very lightweight lightbox with a bare minimum of features:
|
4
|
+
|
5
|
+
* Displays a single image (with caption) or arbitrary content loaded via Ajax.
|
6
|
+
* Fully accessible (note that all UI alt texts and titles are in german).
|
7
|
+
* Gallery mode (navigation between related images / contents).
|
8
|
+
* Supports nested lightboxes.
|
9
|
+
|
10
|
+
|
11
|
+
## Requirements
|
12
|
+
|
13
|
+
Requires a recent jQuery version (may work with Zepto, too).
|
14
|
+
|
15
|
+
Designed to work with current browsers (including minor workarounds to make sure it’s not completely broken in IE9).
|
16
|
+
|
17
|
+
|
18
|
+
## Installation
|
19
|
+
|
20
|
+
Add `lighter_box` to your Gemfile. Use sprockets directives to include the code in your JS/CSS:
|
21
|
+
|
22
|
+
```javascript
|
23
|
+
//= require "lighter_box"
|
24
|
+
```
|
25
|
+
|
26
|
+
```css
|
27
|
+
@import "lighter_box"
|
28
|
+
```
|
29
|
+
|
30
|
+
|
31
|
+
## Usage
|
32
|
+
|
33
|
+
Create a new instance of `LighterBox.Ajax` or `LighterBox.Image`, with the link element referencing the target image or content as parameter.
|
34
|
+
|
35
|
+
A common pattern is to do this in a event handler like this:
|
36
|
+
|
37
|
+
```coffee
|
38
|
+
$("body").on "click", "a[data-lightbox]", (ev) ->
|
39
|
+
ev.preventDefault()
|
40
|
+
if $(this).data("lightbox-mode") == "ajax"
|
41
|
+
new LighterBox.Ajax(this)
|
42
|
+
else
|
43
|
+
new LighterBox.Image(this)
|
44
|
+
```
|
45
|
+
|
46
|
+
|
47
|
+
### Configuration via attributes
|
48
|
+
|
49
|
+
The following attributes on the source element (link) can be used to customize LighterBox:
|
50
|
+
|
51
|
+
* `data-lightbox-class`: Additional css class names for the lightbox modal.
|
52
|
+
* `data-lightbox-group`: Used for gallery mode: Next / previous links will be displayed to allow navigation between lightboxes for source elements that share the save value for this attribute.
|
53
|
+
|
54
|
+
Image lightbox only:
|
55
|
+
|
56
|
+
* `data-lightbox-caption`: Image caption. If not set, the image’s alt text is used as caption.
|
57
|
+
|
58
|
+
Ajax lightbox only:
|
59
|
+
|
60
|
+
* `data-lightbox-fragment`: A jQuery selector to specify the portion of the remote document to be loaded into the lightbox (similar to the fragment feature of [`jQuery.load()`](http://api.jquery.com/load/)).
|
61
|
+
|
62
|
+
|
63
|
+
### Events
|
64
|
+
|
65
|
+
The following events will be triggered on the lightbox modal element:
|
66
|
+
|
67
|
+
* `lighter-box-content-loaded`: When the content has been completely loaded (lightbox already visible).
|
68
|
+
* `lighter-box-will-hide`: Before the lightbox elements (modal, container and backdrop) are removed from the DOM.
|
69
|
+
|
70
|
+
Event handlers will get passed the lightbox instance as second parameter (after the event object).
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,252 @@
|
|
1
|
+
IE9 = /MSIE 9\./.test(navigator.userAgent)
|
2
|
+
|
3
|
+
|
4
|
+
class Backdrop
|
5
|
+
constructor: ->
|
6
|
+
@isNestedBackdrop = $(".lighter-box-backdrop").length > 0
|
7
|
+
@backdrop = $("<div class='lighter-box-backdrop' />").appendTo("body")
|
8
|
+
unless @isNestedBackdrop
|
9
|
+
$("body").addClass("lighter-box-has-backdrop")
|
10
|
+
$("body > *").wrapAll("<div class='lighter-box-aria-hide-body' aria-hidden='true' />")
|
11
|
+
|
12
|
+
remove: =>
|
13
|
+
@backdrop.remove()
|
14
|
+
unless @isNestedBackdrop
|
15
|
+
$(".lighter-box-aria-hide-body > *").unwrap()
|
16
|
+
$("body").removeClass("lighter-box-has-backdrop")
|
17
|
+
|
18
|
+
|
19
|
+
|
20
|
+
class Spinner
|
21
|
+
constructor: (@parentEl) ->
|
22
|
+
@el = $("<div class='lighter-box-spinner' tabindex='0'><div class='sr-only'>wird geladen …</div><div class='rect1' /><div class='rect2' /><div class='rect3' /><div class='rect4' /><div class='rect5' /></div>").hide().appendTo(@parentEl)
|
23
|
+
@delay = null
|
24
|
+
|
25
|
+
showDelayed: (delayMS) =>
|
26
|
+
@_clearDelay()
|
27
|
+
@delay = window.setTimeout(@show, delayMS)
|
28
|
+
|
29
|
+
show: =>
|
30
|
+
@_clearDelay()
|
31
|
+
@el.show().focus()
|
32
|
+
|
33
|
+
remove: =>
|
34
|
+
@_clearDelay()
|
35
|
+
@el.remove()
|
36
|
+
@parentEl.focus()
|
37
|
+
|
38
|
+
_clearDelay: =>
|
39
|
+
window.clearTimeout(@delay)
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
class LightboxGroup
|
44
|
+
constructor: (@currentEl) ->
|
45
|
+
@elems = if (groupName = @currentEl.attr("data-lightbox-group"))
|
46
|
+
$("[data-lightbox-group='#{groupName}']")
|
47
|
+
else
|
48
|
+
@currentEl
|
49
|
+
|
50
|
+
index: =>
|
51
|
+
@elems.index(@currentEl)
|
52
|
+
|
53
|
+
hasNext: =>
|
54
|
+
@index() + 1 < @elems.length
|
55
|
+
|
56
|
+
hasPrev: =>
|
57
|
+
@index() - 1 >= 0
|
58
|
+
|
59
|
+
nextHref: =>
|
60
|
+
@elems.eq(@index() + 1).attr("href")
|
61
|
+
|
62
|
+
prevHref: =>
|
63
|
+
@elems.eq(@index() - 1).attr("href")
|
64
|
+
|
65
|
+
next: =>
|
66
|
+
@currentEl = @elems.eq(@index() + 1)
|
67
|
+
|
68
|
+
prev: =>
|
69
|
+
@currentEl = @elems.eq(@index() - 1)
|
70
|
+
|
71
|
+
|
72
|
+
|
73
|
+
class ImageModalResizer
|
74
|
+
MIN_CAPTION_WIDTH: 200
|
75
|
+
|
76
|
+
constructor: (@modal) ->
|
77
|
+
@figure = @modal.find("figure")
|
78
|
+
@img = @figure.find("img")
|
79
|
+
@figcaption = @figure.find("figcaption")
|
80
|
+
@minImgHeight = parseInt(@img.css("min-height"), 10)
|
81
|
+
@running = false
|
82
|
+
|
83
|
+
run: =>
|
84
|
+
return if @running
|
85
|
+
@running = true
|
86
|
+
if window.requestAnimationFrame then window.requestAnimationFrame(@_run) else @_run()
|
87
|
+
|
88
|
+
_run: =>
|
89
|
+
@img.css("max-height": "none")
|
90
|
+
@modalHeight = @modal.height()
|
91
|
+
@_resize()
|
92
|
+
@_ie9Fix() if IE9
|
93
|
+
@running = false
|
94
|
+
|
95
|
+
_resize: =>
|
96
|
+
if (overflow = @figure.height() - @modalHeight) > 0
|
97
|
+
if (newHeight = @img.height() - overflow) >= @minImgHeight
|
98
|
+
@img.css("max-height": "#{newHeight}px")
|
99
|
+
else
|
100
|
+
@img.css("max-height": "#{@minImgHeight}px")
|
101
|
+
return # Make sure we don't recurse any more
|
102
|
+
captionWidth = Math.max(@img.width(), @MIN_CAPTION_WIDTH)
|
103
|
+
@figcaption.css("max-width": captionWidth)
|
104
|
+
@_resize() if @figure.height() > @modalHeight
|
105
|
+
|
106
|
+
_ie9Fix: =>
|
107
|
+
left = (document.documentElement.clientWidth - @modal.outerWidth()) / 2
|
108
|
+
top = (document.documentElement.clientHeight - @modal.outerHeight()) / 2
|
109
|
+
@modal.css(left: "#{left}px", top: "#{top}px")
|
110
|
+
|
111
|
+
|
112
|
+
|
113
|
+
class LighterBox
|
114
|
+
constructor: (srcEl) ->
|
115
|
+
@eventNamespace = "lighter-box-#{new Date().getTime()}"
|
116
|
+
@srcEl = $(srcEl)
|
117
|
+
@originalFocusEl = $(":focus")
|
118
|
+
@lightboxGroup = new LightboxGroup(@srcEl)
|
119
|
+
@backdrop = new Backdrop()
|
120
|
+
@container = @_createContainer()
|
121
|
+
@modal = @_createModal(@container)
|
122
|
+
@modal.addClass(@srcEl.data("lightbox-class")).data("lighter-box", this)
|
123
|
+
@_createInnerModal()
|
124
|
+
|
125
|
+
@container.on("click.#{@eventNamespace}", (ev) => @hide() if ev.target == @container[0])
|
126
|
+
@container.on("click.#{@eventNamespace}", "[data-lighter-box-dismiss]", @hide)
|
127
|
+
@container.on("click.#{@eventNamespace}", "[data-lighter-box-prev]", (ev) => ev.preventDefault(); @_showPrev())
|
128
|
+
@container.on("click.#{@eventNamespace}", "[data-lighter-box-next]", (ev) => ev.preventDefault(); @_showNext())
|
129
|
+
@container.on("keydown.#{@eventNamespace}", @_onKeydown)
|
130
|
+
@_trapFocus()
|
131
|
+
@modal.focus()
|
132
|
+
|
133
|
+
@_setContent().then =>
|
134
|
+
@_ie9Fix() if IE9
|
135
|
+
|
136
|
+
hide: =>
|
137
|
+
@_releaseFocus()
|
138
|
+
@container.off(".#{@eventNamespace}")
|
139
|
+
$(window).off(".#{@eventNamespace}")
|
140
|
+
@modal.trigger("lighter-box-will-hide", [this])
|
141
|
+
@container.remove()
|
142
|
+
@backdrop.remove()
|
143
|
+
@originalFocusEl.focus()
|
144
|
+
|
145
|
+
_createContainer: () =>
|
146
|
+
$("<div class='lighter-box-container' />").appendTo("body")
|
147
|
+
|
148
|
+
_createModal: (container) =>
|
149
|
+
modal = $("<div class='lighter-box-modal' role='dialog' aria-hidden='false' tabindex='0'/>").appendTo(container)
|
150
|
+
$("<button class='lighter-box-close-button' title='Vergrößerte Ansicht schließen' data-lighter-box-dismiss><span aria-hidden='true'>×</span></button>").appendTo(modal)
|
151
|
+
$("<a data-lighter-box-prev class='lighter-box-prev-link' href='#' title='Voriges Bild'><span aria-hidden='true'>‹</span></a>").appendTo(container)
|
152
|
+
$("<a data-lighter-box-next class='lighter-box-next-link' href='#' title='Nächstes Bild'><span aria-hidden='true'>›</span></a>").appendTo(container)
|
153
|
+
modal
|
154
|
+
|
155
|
+
_createInnerModal: =>
|
156
|
+
# Template method, override in subclasses if needed
|
157
|
+
|
158
|
+
_setContent: =>
|
159
|
+
prevLink = @container.find("[data-lighter-box-prev]").hide()
|
160
|
+
nextLink = @container.find("[data-lighter-box-next]").hide()
|
161
|
+
spinner = new Spinner(@modal)
|
162
|
+
spinner.showDelayed(100)
|
163
|
+
@_loadContent().then =>
|
164
|
+
spinner.remove()
|
165
|
+
prevLink.attr("href", @lightboxGroup.prevHref()).show() if @lightboxGroup.hasPrev()
|
166
|
+
nextLink.attr("href", @lightboxGroup.nextHref()).show() if @lightboxGroup.hasNext()
|
167
|
+
@modal.trigger("lighter-box-content-loaded", [this])
|
168
|
+
|
169
|
+
_loadContent: =>
|
170
|
+
throw "_loadContent needs to be overriden in a subclass."
|
171
|
+
|
172
|
+
_trapFocus: =>
|
173
|
+
$(document).on "focusin.#{@eventNamespace}", (ev) =>
|
174
|
+
return unless @_isForemost()
|
175
|
+
@modal.focus() unless $.contains(@container[0], ev.target)
|
176
|
+
|
177
|
+
_releaseFocus: =>
|
178
|
+
$(document).off "focusin.#{@eventNamespace}"
|
179
|
+
|
180
|
+
_onKeydown: (ev) =>
|
181
|
+
return unless @_isForemost()
|
182
|
+
switch ev.which
|
183
|
+
when 27 then ev.preventDefault(); @hide()
|
184
|
+
when 39 then ev.preventDefault(); @_showNext()
|
185
|
+
when 37 then ev.preventDefault(); @_showPrev()
|
186
|
+
|
187
|
+
_showNext: =>
|
188
|
+
if @lightboxGroup.hasNext()
|
189
|
+
@srcEl = @lightboxGroup.next()
|
190
|
+
@_setContent()
|
191
|
+
@modal.focus()
|
192
|
+
|
193
|
+
_showPrev: =>
|
194
|
+
if @lightboxGroup.hasPrev()
|
195
|
+
@srcEl = @lightboxGroup.prev()
|
196
|
+
@_setContent()
|
197
|
+
@modal.focus()
|
198
|
+
|
199
|
+
_isForemost: =>
|
200
|
+
@container.nextAll(".lighter-box-container").length == 0
|
201
|
+
|
202
|
+
_ie9Fix: =>
|
203
|
+
@modal.addClass("ie9")
|
204
|
+
|
205
|
+
|
206
|
+
|
207
|
+
class ImageLighterBox extends LighterBox
|
208
|
+
constructor: (srcEl) ->
|
209
|
+
super(srcEl)
|
210
|
+
@resizer = new ImageModalResizer(@modal)
|
211
|
+
$(window).on("resize.#{@eventNamespace}", => @resizer.run())
|
212
|
+
|
213
|
+
_createInnerModal: =>
|
214
|
+
figure = $("<figure />").appendTo(@modal)
|
215
|
+
$("<figcaption id='lighter-box-figcaption' class='lighter-box-figcaption'/>").appendTo(figure)
|
216
|
+
$("<img class='lighter-box-image'>").attr("aria-labelledby": "lighter-box-figcaption").prependTo(figure)
|
217
|
+
|
218
|
+
_loadContent: =>
|
219
|
+
$.Deferred (deferred) =>
|
220
|
+
href = @srcEl.attr("href")
|
221
|
+
caption = @srcEl.data("lightbox-caption") || @srcEl.find("img").attr("alt") || ""
|
222
|
+
newImg = $("<img>").attr(src: href).one "load", =>
|
223
|
+
@modal.find("img").attr(src: newImg.attr("src"))
|
224
|
+
@modal.find("figcaption").text(caption).toggleClass("empty-caption", caption.trim() == "")
|
225
|
+
@resizer.run()
|
226
|
+
deferred.resolve()
|
227
|
+
|
228
|
+
_ie9Fix: =>
|
229
|
+
super()
|
230
|
+
@resizer.run()
|
231
|
+
|
232
|
+
|
233
|
+
|
234
|
+
class AjaxLighterBox extends LighterBox
|
235
|
+
constructor: (srcEl) ->
|
236
|
+
super(srcEl)
|
237
|
+
|
238
|
+
_createInnerModal: =>
|
239
|
+
@ajaxContainer = $("<div/>").appendTo(@modal)
|
240
|
+
|
241
|
+
_loadContent: =>
|
242
|
+
href = @srcEl.attr("href")
|
243
|
+
fragment = @srcEl.data("lightbox-fragment")
|
244
|
+
$.get href, (data) =>
|
245
|
+
data = $(data).find(fragment) if fragment
|
246
|
+
@ajaxContainer.html(data)
|
247
|
+
|
248
|
+
|
249
|
+
|
250
|
+
window.LighterBox =
|
251
|
+
Ajax: AjaxLighterBox
|
252
|
+
Image: ImageLighterBox
|
@@ -0,0 +1,159 @@
|
|
1
|
+
$lighter-box-margin: 24px !default
|
2
|
+
$lighter-box-padding: 24px !default
|
3
|
+
|
4
|
+
body.lighter-box-has-backdrop
|
5
|
+
// Damit lässt sich zwar auf Desktop-Browsern bequem das Scrolling „unter“ dem Modal verhindern, aber es hat zwei Probleme:
|
6
|
+
// * Funktioniert nicht auf mobilen Browsern
|
7
|
+
// * Blendet einen eventuell vorhandenen Scrollbar aus, dadurch kanns passieren, dass das Layout „hüpft“. (Bootstrap fixt das, indem sie die Scrollbar-Breite ausmessen und das Bodypadding dann explizit entsprechend anpassen – geht, ist aber recht aufwändig.)
|
8
|
+
//overflow: hidden
|
9
|
+
|
10
|
+
.lighter-box-backdrop
|
11
|
+
position: fixed
|
12
|
+
left: 0
|
13
|
+
top: 0
|
14
|
+
width: 100vw
|
15
|
+
height: 100vh
|
16
|
+
background: rgba(0, 0, 0, 0.6)
|
17
|
+
|
18
|
+
.lighter-box-container
|
19
|
+
position: fixed
|
20
|
+
left: 0
|
21
|
+
top: 0
|
22
|
+
right: 0
|
23
|
+
bottom: 0
|
24
|
+
display: flex
|
25
|
+
align-items: center
|
26
|
+
justify-content: center
|
27
|
+
|
28
|
+
.lighter-box-modal
|
29
|
+
position: relative
|
30
|
+
background: #fff
|
31
|
+
padding: $lighter-box-padding
|
32
|
+
box-sizing: border-box
|
33
|
+
min-width: 120px // Damit der (absolut positionierte) Spinner nicht breiter ist als die (noch leere) Lightbox
|
34
|
+
min-height: 100px // Damit der (absolut positionierte) Spinner nicht breiter ist als die (noch leere) Lightbox
|
35
|
+
max-width: calc(100vw - #{2 * $lighter-box-margin})
|
36
|
+
max-height: calc(100vh - #{2 * $lighter-box-margin})
|
37
|
+
overflow-y: auto
|
38
|
+
|
39
|
+
.lighter-box-close-button
|
40
|
+
position: absolute
|
41
|
+
top: 0px
|
42
|
+
right: 0px
|
43
|
+
box-sizing: border-box
|
44
|
+
width: 24px
|
45
|
+
height: 24px
|
46
|
+
border: none
|
47
|
+
padding: 0
|
48
|
+
background: transparent
|
49
|
+
text-align: center
|
50
|
+
font: bold 18px/20px sans-serif
|
51
|
+
color: #ccc
|
52
|
+
cursor: pointer
|
53
|
+
&:hover, &:focus
|
54
|
+
color: #555
|
55
|
+
|
56
|
+
.lighter-box-prev-link, .lighter-box-next-link
|
57
|
+
$width: ($lighter-box-margin + $lighter-box-padding) * 0.9
|
58
|
+
$height: $width
|
59
|
+
position: absolute
|
60
|
+
top: calc(50% - #{$height / 2})
|
61
|
+
width: $width
|
62
|
+
height: $height
|
63
|
+
text-decoration: none
|
64
|
+
font-size: #{$height * 0.8}
|
65
|
+
line-height: #{$height * 0.9}
|
66
|
+
background: rgba(52, 52, 52, 0.85)
|
67
|
+
color: #ccc
|
68
|
+
text-align: center
|
69
|
+
> span
|
70
|
+
font-weight: bold
|
71
|
+
color: inherit
|
72
|
+
&:hover, &:focus
|
73
|
+
color: #fff
|
74
|
+
background: rgba(22, 22, 22, 0.9)
|
75
|
+
text-decoration: none
|
76
|
+
|
77
|
+
.lighter-box-prev-link
|
78
|
+
left: 0px
|
79
|
+
.lighter-box-next-link
|
80
|
+
right: 0px
|
81
|
+
|
82
|
+
.lighter-box-image
|
83
|
+
display: block
|
84
|
+
margin: auto
|
85
|
+
max-width: 100%
|
86
|
+
min-height: 30px
|
87
|
+
|
88
|
+
.lighter-box-figcaption
|
89
|
+
margin: 20px 0 0
|
90
|
+
text-align: center
|
91
|
+
line-height: 1.2
|
92
|
+
&.empty-caption
|
93
|
+
margin-top: 0
|
94
|
+
|
95
|
+
|
96
|
+
.lighter-box-spinner
|
97
|
+
$width: 80px
|
98
|
+
$height: 55px
|
99
|
+
box-sizing: border-box
|
100
|
+
padding: 15px
|
101
|
+
position: fixed
|
102
|
+
background: rgba(50, 50, 50, 0.8)
|
103
|
+
border-radius: 4px
|
104
|
+
box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.25)
|
105
|
+
width: $width
|
106
|
+
height: $height
|
107
|
+
left: calc(50% - #{$width / 2})
|
108
|
+
top: calc(50% - #{$height / 2})
|
109
|
+
text-align: center
|
110
|
+
font-size: 10px
|
111
|
+
&:focus
|
112
|
+
outline: none
|
113
|
+
|
114
|
+
> div
|
115
|
+
background-color: #eee
|
116
|
+
height: 100%
|
117
|
+
width: 5px
|
118
|
+
margin: 0 1px
|
119
|
+
display: inline-block
|
120
|
+
-webkit-animation: lighter-box-loader-anim 1.2s infinite ease-in-out
|
121
|
+
animation: lighter-box-loader-anim 1.2s infinite ease-in-out
|
122
|
+
|
123
|
+
.rect2
|
124
|
+
-webkit-animation-delay: -1.1s
|
125
|
+
animation-delay: -1.1s
|
126
|
+
|
127
|
+
.rect3
|
128
|
+
-webkit-animation-delay: -1.0s
|
129
|
+
animation-delay: -1.0s
|
130
|
+
|
131
|
+
.rect4
|
132
|
+
-webkit-animation-delay: -0.9s
|
133
|
+
animation-delay: -0.9s
|
134
|
+
|
135
|
+
.rect5
|
136
|
+
-webkit-animation-delay: -0.8s
|
137
|
+
animation-delay: -0.8s
|
138
|
+
|
139
|
+
@-webkit-keyframes lighter-box-loader-anim
|
140
|
+
0%, 40%, 100%
|
141
|
+
-webkit-transform: scaleY(0.5)
|
142
|
+
|
143
|
+
20%
|
144
|
+
-webkit-transform: scaleY(1)
|
145
|
+
|
146
|
+
@keyframes lighter-box-loader-anim
|
147
|
+
0%, 40%, 100%
|
148
|
+
transform: scaleY(0.5)
|
149
|
+
-webkit-transform: scaleY(0.5)
|
150
|
+
|
151
|
+
20%
|
152
|
+
transform: scaleY(1)
|
153
|
+
-webkit-transform: scaleY(1)
|
154
|
+
|
155
|
+
|
156
|
+
.lighter-box-modal.ie9
|
157
|
+
display: inline-block
|
158
|
+
width: auto
|
159
|
+
margin: 0
|
data/lib/lighter_box.rb
ADDED
data/lighter_box.gemspec
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'lighter_box/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "lighter_box"
|
8
|
+
spec.version = LighterBox::VERSION
|
9
|
+
spec.authors = ["Stefan Daschek"]
|
10
|
+
spec.email = ["stefan@die-antwort.eu"]
|
11
|
+
|
12
|
+
spec.summary = %q{Lightweight accessible lightbox.}
|
13
|
+
spec.homepage = "https://github.com/die-antwort/lighter_box"
|
14
|
+
spec.license = "MIT"
|
15
|
+
|
16
|
+
spec.files = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
|
17
|
+
spec.bindir = "exe"
|
18
|
+
spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
|
19
|
+
spec.require_paths = ["lib"]
|
20
|
+
|
21
|
+
spec.add_dependency "coffee-script", "~> 2.2"
|
22
|
+
spec.add_dependency "sass", "~> 3.2"
|
23
|
+
|
24
|
+
spec.add_development_dependency "bundler", "~> 1.9"
|
25
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
26
|
+
end
|
metadata
ADDED
@@ -0,0 +1,110 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: lighter_box
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Stefan Daschek
|
8
|
+
autorequire:
|
9
|
+
bindir: exe
|
10
|
+
cert_chain: []
|
11
|
+
date: 2016-03-25 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: coffee-script
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '2.2'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '2.2'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: sass
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '3.2'
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '3.2'
|
41
|
+
- !ruby/object:Gem::Dependency
|
42
|
+
name: bundler
|
43
|
+
requirement: !ruby/object:Gem::Requirement
|
44
|
+
requirements:
|
45
|
+
- - "~>"
|
46
|
+
- !ruby/object:Gem::Version
|
47
|
+
version: '1.9'
|
48
|
+
type: :development
|
49
|
+
prerelease: false
|
50
|
+
version_requirements: !ruby/object:Gem::Requirement
|
51
|
+
requirements:
|
52
|
+
- - "~>"
|
53
|
+
- !ruby/object:Gem::Version
|
54
|
+
version: '1.9'
|
55
|
+
- !ruby/object:Gem::Dependency
|
56
|
+
name: rake
|
57
|
+
requirement: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - "~>"
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '10.0'
|
62
|
+
type: :development
|
63
|
+
prerelease: false
|
64
|
+
version_requirements: !ruby/object:Gem::Requirement
|
65
|
+
requirements:
|
66
|
+
- - "~>"
|
67
|
+
- !ruby/object:Gem::Version
|
68
|
+
version: '10.0'
|
69
|
+
description:
|
70
|
+
email:
|
71
|
+
- stefan@die-antwort.eu
|
72
|
+
executables: []
|
73
|
+
extensions: []
|
74
|
+
extra_rdoc_files: []
|
75
|
+
files:
|
76
|
+
- ".gitignore"
|
77
|
+
- Gemfile
|
78
|
+
- LICENSE.txt
|
79
|
+
- README.md
|
80
|
+
- Rakefile
|
81
|
+
- lib/assets/javascripts/lighter_box.coffee
|
82
|
+
- lib/assets/stylesheets/lighter_box.sass
|
83
|
+
- lib/lighter_box.rb
|
84
|
+
- lib/lighter_box/version.rb
|
85
|
+
- lighter_box.gemspec
|
86
|
+
homepage: https://github.com/die-antwort/lighter_box
|
87
|
+
licenses:
|
88
|
+
- MIT
|
89
|
+
metadata: {}
|
90
|
+
post_install_message:
|
91
|
+
rdoc_options: []
|
92
|
+
require_paths:
|
93
|
+
- lib
|
94
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
95
|
+
requirements:
|
96
|
+
- - ">="
|
97
|
+
- !ruby/object:Gem::Version
|
98
|
+
version: '0'
|
99
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
100
|
+
requirements:
|
101
|
+
- - ">="
|
102
|
+
- !ruby/object:Gem::Version
|
103
|
+
version: '0'
|
104
|
+
requirements: []
|
105
|
+
rubyforge_project:
|
106
|
+
rubygems_version: 2.2.3
|
107
|
+
signing_key:
|
108
|
+
specification_version: 4
|
109
|
+
summary: Lightweight accessible lightbox.
|
110
|
+
test_files: []
|