Skip to content

Commit

Permalink
[FEATURE] Introduce dedicated gridcolumn element
Browse files Browse the repository at this point in the history 
Relates: #1304
  • Loading branch information
@benjaminkott
benjaminkott committed Jun 14, 2023
1 parent 4cfef65 commit 9132b04
Show file tree
Hide file tree
Showing 8 changed files with 271 additions and 29 deletions.
63 changes: 63 additions & 0 deletions Configuration/Form/FormElements/GridColumn.yaml
View file
@@ -0,0 +1,63 @@
prototypes:
standard:
formElementsDefinition:
GridColumn:
formEditor:
editors:
100:
identifier: header
templateName: Inspector-FormElementHeaderEditor
200:
identifier: label
templateName: Inspector-TextEditor
label: formEditor.elements.GridColumn.editor.label.label
propertyPath: label
700:
identifier: gridColumnViewPortConfiguration
templateName: Inspector-GridColumnViewPortConfigurationEditor
label: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.label
configurationOptions:
viewPorts:
10:
viewPortIdentifier: xs
label: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.xs.label
20:
viewPortIdentifier: sm
label: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.sm.label
30:
viewPortIdentifier: md
label: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.md.label
40:
viewPortIdentifier: lg
label: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.lg.label
50:
viewPortIdentifier: xl
label: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.xl.label
60:
viewPortIdentifier: xxl
label: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.xxl.label
numbersOfColumnsToUse:
label: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.numbersOfColumnsToUse.label
propertyPath: 'properties.gridColumnClassAutoConfiguration.viewPorts.{@viewPortIdentifier}.numbersOfColumnsToUse'
fieldExplanationText: formEditor.elements.FormElement.editor.gridColumnViewPortConfiguration.numbersOfColumnsToUse.fieldExplanationText
9999:
identifier: removeButton
templateName: Inspector-RemoveElementEditor
predefinedDefaults: { }
label: formEditor.elements.GridColumn.label
group: container
groupSorting: 400
_isCompositeFormElement: true
iconIdentifier: form-bootstrappackage-gridcolumn
implementationClassName: TYPO3\CMS\Form\Domain\Model\FormElements\Section
renderingOptions:
_isCompositeFormElement: true
_isSection: true
formEditor:
translationFiles:
1686735592: 'EXT:bootstrap_package/Resources/Private/Language/FormGridColumn.xlf'
dynamicRequireJsModules:
additionalViewModelModules:
1686735592: 'TYPO3/CMS/BootstrapPackage/Backend/FormEditor/GridColumnViewModel'
formEditorPartials:
FormElement-GridColumn: Stage/Fieldset
53 changes: 28 additions & 25 deletions Configuration/Form/Setup.yaml
View file
@@ -1,26 +1,29 @@
imports:
- { resource: './FormElements/GridColumn.yaml' }

TYPO3:
CMS:
Form:
persistenceManager:
allowedExtensionPaths:
110: EXT:bootstrap_package/Resources/Private/Forms/
prototypes:
standard:
formElementsDefinition:
Form:
renderingOptions:
templateVariant: version2
translation:
translationFiles:
110: 'EXT:bootstrap_package/Resources/Private/Language/locallang.xlf'
layoutRootPaths:
20: 'EXT:bootstrap_package/Resources/Private/Layouts/Form/'
templateRootPaths:
20: 'EXT:bootstrap_package/Resources/Private/Templates/Form/'
partialRootPaths:
20: 'EXT:bootstrap_package/Resources/Private/Partials/Form/'
ImageUpload:
properties:
imageLinkMaxWidth: 1200
imageMaxWidth: 200
imageMaxHeight: 200
CMS:
Form:
persistenceManager:
allowedExtensionPaths:
110: EXT:bootstrap_package/Resources/Private/Forms/
prototypes:
standard:
formElementsDefinition:
Form:
renderingOptions:
templateVariant: version2
translation:
translationFiles:
110: 'EXT:bootstrap_package/Resources/Private/Language/locallang.xlf'
layoutRootPaths:
20: 'EXT:bootstrap_package/Resources/Private/Layouts/Form/'
templateRootPaths:
20: 'EXT:bootstrap_package/Resources/Private/Templates/Form/'
partialRootPaths:
20: 'EXT:bootstrap_package/Resources/Private/Partials/Form/'
ImageUpload:
properties:
imageLinkMaxWidth: 1200
imageMaxWidth: 200
imageMaxHeight: 200
4 changes: 4 additions & 0 deletions Configuration/Icons.php
View file
Expand Up @@ -124,4 +124,8 @@
'provider' => \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
'source' => 'EXT:bootstrap_package/Resources/Public/Icons/ContentElements/timeline-item.svg'
],
'form-bootstrappackage-gridcolumn' => [
'provider' => \TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
'source' => 'EXT:bootstrap_package/Resources/Public/Icons/FormElements/gridcolumn.svg'
],
];
8 changes: 4 additions & 4 deletions Resources/Private/Forms/Contact.form.yaml
View file
Expand Up @@ -37,8 +37,8 @@ renderables:
label: ''
renderables:
-
type: Fieldset
identifier: fieldset-left
type: GridColumn
identifier: gridcolumn-left
label: ''
properties:
gridColumnClassAutoConfiguration:
Expand Down Expand Up @@ -84,8 +84,8 @@ renderables:
-
identifier: EmailAddress
-
type: Fieldset
identifier: fieldset-right
type: GridColumn
identifier: gridcolumn-right
label: ''
properties:
gridColumnClassAutoConfiguration:
Expand Down
17 changes: 17 additions & 0 deletions Resources/Private/Language/FormGridColumn.xlf
View file
@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<xliff version="1.0">
<file source-language="en" datatype="plaintext" original="messages" date="2013-09-19T09:11:39Z"
product-name="bootstrap_package">
<header/>
<body>

