create boundaries (bottom only)

masks/write.html

@@ -18,6 +18,8 @@
 				<p>In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises.</p>
 			</div>
 		</div>
+		<div class="shade bottom"></div>
+		<div class="shade bottomplus"></div>
 	</div>
 </div>
 <script type="text/javascript">
@@ -29,12 +31,13 @@
 		self.vars('working', false);
 		self.vars('prec_displayed', 0);
 		self.vars('prec_content', 0);
-		self.vars('page', 0);
+		//self.vars('page', 0);
+		
 		self.vars('editor', $('#editor_content'));
 		
 		self.vars('page_height', $('#editor_container').height());
 		
-		var oQuill = new Quill('#editor', {
+		oQuill = new Quill('#editor', {
 			theme: 'bubble',
 			modules:
 			{
@@ -42,58 +45,82 @@
 			}
 		});
 		
-		var oEditorBound = {top:	self.vars('page_height'),
+		oEditorBound = {top: self.vars('page_height'), bottom: self.vars('page_height')};
-							bottom:	self.vars('page_height'),
-							left:	0,
-							right:	self.vars('editor').width()};
 		
-		oQuill.on('text-change', function(delta, oldDelta, source) {
+		oQuill.on('text-change', onChange);
+		oQuill.on('selection-change', onChange);
+		oQuill.focus();
+		moveToPage(0);
+		
+		$('.fa-prev').click(function(){moveToPage(-1);});
+		$('.fa-next').click(function(){moveToPage(1);});
+	};
+	
+	function onChange(delta, oldDelta, source)
+	{
 		if(source == 'user')
 		{
 			var range = oQuill.getSelection();
 			if(range)
 			{
+				//Quill.debug('info');
+				
 				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:10px;height:1px;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:10px;height:1px;position:absolute;top:'+($('#editor').height() - 1)+'px;left:'+($('#editor').width() - 10)+'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 oSelBoundAvg = oSelBound.top + (oSelBound.bottom - oSelBound.top)/2;
 				
 				var oEditorCurBound = {	top:	oEditorBound.top*self.vars('page'),
-											bottom:	oEditorBound.bottom*(self.vars('page') + 1),
+										bottom:	oEditorBound.bottom*(self.vars('page') + 1)};
-											left: 	0,
-											right: 	oEditorBound.right};
 				
-					//console.log(oSelBound.top+' < '+oEditorCurBound.top);
+				console.log(oSelBound.top+' < '+oEditorCurBound.top);
-					console.log(oSelBound.bottom+' - '+oEditorPos.top+' = '+(oSelBound.bottom - oEditorPos.top)+' > '+oEditorCurBound.bottom);
+				console.log(oSelBound.bottom+' > '+oEditorCurBound.bottom);
 				
-					//if(oSelBound.top < oEditorCurBound.top)
+				var sNewPage = self.vars('page');
-					//{
+				if(oSelBound.top < oEditorCurBound.top)
-					//	moveToPage(self.vars('page') - 1);
-					//}
-					if((oSelBound.bottom - oEditorPos.top) > oEditorCurBound.bottom)
 				{
-						moveToPage(self.vars('page') + 1);
+					sNewPage--;
+				}
+				else if(oSelBound.bottom > oEditorCurBound.bottom)
+				{
+					sNewPage++;
+				}
+				moveToPage(sNewPage);
 			}
 		}
 	}
-		});
-		
-		$('.fa-prev').click(function(){moveToPage(-1);});
-		$('.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)+')');
+			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);
+			self.vars('editor').css('top', self.vars('page') * self.vars('page_height') * -1);
 		}
+		
+		//Build shades
+		//if(self.vars('page') > 0)
+		//{
+		//	
+		//}
+		var iIndex = oQuill.getSelection().index;
+		
+		var oEditorCurBound = {	top:	oEditorBound.top*self.vars('page'),
+								bottom:	oEditorBound.bottom*(self.vars('page') + 1)};
+		
+		while(oQuill.getBounds(iIndex).bottom < oEditorCurBound.bottom && iIndex < oQuill.getLength())
+		{
+			//console.log(oQuill.getBounds(iIndex).bottom+' inf '+oEditorCurBound.bottom);
+			iIndex++;
+		}	
+		console.log("stopping at "+iIndex+'('+oQuill.getBounds(iIndex).bottom+' sup '+oEditorCurBound.bottom+')');
+		var sMaxHeight = oQuill.getBounds(iIndex - 1).bottom;
+		$('.shade.bottom').css('height', oEditorCurBound.bottom - sMaxHeight);
 	}
 	
 	oMyThoughts.onFeedback = function(sType, sMsg)

style/_write.scss

@@ -4,9 +4,11 @@
 	
 	#editor_container {
 		
-		padding:1em;
+		border: 1em solid #EDE0D0;
+		border-radius: 0.5em;
 		height: calc(100% - 4em);
 		overflow: hidden;
+		position:relative;
 		
 		#editor_content {
 			
@@ -23,6 +25,24 @@
 				}
 			}
 		}
+	
+		.shade {
+			position: absolute;
+			width: 100%;
+			background:red;
+			
+			&.top {
+				top:0;
+			}
+			
+			&.bottom {
+				bottom:0;
+			}
+			&.bottomplus {
+				top:100%;
+				height:2em;
+			}
+		}
 	}
 }