Nao

  • Dadman with a boy
  • Posts: 16,079
Selectbox
« on November 10th, 2011, 12:04 PM »
A short note...
Yesterday I was looking into improving the privacy selectbox, notably to allow for friend groups to be specified, was planning to turn it into an object similar to the privacy button on Wedge.org (click the key icon next to a topic link (that you own, in a blog), and it opens up a popup, select Groups or something and it'll show you a checkbox list...), then I found out about selectbox replacement plugins for jQuery, looked into their code and demos, I particularly liked one (it basically creates an absolutely positioned div with scroll overflow like the key object in here, but does it while retaining compatibility with non-JS browsers so that'd be nice to use everywhere), anyway -- when packed and gzipped, the main script file is 5.89KB, and with the extra plugin (which I would clearly modify...), it's 8.52KB. So that's an increase of 50% in size, but OTOH it's still less than 3KB... And then on the other, other hand, 3KB is exactly the reason I'm not excited to upgrade jQuery to a newer version... :lol:

I'm not sure just yet.

The demo: http://labs.abeautifulsite.net/projects/js/jquery/selectBox/
Second time this week I'm on this website... I have no idea why I was there the first time, I just remember I liked their logo... And now I'm starting to realize my own logo for Wedge may have been unconsciously influenced by them :lol: No, no, it's just leaves... :^^;:

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Re: Thought system
« Reply #1, on November 10th, 2011, 12:19 PM »
See, the whole nature of doing that would never have occurred to me. I'd have just used a regular select.

Mind you, if that's styleable (e.g. to put an image next to the item text)... I can think of many good uses for that.
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Recents posts as formerly on the board index
« Reply #2, on November 12th, 2011, 06:32 PM »
Membergroup legend is a bit of an unimportant area for me, so whatever...

