Skip to content

GitLab

Commit d1d9e3e6 authored by Corentin Bettiol's avatar Corentin Bettiol 💻
Browse files

change charset (utf-8 -> utf8mb4_unicode_ci) + add contentEditable div + start... 

change charset (utf-8 -> utf8mb4_unicode_ci) + add contentEditable div + start implementing wysiwyg menu
parent dc8dcc3e
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 27 deletions
css/design.css
View file @ d1d9e3e6
......@@ -28,11 +28,15 @@ CSS
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;
margin: 30px auto;
}
article section{
margin-left: 15px;
}
#logo, #title{
vertical-align: middle;
}
......@@ -136,7 +140,11 @@ a:hover{
transition: color 0.3s;
}
input, textarea{
#editContent{
white-space: pre-wrap;
}
input, textarea, .wysiwyg{
width: 50%;
border: none;
padding: 10px;
......@@ -151,12 +159,28 @@ input, textarea{
transition: border-left 0.05s, padding-left 0.05s;
}
.input input, .input textarea{
.input input, .input textarea, .wysiwyg{
margin: 0 0 0 20px;
}
#inputContent{
height: 10em;
.wysiwyg{
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{
......@@ -243,16 +267,13 @@ form .small{
margin-left: 2px;
text-decoration: none;
background-color: #d9d9d9;
padding: 7px 7px 10px 7px;
border-bottom: 0px solid #ccc;
transition: background-color 0.3s, color 0.3s, border 0.05s, padding 0.05s;
padding: 5px;
transition: background-color 0.3s, color 0.3s;
}
.button:hover{
background-color: #f0f0f0;
padding: 7px;
border-bottom: 3px solid #ccc;
transition: background-color 0.3s, color 0.3s, border 0.0.5s, padding 0.05s;
transition: background-color 0.3s, color 0.3s;
}
#toggle, .nav-label{
......@@ -337,7 +358,7 @@ Media Queries
}
@media all and (max-width: 700px){
input, textarea, label{
input, textarea, label, #editContent, .wysiwyg{
width: 100%;
}
label{
......@@ -366,6 +387,10 @@ Media Queries
}
@media all and (max-width: 500px){
article{
padding:5px;
}
#page{
font-size: 1em;
}
......
js/contentEditable.js 0 → 100644
View file @ d1d9e3e6
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
View file @ d1d9e3e6
......@@ -88,6 +88,10 @@
<a href="/changelog" title="changelog">Changelog</a> - <a href="/rss" title="rss">RSS</a> - v5
</p>
</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>
</html>
\ No newline at end of file
site/model/Base.php
View file @ d1d9e3e6
......@@ -15,7 +15,7 @@ class Base
{
// verify if a connexion to the db already exist
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
View file @ d1d9e3e6
......@@ -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)
// 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:/');
return $req;
......
site/view/private/createBlogView.php
View file @ d1d9e3e6
......@@ -28,11 +28,31 @@
</section>
<section class="input">
<label for="inputContent">Contenu</label>
<label for="inputContent">Contenu (code)</label>
<textarea name="content" id="inputContent"></textarea>
</section>
<input type="submit" value="Envoyer" />
<section class="input">
<label for="editContent">Contenu</label>
<article class="wysiwyg">
<div>
<span onclick="title()">📰</span>
<span onclick="bold()"><b>B</b></span>
<span onclick="italic()"><i>i</i></span>
<span onclick="underline()"><u>U</u></span>
<span onclick="img()">📷</span>
<span onclick="alignleft()">⏮</span>
<span onclick="aligncenter()">⏹</span>
<span onclick="alignright()">⏭</span>
<span onclick="list()">📋</span>
<span onclick="link()">🔗</span>
</div>
<div id="editContent" contentEditable="true"><h4>Titre de section</h4><p>Contenu.</p><pre><code>Hey du code !</code></pre></div>
</article>
</section>
<input type="submit" value="Envoyer" />
</form>
</article>
\ No newline at end of file
site/view/private/createProjectView.php
View file @ d1d9e3e6
......@@ -30,10 +30,15 @@
</section>
<section class="input">
<label for="inputContent">Description</label>
<label for="inputContent">Description (code)</label>
<textarea name="content" id="inputContent"></textarea>
</section>
<section class="input">
<label for="editContent">Description</label>
<div id="editContent" contentEditable="true"><h4>Titre de section</h4><p>Contenu.</p><pre><code>Hey du code !</code></pre></div>
</section>
<input type="submit" value="Envoyer" />
</form>
......
site/view/private/editProjectView.php
View file @ d1d9e3e6
......@@ -27,10 +27,15 @@
<textarea name="shortContent" id="inputShortContent"><?php echo $project['shortContent']; ?></textarea>
</article>
<article class="input">
<label for="inputContent">Contenu</label>
<section class="input">
<label for="inputContent">Description (code)</label>
<textarea name="content" id="inputContent"><?php echo $project['content']; ?></textarea>
</article>
</section>
<section class="input">
<label for="editContent">Description</label>
<div name="editContent" id="editContent" contentEditable="true"><?php echo htmlspecialchars_decode($project['content']); ?></div>
</section>
<input type="submit" value="Éditer" />
......
site/view/private/editblogView.php
View file @ d1d9e3e6
......@@ -28,10 +28,15 @@
</article>
<article class="input">
<label for="inputContent">Contenu</label>
<label for="inputContent">Contenu (code)</label>
<textarea name="content" id="inputContent"><?php echo $blogpost['content']; ?></textarea>
</article>
<section class="input">
<label for="editContent">Contenu</label>
<div name="editContent" id="editContent" contentEditable="true"><?php echo htmlspecialchars_decode($blogpost['content']); ?></div>
</section>
<input type="submit" value="Éditer" />
</form>
......
site/view/private/listBlogPostView.php
View file @ d1d9e3e6
......@@ -11,7 +11,7 @@
<article>
<p class="listAdmin">
<b><a href="/article/<?php echo $post['slug']; ?>"><?php echo $post['title'] ?></a></b>
<span class="postInfos"><?php echo date_format($post['datetime'], 'd/m/Y à H:i'); ?></span> <a class="button" href="/patate/blog/<?php echo $post['slug']; ?>/edit">éditer</a> <a class="button" href="/patate/blog/<?php echo $post['slug'] ."/delete"; ?>" onclick="return confirm('C\'est certain ?')">❌</a>
<span class="postInfos"><?php echo date_format($post['datetime'], 'd/m/Y à H:i'); ?></span> <a class="button" href="/patate/blog/<?php echo $post['slug']; ?>/edit">📝</a> <a class="button" href="/patate/blog/<?php echo $post['slug'] ."/delete"; ?>" onclick="return confirm('C\'est certain ?')">❌</a>
</p>
</article>
<?php
......
site/view/private/listProjectsView.php
View file @ d1d9e3e6
......@@ -11,7 +11,7 @@
<article>
<p class="listAdmin">
<b><a href="/project/<?php echo $project['slug']; ?>"><?php echo $project['name'] ?></a></b>
<span class="postInfos"><?php echo $project['link']; ?></span> <a class="button" href="/patate/project/<?php echo $project['slug'] ."/edit"; ?>">éditer</a> <a class="button" href="/patate/project/<?php echo $project['slug'] ."/delete"; ?>" onclick="return confirm('C\'est certain ?')">❌</a>
<span class="postInfos"><?php echo $project['link']; ?></span> <a class="button" href="/patate/project/<?php echo $project['slug'] ."/edit"; ?>">📝</a> <a class="button" href="/patate/project/<?php echo $project['slug'] ."/delete"; ?>" onclick="return confirm('C\'est certain ?')">❌</a>
</p>
</article>
<?php
......
site/view/public/blogPostView.php
View file @ d1d9e3e6
......@@ -14,7 +14,7 @@
<p>
<?php
if(isset($_GET['title']))
echo nl2br($blogpost['content']);
echo htmlspecialchars_decode($blogpost['content']);
else
echo nl2br($blogpost['shortContent']);
?>
......
site/view/public/changelog.php
View file @ d1d9e3e6
<article>
<h3><a href="">05/03/19</a></h3>
<h3><a href="">06/03/19</a></h3>
<ul>
<li>Changement de charset (utf8 -> utf8mb4_unicode_ci) ! Les emojis sont désormais stockés dans la bdd</li>
<li>Ajout d'une div avec un tag "contenteditable", pour éditer facilement des paragraphes/titres/... dans le contenu des posts de blog</li>
<li>Ajout d'une liste de boutons pour modifier du texte en wysiwyg</li>
</ul>
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/dc8dcc3e7e53f487b3360c21407a743d1020c1f7">05/03/19</a> (encore)</h3>
<ul>
<li>Bugfix sur l'opacité de la pagination (qui apparaissait par dessus le menu)</li>
</ul>
</article>
<article>
<h3><a href="https://git.bitmycode.com/sodimel/l3m-website/commit/63524a574490e130da7fee8076b8d2af047da58f">05/03/19</a></h3>
<ul>
<li>Ajout de la pagination sur le blog :
<ul>
......
site/view/public/projectView.php
View file @ d1d9e3e6
......@@ -8,7 +8,7 @@
<h3><a href="<?php echo $project['link']; ?>"><?php echo $project['name']; ?></a></h3>
<p>
<?php
echo nl2br($project['content']);
echo htmlspecialchars_decode($project['content']);
?>
</p>
</article>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment