set up quill library

.gitignore

@@ -2,3 +2,6 @@
 /settings.php
 /.buildpath
 /.settings/
+/style/.sass-cache/
+/.externalToolBuilders/
+/settings.php

config.php

@@ -171,14 +171,14 @@ class Session extends PhpObject
 		{
 			$this->addError('Nickname: HTML characters are forbidden');
 		}
-		elseif($this->oMySql->selectRow(MySqlManager::USERS_TABLE, array('user'=>$sLogin)))
+		elseif($this->oMySql->selectRow(Db::USERS_TABLE, array('user'=>$sLogin)))
 		{
 			$this->addError('Nickname: This is already a user called by that name, choose a different one');
 		}
 		else
 		{
 			$asData['pass'] = self::encryptPassword($sPass);
-			$iUserId = $this->oMySql->insertRow(MySqlManager::USERS_TABLE, $asData);
+			$iUserId = $this->oMySql->insertRow(Db::USERS_TABLE, $asData);
 			return $this->logMeIn($sLogin, $sPass);
 		}
 		return false;
@@ -187,7 +187,7 @@ class Session extends PhpObject
 	public function logMeIn($sLogin, $sPass)
 	{
 		$bResult = false;
-		$asUser = $this->oMySql->selectRow(MySqlManager::USERS_TABLE, array('user'=>$sLogin));
+		$asUser = $this->oMySql->selectRow(Db::USERS_TABLE, array('user'=>$sLogin));
 		if(!$asUser)
 		{
 			$this->addError('Utilisateur inconnu');
@@ -198,7 +198,7 @@ class Session extends PhpObject
 		}
 		else
 		{
-			$this->setSession($asUser[MySqlManager::getId(MySqlManager::USERS_TABLE)], $sLogin);
+			$this->setSession($asUser[Db::getId(Db::USERS_TABLE)], $sLogin);
 			$bResult = true;
 		}
 		return $bResult;
@@ -228,9 +228,9 @@ class Session extends PhpObject
 		$asConstraints = array('user'=>$sUserName);
 		if($iUserId>0)
 		{
-			$asConstraints[MySqlManager::getId(MySqlManager::USERS_TABLE)] = $iUserId;
+			$asConstraints[Db::getId(Db::USERS_TABLE)] = $iUserId;
 		}
-		return $this->oMySql->selectValue(MySqlManager::USERS_TABLE, 'COUNT(1)', $asConstraints);
+		return $this->oMySql->selectValue(Db::USERS_TABLE, 'COUNT(1)', $asConstraints);
 	}
 	
 	public function logMeOut()
