opera:hige

■ [UserJs]付箋紙User Javascript制作中 17:58

追記

今後の更新は、http://www14.plala.or.jp/operairc/customize/userjavascript.html#fusen で行っていきます。

使いかた。

ArrayCookie2.js(id:usopion)とdom-drag.jsをUser Javascriptディレクトリに入れる。

で、下のコードを新しいjsファイルとして同じくUser Javascriptディレクトリに入れる。

新しく付箋を作る場合は,

javascript:textbox('hoge','0','0');

をブックマークレットから呼び出す。

現在登録した付箋を削除する機能はありません。消す場合には面倒だけど、Preferences>Advanced>Cookies>Manage Cookiesより"Comments"で検索してクッキーを消してください。

スクリーンショット

コード

document.addEventListener('load',addComment,false);

function addComment() {
	var arrayData = new ArrayCookie2(document.location.pathname);
	var comments = arrayData.getData('comments');
	if(comments) {
		var comment = arrayData.getArrayData('comments',0);
		var top = arrayData.getArrayData('comments',1);
		var left = arrayData.getArrayData('comments',2);
		textbox(comment,top,left);
	}
}

function textbox(c,t,l) {
	var downed = false;
	
	var div = cElement('div');
	div.id = 'cmmntsdiv';
	var dStyle = div.style;
	dStyle.width = '200px';
	dStyle.height = '150px';
	dStyle.position = 'absolute';
	dStyle.margin = '0';
	dStyle.padding = '0 0 5px 0';
	dStyle.zIndex = '100';
	dStyle.top = t;
	dStyle.left = l;
	dStyle.background = '#fff';
	dStyle.border = '1px #000 solid';
	dStyle.textAlign = 'left';

	var titlebar = cElement('p');
	var bStyle = titlebar.style;
	bStyle.margin = '0';
	bStyle.width = '100%';
	bStyle.background = '#333';
	bStyle.textAlign = 'center';
	bStyle.color = '#fff';
	bStyle.fontWeight = 'bold';
	titlebar.appendChild(document.createTextNode('Comments'));
	div.appendChild(titlebar);

	var ta = cElement('textarea');
	ta.id = 'cmmnts';
	ta.value = c;
	var tStyle= ta.style;
	tStyle.background = '#fff';
	tStyle.borderWidth = '0';
	tStyle.width = '198px';
	tStyle.height = '110px';
	tStyle.overflow = 'hidden';
	div.appendChild(ta);

	var br = cElement('br');
	div.appendChild(br);

	var savebtn = cElement('input');
	savebtn.type = 'button';
	savebtn.onclick = save;
	savebtn.value = 'save';
	savebtn.style.margin = '0 5px';
	div.appendChild(savebtn);

	var removebtn = cElement('input');
	removebtn.type = 'button';
	removebtn.onclick = remove;
	removebtn.style.margin = '0 5px'
	removebtn.value = 'remove';
	div.appendChild(removebtn);

	document.body.appendChild(div);
	Drag.init($('cmmntsdiv'));
}

function save() {
	var comments = $('cmmnts').value;
	var top = $('cmmntsdiv').style.top;
	var left = $('cmmntsdiv').style.left;
	var arrayData = new ArrayCookie2(document.location.pathname);
	arrayData.setData('comments',comments,30);
	arrayData.addData('comments',top,30);
	arrayData.addData('comments',left,30);
}

function remove() {
	document.body.removeChild($('cmmntsdiv'));
	var arrayData = new ArrayCookie2(document.location.pathname);
	arrayData.setData('comments','',0);
}

	
function $(id) {
	return document.getElementById(id);
}

function cElement(element) {
	return document.createElement(element);
}

既知の問題/今後の課題

• ドラッグアンドドロップ(付箋の移動)がうまくいかない。これはひどい。 dom-drag.jsを導入することで解決。
• スタイルの見直し。サイトによってはスタイルが崩れる。
• クッキーの削除。Thanx,usopion!
• 既にコメントを付けてる場合の処理。
• 付箋の大きさを変更できるようにする。