Skip to content
A simple JavaScript library, to display a window inside of the browser
JavaScript CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
LICENSE
README.md
_config.yml
window.css
window.js
window.min.css
window.min.js

README.md

WindowJS

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

Demo: https://m.thalmann.bz.it/prod/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.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

You can’t perform that action at this time.