lighter_box 0.3.2 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 2e76c9d269dc37b520fb19a6a1a43953e65dcbfb
4
- data.tar.gz: e03676b8d0bfcd5d298c7c26b00e0e9182129315
3
+ metadata.gz: 542e811ff27d9867910949714c5c98ecac65db94
4
+ data.tar.gz: 857ecce64e1f8433c2a450136977bc89bb1c070e
5
5
  SHA512:
6
- metadata.gz: 80169d02311e17ad085b71bd4b7f74dc93c80436e240eb6d3f15c454d7b47271ec78bfad70c867e5b94263079a32c90338f315b9982d0ecd76d8b83c33fb3808
7
- data.tar.gz: 8994fa3fecfdc334d65e38ad7ffca77bb42a486d2aba4e8e4450240a788b52e0c9a403fb14ebeb83d3847b8f526892eeb13d5f0684e59f0bf07dfec5c9e6de9b
6
+ metadata.gz: 9403dc13b70f64fc9e9379a2c0ef87839219eab43449ffdde113e5886ef06685ae7e998835455d1f9809e22ea4fad6d4e235d7334a1c1b693b9a0b3c48b61482
7
+ data.tar.gz: 34aa54a7de14b2ec17daae8b343f72b6be44ea8024442f61682e587441d0c5bbeddba3c57508229550e647f7ca4bf3d0ac96d1e03562aa7ff6d04789667329e9
data/CHANGELOG.md CHANGED
@@ -1,3 +1,7 @@
1
+ # v0.4.0
2
+ * New fullscreen mode for small screen devices.
3
+ * Close button is now positioned outside the lightbox, resulting in a larger click target and more consistent placement with the previous/next links in gallery mode Also, the close button is now already visible when the lightbox content is loading, allowing the user to abort the loading process. (Technically this has already been possible by simply clicking on the backdrop, but this is not really discoverable from an UX standpoint).
4
+
1
5
  # v0.3.2
2
6
 
3
7
  * Gallery mode: Ignore hidden source elements. This makes the gallery mode compatible with all sorts of client side filtering. As a side effect, the list of source elements used for gallery mode is now determined at the moment the lightbox is openend (in earlier versions it was determined when lighter box was initialized).
data/README.md CHANGED
@@ -5,8 +5,10 @@ A very lightweight lightbox with a bare minimum of features, packaged for the Ra
5
5
  * Displays a single image (with caption) or arbitrary content loaded via Ajax.
6
6
  * Fully accessible (note that all UI alt texts and titles are in german).
7
7
  * Gallery mode (navigation between related images / contents).
8
+ * Fullscreen mode for small screen devices (see below).
8
9
  * Supports nested lightboxes.
9
10
 
11
+ On small screen devices the lightbox will be shown fullscreen, with a fixed header bar containing the close button (and gallery buttons, if applicable). Per default this mode is activated for screens narrower than 480px (can be customized by setting `$lighter-box-fullscreen-breakpoint` before importing the Sass file).
10
12
 
11
13
  ## Requirements
12
14
 
@@ -23,7 +25,7 @@ Add `lighter_box` to your Gemfile. Use sprockets directives to include the code
23
25
  //= require "lighter_box"
24
26
  ```
25
27
 
26
- ```css
28
+ ```sass
27
29
  @import "lighter_box"
28
30
  ```
29
31
 
@@ -49,7 +51,7 @@ $("body").on "click", "a[data-lightbox]", (ev) ->
49
51
  The following attributes on the source element (link) can be used to customize LighterBox:
50
52
 
