[gnome-devel-docs] tour: Modernise JS usage

[Florian Müllner <fmuellner src gnome org>]

commit 351cbb2e7bbc90df5d11df4cb15a493838c2af4b
Author: Florian Müllner <fmuellner gnome org>
Date:   Sat Nov 25 00:22:12 2017 +0100

    tour: Modernise JS usage
    
    As GJS was updated to use newer SpiderMonkey versions, it is now
    possible to use more modern language features and less non-standard
    modules such as Lang. Take advantage of that and update the code
    examples to follow the recommendations in ptomato's GUADEC talk[0].
    
    [0] https://ptomato.wordpress.com/2017/07/30/modern-javascript-in-gnome-guadec-2017-talk/
    
    https://bugzilla.gnome.org/show_bug.cgi?id=791111

 platform-overview/C/tour-events.page     |   20 +++++++++-----------
 platform-overview/C/tour-get_object.page |    4 ++--
 platform-overview/C/tour-gjs.page        |    7 ++++---
 platform-overview/C/tour-summary.js      |   24 +++++++++++-------------
 4 files changed, 26 insertions(+), 29 deletions(-)
---
diff --git a/platform-overview/C/tour-events.page b/platform-overview/C/tour-events.page
index 7e9940a..9f94e6d 100644
--- a/platform-overview/C/tour-events.page
+++ b/platform-overview/C/tour-events.page
@@ -32,32 +32,30 @@
 
   <p>Gtk has a set of predefined events that you can use in your application.</p>
   <example>
-    <p>Declare <code>HelloWorld</code> as a new <code>Lang</code> class.
-    Gjs requires classes to have the Name property defined.</p>
+    <p>Declare <code>HelloWorld</code> as a new class.</p>
 
     <code><![CDATA[
-const HelloWorld = new Lang.Class({
-    Name: 'HelloWorld',
+class HelloWorld {
 ]]></code>
 
-    <p><code>_init</code> is called when a new instance is created. Create a
+    <p><code>constructor</code> is called when a new instance is created. Create a
     <code>GtkApplication</code>, then connect <code>activate</code> to the
     existing Gtk event <code>_onActivate</code> and <code>startup</code> to
     <code>_onStartup</code>:</p>
 
     <code><![CDATA[
-    _init: function() {
+    constructor() {
         this.application = new Gtk.Application();
-        this.application.connect('activate', Lang.bind(this, this._onActivate));
-        this.application.connect('startup', Lang.bind(this, this._onStartup));
-    },
+        this.application.connect('activate', this._onActivate.bind(this));
+        this.application.connect('startup', this._onStartup.bind(this));
+    }
 ]]></code>
 
     <p>Show the window upon application activation:</p>
     <code><![CDATA[
-    _onActivate: function(){
+    _onActivate() {
         this._window.show_all();
-    },
+    }
 ]]></code>
   </example>
   <links type="prevnext"/>
diff --git a/platform-overview/C/tour-get_object.page b/platform-overview/C/tour-get_object.page
index b9a1649..3d74eb6 100644
--- a/platform-overview/C/tour-get_object.page
+++ b/platform-overview/C/tour-get_object.page
@@ -40,13 +40,13 @@
     window object to the application:</p>
 
     <code><![CDATA[
-    _onStartup: function() {
+    _onStartup() {
         let builder = new Gtk.Builder();
         builder.add_from_file('helloworld.glade');
         this._window = builder.get_object('window1');
         this.application.add_window(this._window);
     }
-});
+};
 ]]></code>
   </example>
   <links type="prevnext"/>
diff --git a/platform-overview/C/tour-gjs.page b/platform-overview/C/tour-gjs.page
index 1b5856a..663ae5e 100644
--- a/platform-overview/C/tour-gjs.page
+++ b/platform-overview/C/tour-gjs.page
@@ -43,11 +43,12 @@
 #!/usr/bin/gjs
 ]]></code>
 
-  <p>Import <code>lang</code> for the <code>bind</code> function and
-  <code>gi.Gtk</code> for <code>Gtk</code> functions.</p>
+  <p>Import <code>gi.Gtk</code> for <code>Gtk</code> functions. As both
+  version 3.0 and 4.0 may be installed, make sure that the desired version
+  is imported first.</p>
 
   <code><![CDATA[
-const Lang = imports.lang;
+imports.gi.versions.Gtk = '3.0';
 const Gtk = imports.gi.Gtk;
 ]]></code>
 </example>
diff --git a/platform-overview/C/tour-summary.js b/platform-overview/C/tour-summary.js
index 3423ba3..90d6ef8 100644
--- a/platform-overview/C/tour-summary.js
+++ b/platform-overview/C/tour-summary.js
@@ -1,29 +1,27 @@
 
 #!/usr/bin/gjs
 
-const Lang = imports.lang;
+imports.gi.versions.Gtk = '3.0';
 const Gtk = imports.gi.Gtk;
 
-const HelloWorld = new Lang.Class({
-    Name: 'HelloWorld',
-
-    _init: function() {
+class HelloWorld {
+    constructor() {
         this.application = new Gtk.Application();
-        this.application.connect('activate', Lang.bind(this, this._onActivate));
-        this.application.connect('startup', Lang.bind(this, this._onStartup));
-    },
+        this.application.connect('activate', this._onActivate.bind(this));
+        this.application.connect('startup', this._onStartup.bind(this));
+    }
 
-    _onActivate: function(){
+    _onActivate() {
         this._window.show_all();
-    },
+    }
 
-    _onStartup: function() {
+    _onStartup() {
         let builder = new Gtk.Builder();
-        builder.add_from_file('helloworld.glade');
+        builder.add_from_file('tour.glade');
         this._window = builder.get_object('window1');
         this.application.add_window(this._window);
     }
-});
+};
 
 let app = new HelloWorld();
 app.application.run(ARGV);