mirror of
https://github.com/zadam/trilium.git
synced 2025-12-17 05:39:55 +01:00
docs(user): document launch bar widgets
This commit is contained in:
Elian Doran
172
docs/User Guide/!!!meta.json
vendored
172
docs/User Guide/!!!meta.json
vendored
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"formatVersion": 2,
|
||||
"appVersion": "0.99.5",
|
||||
"appVersion": "0.100.0",
|
||||
"files": [
|
||||
{
|
||||
"isClone": false,
|
||||
@@ -15645,6 +15645,176 @@
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "4Gn3psZKsfSm",
|
||||
"notePath": [
|
||||
"pOsGYCXsbNQG",
|
||||
"CdNpE2pqjmI6",
|
||||
"yIhgI5H7A2Sm",
|
||||
"4Gn3psZKsfSm"
|
||||
],
|
||||
"title": "Launch Bar Widgets",
|
||||
"notePosition": 30,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "iconClass",
|
||||
"value": "bx bx-dock-left",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
"value": "launch-bar-widgets",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "MgibgPcfeuGz",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "xYmIYSP6wE3F",
|
||||
"isInheritable": false,
|
||||
"position": 60
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x3i7MxGccDuM",
|
||||
"isInheritable": false,
|
||||
"position": 70
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "OFXdgB2nNk1F",
|
||||
"isInheritable": false,
|
||||
"position": 80
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "IPArqVfDQ4We",
|
||||
"isInheritable": false,
|
||||
"position": 90
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "gcI7RPbaNSh3",
|
||||
"isInheritable": false,
|
||||
"position": 100
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Launch Bar Widgets.md",
|
||||
"attachments": [],
|
||||
"dirFileName": "Launch Bar Widgets",
|
||||
"children": [
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "IPArqVfDQ4We",
|
||||
"notePath": [
|
||||
"pOsGYCXsbNQG",
|
||||
"CdNpE2pqjmI6",
|
||||
"yIhgI5H7A2Sm",
|
||||
"4Gn3psZKsfSm",
|
||||
"IPArqVfDQ4We"
|
||||
],
|
||||
"title": "Note Title Widget",
|
||||
"notePosition": 10,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
"value": "note-title",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
},
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
"value": "note-title-widget",
|
||||
"isInheritable": false,
|
||||
"position": 40
|
||||
},
|
||||
{
|
||||
"type": "relation",
|
||||
"name": "internalLink",
|
||||
"value": "x0JgW8UqGXvq",
|
||||
"isInheritable": false,
|
||||
"position": 50
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Note Title Widget.md",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "hgXS32zcBfVp",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Note Title Widget_image.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"isClone": false,
|
||||
"noteId": "gcI7RPbaNSh3",
|
||||
"notePath": [
|
||||
"pOsGYCXsbNQG",
|
||||
"CdNpE2pqjmI6",
|
||||
"yIhgI5H7A2Sm",
|
||||
"4Gn3psZKsfSm",
|
||||
"gcI7RPbaNSh3"
|
||||
],
|
||||
"title": "Analog Watch",
|
||||
"notePosition": 20,
|
||||
"prefix": null,
|
||||
"isExpanded": false,
|
||||
"type": "text",
|
||||
"mime": "text/html",
|
||||
"attributes": [
|
||||
{
|
||||
"type": "label",
|
||||
"name": "shareAlias",
|
||||
"value": "analog-watch",
|
||||
"isInheritable": false,
|
||||
"position": 30
|
||||
}
|
||||
],
|
||||
"format": "markdown",
|
||||
"dataFileName": "Analog Watch.md",
|
||||
"attachments": [
|
||||
{
|
||||
"attachmentId": "49vpwjjOEAm7",
|
||||
"title": "image.png",
|
||||
"role": "image",
|
||||
"mime": "image/png",
|
||||
"position": 10,
|
||||
"dataFileName": "Analog Watch_image.png"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@@ -76,7 +76,7 @@ For each note of the calendar, the following attributes can be used:
|
||||
| `#startTime` | The time the event starts at. If this value is missing, then the event is considered a full-day event. The format is `HH:MM` (hours in 24-hour format and minutes). |
|
||||
| `#endTime` | Similar to `startTime`, it mentions the time at which the event ends (in relation with `endDate` if present, or `startDate`). |
|
||||
| `#color` | Displays the event with a specified color (named such as `red`, `gray` or hex such as `#FF0000`). This will also change the color of the note in other places such as the note tree. |
|
||||
| `#calendar:color` | **❌️ Removed since v0.100.0. Use** `**#color**` **instead.**<br><br>Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
|
||||
| `#calendar:color` | **❌️ Removed since v0.100.0. Use** `**#color**` **instead.** <br> <br>Similar to `#color`, but applies the color only for the event in the calendar and not for other places such as the note tree. |
|
||||
| `#iconClass` | If present, the icon of the note will be displayed to the left of the event title. |
|
||||
| `#calendar:title` | Changes the title of an event to point to an attribute of the note other than the title, can either a label or a relation (without the `#` or `~` symbol). See _Use-cases_ for more information. |
|
||||
| `#calendar:displayedAttributes` | Allows displaying the value of one or more attributes in the calendar like this: <br> <br> <br> <br>`#weight="70" #Mood="Good" #calendar:displayedAttributes="weight,Mood"` <br> <br>It can also be used with relations, case in which it will display the title of the target note: <br> <br>`~assignee=@My assignee #calendar:displayedAttributes="assignee"` |
|
||||
|
||||
16
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets.md
vendored
Normal file
16
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets.md
vendored
Normal file
@@ -0,0 +1,16 @@
|
||||
# Launch Bar Widgets
|
||||
Launch bar widgets are a subset of <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a> that can be used to render custom buttons and widgets inside the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Launch%20Bar.md">Launch Bar</a>.
|
||||
|
||||
## Creating a launch bar widget
|
||||
|
||||
Unlike <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>, the process of setting up a launch bar widget is slightly different:
|
||||
|
||||
1. Create a Code note of type _JavaScript (front-end)_.
|
||||
* The script itself uses the same concepts as <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>, including the use of a `NoteContextAwareWidget` or a `BasicWidget` (according to needs).
|
||||
* As examples, see <a class="reference-link" href="Launch%20Bar%20Widgets/Note%20Title%20Widget.md">Note Title Widget</a> and <a class="reference-link" href="Launch%20Bar%20Widgets/Analog%20Watch.md">Analog Watch</a>.
|
||||
2. Don't set `#widget`, as that attribute is reserved for <a class="reference-link" href="Custom%20Widgets.md">Custom Widgets</a>.
|
||||
3. In the <a class="reference-link" href="../../Basic%20Concepts%20and%20Features/UI%20Elements/Global%20menu.md">Global menu</a>, select _Configure launchbar_.
|
||||
4. In the _Visible Launchers_ section, select _Add a custom widget_.
|
||||
5. Give the newly created launcher a name (and optionally a name).
|
||||
6. In the <a class="reference-link" href="../../Advanced%20Usage/Attributes/Promoted%20Attributes.md">Promoted Attributes</a> section, modify the _widget_ field to point to the newly created note.
|
||||
7. Refresh the UI.
|
||||
85
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch.md
vendored
Normal file
85
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch.md
vendored
Normal file
@@ -0,0 +1,85 @@
|
||||
# Analog Watch
|
||||
<figure class="image"><img style="aspect-ratio:1007/94;" src="Analog Watch_image.png" width="1007" height="94"></figure>
|
||||
|
||||
This is a more intricate example of a basic widget, which displays an analog watch in the launch bar. Unlike note-context aware widgets, basic widgets don't react to note navigation.
|
||||
|
||||
```javascript
|
||||
const TPL = `
|
||||
<div class="analog-watch" style="
|
||||
position: relative;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
border: 2px solid #444;
|
||||
flex-shrink: 0;
|
||||
">
|
||||
<!-- hour hand -->
|
||||
<div class="hand hour" style="
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 3px;
|
||||
height: 10px;
|
||||
background: #333;
|
||||
transform-origin: bottom center;
|
||||
"></div>
|
||||
|
||||
<!-- minute hand -->
|
||||
<div class="hand minute" style="
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 2px;
|
||||
height: 13px;
|
||||
background: #111;
|
||||
transform-origin: bottom center;
|
||||
"></div>
|
||||
|
||||
<!-- second hand -->
|
||||
<div class="hand second" style="
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 1px;
|
||||
height: 15px;
|
||||
background: red;
|
||||
transform-origin: bottom center;
|
||||
"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
class AnalogWatchWidget extends api.BasicWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
|
||||
const hourHand = this.$widget.find('.hand.hour')[0];
|
||||
const minuteHand = this.$widget.find('.hand.minute')[0];
|
||||
const secondHand = this.$widget.find('.hand.second')[0];
|
||||
|
||||
const update = () => {
|
||||
const now = new Date();
|
||||
const sec = now.getSeconds();
|
||||
const min = now.getMinutes();
|
||||
const hour = now.getHours();
|
||||
|
||||
const secDeg = sec * 6;
|
||||
const minDeg = min * 6 + sec * 0.1;
|
||||
const hourDeg = (hour % 12) * 30 + min * 0.5;
|
||||
|
||||
secondHand.style.transform = `translate(-50%, -100%) rotate(${secDeg}deg)`;
|
||||
minuteHand.style.transform = `translate(-50%, -100%) rotate(${minDeg}deg)`;
|
||||
hourHand.style.transform = `translate(-50%, -100%) rotate(${hourDeg}deg)`;
|
||||
};
|
||||
|
||||
update();
|
||||
this._interval = setInterval(update, 1000);
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
if (this._interval) clearInterval(this._interval);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = new AnalogWatchWidget();
|
||||
```
|
||||
BIN
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch_image.png
vendored
Normal file
BIN
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Analog Watch_image.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
32
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md
vendored
Normal file
32
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget.md
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
# Note Title Widget
|
||||
<figure class="image"><img style="aspect-ratio:1007/94;" src="Note Title Widget_image.png" width="1007" height="94"></figure>
|
||||
|
||||
This is an example of a note context-aware widget, which reacts to the currently opened note and refreshes automatically as the user navigates through the notes.
|
||||
|
||||
In this example, the title of the note is displayed. It works best on the [horizontal layout](../../../Basic%20Concepts%20and%20Features/UI%20Elements/Vertical%20and%20horizontal%20layout.md).
|
||||
|
||||
```javascript
|
||||
const TPL = `\
|
||||
<div style="
|
||||
display: flex;
|
||||
height: 53px;
|
||||
width: fit-content;
|
||||
font-size: 0.75em;
|
||||
contain: none;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0 1em;
|
||||
"></div>`;
|
||||
|
||||
class NoteTitleWidget extends api.NoteContextAwareWidget {
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
}
|
||||
|
||||
async refreshWithNote(note) {
|
||||
this.$widget.text(note.title);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = new NoteTitleWidget();
|
||||
```
|
||||
BIN
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget_image.png
vendored
Normal file
BIN
docs/User Guide/User Guide/Scripting/Frontend Basics/Launch Bar Widgets/Note Title Widget_image.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Reference in New Issue
Block a user