Configurable separator

Migrations/ContentRepository/Version20230626175747.yaml

@@ -0,0 +1,30 @@
+up:
+  comments: 'Migrate separator to old default'
+  migration:
+    -
+      filters:
+        -
+          type: 'NodeType'
+          settings:
+            nodeType: 'VIVOMEDIA.CountUp:CountUp'
+      transformations:
+        -
+          type: 'AddNewProperty'
+          settings:
+            newPropertyName: 'separator'
+            value: ','
+
+down:
+  comments: 'Revert coloring bright to white'
+  migration:
+    -
+      filters:
+        -
+          type: 'NodeType'
+          settings:
+            nodeType: 'VIVOMEDIA.CountUp:CountUp'
+      transformations:
+        -
+          type: 'RemoveProperty'
+          settings:
+            property: 'separator'

Configuration/NodeTypes.CountUp.yaml → NodeTypes/CountUp.yaml

@@ -60,3 +60,11 @@
         reloadIfChanged: true
         inspector:
           group: content
+    separator:
+      type: string
+      defaultValue: ''
+      ui:
+        label: i18n
+        reloadIfChanged: true
+        inspector:
+          group: content

README.md

@@ -38,7 +38,12 @@ You can use the NodeType `VIVOMEDIA.CountUp:CountUp` to add the CountUp function
 The AFX component `VIVOMEDIA.CountUp:CountUpComponent` allows you to integrate the CountUp functionality to your own packages.
 
 
-
+# Upgrade from 1.0
+As the thousend separator default `,` has been removed and made configurable, you need to run the node migration if you want to keep the `,` as separator.
+```
+# Migrate 1000000 => 1,000,000
+./flow node:migrate 20230626175747
+```
 
 
 # Screenshots

Resources/Private/Fusion/Components/CountUp.fusion

@@ -8,6 +8,7 @@ prototype(VIVOMEDIA.CountUp:CountUpComponent) < prototype(Neos.Fusion:Component)
 	start = ${0}
 	end = ${0}
 	duration = ${0}
+	separator = ${','}
 
 	renderer = afx`
 		<span
@@ -17,6 +18,7 @@ prototype(VIVOMEDIA.CountUp:CountUpComponent) < prototype(Neos.Fusion:Component)
 			data-prefix={props.prefix}
 			data-suffix={props.suffix}
 			data-duration={props.duration}
+			data-separator={props.separator}
 		>{props.prefix}{props.end}{props.suffix}</span>
 	`
 }

Resources/Private/Fusion/NodeTypes/CountUp.fusion

@@ -12,6 +12,7 @@ prototype(VIVOMEDIA.CountUp:CountUp) < prototype(Neos.Neos:ContentComponent) {
 				duration={q(node).property('duration')}
 				prefix={q(node).property('prefix')}
 				suffix={q(node).property('suffix')}
+				separator={q(node).property('separator')}
 			/>
 			<Neos.Neos:Editable property="text" />
 		</div>

Resources/Private/Translations/de/NodeTypes/CountUp.xlf

@@ -34,6 +34,10 @@
 				<source>Suffix</source>
 				<target xml:lang="de" state="translated">Suffix</target>
 			</trans-unit>
+			<trans-unit id="properties.separator" xml:space="preserve">
+				<source>Separator</source>
+				<target xml:lang="de" state="translated">Tausendertrenner</target>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>

Resources/Private/Translations/en/NodeTypes/CountUp.xlf

@@ -26,6 +26,9 @@
 			<trans-unit id="properties.suffix" xml:space="preserve">
 				<source>Suffix</source>
 			</trans-unit>
+			<trans-unit id="properties.separator" xml:space="preserve">
+				<source>Separator</source>
+			</trans-unit>
 		</body>
 	</file>
 </xliff>

Resources/Public/JavaScript/countUp.js

@@ -27,7 +27,8 @@ $( document ).ready(function() {
                     startVal: $el.data('start'),
                     prefix: $el.data('prefix'),
                     suffix: $el.data('suffix'),
-                    duration: $el.data('duration') ? $el.data('duration') / 1000 : 2
+                    duration: $el.data('duration') ? $el.data('duration') / 1000 : 2,
+                    separator: $el.data('separator') ? $el.data('separator') : ''
                 });
                 $(el).addClass('started').css('visibility', 'visible');
                 demo.start();