Log in to Pinboard
4 | 5 |You must log in to Pinboard first using the API token 6 | that you can find on your 7 | Pinboard password page.
8 | 9 | 26 | 27 |You must log in to Pinboard first using the API token 6 | that you can find on your 7 | Pinboard password page.
8 | 9 | 26 | 27 |{{error}}
118 | 119 | 126 | 127 |' + 169 | this.description.slice(0, 3200 - 25) + ''; 170 | } 171 | this.keywords = content.keywords; 172 | this.tags = null; 173 | this.unshared = this.options.unshared; 174 | this.toread = this.options.toread; 175 | this.retry = true; 176 | this.suggested = this.popular = null; 177 | // query both page data and suggested tags 178 | this.pinboard.getAndSuggest(this.url).subscribe( 179 | data => this.setData(data), 180 | error => this.logError( 181 | 'Cannot check this page on Pinboard.', error.toString())); 182 | } else { 183 | this.logError('Can only pin normal web pages.', 184 | 'Cannot get the URL of the page'); 185 | } 186 | } 187 | 188 | // receive page data and suggested tags from parallel queries 189 | setData(data: any): void { 190 | if (data.posts && data.posts.length) { 191 | this.date = data?.date; 192 | const post = data.posts[0]; 193 | this.url = post.href; 194 | this.title = post.description; 195 | this.description = post.extended; 196 | this.tags = post.tags; 197 | this.unshared = post.shared !== 'yes'; 198 | this.toread = post.toread === 'yes'; 199 | this.update = true; 200 | // set browser icon to saved state 201 | browser.tabs.query({ url: this.url }).then(tabs => { 202 | for (const tab of tabs) { 203 | this.icon.setIcon(tab.id, true); 204 | } 205 | }, 206 | error => console.error(error.toString())); 207 | } 208 | // Note: "popular" and "recommended" are interchanged in Pinboard 209 | if (data.popular) { 210 | this.suggested = data.popular; 211 | } 212 | if (this.options.popular && data.recommended) { 213 | this.popular = data.recommended; 214 | } 215 | this.pinboard.cachedTags().subscribe(tags => { 216 | this.allTags = tags; 217 | if (this.tags) { 218 | this.tags.trim(); 219 | this.savedTags = this.tags; 220 | this.tags += ' '; 221 | } else { 222 | this.savedTags = null; 223 | } 224 | this.completions = null; 225 | this.setReady(); 226 | }); 227 | } 228 | 229 | // set form as ready for input 230 | setReady(): void { 231 | this.ready = true; 232 | // wait until inputs have been enabled, then focus 233 | timer(0).subscribe(() => { 234 | const focus = this.url ? (this.title ? ( 235 | this.tags && !this.description ? 236 | 'description' : 'tags') : 'title') : 'url'; 237 | this.eref.nativeElement.querySelector('#' + focus).focus(); 238 | }); 239 | } 240 | 241 | // check whether the given tags have already been added 242 | hasTags(tags: string | string[]): boolean { 243 | if (!this.tags) { 244 | return false; 245 | } 246 | if (!Array.isArray(tags)) { 247 | tags = [tags as string]; 248 | } 249 | const allTags = this.tags.split(' ').filter(tag => !!tag); 250 | return (tags as string[]).every(tag => allTags.includes(tag)); 251 | } 252 | 253 | // add the given tags if they have not already been added, otherwise remove 254 | addTags(tags: string | string[]): void { 255 | if (!Array.isArray(tags)) { 256 | tags = [tags as string]; 257 | } 258 | let allTags = (this.tags || '').split(' ').filter(tag => !!tag); 259 | const newTags = (tags as string[]).filter(tag => !allTags.includes(tag)); 260 | if (newTags.length) { // some tags are new 261 | allTags.push(...newTags); // add these tags 262 | } else { // all tags have already been added, remove these tags again 263 | allTags = allTags.filter(tag => !(tags as string[]).includes(tag)); 264 | } 265 | this.tags = allTags.join(' '); 266 | } 267 | 268 | // this method is called when keys have been pressed down in the tabs field 269 | tagsKeyDown(event: any): boolean { 270 | if (!this.ready || !this.tagsFocus || !this.completions) { 271 | return true; 272 | } 273 | // Firefox reacts to some of our control keys as well, so to prevent this 274 | // from happening, we have to listen here before the key has been pressed 275 | let control = true; 276 | switch (event.code) { 277 | case 'Home': 278 | this.tagSelected = 0; 279 | break; 280 | case 'End': 281 | this.tagSelected = this.completions.length - 1; 282 | break; 283 | case 'ArrowDown': 284 | if (this.tagSelected < this.completions.length - 1) { 285 | ++this.tagSelected; 286 | } 287 | break; 288 | case 'ArrowUp': 289 | if (this.tagSelected > 0) { 290 | --this.tagSelected; 291 | } 292 | break; 293 | case 'Enter': 294 | case 'Tab': 295 | case 'ArrowRight': 296 | const tag = this.completions[this.tagSelected]; 297 | let value = event.target.value; 298 | const words = value.split(' '); 299 | if (words.length) { 300 | words.pop(); 301 | } 302 | if (!words.includes(tag)) { 303 | words.push(tag); 304 | value = words.join(' ') + ' '; 305 | this.tagsChanged(value); 306 | this.tags = value; 307 | } 308 | break; 309 | default: 310 | control = false; 311 | } 312 | return !control; 313 | } 314 | 315 | // this method is called when keys have been released in the tabs field 316 | tagsKeyUp(event: any): boolean { 317 | // the field value is changed after the key has been pressed, 318 | // so this is the right moment for checking for value changes 319 | if (this.ready && this.tagsFocus) { 320 | this.tagsSubject.next(event.target.value); 321 | } 322 | return true; 323 | } 324 | 325 | // this method is called with debounce when tags have changed 326 | // it must then determine the list of tag completions 327 | tagsChanged(tags: string): void { 328 | const words = tags.replace(',', ' ').split(' '); 329 | let word = words.length ? words.pop() : null; 330 | const allTags = this.allTags; 331 | const matches: [string, number][] = []; 332 | const alpha = this.options.alpha; 333 | if (word) { 334 | word = word.toLowerCase(); 335 | for (const tag in allTags) { 336 | if (allTags.hasOwnProperty(tag)) { 337 | if (tag.toLowerCase().startsWith(word) && !words.includes(tag)) { 338 | matches.push([tag, alpha ? 0 : allTags[tag]]); 339 | } 340 | } 341 | } 342 | } 343 | // sort matching tags by decreasing frequency 344 | matches.sort((a: [string, number], b: [string, number]) => 345 | b[1] - a[1] || a[0].localeCompare(b[0])); 346 | matches.splice(maxCompletions); 347 | const completions: string[] = matches.map(a => a[0]).reverse(); 348 | if (completions.length) { 349 | const oldCompletions = this.completions; 350 | if (!oldCompletions || completions.length !== oldCompletions.length || 351 | completions.some((tag, i) => 352 | completions[i] !== oldCompletions[i])) { 353 | this.completions = completions; 354 | this.tagSelected = completions.length - 1; 355 | } 356 | } else { 357 | this.completions = null; 358 | } 359 | } 360 | 361 | // this method is called when a tag completion was clicked 362 | selectCompletion(tag: string): boolean { 363 | let value = this.tags || ''; 364 | const words = value.split(' '); 365 | if (words.length) { 366 | words.pop(); 367 | } 368 | if (!words.includes(tag)) { 369 | words.push(tag); 370 | value = words.join(' ') + ' '; 371 | this.tagsChanged(value); 372 | this.tags = value; 373 | } 374 | return false; 375 | } 376 | 377 | // delete the current bookmark 378 | remove(): boolean { 379 | if (this.ready && this.update && this.url) { 380 | this.pinboard.delete(this.url).subscribe( 381 | () => { 382 | // update the tags in the cache 383 | const savedTags = this.savedTags ? this.savedTags.split(' ') : []; 384 | this.pinboard.updateTagCache([], savedTags).pipe(finalize( 385 | // set the browser icon to unsaved state 386 | () => browser.tabs.query({ url: this.url }).then(tabs => { 387 | for (const tab of tabs) { 388 | this.icon.setIcon(tab.id, false); 389 | } 390 | this.cancel(); 391 | }, error => { 392 | console.error(error.toString()); 393 | this.cancel(); 394 | }))).subscribe(); 395 | }, 396 | error => { 397 | this.logError('Sorry, could not remove this page from Pinboard', 398 | error.toString()); 399 | }); 400 | } 401 | return false; 402 | } 403 | 404 | // reset error message 405 | reset(): boolean { 406 | this.error = null; 407 | return false; 408 | } 409 | 410 | // submit form 411 | submit(form: NgForm): boolean { 412 | if (form.valid) { 413 | this.save(form.value); 414 | } 415 | return false; 416 | } 417 | 418 | // save page to Pinboard 419 | save(value: Post): void { 420 | value.url = (value.url || '').trim(); 421 | value.title = (value.title || '').trim(); 422 | if (!value.url || !value.title) { 423 | return; 424 | } 425 | value.description = (value.description || '').trim() || null; 426 | // clean up tags, maximum of 100 tags with 255 chars each 427 | const tags = value.tags ? value.tags.split(' ').filter( 428 | tag => !!tag).slice(0, 100).map(tag => tag.slice(0, 255)) : []; 429 | value.tags = tags.join(' '); 430 | const savedTags = this.savedTags ? this.savedTags.split(' ') : []; 431 | this.pinboard.save(value).subscribe( 432 | error => { 433 | if (error) { 434 | this.logError('Sorry, could not save this page to Pinboard', 435 | error); 436 | } else { 437 | // update the tags in the cache 438 | this.pinboard.updateTagCache(tags, savedTags).pipe(finalize( 439 | // set the browser icon to saved state 440 | () => browser.tabs.query({ url: this.url }).then(tabs => { 441 | for (const tab of tabs) { 442 | this.icon.setIcon(tab.id, true); 443 | } 444 | this.cancel(); 445 | }, error => { 446 | console.error(error.toString()); 447 | this.cancel(); 448 | }))).subscribe(); 449 | } 450 | }, 451 | error => { 452 | this.logError('Sorry, could not save this page to Pinboard', 453 | error.toString()); 454 | }); 455 | } 456 | 457 | // save current tabs as tab set to Pinboard 458 | saveTabs(): void { 459 | browser.tabs.query({ windowType: 'normal', url: '*://*/*' }).then( 460 | tabs => { 461 | const wTabs = {}; 462 | for (const tab of tabs) { 463 | const wId = tab.windowId; 464 | if (!wTabs[wId]) { 465 | wTabs[wId] = {}; 466 | } 467 | wTabs[wId][tab.index] = { title: tab.title, url: tab.url }; 468 | } 469 | const windows = Object.keys(wTabs).map( 470 | wId => Object.keys(wTabs[wId]).map( 471 | index => wTabs[wId][index])); 472 | if (windows.length) { 473 | const data = { 474 | browser: 'ffox', windows: windows, 475 | }; 476 | this.pinboard.saveTabs(data).subscribe(() => { 477 | this.cancel(); 478 | }, error => { 479 | this.logError( 480 | 'Sorry, could not save this tab set to Pinboard.', 481 | error.toString()); 482 | }); 483 | } 484 | }); 485 | } 486 | 487 | // navigate to options 488 | settings(): void { 489 | // store a note that we are showing on a popup page 490 | this.storage.setInfo('options.page', 'popup'); 491 | this.router.navigate(['/options']); 492 | } 493 | 494 | // log out from Pinboard 495 | logOut(): void { 496 | this.pinboard.forgetToken().subscribe( 497 | () => this.router.navigate(['/login'])); 498 | } 499 | 500 | // show error message and log it on the console 501 | logError(errmsg, logmsg): void { 502 | if (errmsg) { 503 | console.error(logmsg || errmsg); 504 | } 505 | this.error = errmsg; 506 | } 507 | 508 | pinboardLink(page): boolean { 509 | if (page && page.indexOf('~') >= 0) { 510 | this.pinboard.userName.subscribe( 511 | name => this.pinboardLink(page.replace('~', 'u:' + name))); 512 | } else { 513 | let url = pinboardPage; 514 | if (page) { 515 | url += page; 516 | } 517 | browser.tabs.create({ url: url }); 518 | this.cancel(); 519 | } 520 | return false; 521 | } 522 | 523 | // close the whole popup 524 | cancel(): void { 525 | window.close(); 526 | } 527 | 528 | } 529 | -------------------------------------------------------------------------------- /src/app/storage.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | import { Observable, from as ObservableFrom } from 'rxjs'; 4 | import { map } from 'rxjs/operators'; 5 | 6 | export interface Options { 7 | ping: boolean; // check whether pages are bookmarked 8 | unshared: boolean; // add as private by default 9 | toread: boolean; // add as to read by default 10 | meta: boolean; // parse meta elements 11 | selection: boolean; // use selected text 12 | blockquote: boolean; // wrap as block quote 13 | alpha: boolean; // sort alphabetically 14 | popular: boolean; // show popular tags 15 | menu: boolean; // add entry to context menu 16 | dark: boolean; // use dark mode 17 | } 18 | 19 | const defaultOptions: Options = { 20 | ping: false, 21 | unshared: false, 22 | toread: false, 23 | meta: true, 24 | selection: true, 25 | blockquote: false, 26 | alpha: false, 27 | popular: true, 28 | menu: false, 29 | dark: null, 30 | }; 31 | 32 | 33 | // Wrapper around the browser local storage for the web extension, 34 | // using Observables instead of Promises for flexibility and consistency. 35 | 36 | @Injectable() 37 | export class StorageService { 38 | 39 | private storage = browser.storage.local; // needs "storage" permission 40 | 41 | private readonly info: Object; 42 | 43 | constructor() { 44 | this.info = {}; // for various info shared via this service 45 | } 46 | 47 | // get keys from local storage as an Observable 48 | // when only one key is requested, only its value is returned 49 | get(keys: string | string[] | null): Observable