ui cleaning.
inb4 'px' is necessary, it isn't.
This commit is contained in:
Nicolas Stepien
parent
d313fb7760
commit
8a8d1af59b
@ -170,8 +170,8 @@
|
||||
})(null, config);
|
||||
ui = {
|
||||
dialog: function(id, position, html) {
|
||||
var el, left, top, _ref, _ref2, _ref3, _ref4;
|
||||
el = document.createElement('div');
|
||||
var el, left, top, _ref, _ref2;
|
||||
el = d.createElement('div');
|
||||
el.className = 'reply dialog';
|
||||
el.innerHTML = html;
|
||||
el.id = id;
|
||||
@ -181,84 +181,73 @@
|
||||
if (left) {
|
||||
el.style.left = left;
|
||||
} else {
|
||||
el.style.right = '0px';
|
||||
el.style.right = 0;
|
||||
}
|
||||
if (top) {
|
||||
el.style.top = top;
|
||||
} else {
|
||||
el.style.bottom = '0px';
|
||||
}
|
||||
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.style.bottom = 0;
|
||||
}
|
||||
el.querySelector('div.move').addEventListener('mousedown', ui.dragstart, false);
|
||||
return el;
|
||||
},
|
||||
dragstart: function(e) {
|
||||
var d, el, rect;
|
||||
var el, rect;
|
||||
e.preventDefault();
|
||||
ui.el = el = this.parentNode;
|
||||
d = document;
|
||||
d.addEventListener('mousemove', ui.drag, false);
|
||||
d.addEventListener('mouseup', ui.dragend, false);
|
||||
rect = el.getBoundingClientRect();
|
||||
ui.dx = e.clientX - rect.left;
|
||||
ui.dy = e.clientY - rect.top;
|
||||
ui.width = document.body.clientWidth - el.offsetWidth;
|
||||
return ui.height = document.body.clientHeight - el.offsetHeight;
|
||||
ui.width = d.body.clientWidth - el.offsetWidth;
|
||||
return ui.height = d.body.clientHeight - el.offsetHeight;
|
||||
},
|
||||
drag: function(e) {
|
||||
var bottom, el, left, right, top;
|
||||
e.preventDefault();
|
||||
el = ui.el;
|
||||
left = e.clientX - ui.dx;
|
||||
if (left < 10) {
|
||||
left = '0px';
|
||||
left = '0';
|
||||
} else if (ui.width - left < 10) {
|
||||
left = '';
|
||||
left = null;
|
||||
}
|
||||
right = left ? '' : '0px';
|
||||
el.style.left = left;
|
||||
el.style.right = right;
|
||||
right = left ? null : 0;
|
||||
top = e.clientY - ui.dy;
|
||||
if (top < 10) {
|
||||
top = '0px';
|
||||
top = '0';
|
||||
} else if (ui.height - top < 10) {
|
||||
top = '';
|
||||
top = null;
|
||||
}
|
||||
bottom = top ? '' : '0px';
|
||||
bottom = top ? null : 0;
|
||||
el.style.top = top;
|
||||
return el.style.bottom = bottom;
|
||||
el.style.right = right;
|
||||
el.style.bottom = bottom;
|
||||
return el.style.left = left;
|
||||
},
|
||||
dragend: function() {
|
||||
var d, el, id;
|
||||
var el, id;
|
||||
el = ui.el;
|
||||
id = el.id;
|
||||
localStorage["" + id + "Left"] = el.style.left;
|
||||
localStorage["" + id + "Top"] = el.style.top;
|
||||
d = document;
|
||||
d.removeEventListener('mousemove', ui.drag, false);
|
||||
return d.removeEventListener('mouseup', ui.dragend, false);
|
||||
},
|
||||
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;
|
||||
el = ui.el;
|
||||
_ref = d.body, clientHeight = _ref.clientHeight, clientWidth = _ref.clientWidth;
|
||||
height = el.offsetHeight;
|
||||
top = clientY - 120;
|
||||
bot = top + height;
|
||||
el.style.top = clientHeight < height || top < 0 ? '0px' : bot > clientHeight ? clientHeight - height + 'px' : top + 'px';
|
||||
el.style.top = clientHeight < height || top < 0 ? 0 : top + height > clientHeight ? clientHeight - height : top;
|
||||
if (clientX < clientWidth - 400) {
|
||||
el.style.left = clientX + 45 + 'px';
|
||||
return el.style.right = '';
|
||||
el.style.left = clientX + 45;
|
||||
return el.style.right = null;
|
||||
} else {
|
||||
el.style.left = '';
|
||||
return el.style.right = clientWidth - clientX + 45 + 'px';
|
||||
el.style.left = null;
|
||||
return el.style.right = clientWidth - clientX + 45;
|
||||
}
|
||||
},
|
||||
hoverend: function(e) {
|
||||
@ -1381,6 +1370,9 @@
|
||||
$.bind($('input[name=name]', dialog), 'mousedown', function(e) {
|
||||
return e.stopPropagation();
|
||||
});
|
||||
$.bind($('a[name=close]', dialog), 'click', function() {
|
||||
return $.rm(dialog);
|
||||
});
|
||||
$.bind($('#autohide', dialog), 'click', qr.cb.autohide);
|
||||
$.bind($('img', dialog), 'click', Recaptcha.reload);
|
||||
if ($('.postarea label')) {
|
||||
|
||||
@ -98,24 +98,21 @@ _config = {}
|
||||
|
||||
ui =
|
||||
dialog: (id, position, html) ->
|
||||
el = document.createElement 'div'
|
||||
el = d.createElement 'div'
|
||||
el.className = 'reply dialog'
|
||||
el.innerHTML = html
|
||||
el.id = id
|
||||
{left, top} = position
|
||||
left = localStorage["#{id}Left"] ? left
|
||||
top = localStorage["#{id}Top"] ? top
|
||||
if left then el.style.left = left else el.style.right = '0px'
|
||||
if top then el.style.top = top else el.style.bottom = '0px'
|
||||
el.querySelector('div.move')?.addEventListener 'mousedown', ui.dragstart, false
|
||||
el.querySelector('div.move a[name=close]')?.addEventListener 'click',
|
||||
(-> el.parentNode.removeChild(el)), false
|
||||
if left then el.style.left = left else el.style.right = 0
|
||||
if top then el.style.top = top else el.style.bottom = 0
|
||||
el.querySelector('div.move').addEventListener 'mousedown', ui.dragstart, false
|
||||
el
|
||||
dragstart: (e) ->
|
||||
#prevent text selection
|
||||
e.preventDefault()
|
||||
ui.el = el = @parentNode
|
||||
d = document
|
||||
d.addEventListener 'mousemove', ui.drag, false
|
||||
d.addEventListener 'mouseup', ui.dragend, false
|
||||
#distance from pointer to el edge is constant; calculate it here.
|
||||
@ -124,23 +121,24 @@ ui =
|
||||
ui.dx = e.clientX - rect.left
|
||||
ui.dy = e.clientY - rect.top
|
||||
#factor out el from document dimensions
|
||||
ui.width = document.body.clientWidth - el.offsetWidth
|
||||
ui.height = document.body.clientHeight - el.offsetHeight
|
||||
ui.width = d.body.clientWidth - el.offsetWidth
|
||||
ui.height = d.body.clientHeight - el.offsetHeight
|
||||
drag: (e) ->
|
||||
e.preventDefault()
|
||||
{el} = ui
|
||||
left = e.clientX - ui.dx
|
||||
if left < 10 then left = '0px'
|
||||
else if ui.width - left < 10 then left = ''
|
||||
right = if left then '' else '0px'
|
||||
el.style.left = left
|
||||
el.style.right = right
|
||||
if left < 10 then left = '0'
|
||||
else if ui.width - left < 10 then left = null
|
||||
right = if left then null else 0
|
||||
top = e.clientY - ui.dy
|
||||
if top < 10 then top = '0px'
|
||||
else if ui.height - top < 10 then top = ''
|
||||
bottom = if top then '' else '0px'
|
||||
el.style.top = top
|
||||
if top < 10 then top = '0'
|
||||
else if ui.height - top < 10 then top = null
|
||||
bottom = if top then null else 0
|
||||
#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.left = left
|
||||
dragend: ->
|
||||
#{id} = {el} = ui
|
||||
#equivalent to
|
||||
@ -149,7 +147,6 @@ ui =
|
||||
{id} = el
|
||||
localStorage["#{id}Left"] = el.style.left
|
||||
localStorage["#{id}Top"] = el.style.top
|
||||
d = document
|
||||
d.removeEventListener 'mousemove', ui.drag, false
|
||||
d.removeEventListener 'mouseup', ui.dragend, false
|
||||
hover: (e) ->
|
||||
@ -159,21 +156,20 @@ ui =
|
||||
height = el.offsetHeight
|
||||
|
||||
top = clientY - 120
|
||||
bot = top + height
|
||||
el.style.top =
|
||||
if clientHeight < height or top < 0
|
||||
'0px'
|
||||
else if bot > clientHeight
|
||||
clientHeight - height + 'px'
|
||||
0
|
||||
else if top + height > clientHeight
|
||||
clientHeight - height
|
||||
else
|
||||
top + 'px'
|
||||
top
|
||||
|
||||
if clientX < clientWidth - 400
|
||||
el.style.left = clientX + 45 + 'px'
|
||||
el.style.right = ''
|
||||
el.style.left = clientX + 45
|
||||
el.style.right = null
|
||||
else
|
||||
el.style.left = ''
|
||||
el.style.right = clientWidth - clientX + 45 + 'px'
|
||||
el.style.left = null
|
||||
el.style.right = clientWidth - clientX + 45
|
||||
|
||||
hoverend: (e) ->
|
||||
ui.el.style.top = 'auto'
|
||||
@ -1109,6 +1105,7 @@ qr =
|
||||
dialog = ui.dialog 'qr', top: '0px', left: '0px', html
|
||||
|
||||
$.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 $('img', dialog), 'click', Recaptcha.reload
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user