A simple JavaScript library, to display a window inside of the browser

Overview

WindowJS

WindowJS is a simple JavaScript library, to display a functional window inside of the browser.

Demo: prod.thalmann.it/windowjs/demo.html

Navigation

Installation

  1. Download the .zip-File and put it in your project-folder.

  2. Add this script-tag to the head of the file

<script src="path/to/js/file.js"></script>
  1. Add this link-tag to the head of the file, to include the styles
<link rel="stylesheet" href="path/to/css/file.css" />
  1. Start using the library!

Usage

Create new window

var win = new Window("Awesome title");

NOTE: Don't use window as variable name, because the window object already exists!

Add content to the window

win.content.innerHTML = 'Lorem ipsum dolor sit amet, consectetur ...';

Documentation

Window

It's the main object to display the window

Instanciating

new Window(title, options);
  • title (String): This string is used as the title of the window
  • options (object): A object with options for the window (see below) (optional)

After instanciating the window is reloaded and shown (if not defined otherwise)

Methods

win.reload();                        // Renders the window (you don't have to use this)

win.setTitle(title);                 // Resets the title (string)
win.getTitle();                      // Returns the current title

win.getContainer();                  // Returns the container of the window

win.changeOption(option, value);     // Changes one option (string, object)
win.getOptions();                    // Returns the options

win.changeState(state);              // Sets the current state of the window: NORMAL / MAXIMIZED  (WindowState)
win.getState();                      // Returns the current state of the window

win.changeWindowState(window_state); // Sets the current window state: SHOWN / MINIMIZED / HIDDEN (WindowState)
win.getWindowState();                // Returns the current window state

win.normalSize();                    // Normal-Sizes the window
win.isNormalSized();                 // Returns true, if the window is normal-sized, otherwise false
win.maximize();                      // Maximizes the window
win.isMaximized();                   // Returns true, if the window is maximized, otherwise false
win.toggleMaximize();                // Toggles between normal size and maximized

win.show();                          // Shows the window
win.isShown();                       // Returns true, if the window is shown, otherwise false
win.minimize();                      // Minimizes the window
win.isMinimized();                   // Returns true, if the window is minimized, otherwise false
win.hide();                          // Hides the window
win.isHidden();                      // Returns true, if the window is hidden, otherwise false
win.isVisible();                     // Returns true, if the window is not minimized and not hidden, otherwise false
win.isSelected();                    // Returns true, if the window is selected

win.getSize();                       // Returns the size of the window in pixels
win.getPosition();                   // Returns the offset position of the top left corner to the parent element

win.on(event, callback);             // Sets the eventlistener of the event, if the callback is specified;
                                     // if only the event is set, it returns the callback-function; if that is not
                                     // set, it returns a empty function (string, function)
win.removeOn(event);                 // Removes the eventlistener for the event, if set

win.reset();                         // Resets the appearence of the window (shows it and sets its size to normal)
win.close();                         // Closes the window (and disposes it, if not defined otherwise)
win.dispose();                       // Disposes the window, meaning it is removed from the dom (can be re-created
                                     // with win.reload())

Variables

Window.count                         // static integer, that contains the number of instanciated windows so far

Window.DISPOSE_ON_CLOSE              // static variable, to set the close action (disposes the window)
Window.HIDE_ON_CLOSE                 // static variable, to set the close action (only hides the window)
Window.DO_NOTHING_ON_CLOSE           // static variable, to set the close action (doesn't hide the window)

Window.DOUBLE_CLICK_DELAY            // static int, that determins how many ms the user have for the double
                                     // click (default: 300)

win.content                          // DOM-Object, that represents the content of the window (edit this!)

WindowState

A collection of states, a window can have. Can't be instanciated.

Variables

WindowState.NORMAL
WindowState.MAXIMIZED
WindowState.MINIMIZED
WindowState.SHOWN
WindowState.HIDDE

WindowUtil

A collection of methods. Can't be instanciated.

Methods

WindowUtil.getProperty(opt, o, def); // Returns the value of 'o' in the array/object opt, if it is set;
                                     // else it returns def (object, string, object)

Events

It is possible to attach a event to a window: window.on(event, callback);

