split tile handles into individual files. add video subsection loop

1 files changed, 68 insertions, 0 deletions

diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
new file mode 100644
index 0000000..8782f85
--- /dev/null
+++ b/frontend/app/views/tile/tile.utils.js
@@ -0,0 +1,68 @@
+export const generateTransform = (tile, box) => {
+  let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
+  if (is_tiled) {
+    return 'translateZ(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
+  transform.push('translateX(' + x + units + ')')
+  transform.push('translateY(' + y + units + ')')
+  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) => {
+  const value = tile.settings[dimension]
+  if (!value) return "auto"
+  if (tile.settings.units) return value + tile.settings.units
+  return value + "px"
+}