displaying custom cursors on the frontend

1 files changed, 20 insertions, 0 deletions

diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index 043732b..b946716 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -103,4 +103,24 @@ export const hexToRgb = (hex) => {
     g: parseInt(result[2], 16),
     b: parseInt(result[3], 16)
   } : null
+}
+
+export const pickCursor = (tile, cursors, viewing) => {
+  const { cursor, custom_cursor_id } = tile.settings
+  const isCustom = cursor === 'custom' && custom_cursor_id in cursors
+  const customCursor = isCustom ? cursors[custom_cursor_id] : null
+  const x = isCustom ? Math.round(customCursor.settings.width / 2) : null
+  const y = isCustom ? Math.round(customCursor.settings.height / 2) : null
+  let className, cursorStyle
+  if (tile.target_page_id || (viewing && tile.href)) {
+    if ((viewing || cursor !== 'unclickable') && !isCustom) {
+      className = (tile.settings.cursor || 'hand_up')
+    }
+  }
+  if (isCustom) {
+    className = null
+    cursorStyle = `url(${customCursor.url}) ${x} ${y}, `
+    cursorStyle += (tile.target_page_id || tile.href) ? 'pointer' : 'default'
+  }
+  return [className, cursorStyle]
 }
\ No newline at end of file