modification liens réseaux sociaux, placeholder input text, correction erreurs CSS

7 files changed, 90 insertions, 32 deletions

diff --git a/public/css/head.css b/public/css/head.css
index c178d3a..3d9d6ca 100644
--- a/public/css/head.css
+++ b/public/css/head.css
@@ -4,6 +4,7 @@ header
         /*padding-top: 5px;*/
         /*padding-bottom: 10px;*/
         background-size: cover; /* largeur du bloc_page  */
+        background-position: center;
 }
 #nav_zone
 {
@@ -44,6 +45,7 @@ header
 {
         background-color: #ffffff7f;
         border-radius: 10px;
+        padding: 1px; /* pour que les marges de h1 et h2 ne mordent pas le bloc parent */
 }
 header h1
 {
@@ -79,13 +81,27 @@ header a
         display: flex;
         justify-content: center;
 }
+#header_social_content
+{
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+}
 #header_social_content img
 {
         width: 28px;
+        
+}
+#header_social_content a img
+{
+        width: 28px;
         background-color: #ffffffb3;
         border-radius: 50%;
 }
-
+#header_social_content .action_icon
+{
+        width: 24px;
+}
 #header_social_content img:hover
 {
         background-color: yellow;
@@ -98,7 +114,8 @@ header a
 }
 
 @media screen and (max-width: 1000px){
-        .header_content{
+        .header_content
+        {
                 padding: 15px 0;
         }
         header img
@@ -106,14 +123,20 @@ header a
                 max-width: 160px;
         }
 }
-@media screen and (max-width: 500px){
+@media screen and (max-width: 800px){
         .header_content
         {
-                display: block;
+                grid-template-columns: 2fr 1fr; /* on vire la colonne de gauche et on permet au deux autres de "se pousser" si besoin */
                 padding: 10px;
         }
-        #header_logo
+        .header_left_col
         {
                 display: none;
         }
+}
+@media screen and (max-width: 600px){
+        .header_content
+        {
+                display: block;
+        }
 }
\ No newline at end of file
diff --git a/public/js/Input.js b/public/js/Input.js
index be7cd8d..6c5af10 100644
--- a/public/js/Input.js
+++ b/public/js/Input.js
@@ -54,7 +54,7 @@ class InputText extends InputToggler{
             .then(response => response.json())
             .then(data => {
                 if(data.success){
-                        this.content_elem.innerHTML = this.input_elem.value;
+                        this.onSuccess(data);
                                 this.close();
                 }
                 else{
@@ -65,12 +65,25 @@ class InputText extends InputToggler{
                 console.error('Erreur:', error);
             });
         }
+        onSuccess(data){
+                this.content_elem.innerHTML = this.input_elem.value;
+        }
         cancel(){
                 this.input_elem.value = this.content_elem.innerHTML;
                 super.cancel();
         }
 }
 
+class InputTextSocialNetwork extends InputText{
+        open(){
+                this.input_elem.value = this.content_elem.parentNode.href;
+                super.open();
+        }
+        onSuccess(data){
+                this.content_elem.parentNode.href = this.input_elem.value;
+        }
+}
+
 class InputFile extends InputToggler{
         constructor(name, options = {}){
                 super(name, options);
diff --git a/src/controller/HeadFootController.php b/src/controller/HeadFootController.php
index d3e75ee..ffa33bc 100644
--- a/src/controller/HeadFootController.php
+++ b/src/controller/HeadFootController.php
@@ -9,6 +9,8 @@ use Doctrine\ORM\EntityManager;
 
 class HeadFootController
 {
+        static array $social_networks = ['facebook', 'instagram', 'linkedin', 'github']; // à completer
+
         static public function setTextData(EntityManager $entityManager, string $request_params, array $json): void
         {
                 $params_array = explode('_', $request_params); // header_title, header_description, footer_name, footer_address, footer_email
@@ -20,7 +22,14 @@ class HeadFootController
                 $model = new Model($entityManager);
                 if($model->findWhateverNode('name_node', $params_array[0])){
                         $node_data = $model->getNode()->getNodeData();
-                        $node_data->updateData($params_array[1], $json['new_text']); // $params_array[1] n'est pas contrôlé
+                        if(in_array($params_array[1], self::$social_networks)){
+                                $social = $node_data->getData()['social'];
+                                $social[$params_array[1]] = $json['new_text'];
+                                $node_data->updateData('social', $social);
+                        }
+                        else{
+                                $node_data->updateData($params_array[1], $json['new_text']); // $params_array[1] n'est pas contrôlé
+                        }
                         $entityManager->flush();
                         echo json_encode(['success' => true]);
                 }
diff --git a/src/model/entities/NodeData.php b/src/model/entities/NodeData.php
index 47e7208..ed94f1b 100644
--- a/src/model/entities/NodeData.php
+++ b/src/model/entities/NodeData.php
@@ -67,7 +67,7 @@ class NodeData
     {
         $this->data = $data;
     }*/
-    public function updateData(string $key, string $value = ''): void
+    public function updateData(string $key, string|array $value = ''): void
     {
         if($value !== ''){
             $this->data[$key] = $value;
diff --git a/src/view/FooterBuilder.php b/src/view/FooterBuilder.php
index 277de4b..d810170 100644
--- a/src/view/FooterBuilder.php
+++ b/src/view/FooterBuilder.php
@@ -30,15 +30,15 @@ class FooterBuilder extends AbstractBuilder
             if($_SESSION['admin'])
             {
                 // données du footer
-                $admin_footer_name = '<input type="text" id="footer_name_input" class="hidden" value="' . htmlspecialchars($name ?? '') . '" size="30">
+                $admin_footer_name = '<input type="text" id="footer_name_input" class="hidden" value="' . htmlspecialchars($name ?? '') . '" placeholder="raison sociale" size="30">
                     <img id="footer_name_open" class="action_icon" src="assets/edit.svg" onclick="footer_name.open()">
                     <img id="footer_name_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_name.submit()">
                     <img id="footer_name_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_name.cancel()">';
-                $admin_footer_address = '<input type="text" id="footer_address_input" class="hidden" value="' . htmlspecialchars($address ?? '') . '" size="30">
+                $admin_footer_address = '<input type="text" id="footer_address_input" class="hidden" value="' . htmlspecialchars($address ?? '') . '" placeholder="adresse" size="30">
                     <img id="footer_address_open" class="action_icon" src="assets/edit.svg" onclick="footer_address.open()">
                     <img id="footer_address_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_address.submit()">
                     <img id="footer_address_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_address.cancel()">';
-                $admin_footer_email = '<input type="text" id="footer_email_input" class="hidden" value="' . htmlspecialchars($email ?? '') . '" size="30">
+                $admin_footer_email = '<input type="text" id="footer_email_input" class="hidden" value="' . htmlspecialchars($email ?? '') . '" placeholder="e-mail" size="30">
                     <img id="footer_email_open" class="action_icon" src="assets/edit.svg" onclick="footer_email.open()">
                     <img id="footer_email_submit" class="action_icon hidden" src="assets/save.svg" onclick="footer_email.submit()">
                     <img id="footer_email_cancel" class="action_icon hidden" src="assets/close.svg" onclick="footer_email.cancel()">';
diff --git a/src/view/HeaderBuilder.php b/src/view/HeaderBuilder.php
index 4651418..4fbf941 100644
--- a/src/view/HeaderBuilder.php
+++ b/src/view/HeaderBuilder.php
@@ -48,13 +48,6 @@ class HeaderBuilder extends AbstractBuilder
             $header_background_name = $node_data->getAssetByRole('header_background')?->getFileName();
             $header_background = $header_background_name ? Asset::USER_PATH . $header_background_name : '';
             
-            $keys = array_keys($social);
-            $social_networks = '';
-            foreach($keys as $one_key){
-                $social_networks .= '<a href="' . $social[$one_key] . '" target="_blank" rel="noopener noreferrer">
-                    <img src="assets/' . $one_key . '.svg" alt="' . $one_key . '_alt"></a>';
-            }
-            
             // boutons mode admin
             if($_SESSION['admin']){
                 // assets dans classe header_additional_inputs
@@ -74,29 +67,40 @@ class HeaderBuilder extends AbstractBuilder
                     <img id="header_logo_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_logo.submit()">
                     <img id="header_logo_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_logo.cancel()">';
                 // texte dans classe header_content
-                $admin_header_title = '<input type="text" id="header_title_input" class="hidden" value="' . htmlspecialchars($title ?? '') . '" size="30">
+                $admin_header_title = '<input type="text" id="header_title_input" class="hidden" value="' . htmlspecialchars($title ?? '') . '" placeholder="nom du site web" size="30">
                     <img id="header_title_open" class="action_icon" src="assets/edit.svg" onclick="header_title.open()">
                     <img id="header_title_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_title.submit()">
                     <img id="header_title_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_title.cancel()">';
-                $admin_header_description = '<input type="text" id="header_description_input" class="hidden" value="' . htmlspecialchars($description ?? '') . '" size="30">
+                $admin_header_description = '<input type="text" id="header_description_input" class="hidden" value="' . htmlspecialchars($description ?? '') . '" placeholder="sous-titre ou description" size="30">
                     <img id="header_description_open" class="action_icon" src="assets/edit.svg" onclick="header_description.open()">
                     <img id="header_description_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_description.submit()">
                     <img id="header_description_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_description.cancel()">';
 
                 // icônes réseaux sociaux
-                $social_networks_inputs = '<div id="header_social_input" class="hidden">';
-                foreach($keys as $one_key){
+                $header_social_flex_direction = 'column';
+                $admin_social_networks = [];
+                foreach(array_keys($social) as $one_key){
+                    //<input type="file" id="header_' . $one_key . '_input" class="hidden" accept="image/svg+xml, image/png, image/jpeg, image/gif, image/webp, image/tiff">
+                    // sinon plutôt qu'on bouton nouveau réseau, utiliser le foreach avec HeadFootController::$social_networks pour tous les parcourir et placer des cases à cocher
+                    // les icones seront ajoutées par mes soins
+                    $admin_social_networks[$one_key] = '<input type="text" id="header_' . $one_key . '_input" class="hidden" value="' . $social[$one_key] . '" placeholder="nom du réseau social" size="30">
+                        <img id="header_' . $one_key . '_open" class="action_icon" src="assets/edit.svg" onclick="header_' . $one_key . '.open()">
+                        <img id="header_' . $one_key . '_submit" class="action_icon hidden" src="assets/save.svg" onclick="header_' . $one_key . '.submit()">
+                        <img id="header_' . $one_key . '_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_' . $one_key . '.cancel()">
+                        <script>let header_' . $one_key . ' = new InputTextSocialNetwork(\'header_' . $one_key . '\');</script>';
+                }
+                //$admin_social_new_network = '<div>nouveau réseau</div>';
+                $admin_social_new_network = '';
+
+                /*$social_networks_inputs = '<div id="header_social_input" class="hidden">';
+                foreach(array_keys($social) as $one_key){
                     $social_networks_inputs .= '<div>
                         <input type="text" placeholder="nom du réseau social">
                         <input type="text" placeholder="lien https://...">
                         <input type="file">
                     </div>';
                 }
-                $social_networks_inputs .= '</div>';
-                /*$admin_social_networks = $social_networks_inputs . '<img id="header_social_open" class="action_icon" src="assets/edit.svg" onclick="header_social.open()">
-                    <div id="header_social_submit" class="hidden"></div>
-                    <img id="header_social_cancel" class="action_icon hidden" src="assets/close.svg" onclick="header_social.cancel()">';*/
-                $admin_social_networks = '';
+                $social_networks_inputs .= '</div>';*/
             }
             else{
                 $admin_favicon = '';
@@ -104,7 +108,12 @@ class HeaderBuilder extends AbstractBuilder
                 $admin_header_logo = '';
                 $admin_header_title = '';
                 $admin_header_description = '';
-                $admin_social_networks = '';
+                $header_social_flex_direction = 'row';
+                $admin_social_networks = [];
+                foreach(array_keys($social) as $one_key){
+                    $admin_social_networks[$one_key] = '';
+                }
+                $admin_social_new_network = '';
             }
             
             ob_start();
diff --git a/src/view/templates/header.php b/src/view/templates/header.php
index 9c74f9b..89cdd4b 100644
--- a/src/view/templates/header.php
+++ b/src/view/templates/header.php
@@ -35,10 +35,15 @@
                 </div>
                 <div class="header_right_col">
                     <div id="header_social">
-                        <div id="header_social_content">
-                            <?= $social_networks ?>
+                        <div id="header_social_content" style="flex-direction: <?= $header_social_flex_direction ?>;">
+<?php foreach(array_keys($social) as $one_key){ ?>
+                            <div id="header_<?= $one_key ?>">
+                                <a href="<?= $social[$one_key] ?>" target="_blank" rel="noopener noreferrer"><img id="header_<?= $one_key ?>_content" src="assets/<?= $one_key ?>.svg" alt="<?= $one_key ?>_alt"></a>
+                                <?= $admin_social_networks[$one_key] ?>
+                            </div>
+<?php } ?>
+                        <?= $admin_social_new_network ?>
                         </div>
-                        <?= $admin_social_networks ?>
                     </div>
                     <?= $breadcrumb ?? '' ?>
                 </div>
@@ -50,7 +55,6 @@
                 let header_logo = new InputFile('header_logo');
                 let header_title = new InputText('header_title');
                 let header_description = new InputText('header_description');
-                let header_social = new InputToggler('header_social');
             </script>
 <?php } ?>
         </header>
\ No newline at end of file