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

Fix and optimize element rice code

Browse Source
This commit is contained in:
Zixaphir 2014-01-04 14:48:54 -07:00
parent 3d97b39f1b
commit 22bedd63e0
3 changed files with 64 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
builds/appchan-x.user.js
View File

@ -13014,12 +13014,12 @@
select = Rice.input; select = Rice.input;
container = select.nextElementSibling; container = select.nextElementSibling;
container.firstChild.textContent = this.textContent; container.firstChild.textContent = this.textContent;
select.value = this.getAttribute('data-value'); select.value = this.dataset.value;
$.event('change', null, select); $.event('change', null, select);
return Rice.cleanup(); return Rice.cleanup();
}, },
select: function(e) { select: function(e) {
var clientHeight, li, nodes, option, rect, select, style, ul, _i, _len, _ref; var bottom, clientHeight, left, li, nodes, option, select, style, top, ul, width, _i, _len, _ref, _ref1;
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
ul = Rice.ul; ul = Rice.ul;
@ -13032,19 +13032,19 @@
if (ul.children.length > 0) { if (ul.children.length > 0) {
return Rice.cleanup(); return Rice.cleanup();
} }
rect = this.getBoundingClientRect(); _ref = this.getBoundingClientRect(), width = _ref.width, left = _ref.left, bottom = _ref.bottom, top = _ref.top;
clientHeight = d.documentElement.clientHeight; clientHeight = d.documentElement.clientHeight;
style = ul.style; style = ul.style;
style.cssText = ("width: " + rect.width + "px; left: " + rect.left + "px;") + (clientHeight - rect.bottom < 200 ? "bottom: " + (clientHeight - rect.top) + "px" : "top: " + rect.bottom + "px"); style.cssText = ("width: " + width + "px; left: " + left + "px;") + (clientHeight - bottom < 200 ? "bottom: " + (clientHeight - top) + "px" : "top: " + bottom + "px");
Rice.input = select = this.previousSibling; Rice.input = select = this.previousSibling;
nodes = []; nodes = [];
_ref = select.options; _ref1 = select.options;
for (_i = 0, _len = _ref.length; _i < _len; _i++) { for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
option = _ref[_i]; option = _ref1[_i];
li = $.el('li', { li = $.el('li', {
textContent: option.textContent textContent: option.textContent
}); });
li.setAttribute('data-value', option.value); li.dataset.value = option.value;
$.on(li, 'click', Rice.cb.option); $.on(li, 'click', Rice.cb.option);
nodes.push(li); nodes.push(li);
} }
@ -13056,29 +13056,24 @@
} }
}, },
cleanup: function() { cleanup: function() {
var child, _i, _len, _ref;
$.off(d, 'click scroll blur resize', Rice.cleanup); $.off(d, 'click scroll blur resize', Rice.cleanup);
_ref = __slice.call(Rice.ul.children); $.rmAll(Rice.ul);
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
child = _ref[_i];
$.rm(child);
}
}, },
nodes: function(root) { nodes: function(root) {
var checkboxes, checkrice, input, select, selectrice, selects, _i, _j, _len, _len1; var fn;
root || (root = d.body); root || (root = d.body);
checkboxes = $$('[type=checkbox]:not(.riced)', root); fn = function(items, type) {
checkrice = Rice.checkbox; var func, item, _i, _len, _results;
for (_i = 0, _len = checkboxes.length; _i < _len; _i++) { func = Rice[type];
input = checkboxes[_i]; _results = [];
checkrice(input); for (_i = 0, _len = items.length; _i < _len; _i++) {
} item = items[_i];
selects = $$('select:not(.riced)', root); _results.push(func(item));
selectrice = Rice.select; }
for (_j = 0, _len1 = selects.length; _j < _len1; _j++) { return _results;
select = selects[_j]; };
selectrice(select); fn($$('[type=checkbox]:not(.riced)', root), 'checkbox');
} return fn($$('select:not(.riced)', root), 'select');
}, },
node: function() { node: function() {
return Rice.checkbox($('.postInfo input', this.nodes.post)); return Rice.checkbox($('.postInfo input', this.nodes.post));
@ -13097,11 +13092,11 @@
return $.on(div, 'click', Rice.cb.check); return $.on(div, 'click', Rice.cb.check);
}, },
select: function(select) { select: function(select) {
var div, _ref; var div;
$.addClass(select, 'riced'); $.addClass(select, 'riced');
div = $.el('div', { div = $.el('div', {
className: 'selectrice', className: 'selectrice',
innerHTML: "<div>" + (((_ref = select.options[select.selectedIndex || 0]) != null ? _ref.textContent : void 0) || null) + "</div>" innerHTML: "<div>" + (select.options[select.selectedIndex || '0'].textContent || '') + "</div>"
}); });
$.on(div, "click", Rice.cb.select); $.on(div, "click", Rice.cb.select);
return $.after(select, div); return $.after(select, div);

53
builds/crx/script.js
View File

@ -13019,12 +13019,12 @@
select = Rice.input; select = Rice.input;
container = select.nextElementSibling; container = select.nextElementSibling;
container.firstChild.textContent = this.textContent; container.firstChild.textContent = this.textContent;
select.value = this.getAttribute('data-value'); select.value = this.dataset.value;
$.event('change', null, select); $.event('change', null, select);
return Rice.cleanup(); return Rice.cleanup();
}, },
select: function(e) { select: function(e) {
var clientHeight, li, nodes, option, rect, select, style, ul, _i, _len, _ref; var bottom, clientHeight, left, li, nodes, option, select, style, top, ul, width, _i, _len, _ref, _ref1;
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
ul = Rice.ul; ul = Rice.ul;
@ -13037,19 +13037,19 @@
if (ul.children.length > 0) { if (ul.children.length > 0) {
return Rice.cleanup(); return Rice.cleanup();
} }
rect = this.getBoundingClientRect(); _ref = this.getBoundingClientRect(), width = _ref.width, left = _ref.left, bottom = _ref.bottom, top = _ref.top;
clientHeight = d.documentElement.clientHeight; clientHeight = d.documentElement.clientHeight;
style = ul.style; style = ul.style;
style.cssText = ("width: " + rect.width + "px; left: " + rect.left + "px;") + (clientHeight - rect.bottom < 200 ? "bottom: " + (clientHeight - rect.top) + "px" : "top: " + rect.bottom + "px"); style.cssText = ("width: " + width + "px; left: " + left + "px;") + (clientHeight - bottom < 200 ? "bottom: " + (clientHeight - top) + "px" : "top: " + bottom + "px");
Rice.input = select = this.previousSibling; Rice.input = select = this.previousSibling;
nodes = []; nodes = [];
_ref = select.options; _ref1 = select.options;
for (_i = 0, _len = _ref.length; _i < _len; _i++) { for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
option = _ref[_i]; option = _ref1[_i];
li = $.el('li', { li = $.el('li', {
textContent: option.textContent textContent: option.textContent
}); });
li.setAttribute('data-value', option.value); li.dataset.value = option.value;
$.on(li, 'click', Rice.cb.option); $.on(li, 'click', Rice.cb.option);
nodes.push(li); nodes.push(li);
} }
@ -13061,29 +13061,24 @@
} }
}, },
cleanup: function() { cleanup: function() {
var child, _i, _len, _ref;
$.off(d, 'click scroll blur resize', Rice.cleanup); $.off(d, 'click scroll blur resize', Rice.cleanup);
_ref = __slice.call(Rice.ul.children); $.rmAll(Rice.ul);
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
child = _ref[_i];
$.rm(child);
}
}, },
nodes: function(root) { nodes: function(root) {
var checkboxes, checkrice, input, select, selectrice, selects, _i, _j, _len, _len1; var fn;
root || (root = d.body); root || (root = d.body);
checkboxes = $$('[type=checkbox]:not(.riced)', root); fn = function(items, type) {
checkrice = Rice.checkbox; var func, item, _i, _len, _results;
for (_i = 0, _len = checkboxes.length; _i < _len; _i++) { func = Rice[type];
input = checkboxes[_i]; _results = [];
checkrice(input); for (_i = 0, _len = items.length; _i < _len; _i++) {
} item = items[_i];
selects = $$('select:not(.riced)', root); _results.push(func(item));
selectrice = Rice.select; }
for (_j = 0, _len1 = selects.length; _j < _len1; _j++) { return _results;
select = selects[_j]; };
selectrice(select); fn($$('[type=checkbox]:not(.riced)', root), 'checkbox');
} return fn($$('select:not(.riced)', root), 'select');
}, },
node: function() { node: function() {
return Rice.checkbox($('.postInfo input', this.nodes.post)); return Rice.checkbox($('.postInfo input', this.nodes.post));
@ -13102,11 +13097,11 @@
return $.on(div, 'click', Rice.cb.check); return $.on(div, 'click', Rice.cb.check);
}, },
select: function(select) { select: function(select) {
var div, _ref; var div;
$.addClass(select, 'riced'); $.addClass(select, 'riced');
div = $.el('div', { div = $.el('div', {
className: 'selectrice', className: 'selectrice',
innerHTML: "<div>" + (((_ref = select.options[select.selectedIndex || 0]) != null ? _ref.textContent : void 0) || null) + "</div>" innerHTML: "<div>" + (select.options[select.selectedIndex || '0'].textContent || '') + "</div>"
}); });
$.on(div, "click", Rice.cb.select); $.on(div, "click", Rice.cb.select);
return $.after(select, div); return $.after(select, div);

43
src/Theming/Rice.coffee
View File

@ -19,7 +19,7 @@ Rice =
select = Rice.input select = Rice.input
container = select.nextElementSibling container = select.nextElementSibling
container.firstChild.textContent = @textContent container.firstChild.textContent = @textContent
select.value = @getAttribute 'data-value' select.value = @dataset.value
$.event 'change', null, select $.event 'change', null, select
Rice.cleanup() Rice.cleanup()
@ -30,28 +30,26 @@ Rice =
{ul} = Rice {ul} = Rice
unless ul unless ul
Rice.ul = ul = $.el 'ul', Rice.ul = ul = $.el 'ul', id: "selectrice"
id: "selectrice"
$.add d.body, ul $.add d.body, ul
if ul.children.length > 0 if ul.children.length > 0
return Rice.cleanup() return Rice.cleanup()
rect = @getBoundingClientRect() {width, left, bottom, top} = @getBoundingClientRect()
{clientHeight} = d.documentElement {clientHeight} = d.documentElement
{style} = ul {style} = ul
style.cssText = "width: #{rect.width}px; left: #{rect.left}px;" + (if clientHeight - rect.bottom < 200 then "bottom: #{clientHeight - rect.top}px" else "top: #{rect.bottom}px") style.cssText = "width: #{width}px; left: #{left}px;" + (if clientHeight - bottom < 200 then "bottom: #{clientHeight - top}px" else "top: #{bottom}px")
Rice.input = select = @previousSibling Rice.input = select = @previousSibling
nodes = [] nodes = []
for option in select.options for option in select.options
li = $.el 'li', li = $.el 'li', textContent: option.textContent
textContent: option.textContent li.dataset.value = option.value
li.setAttribute 'data-value', option.value
$.on li, 'click', Rice.cb.option $.on li, 'click', Rice.cb.option
nodes.push li nodes.push li
$.add ul, nodes $.add ul, nodes
$.on ul, 'click scroll blur', (e) -> $.on ul, 'click scroll blur', (e) ->
@ -61,26 +59,18 @@ Rice =
cleanup: -> cleanup: ->
$.off d, 'click scroll blur resize', Rice.cleanup $.off d, 'click scroll blur resize', Rice.cleanup
for child in [Rice.ul.children...] $.rmAll Rice.ul
$.rm child
return return
nodes: (root) -> nodes: (root) ->
root or= d.body root or= d.body
checkboxes = $$('[type=checkbox]:not(.riced)', root) fn = (items, type) ->
checkrice = Rice.checkbox func = Rice[type]
func item for item in items
for input in checkboxes fn $$('[type=checkbox]:not(.riced)', root), 'checkbox'
checkrice input fn $$('select:not(.riced)', root), 'select'
selects = $$('select:not(.riced)', root)
selectrice = Rice.select
for select in selects
selectrice select
return
node: -> node: ->
Rice.checkbox $ '.postInfo input', @nodes.post Rice.checkbox $ '.postInfo input', @nodes.post
@ -88,8 +78,7 @@ Rice =
checkbox: (input) -> checkbox: (input) ->
return if $.hasClass input, 'riced' return if $.hasClass input, 'riced'
$.addClass input, 'riced' $.addClass input, 'riced'
div = $.el 'div', div = $.el 'div', className: 'rice'
className: 'rice'
div.check = input div.check = input
$.after input, div $.after input, div
$.on div, 'click', Rice.cb.check $.on div, 'click', Rice.cb.check
@ -98,7 +87,7 @@ Rice =
$.addClass select, 'riced' $.addClass select, 'riced'
div = $.el 'div', div = $.el 'div',
className: 'selectrice' className: 'selectrice'
innerHTML: "<div>#{select.options[select.selectedIndex or 0]?.textContent or null}</div>" innerHTML: "<div>#{select.options[select.selectedIndex or '0'].textContent or ''}</div>"
$.on div, "click", Rice.cb.select $.on div, "click", Rice.cb.select
$.after select, div $.after select, div