Detailed view and a comment display

Author: nikitaeverywhere

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cache-visual-editor",
   "printableName": "Cache Visual Editor",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Visual class editor for InterSystems Caché",
   "main": "index.js",
   "keywords": [

source/client/js/classEditor/card.js

@@ -1,8 +1,9 @@
 import { loadLevel } from "./index";
 import { block } from "../utils";
+import { enableItem } from "./card/item";
 
 function getPropertyBlock (prop) {
-    let item = block(`div`, `item`),
+    let item = block(`div`, `header`),
         icon = block(`div`, `icon ${ prop["Private"] ? "private" : "public" }`),
         text = block(`span`, `label`),
         pName = block(`span`, `name`),
@@ -19,6 +20,7 @@ function getPropertyBlock (prop) {
         text.appendChild(pType);
     }
     item.appendChild(text);
+    enableItem(item, prop);
     return item;
 }
 
@@ -34,7 +36,9 @@ function getBlock (key, data) {
         break;
     }
     for (let prop in data[key]) {
-        body.appendChild(getPropertyBlock(data[key][prop]));
+        let div = block(`div`, `item`);
+        div.appendChild(getPropertyBlock(data[key][prop]));
+        body.appendChild(div);
     }
     return section;
 

source/client/js/classEditor/card/item.js

@@ -0,0 +1,30 @@
+import { block, insertAfter, clearSelection } from "../../utils";
+import { updateGrid } from "../index";
+
+function createView (data) {
+    let container = block(`div`, `detailed`),
+        comment = block(`div`, `comment`);
+    container.appendChild(comment);
+    comment.setAttribute("contenteditable", "true");
+    if (data["Description"])
+        comment.textContent = data["Description"];
+    return container;
+}
+
+export function enableItem (element, data) {
+
+    let opened = false,
+        container;
+
+    element.addEventListener("click", () => {
+        if (!container) container = createView(data);
+        if (opened = !opened) {
+            insertAfter(container, element);
+        } else if (container.parentNode) {
+            container.parentNode.removeChild(container);
+            clearSelection();
+        }
+        updateGrid();
+    });
+
+}

source/client/js/classEditor/index.js

@@ -14,6 +14,10 @@ let initCallbacks = [];
  */
 let grid = onInit(() => grid = new AutoGrid(document.querySelector("#classBuilderBody")));
 
+export function updateGrid () {
+    grid.updateGrid();
+}
+
 /**
  * @type {HTMLElement}
  */

source/client/js/utils.js

@@ -10,4 +10,15 @@ export function block (element = "div", className,  textContent) {
     if (className) el.className = className;
     if (textContent) el.textContent = textContent;
     return el;
+}
+
+export function insertAfter (elem, refElem) {
+    return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
+}
+
+export function clearSelection () {
+    if (window.getSelection)
+        window.getSelection().removeAllRanges();
+    else if (document.selection)
+        document.selection.empty();
 }

source/client/scss/classBuilder/card.scss

@@ -138,32 +138,45 @@ $headerIconWidth: 32px;
 
         > .body {
 
-            > .item {
+            .item {
 
-                overflow: hidden;
-                white-space: pre;
-                text-overflow: ellipsis;
-                cursor: pointer;
-                @include transition($defaultTransition);
+                .header {
+
+                    overflow: hidden;
+                    white-space: pre;
+                    text-overflow: ellipsis;
+                    cursor: pointer;
+                    @include transition($defaultTransition);
 
-                &:hover {
+                    &:hover {
 
-                    padding-left: $defaultTransitionPadding;
-                    background: $colorP1;
-                    border-radius: 3px;
+                        padding-left: $defaultTransitionPadding;
+                        background: $colorP1;
+                        border-radius: 3px;
+
+                        .name {
+                            text-decoration: underline;
+                        }
 
-                    .name {
-                        text-decoration: underline;
                     }
 
-                }
+                    .type {
 
-                .type {
+                        @include transition($defaultTransition);
 
-                    @include transition($defaultTransition);
+                        &:hover {
+                            color: $colorP2;
+                        }
 
-                    &:hover {
-                        color: $colorP2;
+                    }
+
+                }
+
+                .detailed {
+
+                    .comment {
+                        color: gray;
+                        font-size: x-small;
                     }
 
                 }