-
Notifications
You must be signed in to change notification settings - Fork 106
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Improve form JS init selector #2049
Merged
Merged
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
3f9d32a
Fix JS form init, must be called on form tag
mvorisek e30cf5e
on enter submit handler is then not needed/loops
mvorisek 917c31a
NOT WORKING add prompt on form element
mvorisek 35a6393
Revert "NOT WORKING add prompt on form element"
mvorisek d12be36
Revert "Fix JS form init, must be called on form tag"
mvorisek 3f8b9bb
Revert "on enter submit handler is then not needed/loops"
mvorisek 5b181e7
make all Fomantic-UI .form() calls form's owning div
mvorisek 8fc414a
better to specify "on" explicitly instead of auto
mvorisek ff7f4be
hook api on native form as it does work on native data
mvorisek d7342c2
dispatch submit event from div.ui.form to native form
mvorisek 66c234f
rm obvious comments
mvorisek dbb9686
simplify form layout init
mvorisek 84470c5
fix stan
mvorisek 3ab4f9c
simplify selector and use trigger
mvorisek a1d86a6
improve cs
mvorisek 994c42d
simplify click event dispatch
mvorisek File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -135,9 +135,8 @@ protected function init(): void | |
parent::init(); | ||
|
||
$this->formElement = View::addTo($this, ['element' => 'form', 'shortName' => 'form'], ['FormElementOnly']); | ||
$this->on('submit', new JsExpression('if (event.target === this) { []; }', [$this->formElement->js()->trigger('submit')])); | ||
|
||
// Initialize layout, so when you call addControl / setModel next time, form will know | ||
// where to add your fields. | ||
$this->initLayout(); | ||
|
||
// set CSS loader for this form | ||
|
@@ -146,35 +145,19 @@ protected function init(): void | |
$this->cb = JsCallback::addTo($this, [], [['desired_name' => 'submit']]); | ||
} | ||
|
||
/** | ||
* Initialize form layout. You can inject custom layout | ||
* if you 'layout' => .. to constructor. | ||
*/ | ||
protected function initLayout(): void | ||
{ | ||
// TODO simplify | ||
if ($this->layout === null) { | ||
$this->layout = [Form\Layout::class]; // @phpstan-ignore-line | ||
} | ||
|
||
if (is_string($this->layout) || is_array($this->layout)) { // @phpstan-ignore-line | ||
$this->layout = $this->add(Factory::factory($this->layout, ['form' => $this])); // @phpstan-ignore-line | ||
} elseif (is_object($this->layout)) { // @phpstan-ignore-line | ||
$this->layout->form = $this; | ||
$this->add($this->layout); | ||
} else { | ||
throw (new Exception('Unsupported specification of form layout. Can be array, string or object')) | ||
->addMoreInfo('layout', $this->layout); | ||
if (!is_object($this->layout)) { // @phpstan-ignore-line | ||
$this->layout = Factory::factory($this->layout ?? [Form\Layout::class]); // @phpstan-ignore-line | ||
} | ||
$this->layout->form = $this; | ||
$this->add($this->layout); | ||
|
||
// allow to submit by pressing an enter key when child control is focused | ||
$jsSubmit = $this->js(false, null, $this->formElement)->form('submit'); | ||
$this->on('submit', new JsExpression('if (event.target === this) { []; }', [$jsSubmit])); | ||
|
||
// Add save button in layout | ||
// add save button in layout | ||
if ($this->buttonSave) { | ||
$this->buttonSave = $this->layout->addButton($this->buttonSave); | ||
$this->buttonSave->setAttr('tabindex', 0); | ||
$jsSubmit = $this->js()->form('submit'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Invoke |
||
$this->buttonSave->on('click', $jsSubmit); | ||
$this->buttonSave->on('keypress', new JsExpression('if (event.keyCode === 13) { []; }', [$jsSubmit])); | ||
} | ||
|
@@ -227,7 +210,7 @@ public function setModel(Model $entity, array $fields = null): void | |
{ | ||
$entity->assertIsEntity(); | ||
|
||
// Model is set for the form and also for the current layout | ||
// set model for the form and also for the current layout | ||
try { | ||
parent::setModel($entity); | ||
|
||
|
@@ -492,7 +475,7 @@ protected function loadPost(): void | |
|
||
protected function renderView(): void | ||
{ | ||
$this->ajaxSubmit(); | ||
$this->setupAjaxSubmit(); | ||
if ($this->controlDisplayRules !== []) { | ||
$this->js(true, new JsConditionalForm($this, $this->controlDisplayRules, $this->controlDisplaySelector)); | ||
} | ||
|
@@ -509,7 +492,9 @@ protected function renderTemplateToHtml(): string | |
|
||
public function fixOwningFormAttrInRenderedHtml(string $html): string | ||
{ | ||
return preg_replace('~<(button|fieldset|input|output|select|textarea)(?!\w| form=")~i', '$0 form="' . $this->formElement->name . '"', $html); | ||
return preg_replace_callback('~<(?:button|fieldset|input|output|select|textarea)(?!\w| form=")~i', function ($matches) { | ||
return $matches[0] . ' form="' . $this->getApp()->encodeHtml($this->formElement->name) . '"'; | ||
}, $html); | ||
} | ||
|
||
/** | ||
|
@@ -542,15 +527,19 @@ public function setFormConfig($config) | |
return $this; | ||
} | ||
|
||
/** | ||
* Does ajax submit. | ||
*/ | ||
public function ajaxSubmit(): void | ||
public function setupAjaxSubmit(): void | ||
{ | ||
$this->js(true)->form(array_merge(['inline' => true, 'on' => 'blur'], $this->formConfig)); | ||
|
||
$this->js(true, null, $this->formElement) | ||
->api(array_merge(['url' => $this->cb->getJsUrl(), 'method' => 'POST', 'serializeForm' => true], $this->apiConfig)); | ||
$this->js(true)->form(array_merge([ | ||
'on' => 'blur', | ||
'inline' => true, | ||
], $this->formConfig)); | ||
|
||
$this->formElement->js(true)->api(array_merge([ | ||
'on' => 'submit', | ||
'url' => $this->cb->getJsUrl(), | ||
'method' => 'POST', | ||
'serializeForm' => true, | ||
], $this->apiConfig)); | ||
|
||
// [name] in selector is to suppress https://github.com/fomantic/Fomantic-UI/commit/facbca003cf0da465af7d44af41462e736d3eb8b | ||
// console errors from Multiline/vue fields | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the main point of this PR, dispatch native event without instantiating Fomantic-UI form behaviour for the native form tag.