Notes

inc/catc.php

@@ -12,7 +12,8 @@ class CATC extends Main
 	{
 		$asClasses = array(
 			array('name'=>'auth', 'project'=>true),
-			array('name'=>'course', 'project'=>true)
+			array('name'=>'course', 'project'=>true),
+			array('name'=>'note', 'project'=>true)
 		);
 		parent::__construct($oClassManagement, $sProcessPage, $asClasses);
 		
@@ -73,7 +74,7 @@ class CATC extends Main
 		);
 		
 		//Pages
-		$asPages = array('logon', 'logoff', 'template', 'workshops');
+		$asPages = array('logon', 'logoff', 'template', 'workshops', 'course');
 		foreach($asPages as $sPage) $asGlobalVars['consts']['pages'][$sPage] = $this->getPageContent($sPage);
 		
 		//Main Page
@@ -136,12 +137,30 @@ class CATC extends Main
 		return $this->oAuth->checkApiKey($sApiKey);
 	}
 	
-	/* Managing Courses */
+	/* Workshops / Courses */
 	
 	public function getWorkshops() {
 		return self::getJsonResult(true, '', (new Course($this->oDb))->getWorkshops());
 	}
 	
+	/* Notes*/
+	
+	public function getNote($iCourseId) {
+		$oCourse = new Course($this->oDb, $iCourseId);
+		$asNote = $oCourse->getNote();
+		$iCourseId = $asNote[Db::getId(Course::COURSE_TABLE)];
+		
+		return self::getJsonResult(($iCourseId > 0), '', array('id'=>$iCourseId, 'ops'=>$asNote['notes'], 'led'=>$asNote['led']));
+	}
+	
+	public function setNote($iCourseId, $asOps) {
+		$oCourse = new Course($this->oDb, $iCourseId);
+		$sError = $oCourse->setNote($asOps);
+		$bSuccess = ($sError=='');
+		
+		return self::getJsonResult(($sError==''), $sError, array('led' => $oCourse->getNote()['led']));
+	}
+	
 	/*
 	public function upload()
 	{

inc/course.php

@@ -11,10 +11,41 @@ class Course extends PhpObject {
 	 */
 	private $oDb;
 	
-	public function __construct(Db &$oDb)
+	private $iCourseId;
+	
+	public function __construct(Db &$oDb, $iCourseId=0)
 	{
 		parent::__construct(__CLASS__, Settings::DEBUG);
 		$this->oDb = &$oDb;
+		$this->setCourseId($iCourseId);
+	}
+	
+	public function getCourseId() {
+		return $this->iCourseId;
+	}
+	
+	public function setCourseId($iCourseId) {
+		$this->iCourseId = $iCourseId;
+	}
+	
+	public function getNote() {
+		$asCourse = $this->oDb->selectRow(self::COURSE_TABLE, $this->getCourseId(), array(Db::getId(self::COURSE_TABLE), 'notes', 'led'));
+		$asCourse['notes'] = json_decode($asCourse['notes'], true);
+		
+		return $asCourse;
+	}
+	
+	public function setNote($asOps) {
+		$sError = '';
+		$sIdCol = Db::getId(self::COURSE_TABLE);
+		
+		if($this->getCourseId() > 0) {
+			$iCourseId = $this->oDb->insertUpdateRow(self::COURSE_TABLE, array($sIdCol=>$this->getCourseId(), 'notes'=>json_encode($asOps)), array($sIdCol));
+			if(!$iCourseId) $sError = $this->oDb->getLastError();
+		}
+		else $sError = 'Course ID not set';
+		
+		return $sError;
 	}
 	
 	public function getWorkshops() {

index.php

@@ -28,12 +28,11 @@ $oClassManagement = new ClassManagement('catc');
 ToolBox::cleanPost($_POST);
 ToolBox::cleanPost($_GET);
 ToolBox::cleanPost($_REQUEST);
-ToolBox::fixGlobalVars(isset($argv)?$argv:array());
+//ToolBox::fixGlobalVars(isset($argv)?$argv:array());
 
 //Available variables
 $sToken = isset($_REQUEST['token'])?$_REQUEST['token']:'';
 $sAction = isset($_REQUEST['a'])?$_REQUEST['a']:'';
-$sPage = isset($_GET['p'])?$_GET['p']:'index';
 $sNickName = isset($_REQUEST['nickname'])?$_REQUEST['nickname']:'';
 $iApiKey = isset($_GET['api'])?$_GET['api']:'';
 $sContent = isset($_POST['content'])?$_POST['content']:'';
@@ -52,6 +51,12 @@ elseif($sAction!='' && $bLoggedIn)
 		case 'workshops':
 			$sResult = $oCATC->getWorkshops();
 			break;
+		case 'get_note':
+			$sResult = $oCATC->getNote($iId);
+			break;
+		case 'set_note':
+			$sResult = $oCATC->setNote($iId, $sContent);
+			break;
 		default:
 			$sResult = CATC::getJsonResult(false, CATC::NOT_FOUND);
 	}

