# 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

```bash
npm install @gokturk413/svg-popup-dialog
```

## Usage

### Basic Usage

```html
<!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

```html
<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

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

```javascript
dialog.open();
```

### `close(event?)`
Closes the dialog.

```javascript
dialog.close();
```

### `setTitle(title)`
Sets the title of the dialog.

```javascript
dialog.setTitle('My Custom Title');
```

### `setPosition(left, top)`
Sets the position of the dialog on the screen.

```javascript
dialog.setPosition(200, 150);
```

### `setSize(width, height)`
Sets the size of the dialog.

```javascript
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

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