Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 09.07.2009, 06:03
Кандидат Javascript-наук
Отправить личное сообщение для `p r o x y Посмотреть профиль Найти все сообщения от `p r o x y
 
Регистрация: 04.05.2009
Сообщений: 105

окей, а как вот такой вариант:

// When a generated page (in PHP, Perl or something else)
// need add to each post (DIV, TABLE, TR, TD): onmouseover="qq.Nick='user nick'"
// Exsample for PHP: echo '<tr class="bugnote" id="'.$postId.'" onmouseover="qq.Nick=\''.$userNick.'\'">';

var qq = {

	// QuickQuote Settings
	LinkShowTime	: 3000,
	LinkId  		: 'quickQuote',
	LinkStyle		: 'z-index:1000; cursor:pointer; position:absolute; visibility:hidden',
	LinkText		: '<b>Цитировать</b>',
	TextAreaId   	: 'bugnote_text', // id or name
	// <--------------------
	
	Link : '', TextArea : '', Text : '', Nick : '', TimerId : '',
	
	Install		: function(){
		document.write(	'<div onmousedown="qq.InsertText()" onmouseout="qq.TimerStart()" onmouseover="qq.TimerStop()" \
						class="button" id="'+qq.LinkId+'" style="'+qq.LinkStyle+'">'+qq.LinkText+'</div>');
		
		qq.Link = document.getElementById(qq.LinkId);
		
		document.onclick   = qq.GetSelText;
		document.onmouseup = qq.LinkShow;
	},
	
	TimerStart	: function(){ qq.TimerStop(); qq.TimerId = setTimeout(qq.LinkHide, qq.LinkShowTime); },
	TimerStop	: function(){ clearTimeout(qq.TimerId); },
	LinkHide	: function(){ qq.Link.style.visibility = 'hidden'; },

	LinkShow 	: function(event){
		qq.GetSelText();
		if (qq.Text == '') return;
		
		var mc = event || window.event;
		if (mc.pageX || mc.pageY){
			mc.X = mc.pageX;
			mc.Y = mc.pageY;
		}else if (mc.clientX || mc.clientY){
			mc.X = mc.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			mc.Y = mc.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
		}
		qq.Link.style.left = (mc.X-35)+'px';
		qq.Link.style.top  = (mc.Y+11)+'px';
		qq.Link.style.visibility = 'visible';
		
		qq.TimerStart();
	},
	
	GetSelText	: function(){
		qq.Text = getSelText();
		qq.Text.replace(/(\r?\n\s*){2,}/gi,'\r\n').replace(/^\s+|\s+$/gi,'').replace(/(\ |\t)+/gi,' ');
		if (qq.Text == '') qq.LinkHide();
	},
	
	InsertText	: function(){
		qq.LinkHide();
		if (qq.TextArea == '' || qq.TextArea == null){
			qq.TextArea = document.getElementById(qq.TextAreaId);
			if (qq.TextArea == null) qq.TextArea = document.getElementsByName(qq.TextAreaId)[0];
		}
		if (qq.TextArea == null) return;
		
		if (navigator.appName == 'Opera') qq.Text = '[q]'+qq.Nick+': ' + qq.Text + '[/q]\r\n';
		else qq.Text = '[q]'+qq.Nick+': ' + qq.Text + '[/q]\n';
		
		insertText(qq.TextArea, qq.Text);
	}
};

// Common functions
function saveCaretPos(event){
    event = event || window.event;
    var obj = event.target || event.srcElement;
    if (typeof(document.selection) != 'undefined' && typeof(document.selection.createRange) != 'undefined')
    obj.caretPos = document.selection.createRange().duplicate();
}
function getSelText(){
	if (window.getSelection && !window.opera) 	var selText = window.getSelection(); // ff
	else if (document.getSelection) 			var selText = document.getSelection(); // opera
	else if (document.selection) 				var selText = document.selection.createRange().text; // ie
	if (!selText) selText = '';
	return selText.toString();
}
function insertText(obj, text){

	var scrollTop, scrollLeft;
	if (obj.type == 'TEXTAREA' && obj.scrollTop){
		scrollTop = obj.scrollTop;
		scrollLeft = obj.scrollLeft;
	}

	if (window.getSelection || document.getSelection) var caretPos = obj.selectionStart + text.length;
	
	if (obj && obj.caretPos) 
		obj.caretPos.text = text;
	else if (obj && obj.selectionStart+1 && obj.selectionEnd+1)
		obj.value = obj.value.substring(0, obj.selectionStart) + text + obj.value.substring(obj.selectionEnd, obj.value.length);
	else if (obj)
		obj.value += text;
	
	if (window.getSelection || document.getSelection) obj.setSelectionRange(caretPos, caretPos);
	
	if (typeof scrollTop != 'undefined'){
		textObj.scrollTop = scrollTop;
		textObj.scrollLeft = scrollLeft;
	}
}
// <--------------------

// Install QuickQuote
qq.Install();

