F diff --git a/front/dragging.ts b/front/dragging.ts
--- a/front/dragging.ts
+++ b/front/dragging.ts
- import { FileView } from './explorer';
+
+ export class Draggable {
+ el: HTMLElement;
+
+ canDragX: boolean = true;
+ canDragY: boolean = true;
+ reparent: boolean = true;
+
+ lockSize: boolean = true;
+
+ onBeforeDragStart: () => void = null;
+ onAfterDragEnd: () => void = null;
+
+ Draggable(el: HTMLElement) {
+ this.el = el;
+ }
+ }
+
+
+
// If we're currently dragging something (a window or a file), this is the DOM object we're dragging
// dragging_offset_x and dragging_offset_y are the difference between the objec's top left point and the cursor position
// this is then added to the cursor position when the mouse is moved
- export var dragging = null;
+ export var dragging: Draggable = null;
export var dragging_offset_x = 0, dragging_offset_y = 0;
// If we have pressed down a window's title bar but haven't yet started dragging it, it's the drag candidate
// This is needed because we don't yet know whether we want to start dragging the window or click an element in the titlebar
// Once the mouse has moved sufficiently far away from dragging_candidate_x or y, we start dragging
- export var dragging_candidate: HTMLElement = null;
+ export var dragging_candidate: Draggable = null;
export var dragging_candidate_x, dragging_candidate_y;
// If we're dragging a fileview, this is set to the fileview class instance itself, because 'dragging' is just a DOM object
// The placeholder is a dummy DIV that we insert in the object's place on the grid to keep things nicely aligned
- export var dragging_fileview: FileView;
- export var dragging_placeholder = null;
+ // export var dragging_fileview: FileView;
+ // export var dragging_placeholder = null;
- export function set_dragging_candidate(e, candidate: HTMLElement) {
+ export function set_dragging_candidate(e, candidate: Draggable) {
dragging_candidate = candidate;
dragging_candidate_x = e.clientX;
dragging_candidate_y = e.clientY;
// Start dragging the 'obj' DOM element
// e is a DOM event, this should only get called in response of a DOM event
- export function begin_drag(e, obj: HTMLElement, dont_set_width?: boolean) {
+ export function begin_drag(e, d: Draggable) {
set_iframe_enabled(false);
- dragging = obj;
+ dragging = d;
dragging_candidate = null;
- dragging.classList.add("dragged");
+ dragging.el.classList.add("dragged");
- var elemRect = dragging.getBoundingClientRect();
+ var elemRect = dragging.el.getBoundingClientRect();
dragging_offset_x = e.clientX - elemRect.left;
dragging_offset_y = -e.clientY + elemRect.top;
- if (dragging_placeholder)
- obj.parentNode.insertBefore(dragging_placeholder, obj);
+ //if (dragging_placeholder)
+ // dragging.el.parentNode.insertBefore(dragging_placeholder, dragging.el);
- dragging.style.left = (e.clientX - dragging_offset_x) + "px";
- dragging.style.top = (e.clientY + dragging_offset_y) + "px";
+ dragging.el.style.left = (e.clientX - dragging_offset_x) + "px";
+ dragging.el.style.top = (e.clientY + dragging_offset_y) + "px";
- if (!dont_set_width) {
- dragging.style.width = elemRect.width + "px";
- dragging.style.height = elemRect.height + "px";
+ if (dragging.lockSize) {
+ dragging.el.style.width = elemRect.width + "px";
+ dragging.el.style.height = elemRect.height + "px";
}
- dragging.style.position = "absolute";
- document.body.appendChild(dragging);
+ dragging.el.style.position = "absolute";
+ document.body.appendChild(dragging.el);
}
export function end_drag(_e) {
F diff --git a/front/explorer.ts b/front/explorer.ts
--- a/front/explorer.ts
+++ b/front/explorer.ts
import { BaseWindow } from './window'
import { mk, path_combine, base64ArrayBuffer } from './util';
import { show_upload_dialog, show_upload_dialog_replace_file } from './upload_form';
- import { dragging, dragging_fileview, begin_drag_fileview, end_drag } from './dragging'
+ import { dragging, Draggable, end_drag } from './dragging'
import { ShareWindow } from './share_window';
import { context } from './contextmenu';
}
}
+ class FileViewDraggable extends Draggable {
+
+ fileview: FileView;
+ placeholder: HTMLDivElement;
+
+ FileViewDraggable(fileview: FileView) {
+ this.fileview = fileview;
+
+ this.onBeforeDragStart = () => {
+ this.placeholder = document.createElement('div');
+ fileview.visuals.parentNode.insertBefore(this.placeholder, fileview.visuals);
+ // fileview.style.zIndex = 50000;
+ };
+
+ this.onAfterDragEnd = () => {
+ // If there's a dragging placeholder remove it and put the dragged node back into its place
+ this.placeholder.parentNode.insertBefore(dragging, dragging_placeholder);
+ this.placeholder.remove();
+
+ fileview.visuals.style.removeProperty("position");
+ fileview.visuals.style.removeProperty("width");
+ fileview.visuals.style.removeProperty("height");
+ fileview.visuals.style.removeProperty("left");
+ fileview.visuals.style.removeProperty("top");
+
+
+ }
+ }
+ }
+
// make_window creates an explorer window - the kind that can list directories/open files
function make_window(wnd, has_close: boolean): BaseWindow {
mk(wnd.h2, 'div', 'path');
// wnd.foldercontents is where the FileViews will be stored
// it also has a subheader (h3) with 'Upload' and 'New FOlder' buttons
{
- wnd.foldercontents = mk(wnd.visuals, 'div', 'foldercontents');
+ wnd.foldercontents = mk(wnd.wc, 'div', 'foldercontents');
var h3 = mk(wnd.foldercontents, 'h3');
var upload_btn = mk(h3, 'button');
// wnd.filecontentsroot is where the filedata will be stored for open files
// it also has a subheader (h3) with Share and Download buttons
{
- wnd.filecontentsroot = mk(wnd.visuals, 'div', 'filecontentsroot');
+ wnd.filecontentsroot = mk(wnd.wc, 'div', 'filecontentsroot');
var h3 = mk(wnd.filecontentsroot, 'h3');
let download_btn = mk(h3, 'button');
x_button.innerText = "X";
x_button.onclick = () => { wnd.destroy(); };
- const contents = mk(wnd.visuals, 'div', 'filecontentsroot');
+ const contents = mk(wnd.wc, 'div', 'filecontentsroot');
const iframe = mk(contents, 'iframe') as HTMLIFrameElement;
iframe.style.flex = '1 0 0';
iframe.src = url;
F diff --git a/front/window.ts b/front/window.ts
--- a/front/window.ts
+++ b/front/window.ts
files: any[];
txt_editor: HTMLElement; // For editable text files, this is the DOM element the user can edit
+ grid: HTMLElement;
+ wc: HTMLElement;
+
constructor(pwd, x, y, w, h) {
this.pwd = pwd; // pwd = [ "Folder1", "Folder2" ] means the current directory of that window is /Folder1/Folder2
windows.push(wnd);
wnd.visuals = mk(document.body, 'div', 'window');
+ wnd.grid = mk(wnd.visuals, 'div', 'windowgrid');
+ wnd.wc = mk(wnd.grid, 'div', 'wc');
wnd.visuals.style.width = w + "px";
wnd.visuals.style.height = h ? (h + "px") : "unset";
wnd.visuals.style.left = x + "px";
wnd.visuals.style.top = y + "px";
- wnd.h2 = mk(wnd.visuals, 'h2');
+ wnd.h2 = mk(wnd.wc, 'h2');
+
+ mk(wnd.grid, 'div', 'nw-resize');
wnd.visuals.onmousedown = (_e) => {
wnd.focus();
F diff --git a/style.css b/style.css
--- a/style.css
+++ b/style.css
}
- .window h3 button,
- .window > h2 button
+ .window .wc h3 button,
+ .window .wc > h2 button
{
border: none;
padding: 0.3rem 1rem;
border-radius: 0;
}
- .window h3 button:not(.pathentry):hover {
+ .window .wc h3 button:not(.pathentry):hover {
background: white;
}
- .window h3 .separator {
+ .window .wc h3 .separator {
flex: 0 0 1px;
align-self: stretch;
background: #bbb;
}
- .window > h2 > *:first-child {
+ .window .wc > h2 > *:first-child {
border-top-left-radius: 0.5rem;
}
form p {
}
.window {
- overflow: hidden;
box-sizing: border-box;
margin: 0rem;
padding: 0;
box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
border-radius: var(--window-border-radius);
border: 1px solid #b9b9b9;
+ overflow: hidden;
- display: block;
position: absolute;
- top: 0;
- left: 0;
- width: 800px;
- height: 600px;
-
+ }
+
+ .windowgrid {
+ display: grid;
+ grid-template-columns: 10px auto 10px;
+ grid-template-rows: 10px auto 10px;
+ height: 100%;
+ }
+
+ .window .wc {
transition: opacity 0.3s;
display: flex;
flex-direction: column;
+
+ grid-row: 2;
+ grid-column: 2;
+ }
+
+ .nw-resize {
+ background: red;
+ grid-row: 1;
+ grid-column: 1;
+ cursor: nw-resize;
}
.window.focus {
box-sizing: border-box;
}
- .window h3,
- .window > h2 {
+ .window .wc h3,
+ .window .wc > h2 {
color: #4d4d4d;
background: #f0f0f0;
margin: 0;
border-bottom: 1px solid #bbb;
}
- .window > h2 {
+ .window .wc > h2 {
font-size: 1.3rem;
cursor: grab;
-ms-user-select: none;
}
- .window h3 {
+ .window .wc h3 {
font-size: 1.2rem;
}
background: rgba(255,255,255, 0.9);
}
- .window > h2 .close_button {
+ .window .wc > h2 .close_button {
border-left: 1px solid #ccc;
}
.filename {
word-wrap: break-word;
word-break: break-word;
- }
+ }
<
\ No newline at end of file