@jupyterlab/codeeditor - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

lib/editor.d.ts

@@ -78,2 +78,6 @@ import { JSONObject } from '@phosphor/coreutils';
         displayName?: string;
+        /**
+         * A color for UI elements.
+         */
+        color?: string;
     }
@@ -80,0 +84,0 @@ /**

lib/index.d.ts

 import { Token } from '@phosphor/coreutils';
 import { IEditorFactoryService } from './factory';
 import { IEditorMimeTypeService } from './mimetype';
+import '../style/index.css';
 export * from './editor';
@@ -5,0 +6,0 @@ export * from './jsoneditor';

lib/index.js

@@ -9,2 +9,3 @@ "use strict";
 var coreutils_1 = require("@phosphor/coreutils");
+require("../style/index.css");
 __export(require("./editor"));
@@ -11,0 +12,0 @@ __export(require("./jsoneditor"));

lib/jsoneditor.d.ts

@@ -22,2 +22,10 @@ import { Message } from '@phosphor/messaging';
     /**
+     * Whether the editor is collapsable.
+     */
+    readonly collapsable: boolean;
+    /**
+     * The title of the editor.
+     */
+    editorTitle: string;
+    /**
      * Get the editor host node used by the metadata editor.
@@ -27,2 +35,14 @@ */
     /**
+     * Get the header node used by the metadata editor.
+     */
+    readonly headerNode: HTMLElement;
+    /**
+     * Get the title node used by the metadata editor.
+     */
+    readonly titleNode: HTMLElement;
+    /**
+     * Get the collapser node used by the metadata editor.
+     */
+    readonly collapserNode: HTMLElement;
+    /**
      * Get the revert button used by the metadata editor.
@@ -101,10 +121,18 @@ */
     /**
-     * The options used to initialize a metadata editor.
+     * The options used to initialize a json editor.
      */
     interface IOptions {
         /**
-         * The editor factory used by the tool.
+         * The editor factory used by the editor.
          */
         editorFactory: CodeEditor.Factory;
+        /**
+         * The title of the editor.  Defaults to an empty string.
+         */
+        title?: string;
+        /**
+         * Whether the title should be collapsable. Defaults to `false`.
+         */
+        collapsable?: boolean;
     }
 }

lib/jsoneditor.js

@@ -22,3 +22,3 @@ "use strict";
  */
-var METADATA_CLASS = 'jp-JSONEditor';
+var JSONEDITOR_CLASS = 'jp-JSONEditor';
 /**
@@ -33,6 +33,18 @@ * The class name added when the Metadata editor contains invalid JSON.
 /**
- * The class name added to the button area.
+ * The class name added to the header area.
  */
-var BUTTON_AREA_CLASS = 'jp-JSONEditor-buttons';
+var HEADER_CLASS = 'jp-JSONEditor-header';
 /**
+ * The class name added to the title node.
+ */
+var TITLE_CLASS = 'jp-JSONEditor-title';
+/**
+ * The class name added to the collapser node.
+ */
+var COLLAPSER_CLASS = 'jp-JSONEditor-collapser';
+/**
+ * The class name added to the collapser node that is enabled.
+ */
+var COLLAPSE_ENABLED_CLASS = 'jp-mod-collapse-enabled';
+/**
  * The class name added to the revert button.
@@ -46,2 +58,6 @@ */
 /**
+ * The class name added to collapsed items.
+ */
+var COLLAPSED_CLASS = 'jp-mod-collapsed';
+/**
  * A widget for editing observable JSON.
@@ -55,3 +71,3 @@ */
     function JSONEditor(options) {
-        var _this = _super.call(this, { node: Private.createEditorNode() }) || this;
+        var _this = _super.call(this, { node: Private.createEditorNode(options) }) || this;
         _this._dataDirty = false;
@@ -62,3 +78,2 @@ _this._inputDirty = false;
         _this._changeGuard = false;
-        _this.addClass(METADATA_CLASS);
         var host = _this.editorHostNode;
@@ -72,4 +87,18 @@ var model = new _1.CodeEditor.Model();
         _this.editor.readOnly = true;
+        _this.collapsable = options.collapsable === true;
         return _this;
     }
