improving the page switch detector

masks/write.html

@@ -6,6 +6,7 @@
 		<A class="fa fa-next"></a>
 	</div>
 	<div id="editor_container">
+		<div id="editor_content">
 			<div id="editor">
 				<p>So, I'm there, wondering about myself and my future - such a luxury by the way - when suddenly, someone approaches. mid-40s i'd say, elegant cold women, the kind you've learned not to talk to, to eventually avoid feeling repressed, or bad for yourself, or both.</p>
 				<p>Anyhow, it would seem that in this particular situation, the choice wasn't given to me to decide whether or not to talk to that precise women. She seats down next to me and engage a conversation. 'How is it you're here today?' I'm already regretting not having gone away when i still had the chance.</p>
@@ -18,6 +19,7 @@
 			</div>
 		</div>
 	</div>
+</div>
 <script type="text/javascript">
 	oMyThoughts.pageInit = function(asHash, bFirstPage)
 	{
@@ -27,9 +29,10 @@
 		self.vars('working', false);
 		self.vars('prec_displayed', 0);
 		self.vars('prec_content', 0);
-		self.vars('page', $('.page_nb').text());
+		self.vars('page', 0);
+		self.vars('editor', $('#editor_content'));
 		
-		self.vars('page_height', $('#editor').height());
+		self.vars('page_height', $('#editor_container').height());
 		
 		var oQuill = new Quill('#editor', {
 			theme: 'bubble',
@@ -39,16 +42,40 @@
 			}
 		});
 		
+		var oEditorBound = {top:	self.vars('page_height'),
+							bottom:	self.vars('page_height'),
+							left:	0,
+							right:	self.vars('editor').width()};
+		
 		oQuill.on('text-change', function(delta, oldDelta, source) {
 			if(source == 'user')
 			{
 				var range = oQuill.getSelection();
 				if(range)
 				{
-					var oBound = oQuill.getBounds(range.index, range.length);
+					var oSelBound = oQuill.getBounds(range.index, range.length);
-					$('#editor').append($('<div>', {style:'background:red;width:1px;height:'+(oBound.bottom - oBound.top)+'px;position:absolute;top:'+oBound.top+'px;left:'+oBound.left+'px;'}));
+					//$('#editor').append($('<div>', {style:'background:red;width:1px;height:'+(oBound.bottom - oBound.top)+'px;position:absolute;top:'+oBound.top+'px;left:'+oBound.left+'px;'}));
-					$('#editor').append($('<div>', {style:'background:red;width:1px;height:10px;position:absolute;top:0px;left:0px;'}));
+					$('#editor').append($('<div>', {style:'background:red;width:10px;height:1px;position:absolute;top:0px;left:0px;'}));
-					$('#editor').append($('<div>', {style:'background:red;width:1px;height:10px;position:absolute;top:'+($('#editor').height() - 10)+'px;left:'+($('#editor').width() - 1)+'px;'}));
+					$('#editor').append($('<div>', {style:'background:red;width:10px;height:1px;position:absolute;top:'+($('#editor').height() - 1)+'px;left:'+($('#editor').width() - 10)+'px;'}));
+					
+					var oEditorPos = $('.ql-editor').position();
+					
+					var oEditorCurBound = {	top:	oEditorBound.top*self.vars('page'),
+											bottom:	oEditorBound.bottom*(self.vars('page') + 1),
+											left: 	0,
+											right: 	oEditorBound.right};
+					
+					//console.log(oSelBound.top+' < '+oEditorCurBound.top);
+					console.log(oSelBound.bottom+' - '+oEditorPos.top+' = '+(oSelBound.bottom - oEditorPos.top)+' > '+oEditorCurBound.bottom);
+					
+					//if(oSelBound.top < oEditorCurBound.top)
+					//{
+					//	moveToPage(self.vars('page') - 1);
+					//}
+					if((oSelBound.bottom - oEditorPos.top) > oEditorCurBound.bottom)
+					{
+						moveToPage(self.vars('page') + 1);
+					}
 				}
 			}
 		});
@@ -57,6 +84,18 @@
 		$('.fa-next').click(function(){moveToPage(1);});
 	};
 	
+	function moveToPage(iNewPage)
+	{
+		if(iNewPage!=self.vars('page'))
+		{
+			self.vars('page', iNewPage);
+			console.log('moving to index '+self.vars('page')+' (page '+(self.vars('page')+1)+')');
+			$('.page_nb').text(self.vars('page') + 1);
+			
+			self.vars('editor').css('top', self.vars('page')*self.vars('page_height')*-1);
+		}
+	}
+	
 	oMyThoughts.onFeedback = function(sType, sMsg)
 	{
 		var $Feedback = $('#write_feedback');
@@ -125,15 +164,5 @@
 		self.vars('working', false);
 	}
 	
-	function moveToPage(iNewPage)
-	{
-		if(iNewPage!=self.vars('page'))
-		{
-			self.vars('page', iNewPage);
-			console.log('moving to page '+self.vars('page'));
-			$('.page_nb').text(self.vars('page'));
 	
-			self.vars('editor').css('top', (self.vars('page') - 1)*self.vars('max_height')*-1);
-		}
-	}
 </script>

style/_write.scss

@@ -8,15 +8,19 @@
 		height: calc(100% - 4em);
 		overflow: hidden;
 		
+		#editor_content {
+			
+			height:auto;
+			position: relative;
+			
 			.ql-container {
 				font-family: 'Indie Flower', cursive;
 				font-size: 16px;
 				padding:0;
-		    overflow: hidden;
 				
 				.ql-editor {
 					padding:0;
-				height:auto;
+				}
 			}
 		}
 	}
@@ -38,6 +42,10 @@
 	text-align: justify;
 }
 
+#write #editor p:first-child {
+    margin-top: 0;
+}
+
 #write .jqte_editor p:FIRST-CHILD, #write .jqte_toolbar {
 	margin-top:0.5em;
 }