#userscript for #pinboard to edit links in external window. Good to fix bookmarks with broken encoding in description, that brake site-js

pinboard_fixBookmarks.js

// ==UserScript==
// @name            pinboard_fixBookmarks
// @namespace       0x4a.net
// @version         0.4.14
// @description     Add an edit button to edit links from pinboard.in in a popup. Filter bookmarks for broken encoding (breaks page function) or youtube-links. Get missing titles for youtube via JSON.
// @author          Daniel Jackel
// @copyright       2020, Daniel Jackel (dev@0x4a.net)
// @license         MIT
// @include         https://pinboard.in/u:*
// @include         https://pinboard.in/add*
// @require         https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @icon            https://pinboard.in/favicon.ico
// @downloadURL     https://gist.github.com/0x4a/d0d38873a736c96bdde1fc15207c47c6

// @grant           GM.getValue
// @grant           GM.setValue
// @grant           GM.xmlHttpRequest 
// @grant           GM.addStyle
// @run-at          document-end
// ==/UserScript==

var $ = window.jQuery;
this.$ = this.jQuery = jQuery.noConflict(true);

// setup previous run-state
(async () => {
  var running = await GM.getValue('0x4a.pinboard_fixBookmarks.active', false);
  
  // re-set 'running' to off when loading main page
  if ( $("#banner").length > 0) {
    running = false;
    await GM.setValue('0x4a.pinboard_fixBookmarks.active', running);
  }

  // display enhancements only if running
  if (running) {
    // check if we are in edit-popup
    var urlPopup = $("#url").val();
    if (urlPopup) {
      if (urlPopup.indexOf('youtube.com') > 0 || urlPopup.indexOf('youtu.be') > 0 ) {
        // insert buttons
        $('input[name="title"]').closest("td").append("&nbsp;&gt;&nbsp;<a href='#' class='yt_fix_title_popup'>get title</a>");
        $(".yt_fix_title_popup").click(function(){ btnYoutubeTitle(); });
        // https://greasyfork.org/en/scripts/10096-general-url-cleaner/code
      }
    }
  }
})();

(function(){
  addTopmenu();
  setupCSS();
  $("#edit_bookmark_form input.url").after("<a href ='#' class='btn_fix_inline' id='yt_fix_url_inline'>fix</a>");
  $("#edit_bookmark_form input.title").after("<a href ='#' class='btn_fix_inline' id='yt_fix_title_inline'>get</a>");

  // activate via checkbox
  $("#script_toggle").change(function (){
    if (this.checked) {
      // iterate over all bookmarks
      $(".display").each(function( index ) {
        // put button
        var url = $(this).find(".url_display").attr('href');
        $(this).find(".delete_link").before(getEditButton(url));
      });
      GM.setValue('0x4a.pinboard_fixBookmarks.active', true);
    } else {
      $(".display").each(function( index ) {
        // remove button
        $(".script_editbutton").remove();
      });
      GM.setValue('0x4a.pinboard_fixBookmarks.active', false);
    }
  });

  $("#script_filter").change(function (){
    // check set option
    filterView(this.value);
  });

})();

function addTopmenu() {
  $("#top_menu").prepend("\
    <span id='script_topbar'>\
      <strong>fixBookmarks</strong>\
      <label for='script_toggle'>active:</label>\
      <input type='checkbox' name='toggleScript' id='script_toggle'>\
      <label for='script_filter'>filter:</label>\
      <select id='script_filter'>\
        <option value='none' selected>none</option>\
        <option value='encoding'>char �</option>\
        <option value='yt_all'>yt: all</option>\
        <option value='yt_title'>yt: fix title</option>\
        <option value='yt_url'>yt: unclean URL</option>\
    </span>\
  ");
}

