Quote from: Crypto Library on Today at 09:44:18 PM

কাস্টম ইউজার নোট এবং কোড গুলোকে ক্লিক বোর্ডে কপি করার ইউজার স্ক্রিপ্ট

ঘুরতে ঘুরতে এই দুইটি tools চোখে পড়লো তাই আবার শেয়ার করা। আশা করি অনেকেরই কাজে দিবে।

বিটকয়েন টক ফোরামের জন্য কাস্টম ইউজার নোট
প্রথম এর ব্যবহার বলে নেই,
এটির ব্যবহার মূলত আপনি বিটকয়েন টক ফোরামের যে কোন ইউজারকে বা ইউজারের প্রোফাইলে কাস্টম ভাবে নিজের মতন করে নোট দিয়ে রাখতে পারবেন, যারা বিভিন্ন সার্ভিসের সাথে জড়িত তাদের নিকট এটা বেশি কার্যকরী।
মূলত এটাকে সহজ ভাষায় বলবো নিজের পার্সোনাল ট্যাগিং।
এই যে যেমন ধরেন উদাহরণস্বরুপ Little Mouse ভাইকে একটা নোট দিয়ে রাখলাম: Tongue

https://i.postimg.cc/6QrfrHH0/screenshot.png

Code:

// ==UserScript==
// @name BitcoinTalk User Notes
// @version 0.3.1
// @description Adds an note field to each user on BitcoinTalk
// @author TryNinja
// @match https://bitcointalk.org/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bitcointalk.org
// @grant GM.setValue
// @grant GM.getValue
// @grant GM_setValue
// @grant GM_getValue
// @namespace https://greasyfork.org/users/1070272
// ==/UserScript==

const enableModal = 1;

