README

justtextwidgets

向 Contao DCA 添加带有文本值和说明文本的隐藏字段的可能。

为在 MultiColumWizard (MCW) 中使用开发了各种输入类型。

实现示例可以在项目 MetaModels 中找到。

DCA 中可以使用的四个不同的 inputType

• justtext
• justsmalltext
• justtextoption
• justexplanation
• justlongexplanation

justtext

justtext 用于 MCW，创建一个标签、文本和隐藏字段 - 标签和文本可以通过 MCW 参数 hideHead 和 hideBody 隐藏。在 MetaModels 中，这用于“输入/输出组合”表。

$GLOBALS['TL_DCA']['tl_mytable']['fields']['justtext'] = [
    'label'     => null,
    'exclude'   => true,
    'inputType' => 'justtext',
    'eval'      => ['tl_class' => 'cbx w50']
];

justsmalltext

justsmalltext 输出一个简单的文本和一个隐藏字段。

$GLOBALS['TL_DCA']['tl_mytable']['fields']['justsmalltext'] = [
    'label'     => &$GLOBALS['TL_LANG']['tl_mytable']['justsmalltext'],
    'exclude'   => true,
    'inputType' => 'justsmalltext',
    'eval'      => ['tl_class' => 'cbx w50']
];

justtextoption

使用 justtextoption，例如可以在 MCW 的每一列中为每一行输出文本。在 MetaModels 中，这用于“跳转到页面”的渲染设置。

$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

使用 justexplanation，可以通过参数 content 和选项 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

使用 justlongexplanation，可以通过参数 html 输出一个复杂的 HTML 块，以在输入掩码中显示不同的内容。

$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>
'
    ],
];