summaryrefslogtreecommitdiff
path: root/frontend/app/views/page
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/views/page')
-rw-r--r--frontend/app/views/page/components/page.editor.js6
-rw-r--r--frontend/app/views/page/components/tile.edit.js86
-rw-r--r--frontend/app/views/page/components/tile.form.js848
-rw-r--r--frontend/app/views/page/components/tile.handle.js209
-rw-r--r--frontend/app/views/page/components/tile.list.js142
-rw-r--r--frontend/app/views/page/components/tile.new.js55
-rw-r--r--frontend/app/views/page/page.container.js10
7 files changed, 8 insertions, 1348 deletions
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index 7f6182d..2f14ffb 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -5,13 +5,13 @@ import { connect } from 'react-redux'
import { session } from 'app/session'
import actions from 'app/actions'
-import * as pageActions from '../page.actions'
-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'
import { Loader } from 'app/common'
import { clamp, dist } from 'app/utils'
-import TileHandle from './tile.handle'
+import TileHandle from 'app/views/tile/components/tile.handle'
const defaultState = {
dragging: false,
diff --git a/frontend/app/views/page/components/tile.edit.js b/frontend/app/views/page/components/tile.edit.js
deleted file mode 100644
index cae9f73..0000000
--- a/frontend/app/views/page/components/tile.edit.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-// import { history } from 'app/store'
-import actions from 'app/actions'
-import * as pageActions from '../../page/page.actions'
-import * as tileActions from '../../tile/tile.actions'
-
-import { Loader } from 'app/common'
-
-import TileForm from '../components/tile.form'
-
-class TileEdit extends Component {
- state = {
- tile: null
- }
-
- componentDidMount() {
- this.load()
- }
-
- componentDidUpdate(prevProps) {
- if (prevProps.page.editor.currentEditTileId !== this.props.page.editor.currentEditTileId) {
- this.load()
- }
- }
-
- load() {
- const { currentEditTileId } = this.props.page.editor
- const { tiles } = this.props.page.show.res
- if (!tiles) return
- const tile = tiles.filter(tile => tile.id === currentEditTileId)[0]
- console.log('edit', currentEditTileId)
- this.setState({ tile })
- }
-
- handleSubmit(data) {
- actions.tile.update(data)
- .then(response => {
- // console.log(response)
- if (response.status === 'ok') {
- this.props.pageActions.updatePageTile(response.res)
- }
- })
- }
-
- handleClose() {
- this.props.pageActions.hideEditTileForm()
- this.props.tileActions.clearTemporaryTile()
- }
-
- render() {
- const { tile } = this.state
- if (!tile) {
- return (
- <div className='form'>
- <Loader />
- </div>
- )
- }
- return (
- <TileForm
- initialData={tile}
- graph={this.props.graph.show.res}
- page={this.props.page.show.res}
- onSubmit={this.handleSubmit.bind(this)}
- onClose={this.handleClose.bind(this)}
- />
- )
- }
-}
-
-const mapStateToProps = state => ({
- graph: state.graph,
- page: state.page,
- tile: state.tile,
-})
-
-const mapDispatchToProps = dispatch => ({
- pageActions: bindActionCreators({ ...pageActions }, dispatch),
- tileActions: bindActionCreators({ ...tileActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileEdit)
diff --git a/frontend/app/views/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js
deleted file mode 100644
index aefecf1..0000000
--- a/frontend/app/views/page/components/tile.form.js
+++ /dev/null
@@ -1,848 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import { Link } from 'react-router-dom'
-
-import actions from 'app/actions'
-import { session } from 'app/session'
-
-import {
- TextInput, NumberInput, ColorInput, Slider,
- Select, LabelDescription, TextArea, Checkbox,
- SubmitButton, Loader } from 'app/common'
-import AudioSelect from 'app/views/audio/components/audio.select'
-import { preloadImage, preloadVideo } from 'app/utils'
-
-import * as tileActions from '../../tile/tile.actions'
-
-const SELECT_TYPES = [
- "image", "text", "video", "link", "script",
-].map(s => ({ name: s, label: s }))
-
-const ALIGNMENTS = [
- "top_left", "top_center", "top_right",
- "center_left", "center_center", "center_right",
- "bottom_left", "bottom_center", "bottom_right",
-].map(align => ({
- name: align,
- label: align === 'center_center'
- ? 'center'
- : align.replace('_', ' ')
- }))
-
-const REQUIRED_KEYS = {
- image: ['url'],
- video: ['url'],
- text: ['content'],
- link: [],
- script: [],
-}
-
-const IMAGE_TILE_STYLES = [
- 'tile', 'cover', 'contain', 'contain no-repeat'
-].map(style => ({ name: style, label: style }))
-
-const VIDEO_STYLES = [
- 'normal', 'cover', 'contain',
-].map(style => ({ name: style, label: style }))
-
-const TEXT_FONT_FAMILIES = [
- 'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive',
-].map(style => ({ name: style, label: style }))
-
-const TEXT_FONT_STYLES = [
- 'normal', 'bold', 'italic', 'bold-italic',
-].map(style => ({ name: style, label: style }))
-
-const CURSORS = [
- { name: 'none', label: 'None', },
- { name: 'hand_up', label: 'Up', },
- { name: 'hand_down', label: 'Down', },
- { name: 'hand_left', label: 'Left', },
- { name: 'hand_right', label: 'Right', },
- { name: 'unclickable', label: 'Unclickable', },
-]
-
-const NO_LINK = 0
-const EXTERNAL_LINK = -1
-const PAGE_LIST_TOP_OPTIONS = [
- { name: NO_LINK, label: 'No link' },
- { name: EXTERNAL_LINK, label: 'External link' },
- { name: -2, label: '──────────', disabled: true },
-]
-
-// target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
-// https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
-
-const newImage = (data) => ({
- settings: {
- ...newPosition(),
- is_tiled: false,
- tile_style: 'tile',
- url: "",
- external_link_url: "",
- cursor: 'hand_up',
- },
- type: 'image',
- target_page_id: null,
- ...data,
-})
-
-const newVideo = (data) => ({
- settings: {
- ...newPosition(),
- video_style: 'cover',
- url: "",
- external_link_url: "",
- cursor: 'none',
- muted: false,
- loop: false,
- autoadvance: false,
- },
- type: 'video',
- target_page_id: null,
- ...data,
-})
-
-const newText = (data) => ({
- settings: {
- ...newPosition(),
- content: "",
- font_family: 'sans-serif',
- font_size: 16,
- font_style: 'normal',
- font_color: '#dddddd',
- background_color: 'transparent',
- width: 0,
- height: 0,
- units: 'px',
- external_link_url: "",
- cursor: 'hand_up',
- },
- type: 'text',
- target_page_id: null,
- ...data,
-})
-
-const newLink = (data) => ({
- settings: {
- ...newPosition({ width: 100, height: 100, }),
- external_link_url: "",
- cursor: 'hand_up',
- units: 'px',
- },
- type: 'link',
- target_page_id: null,
- ...data,
-})
-
-const newScript = (data) => ({
- settings: {
- ...newPosition({ width: 100, height: 100, }),
- },
- type: 'script',
- ...data,
-})
-
-const newPosition = (data) => ({
- x: 0, y: 0,
- width: 0, height: 0,
- rotation: 0, scale: 1,
- opacity: 1,
- units: false,
- align: "center_center",
- has_audio: false,
- audio_on_click_id: 0,
- audio_on_hover_id: 0,
- navigate_when_audio_finishes: false,
- ...data,
-})
-
-const TYPE_CONSTRUCTORS = {
- image: newImage,
- video: newVideo,
- text: newText,
- link: newLink,
- script: newScript,
-}
-
-class TileForm extends Component {
- state = {
- title: "",
- submitTitle: "",
- errorFields: new Set([]),
- modified: false,
- pageList: [],
- }
-
- constructor(props){
- super(props)
- this.handleChange = this.handleChange.bind(this)
- this.handleSelect = this.handleSelect.bind(this)
- this.handleSettingsChange = this.handleSettingsChange.bind(this)
- this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
- this.handleAlignment = this.handleAlignment.bind(this)
- this.handleImageChange = this.handleImageChange.bind(this)
- this.handleVideoChange = this.handleVideoChange.bind(this)
- this.handleSubmit = this.handleSubmit.bind(this)
- this.handleDelete = this.handleDelete.bind(this)
- }
-
- componentDidMount() {
- const { graph, page, isNew, initialData, sortOrder } = this.props
- const title = isNew ? 'new tile' : 'editing tile'
- const submitTitle = isNew ? "Create Tile" : "Save Changes"
- this.setState({
- title,
- submitTitle,
- errorFields: new Set([]),
- })
- const { pages } = graph.show.res
- const linkPages = initialData ? pages.filter(page => page.id !== initialData.id) : pages
- let pageList = [
- ...PAGE_LIST_TOP_OPTIONS,
- ...linkPages.map(page => ({ name: page.id, label: page.path }))
- ]
- this.setState({ pageList })
- if (isNew) {
- const newTile = newImage({
- id: "new",
- graph_id: graph.show.res.id,
- page_id: page.show.res.id,
- sort_order: sortOrder,
- })
- this.props.tileActions.updateTemporaryTile(newTile)
- } else {
- this.props.tileActions.updateTemporaryTile({ ...initialData })
- }
- }
-
- componentDidUpdate(prevProps) {
- if (!this.props.isNew && this.props.initialData !== prevProps.initialData) {
- this.handleSubmit()
- this.props.tileActions.updateTemporaryTile({ ...this.props.initialData })
- this.setState({
- errorFields: new Set([]),
- })
- }
- }
-
- componentWillUnmount() {
- // if the item has changed, save before we close the form!
- if (!this.props.isNew && this.state.modified) {
- this.handleSubmit()
- }
- }
-
- handleChange(e) {
- const { name, value } = e.target
- this.clearErrorField(name)
- this.props.tileActions.updateTemporaryTile({
- ...this.props.temporaryTile,
- [name]: value,
- })
- }
-
- handleTypeChange(type) {
- const { graph, page, temporaryTile } = this.props
- let newTile = TYPE_CONSTRUCTORS[type]({
- id: temporaryTile.id,
- graph_id: temporaryTile.graph_id,
- page_id: temporaryTile.page_id,
- })
- newTile.settings.align = temporaryTile.settings.align
- this.clearErrorField('type')
- this.props.tileActions.updateTemporaryTile(newTile)
- }
-
- handleSettingsChange(e) {
- const { name, value } = e.target
- this.clearErrorField(name)
- this.props.tileActions.updateTemporaryTile({
- ...this.props.temporaryTile,
- settings: {
- ...this.props.temporaryTile.settings,
- [name]: value,
- }
- })
- }
-
- handleSelect(name, value) {
- this.clearErrorField(name)
- if (name === 'type') {
- return this.handleTypeChange(value)
- }
- if (name === 'target_page_id') {
- value = parseInt(value)
- }
- this.props.tileActions.updateTemporaryTile({
- ...this.props.temporaryTile,
- [name]: value,
- })
- }
-
- handleSettingsSelect(name, value) {
- this.clearErrorField(name)
- this.props.tileActions.updateTemporaryTile({
- ...this.props.temporaryTile,
- settings: {
- ...this.props.temporaryTile.settings,
- [name]: value,
- }
- })
- }
-
- handleAlignment(name, value) {
- this.clearErrorField(name)
- this.props.tileActions.updateTemporaryTile({
- ...this.props.temporaryTile,
- settings: {
- ...this.props.temporaryTile.settings,
- [name]: value,
- x: 0, y: 0,
- }
- })
- }
-
- handleImageChange(e) {
- const { name, value } = e.target
- this.handleSettingsSelect(name, value)
- preloadImage(value).then(img => {
- // console.log(img)
- this.props.tileActions.updateTemporaryTile({
- ...this.props.temporaryTile,
- settings: {
- ...this.props.temporaryTile.settings,
- [name]: value,
- width: img.naturalWidth,
- height: img.naturalHeight,
- x: 0, y: 0,
- }
- })
- })
- }
-
- handleVideoChange(e) {
- const { name, value } = e.target
- this.handleSettingsSelect(name, value)
- preloadVideo(value).then(video => {
- // console.log(img)
- this.props.tileActions.updateTemporaryTile({
- ...this.props.temporaryTile,
- settings: {
- ...this.props.temporaryTile.settings,
- [name]: value,
- width: video.videoWidth,
- height: video.videoHeight,
- x: 0, y: 0,
- }
- })
- })
- }
-
- clearErrorField(name) {
- const { errorFields } = this.state
- if (errorFields.has(name)) {
- errorFields.delete(name)
- this.setState({
- errorFields,
- modified: true,
- })
- } else if (!this.state.modified) {
- this.setState({
- errorFields,
- modified: true,
- })
- }
- }
-
- handleSubmit(e) {
- if (e) e.preventDefault()
- const { isNew, temporaryTile, onSubmit, onClose } = this.props
- const requiredSettings = REQUIRED_KEYS[temporaryTile.type]
- const validKeys = "id graph_id page_id target_page_id type settings".split(" ")
- const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {})
- const errorFields = requiredSettings.filter(key => !validData.settings[key])
- if (errorFields.length) {
- console.log('error', errorFields, validData)
- if (e) {
- this.setState({ errorFields: new Set(errorFields) })
- }
- } else {
- if (isNew) {
- // side effect: set username if we're creating a new tile
- // session.set('username', data.username)
- delete validData.id
- } else {
- validData.id = temporaryTile.id
- }
- this.setState({ modified: false })
- console.log('submit', validData)
- onSubmit(validData)
- // if submitting after switching elements, don't close the form
- if (e && onClose) {
- onClose()
- }
- }
- }
-
- handleDelete() {
- const { temporaryTile, isNew, onClose } = this.props
- if (confirm('Really delete this tile?')) {
- actions.tile.destroy(temporaryTile)
- .then(() => {
- onClose()
- })
- }
- }
-
- render() {
- const { temporaryTile, isNew } = this.props
- const { title, submitTitle, errorFields } = this.state
- if (!temporaryTile || !temporaryTile.settings) return <div className='box' />
- return (
- <div className='box'>
- <h1>{title}</h1>
- <form onSubmit={this.handleSubmit}>
- <div className="row selects">
- <Select
- name='type'
- selected={temporaryTile.type}
- options={SELECT_TYPES}
- title=''
- onChange={this.handleSelect}
- />
- <Select
- name='align'
- selected={temporaryTile.settings.align}
- options={ALIGNMENTS}
- title=''
- onChange={this.handleAlignment}
- />
- </div>
-
- {this.renderPositionInfo()}
-
- {temporaryTile.type === 'image'
- ? this.renderImageForm()
- : temporaryTile.type === 'video'
- ? this.renderVideoForm()
- : temporaryTile.type === 'text'
- ? this.renderTextForm()
- : temporaryTile.type === 'link'
- ? this.renderLinkForm()
- : temporaryTile.type === 'script'
- ? this.renderScriptForm()
- : ""}
-
- {this.renderHyperlinkForm()}
- {this.renderMiscForm()}
- {this.renderAudioForm()}
-
- <div className='row buttons'>
- <SubmitButton
- title={submitTitle}
- onClick={this.handleSubmit}
- />
- {!isNew &&
- <SubmitButton
- title={'Delete'}
- className='destroy'
- onClick={this.handleDelete}
- />
- }
- </div>
- {!!errorFields.size &&
- <label>
- <span></span>
- <span>Please add the required fields =)</span>
- </label>
- }
- </form>
- </div>
- )
- }
-
- renderPositionInfo() {
- const { temporaryTile } = this.props
- const { x, y, width, height, rotation, scale } = temporaryTile.settings
- return (
- <div className='position'>
- {parseInt(x)}{', '}
- {parseInt(y)}{' '}
- {parseInt(width)}{'x'}{parseInt(height)}{' '}
- {rotation === 0 || <span>{parseInt(rotation)}{'\u00B0 '}</span>}
- {scale === 1 || <span>{'x'}{scale.toFixed(2)}</span>}
- </div>
- )
- }
-
- renderImageForm() {
- // const { isNew } = this.props
- const { temporaryTile } = this.props
- const { errorFields } = this.state
- // console.log(temporaryTile.settings)
- return (
- <div>
- <div className='row imageUrl'>
- {temporaryTile.settings.url && <div className='thumb'><img src={temporaryTile.settings.url} /></div>}
- <TextInput
- title=""
- placeholder='http://'
- name="url"
- required
- data={temporaryTile.settings}
- error={errorFields.has('url')}
- onChange={this.handleImageChange}
- autoComplete="off"
- />
- </div>
- <div className='row pair'>
- <Checkbox
- label="Tiled"
- name="is_tiled"
- checked={temporaryTile.settings.is_tiled}
- onChange={this.handleSettingsSelect}
- autoComplete="off"
- />
- {temporaryTile.settings.is_tiled &&
- <Select
- name='tile_style'
- selected={temporaryTile.settings.tile_style || 'tile'}
- options={IMAGE_TILE_STYLES}
- title=''
- onChange={this.handleSettingsSelect}
- />
- }
- </div>
- </div>
- )
- }
-
- renderVideoForm() {
- // const { isNew } = this.props
- const { temporaryTile } = this.props
- const { errorFields } = this.state
- // console.log(temporaryTile.settings)
- return (
- <div>
- <div className='row imageUrl'>
- <TextInput
- title=""
- placeholder='http://'
- name="url"
- required
- data={temporaryTile.settings}
- error={errorFields.has('url')}
- onChange={this.handleVideoChange}
- autoComplete="off"
- />
- </div>
- <div className='row pair'>
- <Select
- name='video_style'
- selected={temporaryTile.settings.video_style || 'none'}
- options={VIDEO_STYLES}
- title=''
- onChange={this.handleSettingsSelect}
- />
- <Checkbox
- label="Loop"
- name="loop"
- checked={temporaryTile.settings.loop}
- onChange={this.handleSettingsSelect}
- autoComplete="off"
- />
- </div>
- <div className='row pair'>
- <Checkbox
- label="Muted"
- name="muted"
- checked={temporaryTile.settings.muted}
- onChange={this.handleSettingsSelect}
- autoComplete="off"
- />
- <Checkbox
- label="Autoadvance"
- name="autoadvance"
- checked={temporaryTile.settings.autoadvance}
- onChange={this.handleSettingsSelect}
- autoComplete="off"
- />
- </div>
- </div>
- )
- }
-
- renderTextForm() {
- const { temporaryTile } = this.props
- const { errorFields } = this.state
- return (
- <div>
- <TextArea
- title=""
- name="content"
- required
- data={temporaryTile.settings}
- error={errorFields.has('content')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- <div className='row font'>
- <Select
- title="Font"
- name='font_family'
- selected={temporaryTile.settings.font_family || 'sans-serif'}
- options={TEXT_FONT_FAMILIES}
- title=''
- onChange={this.handleSettingsSelect}
- />
- <NumberInput
- title=''
- name='font_size'
- data={temporaryTile.settings}
- min={1}
- max={1200}
- error={errorFields.has('font_size')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- <Select
- name='font_style'
- selected={temporaryTile.settings.font_style || 'normal'}
- options={TEXT_FONT_STYLES}
- title=''
- onChange={this.handleSettingsSelect}
- />
- </div>
- <ColorInput
- title='Text'
- name='font_color'
- data={temporaryTile.settings}
- error={errorFields.has('font_color')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- <ColorInput
- title='BG'
- name='background_color'
- data={temporaryTile.settings}
- error={errorFields.has('background_color')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- <div className='row pair'>
- <NumberInput
- title="Width"
- name="width"
- data={temporaryTile.settings}
- min={0}
- max={1200}
- error={errorFields.has('width')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- <NumberInput
- title="Height"
- name="height"
- data={temporaryTile.settings}
- min={0}
- max={1200}
- error={errorFields.has('height')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- </div>
- </div>
- )
- }
-
- renderLinkForm() {
- const { temporaryTile } = this.props
- const { errorFields } = this.state
- return (
- <div>
- <div className='row pair'>
- <NumberInput
- title="Width"
- name="width"
- data={temporaryTile.settings}
- min={0}
- max={1200}
- error={errorFields.has('width')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- <NumberInput
- title="Height"
- name="height"
- data={temporaryTile.settings}
- min={0}
- max={1200}
- error={errorFields.has('height')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- </div>
- <div className='row pair'>
- <TextInput
- title="Units"
- name="units"
- data={temporaryTile.settings}
- error={errorFields.has('units')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- </div>
- </div>
- )
- }
-
- renderScriptForm() {
- const { temporaryTile } = this.props
- const { errorFields } = this.state
- return (
- <div>
- <TextArea
- title=""
- name="content"
- required
- data={temporaryTile.settings}
- error={errorFields.has('content')}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- <div>
- Scripts will be run on the live site when this page loads.
- </div>
- </div>
- )
- }
-
- renderHyperlinkForm() {
- const { temporaryTile } = this.props
- const { pageList } = this.state
- const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
- return (
- <div>
- <div className={'row selects'}>
- <Select
- title=''
- name='target_page_id'
- selected={temporaryTile.target_page_id || NO_LINK}
- options={pageList}
- onChange={this.handleSelect}
- />
- <Select
- title=''
- name='cursor'
- selected={temporaryTile.settings.cursor}
- options={CURSORS}
- defaultOption="Cursor"
- onChange={this.handleSettingsSelect}
- />
- </div>
- <div>
- {isExternalLink &&
- <TextInput
- title=""
- placeholder='http://'
- name="external_link_url"
- data={temporaryTile.settings}
- onChange={this.handleSettingsChange}
- autoComplete="off"
- />
- }
- </div>
- </div>
- )
- }
-
- renderAudioForm() {
- const { temporaryTile } = this.props
- return (
- <div>
- <Checkbox
- label="Play audio"
- name="has_audio"
- checked={temporaryTile.settings.has_audio}
- onChange={this.handleSettingsSelect}
- />
- {temporaryTile.settings.has_audio && (
- <div >
- <AudioSelect
- title="On click"
- name="audio_on_click_id"
- selected={temporaryTile.settings.audio_on_click_id}
- onChange={this.handleSettingsSelect}
- />
-
- <Checkbox
- label="Navigate when audio finishes"
- name="navigate_when_audio_finishes"
- checked={temporaryTile.settings.navigate_when_audio_finishes}
- onChange={this.handleSettingsSelect}
- autoComplete="off"
- />
-
- <AudioSelect
- title="On hover"
- name="audio_on_hover_id"
- selected={temporaryTile.settings.audio_on_hover_id}
- onChange={this.handleSettingsSelect}
- />
- </div>
- )}
- </div>
- )
- }
-
- renderMiscForm() {
- const { temporaryTile } = this.props
- return (
- <div>
- <Slider
- title='Opacity'
- name='opacity'
- value={temporaryTile.settings.opacity}
- onChange={this.handleSettingsSelect}
- min={0.0}
- max={1.0}
- step={0.01}
- />
- <Slider
- title='Scale'
- name='scale'
- value={temporaryTile.settings.scale}
- onChange={this.handleSettingsSelect}
- min={0.01}
- max={10.0}
- step={0.01}
- />
- <Slider
- title='Rotation'
- name='rotation'
- value={temporaryTile.settings.rotation}
- onChange={this.handleSettingsSelect}
- min={-180.0}
- max={180.0}
- step={1}
- type='int'
- />
- </div>
- )
- }
-}
-
-const mapStateToProps = state => ({
- graph: state.graph,
- page: state.page,
- tile: state.tile,
- temporaryTile: state.tile.temporaryTile,
-})
-
-const mapDispatchToProps = dispatch => ({
- tileActions: bindActionCreators({ ...tileActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileForm)
diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
deleted file mode 100644
index d8184d3..0000000
--- a/frontend/app/views/page/components/tile.handle.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import React, { Component } from 'react'
-
-export default class TileHandle extends Component {
- constructor(props) {
- super(props)
- this.videoRef = React.createRef()
- this.handleEnded = this.handleEnded.bind(this)
- }
- componentDidMount() {
- if (this.props.tile.type === 'video') {
- this.videoRef.current.addEventListener('ended', this.handleEnded)
- }
- }
- componentWillUnmount() {
- if (this.props.tile.type === 'video') {
- this.videoRef.current.removeEventListener('ended', this.handleEnded)
- }
- }
- handleEnded() {
- this.props.onPlaybackEnded(this.props.tile)
- }
- render() {
- let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
- // console.log(tile)
- const { width, height } = tile.settings
- const style = {
- transform: generateTransform(tile, box),
- opacity: tile.settings.opacity,
- }
- // console.log(generateTransform(tile))
- let content;
- let className = ['tile', tile.type].join(' ')
- if (tile.target_page_id || (viewing && tile.href)) {
- className += ' ' + (tile.settings.cursor || 'hand_up')
- }
- // console.log(tile.settings)
- switch (tile.type) {
- case 'image':
- if (!tile.settings.url) {
- return null
- }
- if (tile.settings.is_tiled) {
- style.backgroundImage = 'url(' + tile.settings.url + ')'
- style.backgroundPosition = tile.settings.align.replace('_', ' ')
- switch (tile.settings.tile_style) {
- default:
- case 'tile':
- break
- case 'cover':
- style.backgroundSize = 'cover'
- break
- case 'contain':
- style.backgroundSize = 'contain'
- break
- case 'contain no-repeat':
- style.backgroundSize = 'contain'
- style.backgroundRepeat = 'no-repeat'
- break
- }
- className += ' is_tiled'
- } else {
- className += ' ' + tile.settings.align
- content = <img src={tile.settings.url} />
- }
- break
-
- case 'video':
- if (!tile.settings.url) {
- return null
- }
- className += ' ' + tile.settings.align
- content = (
- <video
- ref={this.videoRef}
- src={tile.settings.url}
- autoPlay={true}
- controls={false}
- loop={tile.settings.loop}
- muted={tile.settings.muted}
- style={generateVideoStyle(tile, bounds)}
- />
- )
- break
-
- case 'text':
- if (!tile.settings.content) {
- return null
- }
- content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
- className += ' ' + tile.settings.align
- style.width = unitsDimension(tile, 'width')
- style.height = unitsDimension(tile, 'height')
- style.fontFamily = tile.settings.font_family
- style.fontSize = tile.settings.font_size + 'px'
- style.lineHeight = 1.5
- style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
- style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
- style.backgroundColor = tile.settings.background_color || 'transparent'
- style.color = tile.settings.font_color || '#dddddd!important'
- break
-
- case 'link':
- content = ""
- className += ' ' + tile.settings.align
- style.width = unitsDimension(tile, 'width')
- style.height = unitsDimension(tile, 'height')
- break
-
- case 'script':
- content = ""
- if (viewing) {
- eval(tile.settings.content)
- } else {
- content = "SCRIPT"
- }
- }
- if (viewing) {
- return (
- <div
- className={className}
- onMouseDown={onMouseDown}
- style={style}
- >
- {content}
- </div>
- )
- } else {
- return (
- <div
- className={className}
- onMouseDown={onMouseDown}
- onDoubleClick={onDoubleClick}
- style={style}
- >
- {content}
- </div>
- )
- }
- }
-}
-
-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(' ')
-}
-
-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
-}
-
-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"
-}
diff --git a/frontend/app/views/page/components/tile.list.js b/frontend/app/views/page/components/tile.list.js
deleted file mode 100644
index c455489..0000000
--- a/frontend/app/views/page/components/tile.list.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { ReactSortable } from "react-sortablejs"
-
-// import actions from 'app/actions'
-import * as tileActions from '../../tile/tile.actions'
-import * as pageActions from '../../page/page.actions'
-
-const DOUBLE_CLICK_THRESHOLD = 250
-
-class TileList extends Component {
- state = {
- tiles: [],
- lastTargetId: 0,
- lastTimeStamp: 0,
- }
-
- // store doubleclick state as a class property because ReactSortable calls setState promiscuously
- didDoubleClick = false
-
- componentDidMount(prevProps) {
- const { tiles } = this.props.page.show.res
- const { pages } = this.props.graph.show.res
- const pageTitles = pages.reduce((a,b) => {
- a[b.id] = b.title
- return a
- }, {})
- this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
- }
-
- componentDidUpdate(prevProps, prevState) {
- if (this.didDoubleClick) return
- const { tiles } = this.state
- if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
- this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
- }
- // since we store the full tiles here (reversed!), they might change from under us
- // potentially later refactor to only use a sort order / lookup
- else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
- const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
- a[b.id] = b
- return a
- }, {})
- const newTiles = this.state.tiles.map(tile => {
- return tileLookup[tile.id]
- })
- this.setState({ tiles: newTiles })
- }
- }
-
- handleChoose(e) {
- const { lastTargetId, lastTimeStamp } = this.state
- if (lastTimeStamp
- && parseInt(e.item.dataset.id) === lastTargetId
- && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
- ) {
- // console.log('selected', lastTargetId)
- this.didDoubleClick = true
- this.props.pageActions.showEditTileForm(lastTargetId)
- } else {
- this.setState({
- lastTargetId: parseInt(e.item.dataset.id),
- lastTimeStamp: e.timeStamp,
- })
- }
- }
-
- handleUpdate(newTiles) {
- if (this.didDoubleClick) return
- this.setState({ tiles: newTiles })
- }
-
- render() {
- const { tiles, pageTitles } = this.state
- return (
- <div className='box tileList'>
- <ReactSortable
- list={tiles}
- setList={newTiles => this.handleUpdate(newTiles)}
- onChoose={e => this.handleChoose(e)}
- >
- {tiles.map(tile => (
- tile.type === 'image'
- ? <TileListImage key={tile.id} tile={tile} />
- : tile.type === 'text'
- ? <TileListText key={tile.id} tile={tile} />
- : tile.type === 'link'
- ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
- : <TileListMisc key={tile.id} tile={tile} />
- ))}
- </ReactSortable>
- </div>
- )
- }
-}
-
-const TileListImage = ({ tile }) => (
- <div className='row' data-id={tile.id}>
- <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
- </div>
-)
-
-const TileListText = ({ tile }) => (
- <div className='row' data-id={tile.id}>
- <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
- </div>
-)
-
-const TileListLink = ({ tile, pageTitles }) => (
- <div className='row link' data-id={tile.id}>
- <span className='snippet'>
- {'Link: '}
- {tile.target_page_id === -1
- ? 'External'
- : !tile.target_page_id
- ? 'No link specified!'
- : tile.target_page_id in pageTitles
- ? pageTitles[tile.target_page_id]
- : 'Error, broken link!'}
- </span>
- </div>
-)
-
-const TileListMisc = ({ tile }) => (
- <div className='row' data-id={tile.id}>
- <span className='snippet'>{"Tile: "}{tile.type}</span>
- </div>
-)
-
-const mapStateToProps = state => ({
- graph: state.graph,
- page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
- tileActions: bindActionCreators({ ...tileActions }, dispatch),
- pageActions: bindActionCreators({ ...pageActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileList)
diff --git a/frontend/app/views/page/components/tile.new.js b/frontend/app/views/page/components/tile.new.js
deleted file mode 100644
index b491fdd..0000000
--- a/frontend/app/views/page/components/tile.new.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { history } from 'app/store'
-import actions from 'app/actions'
-import * as tileActions from '../../tile/tile.actions'
-import * as pageActions from '../../page/page.actions'
-
-import TileForm from '../components/tile.form'
-
-class TileNew extends Component {
- handleSubmit(data) {
- console.log(data)
- actions.tile.create(data)
- .then(res => {
- console.log(res)
- // const graph = this.props.graph.show.res
- // if (res.res && res.res.id) {
- // history.push('/' + graph.path + '/' + res.res.path)
- // }
- this.props.pageActions.hideAddTileForm()
- this.props.tileActions.clearTemporaryTile()
- })
- .catch(err => {
- console.error('error')
- })
- }
-
- render() {
- return (
- <TileForm
- isNew
- graph={this.props.graph.show.res}
- page={this.props.page.show.res}
- initialData={null}
- sortOrder={this.props.page.show.res.tiles ? this.props.page.show.res.tiles.length : []}
- onSubmit={this.handleSubmit.bind(this)}
- />
- )
- }
-}
-
-const mapStateToProps = state => ({
- graph: state.graph,
- page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
- tileActions: bindActionCreators({ ...tileActions }, dispatch),
- pageActions: bindActionCreators({ ...pageActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileNew)
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
index dc85f5e..68347b7 100644
--- a/frontend/app/views/page/page.container.js
+++ b/frontend/app/views/page/page.container.js
@@ -9,13 +9,13 @@ import './cursors.css'
import actions from 'app/actions'
import { Loader } from 'app/common'
-import * as graphActions from '../graph/graph.actions'
+import * as graphActions from 'app/views/graph/graph.actions'
import * as pageActions from './page.actions'
-import PageEdit from '../graph/components/page.edit'
-import TileNew from './components/tile.new'
-import TileEdit from './components/tile.edit'
-import TileList from './components/tile.list'
+import PageEdit from 'app/views/graph/components/page.edit'
+import TileNew from 'app/views/tile/components/tile.new'
+import TileEdit from 'app/views/tile/components/tile.edit'
+import TileList from 'app/views/tile/components/tile.list'
import PageHeader from './components/page.header'
import PageEditor from './components/page.editor'
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-11 08:48:49 +0000