Optionally shows the code cell prompt (execution count) (#12)

Author: brichet

js/jupyterlab-slideshow/schema/plugin.json

@@ -37,6 +37,12 @@
       "default": false,
       "description": "Whether presentation mode is currently active."
     },
+    "showCodeCellPrompt": {
+      "title": "Show execution count",
+      "type": "boolean",
+      "default": false,
+      "description": "Whether to show the execution count (input prompt) in Notebook presentation"
+    },
     "stylePresets": {
       "title": "Style Presets",
       "$ref": "#/definitions/style-presets",

js/jupyterlab-slideshow/src/manager.ts

@@ -57,6 +57,7 @@ export class DeckManager implements IDeckManager {
   protected _layover: Layover | null = null;
   protected _activePresenter: IPresenter<Widget> | null = null;
   protected _activeWidgetStack: Widget[] = [];
+  protected _showCodeCellPrompt: boolean = false;
 
   constructor(options: DeckManager.IOptions) {
     this._appStarted = options.appStarted;
@@ -107,6 +108,10 @@ export class DeckManager implements IDeckManager {
     return this._layoverChanged;
   }
 
+  public get showCodeCellPrompt(): boolean {
+    return this._showCodeCellPrompt
+  }
+
   /**
    * translate a string by message id (usually the en-US string), potentially
    * with positional arguments, starting with %1.
@@ -525,6 +530,12 @@ export class DeckManager implements IDeckManager {
     composite = settings.composite as IDeckSettings;
     const active = composite.active === true;
 
+    const showCodeCellPrompt = composite.showCodeCellPrompt === true;
+    if (showCodeCellPrompt !== this._showCodeCellPrompt) {
+      this._showCodeCellPrompt = showCodeCellPrompt;
+      void this._addDeckStyles();
+    }
+
     if (active && !this._active) {
       void this.start();
     } else if (!active && this._active) {

js/jupyterlab-slideshow/src/notebook/presenter.ts

@@ -79,6 +79,11 @@ export class NotebookPresenter implements IPresenter<NotebookPanel> {
 
   public async style(panel: NotebookPanel): Promise<void> {
     panel.addClass(CSS.deck);
+    if (this._manager.showCodeCellPrompt) {
+      panel.addClass(CSS.showCodeCellPrompt);
+    } else {
+      panel.removeClass(CSS.showCodeCellPrompt);
+    }
     this._manager.cacheStyle(panel.node, panel.content.node);
   }
 

js/jupyterlab-slideshow/src/tokens.ts

@@ -56,6 +56,7 @@ export interface IDeckManager {
   setLayerScope(layerScope: TLayerScope | null): void;
   getPartStyles(): GlobalStyles | null;
   setPartStyles(styles: GlobalStyles | null): void;
+  readonly showCodeCellPrompt: boolean;
 }
 
 export const IDeckManager = new Token<IDeckManager>(PLUGIN_ID);
@@ -128,6 +129,7 @@ export namespace CSS {
   export const stop = 'jp-deck-mod-stop';
   export const widgetStack = 'jp-Deck-Remote-WidgetStack';
   // notebook
+  export const showCodeCellPrompt = 'jp-deck-showCodeCellPrompt';
   export const direction = 'jp-deck-mod-direction';
   export const onScreen = 'jp-deck-mod-onscreen';
   export const visible = 'jp-deck-mod-visible';
@@ -266,6 +268,7 @@ export interface IStylePreset {
 
 export interface IDeckSettings {
   active?: boolean;
+  showCodeCellPrompt?: boolean;
   stylePresets?: {
     [key: string]: Partial<IStylePreset>;
   };

js/jupyterlab-slideshow/style/notebook.css

@@ -1,11 +1,23 @@
 /** heavy ui tweaks **/
-.jp-Deck .jp-InputPrompt,
-.jp-Deck .jp-OutputPrompt,
+.jp-Deck:not(.jp-deck-showCodeCellPrompt) .jp-InputPrompt,
+.jp-Deck:not(.jp-deck-showCodeCellPrompt) .jp-OutputPrompt,
 .jp-Deck .jp-Notebook-footer,
 .jp-Deck .jp-cell-toolbar {
   display: none;
 }
 
+.jp-Deck.jp-deck-showCodeCellPrompt .jp-InputPrompt,
+.jp-Deck.jp-deck-showCodeCellPrompt .jp-OutputPrompt {
+  /* uses visibility instead of display to keep alignment between markdown and code cell */
+  visibility: hidden;
+}
+
+.jp-Deck.jp-deck-showCodeCellPrompt .jp-CodeCell .jp-InputPrompt,
+.jp-Deck.jp-deck-showCodeCellPrompt .jp-CodeCell .jp-OutputPrompt {
+  display: inherit;
+  visibility: inherit;
+}
+
 .jp-Deck .jp-NotebookPanel-toolbar {
   position: absolute;
   border: 0;