Merge branch 'image-caption' of git://github.com/c00kiemon5ter/react-image-lightbox into captions

Author: fritz-c

README.md

@@ -98,7 +98,8 @@ animationOnKeyInput | bool   | `false`        |          | Disable animation on
 animationDuration   | number | `300`          |          | Animation duration (ms)
 keyRepeatLimit      | number | `180`          |          | Required interval of time (ms) between key actions (prevents excessively fast navigation of images)
 keyRepeatKeyupBonus | number | `40`           |          | Amount of time (ms) restored after each keyup (makes rapid key presses slightly faster than holding down the key to navigate images)
-imageTitle          | string |                |          | Image title
+imageTitle          | node   |                |          | Image title
+imageCaption        | node   |                |          | Image caption - a small piece of text that describes the image
 toolbarButtons      | node[] |                |          | Array of custom toolbar buttons
 reactModalStyle     | Object | `{}`           |          | Set z-index style, etc., for the parent react-modal (format: https://github.com/reactjs/react-modal#styles )
 imagePadding        | number | `10`           |          | Padding (px) between the edge of the window and the lightbox

src/examples/cats/app.js

@@ -61,6 +61,33 @@ const titles = [
     </span>),
 ];
 
+const captions = [
+    '',
+    'Sad kitten wants a hug',
+    (<p>
+        .. not in the&nbsp;
+        <em>
+            mood
+        </em>
+        &nbsp;for games right now
+    </p>),
+    (<p>
+        Meow!? What do you mean by «Earth is&nbsp;
+        <strong>
+            round
+        </strong>
+        »? Are you&nbsp;
+        <em>
+            absolutely
+        </em>
+        &nbsp;
+        <strong>
+            sure
+        </strong>
+        &nbsp;you know what you&#39;re talking about?
+    </p>),
+];
+
 const App = React.createClass({
     getInitialState() {
         return {
@@ -98,6 +125,7 @@ const App = React.createClass({
                     onMoveNextRequest={this.moveNext}
 
                     imageTitle={titles[this.state.index]}
+                    imageCaption={captions[this.state.index]}
                 />
             );
         }

src/react-image-lightbox.js

@@ -36,6 +36,14 @@ if (_ieVersion < 10) {
     };
 }
 
+function handleCaptionMousewheel(event) {
+    event.stopPropagation();
+}
+
+function handleCaptionMouseDown(event) {
+    event.stopPropagation();
+}
+
 class ReactImageLightbox extends Component {
     constructor(props) {
         super(props);
@@ -84,6 +92,8 @@ class ReactImageLightbox extends Component {
         this.requestClose             = this.requestClose.bind(this);
         this.requestMoveNext          = this.requestMoveNext.bind(this);
         this.requestMovePrev          = this.requestMovePrev.bind(this);
+        this.handleCaptionMousewheel  = handleCaptionMousewheel;
+        this.handleCaptionMouseDown   = handleCaptionMouseDown;
     }
 
     componentWillMount() {
@@ -1149,6 +1159,21 @@ class ReactImageLightbox extends Component {
                             </li>
                         </ul>
                     </div>
+
+                    {!this.props.imageCaption ? '' :
+                    <div // Image caption
+                        onWheel={this.handleCaptionMousewheel}
+                        onMouseDown={this.handleCaptionMouseDown}
+                        className={`ril-caption ${styles.caption}`}
+                    >
+                        <div
+                            className={`ril-caption-content ${styles.captionContent}`}
+                        >
+                            {this.props.imageCaption}
+                        </div>
+                    </div>
+                    }
+
                 </div>
             </Modal>
         );
@@ -1241,6 +1266,9 @@ ReactImageLightbox.propTypes = {
     // Image title
     imageTitle: PropTypes.node,
 
+    // Image caption
+    imageCaption: PropTypes.node,
+
     //-----------------------------
     // Lightbox style
     //-----------------------------

src/style.scss

@@ -1,4 +1,5 @@
 $toolbarHeight: 50px;
+$maxCaptionHeight: 150px;
 
 @keyframes closeWindow {
     0%   { opacity: 1; }
@@ -94,17 +95,32 @@ $toolbarHeight: 50px;
     background-size: cover;
 }
 
+.caption,
 .toolbar {
     background-color: rgba(0, 0, 0, 0.5);
     position: absolute;
     left: 0;
-    top: 0;
     right: 0;
-    height: $toolbarHeight;
     display: flex;
     justify-content: space-between;
 }
 
+.caption {
+    bottom: 0;
+    max-height: $maxCaptionHeight;
+    overflow: auto;
+
+    .captionContent {
+        padding: 10px 20px;
+        color: #FFF;
+    }
+}
+
+.toolbar {
+    top: 0;
+    height: $toolbarHeight;
+}
+
 .toolbarSide {
     height: $toolbarHeight;
     margin: 0;

src/util.js

@@ -18,7 +18,7 @@ export function translate(str, replaceStrings = null) {
 
     let translated = str;
     if (replaceStrings) {
-        Object.keys(replaceStrings).forEach(placeholder => {
+        Object.keys(replaceStrings).forEach((placeholder) => {
             translated = translated.replace(placeholder, replaceStrings[placeholder]);
         });
     }