[FEATURE] Social Icons Urls editable on different languages (Podio fe…

…ature_40) (#119) * Add input fields for Social Icon URLs into SocialIcons content element
t3kit · Feb 9, 2017 · 0cb8275 · 0cb8275
1 parent d345c53
commit 0cb8275
Show file tree

Hide file tree

Showing 5 changed files with 209 additions and 17 deletions.
diff --git a/Configuration/FlexForms/flexform_socialIcons.xml b/Configuration/FlexForms/flexform_socialIcons.xml
@@ -0,0 +1,99 @@
+<T3DataStructure>
+	<meta>
+		<langDisable>1</langDisable>
+	</meta>
+	<sheets>
+		<sDEF>
+			<ROOT>
+				<TCEforms>
+					<sheetTitle>
+						LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:accordion.flexform.sheetGeneral
+					</sheetTitle>
+				</TCEforms>
+				<type>array</type>
+				<el>
+					<facebookLink>
+						<TCEforms>
+							<label>
+								LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:socialIcons.flexform.facebookLink
+							</label>
+							<config>
+								<type>input</type>
+							</config>
+						</TCEforms>
+					</facebookLink>
+					<googlePlusLink>
+						<TCEforms>
+							<label>
+								LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:socialIcons.flexform.googlePlusLink
+							</label>
+							<config>
+								<type>input</type>
+							</config>
+						</TCEforms>
+					</googlePlusLink>
+					<instagramLink>
+						<TCEforms>
+							<label>
+								LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:socialIcons.flexform.instagramLink
+							</label>
+							<config>
+								<type>input</type>
+							</config>
+						</TCEforms>
+					</instagramLink>
+					<linkedInLink>
+						<TCEforms>
+							<label>
+								LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:socialIcons.flexform.linkedInLink
+							</label>
+							<config>
+								<type>input</type>
+							</config>
+						</TCEforms>
+					</linkedInLink>
+					<pinterestLink>
+						<TCEforms>
+							<label>
+								LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:socialIcons.flexform.pinterestLink
+							</label>
+							<config>
+								<type>input</type>
+							</config>
+						</TCEforms>
+					</pinterestLink>
+					<twitterLink>
+						<TCEforms>
+							<label>
+								LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:socialIcons.flexform.twitterLink
+							</label>
+							<config>
+								<type>input</type>
+							</config>
+						</TCEforms>
+					</twitterLink>
+					<vimeoLink>
+						<TCEforms>
+							<label>
+								LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:socialIcons.flexform.vimeoLink
+							</label>
+							<config>
+								<type>input</type>
+							</config>
+						</TCEforms>
+					</vimeoLink>
+					<youtubeLink>
+						<TCEforms>
+							<label>
+								LLL:EXT:theme_t3kit/Resources/Private/Language/ContentElements.xlf:socialIcons.flexform.youtubeLink
+							</label>
+							<config>
+								<type>input</type>
+							</config>
+						</TCEforms>
+					</youtubeLink>
+				</el>
+			</ROOT>
+		</sDEF>
+	</sheets>
+</T3DataStructure>
diff --git a/Configuration/TCA/Overrides/tt_content.php b/Configuration/TCA/Overrides/tt_content.php
@@ -487,6 +487,7 @@
         'showitem' => '
                 --palette--;' . $frontendLanguageFilePrefix . 'palette.general;general,
                 header;' . $frontendLanguageFilePrefix . 'header.ALT.div_formlabel,
+                --linebreak--,pi_flexform;' . $contentElementLanguageFilePrefix . 'tt_content.tabs.settings,
             --div--;' . $frontendLanguageFilePrefix . 'tabs.appearance,
                 --palette--;LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:palette.frames;frames,
                 --palette--;' . $frontendLanguageFilePrefix . 'palette.appearanceLinks;appearanceLinks,
@@ -552,6 +553,9 @@
     // "contentElementSlider"
     $GLOBALS['TCA']['tt_content']['columns']['pi_flexform']['config']['ds']['*,contentElementSlider'] = 'FILE:EXT:theme_t3kit/Configuration/FlexForms/flexform_slider.xml';
 
+    // "contentElementSocialIcons"
+    $GLOBALS['TCA']['tt_content']['columns']['pi_flexform']['config']['ds']['*,socialIcons'] = 'FILE:EXT:theme_t3kit/Configuration/FlexForms/flexform_socialIcons.xml';
+
     // Add additional fields for tt_content
     $additionalColumns = [
         'wrapper' => [

diff --git a/Resources/Private/Language/ContentElements.xlf b/Resources/Private/Language/ContentElements.xlf
@@ -359,6 +359,31 @@
             <trans-unit id="icon.flexform.iconClass_none">
                 <source>None</source>
             </trans-unit>
+
+            <trans-unit id="socialIcons.flexform.facebookLink">
+                <source>Facebook: Pagelink</source>
+            </trans-unit>
+            <trans-unit id="socialIcons.flexform.googlePlusLink">
+                <source>Google+: Pagelink</source>
+            </trans-unit>
+            <trans-unit id="socialIcons.flexform.instagramLink">
+                <source>Instagram: Pagelink</source>
+            </trans-unit>
+            <trans-unit id="socialIcons.flexform.linkedInLink">
+                <source>LinkedIn: Pagelink</source>
+            </trans-unit>
+            <trans-unit id="socialIcons.flexform.pinterestLink">
+                <source>Pinterest: Pagelink</source>
+            </trans-unit>
+            <trans-unit id="socialIcons.flexform.twitterLink">
+                <source>Twitter: Pagelink</source>
+            </trans-unit>
+            <trans-unit id="socialIcons.flexform.vimeoLink">
+                <source>Vimeo: Pagelink</source>
+            </trans-unit>
+            <trans-unit id="socialIcons.flexform.youtubeLink">
+                <source>Youtube: Pagelink</source>
+            </trans-unit>
         </body>
     </file>
 </xliff>
diff --git a/Resources/Private/Partials/ContentElements/Socialmedia.html b/Resources/Private/Partials/ContentElements/Socialmedia.html
@@ -5,36 +5,100 @@
 		<!-- theme_t3kit: Partials/Footer/Socialmedia.html [begin] -->
 		<div class="social-icons">
 			<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useFacebook')}">
-				<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.facebookLink')}"
-				   target="_blank" title="Facebook"><span class="icons icon-t3-facebook"></span></a>
+				<f:if condition="{settings.facebookLink}">
+					<f:then>
+						<a class="social-icons__item" href="{settings.facebookLink}"
+						   target="_blank" title="Facebook"><span class="icons icon-t3-facebook"></span></a>
+					</f:then>
+					<f:else>
+						<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.facebookLink')}"
+						   target="_blank" title="Facebook"><span class="icons icon-t3-facebook"></span></a>
+					</f:else>
+				</f:if>
 			</f:if>
 			<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useTwitter')}">
-				<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.twitterLink')}"
-				   target="_blank" title="Twitter"><span class="icons icon-t3-twitter"></span></a>
+				<f:if condition="{settings.twitterLink}">
+					<f:then>
+						<a class="social-icons__item" href="{settings.twitterLink}"
+						   target="_blank" title="Twitter"><span class="icons icon-t3-twitter"></span></a>
+					</f:then>
+					<f:else>
+						<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.twitterLink')}"
+						   target="_blank" title="Twitter"><span class="icons icon-t3-twitter"></span></a>
+					</f:else>
+				</f:if>
 			</f:if>
 			<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useLinkedIn')}">
-				<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.linkedInLink')}"
-				   target="_blank" title="LinkedIn"><span class="icons icon-t3-linkedin"></span></a>
+				<f:if condition="{settings.linkedInLink}">
+					<f:then>
+						<a class="social-icons__item" href="{settings.linkedInLink}"
+						   target="_blank" title="LinkedIn"><span class="icons icon-t3-linkedin"></span></a>
+					</f:then>
+					<f:else>
+						<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.linkedInLink')}"
+							   target="_blank" title="LinkedIn"><span class="icons icon-t3-linkedin"></span></a>
+					</f:else>
+				</f:if>
 			</f:if>
 			<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useVimeo')}">
-				<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.vimeoLink')}"
-				   target="_blank" title="Vimeo"><span class="icons icon-t3-vimeo"></span></a>
+				<f:if condition="{settings.vimeoLink}">
+					<f:then>
+						<a class="social-icons__item" href="{settings.vimeoLink}"
+						   target="_blank" title="Vimeo"><span class="icons icon-t3-vimeo"></span></a>
+					</f:then>
+					<f:else>
+						<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.vimeoLink')}"
+							   target="_blank" title="Vimeo"><span class="icons icon-t3-vimeo"></span></a>
+					</f:else>
+				</f:if>
 			</f:if>
 			<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useGooglePlus')}">
-				<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.googlePlusLink')}"
-				   target="_blank" title="Googleplus"><span class="icons icon-t3-googleplus"></span></a>
+				<f:if condition="{settings.googlePlusLink}">
+					<f:then>
+						<a class="social-icons__item" href="{settings.googlePlusLink}"
+						   target="_blank" title="Googleplus"><span class="icons icon-t3-googleplus"></span></a>
+					</f:then>
+					<f:else>
+						<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.googlePlusLink')}"
+							   target="_blank" title="Googleplus"><span class="icons icon-t3-googleplus"></span></a>
+					</f:else>
+				</f:if>
 			</f:if>
 			<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.usePinterest')}">
-				<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.pinterestLink')}"
-				   target="_blank" title="Pinterest"><span class="icons icon-t3-pinterest"></span></a>
+				<f:if condition="{settings.pinterestLink}">
+					<f:then>
+						<a class="social-icons__item" href="{settings.pinterestLink}"
+						   target="_blank" title="Pinterest"><span class="icons icon-t3-pinterest"></span></a>
+					</f:then>
+					<f:else>
+						<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.pinterestLink')}"
+							   target="_blank" title="Pinterest"><span class="icons icon-t3-pinterest"></span></a>
+					</f:else>
+				</f:if>
 			</f:if>
 			<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useInstagram')}">
-				<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.instagramLink')}"
-				   target="_blank" title="Instagram"><span class="icons icon-t3-instagram"></span></a>
+				<f:if condition="{settings.instagramLink}">
+					<f:then>
+						<a class="social-icons__item" href="{settings.instagramLink}"
+						   target="_blank" title="Instagram"><span class="icons icon-t3-instagram"></span></a>
+					</f:then>
+					<f:else>
+						<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.instagramLink')}"
+							   target="_blank" title="Instagram"><span class="icons icon-t3-instagram"></span></a>
+					</f:else>
+				</f:if>
 			</f:if>
 			<f:if condition="{theme:constant(constant:'themes.configuration.socialmedia.useYoutube')}">
-				<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.youtubeLink')}"
-				   target="_blank" title="Youtube"><span class="icons icon-t3-youtube"></span></a>
+				<f:if condition="{settings.youtubeLink}">
+					<f:then>
+						<a class="social-icons__item" href="{settings.youtubeLink}"
+						   target="_blank" title="Youtube"><span class="icons icon-t3-youtube"></span></a>
+					</f:then>
+					<f:else>
+						<a class="social-icons__item" href="{theme:constant(constant:'themes.configuration.socialmedia.youtubeLink')}"
+							   target="_blank" title="Youtube"><span class="icons icon-t3-youtube"></span></a>
+					</f:else>
+				</f:if>
 			</f:if>
 		</div>
 

diff --git a/Resources/Private/Templates/ContentElements/SocialIcons.html b/Resources/Private/Templates/ContentElements/SocialIcons.html
@@ -4,7 +4,7 @@
 <f:section name="content">
 <!-- theme_t3kit: Templates/ContentElements/SocialIcons.html [begin] -->
 
-	<f:render partial="Socialmedia" section="Default" />
+	<f:render partial="Socialmedia" section="Default" arguments="{settings: settings}"/>
 
 <!-- theme_t3kit: Templates/ContentElements/SocialIcons.html [end] -->
 </f:section>