Event Callback-Parameter(s) Definition
change_title {old_title, new_title} Is triggered, when the title is changed
reload - Is triggered, when the reload function is invoked
resize_start e[MouseDownEvent] Is triggered, when one resize-handle is clicked
resize_stop e[MouseUpEvent] Is triggered, when the resize-handle is released
resize e[MouseMoveEvent] Is triggered, when the window is resized
move_start e[MouseDownEvent] Is triggered, when the top bar is clicked once
move_stop e[MouseUpEvent] Is triggered, when the top bar is released
move e[MouseMoveEvent] Is triggered, when the window is moved
change_state {old_state, new_state} Is triggered, when the state is changed
change_window_state {old_window_state, new_window_state} Is triggered, when the window state is changed
update_size {old_size, new_size} Is triggered, when the window size changes
update_selected - Is triggered, when the window selection changes
select - Is triggered, when the window is selected
deselect - Is triggered, when the window is deselected
minimize - Is triggered, when the window is minimized
normalSize - Is triggered, when the window is normal-sized
maximize - Is triggered, when the window is maximized
hide - Is triggered, when the window is hidden
show - Is triggered, when the window is shown
update_position {old_position, new_position} Is triggered, when the window position changes
reset - Is triggered, when the reset function is invoked
closing - Is triggered, before the window is closed; if the callback return false, the window is not closed
closed - Is triggered, when the window is closed
disposing - Is triggered, before the window is disposing; if the callback return false, the window is not disposed
disposed - Is triggered, when the window is disposed
init - Is triggered, when the window is initialized for the first time
maximizing - Is triggered, before the window is maximized; if the callback returns false, the window is not maximized
minimizing - Is triggered, before the window is minimized; if the callback return false, the window is not minimized

Options

Option Values Definition
icon [string] Sets the icon of the window (top-left)
minimize_icon [string] Sets the minimize icon
maximize_icon [string] Sets the icon, that is displayed, when the window is not maximized
normalsize_icon [string] Sets the icon, that is displayed, when the window is maximized
close_icon [string] Sets the close icon
size {width: [int], height: [int]} Sets the size of the window (def: {width: 200, height: 150})
position {x: [int], y: [int]} Sets the position, relative to the parent (def: center of the parent)
selected true/false Defines, whether it is selected or not (styled differently) (def: false)
min_size {width: [int], height: [int]} Sets the minimum size, the window can have (def: {width: 200, height: 150})
max_size {width: [int], height: [int]} Sets the maximum size, the window can have (def: {})
events {[string]: [function], [...]} Sets the events for the window (if a event is set before, it gets overwritten)
bar_visible true/false Defines, whether the top bar (with title, ...) is visible or not (def: true)
resizable true/false Defines, whether the window is resizable or not (def: true)
movable true/false Defines, whether the window is movable or not (def: true)
maximizable true/false Defines, whether the window is maximizable or not (def: true)
minimizable true/false Defines, whether the window is minimizable or not (def: true)
always_on_top true/false Sets, if the window is always in front of the other windows (def: false)
container [DOM-Object] If this is set, the parent of the window is set to that (def: document.body)
window_state [WindowState] Sets the state of the window: SHOWN, MINIMIZED, HIDDEN (def: SHOWN)
close_action Window.DISPOSE_ON_CLOSE Window.HIDE_ON_CLOSE Window.DO_NOTHING_ON_CLOSE Defines, what happens, when the window is beeing closed (def: Window.DISPOSE_ON_CLOSE)

Example

Code:

var win = new Window("Title", {
  state: WindowState.NORMAL,
  size: {
    width: 500,
    height: 250
  },
  selected: true,
});
win.content.style.padding = "5px";
win.content.style.textAlign = "justify";
win.content.innerHTML = 'Lorem ipsum dolor sit amet, [...]';

Output:

windowJs example

