Merge pull request #55 from mlakatkou/GS-3270

[update] zooming article

Author: AlexKlimenkov

docs/guides/zooming.md

@@ -5,70 +5,76 @@ sidebar_label: "Zooming"
 
 # Zooming
 
-
 dhtmlxGantt provides a built-in module for handy managing of time scale zooming. In case you want to customize the default zooming behaviour, there is a [flexible API](guides/zoom.md) that allows you to implement the ability to change the settings of time scale dynamically.
 
 ## Built-in zooming module
 
-
-The embedded [zooming module](guides/zoom.md) is declared in the **gantt.ext.zoom** extension. To enable the module, you need to call **gantt.ext.zoom.init(zoomConfig)** and pass 
-a **zoomConfig** object with configuration settings that contains an array of zooming levels. For example:
+The embedded [zooming module](guides/zoom.md) is declared in the `gantt.ext.zoom` extension. To enable the module, you need to call `gantt.ext.zoom.init(zoomConfig)` and pass
+a `zoomConfig` object with configuration settings that contains an array of zooming levels. For example:
 
 ~~~js
-var zoomConfig = {
+const zoomConfig = {
     levels: [
-      {
-        name:"day",
-        scale_height: 27,
-        min_column_width:80,
-        scales:[
-            {unit: "day", step: 1, format: "%d %M"}
-        ]
-      },
-      {
-         name:"week",
-         scale_height: 50,
-         min_column_width:50,
-         scales:[
-          {unit: "week", step: 1, format: function (date) {
-           var dateToStr = gantt.date.date_to_str("%d %M");
-           var endDate = gantt.date.add(date, 6, "day");
-           var weekNum = gantt.date.date_to_str("%W")(date);
-           return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
-           }},
-           {unit: "day", step: 1, format: "%j %D"}
-         ]
-       },
-       {
-         name:"month",
-         scale_height: 50,
-         min_column_width:120,
-         scales:[
-             {unit: "month", format: "%F, %Y"},
-             {unit: "week", format: "Week #%W"}
-         ]
+        {
+            name: "day",
+            scale_height: 27,
+            min_column_width: 80,
+            scales: [
+                { unit: "day", step: 1, format: "%d %M" }
+            ]
+        },
+        {
+            name: "week",
+            scale_height: 50,
+            min_column_width: 50,
+            scales: [
+                {
+                    unit: "week",
+                    step: 1,
+                    format: (date) => {
+                        const formatDate = gantt.date.date_to_str("%d %M");
+                        const endDate = gantt.date.add(date, 6, "day");
+                        const weekNumber = gantt.date.date_to_str("%W")(date);
+                        return `#${weekNumber}, ${formatDate(date)} - ${formatDate(endDate)}`;
+                    }
+                },
+                { unit: "day", step: 1, format: "%j %D" }
+            ]
+        },
+        {
+            name: "month",
+            scale_height: 50,
+            min_column_width: 120,
+            scales: [
+                { unit: "month", format: "%F, %Y" },
+                { unit: "week", format: "Week #%W" }
+            ]
         },
         {
-         name:"quarter",
-         height: 50,
-         min_column_width:90,
-         scales:[
-          {unit: "month", step: 1, format: "%M"},
-          {
-           unit: "quarter", step: 1, format: function (date) {
-            var dateToStr = gantt.date.date_to_str("%M");
-            var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
-            return dateToStr(date) + " - " + dateToStr(endDate);
-           }
-         }
-          ]},
+            name: "quarter",
+            height: 50,
+            min_column_width: 90,
+            scales: [
+                { unit: "month", step: 1, format: "%M" },
+                {
+                    unit: "quarter",
+                    step: 1,
+                    format: (date) => {
+                        const formatDate = gantt.date.date_to_str("%M");
+                        const endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
+                        return `${formatDate(date)} - ${formatDate(endDate)}`;
+                    }
+                }
+            ]
+        },
         {
-          name:"year",
-          scale_height: 50,
-          min_column_width: 30,
-          scales:[
-              {unit: "year", step: 1, format: "%Y"}
-        ]}
+            name: "year",
+            scale_height: 50,
+            min_column_width: 30,
+            scales: [
+                { unit: "year", step: 1, format: "%Y" }
+            ]
+        }
     ]
 };
 
@@ -79,66 +85,63 @@ gantt.ext.zoom.init(zoomConfig);
 The detailed information about the zooming module and its API is given in the article [Zoom Extension](guides/zoom.md).
 :::
 
