Return type under Code Edit, hr styles, other styles

Author: nikitaeverywhere

source/client/js/classEditor/class/MANIFEST.js

@@ -578,7 +578,9 @@ export default {
             }
         },
         FormalSpec: {
-            ignore: true // goes within code editor
+            ignore: true, // goes within code editor
+            default: "",
+            type: "string"
         },
         GenerateAfter: {
             type: "string",
@@ -594,7 +596,9 @@ export default {
         },
         Implementation: {
             ignore: true,
-            isCode: true
+            isCode: true,
+            returnTypeProperty: "ReturnType",
+            formalSpecProperty: "FormalSpec"
         },
         Language: {
             default: "",
@@ -643,7 +647,8 @@ export default {
         },
         ReturnType: {
             default: "",
-            type: "string"
+            type: "string",
+            ignore: true
         },
         ReturnTypeParams: {
             ignore: true,

source/client/js/classEditor/class/code.js

@@ -2,6 +2,7 @@ import { block, toggle } from "../../domUtils";
 import { addChange } from "../changes";
 import { Toast } from "../../toast";
 import { updateGrid } from "../index";
+import { getKeywordView } from "./keyword";
 
 /**
  * Returns if the method code has routines.
@@ -20,12 +21,13 @@ function switchToRoutineCode (code) {
     return code.replace(/^/, "\t").replace(/\n/g, "\n\t");
 }
 
-export function getCodeCaptionView ({ name, data, savePath }) {
+export function getCodeCaptionView ({ manifest, name, data, savePath }) {
 
     let div = block(`div`, `property-block`),
         header = block(`div`),
         editBlock = block(`div`, `editor`),
-        code = (data[name] || "").replace(/\r?\n$/, ""),
+        code = (data[name] || "").replace(/\r?\n$/, ``),
+        returnTypeProp = (manifest[name] || {})["returnTypeProperty"] || ``,
         ROUTINE_SUPPORT = hasRoutineCode(code),
         useRoutinesToggle = toggle(ROUTINE_SUPPORT),
         useRoutinesBlock = block(`div`, `property-block`),
@@ -42,6 +44,13 @@ export function getCodeCaptionView ({ name, data, savePath }) {
     vb.appendChild(useRoutinesToggle);
     useRoutinesBlock.appendChild(nb);
     useRoutinesBlock.appendChild(vb);
+    if (returnTypeProp)
+        header.appendChild(getKeywordView({
+            propManifest: manifest[returnTypeProp],
+            propName: returnTypeProp,
+            propData: data["ReturnType"],
+            savePath: savePath.concat(returnTypeProp)
+        }));
     header.appendChild(useRoutinesBlock);
 
     useRoutinesToggle.checkbox.addEventListener("change", () => {
@@ -78,7 +87,9 @@ export function getCodeCaptionView ({ name, data, savePath }) {
         saveChanges();
     });
 
-    div.appendChild(block(`hr`));
+    let hr = block(`hr`);
+    hr.setAttribute(`title`, `Code Editor`);
+    div.appendChild(hr);
     div.appendChild(header);
     // setTimeout(() => new AutoGrid(header), 1);
     div.appendChild(editBlock);

source/client/js/classEditor/class/keyword.js

@@ -7,15 +7,15 @@ function getKeywordEditElement (propName, value, propManifest, savePath) {
     if (type === "boolean") {
         input = toggle(!!value);
         input.checkbox.addEventListener(`change`, () => addChange(
-            savePath.concat(propName),
+            savePath,
             input.checkbox.checked ? 1 : 0
         ));
     } else if (type === "string") { // string type
         input = block(`input`);
         input.type = "text";
         input.value = value;
         input.addEventListener(`input`, () => addChange(
-            savePath.concat(propName),
+            savePath,
             input.value
         ));
     } else if (type === "select") selBlock: {
@@ -39,7 +39,7 @@ function getKeywordEditElement (propName, value, propManifest, savePath) {
         });
 
         input.addEventListener(`change`, () => addChange(
-            savePath.concat(propName),
+            savePath,
             input.value
         ));
 

source/client/js/classEditor/class/member.js

@@ -46,13 +46,16 @@ function getMemberDetailedBlock (classData, memberType, classMemberName) {
         if (propManifest.ignore || propManifest.default === data[propName]) continue;
         if (typeof data[propName] === "object") continue;
         container.appendChild(getKeywordView({
-            propManifest, propName, propData: data[propName], savePath
+            propManifest,
+            propName,
+            propData: data[propName],
+            savePath: savePath.concat("propName")
         }));
     }
 
     if (codePropName)
         container.appendChild(getCodeCaptionView({
-            manifest: (MANIFEST[isClass ? "Class" : memberType] || {})[codePropName] || {},
+            manifest: MANIFEST[isClass ? "Class" : memberType] || {},
             name: codePropName,
             data: data,
             savePath
@@ -150,7 +153,7 @@ function enableMember ({
                     propManifest: propManifest,
                     propName: propName,
                     propData: propManifest.default || "",
-                    savePath: savePath
+                    savePath: savePath.concat(propName)
                 }));
 
                 updateGrid();
@@ -173,6 +176,7 @@ function enableMember ({
                 }
             });
         }
+
         if (opened = !opened) {
             insertAfter(container, headerElement);
             prepend(controls, headerElement);
@@ -181,6 +185,8 @@ function enableMember ({
             controls.parentNode.removeChild(controls);
             clearSelection();
         }
+        headerElement.classList.toggle("opened");
+
         updateGrid();
     });
 

source/client/js/domUtils.js

@@ -5,7 +5,7 @@
  * @param {string} [textContent] - Optional content
  * @returns {Element}
  */
-export function block (element = "div", className,  textContent) {
+export function block (element = "div", className, textContent) {
     let el = document.createElement(element || "div");
     if (className) el.className = className;
     if (textContent) el.textContent = textContent;

source/client/scss/basic.scss

@@ -74,9 +74,24 @@ button {
 }
 
 hr {
+
+    position: relative;
     border: none;
     border-top: 1px solid #ccc;
     margin: .5em;
+
+    &:after {
+        content: attr(title);
+        position: absolute;
+        top: -7px;
+        font-size: 10px;
+        font-family: inherit;
+        width: 100%;
+        text-align: center;
+        color: #ccc;
+        text-shadow: 0 -1px 2px #fff, 0 1px 2px #fff;
+    }
+
 }
 
 .toggle {

source/client/scss/classBuilder/card.scss

@@ -126,12 +126,14 @@ $headerIconSize: $medium;
         .header {
 
             > .label {
+
                 font-size: $normal;
                 font-weight: bold;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 line-height: $headerIconSize;
+
             }
 
         }
@@ -216,6 +218,15 @@ $headerIconSize: $medium;
                 display: inline-block;
             }
 
+            &.opened {
+
+                > .label > .name {
+                    font-weight: bold;
+                    text-decoration: underline;
+                }
+
+            }
+
             > .controls {
 
                 float: right;