0.0.2 • Published 1 year ago

urplan v0.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

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.

0.0.2

1 year ago

0.0.1

1 year ago