☰

Kanka Lightbox Creator

Changes a standard image in a Kanka entry into a thumbnail-and-lightbox combo

当前为 2022-04-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Kanka Lightbox Creator
  3. // @namespace    http://tampermonkey.net/
  4. // @license MIT
  5. // @version      1
  6. // @description  Changes a standard image in a Kanka entry into a thumbnail-and-lightbox combo
  7. // @author       Salvatos
  8. // @match        https://kanka.io/*
  9. // @icon         https://www.google.com/s2/favicons?domain=kanka.io
  10. // @grant        GM_addStyle
  11. // @run-at       document-end
  12. // ==/UserScript==
  13.  
  14.  
  15. GM_addStyle(`
  16. #entry + div:not(.codeview) .lightboxButton {
  17.    	display: none;
  18. }
  19. `);
  20.  
  21. // Wait for Summernote to initialize
  22. $('#entry').on('summernote.init', function() {
  23.  
  24.     // Locate toolbar
  25.     const toolbar = document.getElementsByClassName('note-toolbar')[0];
  26.  
  27.     // Create button
  28.     var lightboxButton = `
  29.     <div class="note-btn-group btn-group note-extensions lightboxButton">
  30.         <button type="button" class="note-btn btn btn-default btn-sm note-codeview-keep" tabindex="-1" title="Convert image to lightbox">
  31.             <i class="fas fa-images" aria-hidden="true" aria-label="Convert image to lightbox"></i>
  32.         </button>
  33.     </div>`;
  34.     toolbar.insertAdjacentHTML("beforeend", lightboxButton);
  35.  
  36.     // Add click event to button
  37.     lightboxButton = document.getElementsByClassName('lightboxButton')[0];
  38.     lightboxButton.addEventListener('click', (e)=>{
  39.         //e.preventDefault();
  40.         // Check that we are in code editor
  41.         if ($('#entry + div').hasClass('codeview')) {
  42.             // Grab selection from editor
  43.             const codeEditor = document.getElementsByClassName('note-codable')[0];
  44.             var selectedText = codeEditor.value.substring(codeEditor.selectionStart, codeEditor.selectionEnd);
  45.             var initialStart = codeEditor.selectionStart;
  46.             var initialEnd = codeEditor.selectionEnd;
  47.             var initialLength = codeEditor.value.length;
  48.  
  49.             // Make (reasonably) sure we are holding a single image tag
  50.             if (selectedText.slice(0, 4) == '<img' && selectedText.slice(-1) == '>' && selectedText.match(/</g).length == 1 && selectedText.match(/>/g).length == 1) {
  51.                 // Turn selection into node for easier handling
  52.                 var targetNode = $(selectedText);
  53.                 // Grab the image’s source
  54.                 let imgSrc = $(targetNode).attr('src');
  55.                 // If it has a title, grab that too
  56.                 let imgTitle = $(targetNode).attr('title') || "";
  57.  
  58.                 // Make a presumably unique ID based on timestamp
  59.                 let tsID = "lightbox-" + Date.now();
  60.  
  61.                 // Wrap the image in the lightbox markup
  62.                 let replacementText = `<a href="#` + tsID + `">` + selectedText + `</a><a href="#_" id="` + tsID + `" class="lightbox" title="` + imgTitle + `"><img src="` + imgSrc + `"></a>`;
  63.  
  64.                 // Replace selection with modified markup
  65.                 codeEditor.focus();
  66.                 codeEditor.setRangeText(replacementText, codeEditor.selectionStart, codeEditor.selectionEnd, 'select');
  67.  
  68.                 // Apply changes to master copy in case of immediate save
  69.                 $('#entry').val($('#entry + div').find('.note-codable').val());
  70.  
  71.                 // Return focus to textarea and select newly inserted string to make it clear to the user
  72.                 var lengthDiff = $('#entry + div').find('.note-codable').val().length - initialLength;
  73.                 var newEnd = initialEnd + lengthDiff;/*
  74.                     console.log(initialStart);
  75.                     console.log(initialEnd);
  76.                     console.log(initialLength);
  77.                     console.log(lengthDiff);
  78.                     console.log(newEnd);*/
  79.                 codeEditor.setSelectionRange(initialStart, newEnd);
  80.             }
  81.             else {
  82.                 alert("To create a lightbox, you must first select the target image tag (e.g. <img...>).");
  83.             }
  84.  
  85.         }
  86.     });
  87. });