toolwindow
v1.0.25
Published
Provides a draggable, resizable tool window for text, html and remote (iframed) content
Downloads
10
Maintainers
Readme
ToolWindow
Provides a mechanism for tool windows in the browser. Tool windows are dialogs which are:
- non-modal
- resizable
- mobile
- closeable
- display content to the user
- have one or more actions the user may perform via buttons in a button bar
Right now, this project needs some documentation. And much refactoring, since the code
originally came from an upstream author with a singular intent (see credits). See the
demo/index.html
file for some in-browser usage.
Usage
Use this as a node module via require
or use this as a standalone javascript file
by grabbing the toolwindow.js from dist
. The provided toolwindow.css
mimicks the
styling of a Windows 10 window. If you'd like something else, feel free to use that
as a template (:
The code:
ToolWindows are re-usable and will thus "remember" their position if closed and re-opened. To create a new ToolWindow, simply do something like:
var toolWindow = new ToolWindow({
top: 120,
left: 120, // optional: when no top or left are given, this window attempts to center itself
width: 200, // starting width
height: 250, // starting height
minWidth: 150, // don't go thinner than this
minHeight: 200, // don't go shorter than this
closeButtonText: "\u2716", // ✖
placement: "inside,auto",
relativeToElement: "#container",
animated: true,
animationTime: 1000,
content: {
// simple text content -- you can also use "html" or "url" (more on that later)
type: "text",
value: "Hello World!"
},
title: "Demo window", // goes in the title bar,
buttons: [{
text: "Dismiss",
clicked: function() {
// button click handlers are invoked with the toolwindow as the `this` parameter
this.hide();
}
}, {
text: "Refresh",
clicked: function() {
// note that we can completely replace the content
// here and that content.value can be any one of:
// - string
// - function producing a string
// - async function producing a string (ie, promise)
this.title = 'New title of demo window';
this.content = {
type: "html",
value: "<hr/>This is html<hr/>"
};
// optionally fit to content
//this.fitContent();
this.refresh();
}
}]
});
- By default, if you do not specify any buttons, you will get a "Close" button, which, like the [X] in the titlebar of the window, will close it.
- If you specifically want no buttons, pass an empty array as the buttons and the button bar will be left out too
- possible types for content are:
- text (plain text)
- html (rendered html)
- url (embed an iframe with this url)
- use the node module if you have a build system, or use toolwindow.min.js from
the
dist
folder if you'd just like a globalToolWindow
prototype.
Why?
Because I need it for a client and I figure:
- it might be useful elsewhere
- it might be useful to someone else
- it originated in freely available code (though much has changed) so I wanted to give back
- for interest' sake, I would like to extend it beyond the minimal requirements and maintain it too
It doesn't work or looks wonky
- have you included
toolwindow.css
in your site (or imported into sass)? - if you're getting errors, I'd like to know about them (:
Ew, it looks like Windows 10
Ok, so you're not a windows-lover. It is the most common OS out there though,
so if I'm going to make a base style, it makes sense. Still, toolwindow.css
is fairly simple to work with -- I'm quite sure one could create a theme more
like the hosting system or one's favorite OS / window manager.
Tests:
Visual only. Contributions welcome.
Credits
Originally forked from https://github.com/ZulNs/Draggable-Resizable-Dialog, which is licensed under the MIT license (see LICENSE.upstream). Original credit is due.
This project is relicensed, as per the MIT allowance, under the BSD 3-clause license