[TASK] Customizer Visual Mapping

Classes/Controller/CustomizerController.php

@@ -0,0 +1,37 @@
+<?php
+
+namespace T3kit\T3kitExtensionTools\Controller;
+
+use  \KayStrobach\Themes\Controller\EditorController;
+
+/**
+ * Class CustomizerController
+ *
+ * @package T3kit\T3kitExtensionTools\Controller
+ */
+class CustomizerController extends EditorController {
+
+	/**
+	 * save changed constants
+	 *
+	 * @param array $data
+	 * @param array $check
+	 * @param integer $pid
+	 *
+	 * @return void
+	 */
+	public function saveCustomizedThemeAction(array $data, array $check, $pid) {
+		$this->tsParser->applyToPid($pid, $data, $check);
+		$this->redirect('customizeTheme');
+
+		$this->themeRepository->findByUid(array())->getAllPreviewImages();
+	}
+
+	/**
+	 * Initialize form
+	 */
+	public function customizeThemeAction() {
+		parent::indexAction();
+	}
+
+}

Classes/ViewHelpers/Be/TextToIdForElementViewHelper.php

@@ -0,0 +1,39 @@
+<?php
+namespace T3kit\T3kitExtensionTools\ViewHelpers\Be;
+
+use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Backend\Utility\BackendUtility;
+use TYPO3\CMS\Backend\Utility\IconUtility;
+
+/***************************************************************
+ *  Copyright notice
+ *  (c) 2017 Web Essentials <production@web-essentials.asia>
+ *  All rights reserved
+ *  This script is part of the TYPO3 project. The TYPO3 project is
+ *  free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 3 of the License, or
+ *  (at your option) any later version.
+ *  The GNU General Public License can be found at
+ *  http://www.gnu.org/copyleft/gpl.html.
+ *  This script is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *  This copyright notice MUST APPEAR in all copies of the script!
+ ***************************************************************/
+class TextToIdForElementViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\AbstractViewHelper {
+
+	/**
+	 * Iterates through elements of $each and renders child nodes
+	 *
+	 * @param string $text
+	 *
+	 * @return string
+	 */
+	public function render($text) {
+		$text = explode('.', strtolower(str_replace('_', '', $text)));
+		$text = $text[count($text)-1];
+		return $text;
+	}
+}

Resources/Private/Language/locallang.xlf

@@ -24,6 +24,19 @@
 			<trans-unit id="iconFontSelector.exception.iconFileMissing">
 				<source>Missing font file included from the css</source>
 			</trans-unit>
+
+			<trans-unit id="customizer" xml:space="preserve">
+				<source>Customize Theme</source>
+			</trans-unit>
+			<trans-unit id="customizer.url.label" xml:space="preserve">
+				<source>Link to Customizer Site</source>
+			</trans-unit>
+			<trans-unit id="customizer.url.placeholder" xml:space="preserve">
+				<source>http://t3kit.github.io/theme_t3kit_customizer</source>
+			</trans-unit>
+			<trans-unit id="customizer.error" xml:space="preserve">
+				<source>Error: Could not load Customizer for this page.</source>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>

Resources/Private/Layouts/Backend.html

@@ -0,0 +1,27 @@
+<f:be.container
+		pageTitle="TYPO3-Customizer"
+		includeRequireJsModules="{
+			0: '../typo3conf/ext/t3kit_extension_tools/Resources/Public/JavaScript/CustomizerBackendModule.js'
+		}"
+		>
+	<div class="typo3-fullDoc">
+		<div id="typo3-docheader">
+			<div class="typo3-docheader-functions">
+				<div class="left">
+				</div>
+				<div class="right">
+					<f:be.pagePath /><f:be.pageInfo />
+				</div>
+			</div>
+			<div class="typo3-docheader-buttons">
+				<f:render section="Buttons" optional="1" />
+			</div>
+		</div>
+	</div>
+
+	<div id="typo3-docbody">
+		<div id="typo3-inner-docbody" class="typo3-themes-module">
+			<f:render section="Content" />
+		</div>
+	</div>
+</f:be.container>

Resources/Private/Templates/Customizer/CustomizeTheme.html

