From 1b293c185ebdc1eac01ddab0f43e298f1012789b Mon Sep 17 00:00:00 2001
From: Harry Bomrah <harry@rulingcom.com>
Date: Wed, 23 Sep 2015 15:01:54 +0800
Subject: [PATCH] description added to theater mode

---
 app/assets/javascripts/theater.js  |  16 +
 app/assets/stylesheets/theater.css | 501 ++++++++++++++++-------------
 app/views/galleries/show.html.erb  |   7 +
 3 files changed, 301 insertions(+), 223 deletions(-)

diff --git a/app/assets/javascripts/theater.js b/app/assets/javascripts/theater.js
index 0b24d7f..170a847 100644
--- a/app/assets/javascripts/theater.js
+++ b/app/assets/javascripts/theater.js
@@ -17,11 +17,13 @@ var GalleryTheater = function(){
       gt.stripNextBtn = null;
       gt.stripPrevBtn = null;
       gt.thumbToggle = null;
+      gt.descriptionToggle = null;
       gt.closeBtn = null;
       gt.imageContainer = null;
       gt.albumData = {};
       gt.loader = null;
       gt.thumbStrip = null;
+      gt.descriptionArea = null;
       gt.isTheaterInitialized = false;
 
   var initialize = function(){
@@ -34,6 +36,8 @@ var GalleryTheater = function(){
     gt.loader = gt.stage.find(".gallery-loader");
     gt.stripNextBtn = gt.stage.find(".gallery-thumb-next");
     gt.stripPrevBtn = gt.stage.find(".gallery-thumb-prev");
+    gt.descriptionArea = gt.stage.find(".gallery-img-desc");
+    gt.descriptionToggle = gt.stage.find(".gallery-toggle-desc");
     windowScreenThresholdForTouch = windowWidth / 3;
     startLoading();
     windowHeight = $(window).height();
@@ -56,6 +60,7 @@ var GalleryTheater = function(){
     })
 
      gt.switchBtn.on("click",gt.switchTheme);
+     gt.descriptionToggle.on("click", gt.toggleDescription)
      gt.stripPrevBtn.on("click", gt.scrollStripRight);
      gt.stripNextBtn.on("click", gt.scrollStripLeft);
 
@@ -230,6 +235,11 @@ var GalleryTheater = function(){
       }
    }
 
+   gt.toggleDescription = function(){
+    $(this).toggleClass("active");
+     gt.descriptionArea.toggleClass("active");
+   }
+
    var startLoading = function(){
     loadingProcess = 1;
     mainPicLoading = 0;
@@ -330,6 +340,12 @@ var GalleryTheater = function(){
       }
       mainPicLoading = 1;
     }
+    gt.descriptionArea.html("<p>" + currentPic.image.description + "</p>");
+    if(currentPic.image.description == null){
+      gt.descriptionArea.addClass("hide");
+    }else{
+      gt.descriptionArea.removeClass("hide");
+    }
     calculateHeight(gt.imageContainer.find(".gal-active"));
     gt.thumbStrip.find("li.active").removeClass("active");
     gt.thumbStrip.find("li[data-index=" + currentPic.index + "]").addClass("active");
diff --git a/app/assets/stylesheets/theater.css b/app/assets/stylesheets/theater.css
index 237a024..83e586e 100644
--- a/app/assets/stylesheets/theater.css
+++ b/app/assets/stylesheets/theater.css
@@ -1,402 +1,457 @@
+@import url(https://fonts.googleapis.com/css?family=Roboto);
+
 /* Reset and basic styles */
 
 body {
-    overflow-x: hidden;
+  overflow-x: hidden;
 }
 
 *,
 *:before,
 *:after {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .gallery-mode-on {
-    /*overflow-y: hidden;*/
+  /*overflow-y: hidden;*/
 }
+
+
 /* Gallery */
 
 #gallery-theater-stage {
-    display: none;
+  display: none;
 }
 
 #gallery-theater-stage > .gallery {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background: #000;
-    z-index: 2000;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: #000;
+  z-index: 2000;
 }
 
 .gallery-loader {
-    padding: 10px;
-    position: absolute;
-    display: none;
-    left: 50%;
-    top: 10px;
-    -webkit-transform: translate(-50%, 50%);
-    transform: translate(-50%, 50%);
-    border-radius: 2px;
-    z-index: 2000;
-    background-color: rgba(0, 0, 0, .6);
-    transition: .3s all;
+  padding: 10px;
+  position: absolute;
+  display: none;
+  left: 50%;
+  top: 10px;
+  -webkit-transform: translate(-50%, 50%);
+  transform: translate(-50%, 50%);
+  border-radius: 2px;
+  z-index: 2000;
+  background-color: rgba(0, 0, 0, .6);
+  -webkit-transition: .3s all;
+  transition: .3s all;
 }
 
 .spinner {
-    margin: 0 auto;
-    width: 50px;
-    height: 20px;
-    text-align: center;
-    font-size: 10px;
+  margin: 0 auto;
+  width: 50px;
+  height: 20px;
+  text-align: center;
+  font-size: 10px;
 }
 
 .spinner > div {
-    background-color: #e8e8e8;
-    height: 100%;
-    width: 4px;
-    display: inline-block;
-    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
-    animation: stretchdelay 1.2s infinite ease-in-out;
+  background-color: #e8e8e8;
+  height: 100%;
+  width: 4px;
+  display: inline-block;
+  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+  animation: stretchdelay 1.2s infinite ease-in-out;
 }
 
 .spinner .rect2 {
-    -webkit-animation-delay: -1.1s;
-    animation-delay: -1.1s;
+  -webkit-animation-delay: -1.1s;
+  animation-delay: -1.1s;
 }
 
 .spinner .rect3 {
-    -webkit-animation-delay: -1.0s;
-    animation-delay: -1.0s;
+  -webkit-animation-delay: -1.0s;
+  animation-delay: -1.0s;
 }
 
 .spinner .rect4 {
-    -webkit-animation-delay: -0.9s;
-    animation-delay: -0.9s;
+  -webkit-animation-delay: -0.9s;
+  animation-delay: -0.9s;
 }
 
 .spinner .rect5 {
-    -webkit-animation-delay: -0.8s;
-    animation-delay: -0.8s;
+  -webkit-animation-delay: -0.8s;
+  animation-delay: -0.8s;
 }
 
 @-webkit-keyframes stretchdelay {
-    0%, 40%, 100% {
-        -webkit-transform: scaleY(0.4)
-    }
-    20% {
-        -webkit-transform: scaleY(1.0)
-    }
+  0%,
+  40%,
+  100% {
+    -webkit-transform: scaleY(0.4)
+  }
+  20% {
+    -webkit-transform: scaleY(1.0)
+  }
 }
 
 @keyframes stretchdelay {
-    0%, 40%, 100% {
-        transform: scaleY(0.4);
-        -webkit-transform: scaleY(0.4);
-    }
-    20% {
-        transform: scaleY(1.0);
-        -webkit-transform: scaleY(1.0);
-    }
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    -webkit-transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1.0);
+    -webkit-transform: scaleY(1.0);
+  }
 }
 
 .gallery-actions {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    cursor: pointer;
-    background: rgba(255, 255, 255, .7);
-    border-radius: 2px;
-    z-index: 2000;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  cursor: pointer;
+  background: rgba(255, 255, 255, .7);
+  border-radius: 2px;
+  z-index: 2000;
 }
 
 .gallery-actions-btn {
-    padding: 8px 12px 8px 10px;
-    display: inline-block;
+  padding: 8px 12px 8px 10px;
+  display: inline-block;
+}
+
+.gallery-actions-btn:hover {
+  color: #fff;
 }
 
 .touch .gallery-actions-btn {
-    padding: 12px 15px 12px 15px;
+  padding: 12px 15px 12px 15px;
+}
+
+.gallery-toggle-desc.active {
+  color: #fff;
 }
 
 .gallery-theme-switch {
-    border-right: 1px solid rgba(255, 255, 255, .2);
+  border-right: 1px solid rgba(255, 255, 255, .2);
+  border-left: 1px solid rgba(255, 255, 255, .2);
 }
 
 .gallery-close {
-    color: #000;
-}
-
-.gallery-theme-switch:hover,
-.gallery-close:hover {
-    color: #fff;
+  color: #000;
 }
 
 .touch .image-container {
-    height: 100%;
-    padding-bottom: 150px;
-    z-index: 800;
+  height: 100%;
+  padding-bottom: 150px;
+  z-index: 800;
 }
 
 .gallery-image {
-    position: fixed;
-    left: 50%;
-    top: 50%;
-    width: 60%;
-    height: auto;
-    cursor: pointer;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  width: 60%;
+  height: auto;
+  cursor: pointer;
 }
 
 .no-touch .gallery-image {
-    -webkit-transition: .3s all;
-    transition: .3s all;
+  -webkit-transition: .3s all;
+  transition: .3s all;
 }
 
 .gal-prev {
-    display: none;
-    left: 0;
-    -webkit-transform: translate(-95%, -50%);
-    transform: translate(-95%, -50%);
+  display: none;
+  left: 0;
+  -webkit-transform: translate(-95%, -50%);
+  transform: translate(-95%, -50%);
 }
 
 .gal-prev:hover {
-    -webkit-transform: translate(-94%, -50%);
-    transform: translate(-94%, -50%);
+  -webkit-transform: translate(-94%, -50%);
+  transform: translate(-94%, -50%);
 }
 
 .gal-next {
-    display: none;
-    left: auto;
-    right: 0;
-    -webkit-transform: translate(95%, -50%);
-    transform: translate(95%, -50%);
+  display: none;
+  left: auto;
+  right: 0;
+  -webkit-transform: translate(95%, -50%);
+  transform: translate(95%, -50%);
 }
 
 .gal-next:hover {
-    -webkit-transform: translate(94%, -50%);
-    transform: translate(94%, -50%);
+  -webkit-transform: translate(94%, -50%);
+  transform: translate(94%, -50%);
 }
 
 .gal-inactive {
-    -webkit-transition: .3s all;
-    transition: .3s all;
-    opacity: .3;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  opacity: .3;
 }
 
 .gal-inactive:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .gal-active {
-    display: none;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
+  display: none;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
 }
