utilisation des icônes SVG du dépôt twbs/bootstrap-icons pour les réseaux sociaux, amélioration du CSS

6 files changed, 33 insertions, 16 deletions

diff --git a/src/model/entities/NodeData.php b/src/model/entities/NodeData.php
index b0aaef9..85cc0a6 100644
--- a/src/model/entities/NodeData.php
+++ b/src/model/entities/NodeData.php
@@ -13,7 +13,7 @@ use Doctrine\Common\Collections\Collection; // interface
 #[ORM\Table(name: TABLE_PREFIX . "node_data")]
 class NodeData
 {
-    static array $social_networks = ['facebook', 'instagram', 'linkedin', 'github']; // à completer
+    static array $social_networks = ['facebook', 'instagram', 'whatsapp', 'snapchat', 'tiktok', 'linkedin', 'github']; // à completer
     
     #[ORM\Id]
     #[ORM\GeneratedValue]
diff --git a/src/view/AbstractBuilder.php b/src/view/AbstractBuilder.php
index 3d315b1..b9a1d7f 100644
--- a/src/view/AbstractBuilder.php
+++ b/src/view/AbstractBuilder.php
@@ -57,4 +57,21 @@ abstract class AbstractBuilder
     {
         $this->html .= $html;
     }
+
+    protected function insertSVG(string $path, array $attributes = []): string
+    {
+        $svg = file_get_contents($path);
+
+        // modification des attributs
+        if(!empty($attributes)){
+            $dom = new DOMDocument();
+            $dom->loadXML($svg);
+            $svg_elem = $dom->documentElement;
+            foreach($attributes as $key => $value){
+                $svg_elem->setAttribute($key, $value);
+            }
+            $svg = $dom->saveXML($svg_elem);
+        }
+        return $svg;
+    }
 }
\ No newline at end of file
diff --git a/src/view/HeadBuilder.php b/src/view/HeadBuilder.php
index e3d620c..fa0f063 100644
--- a/src/view/HeadBuilder.php
+++ b/src/view/HeadBuilder.php
@@ -18,14 +18,12 @@ class HeadBuilder extends AbstractBuilder
             $page = Model::$page_path->getLast();
 
             $css = '';
