mythoughts/masks/write.html

<div id="write">
	<div id="write_feedback"></div>
	<div id="editor_container">
		<div id="editor_content">
			<div id="editor" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div>
		</div>
	</div>
	<div id="nav">
		<div class="nav-elem"><a class="fal fa-fw fa-prev"></a></div>
		<div class="nav-elem"><span class="page_nb"></span></div>
		<div class="nav-elem"><a class="fal fa-fw fa-next"></a></div>
	</div>
</div>
<script type="text/javascript">
	oMyThoughts.pageInit = function(asHash, bFirstPage)
	{
		self.vars('id', 0);
		self.vars('default_text', "\n");
		self.vars('page', 0);
		self.vars('keystrokes', 0);
		self.vars('saving', false);
		
		//DOM
		self.vars('editor', $('#editor_content'));

		//Quill Engine
		oQuill = new Quill('#editor', {
			theme: 'bubble',
			modules:
			{
				toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
			}
		});
		
		//Add last thought
		setLastContent(oQuill, function(){
			setPageHeight();
			moveToPage(self.vars('page'));
		});
		
		//Key strokes & mouse Events
		$('#editor').keydown(function(e){
			if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) onChange('', '', 'user', e);
		});
		oQuill.on('text-change', onChange);
		$(window).mousewheel(function(turn, iDelta) {
			var iNewPage = self.vars('page') + ((iDelta > 0)?-1:1);
			moveToPage(iNewPage);
			return false;
		});
		
		//Page buttons
		$('.fa-prev').click(function(){moveToPage(self.vars('page')-1);});
		$('.fa-next').click(function(){moveToPage(self.vars('page')+1);});
		
		//Init
		oQuill.focus();
	};
	
	oMyThoughts.onFeedback = function(sType, sMsg)
	{
		var $Feedback = $('#write_feedback');
		$Feedback
			.stop()
			.fadeOut($Feedback.is(':empty')?0:'fast', function(){
				$(this)
					.empty()
					.append($('<span>', {'class':sType}).text(sMsg))
					.fadeIn('fast');
			});
	};
	
	oMyThoughts.onQuitPage = function()
	{
		save();
		return true;
	};
	
	function setPageHeight()
	{
		var $Page = $('#editor_container');
		var iHeight = $Page.height();
		
		var iLineHeight = parseInt($('#editor_container p').css('line-height'));
		var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight;
		$Page.height(iMaxHeight+'px');
		
		self.vars('line-height', iLineHeight);
		self.vars('page-height', iMaxHeight);
	}
	
	function setLastContent(oQuill, fCallback)
	{
		getInfo
		(
			'load', 
			function(sDesc, asData)
			{
				self.vars('id', asData.id);
				oQuill.setContents(asData.ops);
				if(typeof fCallback == 'function') fCallback();
			},
			{id: 'last'}
		);
	}
	
	function onChange(delta, oldDelta, source, e)
	{
		if(source == 'user')
		{
			var range = oQuill.getSelection();
			if(range)
			{
				var oSelBound = oQuill.getBounds(range.index, range.length);
				var oEditorCurBound = {	top:	self.vars('page-height') * self.vars('page'),
										bottom:	self.vars('page-height') * (self.vars('page') + 1)};
				
				//Anticipating arrows
				if(e)
				{
					switch(e.which)
					{
						case 13: //Enter
							break;
						case 40: //down
							oSelBound.bottom += self.vars('line-height');
							break;
						case 38: //up
							oSelBound.top = Math.max(0, oSelBound.top  - self.vars('line-height'));
							break;
						case 37: // left
							oSelBound = oQuill.getBounds(Math.max(0, range.index - 1), range.length);
							break;
						case 39: // right
							oSelBound = oQuill.getBounds(range.index + 1,  range.length);
							break;
					}
				}
				else incKeyStrokes();
				
				var sNewPage = self.vars('page');
				if(oSelBound.top < oEditorCurBound.top)
				{
					sNewPage--;
				}
				else if(oSelBound.bottom > oEditorCurBound.bottom)
				{
					sNewPage++;
				}
				moveToPage(sNewPage);
			}
		}
	}
	
	function moveToPage(iNewPage)
	{
		var iContentHeight = self.vars('editor').height();
		var iLastPage = Math.floor(iContentHeight / self.vars('page-height'));
		
		//console.log(iNewPage);
		
		if(iNewPage >= 0 && iNewPage <= iLastPage)
		{
			if(iNewPage!=self.vars('page'))
			{
				var iOldPage = self.vars('page');
				self.vars('page', iNewPage);
				
				//Page Position
				var iOffset = self.vars('page') * self.vars('page-height') * -1;
				self.vars('editor').css('top', iOffset);
			}
			
			//Page Number
			$('.page_nb').text(self.vars('page') + 1);
			
			//Detect First/Last Page
			$('.fa-prev').toggle(self.vars('page')!=0);
			$('.fa-next').toggle(self.vars('page')!=iLastPage);
		}
	}
	
	function incKeyStrokes()
	{
		self.vars('keystrokes', self.vars('keystrokes') + 1);
		if(self.vars('keystrokes') % 20 == 0) save();
	}
	
	function save()
	{
		if(typeof oSaveTimer != 'undefined') clearTimeout(oSaveTimer);
		
		if(!self.vars('saving') && self.vars('keystrokes') != self.vars('lastKeystrokes')) {
			self.vars('saving', true);

			var iCurrentKeystrokes = self.vars('keystrokes');
			var sContent =  oQuill.getContents().ops;
			if(sContent[0] != self.vars('default_text'))
			{
				oMyThoughts.onFeedback('info', 'Saving...');
				getInfo
				(
					'update', 
					function(sDesc, asData)
					{
						self.vars('id', asData.id);
						oMyThoughts.feedback('notice', 'Saved ('+asData.led.substr(11, 5)+')');
						self.vars('saving', false);
						self.vars('lastKeystrokes', iCurrentKeystrokes);
						oSaveTimer = setTimeout(save, 1000*10);
					},
					{
						id: self.vars('id'),
						content: sContent
					},
					function(sError)
					{
						oMyThoughts.feedback('error', 'Not saved! An error occured: '+sError);
						self.vars('saving', false);
						oSaveTimer = setTimeout(save, 1000);
					},
					'POST'
				);
			}
		}
	}
</script>