Merge pull request #68 from mlakatkou/GS-3308

[update] zoom article

Author: AlexKlimenkov

docs/guides/zoom.md

@@ -5,16 +5,13 @@ sidebar_label: "Zoom Extension"
 
 # Zoom Extension
 
-
-
-You can read details about the Zoom extension in the [Zooming](guides/zooming.md) article. The current article provides the API reference of the **zoom** object:
-
+You can read details about the Zoom extension in the [Zooming](guides/zooming.md) article. The current article provides the API reference of the `zoom` object:
 
 ## Zoom Levels
 
 The Zoom extension uses a set of the scale settings and allows quickly switching between them.
 
-**ZoomLevel** is an object that contains the scale settings. It has the following properties:
+`ZoomLevel` is an object that contains the scale settings. It has the following properties:
 
 - <span class="subproperty">**name**</span> - (*string*) - the name of the level
 - <span class="subproperty">**scale_height?**</span> - (*number*) - the height of the scale
@@ -25,7 +22,7 @@ The Zoom extension uses a set of the scale settings and allows quickly switching
 
 ## Methods
 
-- <span class="submethod">**init (zoomConfig): void**</span> - initializes the extension with the provided configuration.
+- <span class="submethod">**init(zoomConfig): void**</span> - initializes the extension with the provided configuration.
     - **_zoomConfig_** - (*object*) - an object with configuration settings that contains the *levels* array of zooming levels and a number of additional properties:
         - **_levels_** - (*ZoomLevel[]*) - required, an array of zooming levels
         - **_handler?_** - (*Function*): void - allows specifying a custom handler of the mouse wheel to work with zooming manually
@@ -40,111 +37,115 @@ The Zoom extension uses a set of the scale settings and allows quickly switching
         - **_trigger?_** - (*string | null | undefined*) - the trigger of zooming: "wheel" | null | undefined 
         - **_element?_** - (*HTMLElement | Function*): HTMLElement - a DOM element over which zooming is triggered or a function that returns a DOM element
 
