update quill js to 1.3.6

masks/write.html

@@ -7,36 +7,22 @@
 	</div>
 	<div id="editor_container">
 		<div id="editor_content">
-			<div id="editor">
+			<div id="editor" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div>
-				<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>
-				<p>'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.</p>
-				<p>In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises.</p>
-				<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>
-				<p>'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.</p>
-				<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">
 	oMyThoughts.pageInit = function(asHash, bFirstPage)
 	{
-		self.vars('counter', 0);
 		self.vars('id', 0);
-		self.vars('default_text', '<p><br></p>');
+		self.vars('default_text', "\n");
-		self.vars('working', false);
+		self.vars('page', 0);
-		self.vars('prec_displayed', 0);
+		self.vars('keystrokes', 0);
-		self.vars('prec_content', 0);
-		//self.vars('page', 0);
 		
+		//DOM
 		self.vars('editor', $('#editor_content'));
 
-		self.vars('page_height', $('#editor_container').height());
+		//Quill Engine
-		
 		oQuill = new Quill('#editor', {
 			theme: 'bubble',
 			modules:
@@ -44,85 +30,42 @@
 				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')}]);
 		
-		oEditorBound = {top: self.vars('page_height'), bottom: self.vars('page_height')};
+		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);
-		oQuill.on('selection-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(0);
+		moveToPage(self.vars('page'));
-		
-		$('.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:'+($('#editor').height() - 1)+'px;left:'+($('#editor').width() - 10)+'px;'}));
-
-				//var oSelBoundAvg = oSelBound.top + (oSelBound.bottom - oSelBound.top)/2;
-				
-				var oEditorCurBound = {	top:	oEditorBound.top*self.vars('page'),
-										bottom:	oEditorBound.bottom*(self.vars('page') + 1)};
-				
-				console.log(oSelBound.top+' < '+oEditorCurBound.top);
-				console.log(oSelBound.bottom+' > '+oEditorCurBound.bottom);
-				
-				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'))
-		{
-			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);
-		}
-		
-		//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)
 	{
 		var $Feedback = $('#write_feedback');
@@ -142,9 +85,99 @@
 		return true;
 	};
 	
-	function save(sContent)
+	function setPageHeight()
 	{
-		if(sContent != self.vars('default_text'))
+		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
@@ -158,38 +191,10 @@
 				{content:sContent, id:self.vars('id')},
 				function(sError)
 				{
-					oMyThoughts.onFeedback('error', 'Not saved! Un error occured: '+sError);
+					oMyThoughts.onFeedback('error', 'Not saved! An error occured: '+sError);
 				},
 				'POST'
 			);
 		}
 	}
-	
-	function checkPageBook()
-	{
-		self.vars('working', true);
-		var iEm = $(1).toPx();
-		iEm = iEm.substr(0, iEm.length - 2);
-		
-		$Editor = self.vars('editor');
-		
-		//Content Height
-		var iContentHeight = $Editor.height();
-		
-		//Calculates what should be displayed
-		iDisplayedHeight = iContentHeight % self.vars('max_height');
-		console.log(iContentHeight+'%'+self.vars('max_height')+'='+iDisplayedHeight);
-		
-		//Navigation
-		var iNewPage = Math.ceil(iContentHeight / self.vars('max_height'));
-		moveToPage(iNewPage);
-		
-		
-		self.vars('prec_displayed', iDisplayedHeight);
-		self.vars('prec_content', iContentHeight);
-		
-		self.vars('working', false);
-	}
-	
-	
 </script>

style/_quill.bubble.scss

