[TASK] wizard_crpages cleanup 09/35209/9
authorWouter Wolters <typo3@wouterwolters.nl>
Tue, 9 Dec 2014 23:15:27 +0000 (00:15 +0100)
committerWouter Wolters <typo3@wouterwolters.nl>
Fri, 2 Jan 2015 09:22:31 +0000 (10:22 +0100)
Make the code simpler and more readable.

Resolves: #64062
Releases: master
Change-Id: Ie46f49e8cc5b6982391004bfcdfd712bfbab1a03
Reviewed-on: http://review.typo3.org/35209
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
Reviewed-by: Daniel Maier <dani-maier@gmx.de>
Tested-by: Daniel Maier <dani-maier@gmx.de>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
typo3/sysext/wizard_crpages/Classes/Controller/CreatePagesWizardModuleFunctionController.php
typo3/sysext/wizard_crpages/Resources/Public/JavaScript/WizardCreatePages.js

index d175b70..dfcff1d 100644 (file)
@@ -16,6 +16,8 @@ namespace TYPO3\CMS\WizardCrpages\Controller;
 
 use TYPO3\CMS\Backend\Utility\BackendUtility;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
+use TYPO3\CMS\Core\Messaging\FlashMessage;
+use TYPO3\CMS\Frontend\Page\PageRepository;
 
 /**
  * Creates the "Create pages" wizard
@@ -25,13 +27,6 @@ use TYPO3\CMS\Core\Utility\GeneralUtility;
 class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Module\AbstractFunctionModule {
 
        /**
-        * Holds reference of lorem ipsum class
-        *
-        * @var tx_loremipsum_wiz
-        */
-       protected $loremIpsumObject = NULL;
-
-       /**
         * Complete tsConfig
         *
         * @var array
@@ -46,25 +41,32 @@ class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Modul
        protected $pagesTsConfig = array();
 
        /**
+        * @var string
+        */
+       protected $backPath = '';
+
+       /**
+        * The type select HTML
+        */
+       protected $typeSelectHtml = '';
+
+       /**
         * Main function creating the content for the module.
         *
         * @return string HTML content for the module, actually a "section" made through the parent object in $this->pObj
         */
        public function main() {
-               $GLOBALS['LANG']->includeLLFile('EXT:wizard_crpages/locallang.xlf');
+               $this->getLanguageService()->includeLLFile('EXT:wizard_crpages/locallang.xlf');
                $theCode = '';
                $this->tsConfig = BackendUtility::getPagesTSconfig($this->pObj->id);
                $this->pagesTsConfig = isset($this->tsConfig['TCEFORM.']['pages.']) ? $this->tsConfig['TCEFORM.']['pages.'] : array();
-               // Create loremIpsum code:
-               if (\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::isLoaded('lorem_ipsum')) {
-                       $this->loremIpsumObject = GeneralUtility::getUserObj('EXT:lorem_ipsum/class.tx_loremipsum_wiz.php:tx_loremipsum_wiz');
-               }
+               $this->backPath = $GLOBALS['BACK_PATH'];
+
                // Create new pages here?
-               $m_perms_clause = $GLOBALS['BE_USER']->getPagePermsClause(8);
-               $pRec = BackendUtility::getRecord('pages', $this->pObj->id, 'uid', ' AND ' . $m_perms_clause);
-               $sys_pages = GeneralUtility::makeInstance(\TYPO3\CMS\Frontend\Page\PageRepository::class);
-               $menuItems = $sys_pages->getMenu($this->pObj->id, '*', 'sorting', '', FALSE);
-               if (is_array($pRec)) {
+               $pageRecord = BackendUtility::getRecord('pages', $this->pObj->id, 'uid', ' AND ' . $this->getBackendUser()->getPagePermsClause(8));
+               $pageRepository = GeneralUtility::makeInstance(PageRepository::class);
+               $menuItems = $pageRepository->getMenu($this->pObj->id, '*', 'sorting', '', FALSE);
+               if (is_array($pageRecord)) {
                        $data = GeneralUtility::_GP('data');
                        if (is_array($data['pages'])) {
                                if (GeneralUtility::_GP('createInListEnd')) {
@@ -95,44 +97,45 @@ class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Modul
                                }
                                if (!empty($data['pages'])) {
                                        reset($data);
-                                       $tce = GeneralUtility::makeInstance(\TYPO3\CMS\Core\DataHandling\DataHandler::class);
-                                       $tce->stripslashes_values = 0;
+                                       $dataHandler = GeneralUtility::makeInstance(\TYPO3\CMS\Core\DataHandling\DataHandler::class);
+                                       $dataHandler->stripslashes_values = 0;
                                        // set default TCA values specific for the user
-                                       $TCAdefaultOverride = $GLOBALS['BE_USER']->getTSConfigProp('TCAdefaults');
+                                       $TCAdefaultOverride = $this->getBackendUser()->getTSConfigProp('TCAdefaults');
                                        if (is_array($TCAdefaultOverride)) {
-                                               $tce->setDefaultsFromUserTS($TCAdefaultOverride);
+                                               $dataHandler->setDefaultsFromUserTS($TCAdefaultOverride);
                                        }
-                                       $tce->start($data, array());
-                                       $tce->process_datamap();
+                                       $dataHandler->start($data, array());
+                                       $dataHandler->process_datamap();
                                        BackendUtility::setUpdateSignal('updatePageTree');
-                                       $flashMessage = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Messaging\FlashMessage::class, '', $GLOBALS['LANG']->getLL('wiz_newPages_create'));
+                                       $flashMessage = GeneralUtility::makeInstance(FlashMessage::class, '', $this->getLanguageService()->getLL('wiz_newPages_create'));
                                } else {
-                                       $flashMessage = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Messaging\FlashMessage::class, '', $GLOBALS['LANG']->getLL('wiz_newPages_noCreate'), \TYPO3\CMS\Core\Messaging\FlashMessage::ERROR);
+                                       $flashMessage = GeneralUtility::makeInstance(FlashMessage::class, '', $this->getLanguageService()->getLL('wiz_newPages_noCreate'), FlashMessage::ERROR);
                                }
                                $theCode .= $flashMessage->render();
                                // Display result:
-                               $menuItems = $sys_pages->getMenu($this->pObj->id, '*', 'sorting', '', 0);
+                               $menuItems = $pageRepository->getMenu($this->pObj->id, '*', 'sorting', '', FALSE);
                                $lines = array();
-                               foreach ($menuItems as $rec) {
-                                       BackendUtility::workspaceOL('pages', $rec);
-                                       if (is_array($rec)) {
-                                               $lines[] = '<nobr>' . \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIconForRecord('pages', $rec, array('title' => BackendUtility::titleAttribForPages($rec, '', FALSE))) . htmlspecialchars(GeneralUtility::fixed_lgd_cs($rec['title'], $GLOBALS['BE_USER']->uc['titleLen'])) . '</nobr>';
+                               foreach ($menuItems as $record) {
+                                       BackendUtility::workspaceOL('pages', $record);
+                                       if (is_array($record)) {
+                                               $lines[] = '<nobr>' . \TYPO3\CMS\Backend\Utility\IconUtility::getSpriteIconForRecord('pages', $record, array('title' => BackendUtility::titleAttribForPages($record, '', FALSE))) . htmlspecialchars(GeneralUtility::fixed_lgd_cs($record['title'], $this->getBackendUser()->uc['titleLen'])) . '</nobr>';
                                        }
                                }
-                               $theCode .= '<h4>' . $GLOBALS['LANG']->getLL('wiz_newPages_currentMenu') . '</h4>' . implode('<br />', $lines);
+                               $theCode .= '<h4>' . $this->getLanguageService()->getLL('wiz_newPages_currentMenu') . '</h4>' . implode('<br />', $lines);
                        } else {
                                // Display create form
+                               $this->typeSelectHtml = $this->getTypeSelectHtml();
                                $lines = array();
                                $tableData = array();
                                for ($a = 0; $a < 9; $a++) {
                                        $tableData[] = $this->getFormLine($a);
                                }
-                               $lines[] = '<div class="table-fit"><table id="formFieldContainer" class="t3-table"><tbody id="formFieldContainerBody">' . implode(LF, $tableData) . '</tbody></table></div>';
-                               $theCode .= '<h4>' . $GLOBALS['LANG']->getLL('wiz_newPages') . ':</h4>' . implode('', $lines) . '<br class="clearLeft" />' . '<input type="button" id="createNewFormFields" value="' . $GLOBALS['LANG']->getLL('wiz_newPages_addMoreLines') . '" />' . '<br /><br />';
-                               $theCode .= '<div class="checkbox"><label for="createInListEnd"><input type="checkbox" name="createInListEnd" id="createInListEnd" value="1" />' . $GLOBALS['LANG']->getLL('wiz_newPages_listEnd') . '</label></div>';
-                               $theCode .= '<div class="checkbox"><label for="hidePages"><input type="checkbox" name="hidePages" id="hidePages" value="1" />' . $GLOBALS['LANG']->getLL('wiz_newPages_hidePages') . '</label></div>';
-                               $theCode .= '<div class="checkbox"><label for="hidePagesInMenus"><input type="checkbox" name="hidePagesInMenus" id="hidePagesInMenus" value="1" />' . $GLOBALS['LANG']->getLL('wiz_newPages_hidePagesInMenus') . '</label></div>';
-                               $theCode .= '<input type="submit" name="create" value="' . $GLOBALS['LANG']->getLL('wiz_newPages_lCreate') . '" />&nbsp;<input type="reset" value="' . $GLOBALS['LANG']->getLL('wiz_newPages_lReset') . '" /><br />';
+                               $lines[] = '<table id="formFieldContainer" class="t3-table table-fit"><tbody id="formFieldContainerBody">' . implode(LF, $tableData) . '</tbody></table>';
+                               $theCode .= '<h4>' . $this->getLanguageService()->getLL('wiz_newPages') . ':</h4>' . implode('', $lines) . '<input type="button" id="createNewFormFields" value="' . $this->getLanguageService()->getLL('wiz_newPages_addMoreLines') . '" />';
+                               $theCode .= '<div class="checkbox"><label for="createInListEnd"><input type="checkbox" name="createInListEnd" id="createInListEnd" value="1" />' . $this->getLanguageService()->getLL('wiz_newPages_listEnd') . '</label></div>';
+                               $theCode .= '<div class="checkbox"><label for="hidePages"><input type="checkbox" name="hidePages" id="hidePages" value="1" />' . $this->getLanguageService()->getLL('wiz_newPages_hidePages') . '</label></div>';
+                               $theCode .= '<div class="checkbox"><label for="hidePagesInMenus"><input type="checkbox" name="hidePagesInMenus" id="hidePagesInMenus" value="1" />' . $this->getLanguageService()->getLL('wiz_newPages_hidePagesInMenus') . '</label></div>';
+                               $theCode .= '<input type="submit" name="create" value="' . $this->getLanguageService()->getLL('wiz_newPages_lCreate') . '" />&nbsp;<input type="reset" value="' . $this->getLanguageService()->getLL('wiz_newPages_lReset') . '" />';
 
                                /** @var \TYPO3\CMS\Core\Page\PageRenderer $pageRenderer */
                                $pageRenderer = $GLOBALS['TBE_TEMPLATE']->getPageRenderer();
@@ -144,17 +147,16 @@ class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Modul
 
                                $pageRenderer->addCssInlineBlock(__CLASS__, '
                                #formFieldContainer {float: left; margin: 0 0 10px 0;}
-                               .clearLeft {clear: left;}
                                #formFieldContainer label {width: 70px; display: inline-block;}
                                #formFieldContainer span {padding: 0 3px;}
                                ');
                        }
                } else {
-                       $theCode .= GeneralUtility::makeInstance(\TYPO3\CMS\Core\Messaging\FlashMessage::class, '', $GLOBALS['LANG']->getLL('wiz_newPages_errorMsg1'), \TYPO3\CMS\Core\Messaging\FlashMessage::ERROR)->render();
+                       $theCode .= GeneralUtility::makeInstance(FlashMessage::class, '', $this->getLanguageService()->getLL('wiz_newPages_errorMsg1'), FlashMessage::ERROR)->render();
                }
                // CSH
-               $theCode .= BackendUtility::cshItem('_MOD_web_func', 'tx_wizardcrpages', NULL, '<br />|');
-               $out = $this->pObj->doc->header($GLOBALS['LANG']->getLL('wiz_crMany'));
+               $theCode .= BackendUtility::cshItem('_MOD_web_func', 'tx_wizardcrpages', NULL, '<div class="t3-help">|</div>');
+               $out = $this->pObj->doc->header($this->getLanguageService()->getLL('wiz_crMany'));
                $out .= $this->pObj->doc->section('', $theCode, FALSE, TRUE);
                return $out;
        }
@@ -162,11 +164,10 @@ class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Modul
        /**
         * Return one line in the form
         *
-        * @param mixed $index An integer: the line counter for which to create the line. Use "#" to create an template for javascript (used by ExtJS)
+        * @param int|string $index An integer: the line counter for which to create the line. Use "#" to create an template for javascript (used by ExtJS)
         * @return string HTML code for one input line for one new page
         */
        protected function getFormLine($index) {
-               $backPath = $GLOBALS['BACK_PATH'];
                if (is_numeric($index)) {
                        $label = $index + 1;
                } else {
@@ -174,57 +175,95 @@ class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Modul
                        $index = '{0}';
                        $label = '{1}';
                }
-               $content = '<label for="page_new_' . $index . '"> ' . $GLOBALS['LANG']->getLL('wiz_newPages_page') . ' ' . $label;
+               $content = '<label for="page_new_' . $index . '"> ' . $this->getLanguageService()->getLL('wiz_newPages_page') . ' ' . $label;
                $content .= ':&nbsp;</label>';
                // Title
                $content .= '<input type="text" id="page_new_' . $index . '" name="data[pages][NEW' . $index . '][title]"' . $this->pObj->doc->formWidth(35) . ' />&nbsp';
-               // Lorem ipsum link, if available
-               $content .= is_object($this->loremIpsumObject) ? '<a href="#" onclick="' . htmlspecialchars($this->loremIpsumObject->getHeaderTitleJS(('document.forms[0][\'data[pages][NEW' . $index . '][title]\'].value'), 'title')) . '">' . $this->loremIpsumObject->getIcon('', $this->pObj->doc->backPath) . '</a>' : '';
                // type selector
-               $content .= '<span>' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_general.xlf:LGL.type') . '</span>';
-               $content .= '<select id="type-select"';
-               $content .= 'class="select icon-select" name="data[pages][NEW' . $index . '][doktype]" style="background: url(&quot;' . $backPath . 'sysext/t3skin/icons/gfx/i/pages.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); padding: 1px 1px 1px 24px;">';
-               // dokType
+               $content .= '<span>' . $this->getLanguageService()->sL('LLL:EXT:lang/locallang_general.xlf:LGL.type') . '</span>';
+               $content .= '<select class="select icon-select" name="data[pages][NEW' . $index . '][doktype]" style="background: url(&quot;' . $this->backPath . 'sysext/t3skin/icons/gfx/i/pages.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); padding: 1px 1px 1px 24px;">';
+               $content .= $this->typeSelectHtml;
+               $content .= '</select>';
+               return '<tr id="form-line-' . $index . '"><td>' . $content . '</td></tr>';
+       }
+
+       /**
+        * Get type selector
+        *
+        * @return string
+        */
+       protected function getTypeSelectHtml() {
+               $content = '';
+
+               // find all available doktypes for the current user
                $types = $GLOBALS['PAGES_TYPES'];
                unset($types['default']);
                $types = array_keys($types);
-               $types[] = 1;
-               if (!$GLOBALS['BE_USER']->isAdmin() && isset($GLOBALS['BE_USER']->groupData['pagetypes_select'])) {
-                       $types = GeneralUtility::trimExplode(',', $GLOBALS['BE_USER']->groupData['pagetypes_select'], TRUE);
+               $types[] = PageRepository::DOKTYPE_DEFAULT;
+               if (!$this->getBackendUser()->isAdmin() && isset($this->getBackendUser()->groupData['pagetypes_select'])) {
+                       $types = GeneralUtility::trimExplode(',', $this->getBackendUser()->groupData['pagetypes_select'], TRUE);
                }
                $removeItems = isset($this->pagesTsConfig['doktype.']['removeItems']) ? GeneralUtility::trimExplode(',', $this->pagesTsConfig['doktype.']['removeItems'], TRUE) : array();
-               $group = '';
-               if (in_array(1, $types) && !in_array(1, $removeItems)) {
-                       $group .= '<option style="background: url(&quot;' . $backPath . 'sysext/t3skin/icons/gfx/i/pages.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); height: 16px; padding-top: 2px; padding-left: 22px;" selected="selected" value="1">Standard</option>';
-               }
-               if (in_array(6, $types) && !in_array(6, $removeItems)) {
-                       $group .= '<option style="background: url(&quot;' . $backPath . 'gfx/i/be_users_section.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); height: 16px; padding-top: 2px; padding-left: 22px;" value="6">Backend User Section</option>';
-               }
-               $content .= $group ? '<optgroup class="c-divider" label="Page">' . $group . '</optgroup>' : '';
-               $group = '';
-               if (in_array(4, $types) && !in_array(4, $removeItems)) {
-                       $group .= '<option style="background: url(&quot;' . $backPath . 'sysext/t3skin/icons/gfx/i/pages_shortcut.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); height: 16px; padding-top: 2px; padding-left: 22px;" value="4">Shortcut</option>';
-               }
-               if (in_array(7, $types) && !in_array(7, $removeItems)) {
-                       $group .= '<option style="background: url(&quot;' . $backPath . 'gfx/i/pages_mountpoint.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); height: 16px; padding-top: 2px; padding-left: 22px;" value="7">Mount Point</option>';
-               }
-               if (in_array(3, $types) && !in_array(3, $removeItems)) {
-                       $group .= '<option style="background: url(&quot;' . $backPath . 'sysext/t3skin/icons/gfx/i/pages_link.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); height: 16px; padding-top: 2px; padding-left: 22px;" value="3">Link to external URL</option>';
-               }
-               $content .= $group ? '<optgroup class="c-divider" label="Link">' . $group . '</optgroup>' : '';
-               $group = '';
-               if (in_array(254, $types) && !in_array(254, $removeItems)) {
-                       $group .= '<option style="background: url(&quot;' . $backPath . 'sysext/t3skin/icons/gfx/i/sysf.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); height: 16px; padding-top: 2px; padding-left: 22px;" value="254">Folder</option>';
-               }
-               if (in_array(255, $types) && !in_array(255, $removeItems)) {
-                       $group .= '<option style="background: url(&quot;' . $backPath . 'sysext/t3skin/icons/gfx/i/recycler.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); height: 16px; padding-top: 2px; padding-left: 22px;" value="255">Recycler</option>';
+               $allowedDoktypes = array_diff($types, $removeItems);
+
+               // fetch all doktypes in the TCA
+               $availableDoktypes = $GLOBALS['TCA']['pages']['columns']['doktype']['config']['items'];
+
+               // sort by group and allowedDoktypes
+               $groupedData = array();
+               foreach ($availableDoktypes as $doktypeData) {
+                       // if it is a group, save the group label for the children underneath
+                       if ($doktypeData[1] == '--div--') {
+                               $groupLabel = $doktypeData[0];
+                       } else {
+                               if (in_array($doktypeData[1], $allowedDoktypes)) {
+                                       $groupedData[$groupLabel][] = $doktypeData;
+                               }
+                       }
                }
-               if (in_array(199, $types) && !in_array(199, $removeItems)) {
-                       $group .= '<option style="background: url(&quot;' . $backPath . 'sysext/t3skin/icons/gfx/i/spacer_icon.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); height: 16px; padding-top: 2px; padding-left: 22px;" value="199">Visual menu separator</option>';
+
+               // render the HTML
+               foreach ($groupedData as $groupLabel => $items) {
+                       $groupContent = '';
+                       foreach ($items as $item) {
+                               $label = $this->getLanguageService()->sL($item[0], TRUE);
+                               $value = $item[1];
+                               $icon = ($item[2] ? $this->getStyleAttributeWithIcon($item[2]) : '');
+                               $groupContent .= '<option ' . $icon . ' value="' . htmlspecialchars($value) . '">' . $label . '</option>';
+                       }
+                       $groupLabel = $this->getLanguageService()->sL($groupLabel, TRUE);
+                       $content .= '<optgroup class="c-divider" label="' . $groupLabel . '">' . $groupContent . '</optgroup>';
                }
-               $content .= $group ? '<optgroup class="c-divider" label="Special">' . $group . '</optgroup>' : '';
-               $content .= '</select>';
-               return '<tr id="form-line-' . $index . '"><td>' . $content . '</td></tr>';
+
+               return $content;
        }
 
+       /**
+        * Returns the style attribute for a select element with the icon in it
+        *
+        * @param string $src
+        * @return string
+        */
+       protected function getStyleAttributeWithIcon($src) {
+               $icon = \TYPO3\CMS\Backend\Utility\IconUtility::skinImg($this->backPath, 'gfx/' . $src, '', 1);
+               return 'style="background: #fff url(&quot;' . $icon. '&quot;) 0% 50% no-repeat; height: 16px; padding-top: 2px; padding-left: 22px;"';
+       }
+
+       /**
+        * Returns LanguageService
+        *
+        * @return \TYPO3\CMS\Lang\LanguageService
+        */
+       protected function getLanguageService() {
+               return $GLOBALS['LANG'];
+       }
+
+       /**
+        * Returns the current BE user.
+        *
+        * @return \TYPO3\CMS\Core\Authentication\BackendUserAuthentication
+        */
+       protected function getBackendUser() {
+               return $GLOBALS['BE_USER'];
+       }
 }
index 581b8d2..003ddef 100644 (file)
  * The TYPO3 project - inspiring people to share!
  */
 
+/**
+ * JavaScript functions for creating multiple pages
+ */
 define('TYPO3/CMS/WizardCrpages/WizardCreatePages', ['jquery'], function($) {
 
-       var WizardCreatePages = {};
-
-       var lineCounter = 9;
+       var WizardCreatePages = {
+               lineCounter: 9,
+               containerSelector: '#formFieldContainerBody',
+               addMoreFieldsButtonSelector: '#createNewFormFields'
+       };
 
        WizardCreatePages.createNewFormFields = function() {
                for (i = 0; i < 5; i++) {
-                       var label = lineCounter + i + 1;
-                       var line = String.format(tpl, (lineCounter + i), label);
-                       $(line).appendTo('#formFieldContainerBody');
+                       var label = this.lineCounter + i + 1;
+                       var line = String.format(tpl, (this.lineCounter + i), label);
+                       $(line).appendTo(this.containerSelector);
                }
-               lineCounter += 5;
+               this.lineCounter += 5;
        };
 
-       WizardCreatePages.actOnTypeSelectChange = function(element) {
-               var selectedElement = element.find(':selected');
-               element.css('background-image', selectedElement.css('background-image'));
+       WizardCreatePages.actOnTypeSelectChange = function($selectElement) {
+               var $optionElement = $selectElement.find(':selected');
+               $selectElement.css('background-image', $optionElement.css('background-image'));
        };
 
        /**
         * Register listeners
         */
        WizardCreatePages.initializeEvents = function() {
-               $('#createNewFormFields').on('click', function() {
+               $(this.addMoreFieldsButtonSelector).on('click', function() {
                        WizardCreatePages.createNewFormFields();
                });
 
-               $('#type-select').change(function() {
+               $(document).on('change', '.icon-select', function() {
                        WizardCreatePages.actOnTypeSelectChange($(this));
                });
        };
@@ -52,4 +57,4 @@ define('TYPO3/CMS/WizardCrpages/WizardCreatePages', ['jquery'], function($) {
                TYPO3.WizardCreatePages = WizardCreatePages;
                return WizardCreatePages;
        }();
-});
\ No newline at end of file
+});