BTW, I'm starting to seriously consider, between two casual dragon kills, going with my own custom selectbox component... Something that would be simpler or more complex than the one I saw, depending on the point of view.
The idea would be to, perhaps, reuse some of the minimenu code, maybe entirely, maybe merge them etc, and make the Wedge design as uncluttered as possible by having most options moved either to a minimenu (i.e. opens when hovering), or a selectbox (i.e. opens when clicking the option or the arrow next to it), or an arrowbox (or whatever I'd call that... i.e. opens when clicking the arrow next to the option, and goes to the option when clicking it. Sort of thing that would work well in Wedge button strips.)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Re: Recents posts as formerly on the board index
« Reply #3, on November 12th, 2011, 06:34 PM »
As long as there's a non JS fallback and there aren't overwhelming accessibility issues (e.g. speech readers, or dare I suggest it, keyboard users, aren't adversely impacted), I'm cool with that.

As for membergroup legend, I'm strongly considering pulling it out into a plugin where I can give it more options and merge some of the existing plugins around it.

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Re: Re: Recents posts as formerly on the board index
« Reply #4, on November 12th, 2011, 10:44 PM »
Quote
BTW, I'm starting to seriously consider, between two casual dragon kills, going with my own custom selectbox component
I was making one myself. I'll share the code (it works,  although it needs fine-tuning)

Code: [Select]
$(document).ready(function(){

$('select.pf_select').each(function(){
var title = $(this).attr('title');
var id = $(this).attr('id');
if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
$(this)
.css({'display': 'none'})
.after('<ul class="smalltext menu"><li id="' + id + '_li"><h4><a>' + title + '</a></h4><ul id="' + id + '_ul" style="visibility: visible; border-radius:  0; opacity: 1; display: none;"></ul></li></ul>')
.change(function(){
val = $('option:selected',this).text();
$(this).next().text(val);
})
.children('option').each(function() {
if ($(this).text() == '-')
$('#' + id + '_ul').append('<li class="separator"><a><hr></a></li>');
else
$('#' + id + '_ul').append('<li id="' + $(this).val() + '"><a>' + $(this).text() + '</a></li>')
});
$('#' + id + '_li').click(function(event){
$('#' + id + '_ul').show();
});
$(document).mousedown(function(event){
$('#' + id + '_ul').hide();
});
$('#' + id + '_ul').children('li').each(function () {
$(this)
.bind('mouseenter focus mouseleave blur', function(event){
$(this).toggleClass('hove');
})
.mousedown(function(event){
$(this).parent().children('li').each(function () {
$(this).removeClass('active');
});
$(this).addClass('active');
$('#' + id).val($(this).attr('id'));
});
});
});

});
A confident man keeps quiet.whereas a frightened man keeps talking, hiding his fear.

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Re: Recents posts as formerly on the board index
« Reply #5, on November 13th, 2011, 11:22 AM »
Had a look. It's funny how you reused the main menu styles! I made it a bit shorter and it was already quite short. Needs more features but it seems to be a good start thanks.

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Re: Re: Recents posts as formerly on the board index
« Reply #6, on November 13th, 2011, 05:33 PM »
Quote from Nao on November 13th, 2011, 11:22 AM
Had a look. It's funny how you reused the main menu styles! I made it a bit shorter and it was already quite short. Needs more features but it seems to be a good start thanks.
You're welcome. :) (And yes, I love the menu design - probably gets my vote for favorite front-end  component!)

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Re: Recents posts as formerly on the board index
« Reply #7, on November 13th, 2011, 08:57 PM »
Quote from live627 on November 13th, 2011, 05:33 PM
Quote from Nao on November 13th, 2011, 11:22 AM
Had a look. It's funny how you reused the main menu styles! I made it a bit shorter and it was already quite short. Needs more features but it seems to be a good start thanks.
You're welcome. :) (And yes, I love the menu design - probably gets my vote for favorite front-end  component!)
Thanks ;) I was never too sure about it because it didn't get a lot of feedback (the design itself, not the code)...
However, while the main menu css is fine for short select boxes, how about a select box with hundreds of items? It will definitely require a scrollbar... And for this, the main menu doesn't have a ready-made answer. That would require dropping the rounded corners, to begin with.

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Re: Recents posts as formerly on the board index
« Reply #9, on November 13th, 2011, 10:35 PM »
Yup, noticed that.

Okay, I'm posting my version of the code... It's not particularly better or anything, it just matches the coding guidelines for Wedge.
However I probably won't be using it as is in the future. I'm still considering options, like taking a larger library and reducing its size, etc.

Code: [Select]
function we_selectbox()
{
var that = $(this), id = that.attr('id'), title = $('option:selected', this).val() != '' ? $('option:selected', this).text() : that.attr('title');
that
.hide()
.after('<ul class="menu"><li id="' + id + '_li"><h4 class="hove"><a>' + title + '</a></h4><ul id="' + id + '_ul" style="visibility:visible;border-radius:0;opacity:1;display:none"></ul></li></ul>')
.change(function () { $(this).next().text($('option:selected', this).text()); })
.children('option').each(function () {
var here = $(this), txt = here.text();
$('#' + id + '_ul').append(txt == '-' ? '<li class="separator"><a><hr></a></li>' : '<li id="' + here.val() + '"><a>' + txt + '</a></li>');
});
$('#' + id + '_li').click(function () { $('#' + id + '_ul').show(); });
$(document).mousedown(function () { $('#' + id + '_ul').hide(); });
$('#' + id + '_ul').children('li').each(function () {
$(this)
.bind('mouseenter focus mouseleave blur', function () { $(this).toggleClass('hove'); })
.mousedown(function () {
$(this).parent().children('li').removeClass('active');
$(this).addClass('active');
$('#' + id).val($(this).attr('id'));
});
});
};

$('select').each(we_selectbox);
Selectbox
« Reply #10, on November 15th, 2011, 05:13 AM »Last edited on November 16th, 2011, 09:43 PM by Nao
First things first.
I'm looking into the JumpTo object and I still don't get why it has the ability to show multiple boxes.
I mean, it's only used in two places in SMF and Wedge: Display, and MessageIndex. And in both cases -- only one per page.
Removing the related code removes a few bytes off each topic page (not a bad thing I'd say), and also removes about 20 bytes from the gzipped minified script file. I'm really, really not against that...

Can anyone think of any reason to keep the array of JumpTo objects...?
Right now, the only thing I could think of is turning the moderation selectbox into a jumpto, which isn't the case right now. I mean, you click 'Move to' and then it enables the selectbox next to it... But it's already filled in. I don't really see the point in having a JumpTo object if admins and moderators always have to load the complete board list on every page just for a feature they won't be using 99.9% of the time... :-/

Other than that, I'm still looking about select boxes and stuff...
I want to have the 'right' component for Wedge. Something between the lightness and simplicity of John's implementation, and the richness of jQuery plugins.
The main problem here is with accessibility, as per Pete's request (and mine, honestly.) The 'light' code doesn't allow for keyboard accessibility, for instance.

So, here are the 'few good ones'... They all support 'disabled', optgroups and such. And they're all MIT licensed or equivalent. Also, I haven't done a complete test case for all of these, so the pro/con list is incomplete. I'm just trying to sort it out myself and maybe some of you will be aware of a better selectbox component for Wedge..?
As a reminder: once this is settled, I'm planning to use select boxes in many places, including places where we don't currently have a select box. The only difference with a mini-menu is really the fact that it opens once you click the item...

http://labs.abeautifulsite.net/jquery-selectBox/
Pro: also does listboxes. Excellent keyboard accessibility.
Con: minified/gzipped size ~3000 bytes, position is fixed so if the parent div moves, this won't.

http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
Pro: gzipped/minified size is ~2000 bytes
Con: keyboard accessibility is average at best. Doesn't close the box when clicking elsewhere (can be remedied easily I suppose...)

http://dl.dropbox.com/u/124192/websites/selectbox/index.html
Pro: Has clear support for HTML elements inside select boxes (I want that and will add it to whatever I use in the end). Allows to set small width for select line and large width for select box (i.e. they aren't linked), and does multi-line entries like I wanted, too. Also, keyboard accessibility is good...
Con: ...although it has a strange habit of closing the box when keeping the arrow keys pressed -- if you just press them, it'll switch to the next item all right, but if you keep the key pressed, once it triggers the message to 'repeat' the keystrokes automatically, the box closes. Doesn't handle right clicks on items and selecting text inside items (all of these should be disabled IMHO -- but I think none of the competition does that either.) Also, the size is the worst, at about ~3700 bytes gzipped and minified.

http://code.google.com/p/sexy-combo/
Pro: does a combo box...! It's pretty neat being able to type in what you want, and it'll automatically open the related elements in the list so that you can click them.
Con: size is ~4700 bytes so... Yikes!! And there isn't a demo available. But you can see a demo of UFD by following the link in the sidebar. It uses jQuery UI thought, so it's not something I'll be using...
Posted: November 14th, 2011, 04:32 PM

Bump.

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
Re: Selectbox
« Reply #11, on November 15th, 2011, 07:03 AM »
The first seems a good compromise between size and accessibility. I should mention I wrote that script I posted above because I want something like selectmenu without the UI hulk.

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Selectbox
« Reply #12, on November 15th, 2011, 08:10 AM »
As a note. None of the above has flawless support for iOS. Heck possibly the only one to work the same way is the smallest one...

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Selectbox
« Reply #13, on November 15th, 2011, 09:07 AM »
The criteria for me in order is: working correctly, having a suitable fallback position for keyboard/accessibility cases, looking nice, size.

Seems like most of the above have issues with the first two.

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: Selectbox
« Reply #14, on November 15th, 2011, 09:42 AM »
Pete, luv ya but you're not helpin' much :P

The third is my current fave still but it fails to sync disabled states between it's own ui and the iOS ui. It's strange. Although we don't really use disabled states anyway.
Also the ui for iOS needs a HTML to text fallback.
In any case these will all require a rewrite. That's why I only choose MIT stuff.

What about jumpto?