function setupCSS() {
  GM.addStyle("\
    .script_editbutton { color: #555 !important; background-color: #ffe6e6 !important; padding: 0 3px !important; margin: 0 5px 0 0;  !important}\
    .script_editbutton_corrupted { color: #ffe6e6 !important; background-color: #a21 !important; }\
    .script_editbutton:hover {color: #000 !important; }\
    div#logo { width: auto !important; }\
    #script_topbar { margin: 0 10px 0 0; color: #888; }\
    #script_topbar strong { color: #15f; }\
    #script_toggle { position: relative; top: 2px; margin-left: 0px; }\
    .btn_fix_inline { border-left: 1px dotted #ccc !important; padding: 1px 4px 1px !important; }\
    .btn_fix_inline:hover { background-color: #eee; }\
    #yt_fix_url_inline { position: absolute; top: 11px; right: 7px; }\
    #yt_fix_title_inline { position: absolute; top: 44px; right: 7px; }\
  ");
}

function getEditButton(url) {
  return "<a href=\"#\" onclick=\"void(open('https://pinboard.in/add?url='+encodeURIComponent('" + url + "'),'Pinboard','toolbar=no,width=700,height=350'));return false;\" class=\"edit script_editbutton\">in popup</a>";
}

function btnYoutubeTitle() {
  var url = $("input#url").val();
  var video_id = url.split('v=')[1];
  var ampersandPosition = video_id.indexOf('&');
  if(ampersandPosition != -1) {
    video_id = video_id.substring(0, ampersandPosition);
  }
  GM.xmlHttpRequest  ({
    method:     'GET',
    url:        'https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=' + video_id + '&format=json',
    onload:     function (responseDetails) {
      var title = $.parseJSON(responseDetails.responseText).title
      $('input[name="title"]').val(title);
    }
  });
}

function btnYoutubeUrl() {
  var url = $("input#url").val();
  var ytFindAmpersand = url.indexOf('&');
  if (ytFindAmpersand >= 0) {
    var cleanUrl = url.split('&')[0];
    $("input#url").val(cleanUrl);
  }

}

function filterView(option) {
  // iterate over all bookmarks
  $(".display").each(function( index ) {
    // reset view
    $(this).closest(".bookmark").removeClass("hide_bookmark");

    // get url
    var url = $(this).find(".url_display").attr('href');
    var title = $(this).find(".bookmark_title").text().trim();
    var description = $(this).find(".description").text();
    var ytFindDotCom = url.indexOf('youtube.com');
    var ytFindDotBe = url.indexOf('youtu.be');

    switch(option) {
      case "encoding":
        // find broken chars
        var encFindURL = url.indexOf('�');
        var encFindTitle = title.indexOf('�');
        var encFindDescription = description.indexOf('�');
        if (encFindTitle == -1 && encFindDescription == -1 && encFindURL == -1) {
          $(this).closest(".bookmark").addClass("hide_bookmark");
        } else {
          if (encFindURL > 0) {
            $(this).find(".ext_edit").addClass("script_editbutton_corrupted");
          }
        }
        break;

      case "yt_all":
        // find youtube-links
        if (ytFindDotCom == -1 && ytFindDotBe == -1) {
          $(this).closest(".bookmark").addClass("hide_bookmark");
        }
        break;

      case "yt_title":
        // find youtube-links without title
        if (ytFindDotCom == -1 && ytFindDotBe == -1) {
          $(this).closest(".bookmark").addClass("hide_bookmark");
        } else {
          if (title != "YouTube" && title != "" && title.indexOf(' - YouTube') == -1) {
            $(this).closest(".bookmark").addClass("hide_bookmark");
          }
        }
        break;

      case "yt_url":
        var ytFindURL = url.indexOf('&');
        if (ytFindDotCom == -1 && ytFindDotBe == -1) {
          $(this).closest(".bookmark").addClass("hide_bookmark");
        } else {
          if (ytFindURL == -1) {
            $(this).closest(".bookmark").addClass("hide_bookmark");
          }
        }
        break;

      case "none":
        $(this).closest(".bookmark").removeClass("hide_bookmark").fadeIn(250);
        break;

      default:
        alert("option unknown: " + option);
        return false;
    }
    // hide filtered
    $(".hide_bookmark").fadeOut(250);
    $(".bookmark").not(".hide_bookmark").fadeIn(250);
  });
}