https://let.hatelabo.jp/Griever/rss
Bookmarklets from Griever
-
https://let.hatelabo.jp/Griever/let/gYC-xpSd8bClTA
2010-05-16T16:06:51Z
クリックした要素を始点にツリーを作る（CSS セレクタ風）
Griever
[Let] inspect
<a href="javascript:%22https%3A%2F%2Flet.st-hatelabo.com%2FGriever%2Flet%2FgYC-xpSd8bClTA.bookmarklet.js%20%28arg%29%22.replace%28%2F%28%5CS%2B%29%5Cs%2B%28%5CS%2A%29%2F%2Cfunction%28s%2Curl%2Carg%29%7Bs%3Ddocument.createElement%28%22script%22%29%3Bs.charset%3D%22utf-8%22%3Bs.src%3Durl%2B%22%3Fs%3D%22%2BencodeURIComponent%28arg%29%3Bdocument.body.appendChild%28s%29%7D%29%3Bvoid%280%29%3B">inspect</a><pre>/*
* @title inspect
* @description クリックした要素を始点にツリーを作る（CSS セレクタ風）
* @include http://*
* @license MIT License
* @require
*/
javascript:({
isChrome: !!window.chrome,
handleEvent: function(event) {
switch (event.type) {
case 'mouseover':
this.target = event.target;
this.highlight();
this.relatedTarget = this.target;
break;
case 'click':
if (event.button != 0)
return;
event.preventDefault();
event.stopPropagation();
var self = this;
setTimeout(function(){
document.removeEventListener('click', self, true);
}, 10);
document.removeEventListener('mouseover', self, false);
self.relatedTarget = self.target;
self.lowlight();
self.tree();
break;
}
},
highlight: function() {
if (this.relatedTarget)
this.lowlight();
this.targetStyle = this.target.getAttribute('style');
this.target.style.outline = 'red 2px solid';
this.target.style.outlineOffset = '2px';
this.target.style.MozOutlineRadius = '6px';
},
lowlight: function() {
if (!this.relatedTarget)
return;
if (this.targetStyle == null && !this.isChrome)
this.relatedTarget.removeAttribute('style');
else
this.relatedTarget.setAttribute('style', this.targetStyle || '');
},
tree: function() {
var tw = document.createTreeWalker(
this.target,
NodeFilter.SHOW_ELEMENT,
null,
false);
var spc = ' ';
var indent = 0;
var resArray = [];
var node = tw.root;
while (node) {
resArray.push(Array(indent+1).join(spc) + getAttr(node));
if (!node.nextElementSibling && !node.firstElementChild)
indent--;
while (node = tw.firstChild()) {
indent++;
resArray.push(Array(indent+1).join(spc) + getAttr(node));
}
node = tw.nextNode();
}
var res = resArray.join('\n');
if (this.isChrome)
res = res.replace(/\[style=\"\"\]/g, '');
alert(res);
function getAttr(elem) {
var attrs = elem.attributes;
var res = elem.localName;
if (elem.hasAttribute('id'))
res += '#' + elem.id;
if (elem.hasAttribute('class'))
res += '.' + elem.className.replace(/^\s+|\s+$/g, '').replace(/\s+/g, '.');
for (var i = 0, a; a = attrs[i]; i++) {
if (a.nodeName === 'id' || a.nodeName === 'class')
continue;
res += '[' + a.nodeName + '="' + a.nodeValue + '"]'
}
return res;
}
},
init: function() {
document.addEventListener('click', this, true);
document.addEventListener('mouseover', this, false);
},
}).init();
</pre>
-
https://let.hatelabo.jp/Griever/let/gYC-xpPCtc6XCg
2010-05-15T13:28:21Z
マウスカーソルを動かすと背景色が変わるお遊び
Griever
[Let] Test
<a href="javascript:%22https%3A%2F%2Flet.st-hatelabo.com%2FGriever%2Flet%2FgYC-xpPCtc6XCg.bookmarklet.js%20%28arg%29%22.replace%28%2F%28%5CS%2B%29%5Cs%2B%28%5CS%2A%29%2F%2Cfunction%28s%2Curl%2Carg%29%7Bs%3Ddocument.createElement%28%22script%22%29%3Bs.charset%3D%22utf-8%22%3Bs.src%3Durl%2B%22%3Fs%3D%22%2BencodeURIComponent%28arg%29%3Bdocument.body.appendChild%28s%29%7D%29%3Bvoid%280%29%3B">Test</a><pre>/*
* @title Test
* @description マウスカーソルを動かすと背景色が変わるお遊び
* @include http://*
* @license MIT License
* @require
*/
javascript:document.addEventListener('mousemove', function(e) {
var h = Math.floor(e.clientX / innerWidth * 360);
var s = Math.floor(e.clientY / innerHeight * 100);
document.documentElement.style.backgroundColor =
document.body.style.backgroundColor = 'hsl(' + h + ', ' + s + '%, 50%)';
}, false);
</pre>