brianpooe/bookmarks-chrome-extension
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: toggle svg for editing and closing

Browse source
This commit is contained in:
Brian Pooe 2023-11-26 14:58:36 +02:00
parent 6033600579
commit 2c69b19431
1 changed files with 69 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/app/app.component.ts
View file

@ -22,14 +22,12 @@ import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode;
<a [href]="item.url" target="_blank">{{ item.title }}</a> <a [href]="item.url" target="_blank">{{ item.title }}</a>
</p> </p>
} @else { } @else {
<p class="editor"> <p class="input-group">
<input [(ngModel)]="editedItemTitle" <input [(ngModel)]="editedItemTitle" type="text" class="form-control">
[value]="item.title" <button type="button" class="btn btn-primary" (click)="update(item)">Update</button>
type="text"
name="edit" id="edit">
<button type="button" (click)="update(item)">update</button>
</p> </p>
} }
@if (!item.isEditable) {
<svg <svg
(click)="toggleEditor(item)" (click)="toggleEditor(item)"
width="24" width="24"
@ -49,6 +47,21 @@ import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode;
fill="currentColor" fill="currentColor"
/> />
</svg> </svg>
} @else {
<svg
(click)="toggleEditor(item)"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z"
fill="currentColor"
/>
</svg>
}
<svg <svg
(click)="delete(item)" (click)="delete(item)"
width="24" width="24"
@ -107,8 +120,30 @@ import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode;
padding: 0 1.5em; padding: 0 1.5em;
} }
.editor { input-group {
padding: 0 1.5em; width: 100%;
display: flex;
align-items: center;
}
.form-control {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
width: 80%;
}
.btn {
padding: 11px 15px;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.btn-primary {
background-color: #007bff;
color: #fff;
} }
} }
} }
@ -122,16 +157,15 @@ export class AppComponent implements OnInit {
editedItemTitle: string; editedItemTitle: string;
ngOnInit(): void { ngOnInit(): void {
(async () => { (async (): Promise<BookmarkTreeNode[]> => this.bookmarks = await this.extractAllChildren())();
const tree: BookmarkTreeNode[] = await chrome.bookmarks?.getTree();
this.bookmarks = this.extractAllChildren(tree);
})();
} }
extractAllChildren(data: BookmarkTreeNode[]): BookmarkNode[] { async extractAllChildren(): Promise<BookmarkNode[]> {
const tree: BookmarkTreeNode[] = await chrome.bookmarks?.getTree();
let extractedData: BookmarkNode[] = []; let extractedData: BookmarkNode[] = [];
// Create a stack to keep track of nodes to be processed // Create a stack to keep track of nodes to be processed
let stack: BookmarkTreeNode[][] = [data]; let stack: BookmarkTreeNode[][] = [tree];
// Process nodes until the stack is empty // Process nodes until the stack is empty
while (stack.length > 0) { while (stack.length > 0) {
@ -169,14 +203,14 @@ export class AppComponent implements OnInit {
async delete(item: BookmarkNode) { async delete(item: BookmarkNode) {
await chrome.bookmarks.remove(item.id); await chrome.bookmarks.remove(item.id);
location.reload(); this.bookmarks = await this.extractAllChildren();
} }
async update(item: BookmarkNode) { async update(item: BookmarkNode) {
await chrome.bookmarks.update(item.id, { await chrome.bookmarks.update(item.id, {
title: this.editedItemTitle, title: this.editedItemTitle,
}); });
location.reload(); this.bookmarks = await this.extractAllChildren();
} }
toggleEditor(item: BookmarkNode) { toggleEditor(item: BookmarkNode) {