From 70e21ccb1c7658f9d599cbe12ccea4a170cd782f Mon Sep 17 00:00:00 2001
From: Nick Stakenburg <nick@nickstakenburg.com>
Date: Wed, 8 Oct 2014 05:22:39 +0200
Subject: [PATCH] Clicking an element will now toggle Strip

This behavior can be disabled using toggle: false

Strip.show() calls don't use toggle behavior, it only works with
elements using class='strip'
---
 package.json            |  2 +-
 src/css/strip/strip.css | 11 ++++++-----
 src/js/pages.js         | 12 +++++++++++-
 src/js/skins.js         |  1 +
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 30b0701..ee933d2 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "strip",
   "title": "Strip",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "A Less Intrusive Responsive Lightbox",
   "author": {
     "name": "Nick Stakenburg",
diff --git a/src/css/strip/strip.css b/src/css/strip/strip.css
index 1889594..607b9be 100644
--- a/src/css/strip/strip.css
+++ b/src/css/strip/strip.css
@@ -14,14 +14,15 @@
 
 
 /* margin
-   we always have some margin around Strip to keep a visual reference to the underlying page
+   margin is added around the window to keep a visual reference 
+   to the underlying page at all times.
 */
 .strp-window { margin-left: 40px; }
 .strp-window.strp-vertical { margin-left: 0; margin-bottom: 40px; }
 
 /* reduce margin on smaller screens */
-@media all and (max-width: 420px),
-       all and (max-height: 420px) {
+@media all and (max-width: 400px),
+       all and (max-height: 400px) {
   .strp-window { margin-left: 20px; }
   .strp-window.strp-vertical { margin-bottom: 20px; }
 }
@@ -327,8 +328,8 @@
 .strp-window-skin-strip.strp-no-svg .strp-nav-hover.strp-nav-next .strp-nav-button-icon { background: url('skins/strip/next-hover.png'); }
 
 /* Smaller screens */
-@media all and (max-width: 420px),
-       all and (max-height: 420px) {
+@media all and (max-width: 400px),
+       all and (max-height: 400px) {
   .strp-window-skin-strip .strp-nav {
     width: 40px;
     height: 50px;
diff --git a/src/js/pages.js b/src/js/pages.js
index 1c1e2f5..dbee738 100644
--- a/src/js/pages.js
+++ b/src/js/pages.js
@@ -27,7 +27,17 @@ var Pages = {
     var page = this.pages[this.uid][position - 1];
 
     // never try to reload the exact same frame
-    if (this.page && this.page.uid == page.uid) return;
+    if (this.page && this.page.uid == page.uid) {
+      // also hide the window if toggle is enabled
+      if (page.view.options.toggle) {
+        Window.hide();
+        // clear the page so double clicking when hiding will
+        // re-open the window even if it's in a hide animation
+        this.page = null;
+      }
+
+      return;
+    }
 
     this.page = page; // store
 
diff --git a/src/js/skins.js b/src/js/skins.js
index 0f45a1a..c701f85 100644
--- a/src/js/skins.js
+++ b/src/js/skins.js
@@ -17,6 +17,7 @@ Strip.Skins = {
     preload: [1,2],
     position: true,
     side: 'right',
+    toggle: true,
     uiDelay: 3000,
     vimeo: {
       autoplay: 1,