Commit a51a5d66 authored by Frank Nägler's avatar Frank Nägler Committed by Wouter Wolters
Browse files

[BUGFIX] Cleanup JavaScript for ColorPicker

This patch introduce an AMD module for the colorpicker and make use of
t3js- prefixed class for initialize the colorpicker.
Also the initialize is not centralized in the module.

Resolves: #75861
Releases: master
Change-Id: I71aea126d91482f8d37f9fa3e0be2bce662aee07
Reviewed-on: https://review.typo3.org/47848


Reviewed-by: Frans Saris's avatarFrans Saris <franssaris@gmail.com>
Tested-by: Frans Saris's avatarFrans Saris <franssaris@gmail.com>
Reviewed-by: Wouter Wolters's avatarWouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters's avatarWouter Wolters <typo3@wouterwolters.nl>
parent cbeddfd1
......@@ -95,9 +95,15 @@ class InputColorPickerElement extends AbstractFormElement
$classes[] = 'form-control';
$classes[] = 'hasDefaultValue';
$classes[] = 't3js-clearable';
$classes[] = 't3js-color-picker';
$classes[] = 'formengine-colorpickerelement';
$attributes['class'] = implode(' ', $classes);
// Load needed js library
$resultArray['requireJsModules'][] = array(
'TYPO3/CMS/Backend/ColorPicker' => 'function(ColorPicker){ColorPicker.initialize()}'
);
// calculate attributes
$attributes['data-formengine-validation-rules'] = $this->getValidationDataAsJsonString($config);
$attributes['data-formengine-input-params'] = json_encode($paramsList);
......
/*
* This file is part of the TYPO3 CMS project.
*
* It is free software; you can redistribute it and/or modify it under
* the terms of the GNU General Public License, either version 2
* of the License, or any later version.
*
* For the full copyright and license information, please read the
* LICENSE.txt file that was distributed with this source code.
*
* The TYPO3 project - inspiring people to share!
*/
/**
* Module: TYPO3/CMS/Backend/ColorPicker
* contains all logic for the color picker used in FormEngine
*/
define(['jquery', 'TYPO3/CMS/Core/Contrib/jquery.minicolors'], function($) {
/**
* @type {{selector: string}}
* @exports TYPO3/CMS/Backend/ColorPicker
*/
var ColorPicker = {
selector: '.t3js-color-picker'
};
/**
* Initialize ColorPicker elements
*/
ColorPicker.initialize = function() {
$(function () {
$(ColorPicker.selector).minicolors({
theme: 'bootstrap',
format: 'hex',
position: 'bottom left'
});
});
};
return ColorPicker;
});
......@@ -894,16 +894,6 @@ define(['jquery',
DateTimePicker.initialize();
});
if ($('.formengine-colorpickerelement').length) {
require(['TYPO3/CMS/Core/Contrib/jquery.minicolors'], function(minicolor) {
$('.formengine-colorpickerelement').minicolors({
theme: 'bootstrap',
format: 'hex',
position: 'bottom left'
});
});
}
FormEngine.convertTextareasResizable();
FormEngine.convertTextareasEnableTab();
};
......
......@@ -47,7 +47,8 @@
var $input = $(this);
// make sure the input field is not used twice for a clearable
if (!$input.data('clearable')) {
// or the input field is a colorpicker, because it breaks the colorpicker.
if (!$input.data('clearable') && !$input.hasClass('t3js-color-picker')) {
$input.data('clearable', 'loaded');
// Wrap it with a div and add a span that is the trigger for
......
......@@ -1210,18 +1210,11 @@ class ExtendedTemplateService extends TemplateService
break;
case 'color':
$p_field = '
<input class="form-control formengine-colorpickerelement" type="text" id="input-' . $idName . '" rel="' . $idName .
<input class="form-control formengine-colorpickerelement t3js-color-picker" type="text" id="input-' . $idName . '" rel="' . $idName .
'" name="' . $fN . '" value="' . $fV . '"' . $this->getDocumentTemplate()->formWidth(7) . ' onChange="uFormUrl(' . $aname . ')" />';
if (empty($this->inlineJavaScript[$typeDat['type']])) {
$this->inlineJavaScript[$typeDat['type']] = '
require([\'TYPO3/CMS/Core/Contrib/jquery.minicolors\'], function() {
TYPO3.jQuery(\'.formengine-colorpickerelement\').minicolors({
theme: \'bootstrap\',
format: \'hex\',
align: \'bottom left\'
});
});';
$this->inlineJavaScript[$typeDat['type']] = 'require([\'TYPO3/CMS/Backend/ColorPicker\'], function(ColorPicker){ColorPicker.initialize()});';
}
break;
case 'wrap':
......
......@@ -103,16 +103,10 @@ class TypoScriptConstantsViewHelper extends \TYPO3\CMS\Fluid\Core\ViewHelper\Abs
$output = '
<div class="form-wizards-element">
<input class="form-control t3js-color-input formengine-colorpickerelement" type="text"
<input class="form-control t3js-color-input formengine-colorpickerelement t3js-color-picker" type="text"
name="' . htmlspecialchars($elementName) . '" value="' . $this->tag->getAttribute('value') . '"/>
<script type="text/javascript">
require([\'TYPO3/CMS/Core/Contrib/jquery.minicolors\'], function () {
$(\'.formengine-colorpickerelement\').minicolors({
theme: \'bootstrap\',
format: \'hex\',
position: \'bottom left\'
});
});
require([\'TYPO3/CMS/Backend/ColorPicker\'], function(ColorPicker){ColorPicker.initialize()});
</script>
</div>';
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment