188 | const exists = require('exists')
189 |
190 | const html = require('./html')
191 | const Window = require('./window')
192 | const WindowOptions = require('./window-options')
193 |
194 | /**
195 | * Creates a windowing system to create and manage windows
196 | *
197 | * @extends EventEmitter
198 | * @example
199 | * var wm = new WindowManager();
200 | *
201 | * wm.createWindow({ x: 20, y: 20, width: 200 });
202 | * wm.content.innerHTML = 'Hello there!';
203 | */
204 | class WindowManager
205 | {
206 | /**
207 | * @param {WindowOptions} [defaultOptions] default WindowOptions used when createWindow is called
208 | * @param {boolean} [defaultOptions.quiet] suppress the simple-window-manager console message
209 | */
210 | constructor(defaultOptions)
211 | {
212 | this._createDom()
213 | this.windows = []
214 | this.active = null
215 | this.modal = null
216 | this.options = {}
217 | for (let key in WindowOptions)
218 | {
219 | this.options[key] = WindowOptions[key]
220 | }
221 | if (defaultOptions)
222 | {
223 | for (let key in defaultOptions)
224 | {
225 | this.options[key] = defaultOptions[key]
226 | }
227 | }
228 | if (!defaultOptions.quiet)
229 | {
230 | console.log('%c ☕ simple-window-manager initialized ☕', 'color: #ff00ff')
231 | }
232 | }
233 |
234 | /**
235 | * Create a window
236 | * @param {WindowOptions} [options]
237 | * @param {string} [options.title]
238 | * @param {number} [options.x] position
239 | * @param {number} [options.y] position
240 | * @param {boolean} [options.modal]
241 | * @param {Window} [options.center] center in the middle of an existing Window
242 | * @param {string|number} [options.id] if not provide, id will be assigned in order of creation (0, 1, 2...)
243 | * @fires open
244 | * @fires focus
245 | * @fires blur
246 | * @fires close
247 | * @fires maximize
248 | * @fires maximize-restore
249 | * @fires minimize
250 | * @fires minimize-restore
251 | * @fires move
252 | * @fires move-start
253 | * @fires move-end
254 | * @fires resize
255 | * @fires resize-start
256 | * @fires resize-end
257 | */
258 | createWindow(options)
259 | {
260 | options = options || {}
261 | for (let key in this.options)
262 | {
263 | if (!exists(options[key]))
264 | {
265 | options[key] = this.options[key]
266 | }
267 | }
268 | const win = new Window(this, options);
269 | win.on('open', this._open, this)
270 | win.on('focus', this._focus, this)
271 | win.on('blur', this._blur, this)
272 | win.on('close', this._close, this)
273 | win.win.addEventListener('mousemove', (e) => this._move(e))
274 | win.win.addEventListener('touchmove', (e) => this._move(e))
275 | win.win.addEventListener('mouseup', (e) => this._up(e))
276 | win.win.addEventListener('touchend', (e) => this._up(e))
277 | if (options.center)
278 | {
279 | win.move(
280 | options.center.x + options.center.width / 2 - (options.width ? options.width / 2 : 0),
281 | options.center.y + options.center.height / 2 - (options.height ? options.height / 2 : 0)
282 | )
283 | }
284 | if (options.modal)
285 | {
286 | this.modal = win
287 | }
288 | return win
289 | }
290 |
291 | /**
292 | * send window to front
293 | * @param {Window} win
294 | */
295 | sendToFront(win)
296 | {
297 | const index = this.windows.indexOf(win)
298 | if (index !== this.windows.length - 1)
299 | {
300 | this.windows.splice(index, 1)
301 | this.windows.push(win)
302 | this._reorder()
303 | }
304 | }
305 |
306 | /**
307 | * send window to back
308 | * @param {Window} win
309 | */
310 | sendToBack(win)
311 | {
312 | const index = this.windows.indexOf(win)
313 | if (index !== 0)
314 | {
315 | this.windows.splice(index, 1)
316 | this.windows.unshift(win)
317 | this._reorder()
318 | }
319 | }
320 |
321 | /**
322 | * save the state of all the windows
323 | * @returns {object} use this object in load() to restore the state of all windows
324 | */
325 | save()
326 | {
327 | const data = {}
328 | for (let i = 0; i < this.windows.length; i++)
329 | {
330 | const entry = this.windows[i]
331 | data[entry.id] = entry.save()
332 | data[entry.id].order = i
333 | }
334 | return data
335 | }
336 |
337 | /**
338 | * restores the state of all the windows
339 | * NOTE: this requires that the windows have the same id as when save() was called
340 | * @param {object} data created by save()
341 | */
342 | load(data)
343 | {
344 | for (let i = 0; i < this.windows.length; i++)
345 | {
346 | const entry = this.windows[i]
347 | if (data[entry.id])
348 | {
349 | entry.load(data[entry.id])
350 | }
351 | }
352 | // reorder windows
353 | }
354 |
355 | /**
356 | * reorder windows
357 | * @private
358 | * @returns {number} available z-index for top window
359 | */
360 | _reorder()
361 | {
362 | let i = 0
363 | for (; i < this.windows.length; i++)
364 | {
365 | this.windows[i].z = i
366 | }
367 | }
368 |
369 | _createDom()
370 | {
371 | this.win = html.create({
372 | parent: document.body, styles: {
373 | 'user-select': 'none',
374 | 'width': '100%',
375 | 'height': '100%',
376 | 'overflow': 'hidden',
377 | 'z-index': -1,
378 | 'cursor': 'default'
379 | }
380 | })
381 | this.overlay = html.create({
382 | parent: this.win, styles: {
383 | 'user-select': 'none',
384 | 'position': 'absolute',
385 | 'top': 0,
386 | 'left': 0,
387 | 'width': '100%',
388 | 'height': '100%',
389 | 'overflow': 'hidden'
390 | }
391 | })
392 | this.overlay.addEventListener('mousemove', (e) => this._move(e))
393 | this.overlay.addEventListener('touchmove', (e) => this._move(e))
394 | this.overlay.addEventListener('mouseup', (e) => this._up(e))
395 | this.overlay.addEventListener('touchend', (e) => this._up(e))
396 | }
397 |
398 | _open(win)
399 | {
400 | const index = this.windows.indexOf(win)
401 | if (index === -1)
402 | {
403 | this.windows.push(win)
404 | }
405 | }
406 |
407 | _focus(win)
408 | {
409 | if (this.active === win)
410 | {
411 | return
412 | }
413 |
414 | if (this.active)
415 | {
416 | this.active.blur()
417 | }
418 |
419 | const index = this.windows.indexOf(win)
420 | if (index !== this.windows.length - 1)
421 | {
422 | this.windows.splice(index, 1)
423 | this.windows.push(win)
424 | }
425 | this._reorder()
426 |
427 | this.active = win
428 | }
429 |
430 | _blur(win)
431 | {
432 | if (this.active === win)
433 | {
434 | this.active = null
435 | }
436 | }
437 |
438 | _close(win)
439 | {
440 | if (this.modal === win)
441 | {
442 | this.modal = null
443 | }
444 | const index = this.windows.indexOf(win)
445 | if (index !== -1)
446 | {
447 | this.windows.splice(index, 1)
448 | }
449 | if (this.active === win)
450 | {
451 | this._blur(win)
452 | }
453 | }
454 |
455 | _move(e)
456 | {
457 | for (let key in this.windows)
458 | {
459 | this.windows[key]._move(e)
460 | }
461 | }
462 |
463 | _up(e)
464 | {
465 | for (let key in this.windows)
466 | {
467 | this.windows[key]._up(e)
468 | }
469 | }
470 |
471 | _checkModal(win)
472 | {
473 | return !this.modal || this.modal === win
474 | }
475 | }
476 |
477 | /**
478 | * @external EventEmitter
479 | */
480 |
481 |
482 | module.exports = WindowManager
483 |
484 |