@gokturk413/svg-popup-dialog

v1.0.0

Published

8 months ago

A draggable popup dialog web component for displaying content in SVG or HTML applications

0High
0Medium
0Low

gokturk413

popup dialog web-component custom-element draggable svg modal

SVG Popup Dialog

A lightweight, draggable popup dialog web component that can be used in any web application, including SVG-based applications.

Features

✨ Zero Dependencies - Pure vanilla JavaScript web component
🎯 Draggable - Smooth drag-and-drop functionality
🎨 Customizable - Easy to style and configure
📦 Lightweight - Minimal footprint
🔧 Easy to Use - Simple API and integration
🌐 Universal - Works with HTML and SVG applications

Installation

npm install @gokturk413/svg-popup-dialog

Usage

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <script type="module">
        import PopupDialog from '@gokturk413/svg-popup-dialog';
    </script>
</head>
<body>
    <mypopup-dialog visible="true" isdraggable="true">
        <p>Your content here!</p>
    </mypopup-dialog>
</body>
</html>

Using with Script Tag

<script src="node_modules/@gokturk413/svg-popup-dialog/dist/svg_popup.js"></script>

<mypopup-dialog visible="false" isdraggable="true">
    <h2>Welcome</h2>
    <p>This is a popup dialog!</p>
</mypopup-dialog>

Programmatic Control

import PopupDialog from '@gokturk413/svg-popup-dialog';

// Get the dialog element
const dialog = document.querySelector('mypopup-dialog');

// Open the dialog
dialog.open();

// Close the dialog
dialog.close();

// Set title
dialog.setTitle('Custom Title');

// Set position
dialog.setPosition(100, 100);

// Set size
dialog.setSize(400, 500);

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | visible | String | "false" | Controls visibility of the dialog ("true" or "false") | | isdraggable | String | "false" | Enables dragging functionality ("true" or "false") |

Methods

`open(event?)`

Opens the dialog.

dialog.open();

`close(event?)`

Closes the dialog.

dialog.close();

`setTitle(title)`

Sets the title of the dialog.

dialog.setTitle('My Custom Title');

`setPosition(left, top)`

Sets the position of the dialog on the screen.

dialog.setPosition(200, 150);

`setSize(width, height)`

Sets the size of the dialog.

dialog.setSize(500, 600);

Styling

The component uses Shadow DOM, but you can customize it by modifying the CSS in the component or using CSS custom properties in future versions.

The default styling includes:

White background
Blue title bar
Drop shadow
Fixed positioning

Browser Support

This component works in all modern browsers that support:

Web Components
Shadow DOM
Custom Elements
✅ Chrome/Edge 53+
✅ Firefox 63+
✅ Safari 10.1+
✅ Opera 40+

Example with SVG

<svg width="800" height="600">
    <rect x="10" y="10" width="100" height="50" fill="blue" id="trigger"/>
</svg>

<mypopup-dialog id="myDialog" isdraggable="true">
    <h3>SVG Info</h3>
    <p>Clicked on SVG element!</p>
</mypopup-dialog>

<script type="module">
    import PopupDialog from '@gokturk413/svg-popup-dialog';
    
    document.getElementById('trigger').addEventListener('click', () => {
        const dialog = document.getElementById('myDialog');
        dialog.setAttribute('visible', 'true');
    });
</script>

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you find a bug or have a feature request, please open an issue on the repository.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme