a0e18c34d6
- Add examples/sign.html with comprehensive extension compatibility testing - Update README.md with profile fetching API documentation - Update .gitignore for better file management - Update examples/button.html and examples/modal.html with latest features This completes the single-extension architecture implementation with: - nos2x compatibility through true single-extension mode - Method switching between extension/local/NIP-46/readonly - Enhanced profile fetching for floating tab - Comprehensive debugging and testing capabilities
89 lines
2.2 KiB
Markdown
89 lines
2.2 KiB
Markdown
Nostr_Login_Lite
|
|
===========
|
|
|
|
## Floating Tab API
|
|
|
|
Configure persistent floating tab for login/logout:
|
|
|
|
```javascript
|
|
await NOSTR_LOGIN_LITE.init({
|
|
// Set the initial theme (default: 'default')
|
|
theme: 'dark', // Choose from 'default' or 'dark'
|
|
|
|
// Standard configuration options
|
|
methods: {
|
|
extension: true,
|
|
local: true,
|
|
readonly: true,
|
|
connect: true,
|
|
otp: true
|
|
},
|
|
|
|
// Floating tab configuration (now uses theme-aware text icons)
|
|
floatingTab: {
|
|
enabled: true,
|
|
hPosition: 0.95, // 0.0-1.0 or '95%' from left
|
|
vPosition: 0.5, // 0.0-1.0 or '50%' from top
|
|
getUserInfo: true, // Fetch user profile name from relays
|
|
getUserRelay: [ // Relays for profile queries
|
|
'wss://relay.damus.io',
|
|
'wss://nos.lol'
|
|
],
|
|
appearance: {
|
|
style: 'pill', // 'pill', 'square', 'circle', 'minimal'
|
|
theme: 'auto', // 'auto' follows main theme
|
|
icon: '[LOGIN]', // Now uses text-based icons like [LOGIN], [KEY], [NET]
|
|
text: 'Login'
|
|
},
|
|
behavior: {
|
|
hideWhenAuthenticated: false,
|
|
showUserInfo: true,
|
|
autoSlide: true
|
|
},
|
|
animation: {
|
|
slideDirection: 'auto' // 'auto', 'left', 'right', 'up', 'down'
|
|
}
|
|
}
|
|
});
|
|
|
|
// After initialization, you can switch themes dynamically:
|
|
NOSTR_LOGIN_LITE.switchTheme('dark');
|
|
NOSTR_LOGIN_LITE.switchTheme('default');
|
|
|
|
// Or customize individual theme variables:
|
|
NOSTR_LOGIN_LITE.setThemeVariable('--nl-accent-color', '#00ff00');
|
|
|
|
```
|
|
|
|
Control methods:
|
|
```javascript
|
|
NOSTR_LOGIN_LITE.showFloatingTab();
|
|
NOSTR_LOGIN_LITE.hideFloatingTab();
|
|
NOSTR_LOGIN_LITE.updateFloatingTab(options);
|
|
NOSTR_LOGIN_LITE.destroyFloatingTab();
|
|
```
|
|
|
|
## Embedded Modal API
|
|
|
|
Embed login interface directly into page element:
|
|
|
|
```javascript
|
|
// Initialize library first
|
|
await NOSTR_LOGIN_LITE.init({
|
|
methods: {
|
|
extension: true,
|
|
local: true,
|
|
readonly: true
|
|
}
|
|
});
|
|
|
|
// Embed into container
|
|
const modal = NOSTR_LOGIN_LITE.embed('#login-container', {
|
|
title: 'Login',
|
|
showHeader: true,
|
|
seamless: false // true = no borders/shadows, blends into page
|
|
});
|
|
```
|
|
|
|
Container can be CSS selector or DOM element. Modal renders inline without backdrop overlay.
|