web-patterns

Web Patterns Directory

This project is a collection of web patterns with demos and examples. It showcases various functionalities using modern web APIs and techniques. The project is organized into different sections, each demonstrating a specific pattern or feature.

Project Structure

clipboard/
    copy-image.html
    copy-text.html
    paste-files.html
    paste-image.html
    paste-text.html
files/
    handle-files.html
    open-directory.html
    open-files.html
    save-file.html
    share-files.html
index.html
web-apps/
    app-badge.html
    app-shortcuts/
        app-shortcuts.html
        manifest.json
    periodic-sync/
        periodic-sync.html
        sw.js
    richer-install-ui.html
    share-current-page.html

HTML Files Overview

Clipboard Patterns

copy-image.html: Demonstrates how to copy an image to the clipboard using the Clipboard API.

Sample:

<img id="image-to-copy" src="https://via.placeholder.com/150" alt="Sample Image">
<button id="copy-image">Copy Image</button>

copy-text.html: Demonstrates how to copy text to the clipboard using the Clipboard API.

Sample:

<textarea id="text-to-copy" rows="3" cols="50">Sample text to copy.</textarea>
<button id="copy-text">Copy Text</button>

paste-files.html: Demonstrates how to paste files from the clipboard using the Clipboard API.
- Sample:
```
<button id="paste-files">Paste Files</button>
<div id="pasted-files-container"></div>
```
paste-image.html: Demonstrates how to paste an image from the clipboard using the Clipboard API.
- Sample:
```
<button id="paste-image">Paste Image</button>
<div id="pasted-image-container"></div>
```

paste-text.html: Demonstrates how to paste text from the clipboard using the Clipboard API.

Sample:

<button id="paste-text">Paste Text</button>
<textarea id="pasted-text" rows="3" cols="50" placeholder="Pasted text will appear here."></textarea>

File Patterns

handle-files.html: Demonstrates how to handle file drag-and-drop events.

Sample:

<div id="drop-zone" style="border: 2px dashed #ccc; padding: 20px;">Drag files here</div>

open-directory.html: Demonstrates how to open a directory using the File System Access API.

Sample:

<button id="open-dir">Open Directory</button>
<input type="file" id="fallback" webkitdirectory hidden />

open-files.html: Demonstrates how to open files using the File System Access API.

Sample:

<button id="open-files">Open Files</button>
<input type="file" id="fallback" multiple hidden />

save-file.html: Demonstrates how to save a file using the File System Access API.
- Sample:
```
<button id="save-file">Save File</button>
```
share-files.html: Demonstrates how to share files using the Web Share API.
- Sample:
```
<button id="share-file">Share File</button>
```

Web App Patterns

app-badge.html: Demonstrates how to use the Badging API to set and clear app badges.
- Sample:
```
<button id="setBadge">Set Badge</button>
<button id="clearBadge">Clear Badge</button>
```
app-shortcuts/app-shortcuts.html: Demonstrates how to use app shortcuts defined in the web-apps/app-shortcuts/manifest.json.
- Sample:
```
<link rel="manifest" href="manifest.json">
```

periodic-sync/periodic-sync.html: Demonstrates how to use the Periodic Sync API to periodically sync data.

Sample:

<script>
  if ('serviceWorker' in navigator && 'periodicSync' in ServiceWorkerRegistration.prototype) {
    navigator.serviceWorker.register('sw.js').then(async (registration) => {
      // Register periodic sync
    });
  }
</script>

richer-install-ui.html: Demonstrates how to provide a richer install UI for Progressive Web Apps (PWAs).
- Sample:
```
<button id="installButton" style="display: none;">Install App</button>
```
share-current-page.html: Demonstrates how to share the current page using the Web Share API.
- Sample:
```
<button id="shareButton">Share This Page</button>
```

Getting Started

To explore the web patterns, open index.html in your browser. The main page provides links to all the demos and examples categorized into sections.

Author

Built with ❤️ by Chris for DevFest Rift 2024.

License

This project is licensed under the MIT License.