+
+
 /* Thumbnails */
+
 .gallery-thumb-toggle {
-    position: absolute;
-    bottom: -1000px;
+  position: absolute;
+  bottom: -1000px;
 }
+
 .gallery-thumb-wrap {
-    overflow-y: hidden;
-    overflow-x: hidden;
-    list-style: none;
-    margin: 0 auto;
-    padding: 10px 0;
-    text-align: center;
-    white-space: nowrap;
-    position: absolute;
-    left: 50%;
-    bottom: 0;
-    -webkit-transition: .3s all;
-    transition: .3s all;
+  overflow-y: hidden;
+  overflow-x: hidden;
+  list-style: none;
+  margin: 0 auto;
+  padding: 10px 0;
+  text-align: center;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
 }
 
 .gallery-item {
-    margin-right: 1em;
-    display: inline-block;
+  margin-right: 1em;
+  display: inline-block;
 }
 
 .gallery-item.active {
-    border-radius: 2px;
-    border-radius: 0.125rem;
-    border: 5px solid #fff;
+  border-radius: 2px;
+  border-radius: 0.125rem;
+  border: 5px solid #fff;
 }
 
 .gallery-thumb {
-    width: 50px;
-    height: 50px;
-    opacity: .5;
-    -webkit-transition: .3s opacity;
-    transition: .3s opacity;
+  width: 50px;
+  height: 50px;
+  opacity: .5;
+  -webkit-transition: .3s opacity;
+  transition: .3s opacity;
 }
 
 .gallery-thumb:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .gallery-thumb-container {
-    height: 80px;
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    background: #1b1b1b;
+  height: 80px;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: #1b1b1b;
 }
 
 .gallery-thumb-navs {
-    display: none;
+  display: none;
 }
 
 .gallery-thumb-navs.show {
-    display: block;
+  display: block;
 }
 
 .gallery-thumb-nav {
-    position: absolute;
-    cursor: pointer;
-    font-size: 1.4rem;
-    color: rgba(255, 255, 255, .7);
-    background: #222;
-    height: 80px;
-    line-height: 80px;
-    width: 50px;
-    text-align: center;
-    z-index: 900;
+  position: absolute;
+  cursor: pointer;
+  font-size: 1.4rem;
+  color: rgba(255, 255, 255, .7);
+  background: #222;
+  height: 80px;
+  line-height: 80px;
+  width: 50px;
+  text-align: center;
+  z-index: 900;
 }
 
 .gallery-thumb-nav:hover {
-    color: #fff;
+  color: #fff;
 }
 
 .gallery-thumb-prev {
-    left: 0;
+  left: 0;
 }
 
 .gallery-thumb-next {
-    right: 0;
+  right: 0;
 }
 
 .active .gallery-thumb {
-    opacity: 1;
+  opacity: 1;
 }
