loading...
Cover image for Introduction of Floating Window Library “JSFrame.js”

Introduction of Floating Window Library “JSFrame.js”

riversun profile image Tom Misawa ・7 min read

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

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

ex00

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

ifrmae

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

modal

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

styling

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
event

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

toast

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

toast

[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

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

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.

Posted on Aug 1 '19 by:

riversun profile

Tom Misawa

@riversun

UX producer and Full-Stack developer with more than 15 years of experience.

Discussion

markdown guide
 

Hi,
It seems to be nice.

I copied/pasted the examples provided... It doesn't work ... Will try to fix it.

Other question, may I run a script (html+js) into a floating window (Thru the .html and/or .url property, I guess), whatever the main window is ?

Thank you from France !

 

Hi,
thanks for your question.

Yes, you can write a script directly to the .html property,
or if there is a script in the page specified by the .url property, you can run it.
Additional questions are also welcome.

 

Thanks a lot, Tom.
Will try a clock/weather project in a jsFrame !

 

Hi,

It's possible that the windows occupy only a certain area and not all body?

For example, I have an admin template with side menu and I want the windows to occupy only the right area of the system.

 

Hi,

Is this what you want to do?

riversun.github.io/JSFrame.js/publ...

Specify the parent element in JSFrame's initialization parameter.
The next step is to specify the parent element's style as "overflow:hidden" to prevent the window from overflowing from that elements.

Then you might be able to do what you want to do.

 

Hi,

Great! I was already going through a parentElement but not the style overflow: hidden.

My parent element does not use the entire window area, there is a sidebar menu with 225px. When maximizing, the window gains all the available width (window.innerWidth), exceeding 225px of the screen (horizontal scroll), so i made a change to the function renderMaximizedMode in WindowEventHelper.js:

if (me.hideFrameBorder) {
    var parentElement = frame.jsFrame.windowManager.parentElement; //Not the best way!!
    if (parentElement ) {
        _toWidth = parentElement.offsetWidth;
        _toHeight = parentElement.offsetHeight + (me.hideTitleBar? from.titleBarHeight: 0);
    }
    else {
        _toWidth = window.innerWidth;
        _toHeight = window.innerHeight + (me.hideTitleBar? from.titleBarHeight: 0);
    }
} else {
    ...
}
 

Hello ive tried it and it works. The thing is i initialize the dialog from your code snippet above. The thing is, when i tried pressing x, it closes but when I click my button again, it doesnt show up. I don't know what I did wrong. I put the frame.show in my onclick function. There is an error showing "cannot read property 'beanList' of null" in my js console when i tried pressing my button again when it doesnt show up. How can i show the dialog everytime i click the button and restricts it when the frame is still up.

 

Which code did you try?
I will check it too.

 

The one that initializes and shows the frame. when you click the button it shows the frame, when you close, it closes. Again, when you click the button, js console pops some errors and the frame doesnt show up again.

 

Hello, i've tried this and it sorta worked. Windows appeared as they should, but if there is an element on page with setted "z-index", then, after dragging any window to the position of this element the window would be covered by element.

I've tried adding a "z-index" to the parentDiv ("jsFrame_fixed_blabla") and voila, it worked, windows would be above any elements with smaller z-index than the parentDiv's one.

 

I like this. Pretty interesting. I want to suggest you make them draggable on phones as well.

 

Yes,
Touch devices are now supported in V1.6.0.
Here's the latest code example.

riversun.github.io/JSFrame.js/public/

 

Hello,
I would like to try integration with a framework, that I build up, but it requires class migration. Is it possible to get the typescript sources?
Thanks.