Package Exports

urplan
urplan/dist/urplan.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (urplan) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

urplan

urplan is a JavaScript library that allows you to embed guides on your web pages using iframes. It provides a simple API to initialize, show, and hide iframes with overlay effects, making it easy to create interactive guides.

Features

Embed guides with iframes
Support for multiple instances on the same page
Overlay with shadow for better visual separation
Smooth transitions for showing and hiding the iframe
Responsive design with full-screen mode on mobile devices

Installation

You can import urplan to your web page directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/urplan/dist/urplan.min.js"></script>

Usage

Basic Initialization

You can initialize an iframe with a selector. When the element matching the selector is clicked, the iframe will be shown.

<button id="openGuide">Open Guide</button>

<script>
    urplan.init('https://example.com/guide', '#openGuide');
</script>

Programmatic Control

You can also initialize an iframe and control it programmatically.

<script>
    const instance = urplan.init('https://example.com/guide');
    instance.show();
    instance.hide();
</script>

Multiple Instances

urplan supports multiple instances on the same page.

<button id="openGuide1">Open Guide 1</button>
<button id="openGuide2">Open Guide 2</button>

<script>
    urplan.init('https://example.com/guide1', '#openGuide1');
    urplan.init('https://example.com/guide2', '#openGuide2');
</script>

API

`urplan.init(url, selector)`

url (string): The URL to be loaded in the iframe.
selector (string, optional): A CSS selector for the element that will trigger the iframe to show when clicked. If omitted, the iframe can only be controlled programmatically.

Returns an instance with the following methods:

`instance.show()`

Shows the iframe and the overlay.

`instance.hide()`

Hides the iframe and the overlay.

Example

Here is a full example using urplan:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>urplan Example</title>
    <script src="https://cdn.jsdelivr.net/npm/urplan/dist/urplan.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        button {
            margin: 20px;
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <button id="openGuide1">Open Guide 1</button>
    <button id="openGuide2">Open Guide 2</button>

    <script>
        // Initialize first guide
        urplan.init('https://example.com/guide1', '#openGuide1');

        // Initialize second guide
        urplan.init('https://example.com/guide2', '#openGuide2');
    </script>
</body>
</html>

License

This project is licensed under the MIT License.