add virtual horizontal multiplier

jalibu · Jun 19, 2021 · da1393b · da1393b
1 parent f2bcd88
commit da1393b
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 21 deletions.
diff --git a/MMM-Jast.js b/MMM-Jast.js
diff --git a/README.md b/README.md
@@ -56,6 +56,7 @@ To use this module, add it to the modules array in the `MagicMirror/config/confi
 		showDepotGrowth: false,
 		numberDecimalsValues: 2,
 		numberDecimalsPercentages: 1,
+		virtualHorizontalMultiplier: 2,
 		stocks: [
 			{ name: "BASF", symbol: "BAS.DE", quantity: 10 },
 			{ name: "SAP", symbol: "SAP.DE", quantity: 15 },
@@ -66,25 +67,26 @@ To use this module, add it to the modules array in the `MagicMirror/config/confi
 }
 ```
 ### Options
-| Field    					| Description 																	| Default 				|
-| -------- 					| -------- 																		| -------- 				|
-| updateIntervalInSeconds   | (Integer) Interval to refresh stock data from server.	(min. 120)				| 300   	|
-| fadeSpeedInSeconds		| (Integer) Animation speed for ticker.	Higher value: vertical -> faster // horizontal -> slower		| 3.5   				|
-| stocks					| (Array<Stock>) Array of stocks to be displayed								| Sample set			|
-| scroll					| (String) Animation direction for ticker. Values: none, vertical or horizontal	| "vertical"  			|
-| maxWidth					| (String) CSS style to limit ticker width for vertical styles					| "100%"   				|
-| numberDecimalsValues		| (Number) Number of decimals for stock values  								| 2   	     			|
-| numberDecimalsPercentages	| (Number) Number of decimals for percentages									| 1	    				|
-| currencyStyle				| (String) Style of currency. Possible values: "code" (EUR), "symbol" (€), "name" (Euro)				| "code"	  			|
-| showColors				| (Boolean) Colorize positive numbers in green, negatives in red				| true   				|
-| showCurrency				| (Boolean) Show stocks currency												| true   				|
-| showChangePercent			| (Boolean) Show stocks change against last close in percent					| true   				|
-| showChangeValue			| (Boolean) Show stocks change against last close in absolute value				| false   				|
-| showChangeValueCurrency	| (Boolean) Show currency for change value										| false   				|
-| showDepot					| (Boolean) Show depot value													| false   				|
-| showDepotGrowth			| (Boolean) Show depot value growth summary										| false   				|
-| showDepotGrowthPercent	| (Boolean) Show depot value growth summary in percent							| false   				|
-| useGrouping				| (Boolean) Add grouping to high value numbers (i.e. BTC 60,000.00 EUR)			| false   				|
+| Field    						| Description 																		| Default 		|
+| -------- 						| -------- 																			| -------- 		|
+| updateIntervalInSeconds 	  	| (Integer) Interval to refresh stock data from server.	(min. 120)					| 300   		|
+| fadeSpeedInSeconds			| (Integer) Animation speed for ticker.	Higher value: vertical -> faster // horizontal -> slower	| 3.5		|
+| stocks						| (Array<Stock>) Array of stocks to be displayed									| Sample set	|
+| scroll						| (String) Animation direction for ticker. Values: none, vertical or horizontal		| "vertical"  	|
+| maxWidth						| (String) CSS style to limit ticker width for vertical styles						| "100%"   		|
+| numberDecimalsValues			| (Number) Number of decimals for stock values  									| 2   	     	|
+| numberDecimalsPercentages		| (Number) Number of decimals for percentages										| 1	    		|
+| currencyStyle					| (String) Style of currency. Possible values: "code" (EUR), "symbol" (€), "name" (Euro)			| "code"	|
+| showColors					| (Boolean) Colorize positive numbers in green, negatives in red					| true   		|
+| showCurrency					| (Boolean) Show stocks currency													| true   		|
+| showChangePercent				| (Boolean) Show stocks change against last close in percent						| true   		|
+| showChangeValue				| (Boolean) Show stocks change against last close in absolute value					| false   		|
+| showChangeValueCurrency		| (Boolean) Show currency for change value											| false   		|
+| showDepot						| (Boolean) Show depot value														| false   		|
+| showDepotGrowth				| (Boolean) Show depot value growth summary											| false   		|
+| showDepotGrowthPercent		| (Boolean) Show depot value growth summary in percent								| false   		|
+| useGrouping					| (Boolean) Add grouping to high value numbers (i.e. BTC 60,000.00 EUR)				| false   		|
+| virtualHorizontalMultiplier	| (Number) Virtually repeats the stocklist in horizontal mode to avoid whitespaces	| 2   			|
 
 ### Stock Object
 | Field    			| Description 														| Example 	|

diff --git a/src/client/Client.ts b/src/client/Client.ts
@@ -27,7 +27,8 @@ Module.register("MMM-Jast", {
     showChangeValueCurrency: false,
     showDepot: false,
     showDepotGrowth: false,
-    showDepotGrowthPercent: false
+    showDepotGrowthPercent: false,
+    virtualHorizontalMultiplier: 2
   } as Config,
 
   getStyles() {

diff --git a/src/models/Config.ts b/src/models/Config.ts
@@ -18,6 +18,7 @@ export type Config = {
   showDepot: boolean
   showDepotGrowth: boolean
   showDepotGrowthPercent: boolean
+  virtualHorizontalMultiplier: number
 }
 
 type Stock = {

diff --git a/templates/HorizontalStockList.njk b/templates/HorizontalStockList.njk
@@ -3,6 +3,7 @@
 {% macro render(num="1") %}
   <p class="jast-hticker jast-ticker-no{{ num }}">
     <span class="jast-tickerframe">
+    {% for i in range(0, config.virtualHorizontalMultiplier) -%}
     {% for stock in stocks %}
       <span class="jast-stock">{{ utils.getStockName(stock) }}:
         {% if utils.getStockChange(stock) > 0 %}
@@ -48,6 +49,7 @@
           {% endfor %}
         </span>
       {% endif %}
+      {% endfor %}
     </span>
   </p>
 {% endmacro %}