-These are two examples of setting the **zoom** configuration:
+These are two examples of setting the `zoom` configuration:
 
 ~~~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 dateToStr = 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}, ${dateToStr(date)} - ${dateToStr(endDate)}`;
+                    }
+                },
+                { unit: "day", step: 1, format: "%j %D" }
+            ]
         },
         {
-         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: "month",
+            scale_height: 50,
+            min_column_width: 120,
+            scales: [{ unit: "month", format: "%F, %Y" }, { unit: "week", format: "Week #%W" }]
+        },
         {
-          name:"year",
-          scale_height: 50,
-          min_column_width: 30,
-          scales:[
-              {unit: "year", step: 1, format: "%Y"}
-        ]}
+            name: "quarter",
+            height: 50,
+            min_column_width: 90,
+            scales: [
+                { unit: "month", step: 1, format: "%M" },
+                {
+                    unit: "quarter",
+                    step: 1,
+                    format: (date) => {
+                        const dateToStr = gantt.date.date_to_str("%M");
+                        const endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
+
+                        return `${dateToStr(date)} - ${dateToStr(endDate)}`;
+                    }
+                }
+            ]
+        },
+        {
+            name: "year",
+            scale_height: 50,
+            min_column_width: 30,
+            scales: [{ unit: "year", step: 1, format: "%Y" }]
+        }
     ]
 };
 
 gantt.ext.zoom.init(zoomConfig);
 
 
 // or, in a more simple way levels can be presented as scale arrays
-var hourToStr = gantt.date.date_to_str("%H:%i");
-var hourRangeFormat = function(step){
-    return function(date){
-        var intervalEnd = new Date(gantt.date.add(date, step, "hour") - 1)
-        return hourToStr(date) + " - " + hourToStr(intervalEnd);
+const hourToStr = gantt.date.date_to_str("%H:%i");
+const hourRangeFormat = (step) => {
+    return (date) => {
+        const intervalEnd = new Date(gantt.date.add(date, step, "hour") - 1);
+
+        return `${hourToStr(date)} - ${hourToStr(intervalEnd)}`;
     };
 };
-var zoomConfig = {
+const simpleZoomConfig = {
     levels: [
         [
-            { unit: "month", format: "%M %Y", step: 1},
+            { unit: "month", format: "%M %Y", step: 1 }
         ],
         [
-            { unit: "month", format: "%M %Y", step: 1},
-            { unit: "day", format: "%d %M", step: 1}
+            { unit: "month", format: "%M %Y", step: 1 },
+            { unit: "day", format: "%d %M", step: 1 }
         ],
         [
-            { unit: "day", format: "%d %M", step: 1},
-            { unit: "hour", format: hourRangeFormat(12), step: 12}
+            { unit: "day", format: "%d %M", step: 1 },
+            { unit: "hour", format: hourRangeFormat(12), step: 12 }
         ],
         [
-            {unit: "day", format: "%d %M",step: 1},
-            {unit: "hour",format: hourRangeFormat(6),step: 6}
+            { unit: "day", format: "%d %M", step: 1 },
+            { unit: "hour", format: hourRangeFormat(6), step: 6 }
         ],
         [
             { unit: "day", format: "%d %M", step: 1 },
-            { unit: "hour", format: "%H:%i", step: 1}
+            { unit: "hour", format: "%H:%i", step: 1 }
         ]
     ]
-}
+};
 
-gantt.ext.zoom.init(zoomConfig);
+gantt.ext.zoom.init(simpleZoomConfig);
 ~~~
 
-- <span class="submethod">**getCurrentLevel (): number**</span> - returns the number (index) of the current zooming level
+- <span class="submethod">**getCurrentLevel(): number**</span> - returns the number (index) of the current zooming level
 
 ~~~js
 gantt.ext.zoom.getCurrentLevel();
 ~~~
 
-- <span class="submethod">**setLevel (level): void**</span> - switches to the specified zooming level.
+- <span class="submethod">**setLevel(level): void**</span> - switches to the specified zooming level.
     - **_level_** - (*number | string*) - The level is defined either by a string (the name of the level from the config, e.g. "year"), or by its number in the array of levels
 
 ~~~js
@@ -153,15 +154,15 @@ gantt.ext.zoom.setLevel("year");
 gantt.ext.zoom.setLevel(5);
 ~~~
 
-- <span class="submethod">**getLevels (): ZoomLevel[]**</span> - allows getting all zooming levels
+- <span class="submethod">**getLevels(): ZoomLevel[]**</span> - allows getting all zooming levels
 
 ~~~js
 gantt.ext.zoom.getLevels();
 ~~~
 
-Returns an array of zooming levels (*ZoomLevels[]*) passed to the **init()** method that initializes the extension.
+Returns an array of zooming levels (*ZoomLevels[]*) passed to `init()`, which initializes the extension.
 
-- <span class="submethod">**zoomIn (): void**</span> - increases the current zooming level
+- <span class="submethod">**zoomIn(): void**</span> - increases the current zooming level
 
 ~~~js
 gantt.ext.zoom.zoomIn();
@@ -170,10 +171,10 @@ gantt.ext.zoom.zoomIn();
 For the same purpose you can also use:
 
 ~~~js
-gantt.ext.zoom.setLevel(zoom.getCurrentLevel() - 1)
+gantt.ext.zoom.setLevel(gantt.ext.zoom.getCurrentLevel() - 1);
 ~~~
 
-- <span class="submethod">**zoomOut (): void**</span> - decreases the current zooming level
+- <span class="submethod">**zoomOut(): void**</span> - decreases the current zooming level
 
 ~~~js
 gantt.ext.zoom.zoomOut();
@@ -182,36 +183,36 @@ gantt.ext.zoom.zoomOut();
 For the same purpose you can also use:
 
 ~~~js
-gantt.ext.zoom.setLevel(zoom.getCurrentLevel() + 1)
+gantt.ext.zoom.setLevel(gantt.ext.zoom.getCurrentLevel() + 1);
 ~~~
 
-- <span class="submethod">**attachEvent (name, handler): string**</span> - attaches an event handler
+- <span class="submethod">**attachEvent(name, handler): string**</span> - attaches an event handler
     - **_name_** - (*string*) - the name of the event handler
     - **_handler_** - (*Function*) - the function that will be called when the event fires
 
-- <span class="submethod">**detachEvent (id): void**</span> - detaches a handler from an event
+- <span class="submethod">**detachEvent(id): void**</span> - detaches a handler from an event
     - **_id_** - (*string*) - the id of the attached event handler
 
-- <span class="submethod">**callEvent (name, params): boolean**</span> - calls an inner event
+- <span class="submethod">**callEvent(name, params): boolean**</span> - calls an inner event
     - **_name_** - (*string*) - the event's name, case-insensitive
     - **_params_** - (*Array&lt;any&gt;*) - optional, an array of the event-related data
 
-- <span class="submethod">**checkEvent (name): boolean**</span> - checks whether an event has some handler(s) specified
+- <span class="submethod">**checkEvent(name): boolean**</span> - checks whether an event has some handler(s) specified
     - **_name_** - (*string*) - the event's name
 
 Returns <i>true</i>, if some handler is specified for the event.
 
 ## Events
 
 - **<span class="eventname">onAfterZoom</span>** -  fires during switching of the zooming level.
-The arguments are: 
+The arguments are:
 <span class="eventarguments">
     - **_level_** - (*number | string*) - the number of the level
     - **_config_** - (*ZoomLevel*) - the config of the level
 </span>
 
 ~~~js
-gantt.ext.zoom.attachEvent("onAfterZoom", function(level, config){ 
-    document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true;
-}); 
+gantt.ext.zoom.attachEvent("onAfterZoom", (level, config) => {
+    document.querySelector(`.gantt_radio[value='${config.name}']`).checked = true;
+});
 ~~~