TODO

• [x] Add appropriate readme boilerplate
• [x] Add complete readme details
• [x] Add examples
• [ ] abstract cache manager to new npm package

Web-Window-Manager

A Window Manger for managing the creation and deletion of windows/tabs within a web based application.

Badges

Table Of Contents

About The Project

This package allows developers to build applications that can open windows/tabs at an infinite depth (theoretically) and close all windows/tabs, based on some "event", that are "children" of the window/tab that triggered the event. This solves the problem some web applications have with persistence and ensuring all children are closed given various edge cases.

• EVENT: a button click, hot key, or anything else (fully customizable)
• CHILDREN: a window/tab that was opened by a given window/tab

Built With

• TypeScript
• Lodash

Getting Started

To get started with the Web-Window-Manager, you will need to have the following prerequisites installed:

• Node.js
• npm (comes with Node.js)

Once you have these prerequisites installed, you can proceed to install the Web-Window-Manager package using npm:

npm i web-window-manager

After installing the package, you can import and use it in your project as shown in the Usage section above.

Usage

Import the Web-Window-Manager file into your entry file (e.g. app.tsx in a React project):

import 'web-window-manager'

Replace any window.open() calls in your code with window.windowManager.open():

// Before
window.open('https://www.example.com', '_blank')

// After
window.WindowManager.openWindow({ link: '/some-link', name: `some-name` })

This will use the Web-Window-Manager to open the new window/tab, allowing you to track and manage it within your application.

Add a simple React button with an onClick prop that calls window.windowManager.recursivelyCloseChildren() with a label of "Logout":

import 'web-window-manager'

function App() {
  return (
    // NOTE: you must call it from an arrow function in this context because
    // this function expects a number parameter or undefined
    <button onClick={() => window.windowManager.recursivelyCloseChildren()}>
      Logout
    </button>
  )
}

When the user clicks the "Logout" button, this will close all child windows/tabs that were opened by the current window/tab.

For more detailed usage instructions and examples, please see the Web-Window-Manager documentation examples.

See the open issues for a full list of proposed features (and known issues).

Roadmap

• The Web-Window-Manager package is still in development, and the following features are planned for future releases:

  • Abstract the cache manager to a separate npm package
  • Add more detailed examples
  • usage instructions in the readme
  • make window details customizable

Contributing

If you would like to contribute to the development of the Web-Window-Manager package, please follow these steps:

1. Fork the repository
2. Create a new branch for your changes (e.g. feature/new-feature)
3. Make your changes and commit them to your branch
4. Push your branch to your forked repository
5. Open a new pull request from your branch to the master branch of the original repository

Distributed under the MIT License. See LICENSE.txt for more information.

Me - @Triston08227721 - [email protected]

Project Link: https://github.com/Tarmstrong95/WebWindowManager

Acknowledgments

• Shields.io for providing the badges used in the readme.
• Lodash for providing the utility functions used in the package.