-                foreach($page->getCSS() as $name)
-                        {
+                foreach($page->getCSS() as $name){
                                 $css .= '<link rel="stylesheet" href="' . self::versionedFileURL('css', $name) . '">' . "\n";
                         }
                         
             $js = '';
-                foreach($page->getJS() as $name)
-                        {
+                foreach($page->getJS() as $name){
                                 $js .= '<script src="' . self::versionedFileURL('js', $name) . '"></script>' . "\n";
                         }
 
diff --git a/src/view/HeaderBuilder.php b/src/view/HeaderBuilder.php
index 1339659..266aab8 100644
--- a/src/view/HeaderBuilder.php
+++ b/src/view/HeaderBuilder.php
@@ -11,6 +11,7 @@ class HeaderBuilder extends AbstractBuilder
 {
     private ?Node $nav = null;
     private ?Node $breadcrumb = null;
+    const ICON_PATH = 'icons/';
 
     public function __construct(Node $node)
     {
@@ -55,7 +56,6 @@ class HeaderBuilder extends AbstractBuilder
                 // assets dans classe header_additional_inputs
                 $admin_favicon = '<input type="file" id="head_favicon_input" class="hidden" accept="image/png, image/jpeg, image/gif, image/webp, image/tiff, image/x-icon, image/bmp">
                     <button id="head_favicon_open" onclick="head_favicon.open()"><img id="head_favicon_content" class="action_icon"> Favicon</button>
-                    <script>document.getElementById("head_favicon_content").src = window.Config.favicon;</script>
                     <img id="head_favicon_submit" class="action_icon hidden" src="assets/save.svg" onclick="head_favicon.submit()">
                     <img id="head_favicon_cancel" class="action_icon hidden" src="assets/close.svg" onclick="head_favicon.cancel()">';
                 $admin_background = '<input type="file" id="header_background_input" class="hidden" accept="image/png, image/jpeg, image/gif, image/webp, image/tiff">
@@ -80,7 +80,6 @@ class HeaderBuilder extends AbstractBuilder
                     <img id="header_description_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_description.cancel()">';
 
                 // icônes réseaux sociaux
-                $header_social_flex_direction = 'column';
                 // boucle sur la liste complète de réseaux sociaux
                 foreach(NodeData::$social_networks as $network){
                     $checked = (isset($social_show[$network]) && $social_show[$network]) ? 'checked' : '';
@@ -88,15 +87,16 @@ class HeaderBuilder extends AbstractBuilder
 
                     $social_networks .= '<div id="header_' . $network . '">
                         <input type="checkbox" onclick="checkSocialNetwork(\'header_' . $network . '\')" ' . $checked . '>
-                        <a ' . $href . ' target="_blank" rel="noopener noreferrer">
-                            <img id="header_' . $network . '_content" src="assets/' . $network . ($checked ? '' : '-nb') . '.svg" alt="'. $network . '_alt">
-                        </a>
-                        <input type="text" id="header_' . $network . '_input" class="hidden" value="' . ($social[$network] ?? "") . '" placeholder="nom du réseau social" size="30">
+                        <a ' . $href . ' target="_blank" rel="noopener noreferrer">'
+                            . $this->insertSVG(self::ICON_PATH . $network . '.svg', ['id' => 'header_' . $network . '_content', 'class' => ($checked ? 'svg_fill_red' : '')])
+                        . '</a>
+                        <input type="text" id="header_' . $network . '_input" class="hidden" value="' . ($social[$network] ?? "") . '" placeholder="lien http://..." size="30">
                             <img id="header_' . $network . '_open" class="action_icon" src="assets/edit.svg" onclick="header_' . $network . '.open()">
                             <img id="header_' . $network . '_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_' . $network . '.submit()">
                             <img id="header_' . $network . '_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_' . $network . '.cancel()">
-                            <script>let header_' . $network . ' = new InputTextSocialNetwork(\'header_' . $network . '\');</script>
+                            <script>let header_' . $network . ' = new InputTextSocialNetwork(\'header_' . $network . '\', {\'has_content\': false});</script>
                         </div>';
+                        // {'has_content': false} => InputToggle ne gèrera pas cette balise
                 }
             }
             else{
@@ -106,14 +106,15 @@ class HeaderBuilder extends AbstractBuilder
                 $admin_header_title = '';
                 $admin_header_description = '';
 
-                $header_social_flex_direction = 'row';
                 if(isset($social_show)){
                     // boucle sur les réseaux sociaux "activés"
                     foreach(array_keys($social_show) as $network){
                         if($social_show[$network]){
                             $href = (isset($social[$network]) && $social[$network] !== '') ? 'href="' . $social[$network] . '"' : '';
                             $social_networks .= '<div id="header_' . $network . '">
-                                    <a ' . $href . ' target="_blank" rel="noopener noreferrer"><img id="header_' . $network . '_content" src="assets/' . $network . '.svg" alt="'. $network . '_alt"></a>
+                                    <a ' . $href . ' target="_blank" rel="noopener noreferrer">'
+                                        . $this->insertSVG(self::ICON_PATH . $network . '.svg', ['id' => 'header_' . $network . '_content','class' => 'svg_fill_red'])
+                                    . '</a>
                                 </div>';
                         }
                     }
diff --git a/src/view/templates/header.php b/src/view/templates/header.php
index 4c39cfd..a2d472d 100644
--- a/src/view/templates/header.php
+++ b/src/view/templates/header.php
@@ -35,7 +35,7 @@
                 </div>
                 <div class="header_right_col">
                     <div id="header_social">
-                        <div id="header_social_content" style="flex-direction: <?= $header_social_flex_direction ?>;">
+                        <div id="header_social_content">
                             <?= $social_networks ?>
                         </div>
                     </div>
@@ -44,6 +44,7 @@
             </div>
 <?php if($_SESSION['admin']){ ?>
             <script>
+                document.getElementById("head_favicon_content").src = window.Config.favicon;
                 let head_favicon = new InputFileFavicon('head_favicon');
                 let header_background = new InputFileHeaderBackground('header_background');
                 let header_logo = new InputFile('header_logo');
diff --git a/src/view/templates/new_page.php b/src/view/templates/new_page.php
index 1756a78..7bf4c01 100644
--- a/src/view/templates/new_page.php
+++ b/src/view/templates/new_page.php
@@ -20,7 +20,7 @@
                         <input type="hidden" name="new_page_hidden">
                         <p>
                                 <label class="label_textarea" for="page_description">Description qui apparaît sous le titre dans les moteurs de recherche</label>
-                                <textarea id="page_description" name="page_description" cols="40" rows="3" placeholder="ex: nous faisons ceci et cela, etc"></textarea>
+                                <textarea id="page_description" name="page_description" cols="35" rows="3" placeholder="ex: nous faisons ceci et cela, etc"></textarea>
                         </p>
                         <input type="submit" value="Créer la page">
                 </form>