creating a windows focus & blur events section

Author: andypavia

assets/css/demo.css

@@ -173,6 +173,19 @@
   word-break: break-word;
 }
 
+.smooth-appear {
+  opacity: 1;
+  transition: opacity .5s ease-in-out;
+}
+
+.disappear {
+  opacity: 0;
+}
+.demo-button.smooth-disappear:focus {
+  outline: inherit;
+  border-color: inherit;
+  background-color: inherit;
+}
 
 /* ProTip ----------------------------- */
 
@@ -189,3 +202,4 @@
 .demo-protip strong {
   font-weight: 600;
 }
+

renderer-process/windows/manage-window.js

@@ -2,7 +2,6 @@ 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) {
@@ -11,25 +10,15 @@ manageWindowBtn.addEventListener('click', function (event) {
   win.on('resize', updateReply)
   win.on('move', updateReply)
   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()
 })
 
 

renderer-process/windows/using-window-events.js

@@ -0,0 +1,33 @@
+const BrowserWindow = require('electron').remote.BrowserWindow
+const path = require('path')
+
+const manageWindowBtn = document.getElementById('listen-to-window')
+const focusModalBtn = document.getElementById('focus-on-modal-window')
+let win
+
+manageWindowBtn.addEventListener('click', () => {
+  const modalPath = path.join('file://', __dirname, '../../sections/windows/modal-toggle-visibility.html')
+  win = new BrowserWindow({ width: 600, height: 400 })
+  win.on('focus', hideFocusBtn)
+  win.on('blur', showFocusBtn)
+  win.on('close', () => { 
+    hideFocusBtn()
+    win = null 
+  })
+  win.loadURL(modalPath)
+  win.show()
+  function showFocusBtn (btn) {
+    if(!win) return
+    focusModalBtn.classList.add('smooth-appear')
+    focusModalBtn.classList.remove('disappear')
+    focusModalBtn.addEventListener('click', () => win.focus())
+  
+  }
+  function hideFocusBtn () {
+    focusModalBtn.classList.add('disappear')
+    focusModalBtn.classList.remove('smooth-appear')
+  }
+})
+
+
+

sections/windows/modal-toggle-visibility.html

@@ -0,0 +1,23 @@
+<style>
+body {
+  padding: 10px;
+  font-family: system, -apple-system, '.SFNSText-Regular', 'SF UI Text', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
+  color: #fff;
+  background-color: #8aba87;
+  text-align: center;
+  font-size: 34px;
+}
+
+#close {
+  color: white;
+  opacity: 0.7;
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  text-decoration: none;
+}
+</style>
+<p>Click on the parent window to see how the "focus on demo" button appears.</p>
+<a id="close" href="javascript:window.close()">Close this Window</a>

sections/windows/windows.html

@@ -51,17 +51,33 @@ <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>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>
+           <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>
+
           <h5>Renderer Process</h5>
           <pre><code data-path="renderer-process/windows/manage-window.js"></pre></code>
         </div>
       </div>
     </div>
 
+    <div class="demo">
+      <div class="demo-wrapper">
+        <button id="using-window-events-demo-toggle" class="js-container-target demo-toggle-button">Window events: blur and focus
+          <div class="demo-meta u-avoid-clicks">Supports: Win, OS X, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
+        </button>
+        <div class="demo-box">
+          <div class="demo-controls">
+            <button class="demo-button" id="listen-to-window">View Demo</button>
+            <button  class="demo-button disappear" id="focus-on-modal-window">Focus on Demo</button>
+          </div>
+          <p>In this demo, we create a new window and listen for <code>blur</code> event on it. Click the demo button to create a new modal window, and switch focus back to the parent window by clicking on it. You can click the <i>Focus on Demo</i> button to switch focus to the modal window again.</p>
+          <h5>Renderer Process</h5>
+          <pre><code data-path="renderer-process/windows/using-window-events.js"></pre></code>
+        </div>
+      </div>
+    </div>
+
     <div class="demo">
       <div class="demo-wrapper">
         <button class="js-container-target demo-toggle-button">Create a frameless window
@@ -98,6 +114,7 @@ <h5>Renderer Process</h5>
     <script type="text/javascript">
       require('./renderer-process/windows/create-window')
       require('./renderer-process/windows/manage-window')
+      require('./renderer-process/windows/using-window-events')
       require('./renderer-process/windows/frameless-window')
     </script>