@@ -534,7 +534,7 @@ class MyThoughts extends PhpObject
 	function __construct()
 	{
 		parent::__construct();
-		$this->oMySql = new MySqlManager();
+		$this->oMySql = new Db();
 		$this->oSession = new Session($this->oMySql);
 		$this->oCalendar = new Calendar($this->oMySql, $this->oSession);
 		$this->oMainMask = new Mask('index');
@@ -589,9 +589,9 @@ class MyThoughts extends PhpObject
 	public function updateThought($iThoughtId, $sThought)
 	{
 		$asValues = array('thought'=>$this->encodeThought($sThought));
-		$asConstraints = array(	MySqlManager::getId(MySqlManager::THOUGHTS_TABLE)=>$iThoughtId, 
+		$asConstraints = array(	Db::getId(Db::THOUGHTS_TABLE)=>$iThoughtId, 
-								MySqlManager::getId(MySqlManager::USERS_TABLE)=>$this->oSession->getUserId());
+								Db::getId(Db::USERS_TABLE)=>$this->oSession->getUserId());
-		$this->oMySql->updateRow(MySqlManager::THOUGHTS_TABLE, $asConstraints, $asValues);
+		$this->oMySql->updateRow(Db::THOUGHTS_TABLE, $asConstraints, $asValues);
 	}
 	
 
@@ -635,8 +635,8 @@ class MyThoughts extends PhpObject
 	{
 		if(!array_key_exists($sSettingName, $this->asSettings))
 		{
-			$asConstraint = array(MySqlManager::getText(MySqlManager::SETTINGS_TABLE)=>$sSettingName, MySqlManager::getId(MySqlManager::USERS_TABLE)=>$this->oSession->getUserId());
+			$asConstraint = array(Db::getText(Db::SETTINGS_TABLE)=>$sSettingName, Db::getId(Db::USERS_TABLE)=>$this->oSession->getUserId());
-			$oValue = $this->oMySql->selectValue(MySqlManager::SETTINGS_TABLE, 'value', $asConstraint);
+			$oValue = $this->oMySql->selectValue(Db::SETTINGS_TABLE, 'value', $asConstraint);
 			$this->asSettings[$sSettingName] = (!$oValue)?self::getDefaultSetting($sSettingName):$oValue;
 		}
 		return $this->asSettings[$sSettingName];
@@ -644,7 +644,7 @@ class MyThoughts extends PhpObject
 	
 	private function setSetting($sValue, $sSettingName)
 	{
-		$this->oMySql->insertUpdateRow(MySqlManager::SETTINGS_TABLE, array('setting'=>$sSettingName, MySqlManager::getId(MySqlManager::USERS_TABLE)=>$this->oSession->getUserId()), array('value'=>$sValue));
+		$this->oMySql->insertUpdateRow(Db::SETTINGS_TABLE, array('setting'=>$sSettingName, Db::getId(Db::USERS_TABLE)=>$this->oSession->getUserId()), array('value'=>$sValue));
 	}
 	
 	public function setSettings($asSettings)
@@ -669,9 +669,9 @@ class MyThoughts extends PhpObject
 		if($iThoughtId!=0)
 		{
 			//load a thought
-			$asConstraints = array(	MySqlManager::getId(MySqlManager::THOUGHTS_TABLE)=>$iThoughtId, 
+			$asConstraints = array(	Db::getId(Db::THOUGHTS_TABLE)=>$iThoughtId, 
-									MySqlManager::getId(MySqlManager::USERS_TABLE)=>$this->oSession->getUserId());
+									Db::getId(Db::USERS_TABLE)=>$this->oSession->getUserId());
-			$asThought = $this->oMySql->selectRow(MySqlManager::THOUGHTS_TABLE, $asConstraints);
+			$asThought = $this->oMySql->selectRow(Db::THOUGHTS_TABLE, $asConstraints);
 			$sThought = $this->decodeThought($asThought['thought']);
 			$iThoughtTime = 'Saved at '.date(self::LAYOUT_TIME_FORMAT, strtotime($asThought['led']));
 		}
@@ -694,8 +694,8 @@ class MyThoughts extends PhpObject
 		$sMySqlDate = date(self::MYSQL_DATE_FORMAT, $iTimeStamp);
 		$sLayoutDate = date(self::LAYOUT_DATE_FORMAT, $iTimeStamp);
 		
-		$asConstraints = array('DATE(led)'=>$sMySqlDate, MySqlManager::getId(MySqlManager::USERS_TABLE)=>$this->oSession->getUserId());
+		$asConstraints = array('DATE(led)'=>$sMySqlDate, Db::getId(Db::USERS_TABLE)=>$this->oSession->getUserId());
-		$asThougths = $this->oMySql->selectRows(array('from'=>MySqlManager::THOUGHTS_TABLE, 'constraint'=>$asConstraints));
+		$asThougths = $this->oMySql->selectRows(array('from'=>Db::THOUGHTS_TABLE, 'constraint'=>$asConstraints));
 		
 		$this->setPage('read_thought');
 		$this->setPageTitle('Thoughts on '.$sLayoutDate);
@@ -825,8 +825,8 @@ class Calendar extends PhpObject
 	{
 		//TODO essayer avec selectRows
 		$sQuery = "SELECT DATE_FORMAT(led, '%d') AS day
-					FROM ".MySqlManager::THOUGHTS_TABLE."
+					FROM ".Db::THOUGHTS_TABLE."
-					WHERE ".MySqlManager::getId(MySqlManager::USERS_TABLE)." = ".$this->oSession->getUserId()."
+					WHERE ".Db::getId(Db::USERS_TABLE)." = ".$this->oSession->getUserId()."
 					AND YEAR(led) = ".$this->iYear."
 					AND MONTH(led) = ".$this->iMonth."
 					GROUP BY day

inc/auth.php

@@ -9,15 +9,15 @@ class Auth extends PhpObject
 	
 	/**
 	 * Database Connection
-	 * @var MySqlManager
+	 * @var Db
 	 */
-	private $oMySql;
+	private $oDb;
 	private $iUserId;
 	private $sApiKey;
 	
-	public function __construct($oMySql, $sApiKey='', $bAutoLogin=true)
+	public function __construct($oDb, $sApiKey='', $bAutoLogin=true)
 	{
-		$this->oMySql = $oMySql;
+		$this->oDb = $oDb;
 		$this->setUserId(0);
 		$this->sApiKey = $sApiKey;
 		if($bAutoLogin) $this->autoLogIn();
@@ -47,12 +47,12 @@ class Auth extends PhpObject
 			$sPassToken = substr(strstr($sToken, self::TOKEN_SEP), strlen(self::TOKEN_SEP));
 			if($sLoginToken!='' && $sPassToken!='')
 			{
-				$asEmpl = $this->oMySql->selectRow(MyThoughts::USER_TABLE, array("MD5(".MySqlManager::getText(MyThoughts::USER_TABLE).")"=>$sLoginToken));
+				$asEmpl = $this->oDb->selectRow(MyThoughts::USER_TABLE, array("MD5(".Db::getText(MyThoughts::USER_TABLE).")"=>$sLoginToken));
 				if(!empty($asEmpl))
 				{
 					if(self::CheckPassword($sPassToken, $asEmpl['pass']))
 					{
-						$this->setUserId($asEmpl[MySqlManager::getId(MyThoughts::USER_TABLE)]);
+						$this->setUserId($asEmpl[Db::getId(MyThoughts::USER_TABLE)]);
 						$this->resetAuthCookie($this->getUserId());
 					}
 					else $sDesc = 'wrong password';
@@ -74,17 +74,17 @@ class Auth extends PhpObject
 			$iUserId = addslashes(strstr($sCookie, self::TOKEN_SEP, true));
 			$sCookie = substr(strstr($sCookie, self::TOKEN_SEP), strlen(self::TOKEN_SEP));
 		
-			$asEmpl = $this->oMySql->selectRow(MyThoughts::USER_TABLE, array(MySqlManager::getId(MyThoughts::USER_TABLE)=>$iUserId));
+			$asEmpl = $this->oDb->selectRow(MyThoughts::USER_TABLE, array(Db::getId(MyThoughts::USER_TABLE)=>$iUserId));
 			if(!empty($asEmpl))
 			{
 				if($sCookie==$asEmpl['cookie'])
 				{
-					$this->setUserId($asEmpl[MySqlManager::getId(MyThoughts::USER_TABLE)]);
+					$this->setUserId($asEmpl[Db::getId(MyThoughts::USER_TABLE)]);
 		
 					//Reset pass once a day
 					if(mb_substr($asEmpl['led'], 0, 10) != date('Y-m-d')) $this->resetAuthCookie($this->getUserId());
 				}
-				else $this->addError('token corrompu pour le user '.$asEmpl[MySqlManager::getId(MyThoughts::USER_TABLE)]);
+				else $this->addError('token corrompu pour le user '.$asEmpl[Db::getId(MyThoughts::USER_TABLE)]);
 			}
 			else $this->addError('Utilisateur '.$iUserId.' inconnu');
 		}
@@ -93,11 +93,11 @@ class Auth extends PhpObject
 	public function addUser($sSafeNickName, $sNickName, $bLogMeIn=false)
 	{
 		$sPass = self::HashPassword(self::getLoginToken($sSafeNickName));
-		$bExist = $this->oMySql->pingValue(MyThoughts::USER_TABLE, array(MySqlManager::getText(MyThoughts::USER_TABLE)=>$sSafeNickName));
+		$bExist = $this->oDb->pingValue(MyThoughts::USER_TABLE, array(Db::getText(MyThoughts::USER_TABLE)=>$sSafeNickName));
 		if($bExist) return -1;
 		else
 		{
-			$iUserId = $this->oMySql->insertRow(MyThoughts::USER_TABLE, array(MySqlManager::getText(MyThoughts::USER_TABLE)=>$sSafeNickName, 'nickname'=>$sNickName));
+			$iUserId = $this->oDb->insertRow(MyThoughts::USER_TABLE, array(Db::getText(MyThoughts::USER_TABLE)=>$sSafeNickName, 'nickname'=>$sNickName, 'pass'=>$sPass));
 			if($iUserId>0)
 			{
 				$this->resetPass($iUserId);
@@ -115,17 +115,17 @@ class Auth extends PhpObject
 	
 	private function resetPass($iUserId=0)
 	{
-		$sUserIdCol = MySqlManager::getId(MyThoughts::USER_TABLE);
+		$sUserIdCol = Db::getId(MyThoughts::USER_TABLE);
-		$sUserTextCol = MySqlManager::getText(MyThoughts::USER_TABLE);
+		$sUserTextCol = Db::getText(MyThoughts::USER_TABLE);
 		
 		$asInfo = array('select'=>array($sUserIdCol, $sUserTextCol), 'from'=>MyThoughts::USER_TABLE);
 		if($iUserId>0) $asInfo['constraint'] = array($sUserIdCol=>$iUserId);
 		
-		$asUsers = $this->oMySql->selectRows($asInfo);
+		$asUsers = $this->oDb->selectRows($asInfo);
 		foreach($asUsers as $asUser)
 		{
 			$sToken = self::HashPassword(self::getLoginToken($asUser[$sUserTextCol]));
-			$this->oMySql->updateRow(MyThoughts::USER_TABLE, array(MySqlManager::getId(MyThoughts::USER_TABLE)=>$asUser[$sUserIdCol]), array('pass'=>$sToken));
+			$this->oDb->updateRow(MyThoughts::USER_TABLE, array(Db::getId(MyThoughts::USER_TABLE)=>$asUser[$sUserIdCol]), array('pass'=>$sToken));
 		}
 	}
 	
@@ -143,7 +143,7 @@ class Auth extends PhpObject
 		$sNewPass = self::getAuthCookie($iUserId);
 		$iTimeLimit = time()+60*60*24*30;
 		//mysqli_query($con, "UPDATE EMPLOYEE SET COOKIE = '".addslashes($sNewPass)."' WHERE ID = ".$iUserId);
-		$this->oMySql->updateRow(MyThoughts::USER_TABLE, array(MySqlManager::getId(MyThoughts::USER_TABLE)=>$iUserId), array("cookie"=>$sNewPass));
+		$this->oDb->updateRow(MyThoughts::USER_TABLE, array(Db::getId(MyThoughts::USER_TABLE)=>$iUserId), array("cookie"=>$sNewPass));
 		setcookie(self::USER_COOKIE_PASS, $iUserId.self::TOKEN_SEP.$sNewPass, $iTimeLimit);
 	}
 	

inc/calendar.php

@@ -40,8 +40,8 @@ class Calendar extends PhpObject
 	{
 		//TODO essayer avec selectRows
 		$sQuery = "SELECT DATE_FORMAT(led, '%d') AS day
-					FROM ".MySqlManager::THOUGHTS_TABLE."
+					FROM ".Db::THOUGHTS_TABLE."
-					WHERE ".MySqlManager::getId(MySqlManager::USERS_TABLE)." = ".$this->oSession->getUserId()."
+					WHERE ".Db::getId(Db::USERS_TABLE)." = ".$this->oSession->getUserId()."
 					AND YEAR(led) = ".$this->iYear."
 					AND MONTH(led) = ".$this->iMonth."
 					GROUP BY day

inc/mythoughts.php

@@ -41,9 +41,9 @@ class MyThoughts extends PhpObject
 	
 	/**
 	 * Database Connection
-	 * @var MySqlManager
+	 * @var Db
 	 */
-	private $oMySql;
+	private $oDb;
 	
 	/**
 	 * 
@@ -67,22 +67,22 @@ class MyThoughts extends PhpObject
 		$this->setContext($sProcessPage);
 		
 		//Load classes
-		$this->oClassManagement->incClass('mysqlmanager');
+		$this->oClassManagement->incClass('db');
 		$this->oClassManagement->incClass('auth', true);
 		//$this->oClassManagement->incClass('calendar', true);
 		
 		//Init objects
-		$this->oMySql = new MySqlManager(Settings::DB_SERVER, Settings::DB_LOGIN, Settings::DB_PASS, Settings::DB_NAME, self::getSqlOptions() , Settings::DB_ENC);
+		$this->oDb = new Db(Settings::DB_SERVER, Settings::DB_LOGIN, Settings::DB_PASS, Settings::DB_NAME, self::getSqlOptions() , Settings::DB_ENC);
-		if($this->oMySql->sDbState == MySqlManager::DB_NO_DATA) $this->install();
+		if($this->oDb->sDbState == Db::DB_NO_DATA) $this->install();
-		else $this->oAuth = new Auth($this->oMySql, Settings::API_KEY);
+		else $this->oAuth = new Auth($this->oDb, Settings::API_KEY);
 	}
 	
 	private function install()
 	{
-		$this->oAuth = new Auth($this->oMySql, Settings::API_KEY, false);
+		$this->oAuth = new Auth($this->oDb, Settings::API_KEY, false);
 		
 		//Install DB
-		$this->oMySql->install();
+		$this->oDb->install();
 		$this->addUser('franzz');
 	}
 	
@@ -156,7 +156,7 @@ class MyThoughts extends PhpObject
 		return file_get_contents($sPageFile);
 	}
 	
-	/* DB structure. See MySqlManager::__construct */
+	/* DB structure. See Db::__construct */
 	
 	private static function getSqlOptions()
 	{
@@ -164,26 +164,26 @@ class MyThoughts extends PhpObject
 		(
 			'tables' 			=>	array
 									(
-										self::USER_TABLE	=>array(MySqlManager::getText(self::USER_TABLE), 'nickname', 'pass', 'cookie'),
+										self::USER_TABLE	=>array(Db::getText(self::USER_TABLE), 'nickname', 'pass', 'cookie'),
-										self::THOUGHT_TABLE	=>array(MySqlManager::getId(self::USER_TABLE),
+										self::THOUGHT_TABLE	=>array(Db::getId(self::USER_TABLE),
-																	MySqlManager::getText(self::THOUGHT_TABLE)),
+																	Db::getText(self::THOUGHT_TABLE)),
-										self::SETTINGS_TABLE=>array(MySqlManager::getId(self::USER_TABLE),
+										self::SETTINGS_TABLE=>array(Db::getId(self::USER_TABLE),
-																	MySqlManager::getText(self::SETTINGS_TABLE),
+																	Db::getText(self::SETTINGS_TABLE),
 																	'value')
 									),
 			'types' 			=>	array
 									(
-										MySqlManager::getText(self::USER_TABLE)=>"varchar(50) NOT NULL",
+										Db::getText(self::USER_TABLE)=>"varchar(50) NOT NULL",
 										'nickname'=>'varchar(60) NOT NULL',
-										'pass'=>"varchar(256) NOT NULL",
+										'pass'=>"varchar(256)",
-										'cookie'=>"varchar(255) NOT NULL",
+										'cookie'=>"varchar(255)",
-										MySqlManager::getText(self::THOUGHT_TABLE)=>"longtext",
+										Db::getText(self::THOUGHT_TABLE)=>"longtext",
-										MySqlManager::getText(self::SETTINGS_TABLE)=>"varchar(20) NOT NULL",
+										Db::getText(self::SETTINGS_TABLE)=>"varchar(20) NOT NULL",
 										'value'=>"varchar(20) NOT NULL"
 									),
 			'constraints'		=>	array
 									(
-										self::USER_TABLE=>"UNIQUE KEY `username` (`".MySqlManager::getText(self::USER_TABLE)."`)"
+										self::USER_TABLE=>"UNIQUE KEY `username` (`".Db::getText(self::USER_TABLE)."`)"
 									),
 			'cascading_delete'	=>	array
 									(
@@ -222,10 +222,10 @@ class MyThoughts extends PhpObject
 		}
 		else
 		{
-			$asKeys = array(MySqlManager::getId(self::USER_TABLE)	=> $this->oAuth->getUserId(),
+			$asKeys = array(Db::getId(self::USER_TABLE)	=> $this->oAuth->getUserId(),
-					MySqlManager::getId(self::THOUGHT_TABLE)=> $iThoughtId);
+					Db::getId(self::THOUGHT_TABLE)=> $iThoughtId);
-			$asThought = array(MySqlManager::getText(self::THOUGHT_TABLE) => self::encodeThought($sThought));
+			$asThought = array(Db::getText(self::THOUGHT_TABLE) => self::encodeThought($sThought));
-			$iThoughtId = $this->oMySql->updateRow(self::THOUGHT_TABLE, $asKeys, $asThought);
+			$iThoughtId = $this->oDb->updateRow(self::THOUGHT_TABLE, $asKeys, $asThought);
 			$sDesc = 'updated';
 		}
 		$bSuccess = ($iThoughtId>0);
@@ -247,9 +247,9 @@ class MyThoughts extends PhpObject
 		if($iUserId==-1) $iUserId = $this->oAuth->getUserId();
 		if($iUserId!=0)
 		{
-			$asThought = array(	MySqlManager::getId(self::USER_TABLE)		=> $iUserId,
+			$asThought = array(	Db::getId(self::USER_TABLE)		=> $iUserId,
-								MySqlManager::getText(self::THOUGHT_TABLE)	=> self::encodeThought($sThought));
+								Db::getText(self::THOUGHT_TABLE)	=> self::encodeThought($sThought));
-			$ithoughtId = $this->oMySql->insertRow(self::THOUGHT_TABLE, $asThought);
+			$ithoughtId = $this->oDb->insertRow(self::THOUGHT_TABLE, $asThought);
 		}
 		else $this->addError('Adding a thought with no user id');
 		return $ithoughtId;
@@ -260,8 +260,8 @@ class MyThoughts extends PhpObject
 		$asThoughtInfo = array();
 		if($iThoughtId>0)
 		{
-			$asThoughtInfo = $this->oMySql->selectRow(self::THOUGHT_TABLE, $iThoughtId);
+			$asThoughtInfo = $this->oDb->selectRow(self::THOUGHT_TABLE, $iThoughtId);
-			if(!$bThoughtContent) unset($asThoughtInfo[MySqlManager::getText(self::THOUGHT_TABLE)]);
+			if(!$bThoughtContent) unset($asThoughtInfo[Db::getText(self::THOUGHT_TABLE)]);
 		}
 		else $this->addError('getting thought info with no thought id');
 		return $asThoughtInfo;

masks/index.html

@@ -3,15 +3,11 @@
 <head>
 	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
 	<meta name="author" content="Franzz" />
-	<link href="style/style.css" rel="stylesheet" type="text/css" />
+	<link href="style/mythoughts.css" rel="stylesheet" type="text/css" />
-	<link href="style/font-awesome.css" rel="stylesheet" type="text/css" />
+	<script type="text/javascript" src="scripts/jquery.min.js"></script>
-	<link href="style/trumbowyg.min.css" rel="stylesheet" type="text/css" />
+	<script type="text/javascript" src="scripts/quill.min.js"></script>
-	<link href="style/jquery-te-1.4.0.css" rel="stylesheet" type="text/css" />
-	<script type="text/javascript" src="scripts/jquery.js"></script>
 	<script type="text/javascript" src="scripts/functions.js"></script>
 	<script type="text/javascript" src="scripts/mythoughts.js"></script>
-	<script type="text/javascript" src="scripts/trumbowyg.min.js"></script>
-	<script type="text/javascript" src="scripts/jquery-te-1.4.0.min.js"></script>
 	<link rel="shortcut icon" href="images/favicon2.ico" />
 	<title>My Thoughts</title>
 </head>

masks/write.html

@@ -5,18 +5,18 @@
 		<span class="page_nb">1</span>
 		<A class="fa fa-next"></a>
 	</div>
-	<textarea id="editor"></textarea>
+	<div id="editor">
+		<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>
 <script type="text/javascript">
-	var sText =	//'<p>David n’a pas fait grand chose, il a juste créé un embryon de programme. Mais ce programme s’est développé lui-même. Comme l’ordinateur de David n’était pas suffisant, il a utilisé le réseau pour s’installer sur les autres ordinateurs. Il a grandi alors de manière exponentielle et le voilà : Prélude. Connecté à tout les ordinateurs et capable de leur donner les ordres qu’il veut.</p>'
-				//+'<p>Il sort de son lit, les yeux dans un brouillard Londonien, avance jusqu\'à la salle de bain dont la baignoire a été remplie cinq minutes avant par l\'ordinateur de la maison, et va directement prendre un bain. Un bain moussant comme tout les matins. Un bain bien chaud. Et comme il est trop grand pour sa baignoire, ses pieds dépassent. Quelques minutes plus tard, il s’endort. Aucun risque de noyade.</p>'
-				//+'<p>« Prélude m’avait dit qu’il désirait connaître l’amour. Les ordinateurs n’ont pas de sentiments et l’amour n’est que sentiments. Il y a bien l’amour physique, mais sans les sentiments, cela ressemble davantage à un instinct de reproduction qu’à de l’amour. Un ordinateur n’a pas ce besoin de reproduction. Et pourquoi m’avoir choisi ? »</p>'
-				//+'<p>« Oui, mais rien d’exceptionnel. » David essai de se rappeler si dans la lancé de sa jeunesse fougueuse, il n’aurait pas installé une bombe logique sur les ordinateurs de l’armée, mais il ne se rappelait pas avoir fait une telle bêtise. Planter tout le système informatique de la base aurait été trop grave de conséquences.</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>In-extremist, I manage to babble some excuses about a rigorous lunch break time and leave the premises.</p>';
-				
 	oMyThoughts.pageInit = function(asHash, bFirstPage)
 	{
 		self.vars('counter', 0);
@@ -26,69 +26,23 @@
 		self.vars('prec_displayed', 0);
 		self.vars('prec_content', 0);
 		self.vars('page', $('.page_nb').text());
-		$('#editor')
+		
-			.jqte({
+		self.vars('page_height', $('#editor').height());
-				br: false,
+		
-				center: false,
+		var oQuill = new Quill('#editor', {
-				color: false,
+			theme: 'bubble',
-				fsize: false,
+			modules:
-				format: false,
-				indent: false,
-				link: false,
-				left: false,
-				outdent: false,
-				placeholder: "It all started here",
-				remove:false,
-				right:false,
-				rule:false,
-				source:false,
-				sub:false,
-				sup:false,
-				title:false,
-				unlink:false,
-				change: function(){
-					//First run
-					if(!self.vars('editor'))
 			{
-						self.vars('max_height', $('.jqte').height());
+				toolbar: [['bold', 'italic', 'underline'], [{ 'list': 'ordered'}, { 'list': 'bullet' }], ['clean']]
-						self.vars('editor', $('.jqte_editor'));
-						self.vars('editor').css('height', '100%');
-						self.vars('editor').css('min-height', self.vars('editor').height());
-						self.vars('editor').css('height', 'auto');
 			}
+		});
 		
-					//Fixing "empty" content
+		quill.on('text-change', function(delta, oldDelta, source) {
-					var sContent = self.vars('editor').html();
+			if(source == 'user')
-					if(sContent=='<br>' || sContent=='') $('#editor').jqteVal(self.vars('default_text'));
-					
-					if(self.vars('counter')%100==0)
 			{
-						//Saving
+				
-						save(sContent);
 			}
-					
+		});
-					//Adjust book behaviour
-					if(!self.vars('working')) checkPageBook();
-					
-					self.vars('counter', self.vars('counter')+1);
-				}
-			})
-			.jqteVal(sText);
-			//.jqteVal(self.vars('default_text'));
-
-		$('.jqte_tool_4')
-			.attr('title', 'Bold (Ctrl+B)');
-		$('.jqte_tool_5')
-			.attr('title', 'Italic (Ctrl+I)');
-		$('.jqte_tool_6')
-			.attr('title', 'Underline (Ctrl+U)');
-		$('.jqte_tool_7')
-			.attr('title', 'Numbered List (Ctrl+.)');
-		$('.jqte_tool_8')
-			.attr('title', 'List (Ctrl+,)');
-		$('.jqte_tool_16')
-			.attr('title', 'Strike through (Ctrl+K)')
-			.insertAfter($('.jqte_tool_6'));
 		
 		$('.fa-prev').click(function(){moveToPage(-1);});
 		$('.fa-next').click(function(){moveToPage(1);});

style/_font-awesome.scss

@@ -1,4 +1,4 @@
-/*!
+/*
  *  Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
@@ -6,8 +6,8 @@
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('fontawesome-webfont.eot?v=4.3.0');
+  src: url('fonts/fontawesome-webfont.eot?v=4.3.0');
-  src: url('fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('fontawesome-webfont.woff?v=4.3.0') format('woff'), url('fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }

style/_quill.bubble.scss

@@ -0,0 +1,854 @@
+/*
+ * Quill Editor v1.1.7
+ * https://quilljs.com/
+ * Copyright (c) 2014, Jason Chen
+ * Copyright (c) 2013, salesforce.com
+ */
+.ql-container {
+  box-sizing: border-box;
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 13px;
+  height: 100%;
+  margin: 0px;
+  position: relative;
+}
+.ql-container.ql-disabled .ql-tooltip {
+  visibility: hidden;
+}
+.ql-clipboard {
+  left: -100000px;
+  height: 1px;
+  overflow-y: hidden;
+  position: absolute;
+  top: 50%;
+}
+.ql-clipboard p {
+  margin: 0;
+  padding: 0;
+}
+.ql-editor {
+  box-sizing: border-box;
+  cursor: text;
+  line-height: 1.42;
+  height: 100%;
+  outline: none;
+  overflow-y: auto;
+  padding: 12px 15px;
+  tab-size: 4;
+  -moz-tab-size: 4;
+  text-align: left;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.ql-editor p,
+.ql-editor ol,
+.ql-editor ul,
+.ql-editor pre,
+.ql-editor blockquote,
+.ql-editor h1,
+.ql-editor h2,
+.ql-editor h3,
+.ql-editor h4,
+.ql-editor h5,
+.ql-editor h6 {
+  margin: 0;
+  padding: 0;
+  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol,
+.ql-editor ul {
+  padding-left: 1.5em;
+}
+.ql-editor ol > li,
+.ql-editor ul > li {
+  list-style-type: none;
+}
+.ql-editor ul > li::before {
+  content: '\25CF';
+}
+.ql-editor ul[data-checked=true] > li::before,
+.ql-editor ul[data-checked=false] > li::before {
+  color: #777;
+  cursor: pointer;
+}
+.ql-editor ul[data-checked=true] > li::before {
+  content: '\2611';
+}
+.ql-editor ul[data-checked=false] > li::before {
+  content: '\2610';
+}
+.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;
+}
+.ql-editor ol li,
+.ql-editor ul li {
+  padding-left: 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;
+}
+.ql-editor ol li:before {
+  content: counter(list-num, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-increment: list-1;
+}
+.ql-editor ol li.ql-indent-1:before {
+  content: counter(list-1, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-1 {
+  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-increment: list-2;
+}
+.ql-editor ol li.ql-indent-2:before {
+  content: counter(list-2, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-2 {
+  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-increment: list-3;
+}
+.ql-editor ol li.ql-indent-3:before {
+  content: counter(list-3, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-3 {
+  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-increment: list-4;
+}
+.ql-editor ol li.ql-indent-4:before {
+  content: counter(list-4, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-4 {
+  counter-reset: list-5 list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-increment: list-5;
+}
+.ql-editor ol li.ql-indent-5:before {
+  content: counter(list-5, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-5 {
+  counter-reset: list-6 list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-increment: list-6;
+}
+.ql-editor ol li.ql-indent-6:before {
+  content: counter(list-6, decimal) '. ';
+}
+.ql-editor ol li.ql-indent-6 {
+  counter-reset: list-7 list-8 list-9;
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-increment: list-7;
+}
+.ql-editor ol li.ql-indent-7:before {
+  content: counter(list-7, lower-alpha) '. ';
+}
+.ql-editor ol li.ql-indent-7 {
+  counter-reset: list-8 list-9;
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-increment: list-8;
+}
+.ql-editor ol li.ql-indent-8:before {
+  content: counter(list-8, lower-roman) '. ';
+}
+.ql-editor ol li.ql-indent-8 {
+  counter-reset: list-9;
+}
+.ql-editor ol li.ql-indent-9 {
+  counter-increment: list-9;
+}
+.ql-editor ol li.ql-indent-9:before {
+  content: counter(list-9, decimal) '. ';
+}
+.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 3em;
+}
+.ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
+  padding-left: 4.5em;
+}
+.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 3em;
+}
+.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
+  padding-right: 4.5em;
+}
+.ql-editor .ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 6em;
+}
+.ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
+  padding-left: 7.5em;
+}
+.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 6em;
+}
+.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
+  padding-right: 7.5em;
+}
+.ql-editor .ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 9em;
+}
+.ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
+  padding-left: 10.5em;
+}
+.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 9em;
+}
+.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
+  padding-right: 10.5em;
+}
+.ql-editor .ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 12em;
+}
+.ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
+  padding-left: 13.5em;
+}
+.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 12em;
+}
+.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
+  padding-right: 13.5em;
+}
+.ql-editor .ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 15em;
+}
+.ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
+  padding-left: 16.5em;
+}
+.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 15em;
+}
+.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
+  padding-right: 16.5em;
+}
+.ql-editor .ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 18em;
+}
+.ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
+  padding-left: 19.5em;
+}
+.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 18em;
+}
+.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
+  padding-right: 19.5em;
+}
+.ql-editor .ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 21em;
+}
+.ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
+  padding-left: 22.5em;
+}
+.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 21em;
+}
+.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
+  padding-right: 22.5em;
+}
+.ql-editor .ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 24em;
+}
+.ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
+  padding-left: 25.5em;
+}
+.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 24em;
+}
+.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
+  padding-right: 25.5em;
+}
+.ql-editor .ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 27em;
+}
+.ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
+  padding-left: 28.5em;
+}
+.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 27em;
+}
+.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
+  padding-right: 28.5em;
+}
+.ql-editor .ql-video {
+  display: block;
+  max-width: 100%;
+}
+.ql-editor .ql-video.ql-align-center {
+  margin: 0 auto;
+}
+.ql-editor .ql-video.ql-align-right {
+  margin: 0 0 0 auto;
+}
+.ql-editor .ql-bg-black {
+  background-color: #000;
+}
+.ql-editor .ql-bg-red {
+  background-color: #e60000;
+}
+.ql-editor .ql-bg-orange {
+  background-color: #f90;
+}
+.ql-editor .ql-bg-yellow {
+  background-color: #ff0;
+}
+.ql-editor .ql-bg-green {
+  background-color: #008a00;
+}
+.ql-editor .ql-bg-blue {
+  background-color: #06c;
+}
+.ql-editor .ql-bg-purple {
+  background-color: #93f;
+}
+.ql-editor .ql-color-white {
+  color: #fff;
+}
+.ql-editor .ql-color-red {
+  color: #e60000;
+}
+.ql-editor .ql-color-orange {
+  color: #f90;
+}
+.ql-editor .ql-color-yellow {
+  color: #ff0;
+}
+.ql-editor .ql-color-green {
+  color: #008a00;
+}
+.ql-editor .ql-color-blue {
+  color: #06c;
+}
+.ql-editor .ql-color-purple {
+  color: #93f;
+}
+.ql-editor .ql-font-serif {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-editor .ql-font-monospace {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-editor .ql-size-small {
+  font-size: 0.75em;
+}
+.ql-editor .ql-size-large {
+  font-size: 1.5em;
+}
+.ql-editor .ql-size-huge {
+  font-size: 2.5em;
+}
+.ql-editor .ql-direction-rtl {
+  direction: rtl;
+  text-align: inherit;
+}
+.ql-editor .ql-align-center {
+  text-align: center;
+}
+.ql-editor .ql-align-justify {
+  text-align: justify;
+}
+.ql-editor .ql-align-right {
+  text-align: right;
+}
+.ql-editor.ql-blank::before {
+  color: rgba(0,0,0,0.6);
+  content: attr(data-placeholder);
+  font-style: italic;
+  pointer-events: none;
+  position: absolute;
+}
+.ql-bubble.ql-toolbar:after,
+.ql-bubble .ql-toolbar:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-bubble.ql-toolbar button,
+.ql-bubble .ql-toolbar button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  float: left;
+  height: 24px;
+  padding: 3px 5px;
+  width: 28px;
+}
+.ql-bubble.ql-toolbar button svg,
+.ql-bubble .ql-toolbar button svg {
+  float: left;
+  height: 100%;
+}
+.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.ql-active,
+.ql-bubble .ql-toolbar button.ql-active,
+.ql-bubble.ql-toolbar .ql-picker-label:hover,
+.ql-bubble .ql-toolbar .ql-picker-label:hover,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active,
+.ql-bubble.ql-toolbar .ql-picker-item:hover,
+.ql-bubble .ql-toolbar .ql-picker-item:hover,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected {
+  color: #fff;
+}
+.ql-bubble.ql-toolbar button:hover .ql-fill,
+.ql-bubble .ql-toolbar button:hover .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,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
+.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.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,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
+  fill: #fff;
+}
+.ql-bubble.ql-toolbar button:hover .ql-stroke,
+.ql-bubble .ql-toolbar button:hover .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,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
+.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.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,
+.ql-bubble .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
+.ql-bubble.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
+.ql-bubble .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
+  stroke: #fff;
+}
+.ql-bubble {
+  box-sizing: border-box;
+}
+.ql-bubble * {
+  box-sizing: border-box;
+}
+.ql-bubble .ql-hidden {
+  display: none;
+}
+.ql-bubble .ql-out-bottom,
+.ql-bubble .ql-out-top {
+  visibility: hidden;
+}
+.ql-bubble .ql-tooltip {
+  position: absolute;
+}
+.ql-bubble .ql-tooltip a {
+  cursor: pointer;
+  text-decoration: none;
+}
+.ql-bubble .ql-formats {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ql-bubble .ql-formats:after {
+  clear: both;
+  content: '';
+  display: table;
+}
+.ql-bubble .ql-stroke {
+  fill: none;
+  stroke: #ccc;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+.ql-bubble .ql-stroke-miter {
+  fill: none;
+  stroke: #ccc;
+  stroke-miterlimit: 10;
+  stroke-width: 2;
+}
+.ql-bubble .ql-fill,
+.ql-bubble .ql-stroke.ql-fill {
+  fill: #ccc;
+}
+.ql-bubble .ql-empty {
+  fill: none;
+}
+.ql-bubble .ql-even {
+  fill-rule: evenodd;
+}
+.ql-bubble .ql-thin,
+.ql-bubble .ql-stroke.ql-thin {
+  stroke-width: 1;
+}
+.ql-bubble .ql-transparent {
+  opacity: 0.4;
+}
+.ql-bubble .ql-direction svg:last-child {
+  display: none;
+}
+.ql-bubble .ql-direction.ql-active svg:last-child {
+  display: inline;
+}
+.ql-bubble .ql-direction.ql-active svg:first-child {
+  display: none;
+}
+.ql-bubble .ql-editor h1 {
+  font-size: 2em;
+}
+.ql-bubble .ql-editor h2 {
+  font-size: 1.5em;
+}
+.ql-bubble .ql-editor h3 {
+  font-size: 1.17em;
+}
+.ql-bubble .ql-editor h4 {
+  font-size: 1em;
+}
+.ql-bubble .ql-editor h5 {
+  font-size: 0.83em;
+}
+.ql-bubble .ql-editor h6 {
+  font-size: 0.67em;
+}
+.ql-bubble .ql-editor a {
+  text-decoration: underline;
+}
+.ql-bubble .ql-editor blockquote {
+  border-left: 4px solid #ccc;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding-left: 16px;
+}
+.ql-bubble .ql-editor code,
+.ql-bubble .ql-editor pre {
+  background-color: #f0f0f0;
+  border-radius: 3px;
+}
+.ql-bubble .ql-editor pre {
+  white-space: pre-wrap;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 5px 10px;
+}
+.ql-bubble .ql-editor code {
+  font-size: 85%;
+  padding-bottom: 2px;
+  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;
+  color: #f8f8f2;
+  overflow: visible;
+}
+.ql-bubble .ql-editor img {
+  max-width: 100%;
+}
+.ql-bubble .ql-picker {
+  color: #ccc;
+  display: inline-block;
+  float: left;
+  font-size: 14px;
+  font-weight: 500;
+  height: 24px;
+  position: relative;
+  vertical-align: middle;
+}
+.ql-bubble .ql-picker-label {
+  cursor: pointer;
+  display: inline-block;
+  height: 100%;
+  padding-left: 8px;
+  padding-right: 2px;
+  position: relative;
+  width: 100%;
+}
+.ql-bubble .ql-picker-label::before {
+  display: inline-block;
+  line-height: 22px;
+}
+.ql-bubble .ql-picker-options {
+  background-color: #444;
+  display: none;
+  min-width: 100%;
+  padding: 4px 8px;
+  position: absolute;
+  white-space: nowrap;
+}
+.ql-bubble .ql-picker-options .ql-picker-item {
+  cursor: pointer;
+  display: block;
+  padding-bottom: 5px;
+  padding-top: 5px;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label {
+  color: #777;
+  z-index: 2;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-fill {
+  fill: #777;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
+  stroke: #777;
+}
+.ql-bubble .ql-picker.ql-expanded .ql-picker-options {
+  display: block;
+  margin-top: -1px;
+  top: 100%;
+  z-index: 1;
+}
+.ql-bubble .ql-color-picker,
+.ql-bubble .ql-icon-picker {
+  width: 28px;
+}
+.ql-bubble .ql-color-picker .ql-picker-label,
+.ql-bubble .ql-icon-picker .ql-picker-label {
+  padding: 2px 4px;
+}
+.ql-bubble .ql-color-picker .ql-picker-label svg,
+.ql-bubble .ql-icon-picker .ql-picker-label svg {
+  right: 4px;
+}
+.ql-bubble .ql-icon-picker .ql-picker-options {
+  padding: 4px 0px;
+}
+.ql-bubble .ql-icon-picker .ql-picker-item {
+  height: 24px;
+  width: 24px;
+  padding: 2px 4px;
+}
+.ql-bubble .ql-color-picker .ql-picker-options {
+  padding: 3px 5px;
+  width: 152px;
+}
+.ql-bubble .ql-color-picker .ql-picker-item {
+  border: 1px solid transparent;
+  float: left;
+  height: 16px;
+  margin: 2px;
+  padding: 0px;
+  width: 16px;
+}
+.ql-bubble .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+  position: absolute;
+  margin-top: -9px;
+  right: 0;
+  top: 50%;
+  width: 18px;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
+  content: attr(data-label);
+}
+.ql-bubble .ql-picker.ql-header {
+  width: 98px;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  content: 'Heading 1';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  content: 'Heading 2';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  content: 'Heading 3';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  content: 'Heading 4';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  content: 'Heading 5';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  content: 'Heading 6';
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
+  font-size: 2em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
+  font-size: 1.5em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
+  font-size: 1.17em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
+  font-size: 1em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
+  font-size: 0.83em;
+}
+.ql-bubble .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
+  font-size: 0.67em;
+}
+.ql-bubble .ql-picker.ql-font {
+  width: 108px;
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item::before {
+  content: 'Sans Serif';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  content: 'Serif';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  content: 'Monospace';
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
+  font-family: Georgia, Times New Roman, serif;
+}
+.ql-bubble .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
+  font-family: Monaco, Courier New, monospace;
+}
+.ql-bubble .ql-picker.ql-size {
+  width: 98px;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item::before {
+  content: 'Normal';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  content: 'Small';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  content: 'Large';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  content: 'Huge';
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
+  font-size: 10px;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
+  font-size: 18px;
+}
+.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
+  font-size: 32px;
+}
+.ql-bubble .ql-color-picker.ql-background .ql-picker-item {
+  background-color: #fff;
+}
+.ql-bubble .ql-color-picker.ql-color .ql-picker-item {
+  background-color: #000;
+}
+.ql-bubble .ql-toolbar .ql-formats {
+  margin: 8px 12px 8px 0px;
+}
+.ql-bubble .ql-toolbar .ql-formats:first-child {
+  margin-left: 12px;
+}
+.ql-bubble .ql-color-picker svg {
+  margin: 1px;
+}
+.ql-bubble .ql-color-picker .ql-picker-item.ql-selected,
+.ql-bubble .ql-color-picker .ql-picker-item:hover {
+  border-color: #fff;
+}
+.ql-bubble .ql-tooltip {
+  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: " ";
+  display: block;
+  left: 50%;
+  margin-left: -6px;
+  position: absolute;
+  top: -6px;
+}
+.ql-bubble .ql-tooltip.ql-editing .ql-tooltip-editor {
+  display: block;
+}
+.ql-bubble .ql-tooltip.ql-editing .ql-formats {
+  visibility: hidden;
+}
+.ql-bubble .ql-tooltip-editor {
+  display: none;
+}
+.ql-bubble .ql-tooltip-editor input[type=text] {
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 13px;
+  height: 100%;
+  outline: none;
+  padding: 10px 20px;
+  position: absolute;
+  width: 100%;
+}
+.ql-bubble .ql-tooltip-editor a {
+  top: 10px;
+  position: absolute;
+  right: 20px;
+}
+.ql-bubble .ql-tooltip-editor a:before {
+  color: #ccc;
+  content: "\D7";
+  font-size: 16px;
+  font-weight: bold;
+}

style/_write.scss

@@ -0,0 +1,6 @@
+#write {
+	.ql-container {
+		font-family: 'Indie Flower', cursive;
+		font-size: 16px;
+	}
+}