masks/course.html

@@ -0,0 +1,83 @@
+<div id="course">
+	<div id="docs"></div>
+	<div id="notes_box">
+		<div id="notes_feedback"></div>
+		<div id="notes"></div>	
+	</div>
+</div>
+<script type="text/javascript">
+oCATC.pageInit = function(asHash, bFirstPage) {
+	self.setPageTitle('Course');
+	self.tmp('id_course', asHash.items[0]);
+	
+	oEditor = new Editor('#notes');
+	oEditor.onKeyStroke = (e) => {
+		if(e.which == 83 && e.ctrlKey) {
+			e.preventDefault();
+			save(true);
+		}
+		else save();
+	}
+	oEditor.open(self.tmp('id_course'));
+	//oQuill.keyboard.addBinding({key: 'S', ctrlKey: true}, function(){saveNotes(true);});
+};
+
+oCATC.onQuitPage = function() {
+	return save(true);
+};
+
+oCATC.onFeedback = function(sType, sMsg)
+{
+	var $Feedback = $('#notes_feedback').stop();
+	if(sMsg != $Feedback.find('span').text()) {
+		$Feedback.fadeOut($Feedback.is(':empty')?0:'fast', function(){
+			$(this)
+				.empty()
+				.append($('<span>', {'class':sType}).text(sMsg))
+				.fadeIn('fast');
+		});
+	}
+};
+
+function save(bForce)
+{
+	if(typeof oSaveTimer != 'undefined') clearTimeout(oSaveTimer);
+	var bSave = (oEditor.keystrokes % 20 == 0 || bForce);
+
+	if(bSave) {
+		if(self.tmp('saving')) {
+			oSaveTimer = setTimeout(function(){save(true);}, 500);
+		}
+		else {
+			var sContent =  oEditor.getContent();
+			if(oEditor.id != 0) {
+				self.tmp('saving', true);
+				oCATC.onFeedback('info', 'Saving...');
+				getInfo(
+					'set_note', 
+					function(sDesc, asData) {
+						oCATC.feedback('notice', 'Note saved ('+asData.led.substr(11, 5)+')');
+						self.tmp('saving', false);
+					},
+					{
+						id: oEditor.id,
+						content: sContent
+					},
+					function(sError) {
+						oCATC.feedback('error', 'Not saved! An error occured: '+sError);
+						self.tmp('saving', false);
+						oSaveTimer = setTimeout(save, 1000);
+					},
+					'POST'
+				);
+			}
+			else oCATC.feedback('error', 'No Course ID');
+		}
+	}
+	else {
+		oSaveTimer = setTimeout(function(){save(true);}, 1000*10);
+	}
+	return true;
+}
+
+</script>

masks/template.html

@@ -5,7 +5,7 @@
 </div>
 <div id="menu">
 	<ul>
