An extensible HTML DOM window manager with a professional look and feel

Overview

Wingman

An extensible HTML DOM window manager with a professional look and feel.

Wingman (Dark Mode)


Wingman (Light Mode)

Installation

Wingman only requires two files: wingman.css and wingman.js.

wingman.css is the CSS styling for windows, and can be fully customized to fit your needs. wingman.js is the JavaScript class for managing windows.

">

<link rel="stylesheet" href="./wingman.css" />


<script src="./wingman.js">script>

Usage

To create a new window, simply create a new Wingman class instance.

Windows usually are HTMLDivElements, though most other container elements will work.

To add content to a window, simply put your HTML inside the root window element. It will be stored in the new window.

// Default window configuration
const defaultWindow = new Wingman('#window', // the CSS selector of the element to turn into a window.
{
    width: 700,       // width of the window
    height: 500,      // height of the window
    minWidth: 500,    // minimum width of the window
    minHeight: 400,   // minimmum width of the window
    draggable: true,  // whether or not you can drag the window by its header
    resizable: true,  // whether or not you can resize a window
    centered: true,   // whether or not to spawn this window in the center of its parent
    darkMode: true,   // whether or not to spawn this window in dark mode (false = light mode)
    shadow: 'hover',  // the type of window shadow ['always', 'hover', 'active', 'none']
    title: 'Wingman', // the title of this window
    debug: true       // whether or not to display more window information in the console
});

Logging

Wingman has a dedicated logging system, and is fully customizable. Styles for the logger are located within wingman.js.

License

Wingman is licensed under the MIT license.

MIT License

Copyright (c) 2022 nethe550

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
You might also like...

An extension of DOM-testing-library to provide hooks into the shadow dom

Why? Currently, DOM-testing-library does not support checking shadow roots for elements. This can be troublesome when you're looking for something wit

Dec 13, 2022

A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes!

(jQuery) Uniform A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes! Works well with jQuery 1.6+, but we

Jan 2, 2023

The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Nov 15, 2022

A simple To-do app project made using JavaScript ES6 and Webpack - Microverse. You can add, remove, check tasks, and remove all the tasks that were done at the same time. Feel free to see the live version, if you like it please give it a star!

To Do List a to do list javascript app buit using webpack and es6. Built With HTML CSS JavaScript Wepack Live Demo (if available) Live Demo Link Getti

Dec 17, 2022

This repo is a collection of code samples and links to previous twitch live stream sessions. If you have any ideas or suggestions for future episodes, feel free to open an issue.

Talk DEV to me Talk DEV to me is a monthly show on twitch.tv/aws hosted by Tiago Barbosa and Alex Melnyk, where we invite customers, partners, or Amaz

Jan 6, 2023

Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. Get a jumpstart on Remix with this workshop.

πŸ’Ώ Remix Fundamentals Build Better websites with Remix Remix enables you to build fantastic user experiences for the web and feel happy with the code

Dec 25, 2022

Placebo, a beautiful new language agnostic diagnostics printer! It won't solve your problems, but you will feel better about them.

Placebo, a beautiful new language agnostic diagnostics printer! It won't solve your problems, but you will feel better about them.

Placebo A beautiful new language agnostic diagnostics printer! β”Œβ”€[./README.md] β”‚ 1 β”‚ What is Placebo? Β· ───┬──── Β·

Dec 16, 2022

Api for playing around with dummy data. Feel free to use it in your demo projects, tutorials, or testing tasks.

dummy-api Api similar to dummy-api Api for playing around with dummy data. Feel free to use it in your demo projects, tutorials, or testing tasks. All

Jan 7, 2023

πŸ“¦ Writing Express but feel like Spring Boot

Springpress Custom top-level framework of Express.js, especially on TypeScript. Springpress provides expressjs utilities out of the box, lets you deep

Oct 14, 2022
Owner
nethe550
nethe550
Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this workshop, we'll look at some more advanced use cases when building Remix applications.

?? Advanced Remix Workshop Remix enables you to build fantastic user experiences for the web and feel happy with the code that got you there. In this

Frontend Masters 167 Dec 9, 2022
A lightweight (~850 B) library for easy mac/window shortcut notation. kbd-txt convert shortcut text depending on the type of OS (window/linux/mac).

kbd-txt A lightweight (~850 B) library for easy mac/window shortcut notation. kbd-txt convert shortcut text depending on the type of OS (window/linux/

Minung Han 6 Jan 1, 2023
Finer control of the Obsidian sidebars. To be used with an external window manager.

Sidebar Toggler Finer control of the Obsidian sidebars. To be used with an external window manager. What the plugin does It adds four commands for tog

pseudometa 8 Nov 4, 2022
A collection of handmade, professional and dazzling CSS components. ✨

CSS Components Library β€” Endless collection. Made with β™₯ by Eluda for the AWS Amplify hackathon. About the app CSS Components is an online collection

Eluda 1 Oct 1, 2022
A guide for your daily "professional" interactions (not really)

How to professionally say A guide for your daily professional interactions. A simple static website for common phrases we might want to say to your co

Akash Rajpurohit 979 Dec 14, 2022
A professional truffle solidity template with all necessary libraries that support developer to develop, debug, test, deploy solidity smart contract

solidity-truffle-template A professional truffle solidity template with necessary libraries that support to develop, compile, test, deploy, upgrade, v

ChimGoKien 6 Nov 4, 2022
A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW

Fabio Spampinato 9 Sep 17, 2022
A devtool improve your pakage manager use experience no more care about what package manager is this repo use; one line, try all.

pi A devtool improve your pakage manager use experience no more care about what package manager is this repo use; one line, try all. Stargazers over t

tick 11 Nov 1, 2022
Custom Vitest matchers to test the state of the DOM, forked from jest-dom.

vitest-dom Custom Vitest matchers to test the state of the DOM This library is a fork of @testing-library/jest-dom. It shares that library's implement

Chance Strickland 14 Dec 16, 2022