npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zedvision/jsframe

v10.12.38

Published

It is an independent lightweight multi-window library for javascript. - Create various popup windows. - Styling the appearance flexibly.

Downloads

7

Readme

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

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

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