Commits

Anonymous committed 2c04e89

Presentation in progress

  • Participants
  • Parent commits 78b1bf4

Comments (0)

Files changed (7)

 <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
     <div class="application container">
     	<header>
-    		<h1 class="stamp title light">Simple Press JS</h1>
+    		<h1 class="main-stamp title light">Simple Press JS</h1>
+                <nav>
+                    <ul class="navigation">
+                        <li>
+                            <a href="#anterior" class="back">Anterior</a>
+                        </li>
+                        <li>
+                            <a href="#proximo" class="next">Proximo</a>
+                        </li>
+                    </ul>
+                </nav>
     		<hr />
     	</header>
 		
-    	<div role="main">
+    	<div role="main" class="press-wrap">
     		<div class="press">
           <div class="mask">
             <div class="slide">
-              <header>
-                <h1 class="stamp">Press test</h1>
-              </header>
+            <header>
+                <h1 class="stamp">Press test 1</h1>
+            </header>
               <div>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
             </div>
             <div class="slide">
               <header>
-                <h1 class="stamp">Press test</h1>
+                <h1 class="stamp">Press test 2</h1>
               </header>
               <div>
                 <p>

js/.script.js.swp

Binary file added.

js/.simplepress.js.swp

Binary file added.
 	SimplePress.start({
 		holder: {
 			width: '100%',
-			height: '630px',
+			height: '600px',
 		},
 		slide: { 
 			width: '700px',
-			height: '600px',
-			spaceBetween: 200,
+			height: '550px',
+			spaceBetween: 225,
 		}
 	});
-});
+});

js/simplepress.js

 		mask: this.jQuery('.press .mask'),
 		slide: this.jQuery('.press .mask .slide'),
 		stamp: this.jQuery('.stamp'),
+        controls: this.jQuery('.navigation'),
 	};
 
 	_.prototype.start = function ( settings ) {
 			stamp = self.stamp,
 			press = self.press,
 			mask = self.mask,
-			slide = self.slide;
+			slide = self.slide,
+            controls = self.controls,
+            slideCurrentPointer = 0,
+            slideCurrentPosition = 0,
+            changeSpace = 1175;
 
 		if ( settings ) {
 			// Apply lettering js 
 					'height'
 				]
 			);
-			options.slideDimensions['float'] = 'left';
+			
+            options.slideDimensions['float'] = 'left';
 			options.slideDimensions['margin'] = '0 ' + options.slideSpace + 'px';
 
+            
+
 			if ( options.pressDimensions && options.maskDimensions && options.slideDimensions ) {
 				// Add style to press
 				press.css( options.pressDimensions );
 				mask.css( options.maskDimensions );
 				// Add style to slide
 				slide.css( options.slideDimensions );
+            
+                // Control for slide
+                controls.find('.back').on('click', function () {
+                    slideCurrentPointer -= 1;
+                    if ( slideCurrentPointer >= 0 ) {
+                        slideCurrentPosition += changeSpace;
+                        mask.animate({
+                            left:  slideCurrentPosition + 'px',
+                        });
+                    } if ( slideCurrentPointer <= 0 ) {
+                        slideCurrentPointer = 0;    
+                    } 
+                    console.log( slideCurrentPointer );
+                });
+                
+                controls.find('.next').on('click', function () {
+                    slideCurrentPointer += 1;
+                    if ( slideCurrentPointer < slide.length || slideCurrentPointer === ( slide.length - 1 ) ) {
+                        slideCurrentPosition -= changeSpace;
+                        mask.animate({
+                            left: slideCurrentPosition + 'px',
+                        });
+                    } if ( slideCurrentPointer > ( slide.length - 1 ) ) {
+                        slideCurrentPointer = ( slide.length - 1 );    
+                    }
+                    console.log( slideCurrentPointer );
+                });
+                console.log( parseInt( mask.css( 'left' ).split('px')[0] ) + 100 );
 
 				output = true;
 			}
 	};
 
 	return new _;
-} ( window, jQuery ));
+} ( window, jQuery ));

less/.style.less.swp

Binary file added.
 @import "bootstrap/bootstrap.less";
 
+
+
+@import "bootstrap/responsive.less";
+
+
+/* ===== Primary Styles =====================================================
+   Author: kaique.developer@gmail.com
+   ========================================================================== */
+
 .bg {
-	background: #303030;
-	background: -moz-linear-gradient(top,  #303030 0%, #141414 100%);
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#141414));
-	background: -webkit-linear-gradient(top,  #303030 0%,#141414 100%);
-	background: -o-linear-gradient(top,  #303030 0%,#141414 100%);
-	background: -ms-linear-gradient(top,  #303030 0%,#141414 100%);
-	background: linear-gradient(top,  #303030 0%,#141414 100%);
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#141414',GradientType=0 );
+    background: #f2f2f2;
 }
 
 .border( @border ) {
 	color: #fff;
 }
 
-@import "bootstrap/responsive.less";
-
+.main-stamp {
+    float: left;    
+}
 
-/* ===== Primary Styles =====================================================
-   Author: kaique.developer@gmail.com
-   ========================================================================== */
 hr {
 	border: none;
 	border-top: 1px solid #AFAFAF;
+    clear: both;
 }
 
 p {
 	letter-spacing: 2px;
 }
 
+.navigation {
+    float: right;
+    padding: 15px 0;
+
+    li {
+        float: left;    
+        list-style: none;
+        padding: 0 10px 0;
+    }
+}
+
+.press-wrap {
+    padding: 0;    
+    margin: 0;
+}
+
+.press {
+   padding: 30px 0; 
+}
+
+.mask {
+    padding: 15px 0;
+}
+
 .slide {
 	padding: 15px;
 	background: #ccc;
 
 	.border( 20px );
-}
+    border: 1px solid #c2c2c2;
+}
+
+a {
+    color: #222222;    
+}
+
+a:hover {
+    color: #000;
+}