TCWeb Lite – User Manual

1) Dual Pane View

• Left and right panes are equal workspaces.
• Each pane has: a root selector, home 🏠 and up ⬆ buttons, a search field, a path display, and a file table.
• The active pane is visually highlighted; the top bar shows the current “Active Pane”.

2) File Table

• Fixed row height for consistent readability.
• Hover (light blue) and highlight (strong blue with left border).
• Sorting via column headers.
• Search filters live (case-insensitive).
• No text selection in the UI (prevents accidental selection while dragging).

Columns: Name, Size, Date, Time, Type.

3) Navigation

• Single-click (if enabled): Opens folders immediately.
• Double-click: Opens folder or file.
• Buttons: Home (root), Up (one level up).

4) Drag & Drop

• Move: Drag & drop file/folder between panes.
• Copy: Hold Ctrl while dragging.
• Drop targets highlight clearly on hover.

If source and target paths are the same, the operation is prevented.

5) Toolbar Actions

• Show: Opens files in new popups (size/position depends on Window Manager). Folders open directly.
• Rename: External tool rename.prg with file URL.
• PHP-Rename: Server-side rename via renamefile.php.
• Refresh: Reloads the current directory.
• Delete: Confirmation before deletefile.php (fallback: deletefile.prg).
• Close All Popups: Closes all preview windows opened in this session.

6) Window Manager & Layouts

Controls positioning of new popups. The selection is saved in localStorage.

• Cascade: Slightly offset windows.
• 2×2: Four equal quadrants.
• Side: Left/right halves.

7) Keyboard

• Ctrl during drag & drop → Copy instead of move.

8) System Requirements & Endpoints

Note: Examples use placeholders like <SERVER_ROOT> and <OS_PATH>. In production, avoid returning absolute server paths to the client; prefer web paths (webpfad) and keep internal paths server-side.

• Modern browser with ES6 support.
• Server endpoints:
  • dirfetch.php – returns:

    {
      "webpfad": "/files/current/",
      "aDirectory": [
        {"name":"file.txt","size":"1234","date":"2025-01-01","time":"12:34:56","type":"A"},
        {"name":"Folder","size":"0","date":"2025-01-02","time":"09:00:00","type":"D"}
      ]
    }

  • movefile.php – Move/Copy:

    PUT {
      "fromPath": "<SERVER_ROOT>/source/",
      "toPath":   "<SERVER_ROOT>/target/",
      "name": "file.txt",
      "mode": "move"  // or "copy"
    }

  • renamefile.php – Rename:

    PUT {
      "path": "<SERVER_ROOT>/folder/",
      "oldName": "old.txt",
      "newName": "new.txt",
      "overwrite": false
    }

  • deletefile.php – Delete:

    PUT {
      "path": "<SERVER_ROOT>/folder/",
      "name": "file.txt"
    }

  • optionenMitPfaden.json – Root directories:

    {
      "dms":  { "name": "DMS",  "pfad": "/DMS_ORDNER" },
      "text": { "name": "Text", "pfad": "/text" }
    }

9) FAQ

Why “Show” as a new window rather than a modal?

So you can place multiple files side-by-side, arranged freely – similar to a desktop workflow.

Change row height?

Adjust the CSS variable :root { --row-h: 36px; }.

Prevent text selection?

Global style uses user-select: none; to avoid accidental selection while dragging.