Comments
  • Bringing windows to top

    Bringing windows to top

    Great component, thanks.

    When I have multiple windows/dialogs I'd like the one I click on to become 'selected' and come to the front with 'always_on_top', so I developed this

    function gotop(win) {
        console.log('gotop', win)
        // Logic for switching window and bringing the clicked on window to the front
        // loop through all wins and set false, except for this one
        wins.forEach(function (w) {
            if (w == win) {
                win.changeOption('always_on_top', true);
                win.changeOption('selected', true);
            }
            else {
                w.changeOption('always_on_top', false);
                w.changeOption('selected', false);
            }
        })
    
    }
    
    

    I keep the windows in an array wins.

    let wins = []
    const win = new Window("Untitled", { ...
    wins.push(win)
    

    Whilst the gotop function works in bringing the clicked on window to the front, the ordering of the remaining windows is not always intuitive. Other background windows may randomly switch z-order position, leading to slight user confusion.

    Any thoughts on how I can bring the clicked on window to the front and keep the remaining other windows in their current z-order?

    bug enhancement 
    opened by abulka 4
  • Setting initial window position no longer works

    Setting initial window position no longer works

    A couple of bugs re window positioning seem to have been introduced recently.

    Centering a window by omitting position option no longer works

    Setting the window position to be the center of the screen, by omitting the position option no longer works after 19b62de3c50b47b8e99c3b11faf47048651b8b55

    if(typeof options.position !== "object"){
      options.position = {
        x: 0,
        y: 0
      };
    }
    

    The above code breaks the initial nice, centering of a window, when you don't specify an initial position. All such windows end up at 0,0 rather than in the center of the screen. The useful windowjs code

    options.position = { x: (parent.offsetWidth / 2 - container.offsetWidth / 2), y: (parent.offsetHeight / 2 - container.offsetHeight / 2) };
    

    is thus wasted.

    Setting the initial window position is broken

    Setting the initial window position e.g.

    new Window("Title", {
        state: WindowState.NORMAL,
        size: {
            width: 500,
            height: 250
        },
        position : {x: 20, y: 20},
       ...
    })
    

    is broken after f417b38bec7cf67f1836a44ff83cabbfe29ed78c and no longer works - every window appears at 0,0 due to the introduction of this code:

    if(typeof options.position.x !== "object"){
      options.position.x = 0;
    }
    if(typeof options.position.y !== "object"){
      options.position.y = 0;
    }
    

    The above code expects position to be an object (fair enough) and also wants the x and y values to be objects too? - which isn't right. x and y are actually numbers e.g. position : {x: 20, y: 20}. Perhaps the code should be checking for type "number", though if the user hasn't specified position as an option this code will break, so the two matters raised in this GitHub issue are related.

    The windowjs library seems to work better without these two changes!

    bug 
    opened by abulka 1
  • Resize cursor appears outside of bounds of window

    Resize cursor appears outside of bounds of window

    Sorry to raise another issue...

    The resize cursor appears outside of the bounds of window e.g.

    Screen Shot 2021-02-26 at 10 53 35 am

    This is non standard UI design and confuses users who are trying to resize windowjs windows.

    More seriously it can cause the mousemove and other events to be sent to html elements outside the window. This sometimes causes weird unwanted interactions. For example the resizing of a window sometimes breaks where the window is stuck in resize mode even though the cursor is free of the window edge area and interacting with other components. Very hard to get out of this situation.

    bug 
    opened by abulka 1
  • Crash when not enough room to render a window

    Crash when not enough room to render a window

    I get a crash at options.position.y = 0; when there is not enough room to render a window e.g. when I have the Chrome debugging console visible, taking up screen space.

    window.js:696 Uncaught TypeError: Cannot set property 'y' of undefined
        at updateSize (window.js:696)
        at Window.reload (window.js:238)
        at new Window (window.js:1045)
        ...
    

    Interestingly this is the same error you get if you forget to set the CSS with

    html, 
    body {
        height: 100%;
    }
    

    I'm reporting this just in case others run into this - I spent hours trying to figure out what was going on using the Chrome developer tools when in fact the developer tools themselves were causing the problem! Perhaps a more helpful message could be emitted to the console, like 'Not enough space to draw window'?

    bug 
    opened by abulka 1
  • Add and changes

    Add and changes

    454/5000 Hello What a good program you have done. I congratulate you. I would like to ask you if you can expand some features. as they are:

    • Make the focus activate when there are more forms.
    • Make a list of forms
    • Have access to controls from events
    • show the minimized forms on the screen as does the windows. With my little knowledge of JS I have done some of these things but I would like them to be part of the code. Thank you. Cesar
    opened by cesarpe 1
Releases(v1.0)
Owner
Matthias Thalmann
Webdev & IT Student @ University of Innsbruck 🇦🇹
Matthias Thalmann
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
A public board for all the Computer Society and Students to display their profile. An online year-book for you to display your profile in the most creative manner

Student's Yearbook by IEEE Computer Society Student's yearbook is an open-source project which intends to dispaly the students who will be graduating

IEEE Computer Society 11 Dec 18, 2022
A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snippets.

Warm Up ?? ??‍?? A VS Code extension to practice and improve your typing speed right inside your code editor. Practice with simple words or code snipp

Arhun Saday 34 Dec 12, 2022
Tools for Dump NUXT JS Environment Config Through Browser Window Object

Introduction Nuxt JS is an open source javascript framework making web development simple and powerful. This tool is used to get environment configura

Agus Setya R 7 Sep 5, 2022
This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

This tool uses native browser APIs to take screenshots of a given web page, tab, window, or the user's entire screen.

xataio 761 Jan 1, 2023
Open a new Arc browser window for a specific workspace.

Alfred "New Arc Window" Workflow (naw) Open a new Arc browser window on a specific space. Demo: https://youtu.be/IKz3Sl9Hcn8. Get it on Packal Or down

Pokai Chang 7 Dec 1, 2022
A simple cmatrix-like terminal decoration written in JavaScript that supports window resizing.

jsmatrix A simple cmatrix-like terminal decoration written in JavaScript that supports window resizing. Getting Started Dependencies NodeJS Any termin

Fülöp Tibor 7 Mar 27, 2022
Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!

Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!

Rani 15 Dec 26, 2022
A small CLI utility to configure Japa inside an existing Node.js project

A small CLI utility to configure Japa inside an existing Node.js project

Japa.dev 5 Mar 11, 2022
Inside-out promise; lets you call resolve and reject from outside the Promise constructor function.

Inside-out promise; lets you call resolve and reject from outside the Promise constructor function.

Lily Scott 3 Feb 28, 2022
Clojure inside your Obsidian documents!

Obsidian Wielder Clojure inside your Obsidian documents! This Obsidian plugin allows you to use the full power of Clojure directly inside of your docu

Victor Bjelkholm 53 Dec 18, 2022
A plugin for Obsidian that can create input fields inside your notes and bind them to metadata fields.

Obsidian Meta Bind Plugin This plugin can create input fields inside your notes and bind them to metadata fields. New docs I am currently working on n

Moritz Jung 57 Jan 4, 2023
Pack all your node_modules and other files you want inside your project to a zip file.

?? Node Modules Packer Use Cases | Usage | Examples | Headless | Benchmarks | Reference This is a library to package all your node_modules and other f

Vinicius Lourenço 14 Dec 1, 2022
Wrap a function with bun-livereload to automatically reload any imports inside the function the next time it is called

bun-livereload Wrap a function with bun-livereload to automatically reload any imports inside the function the next time it is called. import liveRelo

Jarred Sumner 19 Dec 19, 2022
Multithread emulator. The wrun allows you to dynamically run a function inside a Web Worker on the client side, without the needing of a dedicated file

wrun This lib allows you to dynamically run a function inside a Web Worker on the client side, without the needing of a dedicated file. This means tha

Felippe Regazio 9 Nov 5, 2022
A simple JS example for NextAuth Google login with a popup window instead of redirect.

A simple JS example for NextAuth Google login with a popup window instead of redirect.

null 13 Dec 7, 2022
An accessible dialog window library for all humans.

Version 0.4.4 Requires jQuery 1.11.2 or higher (v2 not tested, v3 works but not extensively stress tested). Built by Humaan Modaal Modaal is a WCAG 2.

Humaan 2.7k Dec 26, 2022
A cross-platform browser extension that changes the way seasons are display on Crunchyroll.

Crunchyroll With Better Seasons Crunchyroll With Better Seasons is a cross-platform browser extension that changes the way seasons are displayed on Cr

null 9 Nov 4, 2022
Colorconsole provides an interesting way to display colored info, success, warning and error messages on the developer console in your browser

ColorConsole NPM Package Colorconsole provides an interesting way to display colored info, success, warning and error messages on the developer consol

Hasin Hayder 17 Sep 19, 2022