change charset (utf-8 -> utf8mb4_unicode_ci) + add contentEditable div + start... (d1d9e3e6) · Commits · Corentin Bettiol / l3m-website

css/design.css

+37 −12

Original line number	Original line	Diff line number	Diff line
	@@ -28,11 +28,15 @@ CSS
	justify-content: space-between;		justify-content: space-between;
	}		}

	article p, #pageTitle, article h3, article ul, article form, #listAdmin, .input{		article p, #pageTitle, article h3, article ul, article form, #listAdmin, .input, article pre, article h4{
	max-width: 1500px;		max-width: 1500px;
	margin: 30px auto;		margin: 30px auto;
	}		}

			article section{
			margin-left: 15px;
			}

	#logo, #title{		#logo, #title{
	vertical-align: middle;		vertical-align: middle;
	}		}
	@@ -136,7 +140,11 @@ a:hover{
	transition: color 0.3s;		transition: color 0.3s;
	}		}

	input, textarea{		#editContent{
			white-space: pre-wrap;
			}

			input, textarea, .wysiwyg{
	width: 50%;		width: 50%;
	border: none;		border: none;
	padding: 10px;		padding: 10px;
	@@ -151,12 +159,28 @@ input, textarea{
	transition: border-left 0.05s, padding-left 0.05s;		transition: border-left 0.05s, padding-left 0.05s;
	}		}

	.input input, .input textarea{		.input input, .input textarea, .wysiwyg{
	margin: 0 0 0 20px;		margin: 0 0 0 20px;
	}		}

	#inputContent{		.wysiwyg{
	height: 10em;		display: flex;
			flex-direction: column;
			align-items: center;
			}

			.wysiwyg span{
			padding: 3px;
			margin: 0 2px;
			min-width: 20px;
			cursor: pointer;
			text-align: center;
			display: inline-block;
			background-color: #ccc;
			}

			#editContent{
			width: 100%;
	}		}

	input:hover, input:focus, textarea:hover, textarea:focus{		input:hover, input:focus, textarea:hover, textarea:focus{
	@@ -243,16 +267,13 @@ form .small{
	margin-left: 2px;		margin-left: 2px;
	text-decoration: none;		text-decoration: none;
	background-color: #d9d9d9;		background-color: #d9d9d9;
	padding: 7px 7px 10px 7px;		padding: 5px;
	border-bottom: 0px solid #ccc;		transition: background-color 0.3s, color 0.3s;
	transition: background-color 0.3s, color 0.3s, border 0.05s, padding 0.05s;
	}		}

	.button:hover{		.button:hover{
	background-color: #f0f0f0;		background-color: #f0f0f0;
	padding: 7px;		transition: background-color 0.3s, color 0.3s;
	border-bottom: 3px solid #ccc;
	transition: background-color 0.3s, color 0.3s, border 0.0.5s, padding 0.05s;
	}		}

	#toggle, .nav-label{		#toggle, .nav-label{
	@@ -337,7 +358,7 @@ Media Queries
	}		}

	@media all and (max-width: 700px){		@media all and (max-width: 700px){
	input, textarea, label{		input, textarea, label, #editContent, .wysiwyg{
	width: 100%;		width: 100%;
	}		}
	label{		label{
	@@ -366,6 +387,10 @@ Media Queries
	}		}

	@media all and (max-width: 500px){		@media all and (max-width: 500px){
			article{
			padding:5px;
			}

	#page{		#page{
	font-size: 1em;		font-size: 1em;
	}		}

js/contentEditable.js

0 → 100644

+21 −0

Original line number	Original line	Diff line number	Diff line
			let textarea = document.getElementById("inputContent");
			let div = document.getElementById("editContent");
			div.oninput = (e) => update("text");
			textarea.oninput = (e) => update("div");

			function link(){
			let link = prompt("Entrez l'adresse du lien.");

			let txt = prompt("Entrez le texte à afficher.");
			if(txt.length == 0)
			txt = link;
			textarea.value += "<a href=\""+ link + "\">"+ txt +"</a>";
			update("div");
			}

			function update(whichOneIsTheOneToUpdate){
			if(whichOneIsTheOneToUpdate == "text")
			textarea.value = div.innerHTML;
			else if(whichOneIsTheOneToUpdate == "div")
			div.innerHTML = textarea.value;
			}
			No newline at end of file

site/layout/layout.php

+5 −1

Original line number	Original line	Diff line number	Diff line
	@@ -88,6 +88,10 @@
	<a href="/changelog" title="changelog">Changelog</a> - <a href="/rss" title="rss">RSS</a> - v5		<a href="/changelog" title="changelog">Changelog</a> - <a href="/rss" title="rss">RSS</a> - v5
	</p>		</p>
	</footer>		</footer>
			<?php
			// le gros switch du javascript !
			if(isset($_GET['type']) && ($_GET['type'] == 'blogedit' \|\| $_GET['type'] == 'blogsubmit' \|\| $_GET['type'] == 'projectedit' \|\| $_GET['type'] == 'projectsubmit')){ ?>
			<script src="/js/contentEditable.js"></script>
			<?php } ?>
	</body>		</body>
	</html>		</html>
			No newline at end of file

site/model/Base.php

+1 −1

Original line number	Original line	Diff line number	Diff line
	@@ -15,7 +15,7 @@ class Base
	{		{
	// verify if a connexion to the db already exist		// verify if a connexion to the db already exist
	if (!(self::$db instanceof PDO))		if (!(self::$db instanceof PDO))
	self::$db = new PDO('mysql:host=localhost;dbname='. dbName .';charset=utf8', dbUser, dbPass);		self::$db = new PDO('mysql:host=localhost;dbname='. dbName .';charset=utf8mb4', dbUser, dbPass);
	}		}

site/model/BlogManager.php

+1 −1

Original line number	Original line	Diff line number	Diff line
	@@ -23,7 +23,7 @@ class BlogManager extends Base

	// si on tente d'accéder à une page qui ne comporte aucun article (genre la page 2 lol)		// si on tente d'accéder à une page qui ne comporte aucun article (genre la page 2 lol)
	// la blague du commentaire précédent vous est présentée par "le site de dev qui comporte 4 posts tout au plus"		// la blague du commentaire précédent vous est présentée par "le site de dev qui comporte 4 posts tout au plus"
	if($req->rowCount() == 0)		if($req->rowCount() == 0 && $page != 1)
	header('Location:/');		header('Location:/');

	return $req;		return $req;