fixed: removing prev filtered canvas. modified: single view ui

vanilla/css/style.css

@@ -46,6 +46,8 @@ header {
     background: linear-gradient(top, #ff1f97 10%, #c30f6c 100%);
     box-shadow: 0 5px 10px rgba(0, 0, 0, .25);
     margin-bottom: 1.5em;
+    height: 50px;
+    overflow: hidden;
 }
 header h1 {
     font-size: 1.5em;
@@ -56,8 +58,8 @@ header h1 {
     margin: 0;
     padding: 0 1em;
 }
-p {
-
+a {
+	text-decoration: none;
 }
 nav {
 	position: fixed;
@@ -118,7 +120,6 @@ footer {
 }
 #warnings a {
 	color: #ffd900;
-	text-decoration: none;
 }
 .icon-warning {
 	margin-bottom: 5px;
@@ -220,7 +221,7 @@ input[type="button"].dismiss {
 }
 .action-buttons {
 	text-align: center;
-	margin: 1em auto;
+	margin: .5em auto;
 }
 
 /* Photo */
@@ -229,15 +230,18 @@ input[type="button"].dismiss {
 	background-color: #342f2f;
 }
 
-#photoResultContainer {
+#userPhotoCrontainer, #photoResultContainer {
     overflow: hidden;
     width: 100%;
     height: 100%;
+    text-align: center;
 }
+
 #resultPhoto, #croppedPhoto, #filteredPhoto {
     width: 100%;
-    height: auto; /* IE10 does not like this! */
+    height: auto;
 }
+
 h2.label {
     color: #333;
     font-weight: normal;
@@ -268,9 +272,6 @@ h2.label {
     margin-top: -100px;
     z-index: 10;
 }
-.evroneCropCanvas {
-    cursor: move;
-}
 
 /* Gallery Thumbnails */
 
@@ -300,31 +301,49 @@ figure {
 	display: none;
 }
 
-/*
-.thumb:first-of-type {
-	margin-left: 0;
-}
-*/
-
 /* Gallery Single View */
 
-#thumbSingleView {
+#singleView header {
+	margin-bottom: 0;
+}
+
+#singleView nav {
+	position: relative;
+}
+#singleView nav a {
+	display: inline-block;
+	color: #fff;
+	position: absolute;
+	line-height: 58px;
+	font-size: 1.4em;
+}
+#singleView nav .back {
+	left: 10px;
+}
+#singleView nav .share {
+	right: 0;
+}
+#singleView {
 	text-align: center;
 }
-#thumbSingleView figure {
+#singleView figure {
 	background-repeat: no-repeat;
 	background-position: left top;
 	background-size: 100% auto;
 }
-#thumbSingleView figcaption {
+#singleView figcaption {
 	padding-top: 100%;
 	padding-top: -webkit-calc(100% + 10px);
 	padding-top: -moz-calc(100% + 10px);
 	padding-top: calc(100% + 10px);
 	text-align: left;
+	padding-left: .5em;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 }
 .pagination {
-	margin: 1em auto;
+	margin: .5em auto 1em;
 }
 
 /* Filter Effects */
@@ -422,13 +441,6 @@ figure {
 	top: 18px;
 	left: 12px;
 }
-.icon-x::before {
-	color: rgb(0, 0, 0, .75);
-	font-size: 28px;
-	position: absolute;
-	top: 5px;
-	right: 0; 
-}
 .icon-location::before {
 	color: #fff;
 }
@@ -447,16 +459,4 @@ figure {
 }
 .icon-warning.high-alert::before {
 	color: #ff1f97;
-}
-.icon-save::before {
-	color: #fff;
-}
-.icon-upload::before {
-	color: #fff;
-}
-.icon-share::before {
-	color: #fff;
-}
-.icon-github::before {
-	color: #fff;
 }

vanilla/index.html

@@ -65,8 +65,13 @@ <h1>CoreMob Camera</h1>
 	</section>
 
 	<!-- Gallery Carousel -->
-	<section id="thumbSingleView" hidden>
-		<div id="dismissSingleView" class="icon-x" data-icon="&#x2297;"></div>
+	<section id="singleView" hidden>
+		<header>
+			<nav>
+				<a id="dismissSingleView" class="back" data-icon="&#x21a9;" href="index.html"></a>
+				<a id="shareButton" class="share" class="back" data-icon="&#x25b2;" href="index.html"></a>
+			</nav>
+		</header>
 		<div class="swiper-container"></div>
 		<div class="pagination"></div>
 	</section>
@@ -92,7 +97,7 @@ <h1>CoreMob Camera</h1>
 	<!-- Photo Preview -->
 	<section id="photoEffect" hidden>
 		<div id="photoResultContainer">
-			<img id="resultPhoto"/>
+			<img id="resultPhoto">
 		</div>	
 
 		<!-- Photo Effects Buttons -->

vanilla/js/main.js