-		<li><a href="#" class="button fal fa-home"></a></li><li><a href="#logoff" class="button fal fa-logoff"></a></li>
+		<li><a href="#workshops" class="button fal fa-home"></a></li><li><a href="#logoff" class="button fal fa-logoff"></a></li>
 	</ul>
 </div>
 <div id="main_title"><h1></h1></div>

scripts/catc.js

@@ -277,46 +277,28 @@ function CATC(asGlobals)
 	};
 }
 
-//Date format
+
-const Inline = Quill.import('blots/inline');
+
-class ThoughtDate extends Inline {    
-    static create(value) {
-        let node = super.create();
-        node.setAttribute('class', 'edi_header');
-        return node;
-    } 
-}
-ThoughtDate.blotName = 'thought_date';
-ThoughtDate.tagName = 'div';
-Quill.register(ThoughtDate);
 
 class Editor {
-	constructor(sContainerId, bReadOnly) {
+	constructor(sEditorId, bReadOnly) {
 		this.id = 0;
-		this.page = 0;
 		this.keystrokes = 0;
-		this.line = false;
 		this.readOnly = bReadOnly || false;
 		this.sCursorPos = '';
 
 		//DOM Elements
-		var sEditorId = 'edi'+Math.floor(Math.random() * 1000);
+		this.$Editor = $(sEditorId);
-		this.$Container = $(sContainerId).addClass('editor').append(self.consts.pages['editor']);
-		this.$Header = this.$Container.find('.edi_header');
-		this.$EditorBox = this.$Container.find('.edi_container');
-		this.$Editor = this.$Container.find('.edi_table').attr('id', sEditorId);
-		this.$PrevBtn = $('.prev');
-		this.$NextBtn = $('.next');
 		
 		this.onKeyStroke = function(e){};
 		
-		this.oQuill = new Quill('#'+sEditorId, {
+		this.oQuill = new Quill(sEditorId, {
-			theme: 'bubble',
+			theme: 'snow',
-			placeholder: 'What\'s on your mind?',
+			placeholder: 'Notes',
-			readOnly: bReadOnly,
+			readOnly: bReadOnly/*,
 			modules: {
 				toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
-			}
+			}*/
 		});
 
 		this._initEvents();
@@ -326,174 +308,29 @@ class Editor {
 	_initEvents() {
 		//Key strokes
 		this.$Editor.keydown((e) => {
-			if($.inArray(e.which, [13, 37, 38, 39, 40]) != -1) this._onChange('', '', 'user', e);
+			if($.inArray(e.which, [13, 37, 38, 39, 40]) == -1) this.onKeyStroke(e);
-			else if(e.which==33) this.$PrevBtn.click();
-			else if(e.which==34) this.$NextBtn.click();
-			else this.onKeyStroke(e);
 		});
 		
 		//On text modification
-		this.oQuill.on('text-change', (delta, oldDelta, sSource) => {this._onChange(delta, oldDelta, sSource);});
+		this.oQuill.on('text-change', (delta, oldDelta, sSource) => {this._incKeyStrokes();});
-		
-		//Mouse wheel events
-		$(window).mousewheel((turn, iDelta) => {
-			var iNewPage = this.page + ((iDelta > 0)?-1:1);
-			this.moveToPage(iNewPage);
-			return false;
-		});
-		
-		//Page buttons
-		this.$PrevBtn.click(() => {this.moveToPage(this.page - 1);});
-		this.$NextBtn.click(() => {this.moveToPage(this.page + 1);});
 	}
 	
 	_postInit(iPage) {
-		iPage = iPage || 0;
-		this._setPageHeight();
-		this.moveToPage(iPage);
 		if(!this.readOnly) this.oQuill.focus();
 	}
 	
-	setHeader(sHeader) {
+	open(iCourseId) {
-		this.$Editor.find('.edi_header').remove();
-		if(this.readOnly) {
-			this.oQuill.insertText(0, sHeader+"\n");
-			this.oQuill.formatText(0, sHeader.length, 'thought_date', true);
-		}
-	}
-	
-	open(iThoughtId) {
 		Tools.ajax(
-			'load',
+			'get_note',
 			(asData) => {
 				this.id = asData.id;
 				this.oQuill.setContents(asData.ops);
-				this.setHeader('Thoughts on '+asData.created_f);
 				this._postInit();
 			},
-			{id: iThoughtId}
+			{id: iCourseId}
 		);
 	}
 	
-	_setPageHeight() {
-		var iHeight = this.$EditorBox.height();
-		var iLineHeight = parseInt(this.$Editor.find('p').css('line-height'));
-		var iMaxHeight = Math.floor(iHeight / iLineHeight) * iLineHeight;
-		this.$EditorBox.height(iMaxHeight+'px');
-		
-		this.lineHeight = iLineHeight;
-		this.pageHeight = iMaxHeight;
-	}
-	
-	_onChange(delta, oldDelta, sSource, e) {
-		if(sSource == 'user')
-		{
-			var range = this.oQuill.getSelection();
-			if(range)
-			{
-				var bSelection = (typeof e != 'undefined')?e.shiftKey:false;
-				var oSelBound = this.oQuill.getBounds(range.index, range.length);
-				
-				var oEditorCurBound = {	top:	this.pageHeight * this.page,
-										bottom:	this.pageHeight * (this.page + 1)};
-				
-				//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(!this.line && bSelection) this.line = $.extend({}, oSelBound);
-				else if(!bSelection) this.line = false;
-				
-				//Detecting navigating back to original line
-				var bReset = (this.line && this.line.top == oSelBound.top && this.line.bottom == oSelBound.bottom);
-				
-				//Anticipating arrows (downside of using keydown event)
-				if(e)
-				{
-					switch(e.which)
-					{
-						case 13: //Enter
-						case 40: //Down
-							if(bSelection) {
-								if(bReset) this.sCursorPos = 'last';
-								if(this.sCursorPos == 'last') { //Downwards selection, expanding
-									oSelBound.bottom += this.lineHeight;
-								}
-								else { //Upwards selection, reducing
-									oSelBound.top += this.lineHeight;
-								}
-							}
-							else oSelBound.bottom += this.lineHeight;
-							break;
-						case 38: //Up
-							if(bSelection) {
-								if(bReset) this.sCursorPos = 'first';
-								if(this.sCursorPos == 'last') { //Downwards selection, reducing
-									oSelBound.bottom -= this.lineHeight;
-								}
-								else { //Upwards selection, expanding
-									oSelBound.top -= this.lineHeight;
-								}
-							}
-							else oSelBound.top = Math.max(0, oSelBound.top  - this.lineHeight);
-							break;
-						case 37: //Left
-							if(bReset && bSelection) this.sCursorPos = 'first';
-							oSelBound = this.oQuill.getBounds(Math.max(0, range.index - 1), range.length);
-							break;
-						case 39: //Right
-							if(bReset && bSelection) this.sCursorPos = 'last';
-							oSelBound = this.oQuill.getBounds(range.index + 1,  range.length);
-							break;
-					}
-				}
-				else this._incKeyStrokes();
-				
-				//console.log('oSelBound: top='+oSelBound.top+' bottom='+oSelBound.bottom);
-			
-				var sNewPage = this.page;
-				if(	oSelBound.top < oEditorCurBound.top && (!bSelection || this.sCursorPos == 'first') ||
-					oSelBound.bottom < oEditorCurBound.top && (!bSelection || this.sCursorPos == 'last')) {
-					sNewPage--;
-				}
-				else if(oSelBound.bottom > oEditorCurBound.bottom && (!bSelection || this.sCursorPos == 'last') ||
-						oSelBound.top > oEditorCurBound.bottom && (!bSelection || this.sCursorPos == 'first')) {
-					sNewPage++;
-				}
-				this.moveToPage(sNewPage);
-			}
-		}
-	}
-	
-	moveToPage(iNewPage) {
-		var iContentHeight = this.$Editor.height();
-		var iLastPage = Math.floor(iContentHeight / this.pageHeight);
-		
-		if(iNewPage == 'last') iNewPage = iLastPage;
-		
-		if(iNewPage >= 0 && iNewPage <= iLastPage)
-		{
-			if(iNewPage != this.page)
-			{
-				var iOldPage = this.page;
-				this.page = iNewPage;
-				
-				//Page Position
-				var iOffset = this.page * this.pageHeight * -1;
-				this.$Editor.css('top', iOffset);
-			}
-			
-			//Page Number
-			//$('.curr').text(self.vars('quill_page') + 1);
-			
-			//Detect First/Last Page
-			this.$PrevBtn.toggleClass('visible', this.page != 0);
-			this.$NextBtn.toggleClass('visible', this.page != iLastPage);
-		}
-	}
-	
 	_incKeyStrokes() {
 		this.keystrokes += 1;
 	}

style/_page_course.scss

@@ -0,0 +1,35 @@
+#course {
+	
+	#notes_box {
+		position: absolute;
+		width: 70%;
+		top: 0;
+		right: 0;
+		height: 100%;
+		
+		#notes_feedback {
+			position: absolute;
+			top: 0;
+			right: 0;
+			height: 41.35px;
+			width: 50%;
+			text-align: right;
+			
+			span {
+				position: absolute;
+				width: 100%;
+				display: inline-block;
+				top: 50%;
+				transform: translateY(-50%);
+				right: 0;
+			}
+		}
+		
+		#notes {
+			width: 100%;
+			height: calc(100% - 43.35px);
+			background: $gray-400;
+			border-radius: 0.5em;
+		}
+	}
+}

style/_quill.scss

@@ -1,80 +1,16 @@
-@import 'quill/quill.bubble';
+@import 'quill/quill.snow';
 
+.ql-toolbar.ql-snow {
+	border: none;
+}
+
+.ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
+	color: $col_main_2;
+}
+.ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+	stroke: $col_main_2;
+}	
 .ql-editor.ql-blank::before {
 	left: 1.5em;
 	color: $gray-400;
 }
-
-.editor {
-	position: relative;
-	height:100%;
-
-	.edi_container {
-		height: calc(100% - 2em); /* 2 * 2em*/
-		overflow: hidden;
-		position: relative;
-		
-		.edi_content {
-			
-			height:auto;
-			position: relative;
-			
-			.ql-container {
-				padding: 0;
-			}
-		
-			.ql-editor {
-				padding: 0;
-				font-family: $font_para;
-				font-size: 14px;
-				
-				div {
-					margin: 0;
-					
-					&.edi_header {
-						color: $gray-500;
-						font-style: italic;
-						line-height: 3em;
-					}
-				}
-			
-				p {
-					text-indent: 1.5em;
-					margin: 0;
-					padding: 0;
-					text-align: justify;
-					line-height: 1.5em;
-				}
-			}
-		}
-	}
-
-	/* Write - Navbar */
-	
-	.edi_nav {
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		left: 0;
-		
-		.nav-elem {
-			color: $gray-500;
-			display: inline-block;
-			cursor: pointer;
-			width: 1.25em;
-			font-size: 1.25em;
-			
-			&:hover {
-				color: $gray-700;
-			}
-			
-			&.prev, &.curr, &.next {
-				visibility: hidden;
-			}
-
-			&.next {
-				float: right;
-			}
-		}
-	}
-}

style/_template.scss

@@ -154,7 +154,7 @@ a.button:active {
 #main {
 	display: none;
 	position: absolute;
-	top: 138px;
+	top: calc(138px + 4em);
 	bottom: 2rem;
 	right:0;
 	left:0;

style/catc.scss

@@ -20,3 +20,4 @@
 
 @import 'page_logon';
 @import 'page_workshops';
+@import 'page_course';