Add checkbox TV input option to display inputs as switches/toggles (#16631)

### Why is it needed?
For some TVs, the switch style may be more appropriate to the content
being collected. This update allows users to choose how to display their
checkbox TVs.

### How to test
Create a new checkbox TV (or use an existing one) and verify that
changing the "Display as Switch" option has the expected effect when the
TV is displayed in the Resource editing form.

### Related issue(s)/PR(s)
Alternate solution to PR #16623

Author: smg6511

core/lexicon/en/tv_widget.inc.php

@@ -19,6 +19,8 @@
 $_lang['checkbox'] = 'Check Box';
 $_lang['checkbox_columns'] = 'Columns';
 $_lang['checkbox_columns_desc'] = 'The number of columns the checkboxes are displayed in.';
+$_lang['checkbox_display_switch'] = 'Display as Switch';
+$_lang['checkbox_display_switch_desc'] = 'When set to “Yes,” this TV’s inputs will be rendered in the Resource editing form as switches (toggles) instead of checked boxes. (Default: “No”)';
 $_lang['class'] = 'Class';
 $_lang['classes'] = 'Class(es)';
 $_lang['combo_allowaddnewdata'] = 'Allow Add New Items';

core/src/Revolution/Processors/Element/TemplateVar/Configs/mgr/inputproperties/checkbox.php

@@ -15,27 +15,29 @@
 
 # Set values
 $columns = !empty($params['columns']) ? $params['columns'] : 1 ;
+$displayAsSwitch = $params['displayAsSwitch'] === 'true' || $params['displayAsSwitch'] == 1 ? 'true' : 'false' ;
 
 # Set help descriptions
 $descKeys = [
     'required_desc',
-    'checkbox_columns_desc'
+    'checkbox_columns_desc',
+    'checkbox_display_switch_desc'
 ];
 $this->setHelpContent($descKeys, $expandHelp);
 
 $optsJS = <<<OPTSJS
 [
     {
         defaults: {
+            xtype: 'panel',
             layout: 'form',
+            labelAlign: 'top',
+            autoHeight: true,
             labelSeparator: ''
         },
         items: [
             {
-                xtype: 'panel',
-                columnWidth: 1,
-                autoHeight: true,
-                labelAlign: 'top',
+                columnWidth: 0.34,
                 defaults: {
                     anchor: '100%',
                     msgTarget: 'under'
@@ -53,7 +55,36 @@
                     forId: 'inopt_allowBlank{$tvId}',
                     html: {$this->helpContent['required_desc']},
                     cls: 'desc-under'
+                }]
+            },
+            {
+                columnWidth: 0.33,
+                defaults: {
+                    anchor: '100%',
+                    msgTarget: 'under'
+                },
+                items: [{
+                    xtype: 'combo-boolean',
+                    fieldLabel: _('checkbox_display_switch'),
+                    description: {$this->helpContent['eh_checkbox_display_switch_desc']},
+                    name: 'inopt_displayAsSwitch',
+                    hiddenName: 'inopt_displayAsSwitch',
+                    id: 'inopt_displayAsSwitch{$tvId}',
+                    value: {$displayAsSwitch}
                 },{
+                    xtype: '{$helpXtype}',
+                    forId: 'inopt_displayAsSwitch{$tvId}',
+                    html: {$this->helpContent['checkbox_display_switch_desc']},
+                    cls: 'desc-under'
+                }]
+            },
+            {
+                columnWidth: 0.33,
+                defaults: {
+                    anchor: '100%',
+                    msgTarget: 'under'
+                },
+                items: [{
                     xtype: 'numberfield',
                     fieldLabel: _('checkbox_columns'),
                     description: {$this->helpContent['eh_checkbox_columns_desc']},

manager/templates/default/element/tv/renders/input/checkbox.tpl

@@ -6,25 +6,26 @@
 Ext.onReady(function() {
     const fld = MODx.load({
     {/literal}
-        xtype: 'checkboxgroup'
-        ,id: 'tv{$tv->id}'
-        ,itemId: 'tv{$tv->id}'
-        ,vertical: true
-        ,columns: {if $params.columns|default}{$params.columns|default}{else}1{/if}
-        ,renderTo: 'tv{$tv->id}-cb'
-        ,name: 'tv-{$tv->id}'
-        ,width: '99%'
-        ,allowBlank: {if $params.allowBlank == 1 || $params.allowBlank == 'true'}true{else}false{/if}
-        ,hideMode: 'offsets'
-        ,msgTarget: 'under'
-        ,items: [{foreach from=$opts item=item key=k name=cbs}
+        xtype: 'checkboxgroup',
+        id: 'tv{$tv->id}',
+        itemId: 'tv{$tv->id}',
+        vertical: true,
+        columns: {if $params.columns|default}{$params.columns|default}{else}1{/if},
+        renderTo: 'tv{$tv->id}-cb',
+        name: 'tv-{$tv->id}',
+        width: '99%',
+        allowBlank: {if $params.allowBlank == 1 || $params.allowBlank == 'true'}true{else}false{/if},
+        hideMode: 'offsets',
+        msgTarget: 'under',
+        items: [{foreach from=$opts item=item key=k name=cbs}
         {literal}{{/literal}
-            name: 'tv{$tv->id}[]'
-            ,id: 'tv{$tv->id}-{$k}'
-            ,boxLabel: '{$item.text|escape:"javascript"}'
-            ,checked: {if $item.checked}true{else}false{/if}
-            ,inputValue: {$item.value}
-            ,value: {$item.value}
+            name: 'tv{$tv->id}[]',
+            id: 'tv{$tv->id}-{$k}',
+            {if $params.displayAsSwitch == 1 || $params.displayAsSwitch == 'true'}ctCls: 'display-switch',{/if}
+            boxLabel: '{$item.text|escape:"javascript"}',
+            checked: {if $item.checked}true{else}false{/if},
+            inputValue: {$item.value},
+            value: {$item.value}
         {literal}}{/literal}{if NOT $smarty.foreach.cbs.last},{/if}
         {/foreach}]
     {literal}}{/literal});