[AG] basic ui functionality

annekagoss · Mar 16, 2018 · 2237c14 · 2237c14
1 parent 4de45fe
commit 2237c14
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 30 deletions.
diff --git a/src/components/controls/index.js b/src/components/controls/index.js
@@ -1,5 +1,7 @@
 import { h, Component } from "preact"
 
+import { formatFloat } from "../../utils";
+
 const controlsStyles = {
   marginTop: "10px",
   fontFamily: "Arial"
@@ -30,7 +32,8 @@ const detailsStyles = {
 
 const valueStyles = {
   display: "inline-block",
-  margin: "0 10px"
+  margin: "0 10px",
+  fontSize: "14px"
 }
 
 const labelStyles = {
@@ -70,7 +73,35 @@ const publishButtonStyles = {
   textTransform: "uppercase"
 }
 
+const textStyles = {
+  marginRight: "10px",
+  height: "25px",
+  borderBottom: "solid 1px black"
+}
+
 class TextGroup extends Component {
+  state = {
+    locked: false,
+    value: null
+  }
+
+  toggleLockedState = () => {
+    const newLockedState = !this.state.locked;
+    const newValue = newLockedState ? this.props.value : null;
+
+    this.setState({
+      locked: newLockedState,
+      value: newValue
+    });
+  }
+
+  getValueStyles() {
+    if (!this.state.locked) {
+      return textStyles;
+    }
+
+    return { ...textStyles, color: "lime", pointerEvents: "none" };
+  }
 
   handleSubmit(e) {
     console.log(e);
@@ -82,14 +113,60 @@ class TextGroup extends Component {
     return (
       <div className="controls__group" style={groupStyles}>
 
-        <div className="controls__value" style={{fontSize: "12px"}}>
-          {value}
+        <input type="text" style={this.getValueStyles()}></input>
+
+        <button className="controls__button" style={buttonStyles} onClick={this.toggleLockedState}>
+          set
+        </button>
+
+        <div className="controls__label" style={labelStyles}>
+          {labelText}
         </div>
+      </div>
+    )
+  }
+}
+
+class NumberGroup extends Component {
+  state = {
+    locked: false,
+    value: null
+  }
+
+  toggleLockedState = () => {
+    const newLockedState = !this.state.locked;
+    const newValue = newLockedState ? this.$input.value : null;
+
+    this.setState({
+      locked: newLockedState,
+      value: newValue
+    });
+  }
 
-        <form onsubmit={this.handleSubmit}>
-          <input type="text" style={{ marginRight: "10px", height: "25px" }}></input>
-          <input className="button" type="submit" value="set" style={buttonStyles}></input>
-        </form>
+  getValueStyles() {
+    if (!this.state.locked) {
+      return valueStyles;
+    }
+
+    return { ...valueStyles, color: "lime", pointerEvents: "none" };
+  }
+
+  handleSubmit(e) {
+    console.log(e);
+  }
+
+  render() {
+    const { buttonText, labelText } = this.props;
+
+    return (
+      <div className="controls__group" style={groupStyles}>
+
+
+        <input type="number" value={this.state.value} step=".01" style={this.getValueStyles()} ref={el => this.$input = el}></input>
+
+        <button className="controls__button" style={buttonStyles} onClick={this.toggleLockedState}>
+          set
+        </button>
 
         <div className="controls__label" style={labelStyles}>
           {labelText}
@@ -100,16 +177,47 @@ class TextGroup extends Component {
 }
 
 class ControlGroup extends Component {
+  state = {
+    locked: false,
+    value: null
+  }
+
+  toggleLockedState = () => {
+    const newLockedState = !this.state.locked;
+    const newValue = newLockedState ? this.props.value : null;
+
+    this.setState({
+      locked: newLockedState,
+      value: newValue
+    });
+  }
+
+  getValueStyles() {
+    if (!this.state.locked) {
+      return valueStyles;
+    }
+
+    return { ...valueStyles, color: "lime" };
+  }
+
+  getValue() {
+    if (this.state.locked) {
+      return this.state.value;
+    }
+
+    return this.props.value;
+  }
+
   render() {
     const { buttonText, labelText, value } = this.props;
 
     return (
       <div className="controls__group" style={groupStyles}>
-        <div className="controls__value" style={valueStyles}>
-          {value}
+        <div className="controls__value" style={this.getValueStyles()}>
+          {this.getValue()}
         </div>
-        <button className="controls__button" style={buttonStyles}>
-          {buttonText}
+        <button className="controls__button" style={buttonStyles} onClick={this.toggleLockedState}>
+          set
         </button>
         <div className="controls__label" style={labelStyles}>
           {labelText}
@@ -130,9 +238,9 @@ class CircleGroup extends Component {
           Circle position
         </div>
 
-        <ControlGroup buttonText="set" labelText="vertical position" value={value.top} />
-        <ControlGroup buttonText="set" labelText="horizontal position" value={value.left} />
-        <ControlGroup buttonText="set" labelText="size" value={value.size} />
+        <NumberGroup labelText="vertical" />
+        <NumberGroup labelText="horizontal" />
+        <NumberGroup labelText="size" />
 
       </div>
     )
@@ -155,9 +263,12 @@ export default class Controls extends Component {
     return;
   }
 
+  // TODO: Add back once finished debugging
   // dataOpen={this.state.detailsOpen ? "true" : "false"}
 
   render() {
+    const { scrubPosition } = this.props;
+
     return (
       <div className="controls" style={controlsStyles}>
         <button className="controls__button" style={addButtonStyles} onClick={this.toggleControls}>
@@ -166,8 +277,8 @@ export default class Controls extends Component {
 
         <div className="controls__details" style={detailsStyles} dataOpen="true">
           <div className="controls__block" style={blockStyles}>
-            <ControlGroup buttonText="set" labelText="timestamp" value="0" />
-            <ControlGroup buttonText="set" labelText="duration" value="0" />
+            <ControlGroup labelText="timestamp" value={formatFloat(scrubPosition)} />
+            <NumberGroup labelText="duration" />
             <TextGroup labelText="text" value="empty string" />
           </div>
           <div className="controls__block" style={blockStyles}>

diff --git a/src/components/scroll-sprite/index.js b/src/components/scroll-sprite/index.js
@@ -81,7 +81,7 @@ export default class ScrollSprite extends Component {
   componentDidMount() {
       const { sprite } = this.state;
 
-      document.addEventListener("mousewheel", this.updateScrollPosition, { passive: false });
+      // document.addEventListener("mousewheel", this.updateScrollPosition, { passive: false });
       window.addEventListener("resize", this.updateResizeTimestamp);
 
       if (!sprite && this.$canvas) {
@@ -90,7 +90,7 @@ export default class ScrollSprite extends Component {
   }
 
   componentWillUnmount() {
-      document.removeEventListener("mousewheel", this.updateScrollPosition, { passive: false });
+      // document.removeEventListener("mousewheel", this.updateScrollPosition, { passive: false });
       window.removeEventListener("resize", this.updateResizeTimestamp);
   }
 
@@ -115,16 +115,16 @@ export default class ScrollSprite extends Component {
       });
   }
 
-  updateScrollPosition = (event) => {
-    const { scrollPosition } = this.state;
-
-    const newScrollPosition = scrollPosition + Math.floor(event.deltaY * SCROLL_SPEED);
-
-    this.setState({
-      scrollPosition: newScrollPosition,
-      scrolling: true
-    });
-  }
+  // updateScrollPosition = (event) => {
+  //   const { scrollPosition } = this.state;
+  //
+  //   const newScrollPosition = scrollPosition + Math.floor(event.deltaY * SCROLL_SPEED);
+  //
+  //   this.setState({
+  //     scrollPosition: newScrollPosition,
+  //     scrolling: true
+  //   });
+  // }
 
   initScrub = (event) => {
     const { scrubPosition, scaledScrubPosition } = this.getNewScrubPosition(event);
@@ -220,7 +220,7 @@ export default class ScrollSprite extends Component {
 
   render() {
     const { width, height, triggers, src, tiles } = this.props.options;
-    const { sprite, scrollPosition, resizeTimestamp, scrolling, scrubbing } = this.state;
+    const { sprite, scrollPosition, scrubPosition, resizeTimestamp, scrolling, scrubbing } = this.state;
 
     if (sprite && scrolling || scrubbing) {
       const frame = this.getSpriteFrame();
@@ -250,7 +250,7 @@ export default class ScrollSprite extends Component {
         <canvas width={width} height={height} style={canvasStyles} ref={el => this.$canvas = el}></canvas>
         <Timeline data={timelineData} />
         <Annotations activeTrigger={this.activeTrigger} canvas={this.$canvas} timestamp={resizeTimestamp} />
-        <Controls />
+        <Controls scrubPosition={scrubPosition}/>
       </div>
     );
   }

diff --git a/src/style/index.css b/src/style/index.css
@@ -45,6 +45,44 @@ button::-moz-focus-inner,
     padding: 0;
 }
 
+input {
+    border: 0;
+    -webkit-appearance: none;
+    -webkit-writing-mode: unset !important;
+}
+
+input[type="number"] {
+    max-width: 50px;
+}
+
+input:focus
+{
+	outline:0;
+}
+
+input::-webkit-inner-spin-button {
+    opacity: 1 !important;
+}
+
+input
+{
+	-webkit-box-sizing:content-box;
+	-moz-box-sizing:content-box;
+	box-sizing:content-box;
+}
+
+input[type=reset],
+input[type=button],
+input[type=submit],
+input[type=checkbox],
+input[type=radio],
+select
+{
+	-webkit-box-sizing:border-box;
+	-moz-box-sizing:border-box;
+	box-sizing:border-box;
+}
+
 [dataopen="true"] {
     display: block;
 }

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -11,3 +11,10 @@ export function getTriggerOffset(trigger) {
 export function getTriggerZoneWidth(trigger) {
     return 100 * trigger.duration;
 }
+
+export function formatFloat(f) {
+    if (!f) {
+      return "0.00";
+    }
+    return f.toFixed(2);
+}