local fonts & fix page switch (selection)

masks/write.html

@@ -35,12 +35,14 @@
 		//Add last thought
 		setLastContent(oQuill, function(){
 			setPageHeight();
-			moveToPage(self.vars('page'));
+			moveToPage('last');
 		});
 		
 		//Key strokes & mouse Events
 		$('#editor').keydown(function(e){
 			if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) onChange('', '', 'user', e);
+			else if(e.which==33) $('.fa-prev').click();
+			else if(e.which==34) $('.fa-next').click();
 		});
 		oQuill.on('text-change', onChange);
 		$(window).mousewheel(function(turn, iDelta) {
@@ -72,8 +74,7 @@
 	
 	oMyThoughts.onQuitPage = function()
 	{
-		save();
+		return save(true);
-		return true;
 	};
 	
 	function setPageHeight()
@@ -98,53 +99,91 @@
 			{
 				self.vars('id', asData.id);
 				oQuill.setContents(asData.ops);
+				//$('#context').append($('#editor .ql-editor').html());
+				//oQuill.setContents([]);
 				if(typeof fCallback == 'function') fCallback();
 			},
 			{id: 'last'}
 		);
 	}
 	
-	function onChange(delta, oldDelta, source, e)
+	function onChange(delta, oldDelta, sSource, e)
 	{
-		if(source == 'user')
+		if(sSource == 'user')
 		{
 			var range = oQuill.getSelection();
 			if(range)
 			{
+				//sCursorPos = '';
+				var bSelection = (typeof e != 'undefined')?e.shiftKey:false;
 				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
+				//console.log('oEditorCurBound: top='+oEditorCurBound.top+' bottom='+oEditorCurBound.bottom);
+				//console.log('---------------------');
+				//console.log('range.length = '+range.length);
+				//console.log('oSelBound: top='+oSelBound.top+' bottom='+oSelBound.bottom);
+				
+				//Detecting new selection & saving original line
+				if(!self.tmp('line') && bSelection) self.tmp('line', $.extend({}, oSelBound));
+				else if(!bSelection) self.tmp('line', false);
+				
+				//Detecting navigating back to original line
+				var bReset = (self.tmp('line') && self.tmp('line').top == oSelBound.top && self.tmp('line').bottom == oSelBound.bottom);
+				
+				//Anticipating arrows (downside of using keydown event)
 				if(e)
 				{
 					switch(e.which)
 					{
 						case 13: //Enter
-							break;
+						case 40: //Down
-						case 40: //down
+							if(bSelection) {
+								if(bReset) sCursorPos = 'last';
+								if(sCursorPos == 'last') { //Downwards selection, expanding
 									oSelBound.bottom += self.vars('line-height');
+								}
+								else { //Upwards selection, reducing
+									oSelBound.top += self.vars('line-height');
+								}
+							}
+							else oSelBound.bottom += self.vars('line-height');
 							break;
-						case 38: //up
+						case 38: //Up
-							oSelBound.top = Math.max(0, oSelBound.top  - self.vars('line-height'));
+							if(bSelection) {
+								if(bReset) sCursorPos = 'first';
+								if(sCursorPos == 'last') { //Downwards selection, reducing
+									oSelBound.bottom -= self.vars('line-height');
+								}
+								else { //Upwards selection, expanding
+									oSelBound.top -= self.vars('line-height');
+								}
+							}
+							else oSelBound.top = Math.max(0, oSelBound.top  - self.vars('line-height'));
 							break;
-						case 37: // left
+						case 37: //Left
+							if(bReset && bSelection) sCursorPos = 'first';
 							oSelBound = oQuill.getBounds(Math.max(0, range.index - 1), range.length);
 							break;
-						case 39: // right
+						case 39: //Right
+							if(bReset && bSelection) sCursorPos = 'last';
 							oSelBound = oQuill.getBounds(range.index + 1,  range.length);
 							break;
 					}
 				}
 				else incKeyStrokes();
 				
+				//console.log('oSelBound: top='+oSelBound.top+' bottom='+oSelBound.bottom);
+			
 				var sNewPage = self.vars('page');
-				if(oSelBound.top < oEditorCurBound.top)
+				if(	oSelBound.top < oEditorCurBound.top && (!bSelection || sCursorPos == 'first') ||
-				{
+					oSelBound.bottom < oEditorCurBound.top && (!bSelection || sCursorPos == 'last')) {
 					sNewPage--;
 				}
-				else if(oSelBound.bottom > oEditorCurBound.bottom)
+				else if(oSelBound.bottom > oEditorCurBound.bottom && (!bSelection || sCursorPos == 'last') ||
-				{
+						oSelBound.top > oEditorCurBound.bottom && (!bSelection || sCursorPos == 'first')) {
 					sNewPage++;
 				}
 				moveToPage(sNewPage);
@@ -157,7 +196,7 @@
 		var iContentHeight = self.vars('editor').height();
 		var iLastPage = Math.floor(iContentHeight / self.vars('page-height'));
 		
-		//console.log(iNewPage);
+		if(iNewPage=='last') iNewPage = iLastPage;
 		
 		if(iNewPage >= 0 && iNewPage <= iLastPage)
 		{
@@ -183,38 +222,35 @@
 	function incKeyStrokes()
 	{
 		self.vars('keystrokes', self.vars('keystrokes') + 1);
-		if(self.vars('keystrokes') % 20 == 0) save();
+		save();
 	}
 	
-	function save()
+	function save(bForce)
 	{
 		if(typeof oSaveTimer != 'undefined') clearTimeout(oSaveTimer);
+		var bSave = (self.vars('keystrokes') % 20 == 0 || bForce);
 		
-		if(!self.vars('saving') && self.vars('keystrokes') != self.vars('lastKeystrokes')) {
+		if(bSave) {
+			if(self.vars('saving')) {
+				oSaveTimer = setTimeout(function(){save(true);}, 500);
+			}
+			else {
 				self.vars('saving', true);
-
-			var iCurrentKeystrokes = self.vars('keystrokes');
 				var sContent =  oQuill.getContents().ops;
-			if(sContent[0] != self.vars('default_text'))
+				if(sContent[0] != self.vars('default_text')) {
-			{
 					oMyThoughts.onFeedback('info', 'Saving...');
-				getInfo
+					getInfo(
-				(
 						'update', 
-					function(sDesc, asData)
+						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)
+						function(sError) {
-					{
 							oMyThoughts.feedback('error', 'Not saved! An error occured: '+sError);
 							self.vars('saving', false);
 							oSaveTimer = setTimeout(save, 1000);
@@ -224,4 +260,9 @@
 				}
 			}
 		}
+		else {
+			oSaveTimer = setTimeout(function(){save(true);}, 1000*10);
+		}
+		return true;
+	}
 </script>

style/_fonts.scss

@@ -0,0 +1,144 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(fonts/va9E4kDNxMZdWfMOD5VvmojLeTY.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5Vvk4jLeTY.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5Vvm4jLeTY.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5VvlIjLeTY.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(https://fonts.gstatic.com/s/firasans/v8/va9E4kDNxMZdWfMOD5VvmIjLeTY.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(fonts/va9E4kDNxMZdWfMOD5VvmYjLeTY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Fira Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Fira Sans Regular'), local('FiraSans-Regular'), url(fonts/va9E4kDNxMZdWfMOD5Vvl4jL.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WRhyzbi.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459W1hyzbi.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WZhyzbi.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(fonts/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Nunito Regular'), local('Nunito-Regular'), url(https://fonts.gstatic.com/s/nunito/v9/XRXV3I6Li01BKofIOuaBXso.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Nunito Regular'), local('Nunito-Regular'), url(fonts/XRXV3I6Li01BKofIO-aBXso.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Nunito';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Nunito Regular'), local('Nunito-Regular'), url(fonts/XRXV3I6Li01BKofINeaB.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v8/6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(fonts/6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(fonts/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

style/_template.scss

@@ -12,7 +12,7 @@ body {
 /* Typography */
 
 a:visited, a {
-	color:$col_main_1;
+	color: $col_main_1;
 	text-decoration: none;
 	font-weight: bold;
 }
@@ -241,7 +241,7 @@ footer {
 		top: 50%;
 		
 		a {
-			color: $gray-500;
+			color: $gray-400 !important;
 		}
 	}
 }

style/_write.scss

@@ -16,16 +16,14 @@
 			position: relative;
 			
 			.ql-container {
+				padding: 0;
+			}
+		
+			.ql-editor, #context {
+				padding:0;
 				font-family: $font_para;
 				font-size: 14px;
-				padding:0;
 				
-				.ql-editor {
-					padding:0;
-				}
-			}
-		
-			#editor {
 				div {
 					margin:0;
 				}

style/mythoughts.scss

@@ -5,7 +5,7 @@
 /* Fonts */
 
 @import 'font-awesome';
-@import url('https://fonts.googleapis.com/css?family=Nunito|Quicksand|Fira+Sans|Montserrat');
+@import 'fonts';
 
 /* Plugins */
 

todo

@@ -1 +1,3 @@
+Todo
+----
 - pgp