Fix deprecations && invalid field handling
Dieser Commit ist enthalten in:
Ursprung
e2797ced64
Commit
392b6f3d58
18 geänderte Dateien mit 72 neuen und 38 gelöschten Zeilen
|
@ -3,6 +3,7 @@ import discourseComputed from "discourse-common/utils/decorators";
|
||||||
|
|
||||||
export default DateInput.extend({
|
export default DateInput.extend({
|
||||||
useNativePicker: false,
|
useNativePicker: false,
|
||||||
|
classNameBindings: ["fieldClass"],
|
||||||
|
|
||||||
@discourseComputed()
|
@discourseComputed()
|
||||||
placeholder() {
|
placeholder() {
|
||||||
|
|
|
@ -2,6 +2,8 @@ import DateTimeInput from "discourse/components/date-time-input";
|
||||||
import discourseComputed from "discourse-common/utils/decorators";
|
import discourseComputed from "discourse-common/utils/decorators";
|
||||||
|
|
||||||
export default DateTimeInput.extend({
|
export default DateTimeInput.extend({
|
||||||
|
classNameBindings: ["fieldClass"],
|
||||||
|
|
||||||
@discourseComputed("timeFirst", "tabindex")
|
@discourseComputed("timeFirst", "tabindex")
|
||||||
timeTabindex(timeFirst, tabindex) {
|
timeTabindex(timeFirst, tabindex) {
|
||||||
return timeFirst ? tabindex : tabindex + 1;
|
return timeFirst ? tabindex : tabindex + 1;
|
||||||
|
|
|
@ -2,6 +2,8 @@ import Component from "@ember/component";
|
||||||
import { observes } from "discourse-common/utils/decorators";
|
import { observes } from "discourse-common/utils/decorators";
|
||||||
|
|
||||||
export default Component.extend({
|
export default Component.extend({
|
||||||
|
classNameBindings: ['fieldClass'],
|
||||||
|
|
||||||
@observes("time")
|
@observes("time")
|
||||||
setValue() {
|
setValue() {
|
||||||
this.set("field.value", this.time.format(this.field.format));
|
this.set("field.value", this.time.format(this.field.format));
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { computed } from "@ember/object";
|
||||||
|
|
||||||
export default Component.extend(UppyUploadMixin, {
|
export default Component.extend(UppyUploadMixin, {
|
||||||
classNames: ["wizard-field-upload"],
|
classNames: ["wizard-field-upload"],
|
||||||
classNameBindings: ["isImage"],
|
classNameBindings: ["isImage", "fieldClass"],
|
||||||
uploading: false,
|
uploading: false,
|
||||||
type: computed(function () {
|
type: computed(function () {
|
||||||
return `wizard_${this.field.id}`;
|
return `wizard_${this.field.id}`;
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
import Component from "@ember/component";
|
import Component from "@ember/component";
|
||||||
|
|
||||||
export default Component.extend({});
|
export default Component.extend({
|
||||||
|
classNameBindings: ['fieldClass']
|
||||||
|
});
|
||||||
|
|
|
@ -9,6 +9,7 @@ import CustomWizard, {
|
||||||
updateCachedWizard,
|
updateCachedWizard,
|
||||||
} from "discourse/plugins/discourse-custom-wizard/discourse/models/custom-wizard";
|
} from "discourse/plugins/discourse-custom-wizard/discourse/models/custom-wizard";
|
||||||
import { alias, not } from "@ember/object/computed";
|
import { alias, not } from "@ember/object/computed";
|
||||||
|
import discourseLater from "discourse-common/lib/later";
|
||||||
|
|
||||||
const alreadyWarned = {};
|
const alreadyWarned = {};
|
||||||
|
|
||||||
|
@ -110,29 +111,24 @@ export default Component.extend({
|
||||||
},
|
},
|
||||||
|
|
||||||
autoFocus() {
|
autoFocus() {
|
||||||
schedule("afterRender", () => {
|
discourseLater(() => {
|
||||||
const $invalid = $(
|
schedule("afterRender", () => {
|
||||||
".wizard-field.invalid:nth-of-type(1) .wizard-focusable"
|
if ($(".invalid .wizard-focusable").length) {
|
||||||
);
|
this.animateInvalidFields();
|
||||||
|
} else {
|
||||||
if ($invalid.length) {
|
$(".wizard-focusable:first").focus();
|
||||||
return $invalid.focus();
|
}
|
||||||
}
|
});
|
||||||
|
|
||||||
$(".wizard-focusable:first").focus();
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
animateInvalidFields() {
|
animateInvalidFields() {
|
||||||
schedule("afterRender", () => {
|
schedule("afterRender", () => {
|
||||||
let $element = $(
|
let $invalid = $(".invalid .wizard-focusable");
|
||||||
".invalid input[type=text],.invalid textarea,.invalid input[type=checkbox],.invalid .select-kit"
|
if ($invalid.length) {
|
||||||
);
|
|
||||||
|
|
||||||
if ($element.length) {
|
|
||||||
$([document.documentElement, document.body]).animate(
|
$([document.documentElement, document.body]).animate(
|
||||||
{
|
{
|
||||||
scrollTop: $element.offset().top - 200,
|
scrollTop: $invalid.offset().top - 200,
|
||||||
},
|
},
|
||||||
400
|
400
|
||||||
);
|
);
|
||||||
|
|
|
@ -72,7 +72,7 @@ export default EmberObject.extend(ValidState, {
|
||||||
valid = true;
|
valid = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setValid(valid);
|
this.setValid(Boolean(valid));
|
||||||
|
|
||||||
return valid;
|
return valid;
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
{{input
|
<Input
|
||||||
type=inputType
|
@type={{this.inputType}}
|
||||||
|
@value={{readonly this.value}}
|
||||||
class="date-picker"
|
class="date-picker"
|
||||||
placeholder=placeholder
|
placeholder={{this.placeholder}}
|
||||||
value=(readonly value)
|
tabindex={{this.tabindex}}
|
||||||
input=(action "onChangeDate")
|
{{on "input" (action "onChangeDate")}}
|
||||||
tabindex=tabindex
|
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
}}
|
/>
|
||||||
|
|
||||||
<div class="picker-container"></div>
|
<div class="picker-container"></div>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
{{custom-wizard-category-selector
|
{{custom-wizard-category-selector
|
||||||
categories=categories
|
categories=categories
|
||||||
|
class=fieldClass
|
||||||
whitelist=field.content
|
whitelist=field.content
|
||||||
onChange=(action (mut categories))
|
onChange=(action (mut categories))
|
||||||
tabindex=field.tabindex
|
tabindex=field.tabindex
|
||||||
|
|
|
@ -1 +1,7 @@
|
||||||
{{input type="checkbox" id=field.id checked=field.value tabindex=field.tabindex}}
|
<Input
|
||||||
|
id={{this.field.id}}
|
||||||
|
@type="checkbox"
|
||||||
|
@checked={{this.field.value}}
|
||||||
|
tabindex={{this.field.tabindex}}
|
||||||
|
class={{this.fieldClass}}
|
||||||
|
/>
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
field=field
|
field=field
|
||||||
composer=composer
|
composer=composer
|
||||||
wizard=wizard
|
wizard=wizard
|
||||||
|
fieldClass=fieldClass
|
||||||
groupsMentioned=(action "groupsMentioned")
|
groupsMentioned=(action "groupsMentioned")
|
||||||
cannotSeeMention=(action "cannotSeeMention")
|
cannotSeeMention=(action "cannotSeeMention")
|
||||||
importQuote=(action "importQuote")
|
importQuote=(action "importQuote")
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
{{custom-wizard-group-selector
|
{{custom-wizard-group-selector
|
||||||
groups=site.groups
|
groups=site.groups
|
||||||
|
class=fieldClass
|
||||||
field=field
|
field=field
|
||||||
whitelist=field.content
|
whitelist=field.content
|
||||||
value=field.value
|
value=field.value
|
||||||
|
|
|
@ -1 +1,9 @@
|
||||||
{{input type="number" step="0.01" id=field.id value=field.value tabindex=field.tabindex}}
|
<Input
|
||||||
|
id={{this.field.id}}
|
||||||
|
step="0.01"
|
||||||
|
@type="number"
|
||||||
|
@value={{this.field.value}}
|
||||||
|
tabindex={{this.field.tabindex}}
|
||||||
|
class={{this.fieldClass}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
{{custom-wizard-tag-chooser
|
{{custom-wizard-tag-chooser
|
||||||
tags=field.value
|
tags=field.value
|
||||||
|
class=fieldClass
|
||||||
tabindex=field.tabindex
|
tabindex=field.tabindex
|
||||||
tagGroups=field.tag_groups
|
tagGroups=field.tag_groups
|
||||||
everyTag=true
|
everyTag=true
|
||||||
|
|
|
@ -1 +1,8 @@
|
||||||
{{input id=field.id value=field.value class=fieldClass placeholder=field.translatedPlaceholder tabindex=field.tabindex autocomplete=autocomplete}}
|
<Input
|
||||||
|
id={{this.field.id}}
|
||||||
|
@value={{this.field.value}}
|
||||||
|
tabindex={{this.field.tabindex}}
|
||||||
|
class={{this.fieldClass}}
|
||||||
|
placeholder={{this.field.translatedPlaceholder}}
|
||||||
|
autocomplete={{this.autocomplete}}
|
||||||
|
/>
|
|
@ -1 +1,7 @@
|
||||||
{{textarea id=field.id value=field.value class=fieldClass placeholder=field.translatedPlaceholder tabindex=field.tabindex}}
|
<Textarea
|
||||||
|
id={{this.field.id}}
|
||||||
|
@value={{this.field.value}}
|
||||||
|
tabindex={{this.field.tabindex}}
|
||||||
|
class={{this.fieldClass}}
|
||||||
|
placeholder={{this.field.translatedPlaceholder}}
|
||||||
|
/>
|
|
@ -1 +1,6 @@
|
||||||
{{input type="text" id=field.id value=field.value tabindex=field.tabindex}}
|
<Input
|
||||||
|
id={{this.field.id}}
|
||||||
|
@value={{this.field.value}}
|
||||||
|
tabindex={{this.field.tabindex}}
|
||||||
|
class={{this.fieldClass}}
|
||||||
|
/>
|
|
@ -32,13 +32,8 @@ body.custom-wizard {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.invalid {
|
&.invalid .wizard-focusable {
|
||||||
textarea,
|
outline: 4px solid var(--danger);
|
||||||
input[type="text"],
|
|
||||||
input[type="checkbox"],
|
|
||||||
.select-kit {
|
|
||||||
outline: 4px solid var(--danger);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Laden …
In neuem Issue referenzieren