Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui cleaning.

Browse Source 
inb4 'px' is necessary, it isn't.
This commit is contained in:
Nicolas Stepien 2011-07-01 06:34:02 +02:00
parent d313fb7760
commit 8a8d1af59b
2 changed files with 53 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
4chan_x.user.js
View File

@ -170,8 +170,8 @@
})(null, config); })(null, config);
ui = { ui = {
dialog: function(id, position, html) { dialog: function(id, position, html) {
var el, left, top, _ref, _ref2, _ref3, _ref4; var el, left, top, _ref, _ref2;
el = document.createElement('div'); el = d.createElement('div');
el.className = 'reply dialog'; el.className = 'reply dialog';
el.innerHTML = html; el.innerHTML = html;
el.id = id; el.id = id;
@ -181,84 +181,73 @@
if (left) { if (left) {
el.style.left = left; el.style.left = left;
} else { } else {
el.style.right = '0px'; el.style.right = 0;
} }
if (top) { if (top) {
el.style.top = top; el.style.top = top;
} else { } else {
el.style.bottom = '0px'; el.style.bottom = 0;
}
if ((_ref3 = el.querySelector('div.move')) != null) {
_ref3.addEventListener('mousedown', ui.dragstart, false);
}
if ((_ref4 = el.querySelector('div.move a[name=close]')) != null) {
_ref4.addEventListener('click', (function() {
return el.parentNode.removeChild(el);
}), false);
} }
el.querySelector('div.move').addEventListener('mousedown', ui.dragstart, false);
return el; return el;
}, },
dragstart: function(e) { dragstart: function(e) {
var d, el, rect; var el, rect;
e.preventDefault(); e.preventDefault();
ui.el = el = this.parentNode; ui.el = el = this.parentNode;
d = document;
d.addEventListener('mousemove', ui.drag, false); d.addEventListener('mousemove', ui.drag, false);
d.addEventListener('mouseup', ui.dragend, false); d.addEventListener('mouseup', ui.dragend, false);
rect = el.getBoundingClientRect(); rect = el.getBoundingClientRect();
ui.dx = e.clientX - rect.left; ui.dx = e.clientX - rect.left;
ui.dy = e.clientY - rect.top; ui.dy = e.clientY - rect.top;
ui.width = document.body.clientWidth - el.offsetWidth; ui.width = d.body.clientWidth - el.offsetWidth;
return ui.height = document.body.clientHeight - el.offsetHeight; return ui.height = d.body.clientHeight - el.offsetHeight;
}, },
drag: function(e) { drag: function(e) {
var bottom, el, left, right, top; var bottom, el, left, right, top;
e.preventDefault();
el = ui.el; el = ui.el;
left = e.clientX - ui.dx; left = e.clientX - ui.dx;
if (left < 10) { if (left < 10) {
left = '0px'; left = '0';
} else if (ui.width - left < 10) { } else if (ui.width - left < 10) {
left = ''; left = null;
} }
right = left ? '' : '0px'; right = left ? null : 0;
el.style.left = left;
el.style.right = right;
top = e.clientY - ui.dy; top = e.clientY - ui.dy;
if (top < 10) { if (top < 10) {
top = '0px'; top = '0';
} else if (ui.height - top < 10) { } else if (ui.height - top < 10) {
top = ''; top = null;
} }
bottom = top ? '' : '0px'; bottom = top ? null : 0;
el.style.top = top; el.style.top = top;
return el.style.bottom = bottom; el.style.right = right;
el.style.bottom = bottom;
return el.style.left = left;
}, },
dragend: function() { dragend: function() {
var d, el, id; var el, id;
el = ui.el; el = ui.el;
id = el.id; id = el.id;
localStorage["" + id + "Left"] = el.style.left; localStorage["" + id + "Left"] = el.style.left;
localStorage["" + id + "Top"] = el.style.top; localStorage["" + id + "Top"] = el.style.top;
d = document;
d.removeEventListener('mousemove', ui.drag, false); d.removeEventListener('mousemove', ui.drag, false);
return d.removeEventListener('mouseup', ui.dragend, false); return d.removeEventListener('mouseup', ui.dragend, false);
}, },
hover: function(e) { hover: function(e) {
var bot, clientHeight, clientWidth, clientX, clientY, el, height, top, _ref; var clientHeight, clientWidth, clientX, clientY, el, height, top, _ref;
clientX = e.clientX, clientY = e.clientY; clientX = e.clientX, clientY = e.clientY;
el = ui.el; el = ui.el;
_ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth; _ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth;
height = el.offsetHeight; height = el.offsetHeight;
top = clientY - 120; top = clientY - 120;
bot = top + height; el.style.top = clientHeight < height || top < 0 ? 0 : top + height > clientHeight ? clientHeight - height : top;
el.style.top = clientHeight < height || top < 0 ? '0px' : bot > clientHeight ? clientHeight - height + 'px' : top + 'px';
if (clientX < clientWidth - 400) { if (clientX < clientWidth - 400) {
el.style.left = clientX + 45 + 'px'; el.style.left = clientX + 45;
return el.style.right = ''; return el.style.right = null;
} else { } else {
el.style.left = ''; el.style.left = null;
return el.style.right = clientWidth - clientX + 45 + 'px'; return el.style.right = clientWidth - clientX + 45;
} }
}, },
hoverend: function(e) { hoverend: function(e) {
@ -1381,6 +1370,9 @@
$.bind($('input[name=name]', dialog), 'mousedown', function(e) { $.bind($('input[name=name]', dialog), 'mousedown', function(e) {
return e.stopPropagation(); return e.stopPropagation();
}); });
$.bind($('a[name=close]', dialog), 'click', function() {
return $.rm(dialog);
});
$.bind($('#autohide', dialog), 'click', qr.cb.autohide); $.bind($('#autohide', dialog), 'click', qr.cb.autohide);
$.bind($('img', dialog), 'click', Recaptcha.reload); $.bind($('img', dialog), 'click', Recaptcha.reload);
if ($('.postarea label')) { if ($('.postarea label')) {

55
script.coffee
View File

@ -98,24 +98,21 @@ _config = {}
ui = ui =
dialog: (id, position, html) -> dialog: (id, position, html) ->
el = document.createElement 'div' el = d.createElement 'div'
el.className = 'reply dialog' el.className = 'reply dialog'
el.innerHTML = html el.innerHTML = html
el.id = id el.id = id
{left, top} = position {left, top} = position
left = localStorage["#{id}Left"] ? left left = localStorage["#{id}Left"] ? left
top = localStorage["#{id}Top"] ? top top = localStorage["#{id}Top"] ? top
if left then el.style.left = left else el.style.right = '0px' if left then el.style.left = left else el.style.right = 0
if top then el.style.top = top else el.style.bottom = '0px' if top then el.style.top = top else el.style.bottom = 0
el.querySelector('div.move')?.addEventListener 'mousedown', ui.dragstart, false el.querySelector('div.move').addEventListener 'mousedown', ui.dragstart, false
el.querySelector('div.move a[name=close]')?.addEventListener 'click',
(-> el.parentNode.removeChild(el)), false
el el
dragstart: (e) -> dragstart: (e) ->
#prevent text selection #prevent text selection
e.preventDefault() e.preventDefault()
ui.el = el = @parentNode ui.el = el = @parentNode
d = document
d.addEventListener 'mousemove', ui.drag, false d.addEventListener 'mousemove', ui.drag, false
d.addEventListener 'mouseup', ui.dragend, false d.addEventListener 'mouseup', ui.dragend, false
#distance from pointer to el edge is constant; calculate it here. #distance from pointer to el edge is constant; calculate it here.
@ -124,23 +121,24 @@ ui =
ui.dx = e.clientX - rect.left ui.dx = e.clientX - rect.left
ui.dy = e.clientY - rect.top ui.dy = e.clientY - rect.top
#factor out el from document dimensions #factor out el from document dimensions
ui.width = document.body.clientWidth - el.offsetWidth ui.width = d.body.clientWidth - el.offsetWidth
ui.height = document.body.clientHeight - el.offsetHeight ui.height = d.body.clientHeight - el.offsetHeight
drag: (e) -> drag: (e) ->
e.preventDefault()
{el} = ui {el} = ui
left = e.clientX - ui.dx left = e.clientX - ui.dx
if left < 10 then left = '0px' if left < 10 then left = '0'
else if ui.width - left < 10 then left = '' else if ui.width - left < 10 then left = null
right = if left then '' else '0px' right = if left then null else 0
el.style.left = left
el.style.right = right
top = e.clientY - ui.dy top = e.clientY - ui.dy
if top < 10 then top = '0px' if top < 10 then top = '0'
else if ui.height - top < 10 then top = '' else if ui.height - top < 10 then top = null
bottom = if top then '' else '0px' bottom = if top then null else 0
el.style.top = top #using null instead of '' is 4% faster
#these 4 statements are 40% faster than 1 style.cssText
el.style.top = top
el.style.right = right
el.style.bottom = bottom el.style.bottom = bottom
el.style.left = left
dragend: -> dragend: ->
#{id} = {el} = ui #{id} = {el} = ui
#equivalent to #equivalent to
@ -149,7 +147,6 @@ ui =
{id} = el {id} = el
localStorage["#{id}Left"] = el.style.left localStorage["#{id}Left"] = el.style.left
localStorage["#{id}Top"] = el.style.top localStorage["#{id}Top"] = el.style.top
d = document
d.removeEventListener 'mousemove', ui.drag, false d.removeEventListener 'mousemove', ui.drag, false
d.removeEventListener 'mouseup', ui.dragend, false d.removeEventListener 'mouseup', ui.dragend, false
hover: (e) -> hover: (e) ->
@ -159,21 +156,20 @@ ui =
height = el.offsetHeight height = el.offsetHeight
top = clientY - 120 top = clientY - 120
bot = top + height
el.style.top = el.style.top =
if clientHeight < height or top < 0 if clientHeight < height or top < 0
'0px' 0
else if bot > clientHeight else if top + height > clientHeight
clientHeight - height + 'px' clientHeight - height
else else
top + 'px' top
if clientX < clientWidth - 400 if clientX < clientWidth - 400
el.style.left = clientX + 45 + 'px' el.style.left = clientX + 45
el.style.right = '' el.style.right = null
else else
el.style.left = '' el.style.left = null
el.style.right = clientWidth - clientX + 45 + 'px' el.style.right = clientWidth - clientX + 45
hoverend: (e) -> hoverend: (e) ->
ui.el.style.top = 'auto' ui.el.style.top = 'auto'
@ -1109,6 +1105,7 @@ qr =
dialog = ui.dialog 'qr', top: '0px', left: '0px', html dialog = ui.dialog 'qr', top: '0px', left: '0px', html
$.bind $('input[name=name]', dialog), 'mousedown', (e) -> e.stopPropagation() $.bind $('input[name=name]', dialog), 'mousedown', (e) -> e.stopPropagation()
$.bind $('a[name=close]', dialog), 'click', -> $.rm dialog
$.bind $('#autohide', dialog), 'click', qr.cb.autohide $.bind $('#autohide', dialog), 'click', qr.cb.autohide
$.bind $('img', dialog), 'click', Recaptcha.reload $.bind $('img', dialog), 'click', Recaptcha.reload