+
+.gallery-img-desc {
+  color: #000;
+  line-height: 1.7;
+  padding: 1rem 1.5rem;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.8125rem;
+  position: fixed;
+  top: 4rem;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 2px;
+  width: 90%;
+  background-color: #bdbdbd;
+  opacity: 0;
+  -webkit-transition: .3s all;
+  transition: .3s all;
+  z-index: 1000;
+}
+
+.gallery-img-desc p {
+  overflow: hidden;
+  height: 90px;
+}
+
+.gallery-img-desc:empty {
+  display: none;
+}
+
+.gallery-img-desc.active {
+  opacity: 1;
+}
+
+
 /* White theme */
 
 .theme-white #gallery-theater-stage > .gallery {
-    background-color: #fffdf7;
+  background-color: #fffdf7;
 }
 
 .theme-white .gallery-actions {
-    background-color: #eee;
-    border: 1px solid #ddd;
+  background-color: #eee;
+  border: 1px solid #ddd;
+}
+
+.theme-white .gallery-toggle-desc.active {
+  color: #ff4444;
 }
 
 .theme-white .gallery-theme-switch {
-    border-right: 1px solid #ddd;
+  border-right: 1px solid #ddd;
+  border-left: 1px solid #ddd;
 }
 
 .theme-white .gallery-thumb-toggle,
 .theme-white .gallery-thumb-toggle:before,
 .theme-white .gallery-thumb-toggle:after {
-    color: #777;
-    border-color: #aaa;
+  color: #777;
+  border-color: #aaa;
 }
 
 .theme-white .gallery-thumb-container {
-    background-color: #e2e2e2;
-    border-top: 1px solid #c7c7c7;
+  background-color: #e2e2e2;
+  border-top: 1px solid #c7c7c7;
 }
 
 .theme-white .gallery-actions-btn {
-    color: #777;
+  color: #777;
 }
 
 .theme-white .gallery-actions-btn:hover {
-    color: #ff4444;
+  color: #ff4444;
 }
 
 .theme-white .gallery-item.active {
-    border-color: #ff4444;
+  border-color: #ff4444;
 }
 
 .theme-white .gallery-thumb-nav {
-    color: #777;
-    background-color: #eee;
+  color: #777;
+  background-color: #eee;
 }
 
 .theme-white .gallery-thumb-prev {
-    border-right: 1px solid #c7c7c7;
+  border-right: 1px solid #c7c7c7;
 }
