• Stars
    star
    147
  • Rank 249,876 (Top 5 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

An independent lightweight multi-window library for javascript.

Overview

npm version License: MIT

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

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

ex00

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

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

ifrmae

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

styling

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

styling

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

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

toast

Settings for preset 'material'

You can use font-awesome for titlebar icons.

toast

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'
           });
       });
EventTypeDescription
maximizedCalled when maximazation is finished.
demaximizedCalled when de-maximazation is finished.
minimizedCalled when minimization is finished.
deminimizedCalled when de-minimization is finished.
hidCalled when hiding is finished.
dehidedCalled when de-hiding is finished.

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 style
ex)solid
frameBoxShadow Shadow style of the frame
ex) '5px 5px 10px rgba(0, 0, 0, 0.3)'
frameBackgroundColor Background color of the frame
ex)'white'

V1.00 Examples (available for latest version)

Example:Basic

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

ex00

Example:Window with Iframe contents

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

ex00

Example:OS X style

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

ex00

Example:Win style

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

ex00

Example:Various styles

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

ex00

Example:Animations #1

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

ex00

All assets moved from mysvn

More Repositories

1

chatux

Chat Bot UI / Conversational UI library for Java Script
JavaScript
63
star
2

making-library-with-webpack

How to build a library that supports both browser and Node.js using webpack4 and ES6
JavaScript
36
star
3

java-firebase-fcm-client

Server side java client for firebase cloud messaging api
Java
20
star
4

okhttp3-cookie-helper

Library for Handling Cookie for OkHttp3
Java
18
star
5

chatux-examples-ja

chatuxのサンプル集(日本語版)
JavaScript
18
star
6

xml-beautify

XML pretty formatter for JS
JavaScript
17
star
7

simple-date-format

Simple Date Formater for JavaScript. It allows for formatting date → text .
JavaScript
15
star
8

slacklet

Java library for slack realtime messaging api
Java
13
star
9

java-promise

Promise library for java.You can do the same thing with JavaScript's Promise in java! Concurrent library.
Java
13
star
10

es6hello

modern js frontend development example
JavaScript
11
star
11

bigdoc

This library allows you to handle gigabyte order huge files easily with high performance. You can search bytes or words / read data/text from huge files.
Java
11
star
12

android-firebase-fcm-client

Receive push notification from firebase without showing notification tray even if App is background
Java
10
star
13

ajax-client

A simple ajax client with jQuery like ajax API for javascript
JavaScript
9
star
14

webpack-dev-server-on-express

How to run webpack-dev-server on express.Auto reloading (live reload) using webpack-dev-middleware and webpack-hot-middleware.
JavaScript
8
star
15

finbin

Java lib for searching byte[] data from big byte[]
Java
7
star
16

sortable-table

Make HTML table sortable without any dependency. Create a table that can sort data by setting data in an existing table. It is not dependent on any particular framework.
JavaScript
7
star
17

watson-assistant-for-java

Java client for Watson Assistant
Java
7
star
18

google-oauth2-client-servlet

servlet support lib for Google OAuth2/OpenId connect.
Java
5
star
19

java-promise-examples

Java
5
star
20

JavaCommentTranslator

[Java]Translate Java source code comment/JavaDoc comment into any language
Java
5
star
21

webcam.js

JavaScript
4
star
22

LLPAD

A text file viewer for very very big size text file. Easy to open a file bigger than 50GB.
Java
4
star
23

aws_lambda_example_basic_client

Java client example for AWS Lambda
Java
3
star
24

slacklet-examples

Slackletを使ったSlack Botのサンプル集
Java
3
star
25

chatux-server-rwkv

Python
3
star
26

java-builder-patterns

Introduce some builder patterns for Java and source code generator.
Java
3
star
27

font-awesome5-js-example

Examples for importing font awesome 5
JavaScript
3
star
28

watson-java-slackbot

Slack Bot with Watson Conversation
Java
3
star
29

java-webapp-foundation

Java servlet/jsp based micro web application example
Java
2
star
30

lowpassf

Simple Lowpass Filter(Simple Moving Average/Linear Weight) for JavaScript
JavaScript
2
star
31

bing-image-search-client-for-java

Java client for Bing Image Search API
Java
2
star
32

chatux-example

chat server for chatux library example
JavaScript
2
star
33

line-bot-servlet-examples

Java
2
star
34

flexmark-ext-prism-linenumber

prism syntax highlighter's line number extension for flexmark-java
Java
2
star
35

jetty-sse-helper

Java
2
star
36

jetty9-quick-start

Java
2
star
37

file-choice

'file-choice' enables file drag & drop function for an element with 'fc-drop-area' specified as CSS class name.
JavaScript
1
star
38

watson-conversation-java-examples

Java
1
star
39

xml2node

JavaScript Simple XML parser
JavaScript
1
star
40

es6_babel7_jest

Example of Jest with babel7
JavaScript
1
star
41

event-listener-helper

Library for strictly managing the addition and deletion of event listeners
JavaScript
1
star
42

java-builder-pattern-source-generator

Java
1
star
43

chatux-server-dolly

chatux's chat server for dolly
Python
1
star
44

jetty-basic-auth-helper

Basic authentication helper library for jetty9
Java
1
star
45

google-login-servlet-example-on-jetty

Servlet example of login with Google (OAuth2 / OpenId connect) on jetty.
Java
1
star
46

string-grabber

Java lib for manipulating String object easily and quickly
Java
1
star
47

jetty-basic-auth-helper-examples

Examples for jetty9 basic authentication
Java
1
star