(async function() {
   'use strict';

   const addStyle = (css) => {
   const style = document.getElementById("GM_addStyleBy8626") || (() => {
   const style = document.createElement('style');
   style.id = "GM_addStyleBy8626";
   document.head.appendChild(style);
   return style;
   })();
   const sheet = style.sheet;
   sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
   }

   if (enableModal) {
   addStyle(`.modal {
   position: fixed;
   width: 100vw;
   height: 100vh;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   }`);

   addStyle(`.modal-bg {
   position: absolute;
   width: 100%;
   height: 100%;
   }`);

   addStyle(`.modal-container {
   min-width: 30vh;
   border-radius: 10px;
   background: #fff;
   position: relative;
   padding: 10px;
   }`);

   addStyle(`.modal-close {
   position: absolute;
   right: 15px;
   top: 15px;
   outline: none;
   appearance: none;
   color: red;
   background: none;
   border: 0px;
   font-weight: bold;
   cursor: pointer;
   }`);
   };

   const getValue = typeof GM_getValue === 'undefined' ? GM.getValue : GM_getValue;
   const setValue = typeof GM_setValue === 'undefined' ? GM.setValue : GM_setValue;

   const getParentNodeNth = (element, num) => {
   let parent = element;
   for (let i = 0; i < num; i++) {
   if (parent.parentNode) {
   parent = parent.parentNode;
   }
   }
   return parent;
   };

   const getNotes = async () => {
   let notes;
   try {
   notes = JSON.parse(await getValue('notes') ?? '{}');
   } catch (error) {
   notes = {};
   };
   return notes;
   };

   const setNotes = async notes => {
   if (typeof notes === 'string') {
   try {
   JSON.parse(notes);
   await setValue('notes', notes);
   } catch (error) {
   console.error('Notes value is an invalid JSON format')
   };
   } else if (typeof notes === 'object') {
   await setValue('notes', JSON.stringify(notes ?? {}));
   };
   };

   const getUserNote = async user => {
   const notes = await getNotes();
   if (!notes) {
   return null;
   }
   return notes[user];
   };

   const setUserNote = async (user, note) => {
   const notes = await getNotes();
   notes[user] = note;
   await setNotes(notes)
   };

   const texts = {
   addNote: '<a style="cursor: pointer; font-weight: bold" href="javascript:;">📜 Add Note</a>',
   withNote: note => `<a style="cursor: pointer; font-weight: bold" href="javascript:;"><b>📜</b> ${note}</a>`
   };

   const addNote = async (user, element) => {
   const note = prompt('Input the note (empty to remove):');
   if (note) {
   element.innerHTML = texts.withNote(note);
   await setUserNote(user, note);
   } else if (note !== null) {
   element.innerHTML = texts.addNote;
   await setUserNote(user, note);
   }
   };

   const exportNotesToInput = async () => {
   const notesInput = document.querySelector('#notesInput');
   const notesImportExportDiv = document.querySelector('#notesImportExportDiv');
   const doneImportButton = document.querySelector('#doneImportButton');
   const notes = await getNotes();
   const notesJsonString = JSON.stringify(Object.keys(notes)
   .filter(user => notes[user]).reduce((obj, user) => ({...obj, [user]: notes[user]}), {}));

   notesInput.value = notesJsonString;
   notesImportExportDiv.querySelector('span').innerText = 'Export (copy the code)';
   notesImportExportDiv.style.display = 'flex';
   doneImportButton.style.display = 'none';
   };

   const importNotesFromInput = async () => {
   const notesInput = document.querySelector('#notesInput');
   const notesImportExportDiv = document.querySelector('#notesImportExportDiv');
   const doneImportButton = document.querySelector('#doneImportButton');

   notesInput.value = '';
   notesImportExportDiv.querySelector('span').innerText = 'Import (paste the code)';
   notesImportExportDiv.style.display = 'flex';
   doneImportButton.style.display = 'inline-block';
   };

   const importNotesFromInputDone = async () => {
   const notesInput = document.querySelector('#notesInput');
   const confirmImport = confirm('Are you sure you want to override your local notes?');

   if (confirmImport && notesInput.value) {
   setNotes(notesInput.value);
   loadUserNotesList();
   }
   };

   const insertNotesModal = async () => {
   let notesModal = document.querySelector('#userNotesModal');

   if (!notesModal) {
   const moreMenuBtn = document.querySelector('body');
   notesModal = document.createElement('div');

   notesModal.innerHTML = `
   <div class="modal" id="modal-one">
   <div class="modal-bg modal-exit"></div>
   <div class="modal-container">
   <div style="margin-bottom: 5px;">
   <b style="font-size: 2rem;">User Notes</b>
   <button class="modal-close modal-exit">X</button>
   </div>

   <div style="display: flex; align-items: center; margin-bottom: 5px;">
   <button id="exportUserNotes">Export</button>
   <button id="importUserNotes">Import</button>
   </div>

   <div>
   <div style="display: none; flex-direction: column;" id="notesImportExportDiv">
   <span id="notesInputText"></span>
   <input id="notesInput" />
   <button id="doneImportButton" style="display: none;">Done</button>
   </div>

   </div>

   <div id="userNotesList" />
   </div>
   </div>`;
   notesModal.classList.add('modal');
   notesModal.style.visibility = 'hidden';
   notesModal.setAttribute('id', 'userNotesModal');

   moreMenuBtn.after(notesModal);

   const exportButton = document.querySelector('#exportUserNotes');
   const importButton = document.querySelector('#importUserNotes');
   const doneImportButton = document.querySelector('#doneImportButton');

   exportButton.addEventListener('click', () => exportNotesToInput());
   importButton.addEventListener('click', () => importNotesFromInput());
   doneImportButton.addEventListener('click', () => importNotesFromInputDone());
   };

   return notesModal;
   };

   const loadUserNotesList = async () => {
   const userNotesList = document.querySelector('#userNotesList');

   const notes = await getNotes();

   if (Object.keys(notes).length) {
   userNotesList.innerHTML = Object.keys(notes)
   .filter(user => notes[user])
   .map((user) => `<a href="https://bitcointalk.org/index.php?action=profile;u=${user}" target="_blank">${user}</a>: ${notes[user]}`).join('<br/>');
   } else {
   userNotesList.innerHTML = 'No notes...';
   };
   };

   const insertUserNotesMenuButton = async () => {
   let notesBtn = document.querySelector('#userNotesMenuBtn');
   const modal = await insertNotesModal();
   const modalExit = modal.querySelectorAll('.modal-exit');

   if (!notesBtn) {
   const moreMenuBtn = document.querySelector(`a[href='/more.php']`).parentNode;
   notesBtn = document.createElement('td');

   notesBtn.innerHTML = '<td><a href="javascript:;" id="openUserNotes">User Notes</a></td>';
   notesBtn.classList.add('maintab_back');
   notesBtn.setAttribute('id', 'userNotesMenuBtn');
   moreMenuBtn.after(notesBtn);

   const openUserNotes = document.querySelector('#openUserNotes')
   const notesImportExportDiv = document.querySelector('#notesImportExportDiv');
   const notesInput = document.querySelector('#notesInput');

   openUserNotes.addEventListener('click', () => {
   modal.style.visibility = 'visible';
   modal.style.opacity = 1;
   notesImportExportDiv.style.display = 'none';
   notesInput.value = '';
   loadUserNotesList();
   });
   modalExit.forEach(el => el.addEventListener('click', () => {
   modal.style.visibility = 'hidden';
   modal.style.opacity = 0;
   }));
   }

   return notesBtn;
   };

   if (enableModal) {
   insertNotesModal();
   insertUserNotesMenuButton();
   };

   if (window.location.href.match(/topic=\d+/)) {
   const targets = [...document.querySelectorAll('td.poster_info div a:last-child')]
   .filter(e => window.getComputedStyle(getParentNodeNth(e, 11)).display !== 'none');

   targets.map(async target => {
   const [_, userId] = [...target.parentNode.parentNode.childNodes].find(childNode => childNode.innerHTML).innerHTML.match(/u=(\d+)/);
   const noteDiv = document.createElement('div');
   const note = await getUserNote(userId);
   if (!note) {
   noteDiv.innerHTML = texts.addNote;
   } else {
   noteDiv.innerHTML = texts.withNote(note);
   }
   target.before(noteDiv);
   noteDiv.addEventListener('click', () => addNote(userId, noteDiv), false);
   });
   } else if (window.location.href.match(/profile;u=\d+$/)) {
   const [_, userId] = window.location.href.match(/u=(\d+)/);
   const target = getParentNodeNth(document.querySelector('#bodyarea table tr td tbody tr:nth-child(2) tr:last-child').parentNode, 1);
   const noteDiv = document.createElement('div');
   const note = await getUserNote(userId);
   if (!note) {
   noteDiv.innerHTML = texts.addNote;
   } else {
   noteDiv.innerHTML = texts.withNote(note);
   }
   target.before(noteDiv);
   noteDiv.addEventListener('click', () => addNote(userId, noteDiv), false);
   }
})();

