@d3x0r/popups v1.0.110

popups

HTML Quick Popup dialog library

Usage

import {popups,Popup} from "popups.mjs";

var popup = popups.create( "caption" );

// show a dialog
popup.show();

// hide a ialog
popup.hide();

// set a new caption
popup.caption = "New Caption";

// this is the content of the frame (inner content div)
popup.divContent  // insert frame content here

// this is the frame of the frame (outer div)
popup.divFrame // insert frame content here


popup.appendChild( createElement( "canvas" ) ); // add something to draw into on the form.

Generally popups work like VERY simple GUI widgets... some of the popups.makeButton sort of methods return just a simple html element.

Utility interface

The popups object that is exports is a namespace that contains functions that are generally useful for working with forms; there are canned sort of common higher level controls that have a label and a value associated with them; or quick stylable button.

Popup class

This popup class is a standard high level contain that is the general abstraction for forms.

Popup Constructor Options

Popup Registered Events

The event function on() can be used to define user events, which are generated for the user by the user.

Passing on(event name, function) registers an additional function handler for the event. Functions are executed in the order they were added to handle the event.

Using on( event name, non-function) will call the event handler associated with the specified event name, and pass the argument supplied as data to the registered callback.

These are only loosely implemented...

Object members

A Popup instance exposes these data members to be able to work with internals of the popup.

Popup Example

class MyForm extends Popup {
	constructor(parent) {
		super( "My Form Name", parent );
	}
}

// create a new MyForm parented to the document's body element...
const form = new MyForm( document.body );

Lists

Drag and drop nested items in lists. This is a list container, allows adding items.

The list items may have click callback events.

The list provides callbacks for item call events? Also for adding/removing items by drag and drop operations?

Data Grid View

This shows a data grid (table) with column headers; it shows a list of records in an array. It may be able to add/remove elements from the array it has been passed; this complicates the accept/reject option.

Menu

This handles a rectangular popup menu (drop list) of items. When it shows the dialog, it puts an invisible cover-all div on the page such that any mouse event outside of the popup is captured by the popup; making these modal.

Often this sort of menu is triggered by a user right-clicking or control-clicking on a surface, and if another root menu is shown, others should already have gone away.

const menu = popups.createMenu();
menu.addItem( "text", ()=>{
	/* called when item is selected */
} );

menu.separate();

const subMenu = menu.addMenu( "Menu Entry Text" );

Data Grid

new DataGrid( parent, object, field, opts );

Constructor options

|

Column Description

Column Type

Column Type Option Description

Paged Frame

Constructor options

Changelog

• 1.0.111 (in progress)
• 1.0.110
  • remove passive from touchevents on buttons; otherwise preventDefault can't be used and touch-through happens.
  • updated package to include css and images.
• 1.0.109
  • include styles.css in files list.
  • allow data grids in datagrids.
  • Improve choice list selection in datagrids, and as a independant control.
  • Add option to datagrids to disable sorting.
  • Add option to datagrid columns to disable editing.
  • Support longer object field names for datagrids (object"field.sub.val" converts to object.field.sub.val).
  • Nest alert form text in another div to allow increasing the size of the covering div, while centering the content.
• 1.0.108
  • fix negative currency formatting.
  • allow 'id' option to allow recovering saved window positions.
• 1.0.107
  • expose internals of notice form better.
• 1.0.106
  • modify makeButton; results with a object with a more interface more similar to popups.
  • some fixes for refreshing text fields.
• 1.0.105
  • Expose Alert, and AlertForm.
  • some misc updates
• 1.0.104
  • ?? (Please review)
• 1.0.103
  • fixed tracking mouse events to specific controls (avoid being so leaky with events)
  • Added just popup alert form.
• 1.0.102
  • added remove function on more popups.
  • Improved popup sub-menu closing, put it behind a timer, which allows enough time to move over the menu from the selection before closing.
• 1.0.101
  • Revised popup menu interface, removed constants, used separate initializer methods; make popup trigger per item instead of per-show.