Refactor to ES6

src/Panolens.js

@@ -4,4 +4,27 @@
  * @namespace PANOLENS
  */
 
-var PANOLENS = { REVISION: '10-dev' };
+export * from './Constants';
+export { DataImage } from './DataImage';
+export { ImageLoader } from './loaders/ImageLoader';
+export { TextureLoader } from './loaders/TextureLoader';
+export { CubeTextureLoader } from './loaders/CubeTextureLoader';
+export { Media } from './media/Media';
+export { Reticle } from './interface/Reticle';
+export { Infospot } from './infospot/Infospot';
+export { Widget } from './widget/Widget';
+export { Panorama } from './panorama/Panorama';
+export { ImagePanorama } from './panorama/ImagePanorama';
+export { EmptyPanorama } from './panorama/EmptyPanorama';
+export { CubePanorama } from './panorama/CubePanorama';
+export { BasicPanorama } from './panorama/BasicPanorama';
+export { VideoPanorama } from './panorama/VideoPanorama';
+export { GoogleStreetviewPanorama } from './panorama/GoogleStreetviewPanorama';
+export { LittlePlanet } from './panorama/LittlePlanet';
+export { ImageLittlePlanet } from './panorama/ImageLittlePlanet';
+export { CameraPanorama } from './panorama/CameraPanorama';
+export { Viewer } from './viewer/Viewer';
+
+// expose TWEEN
+import TWEEN from '@tweenjs/tween.js';
+window.TWEEN = TWEEN;

src/loaders/CubeTextureLoader.js

@@ -0,0 +1,79 @@
+import { ImageLoader } from './ImageLoader.js';
+import 'three';
+
+/**
+ * Cube Texture Loader based on {@link https://github.com/mrdoob/three.js/blob/master/src/loaders/CubeTextureLoader.js}
+ * @memberOf PANOLENS
+ * @namespace
+ */
+const CubeTextureLoader = {
+
+	/**
+	* Load 6 images as a cube texture
+	* @param  {array}   urls        - Array with 6 image urls
+	* @param  {function} onLoad     - On load callback
+	* @param  {function} onProgress - In progress callback
+	* @param  {function} onError    - On error callback
+	* @return {THREE.CubeTexture}   - Cube texture
+	*/
+   load: function ( urls, onLoad, onProgress, onError ) {
+
+	   var texture, loaded, progress, all, loadings;
+
+	   texture = new THREE.CubeTexture( [] );
+
+	   loaded = 0;
+	   progress = {};
+	   all = {};
+
+	   urls.map( function ( url, index ) {
+
+		   ImageLoader.load( url, function ( image ) {
+
+			   texture.images[ index ] = image;
+
+			   loaded++;
+
+			   if ( loaded === 6 ) {
+
+				   texture.needsUpdate = true;
+
+				   onLoad && onLoad( texture );
+
+			   }
+
+		   }, function ( event ) {
+
+			   progress[ index ] = { loaded: event.loaded, total: event.total };
+
+			   all.loaded = 0;
+			   all.total = 0;
+			   loadings = 0;
+
+			   for ( var i in progress ) {
+
+				   loadings++;
+				   all.loaded += progress[ i ].loaded;
+				   all.total += progress[ i ].total;
+
+			   }
+
+			   if ( loadings < 6 ) {
+
+				   all.total = all.total / loadings * 6;
+
+			   }
+
+			   onProgress && onProgress( all );
+
+		   }, onError );
+
+	   } );
+
+	   return texture;
+
+   }
+
+};
+
+export { CubeTextureLoader };

src/loaders/ImageLoader.js

