REFACTOR (1) html markupto prepare for adding dom-terminal

bmcd · Jul 17, 2017 · 0850d33 · 0850d33
1 parent 0362e1c
commit 0850d33
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 59 deletions.
diff --git a/index.html b/index.html
@@ -37,21 +37,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 	</head>
 	<body>
-
-		<div id="editor">
-			<div id="tabs-bar">
-				<div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
-				<div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>
-				<ul id="files" class="nav nav-tabs"></ul>
-			</div>
-			<span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
-			<div id="editor-container">
-				<div id="filepanel"></div>
-				<div id="input"></div>
-			</div>
-			<div id="dragbar"></div>
-		</div>
-
 		<script src="build/app.js"></script>
 
 		<div id="modaldialog" class="modal">

diff --git a/src/app.js b/src/app.js
@@ -6,13 +6,15 @@ var $ = require('jquery')
 var base64 = require('js-base64').Base64
 var swarmgw = require('swarmgw')
 var csjs = require('csjs-inject')
+var yo = require('yo-yo')
+var EventManager = require('ethereum-remix').lib.EventManager
+
+var UniversalDApp = require('./universal-dapp.js')
+var Remixd = require('./lib/remixd')
+var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
 
 var QueryParams = require('./app/query-params')
-var queryParams = new QueryParams()
 var GistHandler = require('./app/gist-handler')
-var gistHandler = new GistHandler()
-
-var Remixd = require('./lib/remixd')
 var Storage = require('./app/files/storage')
 var Browserfiles = require('./app/files/browser-files')
 var SharedFolder = require('./app/files/shared-folder')
@@ -21,27 +23,79 @@ var Editor = require('./app/editor')
 var Renderer = require('./app/renderer')
 var Compiler = require('./app/compiler')
 var ExecutionContext = require('./app/execution-context')
-var UniversalDApp = require('./universal-dapp.js')
 var Debugger = require('./app/debugger')
-var EventManager = require('ethereum-remix').lib.EventManager
 var StaticAnalysis = require('./app/staticanalysis/staticAnalysisView')
-var OffsetToLineColumnConverter = require('./lib/offsetToLineColumnConverter')
 var FilePanel = require('./app/file-panel')
 var RighthandPanel = require('./app/righthand-panel')
 var examples = require('./app/example-contracts')
 
-// The event listener needs to be registered as early as possible, because the
-// parent will send the message upon the "load" event.
-var filesToLoad = null
-var loadFilesCallback = function (files) { filesToLoad = files } // will be replaced later
+var css = csjs`
+  .editor-container    {
+    display            : flex;
+    position           : absolute;
+    top                : 2.5em;
+    left               : 0;
+    right              : 0;
+    bottom             : 0;
+    min-width          : 20vw;
+  }
+  .filepanel-container {
+    display            : flex;
+    width              : 200px;
+  }
+`
 
-window.addEventListener('message', function (ev) {
-  if (typeof ev.data === typeof [] && ev.data[0] === 'loadFiles') {
-    loadFilesCallback(ev.data[1])
+class App {
+  constructor (opts = {}) {
+    var self = this
+    self._view = {}
+  }
+  init () {
+    var self = this
+    run.apply(self)
+  }
+  render () {
+    var self = this
+    if (self._view.el) return self._view.el
+    /***************************************************************************/
+    var el = yo`
+      <div id="editor">
+        <div id="tabs-bar">
+          <div class="scroller scroller-left"><i class="fa fa-chevron-left "></i></div>
+          <div class="scroller scroller-right"><i class="fa fa-chevron-right "></i></div>
+          <ul id="files" class="nav nav-tabs"></ul>
+        </div>
+        <span class="toggleRHP" title="Toggle right hand panel"><i class="fa fa-angle-double-right"></i></span>
+        <div id="editor-container" class=${css['editor-container']}>
+          <div id="filepanel" class=${css['filepanel-container']}></div>
+          <div id="input"></div>
+        </div>
+        <div id="dragbar"></div>
+      </div>
+    `
+    return el
   }
-}, false)
-var run = function () {
+}
+
+module.exports = App
+
+function run () {
   var self = this
+
+  var queryParams = new QueryParams()
+  var gistHandler = new GistHandler()
+
+  // The event listener needs to be registered as early as possible, because the
+  // parent will send the message upon the "load" event.
+  var filesToLoad = null
+  var loadFilesCallback = function (files) { filesToLoad = files } // will be replaced later
+
+  window.addEventListener('message', function (ev) {
+    if (typeof ev.data === typeof [] && ev.data[0] === 'loadFiles') {
+      loadFilesCallback(ev.data[1])
+    }
+  }, false)
+
   this.event = new EventManager()
   var fileStorage = new Storage('sol:')
   var config = new Config(fileStorage)
@@ -172,17 +226,6 @@ var run = function () {
   chromeCloudSync()
 
   // ---------------- FilePanel --------------------
-  // TODO: All FilePanel related CSS should move into file-panel.js
-  // app.js provides file-panel.js with a css selector or a DOM element
-  // and file-panel.js adds its elements (including css), see "Editor" above
-  var css = csjs`
-    .filepanel-container    {
-      display     : flex;
-      width       : 200px;
-    }
-  `
-  var filepanelContainer = document.querySelector('#filepanel')
-  filepanelContainer.className = css['filepanel-container']
   var FilePanelAPI = {
     createName: createNonClashingName,
     switchToFile: switchToFile,
@@ -201,7 +244,9 @@ var run = function () {
     }
   }
   var filePanel = new FilePanel(FilePanelAPI, filesProviders)
+
   // TODO this should happen inside file-panel.js
+  var filepanelContainer = document.querySelector('#filepanel')
   filepanelContainer.appendChild(filePanel)
 
   filePanel.events.register('ui-hidden', function changeLayout (isHidden) {
@@ -1012,7 +1057,3 @@ var run = function () {
     loadVersion('builtin')
   })
 }
-
-module.exports = {
-  'run': run
-}
diff --git a/src/app/editor.js b/src/app/editor.js
@@ -8,22 +8,12 @@ var Range = ace.acequire('ace/range').Range
 require('../mode-solidity.js')
 
 var css = csjs`
-  .editor-container   {
-    display           : flex;
-    position          : absolute;
-    top               : 2.5em;
-    left              : 0;
-    right             : 0;
-    bottom            : 0;
-    min-width         : 20vw;
-  }
   .ace-editor         {
     top               : 4px;
     font-size         : 1.1em;
     width             : 100%;
   }
 `
-document.querySelector('#editor-container').className = css['editor-container']
 
 function Editor (editorElement) {
   var editor = ace.edit(editorElement)

diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,10 @@
 'use strict'
 
 require('babel-polyfill')
-var app = require('./app.js')
-var $ = require('jquery')
+var App = require('./app.js')
 
-$(document).ready(function () { app.run() })
+var app = new App({})
+
+document.body.appendChild(app.render())
+
+app.init() // @TODO: refactor to remove