Custom header positioning

[memearrow]

I want to have my custom header data in two different groups: one group which can be centered and another to align to the left.

Here is what my header looks now with lines indicating where I want things to go: http://a.pomf.se/gdeluk.png

And here's some MSPaint of about how I'd like it to look: http://a.pomf.se/ivsrmm.png

Please make this happen, wizards

Original post here https://github.com/Nebukazar/OneeChan/issues/27 fucked up with which project to post on, making that clear to avoid confusion

[memearrow]

closed? might I have an answer why?

[memearrow]

nvm im dumb, didn't realize that was the one on oneechan

[memearrow]

Was this ever addressed? Asking since it wans't shot down or acknowledged.

[ccd0]

No, I haven't worked on this yet (and I'm not promising I will). You're welcome to make a pull request.

[memearrow]

Did you get to it? :3

[memearrow]

Read that as you were promising to get to it. I can see that you weren't

I wish a nigga would anyway :\

[ccd0]

I'm thinking maybe we could allow the user to define sections of the header with { and }; that is,

{a b} {c d}

would become

<span><a href="/a/" title="Anime &amp; Manga">a</a> <a href="/b/" title="Random">b</a></span> <span><a href="/c/" title="Anime/Cute">c</a> <a href="/d/" title="Hentai/Alternative">d</a></span>

and then you can use custom CSS to make it look how you want.

[saxamaphone69]

FWIW, I've (poorly) attempted to get this working with my limited understanding of RegEx.

Just after this, but on the compiled user.js, I've added:

...
$.add(list, nodes);
var oldNode = list.innerHTML;
var newNode = oldNode.replace(/({{)(.*?)(}})/g, '<span>$2</span>');
list.innerHTML = newNode;
return CatalogLinks.setLinks(list);
...

which wraps anything inside {{ }} (just in case someone uses { or } as a divider) within a <span>. If someone decides to do multiple header sections, I agree they can just use :nth CSS to do whatever they'd like.

[ccd0]

{{ is a good idea but it would be best to use the DOM methods for this instead of innerHTML hacks.

[saxamaphone69]

DOM as in do something like jQuery's wrap, or use the existing $.add and $.replace?

In which case, each {{ would have to turn the nodes array into smaller arrays... right? Then each array with the nodes array is wrapped?

But how do you wrap them when you don't know what's between them? And then you'd have to check if {{ was used in the first place to not make a new span.

Darn, thought I had this, now I'm more lost. 🤕

[ccd0]

You keep a stack of <span> elements as you iterate through the list of tokens. Each time you encounter a {{, you make a new <span> and push it onto the stack. When you encounter anything but {{ and }}, you $.add it to the <span> on the top of the stack. When you encounter a }}, you pop the <span> from the top of the stack and $.add it to the <span> which is now at the top.

[saxamaphone69]

I spent all day at work thinking how I'd solve the problem and after ~2 hours of playing with things I can't work it out.

Not only do I not understand the RegEx (blue/green), but I clearly don't understand the JS either (pink/purple). The generateFullBoardList looks like it might have something helpful (while/switch), but I can't work out how to transfer that into this.

Sorry for wasting your time again @ccd0. I think I might stick to lurking rather than trying (and failing) at contributing.