কোড গুলোকে ক্লিক বোর্ডে কপি করার ইউজার স্ক্রিপ্ট
এটির কাজ হচ্ছে গিয়ে উপরে যে কোডটি দেখতেছেন এই সম্পূর্ণ কোডকে টেনে টেনে সিলেক্ট করে কপি না করে এক ক্লিকেই কপি করার জন্য পদ্ধতি।
উদাহরণ
https://i.postimg.cc/htykF1Vc/screenshot.png

Code:

// ==UserScript==
// @name Copy Code to Clipboard
// @version 0.1
// @description Click the codeheader to copy the content to your clipboard
// @author TryNinja
// @match https://bitcointalk.org/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=bitcointalk.org
// @namespace https://greasyfork.org/users/1070272
// ==/UserScript==

(function() {
   'use strict';

   const codeheaders = document.querySelectorAll('.codeheader');

   const copyCode = id => {
   const header = document.querySelector(`.${id}`);
   const copyBtn = document.querySelector(`.${id} > button`);
   const code = header.nextElementSibling;
   navigator.clipboard.writeText(code.innerText).then(() => {
   copyBtn.textContent = 'Code: (copied!)';
   });
   }

   for (const codeheader of codeheaders) {
   const rand = Math.floor(Math.random() * 10e6);
   const id = `code-${rand}`;
   codeheader.classList.add(id);
   codeheader.innerHTML = `<button type="button" style="border: 0; background: none; color: rgb(136, 169, 195); font-weight: bold;">Code: (click to copy)</button>`;
   const copyBtn = document.querySelector(`.${id} > button`);
   copyBtn.addEventListener('click', () => copyCode(id));
   }
  })();

উপরের স্ক্রিপ্ট গুলোকে কাজে লাগানোর জন্য আপনাকে যা করতে হবে Tampermonkey নামের এই এক্সটেনশন টি প্রথমে ব্রাউজারে অ্যাড করে নিতে হবে তারপর এক্সটেনশন টি এড হওয়ার পর Tampermonkey আইকনে ক্লিক করে ক্রিয়েট এ নিউ স্ক্রিপ্ট এ ক্লিক করে উপরের কোড গুলো পাওয়া যাবে বসিয়ে দিবেন অল দান।

greasyfork এ আপলোড করা TryNinja এর স্ক্রিপ্ট গুলো সরাসরি টেম্পার মানকিতে এড করতে পারবেন।
https://greasyfork.org/en/scripts/465798-copy-code-to-clipboard
https://greasyfork.org/en/scripts/465800-bitcointalk-user-notes

আশা করি স্ক্রিপ্ট গুলো অনেকের হেল্প করবে,
আর TryNinja আপনাকে অসংখ্য ধন্যবাদ এই ধরনের স্ক্রিপ্ট তৈরি করার জন্য।

আচ্ছা ভাই একটা প্রশ্ন করি, আপনার ইমেজ এ ইউজার নেম এর পাশাপাশি অনেকগুলো আইকন দেখা যাচ্ছে আমারটায় এগুলো নেই। এগুলো আসলে কি আমাকে একটু জানাবেন?