avoid executing embedded scripts multiple times. click to hide

5 files changed, 43 insertions, 32 deletions

diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index b6d1d78..9ab5616 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -11,7 +11,9 @@ export default function TileImage({ tile, box, bounds, videoBounds, viewing, onM
   let content
   let className = ['tile', tile.type].join(' ')
   if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+    if (viewing || tile.settings.cursor !== 'unclickable') {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
   }
 
   if (!tile.settings.url) {
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index fb6ec03..4dd4fd4 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -10,7 +10,9 @@ export default function TileScript({ tile, box, bounds, videoBounds, viewing, on
   // console.log(generateTransform(tile))
   let className = ['tile', tile.type].join(' ')
   if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+    if (viewing || tile.settings.cursor !== 'unclickable') {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
   }
 
   let content = ""
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 47d83a1..e844adf 100644
--- a/frontend/app/views/tile/handles/tile.script.js
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -1,34 +1,36 @@
-import React from 'react'
+import React, { Component } from 'react'
 import { generateTransform } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
-  // console.log(tile)
-  const style = {
-    transform: generateTransform(tile, box, bounds, videoBounds),
-    opacity: tile.settings.opacity,
-  }
-  // console.log(generateTransform(tile))
-  let content;
-  let className = ['tile', tile.type].join(' ')
-  if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+export default class TileScript extends Component {
+  componentDidMount(){
+    const { viewing, tile } = this.props
+    if (viewing) {
+      eval(tile.settings.content)
+    }
   }
+  render() {
+    if (viewing) {
+      return <div style={{ display: 'none' }} />
+    }
 
-  content = ""
-  if (viewing) {
-    eval(tile.settings.content)
-  } else {
-    content = "SCRIPT"
-  }
+    const { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
+    // console.log(tile)
+    const style = {
+      transform: generateTransform(tile, box, bounds, videoBounds),
+      opacity: tile.settings.opacity,
+    }
+    // console.log(generateTransform(tile))
+    let className = ['tile', tile.type, 'hand_up'].join(' ')
 
-  return (
-    <div
-      className={className}
-      onMouseDown={onMouseDown}
-      onDoubleClick={onDoubleClick}
-      style={style}
-    >
-      {content}
-    </div>
-  )
+    return (
+      <div
+        className={className}
+        onMouseDown={onMouseDown}
+        onDoubleClick={onDoubleClick}
+        style={style}
+      >
+        {"SCRIPT"}
+      </div>
+    )
+  }
 }
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 0bcccc9..2fd63b2 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -10,12 +10,15 @@ export default function TileScript({ tile, box, bounds, videoBounds, viewing, on
   // console.log(generateTransform(tile))
   let className = ['tile', tile.type].join(' ')
   if (tile.target_page_id || (viewing && tile.href)) {
-    className += ' ' + (tile.settings.cursor || 'hand_up')
+    if (viewing || tile.settings.cursor !== 'unclickable') {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
   }
 
   if (!tile.settings.content) {
     return null
   }
+  
   let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
   className += ' ' + tile.settings.align
   style.width = unitsDimension(tile, 'width', bounds, videoBounds)
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index b4183ce..3166848 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -73,7 +73,9 @@ export default class TileVideo extends Component {
     }
     let className = ['tile', tile.type].join(' ')
     if (tile.target_page_id || (viewing && tile.href)) {
-      className += ' ' + (tile.settings.cursor || 'hand_up')
+      if (viewing || tile.settings.cursor !== 'unclickable') {
+        className += ' ' + (tile.settings.cursor || 'hand_up')
+      }
     }
     // console.log(tile.settings)
     if (!tile.settings.url) {