document.body.onload = function(){
	qq.TextArea = document.getElementById(qq.TextAreaId);
	if (qq.TextArea == null) qq.TextArea = document.getElementsByName(qq.TextAreaId)[0];
	if (qq.TextArea == null) return;
	
	qq.TextArea.onselect = saveCaretPos;
	qq.TextArea.onclick  = saveCaretPos;
	qq.TextArea.onkeyup  = saveCaretPos;
}
// <--------------------



Осталось только разобраться с прокруткой в textarea.
Demo страница

Последний раз редактировалось `p r o x y, 09.07.2009 в 14:42.
Ответить с цитированием
  #32 (permalink)  
Старый 09.07.2009, 06:25
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

можно и так. Минус: рассчитано на одну textarea (хотя мне не приходит в голову ситуация, когда нужно больше). Минус является следствием того, что ты по сути спрятал все в один namespace. Если бы это было реализовано в виде "класса"... но можно и так
Ответить с цитированием
  #33 (permalink)  
Старый 09.07.2009, 07:12
Кандидат Javascript-наук
Отправить личное сообщение для `p r o x y Посмотреть профиль Найти все сообщения от `p r o x y
 
Регистрация: 04.05.2009
Сообщений: 105

Цитата:
Минус: рассчитано на одну textarea
эту разницу я понимаю, именно на это и рассчитываю.

А вот следующий вариант будет на "классе"....

Вопрос: а как проверить, назначен ли объекту обработчик событий: onselect / onclick / onkeyup ?

Последний раз редактировалось `p r o x y, 09.07.2009 в 07:21.
Ответить с цитированием
  #34 (permalink)  
Старый 09.07.2009, 10:21
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

obj.onclick

Возвратит то, что было назначено объекту через свойство:
obj.onclick=function(){
   alert('');
}

или null.

Что добавленно через addEventListener или attachEvent узнать нельзя, разве что только самому сохранять.
Ответить с цитированием
  #35 (permalink)  
Старый 09.07.2009, 12:10
Кандидат Javascript-наук
Отправить личное сообщение для `p r o x y Посмотреть профиль Найти все сообщения от `p r o x y
 
Регистрация: 04.05.2009
Сообщений: 105

ни как не могу победить - установку позиции корректки в textarea для ie.
Пока только через:

qq.TextArea.onselect = saveCaretPos;
qq.TextArea.onclick  = saveCaretPos;
qq.TextArea.onkeyup  = saveCaretPos;

function saveCaretPos(event){
    event = event || window.event;
    var obj = event.target || event.srcElement;
    if (typeof(document.selection) != 'undefined' && typeof(document.selection.createRange) != 'undefined')
    obj.caretPos = document.selection.createRange().duplicate();
}


Хотя для Opera и FF отлично работает:
obj.setSelectionRange(caretPos, caretPos);


Может для ie есть вариант подобный setSelectionRange?
Ответить с цитированием
  #36 (permalink)  
Старый 09.07.2009, 14:19
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Для ИЕ есть метод window.getSelection().
Возвращает выделенный текст. Пока только знаю метод removeAllRanges(), который снимает выделение. По поводу других пользуемся конструкцией var in и гуглом.
Ответить с цитированием
  #37 (permalink)  
Старый 09.07.2009, 14:25
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Можно создать новый TextRange и сдвинуть его границы в нужную позицию
Ответить с цитированием
  #38 (permalink)  
Старый 09.07.2009, 16:17
Кандидат Javascript-наук
Отправить личное сообщение для `p r o x y Посмотреть профиль Найти все сообщения от `p r o x y
 
Регистрация: 04.05.2009
Сообщений: 105

B~Vladi,
дело в том, что getSelection() и removeAllRanges() это только в Opera, FF и т.д. - в IE свое направление на эту тему: selection ............(

Octane,
а можешь привести строку кода для примера, не получается сообразить как выполнить...делаю так:

var obj = document.getElementById('textarea_id');
obj.selection.createRange();

а какой метод дальше? move ? ...ни как не разберусь - все в ошибках постоянно (читаю статью, что ты выше постил).
Кстати, если устанавливать позицию корретки, то как для IE определить в какой позиции она уже стоит?
Ответить с цитированием
  #39 (permalink)  
Старый 09.07.2009, 16:21
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Как-то так:
var obj = document.getElementById('textarea_id');
var range = obj.selection.createRange();
range.moveStart('character', selStart);
range.moveEnd('character', selEnd);
range.select();


Подробнее здесь: Range, TextRange и Selection
Ответить с цитированием
  #40 (permalink)  
Старый 09.07.2009, 17:00
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от `p r o x y
getSelection() и removeAllRanges() это только в Opera, FF и т.д.
Аха, блин, перепутал немного...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
как сделать плавное затухание страницы magistr_bender Элементы интерфейса 1 18.03.2009 14:34
Как сделать справочное окно? Vlaimir Events/DOM/Window 13 05.01.2009 14:06