Overview

What is 'JsFrame.js' like?

It is an independent and lightweight multi-window library for javascript.

• You can create various floating windows (called frame) and popup windows.
• You can create multi-window apps.
• You can create a modal window.
• You can create a toast.

It is licensed under MIT license.

Resources

• Examples

Installing

using npm

npm install jsframe.js --save

Import JSFrame on Node.js based environment.

ES6

import { JSFrame } from 'jsframe.js';

common-js

const { JSFrame } = require('jsframe.js');

using with script tag

<script src="https://cdn.jsdelivr.net/npm/jsframe.js/lib/jsframe.min.js"></script>

Quick Start

Create window

Here's is 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

const jsFrame = new JSFrame();
//Create window
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>'
});

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

Tips

• Get DOM element from contents:

frame.$([selector])

• Get the element which id is 'my_element'

const ele = frame.$('#my_element')

• Set window position

frame.setPosition(x,y,[anchor]);

If you specify an anchor, the location of the anchor will be the specified x,y coordinate.

Anchor values 'LEFT_TOP','CENTER_TOP','RIGHT_TOP','LEFT_CENTER','CENTER_CENTER','RIGHT_CENTER','LEFT_BOTTOM','CENTER_BOTTOM','RIGHT_BOTTOM'

• Set window content

frame.setHTML(`<div>Your content</div>`);

• Want to specify individual windows You can give the window a unique window name.

const windowName='my-example-window';
frame.setName(windowName);

and you can get the window by windowName

const windowName='my-example-window';
const frame=jsFrame.getWindowByName(windowName);

• Want to check if a window already exists

You can use it in the following cases. Show window if it exists, create new window if window is closed

const windowName='my-example-window';
const windowExists=jsFrame.containsWindowName(windowName);

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

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

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.