+    Object.defineProperty(JSONEditor.prototype, "editorTitle", {
+        /**
+         * The title of the editor.
+         */
+        get: function () {
+            return this.titleNode.textContent;
+        },
+        set: function (value) {
+            this.titleNode.textContent = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(JSONEditor.prototype, "editorHostNode", {
@@ -85,2 +114,32 @@ /**
     });
+    Object.defineProperty(JSONEditor.prototype, "headerNode", {
+        /**
+         * Get the header node used by the metadata editor.
+         */
+        get: function () {
+            return this.node.getElementsByClassName(HEADER_CLASS)[0];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(JSONEditor.prototype, "titleNode", {
+        /**
+         * Get the title node used by the metadata editor.
+         */
+        get: function () {
+            return this.node.getElementsByClassName(TITLE_CLASS)[0];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(JSONEditor.prototype, "collapserNode", {
+        /**
+         * Get the collapser node used by the metadata editor.
+         */
+        get: function () {
+            return this.node.getElementsByClassName(COLLAPSER_CLASS)[0];
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(JSONEditor.prototype, "revertButtonNode", {
@@ -170,4 +229,3 @@ /**
         this.commitButtonNode.hidden = true;
-        this.revertButtonNode.addEventListener('click', this);
-        this.commitButtonNode.addEventListener('click', this);
+        this.headerNode.addEventListener('click', this);
     };
@@ -180,4 +238,3 @@ /**
         node.removeEventListener('blur', this, true);
-        this.revertButtonNode.removeEventListener('click', this);
-        this.commitButtonNode.removeEventListener('click', this);
+        this.headerNode.removeEventListener('click', this);
     };
@@ -229,12 +286,30 @@ /**
         var target = event.target;
-        if (target === this.revertButtonNode) {
-            this._setValue();
-        }
-        else if (target === this.commitButtonNode) {
-            if (!this.commitButtonNode.hidden && !this.hasClass(ERROR_CLASS)) {
-                this._changeGuard = true;
-                this._mergeContent();
-                this._changeGuard = false;
+        switch (target) {
+            case this.revertButtonNode:
                 this._setValue();
-            }
+                break;
+            case this.commitButtonNode:
+                if (!this.commitButtonNode.hidden && !this.hasClass(ERROR_CLASS)) {
+                    this._changeGuard = true;
+                    this._mergeContent();
+                    this._changeGuard = false;
+                    this._setValue();
+                }
+                break;
+            case this.titleNode:
+            case this.collapserNode:
+                if (this.collapsable) {
+                    var collapser = this.collapserNode;
+                    if (collapser.classList.contains(COLLAPSED_CLASS)) {
+                        collapser.classList.remove(COLLAPSED_CLASS);
+                        this.editorHostNode.classList.remove(COLLAPSED_CLASS);
+                    }
+                    else {
+                        collapser.classList.add(COLLAPSED_CLASS);
+                        this.editorHostNode.classList.add(COLLAPSED_CLASS);
+                    }
+                }
+                break;
+            default:
+                break;
         }
@@ -319,10 +394,14 @@ };
     /**
-     * Create the node for the EditorWdiget.
+     * Create the node for the JSON Editor.
      */
-    function createEditorNode() {
-        var cancelTitle = 'Revert changes to data';
+    function createEditorNode(options) {
+        var revertTitle = 'Revert changes to data';
         var confirmTitle = 'Commit changes to data';
-        return virtualdom_1.VirtualDOM.realize(virtualdom_1.h.div({ className: METADATA_CLASS }, virtualdom_1.h.div({ className: BUTTON_AREA_CLASS }, virtualdom_1.h.span({ className: REVERT_CLASS, title: cancelTitle }), virtualdom_1.h.span({ className: COMMIT_CLASS, title: confirmTitle })), virtualdom_1.h.div({ className: HOST_CLASS })));
+        var collapseClass = COLLAPSER_CLASS;
+        if (options.collapsable === true) {
+            collapseClass += " " + COLLAPSE_ENABLED_CLASS;
+        }
+        return virtualdom_1.VirtualDOM.realize(virtualdom_1.h.div({ className: JSONEDITOR_CLASS }, virtualdom_1.h.div({ className: HEADER_CLASS }, virtualdom_1.h.span({ className: TITLE_CLASS }, options.title || ''), virtualdom_1.h.span({ className: collapseClass }), virtualdom_1.h.span({ className: REVERT_CLASS, title: revertTitle }), virtualdom_1.h.span({ className: COMMIT_CLASS, title: confirmTitle })), virtualdom_1.h.div({ className: HOST_CLASS })));
     }
     Private.createEditorNode = createEditorNode;
 })(Private || (Private = {}));

package.json

 {
   "name": "@jupyterlab/codeeditor",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "JupyterLab - Abstract Code Editor",
@@ -16,4 +16,4 @@ "main": "lib/index.js",
   "dependencies": {
-    "@jupyterlab/coreutils": "^0.5.0",
-    "@jupyterlab/services": "^0.44.0",
+    "@jupyterlab/coreutils": "^0.6.0",
+    "@jupyterlab/services": "^0.45.0",
     "@phosphor/coreutils": "^1.1.0",
@@ -20,0 +20,0 @@ "@phosphor/disposable": "^1.1.0",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46348

increased by9.42%

Lines of code

1479

increased by9.72%

Dependency changes

• + Added@jupyterlab/coreutils@0.6.0(transitive)

• + Added@jupyterlab/services@0.45.0(transitive)

• - Removed@jupyterlab/coreutils@0.5.0(transitive)

• - Removed@jupyterlab/services@0.44.0(transitive)

• - Removed@types/minimist@1.2.5(transitive)

• Updated@jupyterlab/coreutils@^0.6.0

• Updated@jupyterlab/services@^0.45.0