51
53
  * `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. Hidden source elements are ignored, so the gallery mode works well with all sorts of client side filtering.
54
+ * `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. Hidden source elements are ignored, so the gallery mode works well with all sorts of client side filtering. Note that this feature relies on jQuery’s `:visible` selector, which might yield unexpected results (eg. for links wrapping block elements, see https://github.com/jquery/jquery/issues/2227).
53
55
 
54
56
  Image lightbox only:
55
57
 
@@ -148,7 +148,7 @@ class LighterBox
148
148
 
149
149
  _createModal: (container) =>
150
150
  modal = $("<div class='lighter-box-modal' role='dialog' aria-hidden='false' tabindex='0'/>").appendTo(container)
151
- $("<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
+ $("<button class='lighter-box-close-button' title='Vergrößerte Ansicht schließen' data-lighter-box-dismiss><span aria-hidden='true'>×</span></button>").appendTo(container)
152
152
  $("<a data-lighter-box-prev class='lighter-box-prev-link' href='#' title='Voriges Bild'><span aria-hidden='true'>‹</span></a>").appendTo(container)
153
153
  $("<a data-lighter-box-next class='lighter-box-next-link' href='#' title='Nächstes Bild'><span aria-hidden='true'>›</span></a>").appendTo(container)
154
154
  modal
@@ -1,5 +1,8 @@
1
1
  $lighter-box-margin: 24px !default
2
2
  $lighter-box-padding: 24px !default
3
+ $lighter-box-fullscreen-breakpoint: 479px !default
4
+ $lighter-box-fullscreen-padding: 12px !default
5
+ $lighter-box-fullscreen-navbar-height: 30px !default
3
6
 
4
7
  // Only display content to screen readers
5
8
  // See: http://a11yproject.com/posts/how-to-hide-content/
@@ -41,25 +44,9 @@ $lighter-box-padding: 24px !default
41
44
  max-width: calc(100vw - #{2 * $lighter-box-margin})
42
45
  max-height: calc(100vh - #{2 * $lighter-box-margin})
43
46
  overflow-y: auto
47
+ -webkit-overflow-scrolling: touch
44
48
 
45
- .lighter-box-close-button
46
- position: absolute
47
- top: 0px
48
- right: 0px
49
- box-sizing: border-box
50
- width: 24px
51
- height: 24px
52
- border: none
53
- padding: 0
54
- background: transparent
55
- text-align: center
56
- font: bold 18px/20px sans-serif
57
- color: #ccc
58
- cursor: pointer
59
- &:hover, &:focus
60
- color: #555
61
-
62
- .lighter-box-prev-link, .lighter-box-next-link
49
+ .lighter-box-close-button, .lighter-box-prev-link, .lighter-box-next-link
63
50
  $width: ($lighter-box-margin + $lighter-box-padding) * 0.9
64
51
  $height: $width
65
52
  position: absolute
@@ -80,6 +67,13 @@ $lighter-box-padding: 24px !default
80
67
  background: rgba(22, 22, 22, 0.9)
81
68
  text-decoration: none
82
69
 
70
+ .lighter-box-close-button
71
+ top: 0px
72
+ right: 0px
73
+ box-sizing: border-box
74
+ border: none
75
+ padding: 0
76
+
83
77
  .lighter-box-prev-link
84
78
  left: 0px
85
79
  .lighter-box-next-link
@@ -162,6 +156,37 @@ $lighter-box-padding: 24px !default
162
156
  transform: scaleY(1)
163
157
  -webkit-transform: scaleY(1)
164
158
 
159
+ @media (max-width: $lighter-box-fullscreen-breakpoint)
160
+ .lighter-box-modal
161
+ // We need to use percentages here to account for issues with the URL bar on mobile browsers, see https://github.com/bokand/URLBarSizing#proposed-changes-to-chrome
162
+ width: 100%
163
+ height: 100%
164
+ max-width: 100%
165
+ max-height: 100%
166
+ padding: ($lighter-box-fullscreen-padding + $lighter-box-fullscreen-navbar-height) $lighter-box-fullscreen-padding $lighter-box-fullscreen-padding
167
+
168
+ .lighter-box-prev-link, .lighter-box-next-link, .lighter-box-close-button
169
+ $height: $lighter-box-fullscreen-navbar-height
170
+ position: fixed
171
+ top: 0
172
+ height: $height
173
+ font-size: #{$height * 0.8}
174
+ line-height: #{$height * 0.9}
175
+ background: #e8e8e8
176
+ color: #999
177
+ box-sizing: border-box
178
+ .lighter-box-close-button
179
+ box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2)
180
+
181
+ .lighter-box-prev-link, .lighter-box-next-link
182
+ width: 25%
183
+ .lighter-box-prev-link
184
+ border-right: 1px solid #fff
185
+ .lighter-box-next-link
186
+ border-left: 1px solid #fff
187
+ .lighter-box-close-button
188
+ left: 0
189
+ width: 100%
165
190
 
166
191
  .lighter-box-modal.ie9
167
192
  display: inline-block
@@ -1,3 +1,3 @@
1
1
  module LighterBox
2
- VERSION = "0.3.2"
2
+ VERSION = "0.4.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: lighter_box
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.2
4
+ version: 0.4.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Stefan Daschek
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2017-02-27 00:00:00.000000000 Z
11
+ date: 2017-03-30 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: coffee-script
@@ -104,7 +104,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
104
104
  version: '0'
105
105
  requirements: []
106
106
  rubyforge_project:
107
- rubygems_version: 2.5.1
107
+ rubygems_version: 2.5.2
108
108
  signing_key:
109
109
  specification_version: 4
110
110
  summary: Lightweight accessible lightbox.