@@ -0,0 +1,53 @@
+{namespace themes=KayStrobach\Themes\ViewHelpers}
+{namespace tools=T3kit\T3kitExtensionTools\ViewHelpers\Be}
+
+<f:layout name="Backend" />
+
+<f:section name="Buttons">
+	<f:if condition="{themeIsSelectable}">
+		<f:if condition="{selectedTheme}">
+			<span class="t3-icon t3-icon-actions t3-icon-actions-document t3-icon-document-save">
+				<input type="button" name="_savedok" class="c-inputButton" title="Save document" id="saveIcon">
+			</span>
+		</f:if>
+	</f:if>
+</f:section>
+
+<f:section name="Content">
+	<f:if condition="{themeIsSelectable}">
+		<f:then>
+			<f:if condition="{selectedTheme}">
+				<f:then>
+					<f:form action="saveCustomizedTheme" id="saveableForm">
+						<p>
+							<label>
+								<f:translate id="customizer.url.label"/>
+							</label>
+							<f:form.textfield id="customizerUrl" size="50" placeholder="{f:translate(id:'customizer.url.placeholder')}"/>
+						</p>
+						<f:form.hidden name="pid" value="{pid}" />
+						<f:for each="{themes:iterator.sort(subject: categories, key: 'title')}" as="category">
+							<f:for each="{themes:iterator.sort(subject: category.items)}" as="item" iteration="i">
+								<f:form.hidden name="check[{item.name}]" value="{f:if(condition:'{item.isDefault}', then:'', else:'checked')}" class="hidden"/>
+								<f:form.hidden name="data[{item.name}]" id="{tools:TextToIdForElement(text:item.name)}" value="{item.value}"/>
+
+								<f:if condition="{item.name} == 'themes.configuration.siteDomain'">
+									<f:if condition="{item.value} != ''">
+										<f:form.hidden id="siteDomain" value="http://{item.value}"/>
+									</f:if>
+								</f:if>
+							</f:for>
+						</f:for>
+					</f:form>
+					<div id="customizerIframeWrapper"></div>
+				</f:then>
+				<f:else>
+					<f:translate id="customizer.error"/>
+				</f:else>
+			</f:if>
+		</f:then>
+		<f:else>
+			<f:translate id="customizer.error"/>
+		</f:else>
+	</f:if>
+</f:section>

Resources/Public/JavaScript/CustomizerBackendModule.js

@@ -0,0 +1,85 @@
+/**
+ *
+ */
+define(['jquery'], function (jQuery) {
+
+	var Customizer = {};
+
+	Customizer.initialize = function() {
+		Customizer.bindCustomizeThemeEvent();
+		// Get Constant Configuration To Save
+		Customizer.bindSaveCustomizedThemeEvent();
+	};
+
+	Customizer.bindCustomizeThemeEvent = function () {
+		// get url for iframe
+		// get from localstorage if any
+		// or use sitedomain
+		var customizerIframeWrapper = jQuery('#customizerIframeWrapper');
+		var localCustomizerUrl = window.localStorage.getItem('customizerUrl');
+		var customizerUrl = jQuery('#customizerUrl');
+
+		if (localCustomizerUrl != null || localCustomizerUrl != '') {
+			customizerUrl.val(localCustomizerUrl);
+		} else {
+			customizerUrl.val(jQuery('#siteDomain').val());
+		}
+		var customizerIframe = '<iframe id="customizerIframe" src="'+customizerUrl.val()+'" style="height:670px"></iframe>';
+		customizerIframeWrapper.append(customizerIframe);
+		var a = jQuery(customizerIframeWrapper.html());
+		// a = jQuery(a);
+		// jQuery(a[0]).on("message", function(e) {
+		// 	console.log(e.origin);
+		// });
+
+		// save url to localstorage when URL changes
+		// and reload
+		customizerUrl.change(function () {
+			window.localStorage.setItem('customizerUrl', this.value);
+			window.location.reload();
+		});
+	};
+
+	/**
+	 * Get Constants from Theme Customizer in iframe
+	 * Set Those Values to the Form
+	 */
+	Customizer.bindSaveCustomizedThemeEvent = function () {
+		jQuery('#saveIcon').click(function() {
+
+			// get values
+			// dummy data
+			var items = '{"@footer-link-hover-color":"#0D4C62","@border-color":"#0B79A3","@main-text-color":"#B35837"}';
+
+			// TODO: to solve origin problem to get content in localstorage or have customizer work on real site
+			// permission problem with cross-origin
+			// var customizerIframe = document.getElementById("customizerIframe");
+			// customizerIframe = (customizerIframe.contentWindow || customizerIframe.contentDocument);
+			// items = customizerIframe.localStorage.getItem('lessObj');
+
+			if(items == null || items == '') {
+				alert('No values to save');
+			} else {
+				// set changed values to form
+				items = items.replace(/\@|\"|\{|\}/g,'');
+				items = items.split(',');
+				for(var i=0; i<items.length; i++) {
+					var item = items[i].split(':');
+					var elId = item[0].replace(/\-|\_/g,'');
+					item = jQuery('#'+ elId).val(item[1]);
+				}
+
+				//submit form
+				jQuery('#saveableForm').submit();
+			}
+		});
+	};
+
+	/**
+	 * initialize function
+	 * */
+	return function () {
+		Customizer.initialize();
+		return Customizer;
+	}();
+});

ext_tables.php

@@ -0,0 +1,19 @@
+<?php
+
+if (!defined('TYPO3_MODE'))
+	die('Access denied.');
+
+if (TYPO3_MODE === 'BE') {
+	\TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerModule(
+		'T3kit.' . $_EXTKEY, 'web', // Main area
+		'mod1', // Name of the module
+		'', // Position of the module
+		array(// Allowed controller action combinations
+			'Customizer' => 'customizeTheme,saveCustomizedTheme',
+		), array(// Additional configuration
+			'access' => 'user,group',
+			'iconIdentifier' => 'module-themes',
+			'labels' => 'LLL:EXT:' . $_EXTKEY . '/Resources/Private/Language/locallang.xlf:customizer',
+		)
+	);
+}