-
-[Mouse wheel zoom](https://docs.dhtmlx.com/gantt/samples/03_scales/14_scale_zoom_by_wheelmouse.html)
-
+**Related sample**: [Mouse wheel zoom](https://docs.dhtmlx.com/gantt/samples/03_scales/14_scale_zoom_by_wheelmouse.html)
 
 ## Custom zooming settings
 
-
 In case you don't want to use the zooming module and prefer controlling scale settings manually, you can do so via corresponding configuration options.
 
 In fact, implementing a zooming feature means defining several presets of the time scale configuration (zoom levels) and providing the user with the ability to switch between them.
 
 You'll need the following settings to configure the time scale:
 
-- [gantt.config.scales](api/config/scales.md) - allows setting any number of time scale rows.
-
-- [gantt.config.min_column_width](api/config/min_column_width.md), [gantt.config.scale_height](api/config/scale_height.md) - the scale column width and the overall height of the time scale.
+- [`gantt.config.scales`](api/config/scales.md) - allows setting any number of time scale rows
+- [`gantt.config.min_column_width`](api/config/min_column_width.md), [`gantt.config.scale_height`](api/config/scale_height.md) - the scale column width and the overall height of the time scale
 
 Let's consider the following presets:
 
 ~~~js
 /* global gantt */
-function setScaleConfig(level) {
+const setScaleConfig = (level) => {
     switch (level) {
         case "day":
             gantt.config.scales = [
-                  {unit: "day", step: 1, format: "%d %M"}
+                { unit: "day", step: 1, format: "%d %M" }
             ];
             gantt.config.scale_height = 27;
             break;
-        case "week":
-            var weekScaleTemplate = function (date) {
-              var dateToStr = gantt.date.date_to_str("%d %M");
-              var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
-              return dateToStr(date) + " - " + dateToStr(endDate);
+        case "week": {
+            const formatWeekScale = (date) => {
+                const formatDate = gantt.date.date_to_str("%d %M");
+                const endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
+                return `${formatDate(date)} - ${formatDate(endDate)}`;
             };
-             gantt.config.scales = [
-                {unit: "week", step: 1, format: weekScaleTemplate},
-                {unit: "day", step: 1, format: "%D"}
+
+            gantt.config.scales = [
+                { unit: "week", step: 1, format: formatWeekScale },
+                { unit: "day", step: 1, format: "%D" }
             ];
             gantt.config.scale_height = 50;
             break;
+        }
         case "month":
-             gantt.config.scales = [
-                {unit: "month", step: 1, format: "%F, %Y"},
-                {unit: "day", step: 1, format: "%j, %D"}
+            gantt.config.scales = [
+                { unit: "month", step: 1, format: "%F, %Y" },
+                { unit: "day", step: 1, format: "%j, %D" }
             ];
             gantt.config.scale_height = 50;
             break;
         case "year":
             gantt.config.scales = [
-                {unit: "year", step: 1, format: "%Y"},
-                {unit: "month", step: 1, format: "%M"}
+                { unit: "year", step: 1, format: "%Y" },
+                { unit: "month", step: 1, format: "%M" }
             ];
             gantt.config.scale_height = 90;
             break;
     }
-}
+};
 ~~~
 
-
 The described function can configure the gantt object by one of the four predefined configs, from the "day" to "year" time scale.
 Gantt will require a complete repaint in order to display the change of configuration:
 
@@ -147,30 +150,25 @@ setScaleConfig("year");
 gantt.init("gantt_here");
 ~~~
 
-
 Then you can implement a UI for the user to switch the zoom level:
 
-
 ~~~html
 <label><input type="radio" name="scale" value="day" checked/>Day scale</label>
 <label><input type="radio" name="scale" value="week"/>Week scale</label>
 <label><input type="radio" name="scale" value="month"/>Month scale</label>
-<label><input type="radio" name="scale" value="year"/>Year scale</label> 
+<label><input type="radio" name="scale" value="year"/>Year scale</label>
 ~~~
 
-
 ~~~js
-var els = document.querySelectorAll("input[name='scale']");
-for (var i = 0; i < els.length; i++) {
-    els[i].onclick = function(e){
-        var el = e.target;
-        var value = el.value;
-        setScaleConfig(value);
+const scaleInputs = document.querySelectorAll("input[name='scale']");
+
+scaleInputs.forEach((input) => {
+    input.onclick = (event) => {
+        const selectedScale = event.target.value;
+        setScaleConfig(selectedScale);
         gantt.render();
     };
-}
+});
 ~~~
 
-
-[Dynamic scales](https://docs.dhtmlx.com/gantt/samples/03_scales/05_dynamic_scales.html)
-
+**Related sample**: [Dynamic scales](https://docs.dhtmlx.com/gantt/samples/03_scales/05_dynamic_scales.html)