Skip to content

Commit d453360

Browse files
haackedhaacked
authored
Merge pull request electron#252 from andypavia/win-focus-demo
Win focus demo
2 parents 39cea5c + cff3c49 commit d453360

File tree

7 files changed

+94
-9
lines changed

7 files changed

+94
-9
lines changed

‎assets/css/demo.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,19 @@
173173
word-break: break-word;
174174
}
175175

176+
.smooth-appear {
177+
opacity: 1;
178+
transition: opacity .5s ease-in-out;
179+
}
180+
181+
.disappear {
182+
opacity: 0;
183+
}
184+
.demo-button.smooth-disappear:focus {
185+
outline: inherit;
186+
border-color: inherit;
187+
background-color: inherit;
188+
}
176189

177190
/* ProTip ----------------------------- */
178191

@@ -189,3 +202,4 @@
189202
.demo-protip strong {
190203
font-weight: 600;
191204
}
205+

‎assets/css/global.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,10 @@ kbd {
130130
border: 0;
131131
}
132132

133+
.no-display {
134+
display: none;
135+
}
136+
133137

134138
/* Content ------------------ */
135139

‎renderer-process/windows/manage-window.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,19 @@ const BrowserWindow = require('electron').remote.BrowserWindow
22
const path = require('path')
33

44
const manageWindowBtn = document.getElementById('manage-window')
5+
let win
56

67
manageWindowBtn.addEventListener('click', function (event) {
78
const modalPath = path.join('file://', __dirname, '../../sections/windows/manage-modal.html')
8-
let win = new BrowserWindow({ width: 400, height: 275 })
9-
9+
win = new BrowserWindow({ width: 400, height: 275 })
1010
win.on('resize', updateReply)
1111
win.on('move', updateReply)
12-
win.on('close', function () { win = null })
12+
win.on('close', () => { win = null })
1313
win.loadURL(modalPath)
1414
win.show()
15-
1615
function updateReply () {
1716
const manageWindowReply = document.getElementById('manage-window-reply')
1817
const message = `Size: ${win.getSize()} Position: ${win.getPosition()}`
19-
2018
manageWindowReply.innerText = message
2119
}
2220
})

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const BrowserWindow = require('electron').remote.BrowserWindow
2+
const path = require('path')
3+
4+
const manageWindowBtn = document.getElementById('listen-to-window')
5+
const focusModalBtn = document.getElementById('focus-on-modal-window')
6+
let win
7+
8+
manageWindowBtn.addEventListener('click', () => {
9+
const modalPath = path.join('file://', __dirname, '../../sections/windows/modal-toggle-visibility.html')
10+
win = new BrowserWindow({ width: 600, height: 400 })
11+
win.on('focus', hideFocusBtn)
12+
win.on('blur', showFocusBtn)
13+
win.on('close', () => {
14+
hideFocusBtn()
15+
win = null
16+
})
17+
win.loadURL(modalPath)
18+
win.show()
19+
function showFocusBtn (btn) {
20+
if (!win) return
21+
focusModalBtn.classList.add('smooth-appear')
22+
focusModalBtn.classList.remove('disappear')
23+
focusModalBtn.addEventListener('click', () => win.focus())
24+
}
25+
function hideFocusBtn () {
26+
focusModalBtn.classList.add('disappear')
27+
focusModalBtn.classList.remove('smooth-appear')
28+
}
29+
})

‎sections/windows/modal-toggle-visibility.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<style>
2+
body {
3+
padding: 10px;
4+
font-family: system, -apple-system, '.SFNSText-Regular', 'SF UI Text', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
5+
color: #fff;
6+
background-color: #8aba87;
7+
text-align: center;
8+
font-size: 34px;
9+
}
10+
11+
#close {
12+
color: white;
13+
opacity: 0.7;
14+
position: absolute;
15+
bottom: 20px;
16+
left: 50%;
17+
transform: translateX(-50%);
18+
font-size: 12px;
19+
text-decoration: none;
20+
}
21+
</style>
22+
<p>Click on the parent window to see how the "focus on demo" button appears.</p>
23+
<a id="close" href="javascript:window.close()">Close this Window</a>

‎sections/windows/windows.html

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,31 @@ <h2>ProTip</h2>
5252
<button class="demo-button" id="manage-window">View Demo</button>
5353
<span class="demo-response" id="manage-window-reply"></span>
5454
</div>
55-
<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>
56-
55+
<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>
5756
<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>
5857
<h5>Renderer Process</h5>
5958
<pre><code data-path="renderer-process/windows/manage-window.js"></pre></code>
6059
</div>
6160
</div>
6261
</div>
6362

63+
<div class="demo">
64+
<div class="demo-wrapper">
65+
<button id="using-window-events-demo-toggle" class="js-container-target demo-toggle-button">Window events: blur and focus
66+
<div class="demo-meta u-avoid-clicks">Supports: Win, OS X, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
67+
</button>
68+
<div class="demo-box">
69+
<div class="demo-controls">
70+
<button class="demo-button" id="listen-to-window">View Demo</button>
71+
<button class="demo-button disappear" id="focus-on-modal-window">Focus on Demo</button>
72+
</div>
73+
<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>
74+
<h5>Renderer Process</h5>
75+
<pre><code data-path="renderer-process/windows/using-window-events.js"></pre></code>
76+
</div>
77+
</div>
78+
</div>
79+
6480
<div class="demo">
6581
<div class="demo-wrapper">
6682
<button class="js-container-target demo-toggle-button">Create a frameless window
@@ -97,6 +113,7 @@ <h5>Renderer Process</h5>
97113
<script type="text/javascript">
98114
require('./renderer-process/windows/create-window')
99115
require('./renderer-process/windows/manage-window')
116+
require('./renderer-process/windows/using-window-events')
100117
require('./renderer-process/windows/frameless-window')
101118
</script>
102119

‎tests/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ describe('demo app', function () {
136136

137137
describe('when a demo title is clicked', function () {
138138
it('it expands the demo content', function () {
139-
let onlyFirstVisible = Array(27).fill(false)
139+
let onlyFirstVisible = Array(28).fill(false)
140140
onlyFirstVisible[0] = true
141141

142142
return app.client.dismissAboutPage()
@@ -150,7 +150,7 @@ describe('demo app', function () {
150150

151151
describe('when the app is restarted after use', function () {
152152
it('it launches at last visted section & demo', function () {
153-
let onlyFirstVisible = Array(27).fill(false)
153+
let onlyFirstVisible = Array(28).fill(false)
154154
onlyFirstVisible[0] = true
155155

156156
return app.client.waitForVisible('#windows-section')

0 commit comments

Comments
 (0)