__('Checkboxes', __FILE__), // Module Title 'summary' => __('Multiple checkbox toggles', __FILE__), // Module Summary 'version' => 108, 'permanent' => true, ); } /** * Init * */ public function init() { $this->set('table', false); $this->set('thead', ''); $this->set('optionColumns', 0); $this->set('optionWidth', ''); parent::init(); $this->set('size', null); // cancel 'size' attribute used by select multiple } /** * Render * * @return string * */ public function ___render() { $sanitizer = $this->wire()->sanitizer; $this->checkDefaultValue(); $out = ''; $table = null; $columns = (int) $this->optionColumns; $inline = $columns === 1 || $columns > 10; $liAttr = ''; $ulClass = ''; $inputClass = $sanitizer->entities($this->attr('class')); $entityEncode = $this->getSetting('entityEncodeText') === false ? false : true; $options = $this->getOptions(); $optionWidth = $this->optionWidth ? $this->getOptionWidthCSS($this->optionWidth, $options) : ''; if($this->table) { /** @var MarkupAdminDataTable $table */ $table = $this->modules->get("MarkupAdminDataTable"); $table->setEncodeEntities(false); $table->setSortable(false); $table->addClass('pw-no-select'); if($this->thead) $table->headerRow(explode('|', htmlspecialchars($this->thead, ENT_QUOTES, 'UTF-8'))); } else if($optionWidth) { $liAttr = " style='width:$optionWidth'"; $ulClass = 'InputfieldCheckboxesWidth'; } else if($columns) { if($inline) { $ulClass = 'InputfieldCheckboxesFloated'; } else { $liWidth = round(100 / $columns)-1; // 1% padding-right added from stylesheet $liAttr = " style='width: {$liWidth}%;'"; $ulClass = 'InputfieldCheckboxesColumns'; } $classes = InputfieldWrapper::getClasses(); $ulClass .= " " . $classes['list_clearfix']; } else { $ulClass = 'InputfieldCheckboxesStacked'; } if(!$table) $out = "

"; foreach($options as $key => $value) { $checked = ''; if($this->isOptionSelected($key)) $checked = " checked='checked'"; $id = $sanitizer->name($key); if(!strlen(trim($id, '_'))) $id = trim(base64_encode($key), '=/.'); $id = $this->id . '_' . $id; $attrs = $this->getOptionAttributes($key); $disabled = empty($attrs['disabled']) ? '' : " disabled='disabled'"; unset($attrs['checked'], $attrs['selected'], $attrs['disabled']); $attrs = $this->getOptionAttributesString($attrs); if($attrs) $attrs = ' ' . $attrs; if($entityEncode) $value = $this->entityEncode($value, true); $input = "" . ""; if($table) { $value = explode("|", nl2br($value)); $value[0] = "$input$value[0]"; $table->row($value); } else { $out .= "$input$value"; } } if($table) $out .= $table->render(); else $out .= "

"; return $out; } /** * Get CSS width and unit for option width * * @param string|int $optionWidth * @param array $options * @return string * */ public function getOptionWidthCSS($optionWidth, array &$options) { if(!$optionWidth) return ''; if(!preg_match('/^(\d+)\s*([a-z]{1,4}|%|);?$/i', $optionWidth, $matches)) return ''; $unit = empty($matches[2]) ? 'px' : $matches[2]; $optionWidth = $matches[1] . $unit; if($optionWidth === '1px') { // 1 or 1px means "calculate at runtime" $optionWidth = 10; foreach($options as $label) { if(strlen($label) > $optionWidth) $optionWidth = strlen($label); } if($optionWidth > 20) { // use without adjustment } else if($optionWidth > 10) { $optionWidth += 2; } else { $optionWidth = 10; // minimum option width } $optionWidth .= 'ch'; } return $optionWidth; } public function set($key, $value) { if($key == 'optionColumns') { $value = (int) $value; if($value < 0) $value = 0; if($value > 10) $value = 10; } return parent::set($key, $value); } public function ___getConfigInputfields() { $modules = $this->wire()->modules; $inputfields = parent::___getConfigInputfields(); /** @var InputfieldInteger $f */ $f = $modules->get('InputfieldText'); $f->label = $this->_('Option column width'); $f->description = $this->_('Use this setting to have options display in fixed width columns that float or collapse according to viewport width.') . ' ' . $this->_('Enter a CSS width number and unit such as `100px` or `10em`, for example. If no unit is specified, `px` (pixels) is assumed.') . ' ' . $this->_('Enter the number `1` to automatically calculate an appropriate width at runtime.'); $f->notes = $this->_('For best appearance, enter a width that can fit the longest option without word wrapping, or enter `1` to for auto width.'); $f->attr('name', 'optionWidth'); $f->attr('value', $this->optionWidth); if(!$this->optionWidth) $f->collapsed = Inputfield::collapsedYes; $inputfields->add($f); /** @var InputfieldInteger $f */ $f = $modules->get('InputfieldInteger'); $f->label = $this->_('Option column quantity'); $f->description = $this->_('If you want the options to display in columns, enter the number of columns you want to use (up to 10).') . ' ' . $this->_('To display options inline side-by-side enter the number `1`.'); $f->notes = $this->_('Note that the “option column width” setting is preferable for responsive behavior.'); $f->attr('name', 'optionColumns'); $f->attr('value', (int) $this->optionColumns); if(!$this->optionColumns) $f->collapsed = Inputfield::collapsedYes; $inputfields->add($f); return $inputfields; } }