discordier / justtextwidgets
Hidden fields with text values and explanation texts
Installs: 51 744
Dependents: 5
Suggesters: 0
Security: 0
Stars: 1
Watchers: 3
Forks: 3
Open Issues: 1
Type:contao-bundle
Requires
- php: ^8.2
- contao/core-bundle: ^5.3
- symfony/http-kernel: ^6.4
Requires (Dev)
- contao/manager-plugin: ^2.13
- phpcq/runner-bootstrap: ^1.0@dev
This package is auto-updated.
Last update: 2024-11-25 12:37:11 UTC
README
justtextwidgets
Possibility to add hidden fields with text values and explanation texts to the Contao DCA.
Various input types have been developed for use in the MultiColumWizard (MCW).
Examples for the implementation can be found in the project MetaModels.
There are four different inputType
which can be used in DCA:
- justtext
- justsmalltext
- justtextoption
- justexplanation
- justlongexplanation
justtext
With justtext
is intended for use in MCW and creates a label, text and hidden field -
label and text can be hidden with the MCW parameters hideHead
and hideBody
.
In MetaModels this is used in the table of "input/output combinations".
$GLOBALS['TL_DCA']['tl_mytable']['fields']['justtext'] = [
'label' => null,
'exclude' => true,
'inputType' => 'justtext',
'eval' => ['tl_class' => 'cbx w50']
];
justsmalltext
justsmalltext
outputs a simple text and a hidden field.
$GLOBALS['TL_DCA']['tl_mytable']['fields']['justsmalltext'] = [
'label' => &$GLOBALS['TL_LANG']['tl_mytable']['justsmalltext'],
'exclude' => true,
'inputType' => 'justsmalltext',
'eval' => ['tl_class' => 'cbx w50']
];
justtextoption
With justtextoption
it is e.g. possible to output a text for each line in the MCW for each column.
In MetaModels this is used in the rendersettings for languages at "JumpTo page".
$GLOBALS['TL_DCA']['tl_mytable']['fields']['justtextoption'] = [
'label' => &$GLOBALS['TL_LANG']['tl_mytable']['justtextoption'],
'exclude' => true,
'inputType' => 'justtextoption',
'eval' => [
'tl_class' => 'cbx w50',
'options' => ['foo' => ['value' => 'foovalue'], 'bar' => ['value' => 'barvalue']],
'default' => 'barvalue'
]
];
justexplanation
With justexplanation
a simple text can be output via the parameter content
and the option xlabel
.
$GLOBALS['TL_DCA']['tl_mytable']['fields']['justexplanation'] = [
'label' => &$GLOBALS['TL_LANG']['tl_mytable']['justexplanation'],
'exclude' => true,
'xlabel' => [
['tl_myothertable', 'myWizard']
],
'inputType' => 'justexplanation',
'eval' => ['tl_class' => 'cbx w50', 'content' => 'Hello World!']
];
justlongexplanation
With justlongexplanation
a complex html block can be output via the parameter html
to show different content in
your input mask.
$GLOBALS['TL_DCA']['tl_mytable']['fields']['justlongexplanation'] = [
'label' => &$GLOBALS['TL_LANG']['tl_mytable']['justlongexplanation'],
'exclude' => true,
'inputType' => 'justlongexplanation',
'eval' => [
'tl_class' => 'clr',
'html' => '
<div style="background-color: #cce4ee; margin-top: 1em">
<p style="padding: 2em 2em 0 2em;"><span style="font-weight: bold; display: block;">This is text, it contains <a href="https://w3c.org">HTML</a> in "just long explanation".</span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
<style>
#chart_div {
min-height: 40px;
}
.spinner {
width: 40px;
height: 40px;
margin: 30px;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
0% { -webkit-transform: scale(0) }
100% {
-webkit-transform: scale(1.0);
opacity: 0;
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0);
} 100% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
opacity: 0;
}
}
</style>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load(\'current\', {\'packages\':[\'corechart\']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn(\'string\', \'Topping\');
data.addColumn(\'number\', \'Slices\');
data.addRows([
[\'Mushrooms\', 3],
[\'Onions\', 1],
[\'Olives\', 1],
[\'Zucchini\', 1],
[\'Pepperoni\', 2]
]);
// Set chart options
var options = {\'title\':\'How Much Pizza I Ate Last Night\',
\'width\':400,
\'height\':300,
\'backgroundColor\': \'transparent\'
};
// Instantiate and draw our chart, passing in some options.
var target = document.getElementById(\'chart_div\');
var chart = new google.visualization.PieChart(target);
target.removeClass(\'spinner\');
chart.draw(data, options);
}
</script>
<!--Div that will hold the pie chart-->
<div id="chart_div" class="spinner"></div>
</div>
'
],
];