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

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
...@@ -28,11 +28,15 @@ CSS ...@@ -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{ ...@@ -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{ ...@@ -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{ ...@@ -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 ...@@ -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 ...@@ -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;
} }
......
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
...@@ -88,6 +88,10 @@ ...@@ -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
...@@ -15,7 +15,7 @@ class Base ...@@ -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);
} }
......
...@@ -23,7 +23,7 @@ class BlogManager extends Base ...@@ -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;
......
...@@ -28,11 +28,31 @@ ...@@ -28,11 +28,31 @@
</section> </section>
<section class="input"> <section class="input">
<label for="inputContent">Contenu</label> <label for="inputContent">Contenu (code)</label>
<textarea name="content" id="inputContent"></textarea> <textarea name="content" id="inputContent"></textarea>
</section> </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> </form>
</article> </article>
\ No newline at end of file
...@@ -30,10 +30,15 @@ ...@@ -30,10 +30,15 @@
</section> </section>
<section class="input"> <section class="input">
<label for="inputContent">Description</label> <label for="inputContent">Description (code)</label>
<textarea name="content" id="inputContent"></textarea> <textarea name="content" id="inputContent"></textarea>
</section> </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" /> <input type="submit" value="Envoyer" />
</form> </form>
......
...@@ -27,10 +27,15 @@ ...@@ -27,10 +27,15 @@
<textarea name="shortContent" id="inputShortContent"><?php echo $project['shortContent']; ?></textarea> <textarea name="shortContent" id="inputShortContent"><?php echo $project['shortContent']; ?></textarea>
</article> </article>
<article class="input"> <section class="input">
<label for="inputContent">Contenu</label> <label for="inputContent">Description (code)</label>
<textarea name="content" id="inputContent"><?php echo $project['content']; ?></textarea> <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" /> <input type="submit" value="Éditer" />
......
...@@ -28,10 +28,15 @@ ...@@ -28,10 +28,15 @@
</article> </article>
<article class="input"> <article class="input">
<label for="inputContent">Contenu</label> <label for="inputContent">Contenu (code)</label>
<textarea name="content" id="inputContent"><?php echo $blogpost['content']; ?></textarea> <textarea name="content" id="inputContent"><?php echo $blogpost['content']; ?></textarea>
</article> </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" /> <input type="submit" value="Éditer" />
</form> </form>
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<article> <article>
<p class="listAdmin"> <p class="listAdmin">
<b><a href="/article/<?php echo $post['slug']; ?>"><?php echo $post['title'] ?></a></b> <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> </p>
</article> </article>
<?php <?php
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<article> <article>
<p class="listAdmin"> <p class="listAdmin">
<b><a href="/project/<?php echo $project['slug']; ?>"><?php echo $project['name'] ?></a></b> <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> </p>
</article> </article>
<?php <?php
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<p> <p>
<?php <?php
if(isset($_GET['title'])) if(isset($_GET['title']))
echo nl2br($blogpost['content']); echo htmlspecialchars_decode($blogpost['content']);
else else
echo nl2br($blogpost['shortContent']); echo nl2br($blogpost['shortContent']);
?> ?>
......
<article> <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> <ul>
<li>Ajout de la pagination sur le blog : <li>Ajout de la pagination sur le blog :
<ul> <ul>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<h3><a href="<?php echo $project['link']; ?>"><?php echo $project['name']; ?></a></h3> <h3><a href="<?php echo $project['link']; ?>"><?php echo $project['name']; ?></a></h3>
<p> <p>
<?php <?php
echo nl2br($project['content']); echo htmlspecialchars_decode($project['content']);
?> ?>
</p> </p>
</article> </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