Trigger unfold on double-click or single-click depending on configuration file (#11)

* Trigger (un)fold on double click

* Make setting for singleclick

* React on settings change

* Do not toggle on dblclick if singleClickToUnfold is true

* Do not toggle if currently making a selection

* Fix initial value for singleClickToUnfold

* Lint

Co-authored-by: martinRenou <[email protected]>

Author: fcollonval

package.json

@@ -22,6 +22,7 @@
     }
   ],
   "files": [
+    "schema/**/*.json",
     "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
     "style/**/*.{css,.js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
@@ -74,6 +75,7 @@
   ],
   "styleModule": "style/index.js",
   "jupyterlab": {
+    "schemaDir": "schema",
     "extension": true,
     "outputDir": "jupyterlab-unfold/labextension"
   }

schema/jupyterlab-unfold-settings.json

@@ -0,0 +1,13 @@
+{
+    "title": "jupyterlab-unfold settings",
+    "description": "Settings for the JupyterLab-unfold extension.",
+    "type": "object",
+    "properties": {
+      "singleClickToUnfold": {
+        "type": "boolean",
+        "title": "Single Click To Unfold",
+        "description": "Whether a single click triggers an (un)fold.",
+        "default": false
+      }
+    }
+}

src/index.ts

@@ -11,6 +11,8 @@ import { addIcon } from '@jupyterlab/ui-components';
 
 import { WidgetTracker, ToolbarButton } from '@jupyterlab/apputils';
 
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+
 import { ITranslator } from '@jupyterlab/translation';
 
 import { IStateDB } from '@jupyterlab/statedb';
@@ -22,6 +24,8 @@ import { FileTreeBrowser, FilterFileTreeBrowserModel } from './unfold';
  */
 const EXTENSION_ID = 'jupyterlab-unfold';
 
+const SETTINGS_ID = 'jupyterlab-unfold:jupyterlab-unfold-settings';
+
 /**
  * The file browser namespace token.
  */
@@ -30,14 +34,17 @@ const namespace = 'filebrowser';
 const extension: JupyterFrontEndPlugin<IFileBrowserFactory> = {
   id: EXTENSION_ID,
   provides: IFileBrowserFactory,
-  requires: [IDocumentManager, ITranslator],
+  requires: [IDocumentManager, ITranslator, ISettingRegistry],
   optional: [IStateDB],
   activate: async (
     app: JupyterFrontEnd,
     docManager: IDocumentManager,
     translator: ITranslator,
+    settings: ISettingRegistry,
     state: IStateDB | null
   ): Promise<IFileBrowserFactory> => {
+    const setting = await settings.load(SETTINGS_ID);
+
     const tracker = new WidgetTracker<FileTreeBrowser>({ namespace });
     const createFileBrowser = (
       id: string,
@@ -63,6 +70,14 @@ const extension: JupyterFrontEndPlugin<IFileBrowserFactory> = {
         app
       });
 
+      widget.listing.singleClickToUnfold = setting.get('singleClickToUnfold')
+        .composite as boolean;
+
+      setting.changed.connect(() => {
+        widget.listing.singleClickToUnfold = setting.get('singleClickToUnfold')
+          .composite as boolean;
+      });
+
       // Track the newly created file browser.
       void tracker.add(widget);
 

src/unfold.ts

@@ -201,6 +201,10 @@ export class DirTreeListing extends DirListing {
     super({ ...options, renderer: new FileTreeRenderer(options.model) });
   }
 
+  set singleClickToUnfold(value: boolean) {
+    this._singleClickToUnfold = value;
+  }
+
   get headerNode(): HTMLElement {
     return document.createElement('div');
   }
@@ -220,21 +224,32 @@ export class DirTreeListing extends DirListing {
 
   protected async handleFileSelect(event: MouseEvent): Promise<void> {
     super.handleFileSelect(event);
+    const entry = this.modelForClick(event);
 
-    if (Object.keys(this.selection).length === 1) {
-      const selection = Object.keys(this.selection)[0];
-
-      const entry = await this.model.getEntry(selection);
-
+    if (entry) {
       if (entry.type === 'directory') {
-        this.model.path = '/' + selection;
-        this.model.toggle(entry.path);
+        this.model.path = '/' + entry.path;
+
+        if (
+          this._singleClickToUnfold &&
+          Object.keys(this.selection).length === 1
+        ) {
+          this.model.toggle(entry.path);
+        }
       } else {
-        this.model.path = '/' + PathExt.dirname(selection);
+        this.model.path = '/' + PathExt.dirname(entry.path);
       }
     }
   }
 
+  private async _eventDblClick(event: MouseEvent): Promise<void> {
+    const entry = this.modelForClick(event);
+
+    if (entry?.type === 'directory' && !this._singleClickToUnfold) {
+      this.model.toggle(entry.path);
+    }
+  }
+
   private _eventDragEnter(event: IDragEvent): void {
     if (event.mimeData.hasData(CONTENTS_MIME)) {
       // @ts-ignore
@@ -362,6 +377,9 @@ export class DirTreeListing extends DirListing {
 
   handleEvent(event: Event): void {
     switch (event.type) {
+      case 'dblclick':
+        this._eventDblClick(event as MouseEvent);
+        break;
       case 'lm-dragenter':
         this._eventDragEnter(event as IDragEvent);
         break;
@@ -376,6 +394,8 @@ export class DirTreeListing extends DirListing {
         break;
     }
   }
+
+  private _singleClickToUnfold = false;
 }
 
 /**
@@ -400,10 +420,6 @@ export class FilterFileTreeBrowserModel extends FilterFileBrowserModel {
     this._path = value;
   }
 
-  async getEntry(path: string): Promise<Contents.IModel> {
-    return await this.contentManager.get(path);
-  }
-
   /**
    * Change directory.
    *
@@ -625,4 +641,6 @@ export class FileTreeBrowser extends FileBrowser {
   }
 
   model: FilterFileTreeBrowserModel;
+
+  listing: DirTreeListing;
 }