adding wording for win.focus() API

Andres Pavia Marckwordt · Andres Pavia Marckwordt · commit 58781b1ec301 · 2016-08-05T13:30:17.000-07:00
diff --git a/assets/css/global.css b/assets/css/global.css
@@ -130,6 +130,10 @@ kbd {
   border: 0;
 }
 
+.no-display {
+  display: none;
+}
+
 
 /* Content ------------------ */
 
diff --git a/renderer-process/windows/manage-window.js b/renderer-process/windows/manage-window.js
@@ -2,21 +2,34 @@ const BrowserWindow = require('electron').remote.BrowserWindow
 const path = require('path')
 
 const manageWindowBtn = document.getElementById('manage-window')
+const focusModalBtn = document.getElementById('focus-on-modal-window')
+let win
 
 manageWindowBtn.addEventListener('click', function (event) {
   const modalPath = path.join('file://', __dirname, '../../sections/windows/manage-modal.html')
-  let win = new BrowserWindow({ width: 400, height: 275 })
-
+  win = new BrowserWindow({ width: 400, height: 275 })
   win.on('resize', updateReply)
   win.on('move', updateReply)
-  win.on('close', function () { win = null })
+  win.on('close', function () { 
+    focusModalBtn.classList.add('no-display')
+    win = null 
+  })
   win.loadURL(modalPath)
   win.show()
-
+  showFocusBtn()
   function updateReply () {
     const manageWindowReply = document.getElementById('manage-window-reply')
     const message = `Size: ${win.getSize()} Position: ${win.getPosition()}`
 
     manageWindowReply.innerText = message
+  } 
+  function showFocusBtn () {
+    focusModalBtn.classList.remove('no-display')
   }
 })
+
+focusModalBtn.addEventListener('click', function (event) {
+   win.focus()
+})
+
+
diff --git a/sections/windows/windows.html b/sections/windows/windows.html
@@ -51,10 +51,11 @@ <h2>ProTip</h2>
           <div class="demo-controls">
             <button class="demo-button" id="manage-window">View Demo</button>
             <span class="demo-response" id="manage-window-reply"></span>
+            <button  class="demo-button no-display" id="focus-on-modal-window">Focus on Demo</button>
           </div>
           <p>In this demo we create a new window and listen for <code>move</code> and <code>resize</code> events on it. Click the demo button, change the new window and see the dimensions and position update here, above.</p>
-
-          <p>There are a lot of methods for controlling the state of the window such as the size, location, and focus status as well as events to listen to for window changes. Visit the <a href="http://electron.atom.io/docs/api/browser-window">documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for the full list.</p>
+          <p>Click the focus on Window button to switch focus to the modal window if it's not visible anymore.</p>
+          <p>There are a lot of methods for controlling the state of the window such as the size and location as well as events to listen to for window changes. Visit the <a href="http://electron.atom.io/docs/api/browser-window">documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for the full list.</p>
           <h5>Renderer Process</h5>
           <pre><code data-path="renderer-process/windows/manage-window.js"></pre></code>
         </div>

Original file line number	Diff line number	Diff line change
`@@ -130,6 +130,10 @@ kbd {`
`130`	`130`	`border: 0;`
`131`	`131`	`}`
`132`	`132`
	`133`	`+.no-display {`
	`134`	`+ display: none;`
	`135`	`+}`
	`136`	`+`
`133`	`137`
`134`	`138`	`/* Content ------------------ */`
`135`	`139`