import {React, Strings} from "modules"; import Screen from "../../structs/screen"; import CloseButton from "../icons/close"; import MaximizeIcon from "../icons/fullscreen"; import Modals from "../modals"; // const Draggable = WebpackModules.getByDisplayName("Draggable"); // { // "dragAnywhere": true, // "className": "pictureInPictureWindow-1B5qSe", // "maxX": 1969, // "maxY": this.maxY, // "onDragStart": "ƒ () {}", // "onDrag": "ƒ () {}", // "onDragEnd": "ƒ () {}", // "children": "
", // "initialX": 0, // "initialY": 0 // } export default class FloatingWindow extends React.Component { constructor(props) { super(props); this.state = {modalOpen: false}; this.offX = 0; this.offY = 0; this.maxX = this.props.maxX || Screen.width; this.maxY = this.props.maxY || Screen.height; this.minX = this.props.minX || 0; this.minY = this.props.minY || 0; this.titlebar = React.createRef(); this.window = React.createRef(); this.close = this.close.bind(this); this.maximize = this.maximize.bind(this); this.onDrag = this.onDrag.bind(this); this.onDragStart = this.onDragStart.bind(this); this.onDragStop = this.onDragStop.bind(this); this.onResizeStart = this.onResizeStart.bind(this); } componentDidMount() { this.window.current.addEventListener("mousedown", this.onResizeStart, false); this.titlebar.current.addEventListener("mousedown", this.onDragStart, false); document.addEventListener("mouseup", this.onDragStop, false); } onResizeStart() { this.currentWidth = this.window.current.offsetWidth; this.currentHeight = this.window.current.offsetHeight; } onDragStop() { document.removeEventListener("mousemove", this.onDrag, true); const width = this.window.current.offsetWidth; const height = this.window.current.offsetHeight; if (width != this.currentWidth || height != this.currentHeight) { if (this.props.onResize) this.props.onResize(); const left = parseInt(this.window.current.style.left); const top = parseInt(this.window.current.style.top); if (left + width >= this.maxX) this.window.current.style.width = (this.maxX - left) + "px"; if (top + height >= this.maxY) this.window.current.style.height = (this.maxY - top) + "px"; } this.currentWidth = width; this.currentHeight = height; } onDragStart(e) { const div = this.window.current; this.offY = e.clientY - parseInt(div.offsetTop); this.offX = e.clientX - parseInt(div.offsetLeft); document.addEventListener("mousemove", this.onDrag, true); } onDrag(e) { const div = this.window.current; let newTop = (e.clientY - this.offY); if (newTop <= this.minY) newTop = this.minY; if (newTop + this.currentHeight >= this.maxY) newTop = this.maxY - this.currentHeight; let newLeft = (e.clientX - this.offX); if (newLeft <= this.minX) newLeft = this.minX; if (newLeft + this.currentWidth >= this.maxX) newLeft = this.maxX - this.currentWidth; div.style.top = newTop + "px"; div.style.left = newLeft + "px"; } componentWillUnmount() { this.titlebar.current.removeEventListener("mousedown", this.onDragStart, false); document.removeEventListener("mouseup", this.onDragStop, false); } render() { const top = this.props.center ? (Screen.height / 2) - (this.props.height / 2) : this.props.top; const left = this.props.center ? (Screen.width / 2) - (this.props.width / 2) : this.props.left; // console.log(top, left); const className = `floating-window${` ${this.props.className}` || ""}${this.props.resizable ? " resizable" : ""}${this.state.modalOpen ? " modal-open" : ""}`; const styles = {height: this.props.height, width: this.props.width, left: left || 0, top: top || 0}; return