Added in a basic conversation component #172

build/main.min.js

@@ -9,7 +9,7 @@ var style = require('beagle-style')
 var React = require('react')
 var App = React.createFactory(require('./app.jsx'))
 var linkHandler = require('./utilities/linkhandler.js')
-var sampleData = require('./data/sampleData.js')
+var sampleData = require('./data/sampleData.js').data
 var url = require('./lib/url-checks')
 var PDFJS = require('beagle-pdf')
 var sidebarOpen = false
@@ -187,7 +187,7 @@ function buildView (options) {
   // // isn't an error or a change in getPdfDocumentLocation() or options, it just
   // // doesn't fire the callback.
   if (options.pdfLocation) {
-    // console.log('pdf location', options)
+    console.log('pdf location', options)
 
     PDFJS.getFingerprint(options.pdfLocation, function (err, fingerprint) {
       if (err) { throw (new Error('Could not get the PDF fingerprint')) }
@@ -202,10 +202,12 @@ function buildView (options) {
         'pdf': val
       }
 
+      // TODO Load in the previous highlights here
       var displayHighlights = function () {
         db.get(fingerprint, function (err, response) {
           if (err) { return console.log('Fingerprint not found in db', err) }
-          // console.log('Fingerprint found in db', fingerprint, response)
+
+          console.log('Fingerprint found in db', fingerprint, response)
 
           _.forEach(response.selections, function (selection) {
             // TODO Load in HTMLCoord highlights, too
@@ -216,7 +218,8 @@ function buildView (options) {
         })
       }
 
-      // Called on initial load
+      displayHighlights()
+
       window.addEventListener('scalechange', displayHighlights(), true)
 
       PDFJS.readPDFText(options.pdfLocation, options, function (err, data) {
@@ -228,7 +231,7 @@ function buildView (options) {
 
         val.data = (data) ? {'publication': data} : sampleData.data
 
-        // console.log('PDF data and fingerprint', val)
+        console.log('PDF data and fingerprint', val)
 
         React.render(
           App(val),
@@ -252,7 +255,7 @@ function buildView (options) {
 
 // If we're loading Beagle in viewer.html
 if (window.location.pathname === '/pdfjs/web/viewer.html') {
-  // console.log('In the PDF.js viewer')
+  console.log('In the PDF.js viewer')
 
   domready(function () {
     getModules(['altmetrics'], function (modules) {
@@ -283,6 +286,7 @@ var Screenshot = require('./components/screenshot.jsx')
 var Sidebar = require('./components/sidebar.jsx')
 var PDFUrlLink = require('./components/pdfUrlLink.jsx')
 var Slack = require('./components/slack.jsx').SendSlack
+var Conversation = require('./components/conversation.jsx')
 
 // var Cite = require('./components/cite.jsx')
 // var Graph = require('./components/graph.jsx')
@@ -292,6 +296,8 @@ var Slack = require('./components/slack.jsx').SendSlack
 // var Tags = require('./components/tags.jsx')
 // var Toc = require('./components/toc.jsx')
 
+var user = require('./data/sampleData.js').user
+
 module.exports = React.createClass({displayName: "exports",
 
   render: function () {
@@ -304,6 +310,8 @@ module.exports = React.createClass({displayName: "exports",
 
         React.createElement(Screenshot, {fingerprint: this.props.fingerprint, location: this.props.location}), 
 
+        React.createElement(Conversation, {user: user}), 
+
         React.createElement(EmailForm, {fingerprint: this.props.fingerprint}), 
 
         React.createElement(Accordion, null, 
@@ -345,7 +353,7 @@ module.exports = React.createClass({displayName: "exports",
 })
 
 
-},{"./components/emailForm.jsx":"/Users/richard/src/beagle/js/components/emailForm.jsx","./components/highlight.jsx":"/Users/richard/src/beagle/js/components/highlight.jsx","./components/login.jsx":"/Users/richard/src/beagle/js/components/login.jsx","./components/pdfUrlLink.jsx":"/Users/richard/src/beagle/js/components/pdfUrlLink.jsx","./components/publication.jsx":"/Users/richard/src/beagle/js/components/publication.jsx","./components/screenshot.jsx":"/Users/richard/src/beagle/js/components/screenshot.jsx","./components/sidebar.jsx":"/Users/richard/src/beagle/js/components/sidebar.jsx","./components/slack.jsx":"/Users/richard/src/beagle/js/components/slack.jsx","react":"/Users/richard/src/beagle/node_modules/react/react.js","react-bootstrap":"/Users/richard/src/beagle/node_modules/react-bootstrap/lib/main.js"}],"/Users/richard/src/beagle/js/components/alert.jsx":[function(require,module,exports){
+},{"./components/conversation.jsx":"/Users/richard/src/beagle/js/components/conversation.jsx","./components/emailForm.jsx":"/Users/richard/src/beagle/js/components/emailForm.jsx","./components/highlight.jsx":"/Users/richard/src/beagle/js/components/highlight.jsx","./components/login.jsx":"/Users/richard/src/beagle/js/components/login.jsx","./components/pdfUrlLink.jsx":"/Users/richard/src/beagle/js/components/pdfUrlLink.jsx","./components/publication.jsx":"/Users/richard/src/beagle/js/components/publication.jsx","./components/screenshot.jsx":"/Users/richard/src/beagle/js/components/screenshot.jsx","./components/sidebar.jsx":"/Users/richard/src/beagle/js/components/sidebar.jsx","./components/slack.jsx":"/Users/richard/src/beagle/js/components/slack.jsx","./data/sampleData.js":"/Users/richard/src/beagle/js/data/sampleData.js","react":"/Users/richard/src/beagle/node_modules/react/react.js","react-bootstrap":"/Users/richard/src/beagle/node_modules/react-bootstrap/lib/main.js"}],"/Users/richard/src/beagle/js/components/alert.jsx":[function(require,module,exports){
 var React = require('react')
 
 module.exports = React.createClass({
@@ -367,7 +375,41 @@ module.exports = React.createClass({
 })
 
 
-},{"react":"/Users/richard/src/beagle/node_modules/react/react.js"}],"/Users/richard/src/beagle/js/components/emailForm.jsx":[function(require,module,exports){
+},{"react":"/Users/richard/src/beagle/node_modules/react/react.js"}],"/Users/richard/src/beagle/js/components/conversation.jsx":[function(require,module,exports){
+var React = require('react')
+var UserBar = require('./userBar.jsx')
+
+var text = 'Realism dolphin sentient artisanal plastic youtube franchise Kowloon numinous pen bridge meta-geodesic tower receding. Convenience store nano-dome 3D-printed bicycle shanty town claymore mine 8-bit. Realism rebar katana paranoid marketing smart-faded systemic skyscraper nano-shrine girl Tokyo urban franchise. Wristwatch dolphin ablative shoes neural voodoo god shrine math. Sunglasses A.I. assassin sub-orbital-ware-space assault Shibuya cardboard skyscraper geodesic crypto-spook kanji. '
+
+var Conversation = React.createClass({
+  displayName: 'Conversation',
+  render: function () {
+    var conversationStyle = {
+      margin: '5px 0px',
+      border: '1px solid #999',
+      borderLeft: '3px solid #AE8DC7',
+      borderRadius: '2px'
+    }
+
+    var textStyle = {
+      padding: '5px'
+    }
+
+    return (
+      React.createElement("div", {style: conversationStyle}, 
+        React.createElement(UserBar, {user: this.props.user}), 
+
+        React.createElement("p", {style: textStyle}, text)
+
+      )
+    )
+  }
+})
+
+module.exports = exports = Conversation
+
+
+},{"./userBar.jsx":"/Users/richard/src/beagle/js/components/userBar.jsx","react":"/Users/richard/src/beagle/node_modules/react/react.js"}],"/Users/richard/src/beagle/js/components/emailForm.jsx":[function(require,module,exports){
 var React = require('react')
 var db = require('level-browserify')('./mydb')
 var url = require('../lib/url-checks')
@@ -1138,9 +1180,70 @@ module.exports.ContactForm = exports.ContactForm = ContactForm
 module.exports.SendSlack = exports.SendSlack = SendSlack
 
 
-},{"../utilities/classNames.js":"/Users/richard/src/beagle/js/utilities/classNames.js","browser-node-slack":"/Users/richard/src/beagle/node_modules/browser-node-slack/slack.js","react":"/Users/richard/src/beagle/node_modules/react/react.js","react-bootstrap":"/Users/richard/src/beagle/node_modules/react-bootstrap/lib/main.js"}],"/Users/richard/src/beagle/js/data/sampleData.js":[function(require,module,exports){
+},{"../utilities/classNames.js":"/Users/richard/src/beagle/js/utilities/classNames.js","browser-node-slack":"/Users/richard/src/beagle/node_modules/browser-node-slack/slack.js","react":"/Users/richard/src/beagle/node_modules/react/react.js","react-bootstrap":"/Users/richard/src/beagle/node_modules/react-bootstrap/lib/main.js"}],"/Users/richard/src/beagle/js/components/userBar.jsx":[function(require,module,exports){
+/** @jsx React.DOM */
+var React = require('react')
+
+var conversation = {
+  date: '10 minutes ago'
+}
+
+var UserBar = React.createClass({
+  displayName: 'UserBar',
+  propTypes: {
+   data: React.PropTypes.object
+  },
+  render: function () {
+    var imgStyle = {
+      margin: '10px 10px 5px 10px',
+      float: 'left',
+      width: '40px',
+      height: '40px'
+    }
+
+    var nameStyle = {
+      paddingTop: '7px',
+      fontSize: '14px',
+      fontWeight: '600',
+      marginBottom: '3px'
+    }
+
+    var dateStamp = {
+      color: 'gray',
+      textDecoration: 'underline'
+    }
+
+    return (
+      React.createElement("div", null, 
+        React.createElement("img", {src: this.props.user.photo, style: imgStyle}), 
+        React.createElement("p", {style: nameStyle}, this.props.user.name), 
+        React.createElement("p", {style: dateStamp}, conversation.date)
+      )
+    )
+  }
+})
+
+module.exports = UserBar
+
+
+},{"react":"/Users/richard/src/beagle/node_modules/react/react.js"}],"/Users/richard/src/beagle/js/data/sampleData.js":[function(require,module,exports){
 var data = {}
 
+var user = {
+  'email': '[email protected]',
+  'department': 'Physics',
+  'graph': 'images/graph.png',
+  'name': 'Richard Feynman',
+  'photo': 'http://upload.wikimedia.org/wikipedia/en/4/42/Richard_Feynman_Nobel.jpg',
+  'publications': [
+    'Lectures on Physics 1',
+    'Lectures on Physics 2',
+    'Lectures on Physics 3'
+  ],
+  'university': 'CIT',
+  'website': '#website'
+}
+
 data.data = {
   title: 'This is an example title',
   publication: {
@@ -1216,7 +1319,8 @@ data.data = {
   }
 }
 
-module.exports = data
+module.exports.data = exports.data = data
+module.exports.user = exports.user = user
 
 
 },{}],"/Users/richard/src/beagle/js/lib/url-checks.js":[function(require,module,exports){
@@ -6846,7 +6950,7 @@ var WorkerTransport = (function WorkerTransportClosure() {
         PDFJS.fakeWorkerFilesLoadedCapability.resolve();
       }
       PDFJS.fakeWorkerFilesLoadedCapability.promise.then(function () {
-        // warn('Setting up fake worker.');
+        warn('Setting up fake worker.');
         // If we don't use a worker, just post/sendMessage to the main thread.
         var fakeWorker = {
           postMessage: function WorkerTransport_postMessage(obj) {

js/app.jsx

@@ -10,6 +10,7 @@ var Screenshot = require('./components/screenshot.jsx')
 var Sidebar = require('./components/sidebar.jsx')
 var PDFUrlLink = require('./components/pdfUrlLink.jsx')
 var Slack = require('./components/slack.jsx').SendSlack
+var Conversation = require('./components/conversation.jsx')
 
 // var Cite = require('./components/cite.jsx')
 // var Graph = require('./components/graph.jsx')
@@ -19,6 +20,8 @@ var Slack = require('./components/slack.jsx').SendSlack
 // var Tags = require('./components/tags.jsx')
 // var Toc = require('./components/toc.jsx')
 
+var user = require('./data/sampleData.js').user
+
 module.exports = React.createClass({
 
   render: function () {
@@ -31,6 +34,8 @@ module.exports = React.createClass({
 
         <Screenshot fingerprint={this.props.fingerprint} location={this.props.location} />
 
+        <Conversation user={user} />
+
         <EmailForm fingerprint={this.props.fingerprint} />
 
         <Accordion>

js/components/userBar.jsx

@@ -0,0 +1,43 @@
+/** @jsx React.DOM */
+var React = require('react')
+
+var conversation = {
+  date: '10 minutes ago'
+}
+
+var UserBar = React.createClass({
+  displayName: 'UserBar',
+  propTypes: {
+   data: React.PropTypes.object
+  },
+  render: function () {
+    var imgStyle = {
+      margin: '10px 10px 5px 10px',
+      float: 'left',
+      width: '40px',
+      height: '40px'
+    }
+
+    var nameStyle = {
+      paddingTop: '7px',
+      fontSize: '14px',
+      fontWeight: '600',
+      marginBottom: '3px'
+    }
+
+    var dateStamp = {
+      color: 'gray',
+      textDecoration: 'underline'
+    }
+
+    return (
+      <div>
+        <img src={this.props.user.photo} style={imgStyle} />
+        <p style={nameStyle} >{this.props.user.name}</p>
+        <p style={dateStamp} >{conversation.date}</p>
+      </div>
+    )
+  }
+})
+
+module.exports = UserBar