allow you to add annotation after selected content and copy to clipboard and save to local server
// ==UserScript==
// @name annotation-board
// @name:zh-CN 注释墙
// @description allow you to add annotation after selected content and copy to clipboard and save to local server
// @description:zh-CN 选中内容后添加注释并复制到剪贴板, 同时在本地的服务其中新建一个副本, 参见 https://github.com/ezirmusitua/snippet-board
// @version 0.2.0
// @author jferroal
// @license GPL-3.0
// @require https://greasyfork.org/scripts/31793-jmul/code/JMUL.js?version=209567
// @include http://*
// @include https://*
// @grant GM_xmlhttpRequest
// @run-at document-start
// @namespace https://greasyfork.org/users/34556
// ==/UserScript==
(function e (t, n, r) { function s (o, u) { if (!n[o]) { if (!t[o]) { var a = typeof require === 'function' && require; if (!u && a) return a(o, !0); if (i) return i(o, !0); var f = new Error("Cannot find module '" + o + "'"); throw f.code = 'MODULE_NOT_FOUND', f } var l = n[o] = { exports: {} }; t[o][0].call(l.exports, function (e) { var n = t[o][1][e]; return s(n || e) }, l, l.exports, e, t, n, r) } return n[o].exports } var i = typeof require === 'function' && require; for (var o = 0; o < r.length; o++)s(r[o]); return s })({ 1: [function (require, module, exports) {
const elements = require('./element');
const request = require('./snippet.service');
class AnnotationBoard {
constructor () {
this.request = request;
this.container = new elements.Container();
this.textarea = new elements.Textarea();
this.saveBtn = new elements.Button();
this.saveBtn.listenClick(() => {
this.textarea.copyToClipboard();
this.request.save({
link: window.location.href,
raw_content: this.textarea.value,
});
this.hide();
});
this.container.appendChild([this.textarea, this.saveBtn]);
this.container.element.appendTo(document.body);
this.isShowing = false;
}
show () {
this.textarea.appendSelection();
this.container.show();
this.isShowing = true;
}
shouldShow () {
const isEmptySelection = !!this.textarea.element.getSelection();
return !this.isShowing && isEmptySelection;
}
hide () {
this.isShowing = false;
this.container.hide('display', 'none');
}
shouldHide (event) {
const target = event && event.target;
if (!target && this.isShowing) {
return true;
} else {
const inContainer = elements.Container.isContainer(target.id);
const inTextarea = elements.Textarea.isTextarea(target.id);
const inButton = elements.Button.isButton(target.id);
return !inContainer && !inTextarea && !inButton && this.isShowing;
}
}
}
module.exports = AnnotationBoard;
}, { './element': 2, './snippet.service': 4 }],
2: [function (require, module, exports) {
const JMUL = window.JMUL || {};
const AnnotationBoardId = {
CONTAINER: 'annotation-container',
TEXTAREA: 'annotation-textarea',
BUTTON: 'annotation-button',
};
class BoardContainer {
constructor () {
this.element = new JMUL.Element('div');
this.element.setId(AnnotationBoardId.CONTAINER);
BoardContainer._initCss(this.element)
}
appendChild (children) {
children.forEach((c) => {
try {
this.element.appendChild(c.element)
} catch (er) {
console.log(er);
}
});
}
show () {
try {
const pos = JMUL.Element.getSelectedPosition();
this.element.setCss({
display: 'flex',
flexDirection: 'column',
left: pos.x,
top: pos.y,
});
} catch (err) {
console.error(err);
}
}
hide () {
this.element.setCss({
display: 'none',
});
}
static isContainer (id) {
return AnnotationBoardId.CONTAINER === id;
}
static _initCss (elem) {
elem.setCss({
display: 'none',
fontFamily: 'Noto',
border: '4px',
boxShadow: '0px 3px 8px 1px rgba(0, 0, 0, 0.26)',
position: 'absolute',
backgroundColor: 'rgba(0, 0, 0, 0.56)',
padding: '16px 4px 8px 4px',
});
}
}
class BoardEdit {
constructor () {
this.element = JMUL.Decorator.selectable(new JMUL.Element('textarea'));
this.element.setId(AnnotationBoardId.TEXTAREA);
BoardEdit._initCss(this.element);
}
appendSelection () {
const prevVal = this.element.value();
const selectedText = this.element.getSelection();
const newVal = (!!prevVal && (prevVal + '\n') || '') + '========' + '\n' + selectedText + '\n';
this.element.setValue(newVal)
}
hide () {
this.element.setStyle('display', 'none');
}
copyToClipboard () {
this.element.copyToClipboard();
}
get value () {
return this.element.value();
}
static isTextarea (id) {
return AnnotationBoardId.TEXTAREA === id;
}
static _initCss (elem) {
elem.setCss({
fontFamily: 'Noto',
width: '240px',
height: '128px',
backgroundColor: 'rgba(255, 255, 255, 0.87)',
marginBottom: '8px',
borderRadius: '4px',
color: 'rgba(0, 0, 0, 0.76)',
fontSize: '12px',
});
}
}
class BoardButton {
constructor () {
this.element = new JMUL.Element('button');
this.element.setId(AnnotationBoardId.BUTTON);
this.element.setInnerHTML('复制到剪贴板');
BoardButton._initCss(this.element);
}
listenClick (fn) {
this.element.listen('click', (e) => fn());
}
static isButton (id) {
return AnnotationBoardId.BUTTON === id;
}
static _initCss (elem) {
elem.setCss({
fontFamily: 'Noto',
border: 'none',
borderRadius: '4px',
height: '24px',
backgroundColor: 'rgba(255, 255, 255, 0.87)',
color: 'rgba(0, 0, 0, 0.76)',
fontSize: '14px',
});
}
}
module.exports = {
Container: BoardContainer,
Textarea: BoardEdit,
Button: BoardButton,
};
}, {}],
3: [function (require, module, exports) {
const AnnotationBoard = require('./annotation-board');
(function () {
const annotationBoard = new AnnotationBoard();
bindEvent();
function bindEvent () {
window.addEventListener('mouseup', (event) => {
handleMouseUp(event);
}, false);
}
function handleMouseUp (event) {
if (annotationBoard.shouldShow()) {
annotationBoard.show();
} else if (annotationBoard.shouldHide(event)) {
annotationBoard.hide();
}
}
})();
}, { './annotation-board': 1 }],
4: [function (require, module, exports) {
const JMUL = window.JMUL || {};
class SnippetService {
constructor (host = 'http://127.0.0.1', port = 5000, _options = {}) {
if (!SnippetService.instance) {
this.host = host;
this.port = port;
this.options = _options;
if (!this.options.headers) {
this.options.headers = { 'Content-Type': 'application/json' };
}
SnippetService.instance = this;
}
return SnippetService.instance;
}
save (data) {
const request = new JMUL.Request(this.options);
request.setMethod('POST');
request.setUrl(this.host + ':' + this.port.toString() + '/snippet/api/v0.1.0');
request.setData(data);
request.send();
}
}
SnippetService.instance = undefined;
module.exports = new SnippetService();
}, {}] }, {}, [3]);