{"_id":"@d3x0r/popups2","name":"@d3x0r/popups2","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@d3x0r/popups2","version":"2.0.0","description":"Simple popup windows using HTML controls.","type":"module","main":"popups.js","module":"popups.js","types":"popups.d.mts","publishConfig":{"access":"public"},"exports":{".":"./popups.js","./core/*":"./core/*","./controls/*":"./controls/*","./forms/*":"./forms/*","./bundles/*":"./bundles/*","./window-manager.js":"./window-manager.js","./styles.css":"./styles.css","./dark-styles.css":"./dark-styles.css","./package.json":"./package.json"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","link":"npm link jsox","gen-types":"tsc --allowJs --declaration --emitDeclarationOnly --target ES2022 --module ESNext --moduleResolution node --outDir types popups.js window-manager.js controls/data-grid.js controls/paged-frame.js"},"private":false,"author":{"name":"d3x0r"},"license":"ISC","dependencies":{"jsox":"latest"},"gitHead":"98bc1cfb72fd2c324d547495e7d8b8c4b11a97d5","_id":"@d3x0r/popups2@2.0.0","_nodeVersion":"22.13.0","_npmVersion":"11.19.1","dist":{"integrity":"sha512-xEymciWpyS535gl+whqritIjGNav+P6G5HBZFWljXXrMJFgo2h3UaVVWfnYxBdymXLOE9WCoTp6EQl7NBwtM8A==","shasum":"a5285c72a1ce074ba396f87db4d22c9a617d913c","tarball":"https://registry.npmjs.org/@d3x0r/popups2/-/popups2-2.0.0.tgz","fileCount":44,"unpackedSize":218776,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE2Sk/ySTFNanExvv1RBcsGtLrWH4j1qlfkaeioZ/LaiAiEA93ukWl3ubUd2lwDNZ/7h0+ggSgxTlvb/vs6Yt7gbfCc="}]},"_npmUser":{"name":"d3x0r","email":"d3ck0r@gmail.com"},"directories":{},"maintainers":[{"name":"d3x0r","email":"d3ck0r@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/popups2_2.0.0_1788818667969_0.7853266095997242"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-07T22:04:27.671Z","2.0.0":"2026-09-07T22:04:28.103Z","modified":"2026-09-07T22:04:28.347Z"},"maintainers":[{"name":"d3x0r","email":"d3ck0r@gmail.com"}],"description":"Simple popup windows using HTML controls.","author":{"name":"d3x0r"},"license":"ISC","readme":"# popups\nHTML Quick Popup dialog library\n\n## Usage\n\n```\n\nimport {popups,Popup} from \"popups.mjs\";\n\nvar popup = popups.create( \"caption\" );\n\n// show a dialog\npopup.show();\n\n// hide a ialog\npopup.hide();\n\n// set a new caption\npopup.caption = \"New Caption\";\n\n// this is the content of the frame (inner content div)\npopup.divContent  // insert frame content here\n\n// this is the frame of the frame (outer div)\npopup.divFrame // insert frame content here\n\n\npopup.appendChild( createElement( \"canvas\" ) ); // add something to draw into on the form.\n\n```\n\n\nGenerally popups work like VERY simple GUI widgets...\nsome of the popups.makeButton sort of methods return just a simple html element.\n\n## Utility interface\n\nThe `popups` object that is exports is a namespace that contains functions that are generally useful for working with forms; there are\ncanned sort of common higher level controls that have a label and a value associated with them; or quick stylable button.\n\n|popups methods| arguments/type  | description |\n|----|---|---|\n|\tdefaultDrag | true | option toggle whether to enable mouse dragging on frames |\n|\tautoRaise | true |  option to toggle whether clicks on frames auto raise them to top |\n|\tcreate | (caption [, parent])  | create a new blank popup with specified caption ; if caption is an empty string, no title caption is shown.  |\n|\tsimpleForm | (title, question, defaultValue, ok, cancelCb )  | create a simple yesno form with a title, and a string question; and a text input field for user input  |\n|\tsimpleNotice | ( title, question, ok, cancel )  |  Create just a popup notice with Ok, and optional Cancel button.   |\n|        list | (parentList,toString) | Creates a list with a specified tostring method for elements.   |\n|        makeCheckbox | (form, o, text, field )  |  make a checkmark button, which is bound to object 'o' and member 'field'.  The title is shown next to the checkbox.  |\n|        makeNameInput | (form, o, text, field ) | make a static text display, with a button to click to edit the text   |\n |       makeTextInput |(form,o,field,text, money, percent, number, suffix_) |  make a text input with a lable next to it   |\n|        makeTextField |(form,o,field,text, money, percent)  | make a text display with a label next to it (like input but readonly)   |\n |       makeButton | (parentElement,text, callback, options) | adds a button; is 2 divs nested and styled.  Callback is called when the button is clicked/touched. see button options below... |\n|\tsetClass| (element.class) | Set a class in className |\n|\ttoggleClass| (element,class) | if a class is in a class, remove it, else add it |\n|\tclearClass| (element,class) | remove a class from className |\n| createMenu | () | returns a menu object which is a popup menu |\n|   |  |     |\n| DataGrid | (parent, o, field, options) | Create a data grid view for the specified array; binds controls directly to the array; cancel will reset the content. |\n| PagedFrame | (parent, options ) | Create a paged form (pages get added with a tab that when the tab is selected the content in the frame is shown. |\n|   |  |     |\n| Alert | (string) | Show a generic singleton alert banner; hide() is available, if multiple show(newString) happen, the banner remains up, and just updates the text content |\n| AlertForm | () | This is the form used by Alert, it extends `Popup()`, and just has simple single-touch/any click to clear.  |\n| Popup | (...) | Same as the exported Popup symbol |\n\n### button Options\n\n| option | description |\n|---|---|\n| suffix | appended to class name - if there's a space, it will add a separate class.... it just update className |\n \n\n\n## Popup class\n\nThis popup class is a standard high level contain that is the general abstraction for forms.\n\n|Method| arguments | return | description |\n|-----|-----|-----|-----|\n|(contructor)| (title,parent,opts) | A new Popup object | Parameters to the constructor are optional.  The first parameter may be a string which is the default name to show on the title bar of the Popup frame.  The second parameter is a HTML Element or Popup to use as a parent (uses `.appendChild( divFrame )` to add itself ot the parent.  The third option parmeter is described below. |\n|show | () | undefined | shows a hidden popup in its current position |\n| center | () | undefined | A popup needs to be attached to a page, and visible (have a layout applied), then this can calculate where to position the form to center it on the visible page.|\n|hide | () | undefined | hides a popup.  (sets display:none on the top level control) |\n| caption | -setter- | undefined | set the current text of the popup caption.  (The text of popup.divTitle)|\n| over | (element) | undefined | positions the frame aligned to the top left of the specified HTML element `element` |\n| on | (event,cb) | undefined | register a handler for events on the popup.  Events are described later. |\n| reset | () | undefined | issue reset event on popup |\n| reject | () | undefined | issue reject event on popup |\n| accept | () | undefined | issue accept event on popup |\n| move | (x,y) | undefined | uses the specified x and y floating point numbers as percentages to set top and left to. |\n| appendChild | (element) | this.appendChild's result| Ads a HTML element to this form's content area |\n| remove | () | undefined | remove all elements from the page. |\n\n### Popup Constructor Options \n\n|Name| type| default | Description |\n|----|----|----|\n|suffix| string | \"\" | Specifies a suffix to apply to elements created in this form.  The `popups` utility methods use this when created on a Popup form instead of just an HTML element. |\n|enableClose | boolean | false | Enables showing a close button in the title bar frame.  Clicking the button automatically `hide()`s the popup an dissues a `close` event. |\n| from | HTML Element | null | if from is specified, then the specified element is used for the popup `divFrame`, and all other `div*` elements are set to null. |\n| shadowFrame | creates a shadow DOM element to fill the form content into - the outer (top) frame is a div that contains the shadowRoot |\n\n### Popup Registered Events \n\nThe event function `on()` can be used to define user events, which are generated for the user by the user.\n\nPassing `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.\n\nUsing `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.\n\nThese are only loosely implemented...\n\n|Event Name| Data | Description |\n|----|----|----|\n|reset |true   |  when the popup's reset method is run, which resets any changes to current values to their `initialValue` (more later). | \n|accept | true  |  Issued when the changes in a form are meant to be saved to real states; (save changes) | \n|cancel | true  | Issued when changes should be ignored; and the form is closed; |\n|show| true  |  Issued when a popup has been told to show itself; Forms that extend Popup should just override the `show()` method... | \n|close | true | some forms generate a close event. |\n\n\n### Object members\n\nA Popup instance exposes these data members to be able to work with internals of the popup.\n\n|name | type | description |\n|----|-----|-----|\n|divFrame | HTML Element | This is the control the popup uses as the overall container for all internal elements.|\n|divCaption | HTML Element | This is the frame of the caption area on the dialog; may be used to contain other button-type elements. |\n|divTitle | HTML Element | This is the text span of the title text in the caption. |\n|divContent | HTML Element | This is the element that contains all of the form's content.  The Popup method `appendChild()` appends children to this element. |\n|divClose | HTML Element | This is the close button in the caption area container. |\n|useMouse | boolean | Can be used to disable mouse drag move on the popup. |\n\n\n### Popup Example\n\n``` js\nclass MyForm extends Popup {\n\tconstructor(parent) {\n\t\tsuper( \"My Form Name\", parent );\n\t}\n}\n\n// create a new MyForm parented to the document's body element...\nconst form = new MyForm( document.body );\n\n```\n\n\n### Lists\n\nDrag and drop nested items in lists.  This is a list container, allows adding items.\n\nThe list items may have click callback events.\n\nThe list provides callbacks for item call events? Also for adding/removing items by drag and drop operations?\n\n\n### Data Grid View\n\nThis 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.\n\n### Menu\n\nThis 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.\n\nOften 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.\n\n```\nconst menu = popups.createMenu();\nmenu.addItem( \"text\", ()=>{\n\t/* called when item is selected */\n} );\n\nmenu.separate();\n\nconst subMenu = menu.addMenu( \"Menu Entry Text\" );\n```\n\n### Data Grid\n\n``` \nnew DataGrid( parent, object, field, opts );\n```\n\n\nConstructor options\n\n|option| type | description |\n|----|----|----|\n|columns| Array of column descriptions | Specifies the columns and fields used object[field] |\n|onCancel | function | called when containing frame is canceled |\n|suffix | string | name to append to class name of these this datagrid |\n|onNewRow | function | called when a new row is created, allows application to return add a meaningful object to the list of objects in the list |\n|\n\nColumn Description \n\n| field | type | description |\n|-----|----|-----|\n| field | string | name of the field in the members of the value array |\n| name | string | name to show for column of data |\n| className | string | name to specify as class for this column field |\n| type | object | column type object specified below |\n\nColumn Type\n\n| name | type | description |\n|----|----|----|\n| money | boolean | format value as money using popups currency utilities |\n| percent | boolean | format value as a percentage value |\n| number | boolean | format value as a number value |\n| options | array of options | This specifies that a choice list should be built for this data grid element |\n| click | function | creates a button in the column. |\n| text | string | used for text on buttons separate from header string |\n| edit | boolean | default true; controls whether the column is editable |\n| toString | function | used to get the value to display in the data grid. |\n| tick | number | milliseconds to auto-refresh the field |\n\nColumn Type Option Description \n\n| name | type | used for option name in choice list |\n|----|----|----|\n| value | any | used as the value for an option in a choice list - when picked, is updated into the record. |\n\n\n### Paged Frame\n\nConstructor options\n\n|Option| value | description |\n|----|----|----|\n|top | bool | align to top of parent instead of left side |\n| pages | `[ PageDef,...]` | page definition below... |\n| suffix | string | suffix applied to frame |\n\n\n#### Frame Methods\n\n|Method | args | description |\n|----|----|----|\n| addPage | (title[, url]) | Add a page with a title, optionally filled from a URL specified. |\n| activate | (page) | make a specific page active; automatically deactivate old pages |\n| on | (event,cb) or (event,data) | supports event framework doesn't implement any at this time. |\n\n|Event | parameters | description |\n|---|---|---|\n|activate| page | A new page is active, can syncrhonize other controls like buttons for next/prior pages |\n\n#### Page Methods \n\nWhen page .activate() is called, an event is gnerated to the frame \"activate\" which has a parameter of the\npage which is being activated.\n\n|Method | args | description |\n|----|----|----|\n| addPage | (title [, url]) | Adds a sub-page within this page, optional url |\n| appendChild | ( element ) | Add a chld element to this page. |\n| remove | () | remove this page |\n| removePage | (pf ) | remove another page |\n| activatePage | (page) | make a page active |\n| enableDrag | () |  enable dragging page handles - can be used for reodring for example.  |\n| enableDrop | () | enable receiving drop events  |\n| reset | () |  reset the data content of a page |\n| insertBeforePage | () | adds a new page before the specified page, NULL adds at the end.  |\n| on | (event,cb) | (event,data) | event fraemwork; manually implemented not Events (forwards events to page frame) |\n| activate| () | make this page active.  It's better to use the frame.activate() method isntead of activating individual pages. |\n| deactivate | () | make this page inactive; if multiple pages are activated, their content will all be visible, this hides the content of a page. |\n\n\n| field | value | description |\n|---|---|---|\n|title| string | text on page selection tab |\n| url| optional string | Load page Contnt from URL |\n\n\n\n## Changelog\n- 1.0.113 (in progress)\n- 1.0.112\n  - register popups in window.d3x0r.popups.\n  - Minor additions like remove on list items, expose label of text field to be able to change the field text.\n  - Improved compatilbity with extended value specifies like from `object` use \"field.x.y\".\n- 1.0.111\n  - add tooltip support.  (most controls may have missed some)\n  - update document, misc fixes.\n  - Add `shadowFrame` option to `Popup()` so the content is more protected and encapsulated.\n  - Improve style shee addition functions.\n  - Deprecate/remove toggle/set/clear class functions that classList can provide.\n  - restore seeting FormContainer vs FrameContainer.\n  - some minor fixes for Lists and various controls.\n- 1.0.110\n  - remove passive from touchevents on buttons; otherwise preventDefault can't be used and touch-through happens.\n  - updated package to include css and images.\n- 1.0.109\n  - include styles.css in files list.\n  - allow data grids in datagrids.\n  - Improve choice list selection in datagrids, and as a independant control.\n  - Add option to datagrids to disable sorting.\n  - Add option to datagrid columns to disable editing.\n  - Support longer object field names for datagrids (object[\"field.sub.val\"] converts to object.field.sub.val).\n  - Nest alert form text in another div to allow increasing the size of the covering div, while centering the content.  \n- 1.0.108\n  - fix negative currency formatting.\n  - allow 'id' option to allow recovering saved window positions.\n- 1.0.107\n  - expose internals of notice form better.\n- 1.0.106 \n  - modify makeButton; results with a object with a more interface more similar to popups.\n  - some fixes for refreshing text fields.\n- 1.0.105\n  - Expose Alert, and AlertForm.\n  - some misc updates\n- 1.0.104\n  - ?? (Please review) \n- 1.0.103\n  - fixed tracking mouse events to specific controls (avoid being so leaky with events)\n  - Added just popup alert form.\n- 1.0.102\n  - added remove function on more popups.\n  - Improved popup sub-menu closing, put it behind a timer, which allows enough time to move over the menu from the selection before closing.\n- 1.0.101 \n  - Revised popup menu interface, removed constants, used separate initializer methods; make popup trigger per item instead of per-show.\n","readmeFilename":"README.md","_rev":"1-c2a86fe96a1a1ce9376f1eb3a40db27d"}