<trans-unit id="formEditor.elements.GridColumn.label">
<source>Grid: Column</source>
</trans-unit>
<trans-unit id="formEditor.elements.GridColumn.editor.label.label">
<source>Name (not visible within frontend)</source>
</trans-unit>

</body>
</file>
</xliff>
7 changes: 7 additions & 0 deletions Resources/Private/Partials/Form/GridColumn.html
View file
@@ -0,0 +1,7 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<formvh:renderRenderable renderable="{element}">
<f:for each="{element.elements}" as="element">
<f:render partial="{element.templateName}" arguments="{element: element}" />
</f:for>
</formvh:renderRenderable>
</html>
18 changes: 18 additions & 0 deletions Resources/Public/Icons/FormElements/gridcolumn.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
130 changes: 130 additions & 0 deletions Resources/Public/JavaScript/Backend/FormEditor/GridColumnViewModel.js
View file
@@ -0,0 +1,130 @@
define([
'jquery',
'TYPO3/CMS/Form/Backend/FormEditor/Helper'
], function ($, Helper) {
'use strict';

return (function ($, Helper) {

/**
* @private
*
* @var object
*/
var _formEditorApp = null;

/**
* @private
*
* @return object
*/
function getFormEditorApp() {
return _formEditorApp;
};

/**
* @private
*
* @return object
*/
function getPublisherSubscriber() {
return getFormEditorApp().getPublisherSubscriber();
};

/**
* @private
*
* @return object
*/
function getUtility() {
return getFormEditorApp().getUtility();
};

/**
* @private
*
* @param object
* @return object
*/
function getHelper() {
return Helper;
};

/**
* @private
*
* @return object
*/
function getCurrentlySelectedFormElement() {
return getFormEditorApp().getCurrentlySelectedFormElement();
};

/**
* @private
*
* @param mixed test
* @param string message
* @param int messageCode
* @return void
*/
function assert(test, message, messageCode) {
return getFormEditorApp().assert(test, message, messageCode);
};

/**
* @private
*
* @return void
* @throws 1491643380
*/
function _helperSetup() {
assert('function' === $.type(Helper.bootstrap),
'The view model helper does not implement the method "bootstrap"',
1491643380
);
Helper.bootstrap(getFormEditorApp());
};

/**
* @private
*
* @return void
*/
function _subscribeEvents() {
/**
* @private
*
* @param string
* @param array
* args[0] = formElement
* args[1] = template
* @return void
*/
getPublisherSubscriber().subscribe('view/stage/abstract/render/template/perform', function (topic, args) {
if (args[0].get('type') === 'GridColumn') {
getFormEditorApp().getViewModel().getStage().renderSimpleTemplateWithValidators(args[0], args[1]);
}
});
};

/**
* @public
*
* @param object formEditorApp
* @return void
*/
function bootstrap(formEditorApp) {
_formEditorApp = formEditorApp;
_helperSetup();
_subscribeEvents();
};

/**
* Publish the public methods.
* Implements the "Revealing Module Pattern".
*/
return {
bootstrap: bootstrap
};
})($, Helper);
});

0 comments on commit 9132b04

Please sign in to comment.