new tabs model

app/index.js

@@ -9,7 +9,7 @@ const Fs = require('fs');
 const ContentModel = require('./contentModel');
 
 const FlatView = require('../plugins/flat');
-const Tabs = require('./tabs');
+const Window = require('./window');
 const TreeView = require('./files');
 const remote = require('remote');
 const dialog = remote.require('dialog');
@@ -35,24 +35,17 @@ App.on('doOpenProject', () => {
 });
 
 App.rootView.exit.show(new ExitView());
-App.rootView.tabs.show(Tabs);
+App.rootView.window.show(Window);
 
 App.on('openFile', (file, menuCollection, menuItem) => {
 	const FilePath = Path.resolve(App.rootDir, file);
-	const reader = Readers(Path.extname(file), {model: new ContentModel({file: FilePath})});
+	const fileModel = new ContentModel({file: FilePath});
+	const reader = Readers(Path.extname(file), {model: fileModel});
 	reader.render();
-	const tab = Tabs.add({name: file, reader: reader});
+	const tab = Window.add({name: file, fileModel, readerView: reader});
 	menuItem.set('tab', tab);
 });
 
-App.on('openTab', (tab) => {
-	Tabs.select({model: tab});
-})
-
-App.on('setContent', (plugin) => {
-	App.rootView.content.$el.empty().append(plugin.el);
-});
-
 function RunApp() {
 	App.projFilePath = projPath;
 	App.rootDir = Path.dirname(projPath);

app/views/rootView.js

@@ -3,11 +3,10 @@ var LayoutView = require('backbone.marionette').LayoutView;
 var RootView = LayoutView.extend({
 	el: 'body',
 	regions: {
-		tabs: '.c-tabs',
-		content: '.c-content',
+		window: '.c-window',
 		sidebar: '.c-sidebar',
 		exit: '.c-exit'
 	}
 });
 
-module.exports = RootView;
+module.exports = RootView;

app/window/index.js

@@ -0,0 +1,3 @@
+const WindowView = require('./views/window');
+
+module.exports = new WindowView();

app/tabs/models/tab.js → app/window/models/tab.js

@@ -2,10 +2,10 @@ const {Model} = require('backbone');
 
 const TabModel = Model.extend({
 	initialize() {
-		console.log('this >> ', this);
-		this.get('page').reader.on('changed', () => {
+		console.log('initialize TabModel >> ', this);
+		this.get('fileModel').on('change', () => {
 			this.set('changed', true);
-		});
+		})
 	}
 });
 

app/window/views/item.js

@@ -0,0 +1,21 @@
+var ItemView = require('backbone.marionette').ItemView;
+var t = require('../../t');
+
+var ItemView = ItemView.extend({
+	className: 'window-item',
+	template: false,
+	initialize(opts) {
+		console.log('a', opts, this, this.model);
+	},
+	modelEvents: {
+        'change:active': 'showHide'
+  },
+	showHide() {
+		console.log('show hide');
+	},
+	onRender() {
+		this.$el.append(this.model.get('readerView').$el);
+	}
+});
+
+module.exports = ItemView;

app/window/views/items.js

@@ -0,0 +1,8 @@
+const {CollectionView} = require('backbone.marionette');
+const ItemView = require('./item');
+
+const ItemsView = CollectionView.extend({
+  childView: ItemView
+});
+
+module.exports = ItemsView;

app/tabs/views/item.js → app/window/views/tab.js

@@ -5,11 +5,12 @@ var TabView = ItemView.extend({
 	template: t('common/tab'),
 	className: 'tab',
 	initialize(opts) {
-		console.log('a', opts, this, this.model);
+		console.log('tab view initialize', opts, this, this.model);
 	},
+
 	modelEvents: {
         'change': 'fieldsChanged'
-    },
+  },
 
 	events: {
 		'click': 'select'

app/tabs/views/tabs.js → app/window/views/tabs.js

@@ -1,26 +1,27 @@
 var CollectionView = require('backbone.marionette').CollectionView;
 const TabModel = require('../models/tab');
 const App = require('../../app');
+const TabView = require('./tab');
 
-module.exports = CollectionView.extend({
+const TabsView = CollectionView.extend({
+	childView: TabView,
 	childEvents: {
 		'select': 'select'
 	},
+	initialize() {
+		console.log('tabs view initialize >>> ', this);
+	},
 	select(a, b) {
 		this.collection.each((tab) => {
 			tab.set('active', false);
 		})
 		a.model.set('active', true);
 		App.trigger('setContent', a.model.get('page').reader)
 	},
-	add(Page) {
-		const tab = new TabModel({title: Page.name, page: Page});
-		this.collection.add(tab);
-		this.select({model: tab});
-		return tab;
-	},
 	getCurrent() {
 		const current = this.collection.where({active: true});
 		return current[0];
 	}
 });
+
+module.exports = TabsView;

app/window/views/window.js

@@ -0,0 +1,30 @@
+const {LayoutView} = require('backbone.marionette');
+const TabCollection = require('../collections/tabs');
+
+const t = require('../../t');
+
+const TabModel = require('../models/tab');
+const ItemsView = require('./items');
+const TabsView = require('./tabs');
+
+const Window = LayoutView.extend({
+  template: t('common/window'),
+  regions: {
+    tabs: '.region-tabs',
+    items: '.region-items'
+  },
+  initialize(opts) {
+    this.collection = new TabCollection([]);;
+  },
+  add({name, fileModel, readerView}) {
+    // asd
+    const tab = new TabModel({title: name, fileModel, readerView});
+    this.collection.add(tab);
+  },
+  onShow() {
+    this.items.show(new ItemsView({collection: this.collection}));
+    this.tabs.show(new TabsView({collection: this.collection}));
+  }
+});
+
+module.exports = Window;

css/style.less

@@ -3,14 +3,6 @@ body {
 	font-family: Arial, Helvetica, sans-serif;
 }
 
-.fillContainer {
-	position: absolute !important;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-}
-
 .c-logo {
 	position: absolute;
 	top: 5px;
@@ -40,10 +32,18 @@ body {
 	background: rgba(0,0,0,.7);
 }
 
-.c-tabs {
+.c-window {
 	position: absolute;
 	top: 0;
 	left: 200px;
+	right: 0;
+	bottom: 20px;
+}
+
+.c-tabs {
+	position: absolute;
+	top: 0;
+	left: 0px;
 	right: 20px;
 	height: 30px;
 	overflow-x: auto;
@@ -107,9 +107,9 @@ body {
 	position: absolute;
 	top: 30px;
 	right: 0;
-	left: 200px;
-	bottom: 20px;
-	background: #333;
+	left: 0px;
+	bottom: 0px;
+	overflow-y: auto;
 }
 
 .c-footer {
@@ -189,3 +189,16 @@ body {
 	min-height: 300px;
 	color: #fff;
 }
+
+.window-item {
+	margin: 10px;
+  box-shadow: 0 0 3px 0 #111;
+  padding: 5px;
+  background: #111;
+	min-height: 100px;
+	position: relative;
+}
+
+.window-item:hover {
+	box-shadow: 0 0 3px 0 #6aa;
+}

index.html

@@ -2,29 +2,26 @@
 <html>
   <head>
     <script>require('electron-compile').init();</script>
-    <title>Hello World!</title>
+    <title>SSBus term</title>
     <link href="./css/style.less" rel="stylesheet" />
     <link href="./css/material-design-iconic-font.min.css" rel="stylesheet" />
   </head>
   <body style="">
     <div class="c-logo">
       <b>B</b>term
     </div>
-    <div class="c-tabs">
-      tabs
-    </div>
+
     <div class="c-exit"></div>
     <div class="c-sidebar">
       sidebar
     </div>
-    <div class="c-content">
-      content
+    <div class="c-window">
     </div>
     <div class="c-footer">
       <i class="zmdi zmdi-usb"></i> COM4
     </div>
-    
-    <script>     
+
+    <script>
       require('./app/index.js');
     </script>
   </body>

main.js

@@ -1,13 +1,6 @@
 var app = require('app');  // Module to control application life.
 var BrowserWindow = require('browser-window');  // Module to create native browser window.
 
-var sp = require('serialport');
-
-  sp.list(function(err, ports) {
-    console.log(ports);
-  });
-
-
 // Report crashes to our server.
 require('crash-reporter').start();
 

plugins/bproj/index.js

@@ -13,9 +13,8 @@ const ProjectFile = ItemView.extend({
     'keyup .js-proj-name': 'changeName'
   },
   changeName(e) {
-    console.log('ON CHANGE');
     this.project.set('projectName', e.currentTarget.value);
-    this.trigger('changed');
+		this.model.set('content', JSON.stringify(this.project.toJSON()));
   },
 	onRender() {
 		this.$el.find('.js-proj-name').val(this.project.get('projectName'));

plugins/flat/index.js

@@ -5,7 +5,7 @@ const FlatFile = ItemView.extend({
 	template: false,
 	onRender() {
 		this.$el.text(this.model.get('content'));
-		this.$el.addClass('fillContainer');
+		this.$el.css({height: '300px'});
 		console.log('Ace', Ace, ace)
 		this.editor = ace.edit(this.el);
 	}

templates/common/window.jade

@@ -0,0 +1,2 @@
+.c-tabs.region-tabs
+.c-content.region-items