Fix calculation function, improve style

marcwieland95 · Sep 6, 2015 · d8cd5d8 · d8cd5d8
1 parent eb2c834
commit d8cd5d8
Show file tree

Hide file tree

Showing 12 changed files with 167 additions and 160 deletions.
diff --git a/README.md b/README.md
@@ -20,5 +20,12 @@ Build using Grunt and Bower. The following tasks are available:
 ##Features
 See [Trello-Board](https://trello.com/b/kjfwYtGe/litbx) to check future feature and current work state.
 
+##Changelog
+### Beta 1 (Sprint 1) - 06.09.2015
+* Bootstrap (3)
+* Grunt, Bower and Travis (1)
+* Image support (3)
+* Calculate width and height (2)
+
 ##License
 Litbx is Copyright © [Marc Wieland](http://marcwieland.ch) and is licensed under the terms of the [MIT License](http://opensource.org/licenses/MIT).
diff --git a/dist/css/litbx.core.css b/dist/css/litbx.core.css
@@ -29,11 +29,7 @@
 .litbx__wrapper {
   position: relative;
   box-sizing: content-box;
-  /*
-		height: 90%;
-		width: 40%;
-		*/
-  background-color: #fff;
+  background-color: #ffffff;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -55,25 +51,27 @@
   width: 100%;
   height: 100%;
 }
-.litbx__item {
-  /*
-		height: 90%;
-		width: auto;
-		*/
-}
 .litbx__arrow {
   position: absolute;
   cursor: pointer;
   width: 30%;
   top: 0;
   bottom: 0;
-  background-color: rgba(200, 200, 200, 0.1);
+  background-color: rgba(255, 255, 255, 0);
 }
 .litbx__arrow i {
   position: absolute;
   top: 50%;
-  background-color: green;
-  padding: 10px 20px;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+          transform: translateY(-50%);
+  background-color: #ffffff;
+  height: 70px;
+  width: 70px;
+  font-size: 2rem;
+  text-align: center;
+  line-height: 70px;
+  color: #374695;
 }
 .litbx__arrow i.prev {
   left: 0;
@@ -95,7 +93,7 @@
   z-index: 101;
   width: 40px;
   height: 40px;
-  background-color: yellow;
+  background-color: #374695;
   -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
           animation: sk-rotateplane 1.2s infinite ease-in-out;
 }

diff --git a/dist/css/litbx.core.min.css b/dist/css/litbx.core.min.css
diff --git a/dist/litbx.js b/dist/litbx.js
@@ -651,75 +651,80 @@ var Images = function(Litbx, Core) {
 			canExpandHeight,
 			canExpandWidth;
 
+			//width = if ( width != null )
+
 			maxViewHeight = Math.min( maxHeight,  maxViewHeight );
 			maxViewWidth = Math.min( maxWidth,  maxViewWidth );
 
-			//console.log( ratio );
-
-			//console.log( naturalWidth + ' x ' + naturalHeight );
-
-			//console.log( maxViewHeight );
-			//console.log( maxViewWidth );
-
 
-			// set flag for width
+			// set flag for width - not in use
 			//if ( (margin + padding + width) < Litbx.browserWidth ) {
 			if ( width < maxViewWidth ) {
 				canExpandWidth = true;
 			} else {
 				canExpandWidth = false;
 			}
-			//console.log(canExpandWidth);
 
-			// set flag for height
+			// set flag for height - not in use
 			//if ( (margin + padding + height ) < Litbx.browserHeight ) {
 			if ( height < maxViewHeight ) {
 				canExpandHeight = true;
 			} else {
 				canExpandHeight = false;
 			}
-			//console.log(canExpandHeight);
 
-			console.log( ratio );
-			console.log( maxViewWidth );
-			console.log( maxViewHeight );
 
-			if ( ratio > 1 ) { // landscape
-				//width = maxViewWidth;
-				maxViewHeight = maxViewWidth / ratio;
+			// Keep aspect ratio
+			if ( Litbx.options.aspectRatio ) {
+
+				if ( ratio > 1 ) { // landscape
+
+					height = maxViewWidth / ratio;
+					width = maxViewWidth;
+
+					if ( height > maxViewHeight ) {
 
-				if ( naturalHeight > maxViewHeight ) {
-					//height = maxViewHeight;
-					maxViewWidth = maxViewHeight * ratio;
+						height = maxViewHeight;
+						width = height * ratio;
 
+					}
+
+				} else {  // portrait
+
+					width = maxViewHeight * ratio;
+					height = maxViewHeight;
+
+					if ( width > maxViewWidth ) {
+
+						width = maxViewWidth;
+						height = width / ratio;
+					}
 				}
 
-			} else {  // portrait
+			} else {
+
+				if ( Litbx.options.fitToView ) {
+
+					width  = Math.min(maxWidth,  maxViewWidth );
+					height = Math.min(maxHeight, maxViewHeight );
 
-				//height = maxViewHeight;
-				maxViewWidth = maxViewHeight * ratio;
+				} else {
+
+					width = width; // width have to be set in options
+					height = height; // height have to be set in options
 
-				if ( naturalWidth > maxViewWidth ) {
-					//width = maxViewWidth;
-					maxViewHeight = maxViewWidth / ratio;
 				}
-			}
 
-		/*
-		if ( Litbx.options.fitToView ) {
-			width  = Math.min(maxWidth,  maxViewWidth );
-			height = Math.min(maxHeight, maxViewHeight );
-		}
-		*/
+			}
 
 			//Core.Build.$wrap.css({ // undefined ??
 			$( '.' + Litbx.options.classes.wrapper ).css({
 				//'padding': 200,
 				//'margin': Litbx.options.margin.toString(),
-				'width': maxViewWidth, // width
-				'height': maxViewHeight, // height
-				//'max-width': maxWidth,
-				//'max-height': maxHeight
+				'width': width, // width
+				'height': height, // height
+				'max-width': maxWidth,
+				'max-height': maxHeight
 			});
 
 			// set padding and margin
@@ -731,16 +736,6 @@ var Images = function(Litbx, Core) {
 			});
 
 
-			//var img_width = image_current.width;
-			//var img_height = image_current.height;
-
-
-			//image.aspectRatio =  image.width / image.height;
-			//console.log( image.aspectRatio );
-
-			//console.log( Litbx.browserWidth );
-			//console.log( Litbx.browserHeight );
-
 		} else {
 
 			// Image failed to load - return message
@@ -925,26 +920,27 @@ var Litbx = function ( elements, options, trigger ) {
 	 * @type {Object}
 	 */
 	var defaults = {
-		padding: 100,
+		padding: 70,
 		margin: [30, 55, 30, 55], // 200
 		arrows: true,  // not in use
 		closeBtn: true,  // not in use
 		startAt: 0, // int - index starts at 1, 0 or false = open at trigger
 		flexbox: false, // not in use
 
 		// Dimensions
-		width: 900, // null default
-		height: 1200, // null default
+		width: null, // null default - 900
+		height: null, // null default - 1200
 		minWidth: 100,  // not in use
 		minHeight: 100,  // not in use
 		maxWidth: 1600,
 		maxHeight: 1600,
-		aspectRatio: true,  // not in use
-		fitToView: true,  // not in use
+		aspectRatio: true,
+		fitToView: false, // not tested
 
 		// Events
 		closeClick: false,
 		preload: true,
+		// preloadNumber - int or array (forward, backward)
 		loop: true,
 		keyboard: true,
 		// nextKeyCode
@@ -973,8 +969,8 @@ var Litbx = function ( elements, options, trigger ) {
 			inner: '<div class="litbx__inner"></div>',
 			//error    : '<p class="fancybox-error">{{ERROR}}</p>',
 			//closeBtn : '<a title="{{CLOSE}}" class="fancybox-close" href="javascript:;"></a>',
-			next: '<span class="litbx__arrow litbx__arrow--prev"><i class="prev">Zurück</i></span>',
-			prev: '<span class="litbx__arrow litbx__arrow--next"><i class="next">Weiter</i></span>'
+			next: '<span class="litbx__arrow litbx__arrow--prev"><i class="prev">&larr;</i></span>',
+			prev: '<span class="litbx__arrow litbx__arrow--next"><i class="next">&rarr;</i></span>'
 		},
 
 		// Callbacks