From 1f04daeaa21e978d334362a21436f39976967379 Mon Sep 17 00:00:00 2001 From: Jon Uhlmann Date: Mon, 6 Nov 2023 14:50:02 +0100 Subject: [PATCH] Update: Add valueLabelsFile for easier translation --- README.md | 26 +++++++++- Resources/Private/RangeEditor/Editor/index.js | 48 +++++++++++++------ Resources/Public/Plugin.js | 2 +- Resources/Public/Plugin.js.map | 6 +-- 4 files changed, 62 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index f498eeb..c3e3aa9 100644 --- a/README.md +++ b/README.md @@ -35,8 +35,32 @@ Example: ``` Of course you can localize a value. e.g. `Vendor.Package:Folder.Filename:1` -If you have set a value label for the min or max value, you don't need to set `minLabel` of `maxLabel` +If you have set a value label for the min or max value, you don't need to set `minLabel` of `maxLabel`. +If you work with `xlf` files, you can also ad a setting called `valueLabelsFile`: + +```yaml +'Foo.Bar:Element': + properties: + zoomLevel: + type: integer + ui: + inspector: + editor: 'Carbon.RangeEditor/Editor' + editorOptions: + minLabel: null + maxLabel: null + min: 1 + max: 6 + step: 1 + unit: '' + valueLabelsFile: 'Foo.Bar:ZoomLevel' + valueLabels: + 2: 'Override label from Foo.Bar:ZoomLevel:2' +``` + +In that case, the plugin search for the translation value in the file `ZoomLevel.xlf` in the package `Foo.Bar`. +Example: For the value `5` the translation string will be `Foo.Bar:ZoomLevel:5`. [packagist]: https://packagist.org/packages/carbon/rangeeditor [latest stable version]: https://poser.pugx.org/carbon/rangeeditor/v/stable diff --git a/Resources/Private/RangeEditor/Editor/index.js b/Resources/Private/RangeEditor/Editor/index.js index 4a190b6..18a141f 100644 --- a/Resources/Private/RangeEditor/Editor/index.js +++ b/Resources/Private/RangeEditor/Editor/index.js @@ -17,6 +17,7 @@ const defaultProps = { minLabel: null, maxLabel: null, disabled: false, + valueLabelsFile: "", valueLabels: {}, }, }; @@ -48,15 +49,38 @@ function Editor(props, second) { }; const options = { ...defaultProps.options, ...props.options }; - const { value, highlight } = props; + const { value, highlight, i18nRegistry } = props; const valueAsString = value === 0 ? "0" : value || ""; // Calculate the width of the input field based on the length of the min, max and step values const numLength = (value) => value.toString().length; const additionalStepLength = numLength(options.step) - 1; const styleWidth = Math.max(numLength(options.min), numLength(options.max)) + additionalStepLength + "ch"; - const valueLabels = options.valueLabels; + const { valueLabels, valueLabelsFile } = options; const showMiddle = !!(value != options.min && value != options.max); + const getValueLabel = (value) => { + if (valueLabels && valueLabels[value]) { + return valueLabels[value]; + } + if (valueLabelsFile) { + return `${valueLabelsFile}:${value}`; + } + return null; + }; + + const getLabel = (value) => { + if (value == options.min) { + const label = options.minLabel || getValueLabel(options.min) || options.min + options.unit; + return i18nRegistry.translate(label); + } + if (value == options.max) { + const label = options.maxLabel || getValueLabel(options.max) || options.max + options.unit; + return i18nRegistry.translate(label); + } + return i18nRegistry.translate(getValueLabel(value)); + }; + + const currentLabel = getLabel(value); return (
@@ -73,23 +97,19 @@ function Editor(props, second) {
{!showMiddle &&  } - {valueLabels[value] && showMiddle && ( - {props.i18nRegistry.translate(valueLabels[value])} - )} - {!valueLabels[value] && showMiddle && ( + {currentLabel && showMiddle && {currentLabel}} + {!currentLabel && showMiddle && ( changeValue(options.max)} style={{ opacity: options.max == value ? 1 : 0.7 }} disabled={options.disabled} > - {props.i18nRegistry.translate( - options.maxLabel || valueLabels[options.max] || options.max + options.unit, - )} + {getLabel(options.max)}
diff --git a/Resources/Public/Plugin.js b/Resources/Public/Plugin.js index e12c683..239c71f 100644 --- a/Resources/Public/Plugin.js +++ b/Resources/Public/Plugin.js @@ -1,2 +1,2 @@ -(()=>{var w=Object.create;var p=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var Y=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,Q=Object.prototype.hasOwnProperty;var H=(e,t)=>()=>(e&&(t=e(e=0)),t);var h=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var k=(e,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of Y(t))!Q.call(e,a)&&a!==i&&p(e,a,{get:()=>t[a],enumerable:!(o=V(t,a))||o.enumerable});return e};var f=(e,t,i)=>(i=e!=null?w(J(e)):{},k(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e));function c(e){return(...t)=>{if(window["@Neos:HostPluginAPI"]&&window["@Neos:HostPluginAPI"][`@${e}`])return window["@Neos:HostPluginAPI"][`@${e}`](...t);throw new Error("You are trying to read from a consumer api that hasn't been initialized yet!")}}var b=H(()=>{});var W=h((pe,x)=>{b();x.exports=c("vendor")().React});var v=h((fe,O)=>{b();O.exports=c("NeosProjectPackages")().NeosUiDecorators});b();var G=c("manifest");var s=f(W()),Z=f(v());var d={slider:"carbon-rangeeditor-6mQFcW-slider",editorDisabled:"carbon-rangeeditor-6mQFcW-editorDisabled",sliderHighlight:"carbon-rangeeditor-6mQFcW-sliderHighlight",editorValue:"carbon-rangeeditor-6mQFcW-editorValue",valueLabel:"carbon-rangeeditor-6mQFcW-valueLabel"};function X(e){var t,i,o="";if(typeof e=="string"||typeof e=="number")o+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t({i18nRegistry:e.get("i18n"),config:e.get("frontendConfiguration").get("Carbon.RangeEditor")})),M={options:{min:0,max:100,step:1,unit:"",minLabel:null,maxLabel:null,disabled:!1,valueLabels:{}}};function U(e,t){let i=S(),o=n=>{a(n.target.value)},a=n=>{let{options:m}=e;n=(m.step||1)%1===0?parseInt(n,10):parseFloat(n,10),!isNaN(n)&&(n=Math.min(m.max,Math.max(m.min,n)),e.commit(n),i())},D=n=>{isNaN(n.key)&&n.preventDefault()},r={...M.options,...e.options},{value:g,highlight:B}=e,A=g===0?"0":g||"",u=n=>n.toString().length,N=u(r.step)-1,z=Math.max(u(r.min),u(r.max))+N+"ch",l=r.valueLabels,I=g!=r.min&&g!=r.max;return s.default.createElement("div",{className:C(d.editor,r.disabled&&d.editorDisabled)},s.default.createElement("input",{type:"range",min:r.min,max:r.max,step:r.step,value:A,className:C(d.slider,B&&d.sliderHighlight),onChange:o,disabled:r.disabled}),s.default.createElement("div",{className:d.editorValue},s.default.createElement("button",{type:"button",title:e.i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorMinimum"),onClick:()=>a(r.min),style:{opacity:r.min==g?1:.7},disabled:r.disabled},e.i18nRegistry.translate(r.minLabel||l[r.min]||r.min+r.unit)),!I&&s.default.createElement("span",null,"\xA0"),l[g]&&I&&s.default.createElement("span",{className:d.valueLabel},e.i18nRegistry.translate(l[g])),!l[g]&&I&&s.default.createElement("span",null,s.default.createElement("input",{title:e.i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorCurrentValue"),type:"text",onKeyPress:this.onKeyPress,onChange:this.handleChange,value:A,style:{width:z},disabled:r.disabled}),r.unit),s.default.createElement("button",{type:"button",title:e.i18nRegistry.translate("Neos.Neos.Ui:Main:rangeEditorMaximum"),onClick:()=>a(r.max),style:{opacity:r.max==g?1:.7},disabled:r.disabled},e.i18nRegistry.translate(r.maxLabel||l[r.max]||r.max+r.unit))))}function S(){let[e,t]=(0,s.useState)(0);return()=>t(i=>i+1)}var F=j(U);G("Carbon.RangeEditor:Editor",{},e=>{e.get("inspector").get("editors").set("Carbon.RangeEditor/Editor",{component:F})});})(); +(()=>{var H=Object.create;var x=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var M=(e,t)=>()=>(e&&(t=e(e=0)),t);var W=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var U=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of L(t))!R.call(e,a)&&a!==n&&x(e,a,{get:()=>t[a],enumerable:!(i=k(t,a))||i.enumerable});return e};var O=(e,t,n)=>(n=e!=null?H(j(e)):{},U(t||!e||!e.__esModule?x(n,"default",{value:e,enumerable:!0}):n,e));function d(e){return(...t)=>{if(window["@Neos:HostPluginAPI"]&&window["@Neos:HostPluginAPI"][`@${e}`])return window["@Neos:HostPluginAPI"][`@${e}`](...t);throw new Error("You are trying to read from a consumer api that hasn't been initialized yet!")}}var u=M(()=>{});var Z=W((xe,X)=>{u();X.exports=d("vendor")().React});var N=W((Oe,B)=>{u();B.exports=d("NeosProjectPackages")().NeosUiDecorators});u();var F=d("manifest");var s=O(Z()),V=O(N());var l={sliderHighlight:"carbon-rangeeditor-6mQFcW-sliderHighlight",slider:"carbon-rangeeditor-6mQFcW-slider",editorDisabled:"carbon-rangeeditor-6mQFcW-editorDisabled",valueLabel:"carbon-rangeeditor-6mQFcW-valueLabel",editorValue:"carbon-rangeeditor-6mQFcW-editorValue"};function z(e){var t,n,i="";if(typeof e=="string"||typeof e=="number")i+=e;else if(typeof e=="object")if(Array.isArray(e))for(t=0;t({i18nRegistry:e.get("i18n"),config:e.get("frontendConfiguration").get("Carbon.RangeEditor")})),P={options:{min:0,max:100,step:1,unit:"",minLabel:null,maxLabel:null,disabled:!1,valueLabelsFile:"",valueLabels:{}}};function T(e,t){let n=K(),i=o=>{a(o.target.value)},a=o=>{let{options:g}=e;o=(g.step||1)%1===0?parseInt(o,10):parseFloat(o,10),!isNaN(o)&&(o=Math.min(g.max,Math.max(g.min,o)),e.commit(o),n())},_=o=>{isNaN(o.key)&&o.preventDefault()},r={...P.options,...e.options},{value:c,highlight:Y,i18nRegistry:b}=e,y=c===0?"0":c||"",I=o=>o.toString().length,J=I(r.step)-1,Q=Math.max(I(r.min),I(r.max))+J+"ch",{valueLabels:m,valueLabelsFile:G}=r,C=c!=r.min&&c!=r.max,A=o=>m&&m[o]?m[o]:G?`${G}:${o}`:null,p=o=>{if(o==r.min){let g=r.minLabel||A(r.min)||r.min+r.unit;return b.translate(g)}if(o==r.max){let g=r.maxLabel||A(r.max)||r.max+r.unit;return b.translate(g)}return b.translate(A(o))},h=p(c);return s.default.createElement("div",{className:f(l.editor,r.disabled&&l.editorDisabled)},s.default.createElement("input",{type:"range",min:r.min,max:r.max,step:r.step,value:y,className:f(l.slider,Y&&l.sliderHighlight),onChange:i,disabled:r.disabled}),s.default.createElement("div",{className:l.editorValue},s.default.createElement("button",{type:"button",title:b.translate("Neos.Neos.Ui:Main:rangeEditorMinimum"),onClick:()=>a(r.min),style:{opacity:r.min==c?1:.7},disabled:r.disabled},p(r.min)),!C&&s.default.createElement("span",null,"\xA0"),h&&C&&s.default.createElement("span",{className:l.valueLabel},h),!h&&C&&s.default.createElement("span",null,s.default.createElement("input",{title:b.translate("Neos.Neos.Ui:Main:rangeEditorCurrentValue"),type:"text",onKeyPress:this.onKeyPress,onChange:this.handleChange,value:y,style:{width:Q},disabled:r.disabled}),r.unit),s.default.createElement("button",{type:"button",title:b.translate("Neos.Neos.Ui:Main:rangeEditorMaximum"),onClick:()=>a(r.max),style:{opacity:r.max==c?1:.7},disabled:r.disabled},p(r.max))))}function K(){let[e,t]=(0,s.useState)(0);return()=>t(n=>n+1)}var w=E(T);F("Carbon.RangeEditor:Editor",{},e=>{e.get("inspector").get("editors").set("Carbon.RangeEditor/Editor",{component:w})});})(); //# sourceMappingURL=Plugin.js.map diff --git a/Resources/Public/Plugin.js.map b/Resources/Public/Plugin.js.map index 2c31a36..0b533b6 100644 --- a/Resources/Public/Plugin.js.map +++ b/Resources/Public/Plugin.js.map @@ -1,7 +1,7 @@ { "version": 3, "sources": ["../../node_modules/.pnpm/@neos-project+neos-ui-extensibility@8.3.4/node_modules/@neos-project/neos-ui-extensibility/src/readFromConsumerApi.ts", "../../node_modules/.pnpm/@neos-project+neos-ui-extensibility@8.3.4/node_modules/@neos-project/neos-ui-extensibility/src/shims/vendor/react/index.js", "../../node_modules/.pnpm/@neos-project+neos-ui-extensibility@8.3.4/node_modules/@neos-project/neos-ui-extensibility/src/shims/neosProjectPackages/neos-ui-decorators/index.js", "../../node_modules/.pnpm/@neos-project+neos-ui-extensibility@8.3.4/node_modules/@neos-project/neos-ui-extensibility/src/index.ts", "../Private/RangeEditor/Editor/index.js", "../../node_modules/.pnpm/clsx@2.0.0/node_modules/clsx/dist/clsx.mjs", "../Private/RangeEditor/manifest.js"], - "sourcesContent": [null, null, null, null, "import React, { useState } from \"react\";\nimport { neos } from \"@neos-project/neos-ui-decorators\";\nimport style from \"./style.module.css\";\nimport clsx from \"clsx\";\n\nconst neosifier = neos((globalRegistry) => ({\n i18nRegistry: globalRegistry.get(\"i18n\"),\n config: globalRegistry.get(\"frontendConfiguration\").get(\"Carbon.RangeEditor\"),\n}));\n\nconst defaultProps = {\n options: {\n min: 0,\n max: 100,\n step: 1,\n unit: \"\",\n minLabel: null,\n maxLabel: null,\n disabled: false,\n valueLabels: {},\n },\n};\n\nfunction Editor(props, second) {\n const forceUpdate = useForceUpdate();\n\n const handleChange = (event) => {\n changeValue(event.target.value);\n };\n\n const changeValue = (value) => {\n const { options } = props;\n const useParseInt = (options.step || 1) % 1 === 0;\n value = useParseInt ? parseInt(value, 10) : parseFloat(value, 10);\n if (isNaN(value)) {\n return;\n }\n value = Math.min(options.max, Math.max(options.min, value));\n props.commit(value);\n\n forceUpdate();\n };\n\n const onKeyPress = (event) => {\n if (isNaN(event.key)) {\n event.preventDefault();\n }\n };\n\n const options = { ...defaultProps.options, ...props.options };\n const { value, highlight } = props;\n const valueAsString = value === 0 ? \"0\" : value || \"\";\n // Calculate the width of the input field based on the length of the min, max and step values\n const numLength = (value) => value.toString().length;\n const additionalStepLength = numLength(options.step) - 1;\n const styleWidth = Math.max(numLength(options.min), numLength(options.max)) + additionalStepLength + \"ch\";\n const valueLabels = options.valueLabels;\n\n const showMiddle = !!(value != options.min && value != options.max);\n\n return (\n
\n \n
\n changeValue(options.min)}\n style={{ opacity: options.min == value ? 1 : 0.7 }}\n disabled={options.disabled}\n >\n {props.i18nRegistry.translate(\n options.minLabel || valueLabels[options.min] || options.min + options.unit,\n )}\n \n {!showMiddle &&  }\n {valueLabels[value] && showMiddle && (\n {props.i18nRegistry.translate(valueLabels[value])}\n )}\n {!valueLabels[value] && showMiddle && (\n \n \n {options.unit}\n \n )}\n changeValue(options.max)}\n style={{ opacity: options.max == value ? 1 : 0.7 }}\n disabled={options.disabled}\n >\n {props.i18nRegistry.translate(\n options.maxLabel || valueLabels[options.max] || options.max + options.unit,\n )}\n \n
\n
\n );\n}\n\n//create your forceUpdate hook\nfunction useForceUpdate() {\n const [value, setValue] = useState(0); // integer state\n return () => setValue((value) => value + 1); // update state to force render\n // A function that increment \uD83D\uDC46\uD83C\uDFFB the previous state like here\n // is better than directly setting `setValue(value + 1)`\n}\n\nexport default neosifier(Editor);\n", "function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t {\n const editorsRegistry = globalRegistry.get(\"inspector\").get(\"editors\");\n\n editorsRegistry.set(\"Carbon.RangeEditor/Editor\", {\n component: Editor,\n });\n});\n"], - "mappings": "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", - "names": ["readFromConsumerApi", "key", "args", "init_readFromConsumerApi", "__esmMin", "require_react", "__commonJSMin", "exports", "module", "init_readFromConsumerApi", "readFromConsumerApi", "require_neos_ui_decorators", "__commonJSMin", "exports", "module", "init_readFromConsumerApi", "readFromConsumerApi", "init_readFromConsumerApi", "dist_default", "readFromConsumerApi", "import_react", "import_neos_ui_decorators", "r", "f", "n", "clsx", "clsx_default", "neosifier", "globalRegistry", "defaultProps", "Editor", "props", "second", "forceUpdate", "useForceUpdate", "handleChange", "event", "changeValue", "value", "options", "onKeyPress", "highlight", "valueAsString", "numLength", "additionalStepLength", "styleWidth", "valueLabels", "showMiddle", "React", "clsx_default", "style_default", "setValue", "Editor_default", "dist_default", "globalRegistry", "Editor_default"] + "sourcesContent": [null, null, null, null, "import React, { useState } from \"react\";\nimport { neos } from \"@neos-project/neos-ui-decorators\";\nimport style from \"./style.module.css\";\nimport clsx from \"clsx\";\n\nconst neosifier = neos((globalRegistry) => ({\n i18nRegistry: globalRegistry.get(\"i18n\"),\n config: globalRegistry.get(\"frontendConfiguration\").get(\"Carbon.RangeEditor\"),\n}));\n\nconst defaultProps = {\n options: {\n min: 0,\n max: 100,\n step: 1,\n unit: \"\",\n minLabel: null,\n maxLabel: null,\n disabled: false,\n valueLabelsFile: \"\",\n valueLabels: {},\n },\n};\n\nfunction Editor(props, second) {\n const forceUpdate = useForceUpdate();\n\n const handleChange = (event) => {\n changeValue(event.target.value);\n };\n\n const changeValue = (value) => {\n const { options } = props;\n const useParseInt = (options.step || 1) % 1 === 0;\n value = useParseInt ? parseInt(value, 10) : parseFloat(value, 10);\n if (isNaN(value)) {\n return;\n }\n value = Math.min(options.max, Math.max(options.min, value));\n props.commit(value);\n\n forceUpdate();\n };\n\n const onKeyPress = (event) => {\n if (isNaN(event.key)) {\n event.preventDefault();\n }\n };\n\n const options = { ...defaultProps.options, ...props.options };\n const { value, highlight, i18nRegistry } = props;\n const valueAsString = value === 0 ? \"0\" : value || \"\";\n // Calculate the width of the input field based on the length of the min, max and step values\n const numLength = (value) => value.toString().length;\n const additionalStepLength = numLength(options.step) - 1;\n const styleWidth = Math.max(numLength(options.min), numLength(options.max)) + additionalStepLength + \"ch\";\n\n const { valueLabels, valueLabelsFile } = options;\n const showMiddle = !!(value != options.min && value != options.max);\n const getValueLabel = (value) => {\n if (valueLabels && valueLabels[value]) {\n return valueLabels[value];\n }\n if (valueLabelsFile) {\n return `${valueLabelsFile}:${value}`;\n }\n return null;\n };\n\n const getLabel = (value) => {\n if (value == options.min) {\n const label = options.minLabel || getValueLabel(options.min) || options.min + options.unit;\n return i18nRegistry.translate(label);\n }\n if (value == options.max) {\n const label = options.maxLabel || getValueLabel(options.max) || options.max + options.unit;\n return i18nRegistry.translate(label);\n }\n return i18nRegistry.translate(getValueLabel(value));\n };\n\n const currentLabel = getLabel(value);\n\n return (\n
\n \n
\n changeValue(options.min)}\n style={{ opacity: options.min == value ? 1 : 0.7 }}\n disabled={options.disabled}\n >\n {getLabel(options.min)}\n \n {!showMiddle &&  }\n {currentLabel && showMiddle && {currentLabel}}\n {!currentLabel && showMiddle && (\n \n \n {options.unit}\n \n )}\n changeValue(options.max)}\n style={{ opacity: options.max == value ? 1 : 0.7 }}\n disabled={options.disabled}\n >\n {getLabel(options.max)}\n \n
\n
\n );\n}\n\n//create your forceUpdate hook\nfunction useForceUpdate() {\n const [value, setValue] = useState(0); // integer state\n return () => setValue((value) => value + 1); // update state to force render\n // A function that increment \uD83D\uDC46\uD83C\uDFFB the previous state like here\n // is better than directly setting `setValue(value + 1)`\n}\n\nexport default neosifier(Editor);\n", "function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e))for(t=0;t {\n const editorsRegistry = globalRegistry.get(\"inspector\").get(\"editors\");\n\n editorsRegistry.set(\"Carbon.RangeEditor/Editor\", {\n component: Editor,\n });\n});\n"], + "mappings": "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", + "names": ["readFromConsumerApi", "key", "args", "init_readFromConsumerApi", "__esmMin", "require_react", "__commonJSMin", "exports", "module", "init_readFromConsumerApi", "readFromConsumerApi", "require_neos_ui_decorators", "__commonJSMin", "exports", "module", "init_readFromConsumerApi", "readFromConsumerApi", "init_readFromConsumerApi", "dist_default", "readFromConsumerApi", "import_react", "import_neos_ui_decorators", "r", "f", "n", "clsx", "clsx_default", "neosifier", "globalRegistry", "defaultProps", "Editor", "props", "second", "forceUpdate", "useForceUpdate", "handleChange", "event", "changeValue", "value", "options", "onKeyPress", "highlight", "i18nRegistry", "valueAsString", "numLength", "additionalStepLength", "styleWidth", "valueLabels", "valueLabelsFile", "showMiddle", "getValueLabel", "getLabel", "label", "currentLabel", "React", "clsx_default", "style_default", "setValue", "Editor_default", "dist_default", "globalRegistry", "Editor_default"] }