Skip to content

Commit 824c2a2

Browse files
kunwarsalujakunwarsaluja
authored
Merge pull request #57 from cloudadoption/issue27-tagger
tagger
2 parents e31d7b5 + 374e2ab commit 824c2a2

File tree

5 files changed

+567
-0
lines changed

5 files changed

+567
-0
lines changed

‎tools/plugins/tags/README.md‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# Tags Plugin
2+
3+
A multi-select, searchable tag picker for Adobe Document Authoring (DA) Edge Delivery Services and Universal Editor (UE) environments.
4+
5+
## Features
6+
7+
- **Fetches tags** from a JSON file (`/docs/library/tagging.json`) in your DA repo.
8+
- **Searchable**: Quickly filter tags by value, key, or comments.
9+
- **Multi-select**: Select multiple tags using checkboxes.
10+
- **Bulk actions**: Select all, deselect all, and send all selected tags at once.
11+
- **Accessible UI**: Keyboard and screen-reader friendly.
12+
- **Modern, responsive design**: Clean, sticky action bar and mobile-friendly layout.
13+
14+
## Usage
15+
16+
1. **Add the plugin to your DA tools directory** (already present as `tools/plugins/tags/`).
17+
2. **Ensure your DA repo contains a `docs/library/tagging.json` file** with the following structure:
18+
19+
```json
20+
{
21+
"data": [
22+
{
23+
"key": "tag-key-1",
24+
"value": "Tag Value 1",
25+
"comments": "Optional description / unsed in UI"
26+
},
27+
{
28+
"key": "tag-key-2",
29+
"value": "Tag Value 2"
30+
}
31+
],
32+
"limit": 100
33+
}
34+
```
35+
36+
- `key`: The value sent to the document when selected.
37+
- `value`: The label shown in the UI.
38+
- `comments`: (Optional) Additional info shown in the UI.
39+
40+
3. **Open `tools/tags/tags.html` in the DA/UE environment**.
41+
- The plugin will automatically fetch and display tags from your repo.
42+
- Use the search box to filter tags.
43+
- Select tags using checkboxes.
44+
- Use the action bar at the bottom to select all, deselect all, or send selected tags.
45+
- Click "Send Selected" to insert the selected tag keys (comma-separated) into your document.
46+
47+
## File Overview
48+
49+
- `tags.html` – Minimal HTML shell, loads the plugin and styles.
50+
- `tags.js` – Main plugin logic (fetch, render, search, select, send).
51+
- `tags.css` – All UI styles (customizable).
52+
53+
## Integration
54+
55+
- **DA SDK**: Uses the DA App SDK (`https://da.live/nx/utils/sdk.js`) for context, fetch, and document actions.
56+
- **No build step required**: All files are plain JS/CSS/HTML.
57+
- **No external dependencies**: Only the DA SDK is required.
58+
59+
### Configuration
60+
61+
> Site _CONFIG_ > _library_
62+
63+
| title | path | icon | ref | format | experience |
64+
| ------- | ----------------------- | -------------------------------------------------------------------- | --- | --- | -------- |
65+
| `Tags` | `/tools/plugins/tags/tags.html` | `https://main--{site}--{org}.aem.page/tools/plugins/tags/classification.svg` | | | `dialog` |
66+
67+
## Customization
68+
69+
- **Styling**: Edit `tags.css` to change the look and feel.
70+
- **Data source**: Change the fetch URL in `tags.js` if your tagging data is elsewhere.
71+
- **Button text/labels**: Edit in `tags.js` for localization or branding.
72+
73+
## Development
74+
75+
- Lint with `npm run lint`.
76+
- All code is ES6+ and uses modern best practices.
77+
- No console logging except for errors.
78+
79+
## License
80+
81+
[MIT](../../LICENSE) (or your project’s license)

‎tools/plugins/tags/classification.svg‎

Lines changed: 2 additions & 0 deletions
Loading

