More slides etc

client/app/demos/dropping/drop-dragee.tsx

@@ -0,0 +1,53 @@
+
+import * as React from 'react';
+import { styles } from 'styles/css';
+import { Draggable } from 'drag-drop/draggable';
+import { vars } from 'styles/css';
+import { Link } from 'link/link';
+
+export interface DropDrageeProps {
+  text: string,
+  locationStrategy: "top-left" | "centroid" | "mouse",
+};
+
+export class DropDragee extends React.PureComponent<DropDrageeProps, {}> {
+  render() {
+    return (
+      <div {...style.gap}>
+        <Draggable contextName="demo" monitor={{}} onDrop={() => {}} touchStrategy={"waitForTime"} mouseStrategy={"instant"}>
+          <Link to="ima-link" css={style.item}>{this.props.text}</Link>
+        </Draggable>
+      </div>
+    );
+  }
+}
+
+const style = styles({
+  gap: {
+    width: 300,
+    height: 100,
+    margin: 4,
+  },
+  item: {
+    fontSize: 20,
+    width: 300,
+    height: 100,
+    padding: 20,
+    margin: '4px 0',
+    backgroundColor: "#fff",
+    boxShadow: vars.shadow.boxShadow,
+    cursor: 'pointer',
+    display: 'block',
+    textDecoration: 'none',
+    transition: 'box-shadow 125ms',
+    ':focus': {
+      outline: 'none',
+      boxShadow: vars.shadow.deepShadow,
+      textShadow: 'none'
+    },
+    ':hover': {
+      boxShadow: vars.shadow.deepShadow,
+      zIndex: 1
+    }
+  }
+})

client/app/demos/dropping/dropping-demo.tsx

@@ -0,0 +1,47 @@
+
+import * as React from 'react';
+import { styles, css } from 'styles/css';
+import { DragContext } from 'drag-drop/drag-context';
+import { DropDragee } from './drop-dragee';
+
+export interface DropDemoProps {
+  title: JSX.Element
+  locationStrategy: "top-left" | "centroid" | "mouse",
+};
+
+export class DropDemo extends React.PureComponent<DropDemoProps, {}> {
+  render() {
+    return (
+      <DragContext contextName="demo" css={css({maxHeight: '100%', overflow:'auto'})}>
+        <div {...style.slide}>
+          <h2 {...style.title}>{this.props.title}</h2>
+          <DropDragee text="" {...this.props} />
+          <DropDragee text="" {...this.props} />
+          <DropDragee text="The Troubles begin in Northern Ireland" {...this.props} />
+          <DropDragee text="Death of Vladimir Lenin" {...this.props} />
+          <DropDragee text="The first modern trampoline" {...this.props} />
+          <DropDragee text="Tim Berners-Lee invents the World Wide Web" {...this.props} />
+          <DropDragee text="The United States occupation of Haiti begins" {...this.props} />
+          <DropDragee text="Triangle Shirtwaist Factory fire" {...this.props} />
+          <DropDragee text="Woodstock" {...this.props} />
+          <DropDragee text="The teddy bear is invented" {...this.props} />
+          <DropDragee text="First controlled heavier-than-air flight of the Wright Brothers" {...this.props} />
+          <DropDragee text="The discovery of penicillin" {...this.props} />
+        </div>
+      </DragContext>
+    );
+  }
+}
+
+const style = styles({
+  slide: {
+    margin: '0 auto',
+    maxWidth: 320,
+    padding: 10,
+  },
+  title: {
+    fontSize: 40,
+    padding: '20px 0',
+    fontWeight: 300
+  }
+})

client/app/drag-drop/drag-context.tsx

@@ -14,22 +14,19 @@ export interface DragContextProps {
   css: Style
 };
 
