protected function render() { $prop = $this->props; $isMultiple = $prop->multiple; $assets = $this->context->getAssetsService(); $assets->addInlineScript("selenia.ext.select.props['{$prop->id}']=" . JavascriptCodeGen::makeOptions(['autoOpenLinked' => $prop->autoOpenLinked, 'dataUrl' => $prop->dataUrl, 'emptyLabel' => $prop->emptyLabel, 'emptySelection' => $prop->emptySelection, 'id' => $prop->id, 'labelField' => $prop->labelField, 'linkedSelector' => $prop->linkedSelector, 'linkedUrl' => $prop->linkedUrl, 'multiple' => $prop->multiple, 'noResultsText' => $prop->noResultsText, 'valueField' => $prop->valueField, 'value' => $prop->value])); // If required, add auto-add tag behavior to this Chosen. if ($prop->autoTag && $prop->multiple) { $assets->addInlineScript("\n\$(function () {\n \$ ('#{$prop->id}+.chosen-container .chosen-choices input').on ('keyup', function (ev) { console.log(ev);\n var v = \$ (this).val ();\n if (ev.keyCode == 13 && v) {\n var tags = \$ ('#{$prop->id} option').map (function (i, e) { return \$ (e).val () });\n var found = false, l = v.length;\n tags.each (function (i, x) {\n if (x.substr (0, l) == v) {\n found = true;\n return false\n }\n });\n if (found) return;\n \$ ('#{$prop->id}').append (\"<option>\" + v + \"</option>\");\n \$ ('#{$prop->id}').trigger ('chosen:updated');\n ev.preventDefault ();\n var e = jQuery.Event (\"keyup\");\n e.which = 13;\n \$ ('#{$prop->id}+.chosen-container .chosen-choices input').val (v).trigger ('keyup').trigger (e);\n }\n })\n});\n"); } $this->attr('name', $prop->multiple ? "{$prop->name}[]" : $prop->name); $this->attrIf($isMultiple, 'multiple', ''); $this->attrIf($prop->onChange, 'onchange', $prop->onChange); $this->beginContent(); if ($prop->emptySelection && !$prop->multiple) { $sel = exists($prop->value) ? '' : ' selected'; echo '<option value=""' . $sel . '>' . $prop->emptyLabel . '</option>'; } $viewModel = $prop->get('data'); if (isset($viewModel)) { /** @var \Iterator $dataIter */ $dataIter = iteratorOf($viewModel); $dataIter->rewind(); if ($dataIter->valid()) { $values = $selValue = null; // SETUP MULTI-SELECT if ($isMultiple) { if (isset($prop->value) && !is_iterable($prop->value)) { throw new ComponentException($this, sprintf("Value of multiple selection component must be iterable or null; %s was given.", typeOf($prop->value))); } $it = Flow::from($prop->value); $it->rewind(); $values = $it->valid() && is_scalar($it->current()) ? $it->all() : $it->map(pluck($prop->valueField))->all(); } else { $selValue = strval($prop->get('value')); } // NOW RENDER IT $template = $this->getChildren('listItemTemplate'); $first = true; do { $v = $dataIter->current(); $value = getField($v, $prop->valueField); $label = getField($v, $prop->labelField); if (!strlen($label)) { $label = $prop->emptyLabel; } if ($isMultiple) { $sel = array_search($value, $values) !== false ? ' selected' : ''; } else { if ($first && !$prop->emptySelection && !$prop->multiple && !exists($selValue)) { $prop->value = $selValue = $value; } $eq = $prop->strict ? $value === $selValue : $value == $selValue; if ($eq) { $this->selectedLabel = $label; } $sel = $eq ? ' selected' : ''; } if ($template) { // Render templated list $viewModel['value'] = $value; $viewModel['label'] = $label; Component::renderSet($template); } else { // Render standard list echo "<option value=\"{$value}\"{$sel}>{$label}</option>"; } $dataIter->next(); $first = false; } while ($dataIter->valid()); } } }
protected function render() { $prop = $this->props; $options = JavascriptCodeGen::makeOptions(['url' => $prop->url, 'acceptedFiles' => $prop->acceptedFiles, 'maxFiles' => $prop->maxFiles, 'clickable' => true, 'addRemoveLinks' => true, 'parallelUploads' => $prop->parallelUploads, 'method' => $prop->method, 'autoProcessQueue' => $prop->autoProcessQueue, 'dictDefaultMessage' => "Arraste ficheiros para aqui ou clique para escolher os ficheiros a enviar.", 'dictInvalidFileType' => 'Ficheiro inválido', 'dictFileTooBig' => 'Ficheiro demasiado grande', 'dictResponseError' => 'Erro ao enviar', 'dictCancelUpload' => 'Cancelar', 'dictCancelUploadConfirmation' => 'Tem a certeza?', 'dictRemoveFile' => 'Apagar', 'dictMaxFilesExceeded' => 'Não pode inserir mais ficheiros'], ' '); $this->context->getAssetsService()->addInlineScript(<<<JS (function(element){ var dropzone = new Dropzone (element[0], {$options}); }) (\$('#{$prop->id}')); JS ); }
protected function render() { $prop = $this->props; $type = $prop->get('type', 'text'); $name = $prop->name; $action = when($prop->action, "checkKeybAction(event,'" . $prop->action . "')"); $assets = $this->context->getAssetsService(); $assets->addInlineScript(<<<JS selenia.validateInput = function (input) { var v = input.validity; input.setCustomValidity( v.badInput && "\$VALIDATION_BAD_INPUT" || v.patternMismatch && "\$VALIDATION_PATTERN_MISMATCH" || v.rangeOverflow && "\$VALIDATION_RANGE_OVERFLOW" || v.rangeUnderflow && "\$VALIDATION_RANGE_UNDERFLOW" || v.stepMismatch && "\$VALIDATION_STEP_MISMATCH" || v.tooLong && "\$VALIDATION_TOO_LONG" || v.tooShort && "\$VALIDATION_TOO_SHORT" || v.typeMismatch && "\$VALIDATION_TYPE_MISMATCH" || v.valueMissing && "\$VALIDATION_VALUE_MISSING" || '' ); }; JS , 'validateInput'); $value = either($prop->value, $prop->defaultValue); switch ($type) { case 'multiline': $assets->addInlineScript(<<<'JS' $('textarea.Input').textareaAutoSize(); selenia.on('languageChanged',function(lang){ $('textarea.Input[lang='+lang+']').trigger('input'); }); selenia.on('tabChanged',function(tab){ tab.find('textarea.Input').trigger('input'); }); JS , 'input-autosize'); $this->addAttrs(['name' => $name, 'cols' => 0, 'readonly' => $prop->readOnly ? 'readonly' : null, 'disabled' => $prop->disabled ? 'disabled' : null, 'tabindex' => $prop->tabIndex, 'autofocus' => $prop->autofocus, 'onfocus' => $prop->autoselect ? 'this.select()' : 'this.value=this.value', 'onchange' => $prop->onChange, 'spellcheck' => 'false', 'maxlength' => $prop->maxLength, 'minlength' => $prop->minLength, 'required' => $prop->required]); $this->setContent($value); break; case 'date': case 'time': case 'datetime': $this->addAttrs(['type' => 'text', 'name' => $name, 'value' => $value, 'readonly' => $prop->readOnly ? 'readonly' : null, 'disabled' => $prop->disabled ? 'disabled' : null, 'tabindex' => $prop->tabIndex, 'autofocus' => $prop->autofocus, 'onfocus' => $prop->autoselect ? 'this.select()' : 'this.value=this.value', 'onchange' => $prop->onChange, 'onkeypress' => $action, 'max' => $prop->max, 'min' => $prop->min, 'maxlength' => $prop->maxLength, 'minlength' => $prop->minLength, 'pattern' => $prop->pattern, 'required' => $prop->required]); switch ($type) { case 'date': $format = $prop->dateFormat; break; case 'time': $format = $prop->timeFormat; break; default: $format = $prop->datetimeFormat; } $assets->addInlineScript(<<<JS \$('#{$prop->id}').datetimepicker({ locale: '{$prop->lang}', defaultDate: '{$value}' || new moment(), format: '{$format}', sideBySide: true, showTodayButton: true, showClear: true, showClose: true }); JS ); break; case 'color': $this->beginContent(); $this->tag('input', ['type' => 'text', 'class' => 'form-control', 'name' => $name, 'value' => $value, 'readonly' => $prop->readOnly ? 'readonly' : null, 'disabled' => $prop->disabled ? 'disabled' : null, 'tabindex' => $prop->tabIndex, 'autofocus' => $prop->autofocus, 'onfocus' => $prop->autoselect ? 'this.select()' : 'this.value=this.value', 'onchange' => $prop->onChange, 'onkeypress' => $action, 'max' => $prop->max, 'min' => $prop->min, 'maxlength' => $prop->maxLength, 'minlength' => $prop->minLength, 'pattern' => $prop->pattern, 'required' => $prop->required]); echo '<span class="input-group-addon"><i></i></span>'; $assets->addInlineScript("\$('#{$name}0').colorpicker();"); break; case 'number': $this->addAttrs(['type' => 'text', 'name' => $name, 'value' => $value, 'placeholder' => $prop->placeholder, 'readonly' => $prop->readOnly ? 'readonly' : null, 'autocomplete' => $prop->autocomplete ? null : 'off', 'disabled' => $prop->disabled ? 'disabled' : null, 'tabindex' => $prop->tabIndex, 'autofocus' => $prop->autofocus, 'onfocus' => $prop->autoselect ? 'this.select()' : 'this.value=this.value', 'onchange' => $prop->onChange, 'onkeypress' => $action, 'maxlength' => $prop->maxLength, 'minlength' => $prop->minLength, 'pattern' => $prop->pattern, 'required' => $prop->required]); $options = JavascriptCodeGen::makeOptions(['max' => $prop->max, 'min' => $prop->min, 'step' => $prop->step, 'decimals' => $prop->decimals, 'forcestepdivisibility' => 'none'], ' '); $assets->addInlineScript("\$('#{$prop->id}').TouchSpin({$options});"); break; default: $this->addAttrs(['type' => $type, 'name' => $name, 'value' => $value, 'placeholder' => $prop->placeholder, 'readonly' => $prop->readOnly ? 'readonly' : null, 'autocomplete' => $prop->autocomplete ? null : 'off', 'disabled' => $prop->disabled ? 'disabled' : null, 'tabindex' => $prop->tabIndex, 'autofocus' => $prop->autofocus, 'onfocus' => $prop->autoselect ? 'this.select()' : 'this.value=this.value', 'onchange' => $prop->onChange, 'onkeypress' => $action, 'max' => $prop->max, 'min' => $prop->min, 'maxlength' => $prop->maxLength, 'minlength' => $prop->minLength, 'pattern' => $prop->pattern, 'required' => $prop->required, 'step' => $prop->step]); } }