From 56e74239d6b34df8f30ef046f0b0ff4ff0866a71 Mon Sep 17 00:00:00 2001
From: =Corey Hulen <corey@hulen.com>
Date: Sun, 14 Jun 2015 23:53:32 -0800
Subject: first commit

---
 web/react/components/view_image.jsx | 189 ++++++++++++++++++++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 web/react/components/view_image.jsx

(limited to 'web/react/components/view_image.jsx')

diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
new file mode 100644
index 000000000..7d0f0d8a9
--- /dev/null
+++ b/web/react/components/view_image.jsx
@@ -0,0 +1,189 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var Client = require('../utils/client.jsx');
+var utils = require('../utils/utils.jsx');
+
+module.exports = React.createClass({
+    handleNext: function() {
+        var id = this.state.imgId + 1;
+        if (id > this.props.filenames.length-1) {
+            id = 0;
+        }
+        this.setState({ imgId: id });
+        this.loadImage(id);
+    },
+    handlePrev: function() {
+        var id = this.state.imgId - 1;
+        if (id < 0) {
+            id = this.props.filenames.length-1;
+        }
+        this.setState({ imgId: id });
+        this.loadImage(id);
+    },
+    componentWillReceiveProps: function(nextProps) {
+        this.setState({ imgId: nextProps.startId });
+    },
+    loadImage: function(id) {
+        if (this.state.loaded[id] || this.state.images[id]) return;
+
+        var src = "";
+        if (this.props.imgCount > 0) {
+            src = this.props.filenames[id];
+        } else {
+            var fileInfo = utils.splitFileLocation(this.props.filenames[id]);
+            src = fileInfo['path'] + '_preview.jpg';
+        }
+
+        var self = this;
+        var img = new Image();
+        img.load(src,
+            function(){
+                var progress = self.state.progress;
+                progress[id] = img.completedPercentage;
+                self.setState({ progress: progress });
+        });
+        img.onload = function(imgid) {
+            return function() {
+                var loaded = self.state.loaded;
+                loaded[imgid] = true;
+                self.setState({ loaded: loaded });
+            };
+        }(id);
+        var images = this.state.images;
+        images[id] = img;
+        this.setState({ images: images });
+    },
+    componentDidUpdate: function() {
+        if (this.refs.image) {
+            var height = $(window).height()-100;
+            if (this.state.loaded[this.state.imgId]) {
+                $(this.refs.imageWrap.getDOMNode()).removeClass("default");
+                $(this.refs.image.getDOMNode()).css("max-height",height);
+            }
+        }
+    },
+    componentDidMount: function() {
+        var self = this;
+        $("#"+this.props.modalId).on('shown.bs.modal', function() {
+            self.setState({ viewed: true });
+            self.loadImage(self.state.imgId);
+        })
+
+        $(this.refs.modal.getDOMNode()).click(function(e){
+            if (e.target == this || e.target == self.refs.imageBody.getDOMNode()) {
+                $('.image_modal').modal('hide');
+            }
+        });
+
+        $(this.refs.imageWrap.getDOMNode()).hover(
+            function() {
+                $(self.refs.imageFooter.getDOMNode()).addClass("footer--show");
+            }, function() {
+                $(self.refs.imageFooter.getDOMNode()).removeClass("footer--show");
+            }
+        );
+    },
+    getPublicLink: function(e) {
+        data = {};
+        data["channel_id"] = this.props.channelId;
+        data["user_id"] = this.props.userId;
+        data["filename"] = this.props.filenames[this.state.imgId];
+        Client.getPublicLink(data,
+            function(data) {
+                window.open(data["public_link"]);
+            }.bind(this),
+            function(err) {
+            }.bind(this)
+        );
+    },
+    getInitialState: function() {
+        var loaded = [];
+        var progress = [];
+        for (var i = 0; i < this.props.filenames.length; i ++) {
+            loaded.push(false);
+            progress.push(0);
+        }
+        return { imgId: this.props.startId, viewed: false, loaded: loaded, progress: progress, images: {} };
+    },
+    render: function() {
+        if (this.props.filenames.length < 1 || this.props.filenames.length-1 < this.state.imgId) {
+            return <div/>;
+        }
+
+        var fileInfo = utils.splitFileLocation(this.props.filenames[this.state.imgId]);
+
+        var name = fileInfo['name'] + '.' + fileInfo['ext'];
+
+        var loading = "";
+        var bgClass = "";
+        var img = {};
+        if (!this.state.loaded[this.state.imgId]) {
+            var percentage = Math.floor(this.state.progress[this.state.imgId]);
+            loading = (
+                <div key={name+"_loading"}>
+                    <img ref="placeholder" className="loader-image" src="/static/images/load.gif" />
+                    { percentage > 0 ?
+                    <span className="loader-percent" >{"Downloading " + percentage + "%"}</span>
+                    : ""}
+                </div>
+            );
+            bgClass = "black-bg";
+        } else if (this.state.viewed) {
+            for (var id in this.state.images) {
+                var info = utils.splitFileLocation(this.props.filenames[id]);
+                var preview_filename = "";
+                if (this.props.imgCount > 0) {
+                    preview_filename = this.props.filenames[this.state.imgId];
+                } else {
+                    preview_filename = info['path'] + '_preview.jpg';
+                }
+
+                var imgClass = "hidden";
+                if (this.state.loaded[id] && this.state.imgId == id) imgClass = "";
+
+                img[info['path']] = <a key={info['path']} className={imgClass} href={this.props.filenames[id]} target="_blank"><img ref="image" src={preview_filename}/></a>;
+            }
+        }
+
+        var imgFragment = React.addons.createFragment(img);
+
+        return (
+            <div className="modal fade image_modal" ref="modal" id={this.props.modalId} tabIndex="-1" role="dialog" aria-hidden="true">
+                <div className="modal-dialog modal-image">
+                    <div className="modal-content image-content">
+                        <div ref="imageBody" className="modal-body image-body">
+                            <div ref="imageWrap" className={"image-wrapper default " + bgClass}>
+                                <div className="modal-close" data-dismiss="modal"></div>
+                                {imgFragment}
+                                <div ref="imageFooter" className="modal-button-bar">
+                                    <span className="pull-left text">{"Image "+(this.state.imgId+1)+" of "+this.props.filenames.length}</span>
+                                    <div className="image-links">
+                                        { config.AllowPublicLink ?
+                                            <div>
+                                                <a href="#" className="text" data-title="Public Image" onClick={this.getPublicLink}>Get Public Link</a>
+                                                <span className="text"> | </span>
+                                            </div>
+                                        : "" }
+                                        <a href={this.props.filenames[id]} download={name} className="text">Download</a>
+                                    </div>
+                                </div>
+                                {loading}
+                            </div>
+                            { this.props.filenames.length > 1 ?
+                            <a className="modal-prev-bar" href="#" onClick={this.handlePrev}>
+                                <i className="image-control image-prev"/>
+                            </a>
+                            : "" }
+                            { this.props.filenames.length > 1 ?
+                            <a className="modal-next-bar" href="#" onClick={this.handleNext}>
+                                <i className="image-control image-next"/>
+                            </a>
+                            : "" }
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
-- 
cgit v1.2.3-1-g7c22