-export interface DragPosition {
-  x: number,
-  y: number,
-  left: number,
-  top: number,
-  mouseX: number,
-  mouseY: number,
-}
-
 export interface DragLocation {
-  // Centroid of the dragee
-  x: number, y: number,
-  // top corner of the dragee
-  top: number, left: number,
-  // Actual mouse pointer location
-  mouseX: number, mouseY: number
+  centroid: {
+    x: number,
+    y: number,
+  },
+  topLeft: {
+    x: number,
+    y: number,
+  },
+  mouse: {
+    x: number,
+    y: number
+  }
 }
 
 export interface Actor {
@@ -216,12 +213,18 @@ export class DragContext extends React.Component<DragContextProps, {}> {
     const pos = this.getEventPosition(e);
     this.pointerOffset
     return {
-      x: pos.x + this.pointerOffset.x + drageeSize.width / 2 + this.props.xScroller().scrollLeft,
-      y: pos.y + this.pointerOffset.y + drageeSize.height / 2 + this.props.yScroller().scrollTop,
-      left: pos.x + this.pointerOffset.x,
-      top: pos.y + this.pointerOffset.y,
-      mouseX: pos.x,
-      mouseY: pos.y
+      centroid: {
+        x: pos.x + this.pointerOffset.x + drageeSize.width / 2 + this.props.xScroller().scrollLeft,
+        y: pos.y + this.pointerOffset.y + drageeSize.height / 2 + this.props.yScroller().scrollTop,
+      },
+      topLeft: {
+        x: pos.x + this.pointerOffset.x,
+        y: pos.y + this.pointerOffset.y,
+      },
+      mouse: {
+        x: pos.x,
+        y: pos.y
+      }
     }
   }
 

client/app/drag-drop/utils.tsx

@@ -22,7 +22,7 @@ interface Scrollable {
 }
 
 export interface Scroller {
-  scroll(loc: { mouseX: number, mouseY: number }): void
+  scroll(loc: { mouse: {x: number, y: number }}): void
   stop(): void
 }
 
@@ -39,16 +39,16 @@ export function perimeterScroller(xScrollable: Scrollable, yScrollable: Scrollab
 
   return {
     // TODO rewrite this to look more like Timeline scroller
-    scroll(loc: { mouseX: number, mouseY: number }) {
+    scroll(loc: { mouse: {x: number, y: number }}) {
       // Safety valve; if things go borken, we don't want the page stuck in
       // permascroll hell.
       // This is probably hiding a bug on mobile.
       setTimeout(stop, 1000);
 
       const acceleration = 0.25;
       const scrollArea = 100;
-      const x = loc.mouseX;
-      const y = loc.mouseY;
+      const x = loc.mouse.x;
+      const y = loc.mouse.y;
       function speedGivenLocation(distanceFromEdge: number) {
         if (distanceFromEdge < scrollArea) {
           return (scrollArea - distanceFromEdge) * acceleration;

client/app/presentation/title-and-text/title-and-text.tsx

@@ -37,12 +37,13 @@ const style = styles({
     }
   },
   text: {
-    fontSize: 30,
+    fontSize: 36,
     marginLeft: 'auto',
     textAlign: 'right',
     maxWidth: '70%',
     '@media(max-width:600px)': {
-      maxWidth: '90%'
+      maxWidth: '90%',
+      fontSize: 30,
     }
   }
 })

client/app/slides.tsx

@@ -259,7 +259,7 @@ const slides: Slide[] = [
     }
   },
   {
-    presentationComponent: TitleAndText,
+    presentationComponent: TitleAndBigText,
     presentationArguments: {
       title: "Just use HTML5 Drag events",
       text: "...right?"
@@ -380,30 +380,72 @@ const slides: Slide[] = [
     }
   },
   {
-    presentationComponent: TitleAndText,
+    presentationComponent: TitleAndBigText,
     presentationArguments: {
       title: "More complications",
       text: <ul><li>avoiding long-press</li>
-      <li>scroll events are now passive by default</li>
+      <li>scroll events are passive</li>
       <li>jeez</li>
       </ul>
     },
     secondaryComponent: TitleAndText,
     secondaryArguments: {
       title: "",
-      text: <div>(I <em>told</em> you complications would follow)</div>
+      text: "Building prototypes and observing users are the lub and dub of the same heartbeat; they don't happen strictly once, or in strict order"
     }
   },
   {
-    presentationComponent: TitleAndText,
+    presentationComponent: TitleAndBigText,
     presentationArguments: {
-      title: "More complications",
-      text: <ul><li>avoiding long-press</li>
-      <li>scroll events are now passive by default</li>
-      <li>jeez</li>
+      title: "Dropping",
+      text: <ul><li>where is <del>the beat</del> the dragee?</li>
+      <li>what do we do when it drops?</li>
+      </ul>
+    },
+    secondaryComponent: TitleAndText,
+    secondaryArguments: {
+      title: "",
+      text: "The answer to most subtle ux questions is: try it!"
+    }
+  },
+  {
+    presentationComponent: TitleAndBigText,
+    presentationArguments: {
+      title: "Where is it?",
+      text: <ul><li>The top left corner?</li>
+      <li>The centroid?</li>
+      <li>The mouse location?</li>
       </ul>
     },
     secondaryComponent: TitleAndText,
+    secondaryArguments: {
+      title: "",
+      text: "...and faster you can try variations, the more refined your eventual choice will be."
+    }
+  },
+  {
+    presentationComponent: TitleAndBigText,
+    presentationArguments: {
+      title: "Where is it?",
+      text: <ul>
+        <li>The top left corner?</li>
+        <li>The centroid?</li>
+        <li>The mouse location?</li>
+      </ul>
+    },
+    secondaryComponent: TitleAndText,
+    secondaryArguments: {
+      title: "",
+      text: "This is NOT the Agile Process™; these prototype-test iterations might last 30 minutes."
+    }
+  },
+  {
+    presentationComponent: TitleAndText,
+    presentationArguments: {
+      title: "Motion",
+      text: ""
+    },
+    secondaryComponent: TitleAndText,
     secondaryArguments: {
       title: "",
       text: <div>(I <em>told</em> you complications would follow)</div>

client/app/styles/base.css

@@ -86,7 +86,7 @@ ul li:before {
    float: right;
    position: absolute;
    top: 0;
-   right: -10px;
+   right: -20px;
 }
 
 /* Fixing the Select styling. Oughter be moved to forms/select */