-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add input, implement new API and few fix for props validation in debu…
…g mode
- Loading branch information
1 parent
5e47668
commit 395880e
Showing
18 changed files
with
251 additions
and
49 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,46 @@ | ||
| import { registry } from "@web/core/registry"; | ||
|
|
||
| registry.category("website-builder-actions").add("setClass", { | ||
| isActive: ({ editingElement, params }) => { | ||
| return editingElement.classList.contains(params); | ||
| registry.category("website-builder-actions").add("classAction", { | ||
| isActive: ({ editingElement, param: className }) => { | ||
| return editingElement.classList.contains(className); | ||
| }, | ||
| apply: ({ editingElement, params }) => { | ||
| editingElement.classList.add(params); | ||
| apply: ({ editingElement, param: className, value }) => { | ||
| editingElement.classList.add(className); | ||
| }, | ||
| clean: ({ editingElement, params }) => { | ||
| editingElement.classList.remove(params); | ||
| clean: ({ editingElement, param: className, value }) => { | ||
| editingElement.classList.remove(className); | ||
| }, | ||
| }); | ||
|
|
||
| const styleMap = { | ||
| borderWidth: { | ||
| getValue: (editingElement) => { | ||
| return parseInt( | ||
| getComputedStyle(editingElement).getPropertyValue("border-width") | ||
| ).toString(); | ||
| }, | ||
| apply: (editingElement, value) => { | ||
| const parsedValue = parseInt(value); | ||
| const hasBorderClass = editingElement.classList.contains("border"); | ||
| if (!parsedValue || parsedValue < 0) { | ||
| if (hasBorderClass) { | ||
| editingElement.classList.remove("border"); | ||
| } | ||
| } else { | ||
| if (!hasBorderClass) { | ||
| editingElement.classList.add("border"); | ||
| } | ||
| } | ||
| editingElement.style.setProperty("border-width", `${parsedValue}px`, "important"); | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| registry.category("website-builder-actions").add("styleAction", { | ||
| getValue: ({ editingElement, param: styleName }) => { | ||
| return styleMap[styleName]?.getValue(editingElement); | ||
| }, | ||
| apply: ({ editingElement, param: styleName, value }) => { | ||
| styleMap[styleName]?.apply(editingElement, value); | ||
| }, | ||
| }); |
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
6 changes: 3 additions & 3 deletions
6
addons/html_builder/static/src/builder/components/ButtonGroup.js
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
61 changes: 61 additions & 0 deletions
61
addons/html_builder/static/src/builder/components/NumberInput.js
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 |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { Component, useState } from "@odoo/owl"; | ||
| import { registry } from "@web/core/registry"; | ||
| import { basicContainerWeWidgetProps, useWeComponent } from "../builder_helpers"; | ||
|
|
||
| const actionsRegistry = registry.category("website-builder-actions"); | ||
|
|
||
| export class NumberInput extends Component { | ||
| static template = "html_builder.NumberInput"; | ||
| static props = { | ||
| ...basicContainerWeWidgetProps, | ||
| unit: { type: String, optional: true }, | ||
| }; | ||
|
|
||
| setup() { | ||
| useWeComponent(); | ||
| this.state = useState(this.getState()); | ||
| this.applyValue = this.env.editor.shared.makePreviewableOperation((value) => { | ||
| for (const [actionId, actionParam] of this.getActions()) { | ||
| actionsRegistry.get(actionId).apply({ | ||
| editingElement: this.env.editingElement, | ||
| param: actionParam, | ||
| value, | ||
| }); | ||
| } | ||
| }); | ||
| } | ||
| getState() { | ||
| const [actionId, actionParam] = this.getActions()[0]; | ||
| return { | ||
| value: actionsRegistry.get(actionId).getValue({ | ||
| editingElement: this.env.editingElement, | ||
| param: actionParam, | ||
| }), | ||
| }; | ||
| } | ||
| getActions() { | ||
| const actions = []; | ||
| if (this.props.classAction) { | ||
| actions.push(["classAction", this.props.classAction]); | ||
| } | ||
| if (this.props.attributeAction) { | ||
| actions.push(["attributeAction", this.props.attributeAction]); | ||
| } | ||
| if (this.props.dataAttributeAction) { | ||
| actions.push(["dataAttributeAction", this.props.dataAttributeAction]); | ||
| } | ||
| if (this.props.styleAction) { | ||
| actions.push(["styleAction", this.props.styleAction]); | ||
| } | ||
| if (this.props.action) { | ||
| actions.push([this.props.action, this.props.actionParam]); | ||
| } | ||
| return actions; | ||
| } | ||
| onChange(e) { | ||
| this.applyValue.commit(e.target.value); | ||
| } | ||
| onInput(e) { | ||
| this.applyValue.preview(e.target.value); | ||
| } | ||
| } |
11 changes: 11 additions & 0 deletions
11
addons/html_builder/static/src/builder/components/NumberInput.xml
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 |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <templates xml:space="preserve"> | ||
|
|
||
| <t t-name="html_builder.NumberInput"> | ||
| <div class="d-flex flex-row flex-nowrap align-items-center" style="width: 60px"> | ||
| <input type="text" autocomplete="chrome-off" class="text-end" t-on-change="this.onChange" t-on-input="this.onInput" t-att-value="this.state.value" /> | ||
| <span t-out="props.unit" /> | ||
| </div> | ||
| </t> | ||
|
|
||
| </templates> |
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
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
9 changes: 9 additions & 0 deletions
9
addons/html_builder/static/src/builder/components/options/BorderOption.js
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 |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { Component } from "@odoo/owl"; | ||
| import { defaultOptionComponents } from "../defaultComponents"; | ||
|
|
||
| export class BorderOption extends Component { | ||
| static template = "html_builder.BorderOption"; | ||
| static components = { | ||
| ...defaultOptionComponents, | ||
| }; | ||
| } |
10 changes: 10 additions & 0 deletions
10
addons/html_builder/static/src/builder/components/options/BorderOption.xml
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 |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <?xml version="1.0" encoding="UTF-8"?> | ||
| <templates xml:space="preserve"> | ||
|
|
||
| <t t-name="html_builder.BorderOption"> | ||
| <ToolboxRow label.translate="Border"> | ||
| <NumberInput styleAction="'borderWidth'" unit="'px'" /> | ||
| </ToolboxRow> | ||
| </t> | ||
|
|
||
| </templates> |
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
Oops, something went wrong.