1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
export const generateTransform = (tile, box, bounds, videoBounds) => {
let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
if (is_tiled) {
return 'translateZ(0)'
}
const is_full_width = (tile.type === 'text' && tile.settings.is_marquee)
if (is_full_width) {
x = 0
}
if (box) {
x += box.dx
y += box.dy
}
units = units || 'px'
const [yalign, xalign] = align.split('_')
let transform = ['translateZ(0)']
if (yalign === 'center') {
transform.push('translateY(-50%)')
}
if (xalign === 'center') {
transform.push('translateX(-50%)')
}
// if (x % 2 == 1) x += 0.5
// if (y % 2 == 1) y += 0.5
const xUnits = units === 'video' ? videoUnits(x, bounds, videoBounds) : x + units
const yUnits = units === 'video' ? videoUnits(y, bounds, videoBounds) : y + units
transform.push('translateX(' + xUnits + ')')
transform.push('translateY(' + yUnits + ')')
if (scale !== 1) {
transform.push('scale(' + scale + ')')
}
if (rotation !== 0) {
transform.push('rotateZ(' + rotation + 'deg)')
}
return transform.join(' ')
}
export const generateVideoStyle = (tile, bounds) => {
const style = {
pointerEvents: "none",
}
switch (tile.settings.video_style) {
case 'normal':
style.width = "auto"
style.height = "auto"
break
case 'cover':
if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
style.height = bounds.height
} else {
style.width = bounds.width
style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
}
break
case 'contain':
if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
style.width = bounds.width
style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
} else {
style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
style.height = bounds.height
}
break
}
return style
}
export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
const value = tile.settings[dimension]
if (!value) return "auto"
if (tile.settings.units) {
if (tile.settings.units === 'video') {
return videoUnits(value, bounds, videoBounds)
}
return value + tile.settings.units
}
return value + "px"
}
export const videoUnits = (value, bounds, videoBounds) => (
Math.round(value * bounds.width / videoBounds.width) + 'px'
)
export const hexToRgb = (hex) => {
if (!hex) {
return null
}
let result;
if (hex.length === 7) {
result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
} else if (hex.length === 4) {
result = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex)
} else {
return { r: 255, g: 0, b: 255 }
}
return result ? {
r: parseInt(result[1], 16),
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]
}
|
