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

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

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

• Install from npm registry

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

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

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')

 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

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

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

 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

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

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

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

  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

//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

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

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

[DEMO]

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

Result

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

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

• Customize toast

You can customize toast as bellows:

Code of Customize toast

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
});

[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

//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

Close window

frame.closeFrame();

Hide Window

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.

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:

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

Frame creation initialization parameters

Example of initialization parameters

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.