| 1 | /* -----------------------------------------------------------------------------
|
| 2 | | Copyright (c) Jupyter Development Team.
|
| 3 | | Distributed under the terms of the Modified BSD License.
|
| 4 | |----------------------------------------------------------------------------*/
|
| 5 | import { ReactWidget } from '@jupyterlab/apputils';
|
| 6 | import { ElementExt } from '@lumino/domutils';
|
| 7 | import * as React from 'react';
|
| 8 | /**
|
| 9 | * The CSS class added to all collapsers.
|
| 10 | */
|
| 11 | const COLLAPSER_CLASS = 'jp-Collapser';
|
| 12 | /**
|
| 13 | * The CSS class added to the collapser child.
|
| 14 | */
|
| 15 | const COLLAPSER_CHILD_CLASS = 'jp-Collapser-child';
|
| 16 | /**
|
| 17 | * The CSS class added to input collapsers.
|
| 18 | */
|
| 19 | const INPUT_COLLAPSER = 'jp-InputCollapser';
|
| 20 | /**
|
| 21 | * The CSS class added to output collapsers.
|
| 22 | */
|
| 23 | const OUTPUT_COLLAPSER = 'jp-OutputCollapser';
|
| 24 | /**
|
| 25 | * Abstract collapser base class.
|
| 26 | *
|
| 27 | * ### Notes
|
| 28 | * A collapser is a visible div to the left of a cell's
|
| 29 | * input/output that a user can click on to collapse the
|
| 30 | * input/output.
|
| 31 | */
|
| 32 | export class Collapser extends ReactWidget {
|
| 33 | /**
|
| 34 | * Construct a new collapser.
|
| 35 | */
|
| 36 | constructor() {
|
| 37 | super();
|
| 38 | this.addClass(COLLAPSER_CLASS);
|
| 39 | }
|
| 40 | /**
|
| 41 | * Is the input/output of the parent collapsed.
|
| 42 | */
|
| 43 | get collapsed() {
|
| 44 | return false;
|
| 45 | }
|
| 46 | /**
|
| 47 | * Render the collapser with the virtual DOM.
|
| 48 | */
|
| 49 | render() {
|
| 50 | const childClass = COLLAPSER_CHILD_CLASS;
|
| 51 | return React.createElement("div", { className: childClass, onClick: e => this.handleClick(e) });
|
| 52 | }
|
| 53 | }
|
| 54 | /**
|
| 55 | * A collapser subclass to collapse a cell's input area.
|
| 56 | */
|
| 57 | export class InputCollapser extends Collapser {
|
| 58 | /**
|
| 59 | * Construct a new input collapser.
|
| 60 | */
|
| 61 | constructor() {
|
| 62 | super();
|
| 63 | this.addClass(INPUT_COLLAPSER);
|
| 64 | }
|
| 65 | /**
|
| 66 | * Is the cell's input collapsed?
|
| 67 | */
|
| 68 | get collapsed() {
|
| 69 | var _a;
|
| 70 | const cell = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent;
|
| 71 | if (cell) {
|
| 72 | return cell.inputHidden;
|
| 73 | }
|
| 74 | else {
|
| 75 | return false;
|
| 76 | }
|
| 77 | }
|
| 78 | /**
|
| 79 | * Handle a click event for the user to collapse the cell's input.
|
| 80 | */
|
| 81 | handleClick(e) {
|
| 82 | var _a;
|
| 83 | const cell = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent;
|
| 84 | if (cell) {
|
| 85 | cell.inputHidden = !cell.inputHidden;
|
| 86 | }
|
| 87 | /* We need this until we watch the cell state */
|
| 88 | this.update();
|
| 89 | }
|
| 90 | }
|
| 91 | /**
|
| 92 | * A collapser subclass to collapse a cell's output area.
|
| 93 | */
|
| 94 | export class OutputCollapser extends Collapser {
|
| 95 | /**
|
| 96 | * Construct a new output collapser.
|
| 97 | */
|
| 98 | constructor() {
|
| 99 | super();
|
| 100 | this.addClass(OUTPUT_COLLAPSER);
|
| 101 | }
|
| 102 | /**
|
| 103 | * Is the cell's output collapsed?
|
| 104 | */
|
| 105 | get collapsed() {
|
| 106 | var _a;
|
| 107 | const cell = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent;
|
| 108 | if (cell) {
|
| 109 | return cell.outputHidden;
|
| 110 | }
|
| 111 | else {
|
| 112 | return false;
|
| 113 | }
|
| 114 | }
|
| 115 | /**
|
| 116 | * Handle a click event for the user to collapse the cell's output.
|
| 117 | */
|
| 118 | handleClick(e) {
|
| 119 | var _a, _b;
|
| 120 | const cell = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent;
|
| 121 | if (cell) {
|
| 122 | cell.outputHidden = !cell.outputHidden;
|
| 123 | /* Scroll cell into view after output collapse */
|
| 124 | if (cell.outputHidden) {
|
| 125 | let area = (_b = cell.parent) === null || _b === void 0 ? void 0 : _b.node;
|
| 126 | if (area) {
|
| 127 | ElementExt.scrollIntoViewIfNeeded(area, cell.node);
|
| 128 | }
|
| 129 | }
|
| 130 | }
|
| 131 | /* We need this until we watch the cell state */
|
| 132 | this.update();
|
| 133 | }
|
| 134 | }
|
| 135 | //# sourceMappingURL=collapser.js.map |
| \ | No newline at end of file |