sphereGallery and supporting files

Initial Push.
RithwikAnand · Sep 15, 2014 · ea00ff2 · ea00ff2
1 parent 4071b4a
commit ea00ff2
Show file tree

Hide file tree

Showing 12 changed files with 997 additions and 0 deletions.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,30 @@
+/* Circle Gallery Styles*/
+
+.CG-container {
+    background : gray;
+}
+
+.CG-item {
+    background : black;
+    border: 1px solid white;
+}
+
+/* Sphere Gallery Styles*/
+
+.SG-container {
+    background : black;
+}
+
+.SG-item {
+      -webkit-box-reflect: below 2px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.75, transparent), to(#FFF));
+}
+
+.SG-sphere {
+ /*   -webkit-animation: rotateAnim linear 50s infinite alternate; */
+}
+
+@-webkit-keyframes rotateAnim {
+            0% {-webkit-transform: rotateY(0deg);}
+            50% {-webkit-transform: rotateY(360deg);}
+            100% {-webkit-transform: rotateY(0deg);}
+        }
diff --git a/imageViewer.html b/imageViewer.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>IMAGE VIEWER</title>
+        <script src = "js/SphereGallery.js"></script>
+        <link rel="stylesheet" href = "css/style.css">
+    </head>
+    <body>
+        <input type="file" id="files" name="files[]" multiple style="float:left"/>
+        <div id="container" style="position: absolute; top : 40px">
+            <div id = "sphere"></div>
+        </div>
+    </body>
+    <script>
+            var handleFileSelect = function(evt) {
+                var files = evt.target.files,
+                    imgCount = 0,
+                    imgLoadCount = 0,
+                    bProcessFiles = false,
+                    imageSrcs = [],
+                    i,f;
+
+                for (i = 0; f = files[i]; i++) {
+                    if (!f.type.match('image.*')) {
+                        continue;
+                    }
+                    imgCount++;
+                    var reader = new FileReader();                
+                    reader.onload = function (e) {
+                            imageSrcs.push(e.target.result);
+                            imgLoadCount++;
+                            if (bProcessFiles && imgLoadCount === imgCount) {
+                                addImagesToGallery(imageSrcs);                            
+                            }
+                    }; 
+                    bProcessFiles = true;
+                    reader.readAsDataURL(f);
+                }
+            };
+
+            var addImagesToGallery = function(imgSrcs) {
+                var i, src, imgEles = [];
+                for (i = 0; src = imgSrcs[i]; i++) {
+                    var imgEle = document.createElement('img');
+                    imgEle.setAttribute('src',src);
+                    imgEle.style.cssText = "height : 100%; width : 100%";
+                    imgEles.push({itemElement : imgEle});
+                }
+                sG.addItem(imgEles);
+            };
+            var height = window.innerHeight - 80,
+                width = window.innerWidth - 80;
+            var sG = new SphereGallery({
+                containerWidth : width + "px",
+                containerHeight : height + "px",
+                perspective : (width + 200) + "px",
+                orientation : "HORIZONTAL"
+            });
+
+            sG.placeAt('sphere');
+
+            window.onload = function () {
+                document.getElementById('files').addEventListener('change', handleFileSelect, false);
+            }
+        </script>
+</html>
diff --git a/img/0.jpg b/img/0.jpg
diff --git a/img/1.jpg b/img/1.jpg
diff --git a/img/2.jpg b/img/2.jpg
diff --git a/img/3.jpg b/img/3.jpg
diff --git a/img/4.jpg b/img/4.jpg
diff --git a/img/5.jpg b/img/5.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>Picture Gallery</title>
+    </head>
+    <body>
+        <!--<div id = "CGPlaceHolder" style = "position: absolute;"></div>-->
+        <div id = "SGPlaceHolder" style = "position: absolute;"></div>
+        <div id = "toolbarPanel" style = "position: absolute; bottom: 20px">
+            <button onclick="fnToggleAnimation()">Toggle Animation</button>
+            <button onclick="fnToggleOrientation()">Toggle Orientation</button>
+        </div>
+    </body>
+    <!--<script src = "js/CircleGallery.js"></script>-->
+    <script src = "js/SphereGallery.js"></script>
+    <link rel="stylesheet" href = "css/style.css">
+    <style>
+        body {
+            background : black;
+        }
+        .rotateHorizontally {
+            -webkit-animation: rotateHorizontal linear 50s infinite alternate;
+        }
+        .rotateVertically {
+            -webkit-animation: rotateVertical linear 50s infinite alternate;
+        }
+
+        @-webkit-keyframes rotateHorizontal {
+            0% {-webkit-transform: rotateY(0deg);}
+            50% {-webkit-transform: rotateY(360deg);}
+            100% {-webkit-transform: rotateY(0deg);}
+        }
+
+        @-webkit-keyframes rotateVertical {
+            0% {-webkit-transform: rotateX(0deg);}
+            50% {-webkit-transform: rotateX(360deg);}
+            100% {-webkit-transform: rotateX(0deg);}
+        }
+    </style>
+    <script>
+        /*var cG = new CircleGallery({
+            side : "700px"
+        });
+        
+        cG.placeAt('CGPlaceHolder');*/
+
+        var height = window.innerHeight - 80,
+            width = window.innerWidth - 80;
+        var sG = new SphereGallery({
+                containerWidth : width + "px",
+                containerHeight : height + "px",
+                perspective : (width + 200) + "px",
+                orientation : "HORIZONTAL"
+            });
+
+            sG.placeAt('SGPlaceHolder');
+        document.getElementById('toolbarPanel').style.cssText += "left: " + (width - 60) / 2 + "px";
+
+        var addItemsToGallery = function (n) {
+            var noOfImgs = 6;
+            var itemElems = [];
+
+            for (var i = 0; i < n; i++) {
+                var img1 = document.createElement('img');
+                var img2 = document.createElement('img');
+
+                img1.setAttribute('src',"img/" + (i % noOfImgs) + ".jpg");
+                img1.style.cssText = "height : 100%; width : 100%";
+
+                img2.setAttribute('src',"img/" + (i  % noOfImgs) + ".jpg");
+                img2.style.cssText = "height : 100%; width : 100%";
+
+                itemElems.push({itemElement : img2});
+                //cG.addItem({itemElement : img1});
+            }
+            sG.addItem(itemElems);            
+        };
+        addItemsToGallery(6);  
+
+        function fnToggleOrientation() {
+            var sphere = document.getElementsByClassName('SG-sphere')[0];
+            var orientation = sG._settings.orientation;
+            var rotateClass = orientation === 'HORIZONTAL' ? 'rotateHorizontally' : 'rotateVertically';
+            sG.setOrientation(orientation === "HORIZONTAL" ? "VERTICAL" : "HORIZONTAL");
+            if (sphere.classList.contains(rotateClass)) {
+                sphere.classList.remove(rotateClass);
+                sphere.classList.add(rotateClass === 'rotateHorizontally' ? 'rotateVertically' : 'rotateHorizontally');
+            }
+        };
+
+        function fnToggleAnimation() {
+            var sphere = document.getElementsByClassName('SG-sphere')[0];
+            var orientation = sG._settings.orientation;
+            var rotateClass = orientation === 'HORIZONTAL' ? 'rotateHorizontally' : 'rotateVertically';
+            if (sphere.classList.contains(rotateClass)) {
+                sphere.classList.remove(rotateClass);
+            } else {
+                sphere.classList.add(rotateClass);
+            }
+        };
+    </script>
+</html>
diff --git a/js/CircleGallery.js b/js/CircleGallery.js
@@ -0,0 +1,151 @@
+/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
+/*global brackets: true, $, window, document, navigator, requestAnimationFrame, cancelAnimationFrame */
+
+(function (un) {
+    "use strict";
+
+    var CircleGallery = function (opts) {
+        var options = opts || {};
+
+        this._containerSide = parseInt(options.side.replace("px", ""), 10);
+
+        this.styles = {
+            containerHeight : options.side,
+            containerWidth : options.side
+        };
+
+        this.eleRefs = {
+            items : []
+        };
+
+        this.eleRefs.containerEle = this._drawSkeleton();
+    };
+
+    CircleGallery.prototype = {
+
+        placeAt : function (id) {
+            var ele = document.getElementById(id);
+            ele.appendChild(this.eleRefs.containerEle);
+        },
+
+        addItem : function (itemObj) {
+            if (itemObj instanceof Array) {
+                var i;
+                for (i = 0; i < itemObj.length; i++) {
+                    this.addItem(itemObj[i]);
+                }
+                return;
+            }
+
+            var itemWrapper = this._getItemWrapper(itemObj);
+            this.eleRefs.items.push(itemWrapper);
+
+            var container = this.eleRefs.containerEle;
+            container.appendChild(itemWrapper);
+            this._circlify();
+        },
+
+        startAnimation : function () {
+            var time = Date.now();
+            if (this._startTime === undefined) {
+                this._startTime = time;
+            }
+            var adder = (time - this._startTime) / 1000;
+            var points = this._getCirclePoints(this.eleRefs.items.length, this._innerRadius, adder);
+            this._drawItemsAt(points);
+            this._ANIMATION_FRAME_ID = requestAnimationFrame(this.startAnimation.bind(this));
+        },
+
+        stopAnimation : function () {
+            cancelAnimationFrame(this._ANIMATION_FRAME_ID);
+        },
+
+        _drawSkeleton : function () {
+            var containerEle = document.createElement('div');
+            containerEle.style.cssText += this._getContainerStyles();
+            containerEle.setAttribute('class', 'CG-container');
+            return containerEle;
+        },
+
+        _getItemWrapper : function (itemObj) {
+            var item = itemObj.itemElement;
+            var itemWrapper = document.createElement('div');
+            itemWrapper.style.cssText += this._getItemStyles();
+            itemWrapper.setAttribute('class', 'CG-item');
+            itemWrapper.appendChild(item);
+            return itemWrapper;
+        },
+
+        _getContainerStyles : function () {
+            var sStyle = ["height : ", this.styles.containerHeight,
+                          ";width : ", this.styles.containerWidth
+                         ].join("");
+            return sStyle;
+        },
+
+        _getItemStyles : function () {
+            var sStyle = ["position : absolute"].join("");
+            return sStyle;
+        },
+
+        _setTransformValue : function (ele, xValue, yValue, zValue) {
+            var vendorProperty = [{"WebkitTransform" : "-webkit-transform"},
+                                {"MozTransform" : "-moz-transform"},
+                                {"MsTransform" : "-ms-transform"},
+                                {"OTransform" : "-o-transform"}
+                               ];
+
+            var transformPropertyString = "transform";
+            var i;
+            for (i = 0; i < vendorProperty.length; i++) {
+                if (ele.style.hasOwnProperty(Object.keys(vendorProperty[i])[0])) {
+                    transformPropertyString = vendorProperty[i][Object.keys(vendorProperty[i])[0]];
+                }
+            }
+            var sXValue = xValue + 'px';
+            var sYValue = yValue + 'px';
+            var sZValue = zValue + 'px';
+            ele.style.cssText = ele.style.cssText + " " + transformPropertyString + ": translate3d(" + sXValue + "," + sYValue + "," + sZValue + ");";
+        },
+
+        _circlify : function () {
+            var items = this.eleRefs.items;
+            var n = items.length;
+            var contArea = this._containerSide * this._containerSide;
+            var fillArea = Math.max(contArea / n, contArea * 0.4);
+            this._itemSide = Math.sqrt(fillArea / n);
+            this._innerRadius = (this._containerSide / 2) - (this._itemSide / 2);
+            var points = this._getCirclePoints(n, this._innerRadius, 0);
+            this._drawItemsAt(points);
+        },
+
+        _drawItemsAt : function (points) {
+            var items = this.eleRefs.items;
+            var i;
+            for (i = 0; i < items.length; i++) {
+                var item = items[i];
+                var xValue = parseFloat((points[i].x - (this._itemSide / 2) + this._containerSide / 2).toFixed(6), 10);
+                var yValue = parseFloat((points[i].y - (this._itemSide / 2) + this._containerSide / 2).toFixed(6), 10);
+                item.style.cssText += "width : " + this._itemSide + "px" + ";height : " + this._itemSide + "px;";
+                this._setTransformValue(item, xValue, yValue, 0);
+            }
+        },
+
+        _getCirclePoints : function (n, radius, startAngle) {
+            var points = [];
+            var angle = (2 * Math.PI / n);
+            var i;
+            for (i = 0; i < n; i++) {
+                var point = {};
+                point.x = radius * Math.cos(angle * i + startAngle);
+                point.y = radius * Math.sin(angle * i + startAngle);
+                points.push(point);
+            }
+            return points;
+        }
+
+    };
+
+    window.CircleGallery = CircleGallery;
+
+}(undefined));