pageNote 网页笔记のソースコード

pageNote 网页笔记

在你感兴趣的网页上添加便笺或笔记按 "shift+鼠标左键"" 添加笔记//Press "shift + left key" to add sticky notes in any webpage wherever you like
// ==UserScript==
// @name       pageNote 网页笔记
// @namespace  
// @version v1.4.1
// @require 	http://code.jquery.com/jquery-2.1.1.js
// @description 在你感兴趣的网页上添加便笺或笔记 按 "shift+鼠标左键"" 添加笔记//Press "shift + left key" to add sticky notes in any webpage wherever you like
// @description  For more imformation or copyright problems,please email me at [email protected]. 
// @include      /^https?://*/
// @exclude      http://pan.baidu.com/*
// @exclude      http://play.baidu.com/*
// @exclude      http://www.baidu.com/*
// @exclude      /^https?://www\.google\./
// @exclude      /^https?://\.bing\./
// @exclude     http://tieba.baidu.com
// @encoding    utf-8
// @grant       GM_registerMenuCommand
// @license      MIT license
// @run-at document-end
// @copyright  2014,04,18 __By Wang Hsin-che   
// ==/UserScript==
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// my custom jquery draggable plugin//////////////////////////////////////////////////////////////////////////////
// by Wang Hsin-che @ 2014.07 
// version : 0.2
(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($) {


	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;\
	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);
	}

	function getSTO() {
		//import localStorage.mysto to stotage
		var sto;
		if (localStorage.getItem('wxz-sto') !== null) {
			sto = JSON.parse(localStorage.getItem('wxz-sto'));
		} else {
			sto = {};
		}
		return sto;
	}

	function upDateSTO(storage) {

		localStorage.setItem('wxz-sto', JSON.stringify(storage)); //update localStorage.mysto with storage

	}

	function addNoteToStorage(keyName, x, y, text) {
		var path = {},
			temp = {},
			storage = getSTO(); //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;
	}

	function removeNoteFromStorage(keyName) {

		var path = {},
			storage = getSTO();
		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('*');
		});

	}

	function loadNotes() {
		var
			noteList,
			storage = getSTO();
		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');
	}

	// function showNotes() {
	// 	$("wxz-noteDiv").css({
	// 		'display': 'inline'
	// 	});
	// }

	// function closeNotes() {
	// 	$("wxz-noteDiv").css({
	// 		'display': 'none'
	// 	});
	// }

	return {

		init: function() {
			// GM_registerMenuCommand("显示全部笔记...", showNotes, "s");
			// GM_registerMenuCommand("关闭笔记...", closeNotes, "c");
			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();