Apply to PDF section after loaded

app/components/XMLReview.jsx

@@ -22,12 +22,13 @@ import {
   SectionHeader as Header,
 } from './ui/'
 import UploadFiles from './UploadFiles'
+import HTMLPreview from './HTMLPreview'
 import ManuscriptPreview from './ManuscriptPreview'
 import XMLForm from './XMLForm'
 import PDFViewer from './pdf-viewer/PDFViewer'
 import nxmlXSL from '../assets/xsl/pnihms2pmc3.xsl'
 import htmlXSL from '../assets/xsl/nxml2html.xsl'
-import {startAnnotator} from '../modules/annotate'
+import { startAnnotator } from '../modules/annotate'
 
 const PreviewPageDiv = styled(PreviewPage)`
   .show-mobile {
@@ -64,13 +65,6 @@ const Status = styled.span`
   font-style: italic;
   color: #999;
 `
-const Iframe = styled.iframe`
-  box-sizing: border-box;
-  vertical-align: bottom;
-  width: 100%;
-  height: 100%;
-  border: 0;
-`
 const XMLFileTypes = [
   {
     label: '',
@@ -120,10 +114,6 @@ const XMLFileTypes = [
     label: 'Printsize Image (TIF)',
     value: 'IMGprint',
   },
-  {
-    label: 'Web Preview',
-    value: 'tempHTML',
-  },
 ]
 
 const originalFileTypes = [
@@ -187,6 +177,10 @@ const loadXML = url =>
     request.send()
   })
 
+const setAnnotate = textContent => {
+  startAnnotator(document.getElementsByClassName('pdf-viewer-pane')[0])
+}
+
 class EPMCTagged extends React.Component {
   constructor(props) {
     super(props)
@@ -195,13 +189,15 @@ class EPMCTagged extends React.Component {
       status: '',
       error: '',
       showManuscript: false,
-      showAllFiles: false,
+      showAll: false,
+      html: null,
     }
     this.addManuscriptFiles = addManuscriptFiles.bind(this)
     this.deleteManuscriptFile = deleteManuscriptFile.bind(this)
     this.updateManuscriptFiles = updateManuscriptFiles.bind(this)
     this.setNewManuscript = setNewManuscript.bind(this)
     this.processXML = this.processXML.bind(this)
+    this.webPreview = this.webPreview.bind(this)
     this.setError = this.setError.bind(this)
   }
   static getDerivedStateFromProps(props, state) {
@@ -234,43 +230,48 @@ class EPMCTagged extends React.Component {
         const blob = new Blob([new XMLSerializer().serializeToString(nxml)], {
           type: 'text/xml',
         })
-        const filelist = {
-          name: 'filelist',
-          value: files
-            .filter(
-              file =>
-                file.type === 'IMGview' ||
-                file.type === 'supplement_tag' ||
-                file.type === 'supplementary file',
-            )
-            .map(
-              file =>
-                `${file.filename.substring(
-                  0,
-                  file.filename.lastIndexOf('.'),
-                )}:/api/files/${file.url.split('/').pop()};`,
-            )
-            .join(''),
-        }
-        const html = await transformXML(
-          URL.createObjectURL(blob),
-          htmlXSL,
-          filelist,
-        ).catch(err => {
-          if (err) {
-            this.setError('XML is invalid/malformed.')
-          }
-        })
-        const htmlBlob = new Blob([html.documentElement.outerHTML], {
-          type: 'text/html',
-        })
-        addXMLFiles(blob, htmlBlob, project, currentVersion).then(() => {
+        addXMLFiles(blob, project, currentVersion).then(() => {
           this.setError('')
           this.setState({ status: 'All changes saved.' })
         })
       }
     }
   }
+  async webPreview() {
+    const { currentVersion } = this.props
+    const { files } = currentVersion
+    const nxml = files.find(file => file.type === 'PMC')
+    if (nxml) {
+      const filelist = {
+        name: 'filelist',
+        value: files
+          .filter(
+            file =>
+              file.type === 'IMGview' ||
+              file.type === 'supplement_tag' ||
+              file.type === 'supplementary file',
+          )
+          .map(
+            file =>
+              `${file.filename.substring(
+                0,
+                file.filename.lastIndexOf('.'),
+              )}:/api/files/${file.url.split('/').pop()};`,
+          )
+          .join(''),
+      }
+      const html = await transformXML(nxml.url, htmlXSL, filelist).catch(
+        err => {
+          if (err) {
+            this.setError('XML is invalid/malformed.')
+          }
+        },
+      )
+      this.setState({ html: html.querySelector('#body').outerHTML })
+    } else {
+      this.setState({ html: 'Error. No Web Preview generated.' })
+    }
+  }
   render() {
     const { currentVersion, currentUser, uploadFile } = this.props
     const { files: allfiles, metadata, source } = currentVersion
@@ -284,16 +285,10 @@ class EPMCTagged extends React.Component {
     const pdf = files.find(
       file => file.type === 'pdf4load' || file.type === 'pdf4print',
     )
-    const html = files.find(file => file.type === 'tempHTML')
-      ? `/api/files/${files
-          .find(file => file.type === 'tempHTML')
-          .url.split('/')
-          .pop()}`
-      : null
     const xmlError = metadata.notes
       ? metadata.notes.find(n => n.notesType === 'xml error')
       : ''
-    const { pane, status, error, showManuscript, showAllFiles } = this.state
+    const { pane, status, error, showManuscript, showAll, html } = this.state
     return (
       <PreviewPageDiv>
         <PreviewPanel style={{ flex: showManuscript ? 1 : 2 }}>
@@ -308,7 +303,10 @@ class EPMCTagged extends React.Component {
               </Button>
             )}
             <Button
-              onClick={() => this.setState({ pane: 'web' })}
+              onClick={() => {
+                this.webPreview()
+                this.setState({ pane: 'web' })
+              }}
               primary={pane !== 'web'}
               style={{ flex: 1, margin: '0 1px' }}
             >
@@ -336,13 +334,11 @@ class EPMCTagged extends React.Component {
                 <Header>
                   <H2>XML Files</H2>
                   <Action
-                    onClick={() =>
-                      this.setState({ showAllFiles: !showAllFiles })
-                    }
+                    onClick={() => this.setState({ showAll: !showAll })}
                     style={{ display: 'inline-flex', alignItems: 'center' }}
                   >
                     <Icon color="currentColor">archive</Icon>
-                    {`${showAllFiles ? 'Hide' : 'Show'} submission files`}
+                    {`${showAll ? 'Hide' : 'Show'} submission files`}
                   </Action>
                   <Action
                     onClick={this.processXML}
@@ -369,10 +365,10 @@ class EPMCTagged extends React.Component {
                       addFiles={this.addManuscriptFiles}
                       checked
                       deleteFile={this.deleteManuscriptFile}
-                      files={showAllFiles ? allfiles : files}
+                      files={showAll ? allfiles : files}
                       newManuscriptFile={this.setNewManuscript}
                       parentStatus={status}
-                      types={showAllFiles ? allFileTypes : XMLFileTypes}
+                      types={showAll ? allFileTypes : XMLFileTypes}
                       updateFiles={this.updateManuscriptFiles}
                       uploadFile={uploadFile}
                       version={currentVersion}
@@ -394,9 +390,9 @@ class EPMCTagged extends React.Component {
                 </Content>
               </Section>
             )}
-            {pane === 'pdf' && pdf && <PDFViewer url={pdf.url} />}
-            {pane === 'web' &&
-              html && <Iframe src={html} title="web preview" />}
+            {pane === 'pdf' &&
+              pdf && <PDFViewer textContent={setAnnotate} url={pdf.url} />}
+            {pane === 'web' && html && <HTMLPreview html={html} />}
             {pane === 'original' &&
               manuscript && (
                 <ManuscriptPreview file={manuscript} source={source} />
@@ -428,20 +424,6 @@ class EPMCTagged extends React.Component {
       </PreviewPageDiv>
     )
   }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { pane } = this.state
-    if (pane !== prevState.pane) {
-      if(pane === 'pdf') {
-        const timer = setInterval(() => {
-          if(document.getElementsByClassName('pdf-viewer-pane').length) {
-            startAnnotator(document.getElementsByClassName('pdf-viewer-pane')[0])
-            clearInterval(timer)
-          }
-        }, 50)
-      }
-    }
-  }
 }
 
 export default withRouter(EPMCTagged)