Press "shift + left key" to add sticky notes in any webpage wherever you like
As of
// ==UserScript== // @name jsq-stickyNotes // @namespace sticky notes and jump over jsl xq // @version v1 // @require https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js // @description Press "shift + left key" to add sticky notes in any webpage wherever you like // @include /^https?://*/ // @exclude /^https?://www.baidu.com/*/ // @exclude /^https?://www\.google\./ // @exclude /^https?://\.bing\./ // @encoding utf-8 // @grant GM_xmlhttpRequest // @grant GM_registerMenuCommand // @license MIT license // @run-at document-end // ==/UserScript== ////////////////////////////////////////////////////////////////////////////////////////////////////////////////// (function($) { $.fn.draggable = function(options) { var settings = $.extend({ handle: undefined, msg: {}, callfunction: function() {} }, options); var _eleFunc = function() { var x0, y0, ele = $(this), handle; handle = (settings.handle === undefined ? ele : ele.find(settings.handle).eq(0) === undefined ? ele : ele.find(settings.handle).eq(0)); ele.css({ position: "absolute" }); //make sure that the "postion" is "absolute" handle.bind('mousedown', function(e0) { handle.css({ cursor: "move" }); //set the appearance of cursor x0 = ele.offset().left - e0.pageX; //*1 y0 = ele.offset().top - e0.pageY; //*1 $(document).bind('mousemove', function(e1) { //bind the mousemove event, caution:this event must be bind to "document" ele.css({ left: x0 + e1.pageX, top: y0 + e1.pageY }); //this expression and the expression of *1 equal to "ele.origin_offset+mouse.current_offset-mouse.origin_offset" }); $(document).one('mouseup', settings.msg, function(e) { //when the mouse up,unbind the mousemove event,bind only once settings.callfunction(e); //callback function $(document).unbind('mousemove'); handle.css({ cursor: "auto" }); }); }); }; return this.each(_eleFunc); }; })(jQuery); ///////////////////////////////////////////////////////////////////////////////////////////////////////////// var pNote = (function($) { const server = 'http://172.28.109.103:3000'; var day = new Date(); var mark = String(day.getFullYear()) + String(day.getMonth()) +String(day.getDate()); console.log('pnote', mark); function getPost(flag, data = ''){ return new Promise(res => { GM_xmlhttpRequest({ method: flag, headers: { 'Content-Type': 'application/json', 'host': location.hostname }, data: data, url: server, onload: (r) => { if(flag==='GET'){ if(r.response !== 'no'){localStorage.setItem('wxz-sto', r.response)} //else { alert('no data')} // get 方法只会回传 no 或者 data数据 }else if(flag === 'POST'){ if(r.response === 'ok'){ console.log('upload done'); }else if (r.response === 'err' || r.response === 'no' ){ alert('upload err'); // post方法会回传 ok no 或者 err 三种 } }; res() } }) }) }; function setCSS() { var css = ' <style type="text/css">\ .wxz-noteDiv{\ z-index:99;\ box-shadow:0 0 9px rgba(0,0,0,.9);\ background:#FFCC00;\ width:200px;\ position:absolute;\ opacity:0.8;\ outline:0 none;\ }\ .wxz-noteDiv-head{\ background:#FFCC00;\ outline:0 none;\ text-align:center;\ width:200px;\ line-height: initial;\ font:13px/1.5 "微软雅黑",arial,serif;\ }\ .wxz-noteDiv-head-title{\ text-align:center;\ }\ .wxz-noteDiv-head-close{\ cursor:pointer;\ position:absolute;\ right:5px;\ }\ .wxz-noteDiv-content{\ background:#FFFF66 ;\ padding:5px 9px;\ font:13px/1.5 "微软雅黑",arial,serif;\ word-wrap:break-word;\ min-height:200px;\ outline:0 none;\ text-align:left;\ }\ </style>'; $('head:first').append(css); } async function getSTO() { //import localStorage.mysto to stotage var sto; if (localStorage.getItem('down-note') !== mark){ await getPost('GET'); //每天同步一次 //console.log('test'); //测试是不是 变成同步模式了 localStorage.setItem('down-note', mark); }; if (localStorage.getItem('wxz-sto') !== null) { sto = JSON.parse(localStorage.getItem('wxz-sto')); } else { sto = {}; } return sto; } function upDateSTO(storage) { var data = JSON.stringify(storage) localStorage.setItem('wxz-sto', data); //update localStorage.mysto with storage getPost('POST', data); } async function addNoteToStorage(keyName, x, y, text) { await getSTO().then(v => { var path = {}, temp = {}, storage = v; //just call for add notes not for update or delete temp.keyName = keyName; temp.x = x; temp.y = y; temp.text = text; if (storage[location.pathname] !== undefined) { path = storage[location.pathname]; } path[temp.keyName] = temp; //save notes to path storage[location.pathname] = path; upDateSTO(storage); //update local storage path = null; temp = null; storage = null; }); }; async function removeNoteFromStorage(keyName) { await getSTO().then(v => { var path = {}, storage = v; path = storage[location.pathname]; if (path !== undefined) { delete path[keyName]; if (Object.keys(path).length === 0) { delete storage[location.pathname]; } else { storage[location.pathname] = path; } //update the localStorage.pathname upDateSTO(storage); } path = null; storage = null; }); }; function save(keyName) { var x, y, text, selector = "div[keyName='" + keyName + "']"; x = $(selector).css('left'); y = $(selector).css('top'); text = $(selector).find('.wxz-noteDiv-content').html(); addNoteToStorage(keyName, x, y, text); $(selector).find('.wxz-noteDiv-head-flag').text(''); } function del(keyName) { if (confirm("Do you like to delete the noteï¼")) { var selector = "div[keyName='" + keyName + "']"; $(selector).remove(); removeNoteFromStorage(keyName); } } function show(keyName, x, y, text) { var html = '<div class="wxz-noteDiv" >\ <div class="wxz-noteDiv-head">\ <nobr class="wxz-noteDiv-head-flag">*</nobr><nobr class="wxz-noteDiv-head-title"></nobr><nobr class="wxz-noteDiv-head-close">X</nobr>\ </div>\ <div class="wxz-noteDiv-content" contenteditable="true"></div>\ </div>', thisNote, tempTime = new Date(parseInt(keyName, 10)); thisNote = $(html); thisNote.appendTo('body:first'); thisNote.attr('keyName', keyName); thisNote.find('.wxz-noteDiv-head-title').html(tempTime.toDateString()); //set the coordinate thisNote.css({ position: 'absolute', top: y, left: x }); //write text to content thisNote.find('.wxz-noteDiv-content').html(text); // draggable; thisNote.draggable({ handle: '.wxz-noteDiv-head', msg: { msg: keyName }, callfunction: function(e) { save(e.data.msg); } } ); //bind click event thisNote.find('.wxz-noteDiv-head-close').bind('click', { msg: keyName }, function(e) { del(e.data.msg); }); //save when it lost focus thisNote.focusout({ msg: keyName }, function(e) { save(e.data.msg); }); thisNote.focusin(function() { thisNote.find('.wxz-noteDiv-head-flag').text('*'); }); } async function loadNotes() { await getSTO().then(v => { var noteList; var storage =v; //console.log('oooo',storage ); if (storage[location.pathname] !== undefined) { noteList = storage[location.pathname]; $.each(noteList, function(i, e) { show(e.keyName, e.x, e.y, e.text); }); $('.wxz-noteDiv-head-flag').text(''); } console.log('load notes successfully'); }, //e => alert(e) //能正常显示 ，也会报err，没找到原因。 ); } // function showNotes() { // $("wxz-noteDiv").css({ // 'display': 'inline' // }); // } // function closeNotes() { // $("wxz-noteDiv").css({ // 'display': 'none' // }); // } return { init: function() { setCSS(); loadNotes(); $("body").mousedown(function(e) { if (e.shiftKey) { var x = e.pageX, y = e.pageY, keyName = (new Date()).getTime(); // keyName = e.timeStamp;//a bug in firefox since 2004 e.preventDefault(); show(keyName, x, y, ''); console.log('new note'); } }); console.log('initialized successfully'); } }; })(jQuery); pNote.init();