@@ -12,6 +12,8 @@ var CoreMobCamera = (function() {
 	var maxFilesize = 1048576 * 3.5; // Max image size is 3.5MB (iPhone5, Galaxy SIII, Lumia920 < 3MB)
 	var numPhotosSaved = 0;
 	var imgCrop;
+	var finalPhotoDimension = 612;
+	var viewWidth;
 	var isBlobSupported = true;
 
 	// UI
@@ -23,7 +25,7 @@ var CoreMobCamera = (function() {
 		sectionPhotoEffect = document.getElementById('photoEffect'),
 		sectionFilterDrawer = document.getElementById('filterDrawer'),
 		resultPhoto = document.getElementById('resultPhoto'),
-		sectionSingleView = document.getElementById('thumbSingleView'); 
+		sectionSingleView = document.getElementById('singleView'); 
 
 	return {
 		init: init
@@ -35,6 +37,8 @@ var CoreMobCamera = (function() {
 		var prefetchImg2 = new Image();
 		prefetchImg2.src = 'images/effects/bokeh-stars.png';
 
+		viewWidth = (window.innerWidth < finalPhotoDimension) ? window.innerWidth : finalPhotoDimension;
+
 		bindEvents();		
 		createGallery();
 		checkMediaCaptureSupport();
@@ -125,14 +129,14 @@ var CoreMobCamera = (function() {
 
 		// popstate alternative
 		document.getElementById('dismissSingleView').addEventListener('click', function(e){
+			e.preventDefault();
 			if (typeof history.pushState === 'function')	{
 				history.go(-1); // pop one state manially
 			}
 			showUI(sectionMain);
 			hideUI(sectionSingleView);
 		}, false);
 
-
 		// Photo Crop
 		document.getElementById('cropCancel').addEventListener('click', cancelCrop, false);
 		document.getElementById('cropApply').addEventListener('click', applyCrop, false);	
@@ -144,6 +148,14 @@ var CoreMobCamera = (function() {
 			alert('This feature has not implemented yet.')
 		}, false);		
 
+		// Uploading a photo -- not inplemented yet
+		document.getElementById('shareButton').addEventListener('click', function(e){
+			e.preventDefault();
+			//showUI(loader);
+			//startUpload();
+			alert('This feature has not implemented yet.')
+		}, false);	
+
 		// Save a photo in iDB as blob
 		document.getElementById('saveButton').addEventListener('click', savePhoto, false);
 
@@ -172,6 +184,7 @@ var CoreMobCamera = (function() {
 	function applyCrop(e){
 		var newImg = imgCrop.getDataURL();
 		resultPhoto.src = newImg;
+		resultPhoto.style.width = resultPhoto.style.height = viewWidth +'px';
 
 		// Removing the previously created canvas, if any
 		var prevEffect = document.getElementById('filteredPhoto');
@@ -190,17 +203,26 @@ var CoreMobCamera = (function() {
 		if(!filterButton) return;
 
     	showUI(loader);
-
+
+		// Removing the previously created canvas
+		var prevFilteredPhoto = document.getElementById('filteredPhoto');
+		if(prevFilteredPhoto) {	
+			prevFilteredPhoto.parentNode.removeChild(prevFilteredPhoto);
+		}
+
 		setTimeout(function(){
 			ApplyEffects[filterButton.id](resultPhoto);
 		}, 1);	
 
 	    (function () {
-			if(document.getElementById('filteredPhoto')) {
+	    	var newFilteredPhoto = document.getElementById('filteredPhoto');
+			if(newFilteredPhoto) {
+				console.log('canvas loaded yet!');
+				newFilteredPhoto.style.width = newFilteredPhoto.style.height = viewWidth +'px';
 				hideUI(loader);
 			} else {
 				console.log('canvas not loaded yet...');
-				setTimeout(arguments.callee, 500);
+				setTimeout(arguments.callee, 100);
 			}
 		})();
 
@@ -228,7 +250,7 @@ var CoreMobCamera = (function() {
 				initialSlide: revIndex
 			});
 
-			history.pushState({stage: 'singleView'}, null, '#singleview');
+			history.pushState({stage: 'singleView'}, null);
 			showUI(sectionSingleView);
 			hideUI(sectionMain);
 		} 	
@@ -366,9 +388,9 @@ var CoreMobCamera = (function() {
 		document.getElementById('thumbnails').style.width = thumbsPerRow * eachWidth + 'px';
 
 		var container = document.querySelector('.swiper-container');
-		var viewWidth = (window.innerWidth < 612) ? window.innerWidth : 612;
+
 		container.style.width = viewWidth +'px';
-		container.style.height = (viewWidth + 60) + 'px';
+		container.style.height = (viewWidth + 40) + 'px';
 	}
 
 	function cloneThumbNode() {
@@ -392,19 +414,20 @@ var CoreMobCamera = (function() {
 
 	function cropAndResize() {
 		var photoObj = document.getElementById('userPhoto');
-		var finalWidth = 612,
-			finalHeight = 612;
 
 	    imgCrop = new PhotoCrop(photoObj, {
-			size: {w: finalWidth, h: finalHeight}
+			size: {w: finalPhotoDimension, h: finalPhotoDimension}
 	    });
 
 	    imgCrop.displayResult();
 
 		hideUI(sectionMain);
 		showUI(sectionPhotoCrop);
 
-		document.getElementById('textDimension').textContent = finalWidth + ' x ' + finalHeight;
+		document.getElementById('textDimension').textContent = finalPhotoDimension + ' x ' + finalPhotoDimension;
+
+		var displayPhoto = document.getElementById('croppedPhoto');
+		displayPhoto.style.width = displayPhoto.style.height = viewWidth +'px';
 	}
 
 	/**

vanilla/js/photoFilter.js

@@ -5,12 +5,6 @@
 
 var PhotoFilter = function(imgObj) {
 	this.imgObj = imgObj;
-
-    // Removing the previously created canvas
-	var prevEffect = document.getElementById('filteredPhoto');
-	if(prevEffect) {	
-		prevEffect.parentNode.removeChild(prevEffect);
-	}
 
     this.c = document.createElement('canvas');
     this.c.id = 'filteredPhoto';