diff --git a/webapp/package.json b/webapp/package.json index e5e74700..b947b0e0 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -2,13 +2,15 @@ "name": "sysbuild-playground-webapp", "version": "0.0.0", "private": true, - "dependencies": {}, + "dependencies": { + "node-sass": "^4.8.3" + }, "devDependencies": { - "babel-core": "^6.22.1", + "babel-core": "^6.26.0", "babel-plugin-add-module-exports": "^0.2.1", "babel-plugin-transform-es2015-modules-amd": "^6.18.0", "babel-preset-env": "^1.1.8", - "babel-register": "^6.18.0", + "babel-register": "^6.26.0", "chalk": "^1.1.1", "deeply": "^2.0.0", "eslint": "^3.14.0", diff --git a/webapp/src/app/gcc-output-parser.js b/webapp/src/app/gcc-output-parser.js index 8f0c37fc..d6cbafc6 100644 --- a/webapp/src/app/gcc-output-parser.js +++ b/webapp/src/app/gcc-output-parser.js @@ -50,7 +50,8 @@ class GccOutputParser { text = makefileColNum[3]; buildErrorType = 'error'; } else { - row = col = 0; + row = 0; + col = 0; const typeTextSplitMatch = gccOutputTypeTextSplitRe.exec(match[2]); if (typeTextSplitMatch) { buildErrorType = typeTextSplitMatch[1]; diff --git a/webapp/src/app/sys-filesystem.js b/webapp/src/app/sys-filesystem.js index d351c1b8..ed309dfc 100644 --- a/webapp/src/app/sys-filesystem.js +++ b/webapp/src/app/sys-filesystem.js @@ -22,9 +22,9 @@ class SysFileSystem { } /*------------------------------------------------------------------------------------------------*/ - /** + /* * API for interating with the joined file system - **/ + */ writeFile(path, buf) { if (path.charAt(0) !== '/') { @@ -253,10 +253,10 @@ class SysFileSystem { } /*------------------------------------------------------------------------------------------------*/ - /** + /* * Write all local files (those stored in local storage) to * the Jor1k file system (i.e /home/user) - **/ + */ syncVM() { console.log('Starting Syncing VM File System'); this.jor1kFS.DeleteDirContents('home/user'); @@ -286,10 +286,10 @@ class SysFileSystem { } /*------------------------------------------------------------------------------------------------*/ - /** + /* * Handling callbacks from file operations done on * the Jor1k VM - **/ + */ Jor1kNotifyCallBack(info) { const path = info.path.substring('home/user'.length, info.path.length); diff --git a/webapp/src/app/sys-runtime.js b/webapp/src/app/sys-runtime.js index 270c3a55..0bb1d351 100644 --- a/webapp/src/app/sys-runtime.js +++ b/webapp/src/app/sys-runtime.js @@ -206,7 +206,8 @@ class SysRuntime { if (typeof error.type === 'undefined') { // if the errors are not in program.c, invalidate the row and column so that // the editor does not place an annotation - error.row = error.col = -1; + error.row = -1; + error.col = -1; } return { diff --git a/webapp/src/components/compiler-controls/compiler-controls.html b/webapp/src/components/compiler-controls/compiler-controls.html index b5413a3a..a1e45a23 100644 --- a/webapp/src/components/compiler-controls/compiler-controls.html +++ b/webapp/src/components/compiler-controls/compiler-controls.html @@ -1,3 +1,4 @@ +
diff --git a/webapp/src/components/editor-compiler-tab/editor-compiler-tab.html b/webapp/src/components/editor-compiler-tab/editor-compiler-tab.html index f2e14134..ac17b497 100644 --- a/webapp/src/components/editor-compiler-tab/editor-compiler-tab.html +++ b/webapp/src/components/editor-compiler-tab/editor-compiler-tab.html @@ -1,2 +1,2 @@ -
-
+
+
diff --git a/webapp/src/components/editor/editor.html b/webapp/src/components/editor/editor.html index 0f9028fb..61cb04a8 100644 --- a/webapp/src/components/editor/editor.html +++ b/webapp/src/components/editor/editor.html @@ -1,5 +1,11 @@ +
+ +
diff --git a/webapp/src/components/editor/editor.js b/webapp/src/components/editor/editor.js index 9b5b5e1f..b1215b9f 100644 --- a/webapp/src/components/editor/editor.js +++ b/webapp/src/components/editor/editor.js @@ -67,6 +67,32 @@ class Editor { this.editorDivId = editorDivId; this.aceEditor = ace.edit(editorDivId); + if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { + // Enables scrolling + this.aceEditor.setOptions( + { + minLines: 15, + maxLines: 50 + }); + + // Remove clutter + const mainLayout = $('#layout').layout(); + $('.ace_text-input').focus(() => { + mainLayout.close('south'); + mainLayout.state.south.autoClosed = true; + $('#compiler-components').hide(); + $('#editor-opts-container').hide(); + }); + + // Restores webpage layout + $('.ace_text-input').focusout(() => { + mainLayout.open('south'); + mainLayout.state.south.autoClosed = false; + $('#compiler-components').show(); + $('#editor-opts-container').show(); + }); + } + // Fix for the following Ace warning: // "Automatically scrolling cursor into view after selection change this will be disabled // in the next version set editor.$blockScrolling = Infinity to disable this message" diff --git a/webapp/src/components/file-browser/file-browser.js b/webapp/src/components/file-browser/file-browser.js index 4c7da003..a0f1c494 100644 --- a/webapp/src/components/file-browser/file-browser.js +++ b/webapp/src/components/file-browser/file-browser.js @@ -39,7 +39,8 @@ class Filebrowser { constructor() { const readyCallback = () => { this.id = '#file-browser-body'; - const fs = this.fs = SysFileSystem; + const fs = SysFileSystem; + this.fs = SysFileSystem; this.editor = SysGlobalObservables.editor; SysGlobalObservables.fileBrowser = this; diff --git a/webapp/src/components/playground-doc-pane/playground-doc-pane.html b/webapp/src/components/playground-doc-pane/playground-doc-pane.html index 889f2291..9997220d 100644 --- a/webapp/src/components/playground-doc-pane/playground-doc-pane.html +++ b/webapp/src/components/playground-doc-pane/playground-doc-pane.html @@ -1 +1,2 @@ +
diff --git a/webapp/src/components/playground-layout/playground-layout.html b/webapp/src/components/playground-layout/playground-layout.html index 32b318f9..715be9a2 100644 --- a/webapp/src/components/playground-layout/playground-layout.html +++ b/webapp/src/components/playground-layout/playground-layout.html @@ -8,7 +8,7 @@
- +
diff --git a/webapp/src/components/playground-layout/playground-layout.js b/webapp/src/components/playground-layout/playground-layout.js index 23e8cc73..b113b3e2 100644 --- a/webapp/src/components/playground-layout/playground-layout.js +++ b/webapp/src/components/playground-layout/playground-layout.js @@ -22,7 +22,13 @@ class PlaygroundLayout { const openManPageCallback = this.openManPage.bind(this); editorParams.openManPage = openManPageCallback; - this.initLayout(); + if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { + // if device is mobile.. + this.initLayoutMobile(); + this.createDocsTab(this.docParams); + this.createTerminalTab(); + $('#doc-tty-container').hide(); + } else this.initLayoutDesktop(); $('body').css('overflow', 'hidden'); // Prevent accidental backward navigation. @@ -45,12 +51,25 @@ class PlaygroundLayout { } }); - this.createVideoSearchTab(); this.createEditorTab(editorParams, compilerParams); + this.createVideoSearchTab(); this.createFileBrowserTab(); this.createManPageSearchTab(openManPageCallback); } + createDocsTab(docParams) { + this.editorPaneTabs.push({ + title: 'Intro', + closable: false, + component: { + name: 'playground-doc-pane', + params: { + doc: docParams + } + } + }); + } + createEditorTab(editorParams, compilerParams) { this.editorPaneTabs.push({ title: 'Code', @@ -79,6 +98,16 @@ class PlaygroundLayout { }); } + createTerminalTab() { + this.editorPaneTabs.push({ + title: 'Terminal', + closable: false, + component: { + name: 'playground-term-pane' + } + }); + } + createVideoSearchTab() { this.editorPaneTabs.push({ title: 'Video Search', @@ -124,7 +153,7 @@ class PlaygroundLayout { $('#editor-tabs-bar').find('span:contains("' + addedTabName + '")').click(); } - initLayout() { + initLayoutDesktop() { const mainNavBarHeightPx = 51; this.navbarTopMargin = mainNavBarHeightPx + 'px'; @@ -185,6 +214,41 @@ class PlaygroundLayout { }; } + initLayoutMobile() { + const mainNavBarHeightPx = 51; + this.navbarTopMargin = mainNavBarHeightPx + 'px'; + + let navBarHeightPx = 33; + if (!this.showLessonNavigation) { + navBarHeightPx = 0; + } + + const mainLayout = $('#layout').layout({ + livePaneResizing: true, + + north__paneSelector: '#navbar-container', + center__paneSelector: '#code-container', + south__paneSelector: '#footer-container', + + spacing_open: 2, + + north__resizable: false, + north__size: mainNavBarHeightPx + navBarHeightPx, + north__spacing_open: 0, + north__spacing_closed: 0, + north__showOverflowOnHover: true, + + south__resizable: false, + south__size: 29, + south__spacing_open: 0, + }); + + + return { + mainLayout: mainLayout + }; + } + dispose() { $('body').css('overflow', 'auto'); $(window).off('keydown.playground'); diff --git a/webapp/src/components/playground-term-pane/playground-term-pane.html b/webapp/src/components/playground-term-pane/playground-term-pane.html index cb8f8b31..c05b93ee 100644 --- a/webapp/src/components/playground-term-pane/playground-term-pane.html +++ b/webapp/src/components/playground-term-pane/playground-term-pane.html @@ -1,3 +1,4 @@ +