From a17b76ac75f506f5da6fe8adf9c36632b60d4226 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 26 Sep 2020 14:56:02 +0200 Subject: refactor to use app-rooted js imports --- frontend/views/page/components/page.editor.js | 215 --------- frontend/views/page/components/page.header.js | 36 -- frontend/views/page/components/tile.edit.js | 84 ---- frontend/views/page/components/tile.form.js | 645 -------------------------- frontend/views/page/components/tile.handle.js | 139 ------ frontend/views/page/components/tile.list.js | 142 ------ frontend/views/page/components/tile.new.js | 55 --- 7 files changed, 1316 deletions(-) delete mode 100644 frontend/views/page/components/page.editor.js delete mode 100644 frontend/views/page/components/page.header.js delete mode 100644 frontend/views/page/components/tile.edit.js delete mode 100644 frontend/views/page/components/tile.form.js delete mode 100644 frontend/views/page/components/tile.handle.js delete mode 100644 frontend/views/page/components/tile.list.js delete mode 100644 frontend/views/page/components/tile.new.js (limited to 'frontend/views/page/components') diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js deleted file mode 100644 index bee86a0..0000000 --- a/frontend/views/page/components/page.editor.js +++ /dev/null @@ -1,215 +0,0 @@ -import React, { Component } from 'react' -import { Route } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import { session } from '../../../session' -import actions from '../../../actions' -import * as pageActions from '../page.actions' -import * as tileActions from '../../tile/tile.actions' - -import { Loader } from '../../../common' -import { clamp, dist } from '../../../util' - -import TileHandle from './tile.handle' - -const defaultState = { - dragging: false, - bounds: null, - mouseX: 0, - mouseY: 0, - box: { - x: 0, y: 0, - w: 0, h: 0, - }, - tile: null, -} - -class PageEditor extends Component { - state = { - ...defaultState, - } - - constructor() { - super() - // bind these events in the constructor, so we can remove event listeners later - this.handleMouseDown = this.handleMouseDown.bind(this) - this.handleMouseMove = this.handleMouseMove.bind(this) - this.handleMouseUp = this.handleMouseUp.bind(this) - this.handleWindowResize = this.handleWindowResize.bind(this) - this.pageRef = React.createRef() - } - - getBoundingClientRect() { - if (!this.pageRef.current) return null - const rect = this.pageRef.current.getBoundingClientRect() - const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop - const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft - const bounds = { - top: rect.top + scrollTop, - left: rect.left + scrollLeft, - width: rect.width, - height: rect.height, - } - // console.log(bounds) - return bounds - } - - componentDidMount() { - document.body.addEventListener('mousemove', this.handleMouseMove) - document.body.addEventListener('mouseup', this.handleMouseUp) - window.addEventListener('resize', this.handleWindowResize) - this.setState({ bounds: this.getBoundingClientRect() }) - } - - componentDidUpdate(prevProps) { - if (!this.state.bounds) { - this.setState({ bounds: this.getBoundingClientRect() }) - } - } - - handleWindowResize() { - this.setState({ bounds: this.getBoundingClientRect() }) - } - - handleMouseDown(e, tile) { - const bounds = this.getBoundingClientRect() - const mouseX = e.pageX - const mouseY = e.pageY - // let w = 128 / bounds.width - // let h = 16 / bounds.height - let { x, y } = tile.settings - // x = clamp(x, 0, 1) - // y = clamp(y, 0, 1) - this.setState({ - tile, - draggingBox: true, - bounds, - mouseX, - mouseY, - box: { - dx: 0, dy: 0, - // x, y, - // w, h, - }, - initialBox: { - // x, y, - // w, h, - } - }) - } - - handleMouseMove(e) { - const { - dragging, draggingBox, - bounds, mouseX, mouseY, initialBox, box - } = this.state - if (draggingBox) { - e.preventDefault() - let { x, y, w, h } = initialBox - let dx = (e.pageX - mouseX) - let dy = (e.pageY - mouseY) - this.setState({ - box: { - dx, dy, - // x: clamp(x + (dx / bounds.width), 0, 1.0 - w), - // y: clamp(y + (dy / bounds.height), 0, 1.0 - h), - // w, h, - } - }) - } - } - - handleMouseUp(e) { - // const { actions } = this.props - const { temporaryTile } = this.props - const { dragging, draggingBox, bounds, box, tile } = this.state - if (!dragging && !draggingBox) return - e.preventDefault() - // const { x, y, w, h } = box - const { dx, dy } = box - let url = window.location.pathname - this.setState({ - page: null, - box: null, - initialBox: null, - dragging: false, - draggingBox: false, - }) - // console.log(page) - if (dist(0, 0, dx, dy) < 2) { - return - } - const updatedTile = { - ...tile, - settings: { - ...tile.settings, - x: tile.settings.x + dx, - y: tile.settings.y + dy, - } - } - if (temporaryTile && tile.id === temporaryTile.id) { - this.props.tileActions.updateTemporaryTile(updatedTile) - } - if (tile.id !== 'new') { - console.log(updatedTile) - this.props.pageActions.updatePageTile(updatedTile) - actions.tile.update(updatedTile) - } - } - - render(){ - if (!this.state.bounds || (!this.props.page.show.res && !this.props.page.show.res.tiles)) { - return ( -
- ) - } - const { temporaryTile } = this.props - const currentTile = this.state.tile - const currentBox = this.state.box - const { res } = this.props.page.show - const { settings } = res - const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' } - return ( -
- {res.tiles.map(tile => { - if (temporaryTile && temporaryTile.id === tile.id) { - tile = temporaryTile - } - return ( - this.handleMouseDown(e, tile)} - onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)} - /> - ) - })} - {!!(temporaryTile && temporaryTile.id === 'new') && ( - this.handleMouseDown(e, temporaryTile)} - /> - )} -
- ) - } -} - -const mapStateToProps = state => ({ - graph: state.graph, - page: state.page, - temporaryTile: state.tile.temporaryTile, -}) - -const mapDispatchToProps = dispatch => ({ - pageActions: bindActionCreators({ ...pageActions }, dispatch), - tileActions: bindActionCreators({ ...tileActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(PageEditor) diff --git a/frontend/views/page/components/page.header.js b/frontend/views/page/components/page.header.js deleted file mode 100644 index eb1c3b9..0000000 --- a/frontend/views/page/components/page.header.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import { Link } from 'react-router-dom' - -import * as graphActions from '../../graph/graph.actions' -import * as pageActions from '../page.actions' - -function PageHeader(props) { - return ( -
-
- {props.site.siteTitle} -
-
- - - -
-
- ) -} - -const mapStateToProps = (state) => ({ - // auth: state.auth, - site: state.site, - graph: state.graph, - // isAuthenticated: state.auth.isAuthenticated, -}) - -const mapDispatchToProps = (dispatch) => ({ - graphActions: bindActionCreators({ ...graphActions }, dispatch), - pageActions: bindActionCreators({ ...pageActions }, dispatch), -}) - -export default connect(mapStateToProps, mapDispatchToProps)(PageHeader) diff --git a/frontend/views/page/components/tile.edit.js b/frontend/views/page/components/tile.edit.js deleted file mode 100644 index bfcc34f..0000000 --- a/frontend/views/page/components/tile.edit.js +++ /dev/null @@ -1,84 +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 '../../../store' -import actions from '../../../actions' -import * as pageActions from '../../page/page.actions' -import * as tileActions from '../../tile/tile.actions' - -import { Loader } from '../../../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 tile = this.props.page.show.res.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 ( -
- -
- ) - } - return ( - - ) - } -} - -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/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js deleted file mode 100644 index 6011b0a..0000000 --- a/frontend/views/page/components/tile.form.js +++ /dev/null @@ -1,645 +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 '../../../actions' -import { session } from '../../../session' - -import { - TextInput, NumberInput, ColorInput, Slider, - Select, LabelDescription, TextArea, Checkbox, - SubmitButton, Loader } from '../../../common' -import { preloadImage } from '../../../util' - -import * as tileActions from '../../tile/tile.actions' - -const SELECT_TYPES = [ - "image", "text", "link" -].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'], - text: ['content'], - link: [], -} - -const IMAGE_TILE_STYLES = [ - 'tile', 'cover', 'contain', 'contain no-repeat' -].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: 'hand_up', label: 'Up', }, - { name: 'hand_down', label: 'Down', }, - { name: 'hand_left', label: 'Left', }, - { name: 'hand_right', label: 'Right', }, -] - -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 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, - 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', - }, - type: 'link', - target_page_id: null, - ...data, -}) - -const newPosition = (data) => ({ - x: 0, y: 0, - width: 0, height: 0, - rotation: 0, scale: 1, - opacity: 1, - align: "center_center", - ...data, -}) - -const TYPE_CONSTRUCTORS = { - image: newImage, - text: newText, - link: newLink, -} - -class TileForm extends Component { - state = { - title: "", - submitTitle: "", - errorFields: new Set([]), - modified: false, - pageList: [], - } - - 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, - } - }) - }) - } - - 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
- return ( -
-

{title}

-
-
- -
- - {this.renderPositionInfo()} - - {temporaryTile.type === 'image' - ? this.renderImageForm() - : temporaryTile.type === 'text' - ? this.renderTextForm() - : temporaryTile.type === 'link' - ? this.renderLinkForm() - : ""} - - {this.renderHyperlinkForm()} - {this.renderMiscForm()} - -
- - {!isNew && - - } -
- {!!errorFields.size && - - } -
-
- ) - } - - renderPositionInfo() { - const { temporaryTile } = this.props - const { x, y, width, height, rotation, scale } = temporaryTile.settings - return ( -
- {parseInt(x)}{', '} - {parseInt(y)}{' '} - {parseInt(width)}{'x'}{parseInt(height)}{' '} - {rotation === 0 || {parseInt(rotation)}{'\u00B0 '}} - {scale === 1 || {'x'}{scale.toFixed(2)}} -
- ) - } - - renderImageForm() { - // const { isNew } = this.props - const { temporaryTile } = this.props - const { errorFields } = this.state - // console.log(temporaryTile.settings) - return ( -
-
- {temporaryTile.settings.url &&
} - -
-
- - {temporaryTile.settings.is_tiled && -