toggle side of sidebar. popup form. wait to appear form.

10 files changed, 82 insertions, 15 deletions

diff --git a/frontend/app/common/slider.component.js b/frontend/app/common/slider.component.js
index 9d96b1e..d19ab9b 100644
--- a/frontend/app/common/slider.component.js
+++ b/frontend/app/common/slider.component.js
@@ -53,7 +53,7 @@ export default class Slider extends Component {
     }
   }
   handleKeyDown(e) {
-    console.log(e.keyCode)
+    // console.log(e.keyCode)
   }
   handleRange(e){
     let { value: new_value } = e.target
@@ -90,7 +90,7 @@ export default class Slider extends Component {
       step = 1
       value = this.props.options.indexOf(value)
     } else {
-      step = (this.props.max - this.props.min) / 100
+      step = this.props.step || (this.props.max - this.props.min) / 100
       text_value = parseFloat(value).toFixed(2)
     }
     return (
diff --git a/frontend/app/types.js b/frontend/app/types.js
index 19d1e69..bcd8053 100644
--- a/frontend/app/types.js
+++ b/frontend/app/types.js
@@ -15,6 +15,8 @@ export const page = crud_type('page', [
   'update_page_tile',
   'set_tile_sort_order', 'update_tile_sort_order',
   'show_tile_list', 'hide_tile_list', 'toggle_tile_list',
+  'toggle_popups',
+  'toggle_sidebar_side',
 ])
 
 export const tile = crud_type('tile', [
diff --git a/frontend/app/views/audio/components/audio.select.js b/frontend/app/views/audio/components/audio.select.js
index cf1dfb2..384bb7a 100644
--- a/frontend/app/views/audio/components/audio.select.js
+++ b/frontend/app/views/audio/components/audio.select.js
@@ -6,7 +6,7 @@ import { unslugify } from 'app/utils'
 
 const NO_AUDIO = 0
 const AUDIO_TOP_OPTIONS = [
-  { name: NO_AUDIO, label: 'No Audio' },
+  { name: NO_AUDIO, label: 'No Sound' },
   { name: -2, label: '──────────', disabled: true },
 ]
 
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index c6ef115..a557280 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -29,6 +29,10 @@
   max-height: 100%;
   z-index: 20;
 }
+.sidebar.left {
+  right: auto;
+  left: 0;
+}
 .box {
   width: 15rem;
   padding: 0.5rem;
@@ -127,6 +131,21 @@
   font-size: smaller;
   margin-bottom: 0.25rem;
 }
+button.box_corner {
+  position: absolute;
+  top: 1.25rem; right: 1.25rem;
+  padding: 0.5rem;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+}
+button.box_corner:hover {
+  color: #fff;
+  background: rgba(64,64,128,0.5);
+}
+.sidebar.left button.box_corner {
+  transform: scaleX(-1);
+}
 
 .box .slider {
   display: flex;
diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js
index dbdf1b6..d40f6e0 100644
--- a/frontend/app/views/page/components/page.header.js
+++ b/frontend/app/views/page/components/page.header.js
@@ -27,6 +27,7 @@ function PageHeader(props) {
       <div>
         <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
         <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button>
+        <button onClick={() => props.pageActions.togglePopups()}>Toggle popups</button>
         <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button>
         <button onClick={() => props.graphActions.viewPage(props.graph, props.page)}>View page</button>
       </div>
diff --git a/frontend/app/views/page/page.actions.js b/frontend/app/views/page/page.actions.js
index d2bbbe2..c584848 100644
--- a/frontend/app/views/page/page.actions.js
+++ b/frontend/app/views/page/page.actions.js
@@ -50,6 +50,16 @@ export const toggleTileList = () => dispatch => {
   dispatch({ type: types.page.toggle_tile_list })
 }
 
+// Popups
+
+export const togglePopups = () => dispatch => {
+  dispatch({ type: types.page.toggle_popups })
+}
+
+export const toggleSidebarSide = () => dispatch => {
+  dispatch({ type: types.page.toggle_sidebar_side })
+}
+
 // Update local page tile state when we change it
 
 export const updatePageTile = tile => dispatch => {
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
index 68347b7..decdf79 100644
--- a/frontend/app/views/page/page.container.js
+++ b/frontend/app/views/page/page.container.js
@@ -70,7 +70,7 @@ class PageContainer extends Component {
         <PageHeader />
         <div className='body'>
           <PageEditor />
-          <div className='sidebar'>
+          <div className={this.props.page.editor.sidebarOnRight ? 'sidebar' : 'sidebar left'}>
             {this.props.graph.editor.editingPage && <PageEdit />}
             {this.props.page.editor.addingTile && <TileNew />}
             {this.props.page.editor.editingTile && <TileEdit />}
diff --git a/frontend/app/views/page/page.reducer.js b/frontend/app/views/page/page.reducer.js
index c2d231a..b0c4553 100644
--- a/frontend/app/views/page/page.reducer.js
+++ b/frontend/app/views/page/page.reducer.js
@@ -9,6 +9,8 @@ const initialState = crudState('page', {
     editingTile: false,
     currentEditTileId: 0,
     tileList: false,
+    showingPopups: true,
+    sidebarOnRight: true,
   },
   options: {
   }
@@ -195,6 +197,23 @@ export default function pageReducer(state = initialState, action) {
         }
       }
 
+    case types.page.toggle_popups:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          togglePopups: !state.editor.togglePopups,
+        }
+      }
+
+    case types.page.toggle_sidebar_side:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          sidebarOnRight: !state.editor.sidebarOnRight,
+        }
+      }
 
     default:
       return state
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 7d0780d..728bc05 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -13,7 +13,8 @@ import {
 import AudioSelect from 'app/views/audio/components/audio.select'
 import { preloadImage, preloadVideo } from 'app/utils'
 
-import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from 'app/views/page/page.actions'
+import * as tileActions from 'app/views/tile/tile.actions'
 
 const SELECT_TYPES = [
   "image", "text", "video", "link", "script",
@@ -66,13 +67,13 @@ const CURSORS = [
 const NO_LINK = 0
 const EXTERNAL_LINK = -1
 const OPEN_POPUP_LINK = -2
-const CLOSE_POPUP_LINK = -2
+const CLOSE_POPUP_LINK = -3
 const PAGE_LIST_TOP_OPTIONS = [
   { name: NO_LINK, label: 'No link' },
   { name: EXTERNAL_LINK, label: 'External link' },
   { name: OPEN_POPUP_LINK, label: 'Open popup' },
   { name: CLOSE_POPUP_LINK, label: 'Close popup' },
-  { name: -3, label: '──────────', disabled: true },
+  { name: -99, label: '──────────', disabled: true },
 ]
 
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
@@ -410,6 +411,9 @@ class TileForm extends Component {
     return (
       <div className='box'>
         <h1>{title}</h1>
+        <button className='box_corner' onClick={this.props.pageActions.toggleSidebarSide}>
+          {'◁'}
+        </button>
         <form onSubmit={this.handleSubmit}>
           <div className="row selects">
             <Select
@@ -802,7 +806,7 @@ class TileForm extends Component {
     return (
       <div>
         <Checkbox
-          label="Add audio events"
+          label="Sound effects"
           name="has_audio"
           checked={temporaryTile.settings.has_audio}
           onChange={this.handleSettingsSelect}
@@ -880,7 +884,6 @@ class TileForm extends Component {
             title="Popup group"
             name="popup_group"
             data={temporaryTile.settings}
-            error={errorFields.has('popup_group')}
             onChange={this.handleSettingsChange}
             autoComplete="off"
           />
@@ -897,7 +900,6 @@ class TileForm extends Component {
             title="Appear after"
             name="appear_after"
             data={temporaryTile.settings}
-            error={errorFields.has('appear_after')}
             onChange={this.handleSettingsChange}
             autoComplete="off"
           />
@@ -915,6 +917,7 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = dispatch => ({
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
   tileActions: bindActionCreators({ ...tileActions }, dispatch),
 })
 
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 001cce2..a9f0d09 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -11,12 +11,25 @@ export default class TileVideo extends Component {
     this.handleEnded = this.handleEnded.bind(this)
   }
   componentDidMount() {
-    this.videoRef.current.addEventListener('ended', this.handleEnded)
-    this.videoRef.current.addEventListener('timeupdate', this.handleTimeUpdate)
+    this.bind()
+  }
+  componentDidUpdate() {
+    this.unbind()
+    this.bind()
   }
   componentWillUnmount() {
-    this.videoRef.current.removeEventListener('timeupdate', this.handleTimeUpdate)
-    this.videoRef.current.removeEventListener('ended', this.handleEnded)
+    this.unbind()
+  }
+  bind() {
+    if (!this.videoRef.current) return
+    this.el = this.videoRef.current
+    this.el.addEventListener('ended', this.handleEnded)
+    this.el.addEventListener('timeupdate', this.handleTimeUpdate)
+  }
+  unbind() {
+    if (!this.el) return
+    this.el.removeEventListener('timeupdate', this.handleTimeUpdate)
+    this.el.removeEventListener('ended', this.handleEnded)
   }
   handleTimeUpdate() {
     if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
@@ -63,7 +76,7 @@ export default class TileVideo extends Component {
           autoPlay={true}
           controls={false}
           loop={tile.settings.loop}
-          muted={tile.settings.muted}
+          muted={viewing ? tile.settings.muted : true}
           style={generateVideoStyle(tile, bounds)}
         />
       </div>