Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Регистрация Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Блоги > e4xu

Всякие разные штуки сомнительной полезности сделанные в свободное от работы время.
Рейтинг: 5.00. Голосов: 3.

Навигация по HTML с WASD

Запись от wvxvw размещена 09.06.2012 в 16:59
Обновил(-а) wvxvw 09.06.2012 в 18:50

В прошлый раз я писал о том, как настроить Эмакс на разработку JavaScript. В продолжение, родился вот такой вот пример использования keysnail. Возможно, вам покажется полезным.

Название: wasd-css-display.png
Просмотров: 2041

Размер: 12.3 Кб

Что делает: перемещается по дереву HTML документа по клавишам WASD (к родительскому элементу, к первому дочернему элементу, к предыдущему элементу или к следующему элемену, подсвечивает выбранный элемент и показывает его рассчитанные стили. Удобно для того, чтобы понимать что произошло впоследствие изменения этих самых стилей.
Конечно, что-то очень похожее есть и в Firebug, но что мне в нем мешало, так это то, что часто этлементы смещаются изза использования панельки, или скрываются особенно плохо, если они реагируют на движение мышки. Используя нижеприведенный скрипт можно перемещаться по документу "не нарушая спокойствия". Возможно, в будущем стоит задуматься о том, чтобы добавить больше деталей (например, перечислить все свойства самого элемента), но мне нужны были именно стили.

Скрипт вызывается по M-x wasd-activate, выключается по M-x wasd-deactivate или просто q (wasd-deactivate будет сложно напечатать ).

Код AS1/AS2:
function wasd_deactivate () {
    var d = window.getBrowser().contentDocument;
    var mask = d.getElementById('wasd-mask');
    var info = d.getElementById('wasd-info');
 
    if (mask) mask.parentNode.removeChild(mask);
    if (info) info.parentNode.removeChild(info);
    delete key.keyMapHolder[key.modes.GLOBAL]['w'];
    delete key.keyMapHolder[key.modes.GLOBAL]['a'];
    delete key.keyMapHolder[key.modes.GLOBAL]['s'];
    delete key.keyMapHolder[key.modes.GLOBAL]['d'];
    delete key.keyMapHolder[key.modes.GLOBAL]['q'];
}
 
ext.add('wasd-deactivate', wasd_deactivate,
	M({ en: 'Turns W-A-S-D HTML navigation off',
	    ru: 'Отключает W-A-S-D навигацию по HTML' }));
 
function wasd_activate () {
    var d = window.getBrowser().contentDocument;
    var w = window.getBrowser().contentWindow.wrappedJSObject;
    var current_element = d.body;
    var mask = d.getElementById('wasd-mask');
    var info = d.getElementById('wasd-info');
    var s = '';
 
    key.setGlobalKey('q', wasd_deactivate);
    if (!mask) {
	mask = d.createElement('div');
	mask.innerHTML = ' ';
	mask.id = 'wasd-mask';
	mask.style.cssText = 'position: absolute; display: block;' +
	    'top: 0px; left: 0px; ' +
	    'background-color: rgba(255, 0, 0, 0.5); width: 100px; height: 100px;';
	current_element.appendChild(mask);
    }
 
    if (!info) {
	info = d.createElement('div');
	info.innerHTML = ' ';
	info.id = 'wasd-info';
	info.style.cssText = 'position: absolute; display: block;' +
	    'top: 0px; left: 0px; border: 1px solid #ff0000; color: #000;' +
	    'background-color: #ffffff; width: 300px; height: 200px;' +
	    'font-family: monospace; font-size: 11px; overflow: scroll;';
	current_element.appendChild(info);
    }
 
    function reporStyles (e) {
	var r = '<ul>';
	var s = w.getComputedStyle(e, null);
	var p;
 
	for (var i = 0; i < s.length; i++) {
	    p = s.item(i);
	    r += '<li><b>' + p + '</b>&nbsp;' + s.getPropertyValue(p) + '</li>';
	}
	return r + '</ul>';
    }
 
    function localToGlobal(c, o) {
	var x = c.offsetLeft;
	var y = c.offsetTop;
	o.x += (x | 0); o.y += (y | 0);
	if (!c.offsetParent) {
	    return o;
	} else {
	    return localToGlobal(c.offsetParent, o);
	}
    }
 
    function redraw () {
	var p = localToGlobal(current_element, { x: 0, y: 0 });
	mask.style.top = p.y + 'px';
	mask.style.left = p.x + 'px';
	mask.style.width = current_element.offsetWidth + 'px';
	mask.style.height = current_element.offsetHeight + 'px';
	info.style.top = (p.y + (current_element.offsetHeight | 0)) + 'px';
	info.style.left = p.x + 'px';
	info.innerHTML = reporStyles(current_element);
    }
 
    key.setGlobalKey(
	'w',
	function () {
	    if (current_element.parentNode &&
		current_element.parentNode.firstChild != current_element) {
		var p = current_element.parentNode;
		for (var i = p.childNodes.length - 1, c, f;i >= 0; i--) {
		    c = p.childNodes[i];
		    if (f && c.nodeType == 1) {
			current_element = c;
			break;
		    }
		    else if (c == current_element) {
			f = true;
		    }
		}
		redraw();
	    }
	});
    key.setGlobalKey(
	'a',
	function () {
	    if (current_element.parentNode) {
		current_element = current_element.parentNode;
		redraw();
	    }
	});
    key.setGlobalKey(
	's',
	function () {
	    if (current_element.parentNode &&
		current_element.parentNode.lastChild != current_element) {
		var p = current_element.parentNode;
		for (var i = 0, c, f; i < p.childNodes.length; i++) {
		    c = p.childNodes[i];
		    if (f && c.nodeType == 1) {
			current_element = c;
			break;
		    }
		    else if (c == current_element) {
			f = true;
		    }
		}
		redraw();
	    }
	});
    key.setGlobalKey(
	'd',
	function () {
	    if (current_element.firstChild &&
		current_element.firstChild.nodeType == 1) {
		current_element = current_element.firstChild;
		redraw();
	    }
	    else if (current_element.childNodes.length > 1) {
		for (var i = 1, p = current_element.childNodes, c;
		     i < p.length; i++) {
		    c = p[i];
		    if (c.nodeType == 1) {
			current_element = c;
			redraw();
			break;
		    }
		}
	    }
	});
}
 
ext.add('wasd-activate', wasd_activate,
	M({ en: 'Allows navigating HTML elements with W-A-S-D keys',
	    ru: 'Позволяет навигацию HTML элементов по W-A-S-D клавишам' }));
На картинке: скрипт примененный на странице форума.

Картинка кликабельна, по ссылке видео иллюстрирующее как оно работает.
Всего комментариев 0

Комментарии

 

 


Часовой пояс GMT +4, время: 16:54.


Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2019, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.