tiling background images

3 files changed, 20 insertions, 5 deletions

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 5929b15..7d6afcf 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -194,23 +194,34 @@ const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
   }
   console.log(generateTransform(tile))
   let content;
+  let className = 'tile ' + tile.type
   switch (tile.type) {
     case 'image':
-      content = <img src={tile.settings.url} />
+      if (tile.settings.is_tiled) {
+        style.backgroundImage = 'url(' + tile.settings.url + ')'
+        className += ' is_tiled'
+      } else {
+        className += ' ' + tile.settings.align
+        content = <img src={tile.settings.url} />
+      }
       break
     case 'text':
       content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+      className += ' ' + tile.settings.align
       break
   }
   return (
-    <div className={'tile ' + tile.type + ' ' + tile.settings.align} onMouseDown={onMouseDown} style={style}>
+    <div className={className} onMouseDown={onMouseDown} style={style}>
       {content}
     </div>
   )
 }
 
 const generateTransform = tile => {
-  const { x, y, align, rotation, scale } = tile.settings
+  const { x, y, align, rotation, scale, is_tiled } = tile.settings
+  if (is_tiled) {
+    return 'translateZ(0)'
+  }
   const [yalign, xalign] = align.split('_')
   let transform = ['translateZ(0)']
   if (yalign === 'center') {
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index dc81c1a..1c2c826 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -35,7 +35,7 @@ const newImage = (data) => ({
   id: 'new',
   settings: {
     ...newPosition(),
-    tile: false,
+    is_tiled: false,
     url: "https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg",
   },
   type: 'image',
@@ -267,7 +267,7 @@ class TileForm extends Component {
         />
         <Checkbox
           label="Tiled"
-          name="tile"
+          name="is_tiled"
           data={data.settings}
           onChange={this.handleSettingsSelect.bind(this)}
           autoComplete="off"
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 8f671e4..9bf4671 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -10,6 +10,10 @@
 .tile.image {
   display: block;
 }
+.tile.image.is_tiled {
+  width: 100%;
+  height: 100%;
+}
 
 .tile.text {
   display: block;