Merge pull request #7 from trompamusic/UIExperimental

UI experimental
trompamusic · Jan 18, 2021 · 18c3409 · 18c3409
2 parents 91a1a7c + 2837fb3
commit 18c3409
Show file tree

Hide file tree

Showing 13 changed files with 609 additions and 225 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/style.css b/public/style.css
@@ -41,7 +41,7 @@ body {
   cursor: pointer;
 }
 
-.cueMedia { 
+.cueMedia {
   fill: red;
   cursor: pointer;
 }
@@ -53,11 +53,16 @@ body {
 .listContainer {
   overflow: auto;
   overflow-x: hidden;
-  max-height: 151px;
+  max-height: 250px;
   max-width: 972px;
   display: flexbox;
 }
 
+.score {
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+}
 .App {
   padding-bottom: 5px;
 }
@@ -250,7 +255,7 @@ body {
   margin-right: 2px;
 }
 
-.cueMediaLegend { 
+.cueMediaLegend {
   display: inline-block;
   width: 10px;
   height: 10px;
@@ -276,3 +281,5 @@ body {
   margin-left: 10px;
   margin-right: 2px;
 }
+
+/* tooltips */
diff --git a/src/annotations/Addannotation.js b/src/annotations/Addannotation.js
@@ -4,53 +4,101 @@ import SubmitButton from "selectable-score/lib/submit-button.js";
 export class Addannotation extends React.Component {
   state = {
     value: "",
+    seconds: "",
     target: [],
+    visible: false,
   };
   onChange = (e) => this.setState({ value: e.target.value });
-  onClick = () => {
-    this.setState({ value: "", target: [] });
-  };
+
+  onTimeChange = (e) =>
+    this.setState({ seconds: e.target.value }, () =>
+      console.log(this.state.seconds)
+    );
+
   render() {
+    let value = this.state.value;
+    let seconds = this.state.seconds;
+    let handlerArgs = {
+      value,
+      seconds,
+    };
+    const { visible } = this.state.visible;
     return (
       <div>
-        <h4>Annotation legend</h4>
+        <button
+          style={{ padding: "5px", marginBottom: "5px" }}
+          onClick={() => this.setState({ visible: !visible })}
+        >
+          Toggle legend
+        </button>
+        {this.state.visible === true && (
+          <div>
+            <h4>Annotation legend</h4>
 
-        <span className="selectionLegend" />
-        <span>currently selected</span>
+            <span className="selectionLegend" />
+            <span>currently selected</span>
 
-        <span className="descriptionLegend" />
-        <span>descriptive annotation</span>
+            <span className="descriptionLegend" />
+            <span>descriptive annotation</span>
 
-        <span className="linkingLegend" />
-        <span>linking annotation</span>
+            <span className="linkingLegend" />
+            <span>linking annotation</span>
 
-        <span className="cueMediaLegend" />
-        <span>cue media annotation</span>
+            <span className="cueMediaLegend" />
+            <span>cue media annotation</span>
 
-        <span className="replyLegend" />
-        <span>replying annotation</span>
+            <span className="replyLegend" />
+            <span>replying annotation</span>
 
-        <span className="focusLegend" />
-        <span>highlighted annotation</span>
+            <span className="focusLegend" />
+            <span>highlighted annotation</span>
+          </div>
+        )}
+        {this.props.annotationType !== "cueMedia" && (
+          <textarea
+            className="textArea"
+            id="annotationContent"
+            name="value"
+            value={this.state.value}
+            placeholder={this.props.placeholder}
+            onChange={this.onChange}
+          />
+        )}
+        {this.props.annotationType === "cueMedia" && (
+          <div>
+            <input
+              value={this.state.value}
+              name="value"
+              placeholder="enter link here"
+              onChange={this.onChange}
+            />
+            <span> jump to: </span>
+            <input
+              placeholder="seconds"
+              name="seconds"
+              value={this.state.seconds}
+              onChange={this.onTimeChange}
+            />
+          </div>
+        )}
 
-        <textarea
-          className="textArea"
-          id="annotationContent"
-          name="value"
-          value={this.state.value}
-          placeholder={this.props.placeholder}
-          onChange={this.onChange}
-        ></textarea>
-        <button className="enabledSubmitButton" onClick={this.onClick}>
+        <button
+          className="enabledSubmitButton"
+          title="click to post your annotation to your solid POD"
+        >
           <SubmitButton
             buttonContent={this.props.buttonContent}
             submitUri={this.props.submitUri}
             submitHandler={this.props.submitHandler}
-            submitHandlerArgs={this.state.value}
+            submitHandlerArgs={handlerArgs}
             onResponse={this.props.onResponse}
           />
         </button>
-        <button onClick={this.props.onRefreshClick} className="refreshButton">
+        <button
+          onClick={this.props.onRefreshClick}
+          className="refreshButton"
+          title="click to display the annotation contained in your solid POD"
+        >
           <p>Fetch Annotations</p>
         </button>
       </div>

diff --git a/src/annotations/AnnotationItem.js b/src/annotations/AnnotationItem.js
@@ -10,7 +10,6 @@ class AnnotationItem extends React.Component {
   onClick(e) {
     e.preventDefault();
     e.stopPropagation();
-    console.log(this.props.annotation.anno.target);
     const replyTarget = this.props.annotation.anno.target;
     this.props.onAnnoReplyHandler(replyTarget);
   }
@@ -20,13 +19,14 @@ class AnnotationItem extends React.Component {
     const creator = this.props.annotation.anno.creator || "unknown";
     const bodyD = this.props.annotation.anno.body[0].value;
     const bodyL = this.props.annotation.anno.body[0].id;
-    const motivation = this.props.annotation.anno.motivation;
-    //const annoId = this.props.annotation["@id"];
-    //const annoIdFragment = annoId.substr(annoId.lastIndexOf("/") + 1);
+    const bodyMedia = this.props.annotation.anno.body[0];
+
     return (
       <div className="annoItem">
-        <p>The content of this annotation is {bodyD || bodyL}</p>
-        <div className="date">Created on: {date} by {creator}</div>
+        <p>The content of this annotation is {bodyD || bodyL || bodyMedia}</p>
+        <div className="date">
+          Created on: {date} by {creator}
+        </div>
         <button
           className="replyButton"
           name="replyButton"

diff --git a/src/annotations/Checkbox.js b/src/annotations/Checkbox.js
@@ -0,0 +1,18 @@
+import React from "react";
+//const Name = ({ label }) => label.subStr(label.lastIndexOf("."));
+const Checkbox = ({ label, onClick }) => (
+  <span>
+    <label>
+      <input
+        type="checkbox"
+        name={label.name}
+        onClick={onClick}
+        value={label.value}
+        key={label.value}
+      />
+      {label.name}
+    </label>
+  </span>
+);
+
+export default Checkbox;
diff --git a/src/annotations/SelectionHandler.js b/src/annotations/SelectionHandler.js
@@ -1,70 +1,73 @@
 import React, { Component } from "react";
+import Checkbox from "./Checkbox";
+const Selectors = [
+  {
+    name: "Note",
+    value: ".note",
+  },
+
+  {
+    name: "Measure",
+    value: ".measure",
+  },
+
+  {
+    name: "Dynamics",
+    value: ".dynam",
+  },
+
+  {
+    name: "Directives",
+    value: ".dir",
+  },
+];
 
 export default class RadioButton extends Component {
   state = {
-    selectorString: "",
+    selectorString: [],
   };
 
-  onChange = (e) =>
-    this.setState({ selectorString: e.target.value }, () => {
-      this.props.handleStringChange(this.state.selectorString);
-    });
+  updateSelectorList(e, value) {
+    if (e.target.checked) {
+      //append to array
+      this.setState(
+        {
+          selectorString: this.state.selectorString.concat([value]),
+        },
+        () => {
+          this.props.handleStringChange(this.state.selectorString);
+        }
+      );
+    } else {
+      //remove from array
+      this.setState(
+        {
+          selectorString: this.state.selectorString.filter(function (val) {
+            return val !== value;
+          }),
+        },
+        () => {
+          this.props.handleStringChange(this.state.selectorString);
+        }
+      );
+    }
+  }
+
+  createCheckbox = (option) => (
+    <Checkbox
+      label={option}
+      onClick={(e) => this.updateSelectorList(e, option.value)}
+      key={option.value}
+    />
+  );
+
+  buildCheckboxes = () => Selectors.map(this.createCheckbox);
 
   render() {
     return (
       <div>
         <h3>Selection Type</h3>
-        <form>
-          <label>
-            <input
-              type="radio"
-              defaultChecked={this.props.selectorString}
-              value=".note"
-              name="selectorString"
-              onChange={this.onChange}
-            />
-            Note
-          </label>
-
-          <label>
-            <input
-              type="radio"
-              name="selectorString"
-              value=".measure"
-              onChange={this.onChange}
-            />
-            Measure
-          </label>
-
-          <label>
-            <input
-              type="radio"
-              name="selectorString"
-              value=".dynam"
-              onChange={this.onChange}
-            />
-            Dynamics
-          </label>
-
-          <label>
-            <input
-              type="radio"
-              name="selectorString"
-              value=".dir"
-              onChange={this.onChange}
-            />
-            Directives
-          </label>
-          <label>
-            <input
-              type="radio"
-              name="selectorString"
-              value=".dir,.dynam"
-              onChange={this.onChange}
-            />
-            Dyn and Dir
-          </label>
-        </form>
+        <form>{this.buildCheckboxes()}</form>
       </div>
     );
   }