Introduction of Floating Window Library “JSFrame.js”
Tags: javascript, floatingwindow, popup, beginners
Published: 2019-01-19 19:17:55

---
title: Introduction of Floating Window Library “JSFrame.js”
published: true
description: Introduction of Floating Window Library named “JSFrame.js”
tags: JavaScript,floating window, popup, beginners,
cover_image: https://riversun.github.io/jsframe/coverimage.png?
---


Hi there! 
Today I would like to introduce the library "JSFrame.js" I made.
It is an independent and lightweight floating window library for JavaScript.
You can create various floating windows and popup windows like this.And It is licensed under MIT license.

I want to show you this demo first.Please take a look!

https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html

[![ex00](https://riversun.github.io/jsframe/capture/img_01_yosemite.png)](https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html)

Do you like it?
You can create flowting windows easily, if you want.

# What is “JSFrame.js” like?

It is an independent and lightweight multi-window library that do not depend on other libraries for JavaScript.

- You can create various floating windows (called frame) and popup windows.
- You can create a modal window.
- You can create a toast.
- You can create multi-window apps.
- Popup windows and multi-windows covered move, resize, change appearance animation and so on.


# Demo
The library achieves use with floating windows on browser.
https://riversun.github.io/jsframe/examples/v150/preset_yosemite_auto.html
https://riversun.github.io/jsframe/examples/v150/preset_material.html
https://riversun.github.io/jsframe/examples/v150/preset_win10.html
https://riversun.github.io/jsframe/examples/v150/chatbot_ui.html




# How to use/install it

- Using with script tag

```html
<script src="https://riversun.github.io/jsframe/jsframe.js"></script>
```

- Install from npm registry

```shell
npm install jsframe.js
```

# Quick Start

## Create window


Here's basic example of JSFrame.js to show a simple window.

- Call the **JSFrame.create** method with initialization parameter to show a window
- Set html as a content of the window.Content could simply be some text or html.
- **frame.show** to show the window


**Code of Create window**

```js
const jsFrame = new JSFrame();
const frame = jsFrame.create({
    title: 'Window',
    left: 20, top: 20, width: 320, height: 220,
    movable: true,//Enable to be moved by mouse
    resizable: true,//Enable to be resized by mouse
    html: '<div id="my_element" style="padding:10px;font-size:12px;color:darkgray;">Contents of window</div>'
});
//Show the window
frame.show();

```


[DEMO]
https://riversun.github.io/jsframe/examples/v150/simple.html

**Result**

[![ex00](https://riversun.github.io/jsframe/capture/ex00.png)](https://riversun.github.io/jsframe/examples/v150/simple.html)


**Tips**

- You can also get DOM element from contents that you set as html.Call frame.$([selector]).For example, you can get the element which id is 'my_element' by calling frame.$('#my_element')


```js
 frame.$('#my_element').innerHTML = '<span style="color:red">Hello world</span>';
```


## Show specified URL as content of window

- Set **url** to the initialization parameter.
- The window contents will be shown as iframe.
- Set callback function which is called after loading a page as **urlLoaded**

**Code of URL to display in iframe**

```js
const frame01 = jsFrame.create({
    title: 'Window1',
    left: 20, top: 20, width: 320, height: 160,
    url: 'iframe_content01.html',//URL to display in iframe
    //urlLoaded:Callback function called after loading iframe
    urlLoaded: (frame) => {
      //Called when the url finishes loading
    }
});
frame01.show();
```

[DEMO]
https://riversun.github.io/jsframe/examples/v150/iframe.html

**Result**

[![ifrmae](https://riversun.github.io/jsframe/capture/img_03_iframe.png)](https://riversun.github.io/jsframe/examples/v150/iframe.html)

**Tips**
- You can also get DOM element in the page shown as window's content area specified by url(iframe) ,You can call like frame.$('#my_element').


## Show window as a modal window

- Call **frame.showModal** to show the window as a modal window.
- By specifying like **showModal(callbackFunc)** you can receive a callback when the modal window is closed.

**Code of modal window**

```js
 const modalFrame = jsFrame.create({
      name: 'my-modal-window',
      title: 'modal window',
      left: 0, top: 0, width: 320, height: 220,
      html: 'something'
  });

  //Show as a modal window
  modalFrame.showModal(_frame => {
  //Callback when modal window is closed.
  });

```


[DEMO]

https://riversun.github.io/jsframe/examples/v150/modal.html

**Result**

[![modal](https://riversun.github.io/jsframe/capture/img_04_modal.png)](https://riversun.github.io/jsframe/examples/v150/modal.html)


## Styling


- JSFrame.js has the option where you can design the window appearance or apply style to certain elements and then apply styles to them as you want.
- You can specify style from preset or design it yourself.
- Set **appearanceName** to initialization parameter to select the window design called appearance.
- Or if you want to design appearance from scratch, you can set appearance to initialization parameter.

**Code of Styling**

```js
const jSFrame = new JSFrame();

 //Style from preset
 const frame01 = jSFrame.create({
     title: 'Yosemite style',
     left: 20, top: 20, width: 320, height: 220,
     appearanceName: 'yosemite',//Preset name is 'yosemite','redstone','popup'
     style: {
         backgroundColor: 'rgba(220,220,220,0.8)',
     },
     html: '<div style="padding:10px;">Preset is selected by preset name</div>'
 }).show();
```


[DEMO]

https://riversun.github.io/jsframe/examples/v150/styling.html



**Result**

[![styling](https://riversun.github.io/jsframe/capture/img_05_styling.gif)](https://riversun.github.io/jsframe/examples/v150/styling.html)



**Tips**
- Preset name of window title bar

```
     closeButton => Show close button

     minimizeButton => Show minimize button

     maximizeButton => Show maximize button

     zoomButton => Show zoom button
 ```



If you want to hide the window title bar,

**Code of hide the title bar top button**

```js
  frame02.hideFrameComponent('minimizeButton');
```


## Event handling

- You can set an event handler (callback function) for the DOM element in the content specified by **html** or **url**.

- You can also set an event handler for buttons on the title bar.

- Call like frame.on(selector,'click',(_frame,event)=>{}); to set click event handler functions.

**Code of set up event handler**

```js
//Set click handler for DOM element specified as html or url in the initialization parameters.
frame.on('minimizeButton', 'click', (_frame, evt) => {
});

//Event handler for buttons on the title bar.
frame.on('#bt_cancel', 'click', (_frame, evt) => {
});
```


[DEMO]
https://riversun.github.io/jsframe/examples/v150/event_handling.html



**Result**
[![event](https://riversun.github.io/jsframe/capture/img_05_event.png)](https://riversun.github.io/jsframe/examples/v150/event_handling.html
)


## Show toast messages.

- A toast provides simple message about an operation in a small popup. Toasts automatically disappear after the time specified by **duration**.
- Call **JSFrame.showToast** to show a toast.
- You can customize the appearance and something.

**Code of show toast**

```js
const jsFrame = new JSFrame();
  jsFrame.showToast({
      html: 'Default toast'
  });
```


[DEMO]

https://riversun.github.io/jsframe/examples/v150/toast_simple.html

**Result**

[![toast](https://riversun.github.io/jsframe/capture/toastd.gif)](https://riversun.github.io/jsframe/examples/v150/toast.html)


**Tips**

- You can specify the position with **align** like below.

**align:'top'** =>Toast displayed at the top
**align:'center'** =>Toast displayed in the center
**align:'bottom'** =>Toast displayed at the bottom(default)

**Code of Specify the position**

```js
jsFrame.showToast({
    align: 'center', html: 'Toast displayed in the center'
});
```


- Customize toast

You can customize toast as bellows:

**Code of Customize toast**

```js
jsFrame.showToast({
    width: 260,//Width
    height: 100,//Height
    duration: 2000,//Duration(millis)
    align: 'center',// Alignment from 'top'/'center'/'bottom'(default)
    style: {
        borderRadius: '2px',
        backgroundColor: 'rgba(0,124,255,0.8)',
    },
    html: '<span style="color:white;">Custom toast</span>',
    closeButton: true,//Show close button
    closeButtonColor: 'white'//Color of close button
});
```


[![toast](https://riversun.github.io/jsframe/capture/toastc.gif)](https://riversun.github.io/jsframe/examples/v150/toast.html)

[DEMO]
https://riversun.github.io/jsframe/examples/v150/toast.html

# Window operation helper


## Determine position by anchor with **frame#setPosition**
You can specify the position with **frame#setPosition(x,y,anchor)** like below.


**Code of Specify position by anchor**

```js
//Specify a position
const align = 'CENTER_CENTER';//anchor

//(x,y)Specify the center of the screen as a coordinate, set the base point (anchor) to the horizontal vertical center (center_center) of the window
const x = window.innerWidth / 2;
const y = window.innerHeight / 2;
frame0.setPosition(x, y, align);
```


**Types of Anchors**

|Horizontal|Vertical|Value|
|---|---|---|
|Left | Top |'LEFT_TOP'|
|Horizontal center |Top |'CENTER_TOP'|
|Right |Top |'RIGHT_TOP'|
|Left |Vertical center|'LEFT_CENTER'|
|Horizontal center |Vertical center |'CENTER_CENTER'|
|Right |Vertical center  |'RIGHT_CENTER'|
|Left |Bottom  |'LEFT_BOTTOM'|
|Horizontal center |Bottom| 'CENTER_BOTTOM'|
|Right |Bottom| 'RIGHT_BOTTOM'|



## Close window



```js
frame.closeFrame();
```


## Hide Window

```js
frame.hide();
```


## Focus window (and pull up to the front)

- You can pull up window to the top by using **frame#requestFocus**.
- After that,window gets the focus.



```js
frame.requestFocus();
```


## Get window by name
- If you specify **name** in the initialization parameter, you can get the window from the Jsframe object as follows:

```js
 var frame = jsFrame.getWindowByName('my-modal-window');
```



## Frame creation initialization parameters

**Example of initialization parameters**

```js

const frame = jsFrame.create(
{
   name: 'my-window-name',//Window name.Unique name is required.
   title: 'Window0',//Window title
   left: 20,//x coordinate of the upper left corner of the window
   top: 20,//y coordinate of the upper left corner of the window
   width: 320,//width of the window
   height: 220,//height of the window
   minWidth: 160,//The minimum width of the window
   minHeight: 100,//The minimum height of the window
   movable: true,//true:You can move the window with mouse
   resizable: true,//true:You can resize the window with mouse
   appearance: appearanceObj,//Appearance object
   appearanceName: 'yosemite',//Preset name of appearance(Not with 'appearance')
   style: {//Style of the content.Can be specified just like inline style attribute.
       backgroundColor: 'rgba(220,220,220,0.8)',//Ex.Background color of content(Opacity can be specified)
       overflow: 'auto',//Ex.What to do when the drawing extends beyond the content area
   },
   html: 'Contents',//HTML shown in the content(Not with 'url')
   url: 'content01.html',//The URL for contents.To be shown in iframe.
   urlLoaded: (frame) = {}//Callback function when url is finished loading.

});
```


# Summary
                                     
I hope this guide helped you understand how to use JSFrame.js

**About this article**

- I introduced my work floating window library **JSFrame.js**
- You can clone/fork the source code from here: https://github.com/riversun/JSFrame.js
- You can install from npm by "install JSFrame.js".


**History of JSFrame**

- First commit in 2004.
- I used this JSFrame.js in my service around 2006.
  I've tried to update it according to the modern JS style ,but it's basically written in the 200x JS style :)
- Released JSFrame.js as a npm library after adding some functions in 2018.

Thank you.