summaryrefslogtreecommitdiff
path: root/frontend/app/views/tile
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/views/tile')
-rw-r--r--frontend/app/views/tile/components/tile.form.js17
-rw-r--r--frontend/app/views/tile/forms/tile.constants.js1
-rw-r--r--frontend/app/views/tile/forms/tile.form.hyperlink.js11
-rw-r--r--frontend/app/views/tile/handles/tile.gradient.js15
-rw-r--r--frontend/app/views/tile/handles/tile.image.js15
-rw-r--r--frontend/app/views/tile/handles/tile.link.js15
-rw-r--r--frontend/app/views/tile/handles/tile.script.js2
-rw-r--r--frontend/app/views/tile/handles/tile.text.js22
-rw-r--r--frontend/app/views/tile/handles/tile.video.js25
-rw-r--r--frontend/app/views/tile/tile.utils.js20
10 files changed, 104 insertions, 39 deletions
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 372cd1d..b50af2f 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -54,6 +54,7 @@ class TileForm extends Component {
modified: false,
pageList: [],
popupList: [],
+ cursors: {},
}
constructor(props){
@@ -88,7 +89,13 @@ class TileForm extends Component {
...POPUP_LIST_TOP_OPTIONS,
...Object.keys(page.editor.popups).map(popup_group => ({ name: popup_group, label: popup_group }))
]
- this.setState({ pageList, popupList })
+ let cursors = this.props.graph.show.res.uploads
+ .filter(upload => upload.tag === 'cursor')
+ .reduce((a,b) => {
+ a[b.id] = b
+ return a
+ }, {})
+ this.setState({ pageList, popupList, cursors })
if (isNew) {
const newTile = TILE_CONSTRUCTORS.image({
id: "new",
@@ -110,6 +117,10 @@ class TileForm extends Component {
errorFields: new Set([]),
})
}
+ if (this.props.page.editor.pickedCursor !== prevProps.page.editor.pickedCursor) {
+ console.log("cursor >>", this.props.page.editor.pickedCursor.id)
+ this.handleSettingsSelect('custom_cursor_id', this.props.page.editor.pickedCursor.id)
+ }
}
componentWillUnmount() {
@@ -175,6 +186,9 @@ class TileForm extends Component {
[name]: value,
}
})
+ if (name === 'cursor' && value === 'custom') {
+ this.props.pageActions.toggleCursorList(true)
+ }
}
handleAlignment(name, value) {
@@ -315,6 +329,7 @@ class TileForm extends Component {
<TileHyperlinkForm
tile={temporaryTile} errorFields={errorFields} parent={this}
pageList={this.state.pageList} popupList={this.state.popupList}
+ cursors={this.state.cursors}
/>
<TileMiscForm tile={temporaryTile} errorFields={errorFields} parent={this} />
<TileSoundForm tile={temporaryTile} errorFields={errorFields} parent={this} />
diff --git a/frontend/app/views/tile/forms/tile.constants.js b/frontend/app/views/tile/forms/tile.constants.js
index f2dd0ad..d7dea31 100644
--- a/frontend/app/views/tile/forms/tile.constants.js
+++ b/frontend/app/views/tile/forms/tile.constants.js
@@ -58,6 +58,7 @@ export const CURSORS = [
{ name: 'hand_left', label: 'Left', },
{ name: 'hand_right', label: 'Right', },
{ name: 'unclickable', label: 'Unclickable', },
+ { name: 'custom', label: 'Custom', }
]
export const MARQUEE_DIRECTIONS = [
diff --git a/frontend/app/views/tile/forms/tile.form.hyperlink.js b/frontend/app/views/tile/forms/tile.form.hyperlink.js
index c444748..4d3e0b5 100644
--- a/frontend/app/views/tile/forms/tile.form.hyperlink.js
+++ b/frontend/app/views/tile/forms/tile.form.hyperlink.js
@@ -11,12 +11,18 @@ import {
NO_POPUP, OPEN_POPUP_LINK, CLOSE_POPUP_LINK
} from './tile.constants'
-export default function TileHyperlinkForm({ tile, pageList, popupList, parent }) {
+export default function TileHyperlinkForm({ tile, pageList, popupList, cursors, parent }) {
const isExternalLink = tile.target_page_id === EXTERNAL_LINK
// const isPopupLink = (
// tile.target_page_id === OPEN_POPUP_LINK ||
// tile.target_page_id === CLOSE_POPUP_LINK
// )
+ let cursor
+ console.log(tile.settings.cursor, tile.settings.custom_cursor_id)
+ if (tile.settings.cursor === 'custom' && tile.settings.custom_cursor_id) {
+ cursor = cursors[tile.settings.custom_cursor_id]
+ console.log(cursor)
+ }
return (
<div>
<div className={'row selects'}>
@@ -36,6 +42,9 @@ export default function TileHyperlinkForm({ tile, pageList, popupList, parent })
onChange={parent.handleSettingsSelect}
/>
</div>
+ {cursor && (
+ <img src={cursor.url} className="sampleCursor" />
+ )}
{isExternalLink && (
<div>
<TextInput
diff --git a/frontend/app/views/tile/handles/tile.gradient.js b/frontend/app/views/tile/handles/tile.gradient.js
index 0b20ace..8d7091f 100644
--- a/frontend/app/views/tile/handles/tile.gradient.js
+++ b/frontend/app/views/tile/handles/tile.gradient.js
@@ -1,7 +1,7 @@
import React from 'react'
-import { generateTransform, unitsDimension, hexToRgb } from 'app/views/tile/tile.utils'
+import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils'
-export default function TileGradient({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+export default function TileGradient({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
// console.log(tile)
const style = {
transform: generateTransform(tile, box, bounds, videoBounds),
@@ -9,10 +9,13 @@ export default function TileGradient({ tile, box, bounds, videoBounds, viewing,
}
// console.log(generateTransform(tile))
let className = ['tile', tile.type].join(' ')
- if (tile.target_page_id || (viewing && tile.href)) {
- if (viewing || tile.settings.cursor !== 'unclickable') {
- className += ' ' + (tile.settings.cursor || 'hand_up')
- }
+
+ let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
+ if (cursorClass) {
+ className += " " + cursorClass
+ }
+ if (cursorStyle) {
+ style.cursor = cursorStyle
}
className += ' ' + tile.settings.align
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index c4d5e58..78b492e 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,7 +1,7 @@
import React from 'react'
-import { generateTransform } from 'app/views/tile/tile.utils'
+import { generateTransform, pickCursor } from 'app/views/tile/tile.utils'
-export default function TileImage({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+export default function TileImage({ tile, box, bounds, cursors, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
// console.log(tile)
const style = {
transform: generateTransform(tile, box, bounds, videoBounds),
@@ -10,10 +10,13 @@ export default function TileImage({ tile, box, bounds, videoBounds, viewing, onM
// console.log(generateTransform(tile))
let content
let className = ['tile', tile.type].join(' ')
- if (tile.target_page_id || (viewing && tile.href)) {
- if (viewing || tile.settings.cursor !== 'unclickable') {
- className += ' ' + (tile.settings.cursor || 'hand_up')
- }
+
+ let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
+ if (cursorClass) {
+ className += " " + cursorClass
+ }
+ if (cursorStyle) {
+ style.cursor = cursorStyle
}
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 8ddc3ea..2d0e368 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -1,7 +1,7 @@
import React from 'react'
-import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
+import { generateTransform, unitsDimension, pickCursor } from 'app/views/tile/tile.utils'
-export default function TileLink({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+export default function TileLink({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
// console.log(tile)
const style = {
transform: generateTransform(tile, box, bounds, videoBounds),
@@ -9,10 +9,13 @@ export default function TileLink({ tile, box, bounds, videoBounds, viewing, onMo
}
// console.log(generateTransform(tile))
let className = ['tile', tile.type].join(' ')
- if (tile.target_page_id || (viewing && tile.href)) {
- if (viewing || tile.settings.cursor !== 'unclickable') {
- className += ' ' + (tile.settings.cursor || 'hand_up')
- }
+
+ let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
+ if (cursorClass) {
+ className += " " + cursorClass
+ }
+ if (cursorStyle) {
+ style.cursor = cursorStyle
}
let content = ""
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index e844adf..44a525b 100644
--- a/frontend/app/views/tile/handles/tile.script.js
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -10,7 +10,7 @@ export default class TileScript extends Component {
}
render() {
if (viewing) {
- return <div style={{ display: 'none' }} />
+ return null
}
const { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 6ef8734..cfd4b30 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -1,8 +1,12 @@
import React from 'react'
-import { generateTransform, unitsDimension, hexToRgb } from 'app/views/tile/tile.utils'
+import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils'
import Marquee from "react-fast-marquee"
-export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+export default function TileText({ tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter }) {
+ if (!tile.settings.content) {
+ return null
+ }
+
// console.log(tile)
const style = {
transform: generateTransform(tile, box, bounds, videoBounds),
@@ -10,15 +14,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)) {
- if (viewing || tile.settings.cursor !== 'unclickable') {
- className += ' ' + (tile.settings.cursor || 'hand_up')
- }
- }
- if (!tile.settings.content) {
- return null
+ let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
+ if (cursorClass) {
+ className += " " + cursorClass
}
+ if (cursorStyle) {
+ style.cursor = cursorStyle
+ }
+
let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
className += ' ' + tile.settings.align
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index e8dbc72..dbcc856 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -1,6 +1,6 @@
import React, { Component } from 'react'
-import { generateTransform, generateVideoStyle } from 'app/views/tile/tile.utils'
+import { generateTransform, generateVideoStyle, pickCursor } from 'app/views/tile/tile.utils'
import { timestampToSeconds } from 'app/utils'
export default class TileVideo extends Component {
@@ -65,22 +65,29 @@ export default class TileVideo extends Component {
}
render() {
- let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick, onMouseEnter } = this.props
+ let { tile, box, bounds, videoBounds, cursors, viewing, onMouseDown, onDoubleClick, onMouseEnter } = this.props
+
+ if (!tile.settings.url) {
+ return null
+ }
+
// console.log(tile)
const style = {
transform: generateTransform(tile, box, bounds, videoBounds),
opacity: tile.settings.opacity,
}
+
let className = ['tile', tile.type].join(' ')
- if (tile.target_page_id || (viewing && tile.href)) {
- if (viewing || tile.settings.cursor !== 'unclickable') {
- className += ' ' + (tile.settings.cursor || 'hand_up')
- }
+
+ let [cursorClass, cursorStyle] = pickCursor(tile, cursors, viewing)
+ if (cursorClass) {
+ className += " " + cursorClass
}
- // console.log(tile.settings)
- if (!tile.settings.url) {
- return null
+ if (cursorStyle) {
+ style.cursor = cursorStyle
}
+
+ // console.log(tile.settings)
className += ' ' + tile.settings.align
const muted = viewing
? tile.settings.muted
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
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-24 02:10:15 +0000