mythoughts/masks/write.html

<div id="write">
	<div id="write_feedback"></div>
	<div id="nav">
		<a class="fa fa-prev"></a>
		<span class="page_nb">1</span>
		<A class="fa fa-next"></a>
	</div>
	<div id="editor_container">
		<div id="editor_content">
			<div id="editor" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div>
		</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);
		
		//DOM
		self.vars('editor', $('#editor_content'));

		//Quill Engine
		oQuill = new Quill('#editor', {
			theme: 'bubble',
			modules:
			{
				toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
			}
		});
		/*oQuill.setContents([
			{insert: "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."},
			{insert: '\n'},
			{insert: "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."},
			{insert: '\n'},
			{insert: "'Hello to you too' I say, still willing to show some manhood, even though I already know this women crushes manhood by pairs as a breakfast ritual."},
			{insert: '\n'},
			{insert: "In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises."},
			{insert: '\n'},
			{insert: "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."},
			{insert: '\n'},
			{insert: "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."},
			{insert: '\n'},
			{insert: "'Hello to you too' I say, still willing to show some manhood, even though I already know this women crushes manhood by pairs as a breakfast ritual."},
			{insert: '\n'},
			{insert: "In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises."}
		]);*/
		oQuill.setContents([{insert:self.vars('default_text')}]);
		
		setPageHeight();
		
		//Key strokes Events
		$('#editor').keydown(function(e){
			if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) onChange('', '', 'user', e);
		});
		oQuill.on('text-change', onChange);
		
		//Page buttons
		$('.fa-prev').click(function(){moveToPage(self.vars('page')-1);});
		$('.fa-next').click(function(){moveToPage(self.vars('page')+1);});
		
		//Init
		oQuill.focus();
		moveToPage(self.vars('page'));
	};
	
	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').css('height', 'calc(100% - 4em)');
		var iHeight = $Page.height();
		var iLineHeight = parseInt($('#editor_container p').css('line-height'));
		var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight;
		$Page.height(iMaxHeight);
		self.vars('line-height', iLineHeight);
		self.vars('page_height', iMaxHeight);
	}
	
	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)
	{
		if(iNewPage!=self.vars('page'))
		{
			var iOldPage = self.vars('page');
			self.vars('page', iNewPage);
			
			//Page Number
			$('.page_nb').text(self.vars('page') + 1);
			
			//Page Position
			var iOffset = self.vars('page') * self.vars('page_height') * -1;
			self.vars('editor').css('top', iOffset);
		}
		
		//Detect First Page
		$('.fa-prev').fadeTo('fast', (self.vars('page')==0)?0:1);
		
		//Detect last page
		var bLastPage = (self.vars('editor').height() < self.vars('page_height') * (self.vars('page') + 1));
		$('.fa-next').fadeTo('fast', bLastPage?0:1);
	}
	
	function incKeyStrokes()
	{
		self.vars('keystrokes', self.vars('keystrokes') + 1);
		
		if(self.vars('keystrokes') % 10) save();
	}
	
	function save()
	{
		var sContent =  oQuill.getContents().ops;
		if(sContent[0] != self.vars('default_text'))
		{
			oMyThoughts.onFeedback('info', 'Saving...');
			getInfo
			(
				'update', 
				function(asData)
				{
					self.vars('id', asData.id_thought);
					oMyThoughts.onFeedback('notice', 'Saved ('+asData.led.substr(11, 5)+')');
				},
				{content:sContent, id:self.vars('id')},
				function(sError)
				{
					oMyThoughts.onFeedback('error', 'Not saved! An error occured: '+sError);
				},
				'POST'
			);
		}
	}
</script>