Skip to content

Commit

Permalink
Merge pull request #107 from makermelissa/splitfix
Browse files Browse the repository at this point in the history 
Brings back #86, but with fixes
  • Loading branch information
@makermelissa
makermelissa committed Jun 7, 2023
2 parents 1b24b58 + a11a7b1 commit a3bef74
Show file tree
Hide file tree
Showing 11 changed files with 215 additions and 247 deletions.
112 changes: 55 additions & 57 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,45 +12,64 @@
<body>
<div id="blackout" class="body-blackout"></div>
<div id="clickblock" class="body-blackout no-overlay"></div>
<header id="site-header">
<div class="wrapper">
<div class="content container">

<div class="layout">
<header id="site-header">
<div class="wrapper">
<div class="content container">
<nav class="site-brand">
<div class="site-logo">
<a href="https://code.circuitpython.org/">
<img alt="CircuitPython Logo" height="50"
src="/images/logo.png"
srcset="/images/logo.png 1x,
/images/logo@2x.png 2x,
/images/logo@3x.png 3x" >
</a>
</div>
<div class="get-started">
<a class="github-repo" href="https://github.com/circuitpython/web-editor">
<i class="fa-brands fa-github"></i>
</a>
<button class="btn-connect">Connect</button>
</div>
</nav>
</div>
</div>
<div class="bottom-bar"></div>
</header>
<header id="mobile-header">
<div class="header-contents">
<nav class="site-brand">
<div class="site-logo">
<a href="https://code.circuitpython.org/">
<img src="/images/logo.png" srcset="/images/logo.png 1x,
/images/logo@2x.png 2x,
/images/logo@3x.png 3x" alt="CircuitPython Logo" height="60" width="136">
<img alt="CircuitPython Logo" height="40"
src="/images/logo.png"
srcset="/images/logo.png 1x,
/images/logo@2x.png 2x,
/images/logo@3x.png 3x" >
</a>
</div>
<div class="get-started">
<a class="github-repo" href="https://github.com/circuitpython/web-editor">
<i class="fa-brands fa-github"></i>
</a>
<button class="btn-connect">Connect</button>
</div>
</nav>
</div>
</div>
<div class="bottom-bar"></div>
</header>
<header id="mobile-header">
<div class="header-contents">
<nav class="site-brand">
<div class="site-logo">
<a href="https://code.circuitpython.org/">
<img src="/images/logo.png" srcset="/images/logo.png 1x,
/images/logo@2x.png 2x,
/images/logo@3x.png 3x" alt="CircuitPython Logo" height="40" width="91">
</a>
</div>
<div class="get-started">
<button class="btn-connect">Connect</button>
<div class="bottom-bar"></div>
</header>
<div id="main-content">
<div id="editor-page" class="active">
<div id="editor-bar">
<button class="purple-button btn-new">New<i class="fa-solid fa-plus"></i></button>
<button class="purple-button btn-open">Open<i class="fa-solid fa-folder-open"></i></button>
<button class="purple-button btn-save">Save<i class="fa-solid fa-floppy-disk"></i></button>
<button class="purple-button btn-save-as">Save As<i class="fa-solid fa-download"></i></button>
<div class="file-path"></div>
<button class="purple-button btn-save-run">Save + Run<i class="fa-solid fa-play"></i></button>
</div>
</nav>
</div>
<div class="bottom-bar"></div>
</header>
<div class="mode-editor" id="main-content">
<div id="editor-page" class="wrapper">
<div class="container">
<div id="mobile-editor-bar">
<div id="mobile-menu">
<div class="menu-toggle">
Expand All @@ -72,42 +91,21 @@
</ul>
</nav>
</div>
<div id="editor-bar">
<button class="purple-button btn-new">New<i class="fa-solid fa-plus"></i></button>
<button class="purple-button btn-open">Open<i class="fa-solid fa-folder-open"></i></button>
<button class="purple-button btn-save">Save<i class="fa-solid fa-floppy-disk"></i></button>
<button class="purple-button btn-save-as">Save As<i class="fa-solid fa-download"></i></button>
<div class="file-path"></div>
<button class="purple-button btn-save-run">Save + Run<i class="fa-solid fa-play"></i></button>
</div>
</div>
<div>
<div class="editor-container">
<div class="container">
<div id="editor"></div>
</div>
</div>
<div id="editor"></div>
</div>
</div>
<div id="serial-page" class="wrapper">
<div class="container">
<div id="page-separator" class=""></div>
<div id="serial-page" class="">
<div id="serial-bar">
<button class="purple-button btn-restart">Restart<i class="fa-solid fa-redo"></i></button>
<button class="purple-button btn-clear">Clear<i class="fa-solid fa-broom"></i></button>
<div id="terminal-title"></div>
</div>
</div>
<div>
<div class="terminal-container">
<div class="container">
<div id="terminal"></div>
</div>
</div>
<div id="terminal"></div>
</div>
</div>
<div class="container" id="footer-bar">
<button class="mode-button purple-button btn-mode-editor">Editor</button>
<button class="mode-button purple-button active btn-mode-serial">Serial</button>
<div id="footer-bar">
<button id="btn-mode-editor" class="mode-button active">Editor</button>
<button id="btn-mode-serial" class="mode-button">Serial</button>
<div class="spacer"></div>
<button class="purple-button btn-info" disabled>Info<i class="fa-solid fa-info-circle"></i></button>
</div>
Expand Down Expand Up @@ -339,4 +337,4 @@ <h3>More network devices<i class="refresh fa-solid fa-sync-alt" title="Refresh D