const modalFrame = jsFrame.create({
      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

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.

Style from preset

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

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

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.

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

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

DEMO
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.

Simple toast

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

Specify the position

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

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)

Customize toast

jsFrame.showToast(
    {
        width: 260,
        height: 100,
        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

Settings for preset 'material'

You can use font-awesome for titlebar icons.

For material, describe the settings using appearanceParam as below.

{
name: `Win2`,
title: `Material style`,
left: 360, top: 40, width: 320, height: 220, minWidth: 200, minHeight: 110,
appearanceName: 'material',
appearanceParam: {
    border: {
        shadow: '2px 2px 10px  rgba(0, 0, 0, 0.5)',
        width: 0,
        radius: 6,
    },
    titleBar: {
        color: 'white',
        background: '#4784d4',
        leftMargin: 40,
        height: 30,
        fontSize: 14,
        buttonWidth: 36,
        buttonHeight: 16,
        buttonColor: 'white',
        buttons: [ // buttons on the right
            {
		//Set font-awesome fonts(https://fontawesome.com/icons?d=gallery&m=free)
                fa: 'fas fa-times',//code of font-awesome
                name: 'closeButton',
                visible: true // visibility when window is created.
            },
            {
                fa: 'fas fa-expand-arrows-alt',
                name: 'maximizeButton',
                visible: true
            },
            {
                fa: 'fas fa-compress-arrows-alt',
                name: 'minimizedButton',
                visible: false
            },
        ],
        buttonsOnLeft: [ //buttons on the left
            {
                //Set font-awesome fonts(https://fontawesome.com/icons?d=gallery&m=free)
                fa: 'fas fa-bars',
                name: 'menu',
                visible: true,
                //html to show when this button is clicked.
                childMenuHTML: '<div class="list-group">' +
                    '  <div name="menu1" class="list-group-item list-group-item-action py-2">Menu Item 01</div>' +
                    '  <div name="menu2" class="list-group-item list-group-item-action py-2">Menu Item 02</div>' +
                    '  <div name="menu3" class="list-group-item list-group-item-action py-2">Menu Item 03</div>' +
                    '</div>',
                childMenuWidth: 300
            },
        ],
    },
},
style: {
    backgroundColor: 'rgba(0,0,0,0.8)',
    overflow: 'hidden',
    width: '100%',
},

html: 'something'
}

Window operation

Close window

frame.closeFrame();

Hide Window

frame.hide();

Focus window (and pull up to the front)

frame.requestFocus();

Get window by name

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

Window operation helper

Setting frame#setControl enables the mode to automatically change the window size when the button on the title bar is pressed.

frame.setControl({
        maximizeButton: 'maximizeButton',//Name of the button on framecomponent to maximize when pressed.
        demaximizeButton: 'restoreButton',//Name of the button on framecomponent to de-maximize when pressed.
        maximizeWithoutTitleBar: true,//If true,hide the title bar and maximize the content part.
        restoreKey: 'Escape',//If maximizeWithoutTitleBar is true,de-maximize the window when the key specified here is pushed.
        minimizeButton: 'minimizeButton',//Name of the button on framecomponent to minimize when pressed.
        deminimizeButton: 'deminimizeButton',//Name of the button on framecomponent to de-minimize when pressed.
        hideButton: 'closeButton',//Name of the button on framecomponent to hide when pressed.
        animation: true,//If true,execute animation during window size changing
        animationDuration: 150,//Duration of animation
    });

DEMO https://riversun.github.io/jsframe/examples/v150/window_control.html

Handling events for window operation events.

frame.control.on('maximized', (frame, info) => {
           jsFrame.showToast({
               text: 'Press "ESC" to minimize.', align: 'center'
           });
       });

Do sizing operation manually

You can write window size operation manually like below

        frame.on('maximizeButton', 'click', (_frame, evt) => {

            _frame.control.doMaximize({
                hideTitleBar: false,
                duration: 200,
                restoreKey: 'Escape',
                restoreDuration: 100,
                callback: (frame, info) => {
                    frame.requestFocus();
                },
                restoreCallback: (frame, info) => {
                    jsFrame.showToast({
                        text: frame.getName() + ' ' + info.eventType
                    });
                },
            });
        });

JSFrame initialization parameters

this.jsFrame = new JSFrame({
    fixed:true,//(Default)If true, it will be fixed to the screen even if the contents (background) scrolls.
    parentElement:document.body,//Set element to attach jsFrame.
    horizontalAlign: 'right',// If 'right' is set, the anchor is set at the right edge.If you specify the position of frame with 'left' in this mode, Make the value negative.Default is 'left'
    verticalAlign: 'bottom',//If 'bottom' is set, the anchor is set at the bottom edge.Default is 'bottom'
});

Frame creation 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.

    });

using npm module with webpack

After install jsframe.js , you can use it like below.

import {JSFrame} from 'jsframe';

You can add an alias in your webpack config like this:

module.exports = {
    ...
    resolve: {
        alias: {
            'jsframe': 'jsframe.js/dist/jsframe.min.js',
        }
    },
    ...
};

Examples

All examples are included in the project. You can modify,customize example after cloning the project

git clone https://github.com/riversun/JSFrame.js.git

Classese and Methods/Members

org.riversun.JSFrame class

JSFrame is a frame builder and management class.

|Methods|Details| |---|---| |CIfFrame createFrame(left, top, width, height, CFrameAppearance)|create CIFFrame instance.CIfFrame is a kind of 'window' called frame.| |CFrameAppearance createFrameAppearance()|create CFrameAppearance instance.CFrameAppearance is a class for frame appearance.You can modify frame's looking as you like.|

CIfFrame class

CIfFrame is like a window.It's draggable and movable.You can design it.

|Methods|Details| |---|---| |CIfFrame setTitle(str)|Set caption in the title bar|
|CIfFrame setResizable(boolean)|Set whether the window can be resized|
|CIfFrame setMovable(boolean)|Set whether the window can be moved| |CIfFrame setTitleBarClassName(classNameForDefault, classNameForFocused)|Set title bar style class name| |Object getFrameView()|Get window content element.It's just a 'div' element.So you can handle it as a 'div' element.ex)frame.getFrameView().innerHTML='xxxx';| |Promise setUrl(url)|Open a page specified as url in the IFrame mode.It returns Promise.If you want to execute something at the timing of opening url,use 'then' .ex)frame.setUrl('http://something').then(function(){frame.show();});| |CIfFrame show()|Show frame| |CIfFrame requestFocus()|Requests that this frame gets the focus.Focus and the window comes to the forefront| |CIfFrame setSize(width,height)|set size of frame| |CIfFrame setPosition(x,y,anchor)|anchor is optional.Default anchor is 'LEFT_TOP'You can set followings for anchor.'LEFT_TOP','CENTER_TOP','RIGHT_TOP','LEFT_CENTER','CENTER_CENTER','RIGHT_CENTER','LEFT_BOTTOM','CENTER_BOTTOM','RIGHT_BOTTOM'|

CFrameAppearance class

CFrameAppearance is a class for frame appearance.You can modify frame's looking as you like.

|Methods|Details| |---|---| |CFrameAppearance setUseIFrame(boolean)|If 'true' ,You can set CIfFrame 'IFrame mode' and you can use CIfFrame#setUrl method for opening specified url.| |void onInitialize()|Since this callback method is called at frame initialization,Initialization processing such as adding frameComponent should be written here.|

|Members|Details| |---|---| |showTitleBar|true or false| |showCloseButton|true or false| |titleBarCaptionFontSize|ex)'12px'| |titleBarCaptionFontWeight|ex)'bold'| |titleBarHeight|ex)'24px'| |titleBarCaptionLeftMargin|ex)'10px'| |titleBarColorDefault|Color for not focused state.ex)'#dddddd'| |titleBarColorFocused|Color for focused state.ex)'white'| |titleBarCaptionColorDefault|Color for not focused state.ex)'black'| |titleBarCaptionColorFocused|Color for focused state.ex)'red'| |titleBarBorderBottomDefault|Style for bottom of the title bar.ex)'1px solid rgba(0,0,0,0.2)'| |titleBarBorderBottomFocused|If null,'titleBarBorderBottomDefault' will be applied.| |frameBorderRadius|Corner radius of the window.ex)'6px'| |frameBorderWidthDefault|Width of border line in the not focused state.ex)'1px'| |frameBorderWidthFocused|Width of border line in the focused state.ex)'1px'| |frameBorderColorDefault|Color of border line in the not focused state.ex)'rgba(1, 1, 1, 0.2)'| |frameBorderColorFocused|Color of border line in the focused state.ex)'rgba(1, 1, 1, 0.2)'| |frameBorderStyle|Border line styleex)solid| |frameBoxShadow|Shadow style of the frameex) '5px 5px 10px rgba(0, 0, 0, 0.3)'| |frameBackgroundColor|Background color of the frameex)'white'|

V1.00 Examples (available for latest version)

Example:Basic

DEMO
https://riversun.github.io/jsframe/examples/ex01/index.html

Example:Window with Iframe contents

DEMO
https://riversun.github.io/jsframe/examples/ex02/index.html

Example:OS X style

DEMO
https://riversun.github.io/jsframe/examples/ex03/index.html

Example:Win style

DEMO
https://riversun.github.io/jsframe/examples/ex04/index.html

Example:Various styles

DEMO
https://riversun.github.io/jsframe/examples/ex05/index.html

Example:Animations #1

DEMO
https://riversun.github.io/jsframe/examples/ex06/index.html

All assets moved from mysvn