@@ -0,0 +1,105 @@
+import { DataImage } from '../DataImage.js';
+import 'three';
+
+/**
+ * Image loader with progress based on {@link https://github.com/mrdoob/three.js/blob/master/src/loaders/ImageLoader.js}
+ * @memberOf PANOLENS
+ * @namespace
+ */
+const ImageLoader = {
+
+	load: function ( url, onLoad, onProgress, onError ) {
+
+		// Enable cache
+		THREE.Cache.enabled = true;
+
+		let cached, request, arrayBufferView, blob, urlCreator, image, reference;
+
+		// Reference key
+		for ( let iconName in DataImage ) {
+
+			if ( DataImage.hasOwnProperty( iconName ) && url === DataImage[ iconName ] ) {
+
+				reference = iconName;
+
+			}
+
+		}
+
+		// Cached
+		cached = THREE.Cache.get( reference ? reference : url );
+
+		if ( cached !== undefined ) {
+
+			if ( onLoad ) {
+
+				setTimeout( function () {
+
+					if ( onProgress ) {
+
+						onProgress( { loaded: 1, total: 1 } );
+
+					} 
+
+					onLoad( cached );
+
+				}, 0 );
+
+			}
+
+			return cached;
+
+		}
+
+		// Construct a new XMLHttpRequest
+		urlCreator = window.URL || window.webkitURL;
+		image = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'img' );
+
+		// Add to cache
+		THREE.Cache.add( reference ? reference : url, image );
+
+		const onImageLoaded = () => {
+
+			urlCreator.revokeObjectURL( image.src );
+			onLoad && onLoad( image );
+
+		}
+
+		if ( url.indexOf( 'data:' ) === 0 ) {
+
+			image.addEventListener( 'load', onImageLoaded, false );
+			image.src = url;
+			return image;
+		}
+
+		image.crossOrigin = this.crossOrigin !== undefined ? this.crossOrigin : '';
+
+		request = new XMLHttpRequest();
+		request.open( 'GET', url, true );
+		request.responseType = 'arraybuffer';
+		request.onprogress = function ( event ) {
+
+				if ( event.lengthComputable ) {
+
+					onProgress && onProgress( { loaded: event.loaded, total: event.total } );
+
+				}
+
+		};
+		request.onloadend = function( event ) {
+
+				arrayBufferView = new Uint8Array( this.response );
+				blob = new Blob( [ arrayBufferView ] );
+
+				image.addEventListener( 'load', onImageLoaded, false );
+			image.src = urlCreator.createObjectURL( blob );
+
+		};
+
+		request.send(null);
+
+	}
+
+};
+
+export { ImageLoader };

src/util/TextureLoader.js → src/loaders/TextureLoader.js

@@ -1,13 +1,12 @@
-(function(){
-
-	'use strict';
+import { ImageLoader } from './ImageLoader.js';
+import 'three';
 
-	/**
-	 * Texture loader based on {@link https://github.com/mrdoob/three.js/blob/master/src/loaders/TextureLoader.js}
-	 * @memberOf PANOLENS.Utils
-	 * @namespace
-	 */
-	PANOLENS.Utils.TextureLoader = {};
+/**
+ * Texture loader based on {@link https://github.com/mrdoob/three.js/blob/master/src/loaders/TextureLoader.js}
+ * @memberOf PANOLENS
+ * @namespace
+ */
+const TextureLoader = {
 
 	/**
 	 * Load image texture
@@ -17,16 +16,16 @@
 	 * @param  {function} onError    - On error callback
 	 * @return {THREE.Texture}   	 - Image texture
 	 */
-	PANOLENS.Utils.TextureLoader.load = function ( url, onLoad, onProgress, onError ) {
+	load: function ( url, onLoad, onProgress, onError ) {
 
 		var texture = new THREE.Texture(); 
 
-		PANOLENS.Utils.ImageLoader.load( url, function ( image ) {
+		ImageLoader.load( url, function ( image ) {
 
 			texture.image = image;
 
 			// JPEGs can't have an alpha channel, so memory can be saved by storing them as RGB.
-			var isJPEG = url.search( /\.(jpg|jpeg)$/ ) > 0 || url.search( /^data\:image\/jpeg/ ) === 0;
+			const isJPEG = url.search( /\.(jpg|jpeg)$/ ) > 0 || url.search( /^data\:image\/jpeg/ ) === 0;
 
 			texture.format = isJPEG ? THREE.RGBFormat : THREE.RGBAFormat;
 			texture.needsUpdate = true;
@@ -37,6 +36,8 @@
 
 		return texture;
 
-	};
+	}
+
+};
 
-})();
+export { TextureLoader };