diff --git a/boards/static/css/base.css b/boards/static/css/base.css --- a/boards/static/css/base.css +++ b/boards/static/css/base.css @@ -22,3 +22,8 @@ .strikethrough { text-decoration: line-through; } + +.post_preview { + z-index: 300; + position:absolute; +} diff --git a/boards/static/js/main.js b/boards/static/js/main.js --- a/boards/static/js/main.js +++ b/boards/static/js/main.js @@ -35,4 +35,6 @@ //addPopups(); addMarkPanel(); + + addRefLinkPreview(); }); diff --git a/boards/static/js/refpopup.js b/boards/static/js/refpopup.js new file mode 100644 --- /dev/null +++ b/boards/static/js/refpopup.js @@ -0,0 +1,198 @@ +function $X(path, root) { + return document.evaluate(path, root || document, null, 6, null); +} +function $x(path, root) { + return document.evaluate(path, root || document, null, 8, null).singleNodeValue; +} + +function $del(el) { + if(el) el.parentNode.removeChild(el); +} + +function $each(list, fn) { + if(!list) return; + var i = list.snapshotLength; + if(i > 0) while(i--) fn(list.snapshotItem(i), i); +} + +function addRefLinkPreview(node) { + $each($X('.//a[starts-with(text(),">>")]', node || document), function(link) { + link.addEventListener('mouseover', showPostPreview, false); + link.addEventListener('mouseout', delPostPreview, false); + }); +} + +function showPostPreview(e) { + var doc = document; + //ref id + var pNum = $(this).text().match(/\d+/); + + //position + //var x = e.clientX + (doc.documentElement.scrollLeft || doc.body.scrollLeft) - doc.documentElement.clientLeft + 1; + //var y = e.clientY + (doc.documentElement.scrollTop || doc.body.scrollTop) - doc.documentElement.clientTop; + + var x = e.clientX + (doc.documentElement.scrollLeft || doc.body.scrollLeft) + 2; + var y = e.clientY + (doc.documentElement.scrollTop || doc.body.scrollTop); + + var cln = doc.createElement('div'); + cln.id = 'pstprev_' + pNum; + cln.className = 'post_preview post'; + + cln.style.cssText = 'top:' + y + 'px;' + (x < doc.body.clientWidth/2 ? 'left:' + x + 'px' : 'right:' + parseInt(doc.body.clientWidth - x + 1) + 'px'); + + cln.addEventListener('mouseout', delPostPreview, false); + + + var mkPreview = function(cln, html) { + + cln.innerHTML = html; + + addRefLinkPreview(cln); + + //if(!$x('.//small', cln)) showRefMap(post, p_num, refMap) + }; + + + cln.innerHTML = 'Загрузка...'; + + //если пост найден в дереве. + if($('div[id='+pNum+']').length > 0) { + var postdata = $('div[id='+pNum+']').html(); + + //TODO: временно + //funcInit(postdata); + + //make preview + mkPreview(cln, postdata); + } + //ajax api +// else { +// $.getJSON(mayuri_cfg['board_url']+'api/single/'+pNum) +// .success(function(data) { +// //post templates +// var postdata = makeAjaxPost(data).html(); +// +// //TODO: временно +// //funcInit(postdata); +// +// //make preview +// mkPreview(cln, postdata); +// +// })//if error +// .error(function() { +// cln.innerHTML = 'Пост не найден.'; +// }); +// } + + $del(doc.getElementById(cln.id)); + + //add preview + $('body').append(cln); +} + +function delPostPreview(e) { + var el = $x('ancestor-or-self::*[starts-with(@id,"pstprev")]', e.relatedTarget); + if(!el) $each($X('.//div[starts-with(@id,"pstprev")]'), function(clone) { + $del(clone) + }); + else while(el.nextSibling) $del(el.nextSibling); +} + + + + + + +function addPreview() { + $('.post').find('a').each(function() { + showPostPreview($(this)); + }); +} + +function showPreview(node) { + node.each(function() { + //reflink? + if($(this).text().indexOf('>>') == 0) { + //add mouseover event + $(this).on('mouseover', function(e) { + var ref = $(this); + + var doc = document; + //ref id + var pNum = ref.text().match(/\d+/); + + //position + var x = e.clientX + (doc.documentElement.scrollLeft || doc.body.scrollLeft) + 2; + var y = e.clientY + (doc.documentElement.scrollTop || doc.body.scrollTop); + + //create preview block + var cln = $('
', { + id: 'pstprev_' + pNum, + class: 'post_preview post' + }) + .css('cssText', 'top:' + y + 'px;' + (x < doc.body.clientWidth/2 ? 'left:' + x + 'px' : 'right:' + parseInt(doc.body.clientWidth - x + 1) ++ 'px')); + + + var mkPreview = function(cln, html) { + + cln.html(html); + + showPreview($(cln)); + //if(!$x('.//small', cln)) showRefMap(post, p_num, refMap) + }; + + cln.html('Загрузка...'); + + //если пост найден в дереве. + if($('div[id='+pNum+']').length > 0) { + var postdata = $('div[id='+pNum+']').clone().html(); + //TODO: лучше бы вынести в mkPreview + //if($.localStorage('addImgPreview') > 0) showImgPreview($(postdata)); + + //make preview + mkPreview(cln, postdata); + } + //ajax api +// else { +// $.getJSON(mayuri_cfg['board_url']+'api/single/'+pNum) +// .success(function(data) { +// //post templates +// var postdata = makeAjaxPost(data).html(); +// +// //make preview +// mkPreview(cln, postdata); +// +// })//if error +// .error(function() { +// cln.html('Пост не найден.'); +// }); +// } + + $del(doc.getElementById(cln.id)); + + //add preview + $('body').append(cln); + }); + + $(this).on('mouseout', function() { + delPreview($(this)); + }) + } + }); + +} + +function delPreview(e) { + var el = e.relatedTarget; + if(!el) { + $(el).each(function(clone) { + $del(clone) + }); + } + { + while(el.next()) + $del(el.next()); + } +} + diff --git a/boards/templates/boards/base.html b/boards/templates/boards/base.html --- a/boards/templates/boards/base.html +++ b/boards/templates/boards/base.html @@ -28,6 +28,7 @@ +
diff --git a/todo.txt b/todo.txt --- a/todo.txt +++ b/todo.txt @@ -7,6 +7,7 @@ [DONE] Ban reasons. Split bans into 2 types "read-only" and "read denied". Use second only for autoban for spam [DONE] Clean up tests and make them run ALWAYS +[DONE] Use transactions in tests [NOT STARTED] Tree view (JS) [NOT STARTED] Adding tags to images filename @@ -19,7 +20,6 @@ denied". Use second only for autoban for [NOT STARTED] Group tags by first letter in all tags list [NOT STARTED] Show board speed in the lower panel (posts per day) [NOT STARTED] Character counter in the post field -[NOT STARTED] Use transactions in tests [NOT STARTED] Save image thumbnails size to the separate field [NOT STARTED] Whitelist functionality. Permin autoban of an address [NOT STARTED] Split up post model into post and thread,