lighter_box 0.3.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2e76c9d269dc37b520fb19a6a1a43953e65dcbfb
-  data.tar.gz: e03676b8d0bfcd5d298c7c26b00e0e9182129315
+  metadata.gz: 542e811ff27d9867910949714c5c98ecac65db94
+  data.tar.gz: 857ecce64e1f8433c2a450136977bc89bb1c070e
 SHA512:
-  metadata.gz: 80169d02311e17ad085b71bd4b7f74dc93c80436e240eb6d3f15c454d7b47271ec78bfad70c867e5b94263079a32c90338f315b9982d0ecd76d8b83c33fb3808
-  data.tar.gz: 8994fa3fecfdc334d65e38ad7ffca77bb42a486d2aba4e8e4450240a788b52e0c9a403fb14ebeb83d3847b8f526892eeb13d5f0684e59f0bf07dfec5c9e6de9b
+  metadata.gz: 9403dc13b70f64fc9e9379a2c0ef87839219eab43449ffdde113e5886ef06685ae7e998835455d1f9809e22ea4fad6d4e235d7334a1c1b693b9a0b3c48b61482
+  data.tar.gz: 34aa54a7de14b2ec17daae8b343f72b6be44ea8024442f61682e587441d0c5bbeddba3c57508229550e647f7ca4bf3d0ac96d1e03562aa7ff6d04789667329e9

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+# v0.4.0
+ * New fullscreen mode for small screen devices.
+ * 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).
+
 # v0.3.2
 
 * 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

@@ -5,8 +5,10 @@ A very lightweight lightbox with a bare minimum of features, packaged for the Ra
  * Displays a single image (with caption) or arbitrary content loaded via Ajax.
  * Fully accessible (note that all UI alt texts and titles are in german).
  * Gallery mode (navigation between related images / contents).
+ * Fullscreen mode for small screen devices (see below).
  * Supports nested lightboxes.
 
+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).
 
 ## Requirements
 
@@ -23,7 +25,7 @@ Add `lighter_box` to your Gemfile. Use sprockets directives to include the code
 //= require "lighter_box"
 ```
 
-```css
+```sass
 @import "lighter_box"
 ```
 
@@ -49,7 +51,7 @@ $("body").on "click", "a[data-lightbox]", (ev) ->
 The following attributes on the source element (link) can be used to customize LighterBox:
 
  * `data-lightbox-class`: Additional css class names for the lightbox modal.
- * `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.
+ * `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).
 
 Image lightbox only:
 

data/lib/assets/javascripts/lighter_box.coffee

@@ -148,7 +148,7 @@ class LighterBox
 
   _createModal: (container) =>
     modal = $("<div class='lighter-box-modal' role='dialog' aria-hidden='false' tabindex='0'/>").appendTo(container)
-    $("<button class='lighter-box-close-button' title='Vergrößerte Ansicht schließen' data-lighter-box-dismiss><span aria-hidden='true'>×</span></button>").appendTo(modal)
+    $("<button class='lighter-box-close-button' title='Vergrößerte Ansicht schließen' data-lighter-box-dismiss><span aria-hidden='true'>×</span></button>").appendTo(container)
     $("<a data-lighter-box-prev class='lighter-box-prev-link' href='#' title='Voriges Bild'><span aria-hidden='true'>‹</span></a>").appendTo(container)
     $("<a data-lighter-box-next class='lighter-box-next-link' href='#' title='Nächstes Bild'><span aria-hidden='true'>›</span></a>").appendTo(container)
     modal

data/lib/assets/stylesheets/lighter_box.sass

@@ -1,5 +1,8 @@
 $lighter-box-margin: 24px !default
 $lighter-box-padding: 24px !default
+$lighter-box-fullscreen-breakpoint: 479px !default
+$lighter-box-fullscreen-padding: 12px !default
+$lighter-box-fullscreen-navbar-height: 30px !default
 
 // Only display content to screen readers
 // See: http://a11yproject.com/posts/how-to-hide-content/
@@ -41,25 +44,9 @@ $lighter-box-padding: 24px !default
   max-width: calc(100vw - #{2 * $lighter-box-margin})
   max-height: calc(100vh - #{2 * $lighter-box-margin})
   overflow-y: auto
+  -webkit-overflow-scrolling: touch
 
-.lighter-box-close-button
-  position: absolute
-  top: 0px
-  right: 0px
-  box-sizing: border-box
-  width: 24px
-  height: 24px
-  border: none
-  padding: 0
-  background: transparent
-  text-align: center
-  font: bold 18px/20px sans-serif
-  color: #ccc
-  cursor: pointer
-  &:hover, &:focus
-    color: #555
-
-.lighter-box-prev-link, .lighter-box-next-link
+.lighter-box-close-button, .lighter-box-prev-link, .lighter-box-next-link
   $width: ($lighter-box-margin + $lighter-box-padding) * 0.9
   $height: $width
   position: absolute
@@ -80,6 +67,13 @@ $lighter-box-padding: 24px !default
     background: rgba(22, 22, 22, 0.9)
     text-decoration: none
 
+.lighter-box-close-button
+  top: 0px
+  right: 0px
+  box-sizing: border-box
+  border: none
+  padding: 0
+
 .lighter-box-prev-link
   left: 0px
 .lighter-box-next-link
@@ -162,6 +156,37 @@ $lighter-box-padding: 24px !default
     transform: scaleY(1)
     -webkit-transform: scaleY(1)
 
+@media (max-width: $lighter-box-fullscreen-breakpoint)
+  .lighter-box-modal
+    // 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
+    width: 100%
+    height: 100%
+    max-width: 100%
+    max-height: 100%
+    padding: ($lighter-box-fullscreen-padding + $lighter-box-fullscreen-navbar-height) $lighter-box-fullscreen-padding $lighter-box-fullscreen-padding
+
+  .lighter-box-prev-link, .lighter-box-next-link, .lighter-box-close-button
+    $height: $lighter-box-fullscreen-navbar-height
+    position: fixed
+    top: 0
+    height: $height
+    font-size: #{$height * 0.8}
+    line-height: #{$height * 0.9}
+    background: #e8e8e8
+    color: #999
+    box-sizing: border-box
+  .lighter-box-close-button
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2)
+
+  .lighter-box-prev-link, .lighter-box-next-link
+    width: 25%
+  .lighter-box-prev-link
+    border-right: 1px solid #fff
+  .lighter-box-next-link
+    border-left: 1px solid #fff
+  .lighter-box-close-button
+    left: 0
+    width: 100%
 
 .lighter-box-modal.ie9
   display: inline-block

data/lib/lighter_box/version.rb

@@ -1,3 +1,3 @@
 module LighterBox
-  VERSION = "0.3.2"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lighter_box
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.0
 platform: ruby
 authors:
 - Stefan Daschek
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-02-27 00:00:00.000000000 Z
+date: 2017-03-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: coffee-script
@@ -104,7 +104,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.5.2
 signing_key: 
 specification_version: 4
 summary: Lightweight accessible lightbox.