@@ -1,5 +1,5 @@
-/*
+/*!
- * Quill Editor v1.1.7
+ * Quill Editor v1.3.6
  * https://quilljs.com/
  * Copyright (c) 2014, Jason Chen
  * Copyright (c) 2013, salesforce.com
@@ -15,6 +15,9 @@
 .ql-container.ql-disabled .ql-tooltip {
   visibility: hidden;
 }
+.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
+  pointer-events: none;
+}
 .ql-clipboard {
   left: -100000px;
   height: 1px;
@@ -28,7 +31,6 @@
 }
 .ql-editor {
   box-sizing: border-box;
-  cursor: text;
   line-height: 1.42;
   height: 100%;
   outline: none;
@@ -40,6 +42,9 @@
   white-space: pre-wrap;
   word-wrap: break-word;
 }
+.ql-editor > * {
+  cursor: text;
+}
 .ql-editor p,
 .ql-editor ol,
 .ql-editor ul,
@@ -64,12 +69,21 @@
   list-style-type: none;
 }
 .ql-editor ul > li::before {
-  content: '\25CF';
+  content: '\2022';
+}
+.ql-editor ul[data-checked=true],
+.ql-editor ul[data-checked=false] {
+  pointer-events: none;
+}
+.ql-editor ul[data-checked=true] > li *,
+.ql-editor ul[data-checked=false] > li * {
+  pointer-events: all;
 }
 .ql-editor ul[data-checked=true] > li::before,
 .ql-editor ul[data-checked=false] > li::before {
   color: #777;
   cursor: pointer;
+  pointer-events: all;
 }
 .ql-editor ul[data-checked=true] > li::before {
   content: '\2611';
@@ -79,24 +93,32 @@
 }
 .ql-editor li::before {
   display: inline-block;
-  margin-right: 0.3em;
-  text-align: right;
   white-space: nowrap;
   width: 1.2em;
 }
 .ql-editor li:not(.ql-direction-rtl)::before {
   margin-left: -1.5em;
+  margin-right: 0.3em;
+  text-align: right;
 }
-.ql-editor ol li,
+.ql-editor li.ql-direction-rtl::before {
-.ql-editor ul li {
+  margin-left: 0.3em;
+  margin-right: -1.5em;
+}
+.ql-editor ol li:not(.ql-direction-rtl),
+.ql-editor ul li:not(.ql-direction-rtl) {
   padding-left: 1.5em;
 }
+.ql-editor ol li.ql-direction-rtl,
+.ql-editor ul li.ql-direction-rtl {
+  padding-right: 1.5em;
+}
 .ql-editor ol li {
   counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
-  counter-increment: list-num;
+  counter-increment: list-0;
 }
 .ql-editor ol li:before {
-  content: counter(list-num, decimal) '. ';
+  content: counter(list-0, decimal) '. ';
 }
 .ql-editor ol li.ql-indent-1 {
   counter-increment: list-1;
@@ -368,8 +390,10 @@
   color: rgba(0,0,0,0.6);
   content: attr(data-placeholder);
   font-style: italic;
+  left: 15px;
   pointer-events: none;
   position: absolute;
+  right: 15px;
 }
 .ql-bubble.ql-toolbar:after,
 .ql-bubble .ql-toolbar:after {
@@ -393,12 +417,18 @@
   float: left;
   height: 100%;
 }
+.ql-bubble.ql-toolbar button:active:hover,
+.ql-bubble .ql-toolbar button:active:hover {
+  outline: none;
+}
 .ql-bubble.ql-toolbar input.ql-image[type=file],
 .ql-bubble .ql-toolbar input.ql-image[type=file] {
   display: none;
 }
 .ql-bubble.ql-toolbar button:hover,
 .ql-bubble .ql-toolbar button:hover,
+.ql-bubble.ql-toolbar button:focus,
+.ql-bubble .ql-toolbar button:focus,
 .ql-bubble.ql-toolbar button.ql-active,
 .ql-bubble .ql-toolbar button.ql-active,
 .ql-bubble.ql-toolbar .ql-picker-label:hover,
@@ -413,6 +443,8 @@
 }
 .ql-bubble.ql-toolbar button:hover .ql-fill,
 .ql-bubble .ql-toolbar button:hover .ql-fill,
+.ql-bubble.ql-toolbar button:focus .ql-fill,
+.ql-bubble .ql-toolbar button:focus .ql-fill,
 .ql-bubble.ql-toolbar button.ql-active .ql-fill,
 .ql-bubble .ql-toolbar button.ql-active .ql-fill,
 .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-fill,
@@ -425,6 +457,8 @@
 .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
 .ql-bubble.ql-toolbar button:hover .ql-stroke.ql-fill,
 .ql-bubble .ql-toolbar button:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar button:focus .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar button:focus .ql-stroke.ql-fill,
 .ql-bubble.ql-toolbar button.ql-active .ql-stroke.ql-fill,
 .ql-bubble .ql-toolbar button.ql-active .ql-stroke.ql-fill,
 .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
@@ -439,6 +473,8 @@
 }
 .ql-bubble.ql-toolbar button:hover .ql-stroke,
 .ql-bubble .ql-toolbar button:hover .ql-stroke,
+.ql-bubble.ql-toolbar button:focus .ql-stroke,
+.ql-bubble .ql-toolbar button:focus .ql-stroke,
 .ql-bubble.ql-toolbar button.ql-active .ql-stroke,
 .ql-bubble .ql-toolbar button.ql-active .ql-stroke,
 .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke,
@@ -451,6 +487,8 @@
 .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
 .ql-bubble.ql-toolbar button:hover .ql-stroke-miter,
 .ql-bubble .ql-toolbar button:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar button:focus .ql-stroke-miter,
+.ql-bubble .ql-toolbar button:focus .ql-stroke-miter,
 .ql-bubble.ql-toolbar button.ql-active .ql-stroke-miter,
 .ql-bubble .ql-toolbar button.ql-active .ql-stroke-miter,
 .ql-bubble.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
@@ -463,6 +501,24 @@
 .ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
   stroke: #fff;
 }
+@media (pointer: coarse) {
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active),
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) {
+    color: #ccc;
+  }
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-fill,
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
+    fill: #ccc;
+  }
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
+  .ql-bubble.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
+  .ql-bubble .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
+    stroke: #ccc;
+  }
+}
 .ql-bubble {
   box-sizing: border-box;
 }
@@ -478,11 +534,15 @@
 }
 .ql-bubble .ql-tooltip {
   position: absolute;
+  transform: translateY(10px);
 }
 .ql-bubble .ql-tooltip a {
   cursor: pointer;
   text-decoration: none;
 }
+.ql-bubble .ql-tooltip.ql-flip {
+  transform: translateY(-10px);
+}
 .ql-bubble .ql-formats {
   display: inline-block;
   vertical-align: middle;
@@ -571,13 +631,7 @@
 }
 .ql-bubble .ql-editor code {
   font-size: 85%;
-  padding-bottom: 2px;
+  padding: 2px 4px;
-  padding-top: 2px;
-}
-.ql-bubble .ql-editor code:before,
-.ql-bubble .ql-editor code:after {
-  content: "\A0";
-  letter-spacing: -2px;
 }
 .ql-bubble .ql-editor pre.ql-syntax {
   background-color: #23241f;
@@ -808,10 +862,8 @@
   background-color: #444;
   border-radius: 25px;
   color: #fff;
-  margin-top: 10px;
 }
 .ql-bubble .ql-tooltip-arrow {
-  border-bottom: 6px solid #444;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   content: " ";
@@ -819,8 +871,15 @@
   left: 50%;
   margin-left: -6px;
   position: absolute;
+}
+.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow {
+  border-bottom: 6px solid #444;
   top: -6px;
 }
+.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow {
+  border-top: 6px solid #444;
+  bottom: -6px;
+}
 .ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
   display: block;
 }
@@ -852,3 +911,42 @@
   font-size: 16px;
   font-weight: bold;
 }
+.ql-container.ql-bubble:not(.ql-disabled) a {
+  position: relative;
+  white-space: nowrap;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::before {
+  background-color: #444;
+  border-radius: 15px;
+  top: -5px;
+  font-size: 12px;
+  color: #fff;
+  content: attr(href);
+  font-weight: normal;
+  overflow: hidden;
+  padding: 5px 15px;
+  text-decoration: none;
+  z-index: 1;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::after {
+  border-top: 6px solid #444;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  top: 0;
+  content: " ";
+  height: 0;
+  width: 0;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a::before,
+.ql-container.ql-bubble:not(.ql-disabled) a::after {
+  left: 0;
+  margin-left: 50%;
+  position: absolute;
+  transform: translate(-50%, -100%);
+  transition: visibility 0s ease 200ms;
+  visibility: hidden;
+}
+.ql-container.ql-bubble:not(.ql-disabled) a:hover::before,
+.ql-container.ql-bubble:not(.ql-disabled) a:hover::after {
+  visibility: visible;
+}

style/_write.scss

@@ -57,17 +57,10 @@
 
 #write #editor p {
 	text-indent: 1.5em;
-	margin:1em 0 0 0;
+	margin: 0;
 	padding: 0;
 	text-align: justify;
-}
+	line-height: 1.5em;
-
-#write #editor p:first-child {
-    margin-top: 0;
-}
-
-#write .jqte_editor p:FIRST-CHILD, #write .jqte_toolbar {
-	margin-top:0.5em;
 }
 
 /* Write - Toolbar */