Styling and playing with different embed positions

pubpub · Sep 26, 2016 · 6ac53f5 · 6ac53f5
1 parent 7974e8b
commit 6ac53f5
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 21 deletions.
diff --git a/src/components/AtomTypes/Document/DocumentEditor.jsx b/src/components/AtomTypes/Document/DocumentEditor.jsx
@@ -156,7 +156,7 @@ export const DocumentEditor = React.createClass({
 		});
 
 		pm.on.transformPastedHTML.add(this.transformHTML);
-		ElementSchema.initiateProseMirror(pm, this.updateEmbedEditor);
+		ElementSchema.initiateProseMirror(pm, this.updateEmbedEditor, this.setEmbedAttribute);
 
 		this.moveMenu();
 		// console.log('onscroll', window.onscroll);
@@ -190,11 +190,11 @@ export const DocumentEditor = React.createClass({
 	},
 
 	setEmbedAttribute: function(key, value, evt) {
-		const currentSelection = pm.selection;
+		const currentSelection = this.pm.selection;
 		const currentFrom = currentSelection.$from.pos;
 		const currentSelectedNode = currentSelection.node;
 		if (evt) { evt.stopPropagation(); }
-		pm.tr.setNodeType(currentFrom, currentSelectedNode.type, {...currentSelectedNode, [key]: value}).apply();
+		this.pm.tr.setNodeType(currentFrom, currentSelectedNode.type, {...currentSelectedNode.attrs, [key]: value}).apply();
 	},
 
 	sizeChange: function(evt) {
@@ -467,8 +467,8 @@ export const DocumentEditor = React.createClass({
 
 
 				{this.state.embedLayoutCoords &&
-					<div style={[styles.embedLayoutEditor, {left: `calc(${this.state.embedLayoutCoords.left}px - 25vw)`, top: this.state.embedLayoutCoords.bottom}]}>
-						<EmbedEditor embedLayoutCoords={this.state.embedLayoutCoords} embedAttrs={this.state.embedAttrs} updateCallback={this.setEmbedAttribute}/>
+					<div style={[styles.embedLayoutEditor, {left: this.state.embedLayoutCoords.left, top: this.state.embedLayoutCoords.bottom}]}>
+						<EmbedEditor embedLayoutCoords={this.state.embedLayoutCoords} embedAttrs={this.state.embedAttrs} saveCallback={this.setEmbedAttribute}/>
 					</div>
 				}
 

diff --git a/src/components/AtomTypes/Document/proseEditor/EmbedEditor.jsx b/src/components/AtomTypes/Document/proseEditor/EmbedEditor.jsx
@@ -18,19 +18,48 @@ export const EmbedEditor = React.createClass({
 		const {participants, status} = this.props;
 
 		return (
-      <div>
-        <div onClick={this.setEmbedAttribute.bind(this, 'align', 'inline')} style={[this.props.embedAttrs.align === 'inline' && styles.activeAlign]}>Inline</div>
-        <div onClick={this.setEmbedAttribute.bind(this, 'align', 'full')} style={[this.props.embedAttrs.align === 'full' && styles.activeAlign]}>Full</div>
-        <div onClick={this.setEmbedAttribute.bind(this, 'align', 'left')} style={[this.props.embedAttrs.align === 'left' && styles.activeAlign]}>Left</div>
-        <div onClick={this.setEmbedAttribute.bind(this, 'align', 'right')} style={[this.props.embedAttrs.align === 'right' && styles.activeAlign]}>Right</div>
-        <input type="text" onChange={this.sizeChange} defaultValue={this.props.embedAttrs.size}/>
-        <textarea type="text" onChange={this.captionChange} defaultValue={this.props.embedAttrs.caption}></textarea>
+      <div className={'contrastbox'} style={styles.box}>
+
+        <label htmlFor={'test'}>
+          Alignment
+        </label>
+
+        <div style={styles.alignDiv} name={'test'}>
+          <div onClick={this.setEmbedAttribute.bind(this, 'align', 'inline')} style={[styles.alignOption, this.props.embedAttrs.align === 'inline' && styles.activeAlign]}>Inline</div>
+          <div onClick={this.setEmbedAttribute.bind(this, 'align', 'full')} style={[styles.alignOption, this.props.embedAttrs.align === 'full' && styles.activeAlign]}>Full</div>
+          <div onClick={this.setEmbedAttribute.bind(this, 'align', 'left')} style={[styles.alignOption, this.props.embedAttrs.align === 'left' && styles.activeAlign]}>Left</div>
+          <div onClick={this.setEmbedAttribute.bind(this, 'align', 'right')} style={[styles.alignOption, this.props.embedAttrs.align === 'right' && styles.activeAlign]}>Right</div>
+        </div>
+
+        <label htmlFor={'sizeNote'}>
+          Size
+        </label>
+        <input type="text" id={'sizeNote'} name={'size'}/>
+
+        <label htmlFor={'captionNote'}>
+          Caption
+        </label>
+        <input type="text" id={'captionNote'} name={'caption'}/>
+
       </div>
 	  );
 
 	}
 });
 
-const styles = {};
+const styles = {
+  box: {
+    padding: '0.6em 1.2em',
+    fontSize: '0.8em'
+  },
+  alignDiv: {
+    paddingBottom: '0.5em',
+  },
+  alignOption: {
+    display: 'inline-block',
+    paddingRight: '0.8em',
+    cursor: 'pointer',
+  }
+};
 
 export default Radium(EmbedEditor);
diff --git a/src/components/AtomTypes/Document/proseEditor/EmbedWrapper.jsx b/src/components/AtomTypes/Document/proseEditor/EmbedWrapper.jsx
@@ -34,9 +34,18 @@ export const EmbedWrapper = React.createClass({
 	},
 
 	getSize: function() {
+		const elem = ReactDOM.findDOMNode(this);
+		const elemStyle = window.getComputedStyle(elem);
+		const rect = elem.getBoundingClientRect();
 		return {
-			width: ReactDOM.findDOMNode(this).offsetWidth,
-			height: ReactDOM.findDOMNode(this).offsetHeight
+			width: elem.clientWidth,
+			height: ReactDOM.findDOMNode(this).offsetHeight,
+			left: rect.left,
+			top: ReactDOM.findDOMNode(this).offsetTop,
+			marginLeft: elemStyle.marginLeft,
+			rectLeft: rect.left,
+			styleHeight: parseInt(elemStyle.getPropertyValue('height'), 0),
+			innerWidth: elem.innerWidth,
 		};
 	},
 
@@ -121,6 +130,7 @@ export const EmbedWrapper = React.createClass({
 			<div ref="embedroot" className={'pub-embed ' + this.props.className} id={this.props.id} style={style}>
 				<AtomViewerPane atomData={atomData} renderType={'embed'} context={this.props.context}/>
 				<div className={'caption'}>{this.props.caption}</div>
+				{(this.props.editing) ? <div>EDITING NOW</div> : null }
 			</div>
 		);
 	}

diff --git a/src/components/AtomTypes/Document/proseEditor/elementSchema.js b/src/components/AtomTypes/Document/proseEditor/elementSchema.js
@@ -8,6 +8,7 @@ import Pointer from './Pointer';
 class ElementSchema {
 	constructor() {
 		this.elementStore = {};
+		this.editingElem = null;
 	}
 	reInit() {
 		this.elementStore = {};
@@ -17,9 +18,10 @@ class ElementSchema {
 		return Math.floor(Math.random() * 10000000);
 	}
 
-	initiateProseMirror = (pm, updateMenuCallback) => {
+	initiateProseMirror = (pm, updateMenuCallback, setEmbedAttribute) => {
 		this.pm = pm;
 		this.updateMenu = updateMenuCallback;
+		this.setEmbedAttribute = setEmbedAttribute;
 
 		pm.on.selectionChange.add(()=>{
 			const currentSelection = pm.selection;
@@ -49,15 +51,18 @@ class ElementSchema {
 				}
 
 				const coords = pm.coordsAtPos(currentFrom);
-				coords.bottom = coords.bottom + window.scrollY - 40;
-				coords.left = coords.left;
 				console.log(size);
+				console.log(coords);
+				coords.bottom = coords.bottom + window.scrollY;
+				coords.left = size.left - size.width;
+				this.editingElem = nodeId;
 				this.updateMenu({
 					embedLayoutCoords: coords,
 					embedAttrs: currentSelectedNode.attrs,
 				});
 
 			} else {
+				this.editingElem = null;
 				this.updateMenu({
 					embedLayoutCoords: undefined,
 					embedAttrs: undefined,
@@ -111,18 +116,30 @@ class ElementSchema {
 
 	createElementAtNode = (node) => {
 
+		const nodeId = node.attrs.nodeId;
+
+		/*
+		if (this.elementStore[nodeId] && this.elementStore[nodeId].dom) {
+			 console.log('returning old node!');
+			 return this.elementStore[nodeId].dom;
+		}
+		*/
+
 		const domParent = document.createElement('span');
 
-		const reactElement = ReactDOM.render(<EmbedWrapper {...node.attrs}/>, domParent);
+		const editing = (this.editingElem === nodeId);
+
+		const reactElement = ReactDOM.render(<EmbedWrapper setEmbedAttribute={this.setEmbedAttribute} editing={editing} {...node.attrs}/>, domParent);
 		const dom = domParent.childNodes[0];
 		dom.className += ' embed';
-		const nodeId = node.attrs.nodeId;
+
 		dom.setAttribute('data-nodeId', nodeId);
-		this.elementStore[nodeId] = {node: node, element: reactElement};
+		this.elementStore[nodeId] = {node: node, element: reactElement, dom: domParent, active: true};
 
 		dom.addEventListener('DOMNodeRemovedFromDocument', (evt) => {
 			ReactDOM.unmountComponentAtNode(domParent);
 			delete this.elementStore[nodeId];
+			// this.elementStore[nodeId].active = false;
 		});
 
 		// this.sortNodes();

diff --git a/static/css/pubpub.css b/static/css/pubpub.css
@@ -311,6 +311,9 @@ h2 {
 	left: -2px;
 	top: calc(100% + 2px);
 	min-width: calc(100% + 2px);
+}
+
+.arrow-down-child, .contrastbox {
 	border: 1px solid #2C2A2B;
 	color: #2C2A2B;
 	background-color: #F3F3F4;