add the social top bar

ot_admin/Classes/Controller/SiteController.php

@@ -1931,7 +1931,7 @@ class SiteController extends ActionController
         $cnn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
 
         $stmt = $cnn->prepare(
-            "SELECT o.id, o.name, o.facebook, o.twitter, 
+            "SELECT o.id, o.name, o.facebook, o.twitter, o.instagram, 
                                  o.category, o.logo_id, p.logoDonorsMove
                           FROM opentalent.Organization o INNER JOIN opentalent.Parameters p 
                           ON o.parameters_id = p.id
@@ -1941,7 +1941,6 @@ class SiteController extends ActionController
         $stmt->setFetchMode(PDO::FETCH_ASSOC);
         $data = $stmt->fetch();
 
-
         $stmt = $cnn->prepare(
             "SELECT c.email 
                           FROM opentalent.ContactPoint c
@@ -2003,6 +2002,7 @@ class SiteController extends ActionController
             "            logoid = " . $organizationExtraData['logo_id'] . "\n" .
             "            twitter = " . $organizationExtraData['twitter'] . "\n" .
             "            facebook = " . $organizationExtraData['facebook'] . "\n" .
+            "            instagram = " . $organizationExtraData['instagram'] . "\n" .
             "        }\n" .
             "    network {\n" .
             "            logo = " . $organizationExtraData['network']['logo'] . "\n" .

ot_templating/Classes/ViewHelpers/Utilities/AbsoluteUrlViewHelper.php

@@ -0,0 +1,49 @@
+<?php
+
+namespace Opentalent\OtTemplating\ViewHelpers\Utilities;
+
+use Closure;
+use Opentalent\OtCore\ViewHelpers\OtAbstractViewHelper;
+use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
+
+/**
+ *   Make sure the given url is an absolute one by prepending the 'https' prefix
+ *
+ *     {namespace ot=Opentalent\OtTemplating\ViewHelpers}
+ *
+ *     {ot:utilities.absoluteUrl(url: url)}
+ *
+ * @package Opentalent\OtTemplating\ViewHelpers
+ */
+class AbsoluteUrlViewHelper extends OtAbstractViewHelper {
+
+    /**
+     * -- This method is expected by Fluid --
+     * Declares the viewhelper's parameters
+     */
+    public function initializeArguments()
+    {
+        $this->registerArgument('url',
+            'string',
+            "An URL",
+            true);
+    }
+
+    /**
+     * -- This method is expected by Fluid --
+     * Renders the content as html
+     *
+     * @param array $arguments
+     * @param Closure $renderChildrenClosure
+     * @param RenderingContextInterface $renderingContext
+     * @return string|null
+     */
+    public static function renderStatic(
+        array $arguments,
+        Closure $renderChildrenClosure,
+        RenderingContextInterface $renderingContext
+    ) {
+        $url = $arguments['url'];
+        return 'https://' . preg_replace("/(?:https?:\/\/)?(.*)/", "$1", $url);
+    }
+}

ot_templating/Configuration/TypoScript/constants.txt

@@ -27,6 +27,7 @@ plugin.tx_ottemplating {
             logoid =
             twitter =
             facebook =
+            instagram =
         }
         network {
             # >> Ces paramètres doivent être redéfinis dans le gabarit du site

ot_templating/Configuration/TypoScript/setup.txt

@@ -85,6 +85,9 @@ plugin.tx_ottemplating {
         structureLogoId = {$plugin.tx_ottemplating.settings.organization.logoid}
         structureName = {$plugin.tx_ottemplating.settings.organization.name}
         structureEmail = {$plugin.tx_ottemplating.settings.organization.email}
+        structureFacebook = {$plugin.tx_ottemplating.settings.organization.facebook}
+        structureTwitter = {$plugin.tx_ottemplating.settings.organization.twitter}
+        structureInstagram = {$plugin.tx_ottemplating.settings.organization.instagram}
         structureIsNetwork = {$plugin.tx_ottemplating.settings.organization.is_network}
         networkLogo = {$plugin.tx_ottemplating.settings.network.logo}
         networkName = {$plugin.tx_ottemplating.settings.network.name}

ot_templating/Resources/Private/Partials/Classic/SocialBar.html

@@ -0,0 +1,37 @@
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+
+
+<f:comment><!-- Affichage des réseaux sociaux si des urls sont définies --></f:comment>
+
+<div class="social-bar">
+  <f:if condition="{settings.structureFacebook} != ''">
+    <f:then>
+      <div class="social-logo">
+        <a href="{ot:utilities.absoluteUrl(url: settings.structureFacebook)}" target="_blank">
+          <i class="fab fa-facebook" style="color: #129af6"></i>
+        </a>
+      </div>
+    </f:then>
+  </f:if>
+
+  <f:if condition="{settings.structureTwitter} != ''">
+    <f:then>
+      <div class="social-logo">
+        <a href="{ot:utilities.absoluteUrl(url: settings.structureTwitter)}" target="_blank">
+          <i class="fab fa-twitter" style="color: #1da1f2"></i>
+        </a>
+      </div>
+    </f:then>
+  </f:if>
+
+  <f:if condition="{settings.structureInstagram} != ''">
+    <f:then>
+      <div class="social-logo">
+        <a href="{ot:utilities.absoluteUrl(url: settings.structureInstagram)}" target="_blank">
+          <i class="fab fa-instagram-square" style="color: #515BD4"></i>
+        </a>
+      </div>
+    </f:then>
+  </f:if>
+</div>

ot_templating/Resources/Private/Partials/Classic/Topbar.html

@@ -15,6 +15,8 @@
 
     <v:render.uncache partial="Classic/UserToolbar" arguments="{_all}" />
 
+    <f:render partial="Classic/SocialBar" arguments="{_all}" />
+
     <f:comment><!-- Si un networkLogo est définit, affiche le logo du réseau --></f:comment>
     <f:if condition="{settings.networkLogo} != ''">
         <f:then>

ot_templating/Resources/Private/Partials/Modern/SocialBar.html

@@ -0,0 +1,37 @@
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+
+
+<f:comment><!-- Affichage des réseaux sociaux si des urls sont définies --></f:comment>
+
+<div class="social-bar">
+  <f:if condition="{settings.structureFacebook} != ''">
+    <f:then>
+      <div class="social-logo">
+        <a href="{ot:utilities.absoluteUrl(url: settings.structureFacebook)}" target="_blank">
+          <i class="fa fa-facebook" style="color: #129af6"></i>
+        </a>
+      </div>
+    </f:then>
+  </f:if>
+
+  <f:if condition="{settings.structureTwitter} != ''">
+    <f:then>
+      <div class="social-logo">
+        <a href="{ot:utilities.absoluteUrl(url: settings.structureTwitter)}" target="_blank">
+          <i class="fa fa-twitter" style="color: #1da1f2"></i>
+        </a>
+      </div>
+    </f:then>
+  </f:if>
+
+  <f:if condition="{settings.structureInstagram} != ''">
+    <f:then>
+      <div class="social-logo">
+        <a href="{ot:utilities.absoluteUrl(url: settings.structureInstagram)}" target="_blank">
+          <i class="fa fa-instagram" style="color: #515BD4"></i>
+        </a>
+      </div>
+    </f:then>
+  </f:if>
+</div>

ot_templating/Resources/Private/Partials/Modern/Topbar.html

@@ -34,9 +34,8 @@
             </div>
             <div class="col-lg-6 col-md-6">
                 <div class="topbar-social text-center text-md-right text-bold">
-                    <ul>
-                        <v:render.uncache partial="Modern/UserToolbar" arguments="{_all}" />
-                    </ul>
+                    <v:render.uncache partial="Modern/UserToolbar" arguments="{_all}" />
+                    <f:render partial="Modern/SocialBar" arguments="{_all}" />
                 </div>
             </div>
         </div>

ot_templating/Resources/Private/Partials/Modern/UserToolbar.html

@@ -3,30 +3,32 @@
 
 <f:comment><!-- Panneau d'authentification ou espace utilisateur --></f:comment>
 
-<f:security.ifAuthenticated>
-    <f:then>
-        <li>
-            <span><f:translate key="welcome"/> <b>{user.username}</b>!</span>
-        </li>
-        <li>
-            <a href="{settings.opentalentDashboardUrl}">
-                <f:translate key="member-area-of-my-structure"/>
-            </a>
-        </li>
-        <li>
-            <f:link.page additionalParams="{logintype:'logout'}">
-                <f:translate key="log-out"/>
-            </f:link.page>
-        </li>
-    </f:then>
-    <f:else>
-        <li>
-            <a href="https://www.opentalent.fr/login/"
-               target="_blank"
-               class="{f:if(condition: '{ot:loginFailed()}', then: 'trigger-on-load')}"
-            >
-                <f:translate key="login"/>
-            </a>
-        </li>
-    </f:else>
-</f:security.ifAuthenticated>
+<ul>
+    <f:security.ifAuthenticated>
+        <f:then>
+            <li>
+                <span><f:translate key="welcome"/> <b>{user.username}</b>!</span>
+            </li>
+            <li>
+                <a href="{settings.opentalentDashboardUrl}">
+                    <f:translate key="member-area-of-my-structure"/>
+                </a>
+            </li>
+            <li>
+                <f:link.page additionalParams="{logintype:'logout'}">
+                    <f:translate key="log-out"/>
+                </f:link.page>
+            </li>
+        </f:then>
+        <f:else>
+            <li>
+                <a href="https://www.opentalent.fr/login/"
+                   target="_blank"
+                   class="{f:if(condition: '{ot:loginFailed()}', then: 'trigger-on-load')}"
+                >
+                    <f:translate key="login"/>
+                </a>
+            </li>
+        </f:else>
+    </f:security.ifAuthenticated>
+</ul>

ot_templating/Resources/Public/assets/Classic/style/classic-blue.css

@@ -531,6 +531,28 @@ footer .logo-ot {
   margin-right: 20px;
 }
 
+.social-bar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}
+
 .user-toolbar {
   color: #666666;
   font-size: 16px;

ot_templating/Resources/Public/assets/Classic/style/classic-green.css

@@ -531,6 +531,28 @@ footer .logo-ot {
   margin-right: 20px;
 }
 
+.social-bar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}
+
 .user-toolbar {
   color: #666666;
   font-size: 16px;

ot_templating/Resources/Public/assets/Classic/style/classic-grey.css

@@ -531,6 +531,28 @@ footer .logo-ot {
   margin-right: 20px;
 }
 
+.social-bar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}
+
 .user-toolbar {
   color: #666666;
   font-size: 16px;

ot_templating/Resources/Public/assets/Classic/style/classic-light-blue.css

@@ -531,6 +531,28 @@ footer .logo-ot {
   margin-right: 20px;
 }
 
+.social-bar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}
+
 .user-toolbar {
   color: #666666;
   font-size: 16px;

ot_templating/Resources/Public/assets/Classic/style/classic-light-red.css

@@ -531,6 +531,28 @@ footer .logo-ot {
   margin-right: 20px;
 }
 
+.social-bar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}
+
 .user-toolbar {
   color: #666666;
   font-size: 16px;

ot_templating/Resources/Public/assets/Classic/style/classic-orange.css

@@ -531,6 +531,28 @@ footer .logo-ot {
   margin-right: 20px;
 }
 
+.social-bar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}
+
 .user-toolbar {
   color: #666666;
   font-size: 16px;

ot_templating/Resources/Public/assets/Classic/style/classic-purple.css

@@ -531,6 +531,28 @@ footer .logo-ot {
   margin-right: 20px;
 }
 
+.social-bar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}
+
 .user-toolbar {
   color: #666666;
   font-size: 16px;

ot_templating/Resources/Public/assets/Classic/style/classic-red.css

@@ -531,6 +531,28 @@ footer .logo-ot {
   margin-right: 20px;
 }
 
+.social-bar {
+  /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -webkit-box;
+  /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -moz-box;
+  /* TWEENER - IE 10 */
+  display: -ms-flexbox;
+  /* NEW - Chrome */
+  display: -webkit-flex;
+  /* NEW, Spec - Opera 12.1, Firefox 20+ */
+  display: flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}
+
 .user-toolbar {
   color: #666666;
   font-size: 16px;

ot_templating/Resources/Public/assets/Classic/style/module/_social-bar.scss

@@ -0,0 +1,14 @@
+
+
+.social-bar {
+  @include flex;
+  flex-direction: row;
+  margin: 0 18px;
+}
+
+.social-logo {
+  height: 24px;
+  width: 24px;
+  font-size: 24px;
+  margin: 0 6px;
+}

ot_templating/Resources/Public/assets/Classic/style/style.scss

@@ -82,6 +82,7 @@ $warning-font-color: #ffffff !default;
 "module/_menu",
 "module/_content",
 "module/_footer",
+"module/_social-bar",
 "module/_user-toolbar",
 "module/_breadcrumb",
 "module/_carousel",

ot_templating/Resources/Public/assets/Modern/style/custom.css

@@ -105,7 +105,27 @@
         display: none;
     }
 
+    .topbar-social {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+
+    .social-bar {
+        display: flex;
+        flex-direction: row;
+        margin: 0 16px;
+        top: -3px;
+        position: relative;
+    }
 
+    .social-logo {
+        height: 20px;
+        width: 20px;
+        font-size: 20px;
+        margin: 0 4px;
+        padding: 0 4px;
+    }
 
     /*------------------------
         Menu