style/mythoughts.scss

@@ -7,26 +7,24 @@ blue lines : #2DCDFF
 red lines : #EC3B45
 */
 
-/* General */
+/* Fonts */
-/*
-@font-face {
-  font-family: 'thoughts';
-  font-style: normal;
-  font-weight: normal;
-  src: url('aescrawl.ttf') format('truetype');
-}
-*/
-@font-face {
-  font-family: 'thoughts';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'), url(https://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff) format('woff');
-}
 
+@import 'font-awesome';
+@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
+
+/* Plugins */
+
+@import 'quill.bubble';
+
+/* Pages */
+
+@import 'write';
+
+/* General */
 
 body {
 	min-width: 700px;
-	font-family: thoughts, Arial;
+	font-family: 'Indie Flower', cursive;
 	font-size:1em;
 	background-color:#e2ccb2;
 	margin:0;
@@ -43,7 +41,7 @@ table {
 }
 
 input, textarea {
-	font-family: thoughts, Arial;
+	font-family: 'Indie Flower', cursive;
 	font-size:1em;
 	color:#584127;
 }
@@ -283,97 +281,14 @@ a.calendar_direction {
 	height:100%;
 }
 
-/* Write - Toolbar */
-
-#write .jqte_toolbar {
-	position: fixed;
-	left: calc(50% - 22em);
-	width: 1.5em;
-	background:none;
-	border-bottom:none;
-	border-radius: 3px 0 0 3px;
-}
-
-#write .jqte_tool {
-	float:none;
-	border:none;
-	margin-bottom: 0.3em;
-}
-
-#write .jqte_tool .jqte_tool_icon {
-	border:none;
-	background:none;
-	display: inline-block;
-	font: normal normal normal 14px/1 FontAwesome;
-	font-size: inherit;
-	text-rendering: auto;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	transform: translate(0, 0);
-	text-align: center;
-	color:#997E60;
-}
-
-#write .jqte_tool.jqte_tool_4 .jqte_tool_icon:before {
-  content: "\f032";
-}
-#write .jqte_tool.jqte_tool_5 .jqte_tool_icon:before {
-  content: "\f033";
-}
-#write .jqte_tool.jqte_tool_6 .jqte_tool_icon:before {
-  content: "\f0cd";
-}
-#write .jqte_tool.jqte_tool_7 .jqte_tool_icon:before {
-  content: "\f0cb";
-}
-#write .jqte_tool.jqte_tool_8 .jqte_tool_icon:before {
-  content: "\f03a";
-}
-#write .jqte_tool.jqte_tool_16 .jqte_tool_icon:before {
-  content: "\f0cc";
-}
-
-#write .jqte_tool:hover,
-#write .jqte_tool:hover .jqte_tool_icon, 
-#write .jqte_tool_depressed,
-#write .jqte_tool_depressed .jqte_tool_icon {
-	/*background-color: #EDE0D0;*/
-	background:none;
-	color:#584127;
-}
 
 /* Write - Editor */
 
-#write .jqte, #write .jqte_focused {
+#write #editor div {
-	border:none;
-	box-shadow:none;
-	height:calc(100% - 4em);
-	margin:2em;
-	padding:0;
-	overflow: hidden;
-	position:relative;
-}
-
-#write .jqte * {
-	color: inherit;
-	font-family:thoughts;
-	font-size: inherit;
-}
-
-#write .jqte_editor {
-	background: inherit;
-	padding:0;
-	max-height: inherit;
-	resize:none;
-	position:absolute;
-	top:0;
-}
-
-#write .jqte_editor div {
 	margin:0;
 }
 
-#write .jqte_editor p {
+#write #editor p {
 	text-indent: 1.5em;
 	margin:1em 0 0 0;
 	padding:0;

style/scss.bat

@@ -0,0 +1 @@
+sass --unix-newline -l --style=compressed mythoughts.scss mythoughts.css