+
 .theme-white .gallery-thumb-next {
-    border-left: 1px solid #c7c7c7;
+  border-left: 1px solid #c7c7c7;
 }
 
 .theme-white .gallery-thumb-nav:hover {
-    color: #ff4444;
+  color: #ff4444;
+}
+
+.theme-white .gallery-img-desc {
+  background-color: #eee;
 }
 
 .theme-white .gallery-loader {
-    background-color: #777;
+  background-color: #777;
 }
 
 .theme-white .spinner > div {
-    color: #ff4444;
+  color: #ff4444;
 }
 
 @media screen and (max-width: 768px) {
-
-    .gal-prev {
-        -webkit-transform: translate(-101%, -50%);
-        transform: translate(-101%, -50%);
-    }
-
-    .gal-next {
-        -webkit-transform: translate(101%, -50%);
-        transform: translate(101%, -50%);
-    }
-
-    .gallery-thumb-toggle {
-        bottom: 50px;
-        left: 0;
-        color: #fff;
-        width: 100%;
-        text-align: center;
-        -webkit-transition: .1s all;
-        transition: .1s all;
-    }
-
-    .gallery-thumb-toggle.up {
-        bottom: 96px;
-    }
-
-    .gallery-thumb-toggle:before {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 10%;
-        margin: auto;
-        width: 38%;
-        border-top: 1px solid rgba(255, 255, 255, .2);
-        height: 1px;
-    }
-
-    .gallery-thumb-toggle:after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        right: 10%;
-        margin: auto;
-        width: 38%;
-        border-top: 1px solid rgba(255, 255, 255, .2);
-        height: 1px;
-    }
-
-    .gallery-thumb-container {
-        bottom: -1000px;
-        -webkit-transition: .1s all;
-        transition: .1s all;
-    }
-    .gallery-thumb-container.show {
-        bottom: 0;
-    }
+  .gal-prev {
+    -webkit-transform: translate(-101%, -50%);
+    transform: translate(-101%, -50%);
+  }
+  .gal-next {
+    -webkit-transform: translate(101%, -50%);
+    transform: translate(101%, -50%);
+  }
+  .gallery-thumb-toggle {
+    bottom: 50px;
+    left: 0;
+    color: #fff;
+    width: 100%;
+    text-align: center;
+    -webkit-transition: .1s all;
+    transition: .1s all;
+  }
+  .gallery-thumb-toggle.up {
+    bottom: 96px;
+  }
+  .gallery-thumb-toggle:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 10%;
+    margin: auto;
+    width: 38%;
+    border-top: 1px solid rgba(255, 255, 255, .2);
+    height: 1px;
+  }
+  .gallery-thumb-toggle:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 10%;
+    margin: auto;
+    width: 38%;
+    border-top: 1px solid rgba(255, 255, 255, .2);
+    height: 1px;
+  }
+  .gallery-thumb-container {
+    bottom: -1000px;
+    -webkit-transition: .1s all;
+    transition: .1s all;
+  }
+  .gallery-thumb-container.show {
+    bottom: 0;
+  }
 }
diff --git a/app/views/galleries/show.html.erb b/app/views/galleries/show.html.erb
index 25834f0..01300b6 100644
--- a/app/views/galleries/show.html.erb
+++ b/app/views/galleries/show.html.erb
@@ -15,6 +15,9 @@
       </div>
     </div>
     <div class="gallery-actions">
+      <div class="gallery-toggle-desc gallery-actions-btn">
+        <i class="fa fa-comment"></i>
+      </div>
       <div class="gallery-theme-switch gallery-actions-btn">
         <i class="fa fa-circle"></i>
       </div>
@@ -38,6 +41,10 @@
         <ul class="gallery-thumb-wrap">
         </ul>
     </div>
+    <div class="gallery-img-desc">
+      <div class="gallery-img-desc-inner">
+      </div>
+    </div>
     </div>
 </div>