<script type="module" src="/js/script.js"></script>
</body>
</html>
</html>
2 changes: 0 additions & 2 deletions js/constants.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
// place to put global constants
export const MODE_EDITOR = 1;
export const MODE_SERIAL = 2;

export const CONNTYPE = {
None: 1,
Expand Down
87 changes: 25 additions & 62 deletions js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,28 @@ import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { WebLinksAddon } from 'xterm-addon-web-links';

import state from './state.js'
import { BLEWorkflow } from './workflows/ble.js';
import { USBWorkflow } from './workflows/usb.js';
import { WebWorkflow } from './workflows/web.js';
import { isValidBackend, getBackendWorkflow, getWorkflowBackendName } from './workflows/workflow.js';
import { ButtonValueDialog, MessageModal } from './common/dialogs.js';
import { isLocal, switchUrl, getUrlParam } from './common/utilities.js';
import { MODE_EDITOR, MODE_SERIAL, CONNTYPE } from './constants.js';

var terminal;
var fitter;
var unchanged = 0;
var workflow = null;
import { CONNTYPE } from './constants.js';
import './layout.js'; // load for side effects only
import { mainContent, showSerial } from './layout.js';

// Instantiate workflows
var workflows = {};
let workflows = {};
workflows[CONNTYPE.Ble] = new BLEWorkflow();
workflows[CONNTYPE.Usb] = new USBWorkflow();
workflows[CONNTYPE.Web] = new WebWorkflow();

const btnModeEditor = document.querySelector('.btn-mode-editor');
const btnModeSerial = document.querySelector('.btn-mode-serial');
let workflow = null;
let unchanged = 0;

const btnRestart = document.querySelector('.btn-restart');
const btnClear = document.querySelector('.btn-clear');
const mainContent = document.getElementById('main-content');
const btnConnect = document.querySelectorAll('.btn-connect');
const btnNew = document.querySelectorAll('.btn-new');
const btnOpen = document.querySelectorAll('.btn-open');
Expand Down Expand Up @@ -143,16 +141,7 @@ btnRestart.addEventListener('click', async function(e) {

// Clear Button
btnClear.addEventListener('click', async function(e) {
terminal.clear();
});

// Mode Buttons
btnModeEditor.addEventListener('click', async function(e) {
await changeMode(MODE_EDITOR);
});

btnModeSerial.addEventListener('click', async function(e) {
await changeMode(MODE_SERIAL);
state.terminal.clear();
});

btnInfo.addEventListener('click', async function(e) {
Expand Down Expand Up @@ -304,7 +293,7 @@ async function loadWorkflow(workflowType = null) {
workflow = workflows[workflowType];
// Initialize the workflow
await workflow.init({
terminal: terminal,
terminal: state.terminal,
terminalTitle: terminalTitle,
loadEditorFunc: loadEditor,
debugLogFunc: debugLog,
Expand All @@ -316,7 +305,7 @@ async function loadWorkflow(workflowType = null) {
loadEditorContentsFunc: loadEditorContents,
showMessageFunc: showMessage,
currentFilename: currentFilename,
changeModeFunc: changeMode,
showSerialFunc: showSerial,
});
} else {
console.log("Reload workflow");
Expand Down Expand Up @@ -353,35 +342,9 @@ async function showMessage(message) {
return await messageDialog.open(message);
}

async function changeMode(mode) {
if (mode > 0) {
mainContent.classList.remove("mode-editor", "mode-serial");
}
if (mode == MODE_EDITOR) {
mainContent.classList.add("mode-editor");
} else if (mode == MODE_SERIAL) {
mainContent.classList.add("mode-serial");
refitTerminal();
}
}

function refitTerminal() {
// Re-fitting the terminal requires a full re-layout of the DOM which can be tricky to time right.
// see https://www.macarthur.me/posts/when-dom-updates-appear-to-be-asynchronous
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
if (fitter) {
fitter.fit();
}
});
});
});
}

async function debugLog(msg) {
terminal.writeln(''); // get a fresh line without any prior content (a '>>>' prompt might be there without newline)
terminal.writeln(`\x1b[93m${msg}\x1b[0m`);
state.terminal.writeln(''); // get a fresh line without any prior content (a '>>>' prompt might be there without newline)
state.terminal.writeln(`\x1b[93m${msg}\x1b[0m`);
}

function updateUIConnected(isConnected) {
Expand All @@ -404,21 +367,22 @@ function updateUIConnected(isConnected) {
}
}

// Fix the viewport height for mobile devices by setting
// the --vh css variable to 1% of the window inner height
function fixViewportHeight() {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
refitTerminal();
}

fixViewportHeight();
window.addEventListener("resize", fixViewportHeight);

window.onbeforeunload = () => {
if (isDirty()) {
return "You have unsaved changed, exit anyways?";
}
};

fixViewportHeight();
window.addEventListener("resize", fixViewportHeight);

async function loadEditor() {
let documentState = loadParameterizedContent();
if (documentState) {
Expand All @@ -428,7 +392,6 @@ async function loadEditor() {
}

updateUIConnected(true);
await changeMode(MODE_EDITOR);
}

var editor;
Expand Down Expand Up @@ -519,21 +482,21 @@ editor = new EditorView({
});

function setupXterm() {
terminal = new Terminal({
state.terminal = new Terminal({
theme: {
background: '#333',
foreground: '#ddd',
cursor: '#ddd',
}
});

fitter = new FitAddon();
terminal.loadAddon(fitter);
state.fitter = new FitAddon();
state.terminal.loadAddon(state.fitter);

terminal.loadAddon(new WebLinksAddon());
state.terminal.loadAddon(new WebLinksAddon());

terminal.open(document.getElementById('terminal'));
terminal.onData((data) => {
state.terminal.open(document.getElementById('terminal'));
state.terminal.onData((data) => {
workflow.serialTransmit(data);
});
}
Expand Down Expand Up @@ -596,4 +559,4 @@ document.addEventListener('DOMContentLoaded', async (event) => {
} else {
await checkConnected();
}
});
});
9 changes: 5 additions & 4 deletions js/workflows/workflow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {REPL} from 'circuitpython-repl-js';
import {FileHelper} from '../common/file.js';
import {UnsavedDialog} from '../common/dialogs.js';
import {FileDialog, FILE_DIALOG_OPEN, FILE_DIALOG_SAVE} from '../common/file_dialog.js';
import {MODE_SERIAL, CONNTYPE, CONNSTATE} from '../constants.js';
import {CONNTYPE, CONNSTATE} from '../constants.js';

/*
* This class will encapsulate all of the common workflow-related functions
Expand Down Expand Up @@ -63,7 +63,7 @@ class Workflow {
this.terminalTitle = params.terminalTitle;
}
this.currentFilename = params.currentFilename;
this._changeMode = params.changeModeFunc;
this._showSerial = params.showSerialFunc;

this.repl.setTitle = this.setTerminalTitle.bind(this);
this.repl.serialTransmit = this.serialTransmit.bind(this);
Expand Down Expand Up @@ -198,14 +198,15 @@ class Workflow {
return false;
}

await this._showSerial();

if (path == "/code.py") {
await this.repl.softRestart();
} else {
path = path.slice(1, -3);
path = path.replace(/\//g, ".");
await (this.repl.runCode("import " + path));
}
await this._changeMode(MODE_SERIAL);
}

async checkSaved() {
Expand Down Expand Up @@ -308,4 +309,4 @@ export {
isValidBackend,
getBackendWorkflow,
getWorkflowBackendName
};
};
Loading

0 comments on commit a3bef74

Please sign in to comment.