urplan
v0.0.2
Published
Embed urplan guides on web pages.
Downloads
8
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.