Feature: Window Title (#257)

* Added title bar

* Added state for title bar

components/Carbon.js

@@ -27,6 +27,7 @@ class Carbon extends React.Component {
     }
 
     this.handleLanguageChange = this.handleLanguageChange.bind(this)
+    this.handleTitleBarChange = this.handleTitleBarChange.bind(this)
     this.codeUpdated = this.codeUpdated.bind(this)
   }
 
@@ -53,6 +54,10 @@ class Carbon extends React.Component {
     this.props.updateCode(newCode)
   }
 
+  handleTitleBarChange(newTitle) {
+    this.props.updateTitleBar(newTitle)
+  }
+
   handleLanguageChange = debounce(
     (newCode, config) => {
       const props = (config && config.customProps) || this.props
@@ -104,7 +109,7 @@ class Carbon extends React.Component {
     if (this.state.loading === false) {
       content = (
         <div id="container">
-          {config.windowControls ? <WindowControls theme={config.windowTheme} /> : null}
+          {config.windowControls ? <WindowControls theme={config.windowTheme} handleTitleBarChange={this.handleTitleBarChange} /> : null}
           <CodeMirror
             className={`CodeMirror__container window-theme__${config.windowTheme}`}
             onBeforeChange={(editor, meta, code) => this.codeUpdated(code)}

components/WindowControls.js

@@ -1,9 +1,12 @@
 import React from 'react'
 import { Controls, ControlsBW } from './svg/Controls'
 
-export default ({ theme }) => (
+export default ({ theme, handleTitleBarChange }) => (
   <div className="window-controls">
     {theme === 'bw' ? <ControlsBW /> : <Controls />}
+    <div className="window-title-container">
+      <input type="text" spellCheck="false" onChange={e => handleTitleBarChange(e.target.value)} />
+    </div>
     <style jsx>
       {`
         div {
@@ -13,6 +16,24 @@ export default ({ theme }) => (
           margin-left: 18px;
           z-index: 2;
         }
+
+        .window-title-container {
+          position: absolute;
+          top: 20px;
+          left: -18px;
+          width: 100%;
+          text-align: center;
+        }
+
+        input {
+          width: 250px;
+          background: none;
+          outline: none;
+          border: none;
+          color: white;
+          text-align: center;
+          font-size: 14px;
+        }
       `}
     </style>
   </div>

pages/editor.js

@@ -72,6 +72,7 @@ class Editor extends React.Component {
     this.save = this.save.bind(this)
     this.upload = this.upload.bind(this)
     this.updateCode = this.updateCode.bind(this)
+    this.updateTitleBar = this.updateTitleBar.bind(this)
     this.updateAspectRatio = this.updateAspectRatio.bind(this)
     this.resetDefaultSettings = this.resetDefaultSettings.bind(this)
   }
@@ -120,6 +121,10 @@ class Editor extends React.Component {
     this.setState({ aspectRatio })
   }
 
+  updateTitleBar(titleBar) {
+    this.setState({ titleBar })
+  }
+
   save() {
     this.getCarbonImage().then(dataUrl => {
       const link = document.createElement('a')
@@ -216,6 +221,7 @@ class Editor extends React.Component {
                   config={this.state}
                   updateCode={code => this.updateCode(code)}
                   onAspectRatioChange={this.updateAspectRatio}
+                  updateTitleBar={this.updateTitleBar}
                 >
                   {this.state.code || DEFAULT_CODE}
                 </Carbon>