‎tools/plugins/tags/tags.css‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
/* Tags Tool Styles */
2+
3+
/* Main container */
4+
.tags-container {
5+
height: 100vh;
6+
display: flex;
7+
flex-direction: column;
8+
font-family: Arial, sans-serif;
9+
max-width: 600px;
10+
margin: 0 auto;
11+
}
12+
13+
/* Header */
14+
.tags-header {
15+
margin: 5px 20px 5px 20px;
16+
text-align: center;
17+
flex-shrink: 0;
18+
font-style: oblique;
19+
}
20+
21+
/* Error message */
22+
.error-message {
23+
color: #721c24;
24+
background-color: #f8d7da;
25+
padding: 12px;
26+
border-radius: 6px;
27+
border: 1px solid #f5c6cb;
28+
margin-bottom: 20px;
29+
}
30+
31+
/* Warning message */
32+
.warning-message {
33+
color: #856404;
34+
background-color: #fff3cd;
35+
padding: 12px;
36+
border-radius: 6px;
37+
border: 1px solid #ffeaa7;
38+
}
39+
40+
/* Search container */
41+
.search-container {
42+
margin: 0 20px 20px 20px;
43+
flex-shrink: 0;
44+
}
45+
46+
/* Search input */
47+
.search-input {
48+
width: 100%;
49+
padding: 12px 16px;
50+
border: 2px solid #dee2e6;
51+
border-radius: 6px;
52+
font-size: 16px;
53+
box-sizing: border-box;
54+
transition: border-color 0.2s;
55+
}
56+
57+
.search-input:focus {
58+
border-color: #007bff;
59+
}
60+
61+
.search-input:blur {
62+
border-color: #dee2e6;
63+
}
64+
65+
/* Results container */
66+
.results-container {
67+
flex: 1;
68+
overflow-y: auto;
69+
border: 1px solid #dee2e6;
70+
border-radius: 6px;
71+
margin: 0 20px;
72+
}
73+
74+
/* No results message */
75+
.no-results {
76+
padding: 20px;
77+
text-align: center;
78+
color: #6c757d;
79+
}
80+
81+
/* Tag item */
82+
.tag-item {
83+
padding: 12px 16px;
84+
border-bottom: 1px solid #f8f9fa;
85+
transition: background-color 0.2s;
86+
display: flex;
87+
align-items: center;
88+
gap: 12px;
89+
}
90+
91+
.tag-item:hover {
92+
background-color: #f8f9fa;
93+
}
94+
95+
/* Checkbox */
96+
.tag-checkbox {
97+
margin: 0;
98+
cursor: pointer;
99+
}
100+
101+
/* Tag info */
102+
.tag-info {
103+
flex: 1;
104+
cursor: pointer;
105+
}
106+
107+
.tag-value {
108+
font-weight: bold;
109+
color: #212529;
110+
margin-bottom: 4px;
111+
}
112+
113+
.tag-key {
114+
font-size: 12px;
115+
color: #6c757d;
116+
}
117+
118+
.tag-comments {
119+
font-size: 12px;
120+
color: #6c757d;
121+
font-style: italic;
122+
margin-top: 2px;
123+
}
124+
125+
/* Action buttons container */
126+
.action-container {
127+
display: flex;
128+
gap: 10px;
129+
margin: 20px;
130+
justify-content: center;
131+
flex-shrink: 0;
132+
padding: 20px 0;
133+
border-top: 1px solid #dee2e6;
134+
background-color: white;
135+
}
136+
137+
/* Button base styles */
138+
.btn {
139+
padding: 10px 20px;
140+
color: white;
141+
border: none;
142+
border-radius: 4px;
143+
cursor: pointer;
144+
font-size: 14px;
145+
transition: background-color 0.2s;
146+
}
147+
148+
/* Secondary button */
149+
.btn-secondary {
150+
background-color: #6c757d;
151+
}
152+
153+
.btn-secondary:hover {
154+
background-color: #5a6268;
155+
}
156+
157+
/* Primary button */
158+
.btn-primary {
159+
background-color: #007bff;
160+
font-weight: bold;
161+
}
162+
163+
.btn-primary:hover {
164+
background-color: #0056b3;
165+
}
166+
167+
/* Disabled button */
168+
.btn:disabled {
169+
background-color: #6c757d;
170+
cursor: not-allowed;
171+
}
172+
173+
/* Error button state */
174+
.btn-error {
175+
background-color: #dc3545;
176+
}
177+
178+
/* Summary */
179+
.summary {
180+
background-color: #f8f9fa;
181+
padding: 15px;
182+
border-radius: 6px;
183+
border: 1px solid #dee2e6;
184+
font-size: 14px;
185+
margin: 0 20px 20px 20px;
186+
flex-shrink: 0;
187+
}

‎tools/plugins/tags/tags.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Tag List</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
6+
<link rel="icon" href="data:,">
7+
<link rel="stylesheet" href="/tools/plugins/tags/tags.css">
8+
<!-- Import DA App SDK -->
9+
<script src="https://da.live/nx/utils/sdk.js" type="module"></script>
10+
<!-- Project App Logic -->
11+
<script src="/tools/plugins/tags/tags.js" type="module"></script>
12+
</head>
13+
<body>
14+
</body>
15+
</html>

0 commit comments

Comments
 (0)