[UPHPU] ideas for a preference pane

[Jacob Fugal]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Wade Preston Shearer wrote:
| I want the user to be able to choose which columns are displayed and in
| which order.

<snip>

| I can't decide however about the best way to approach getting the values
| in a specific order. I have thought of several options, such as input
| fields where they simply type numbers next to the ones they have
| selected "on," radio buttons ranging from 1 to the max number of
| columns, etc... but each option that I have considered isn't flawless...
| meaning, I would have to clean the data. I want there to be only one way
| to fill the form out... meaning no to "on" columns can be in the same
| place.
|
| They only way that I figure this can be done is to either (a) have
| javascript dynamically change the values of the fields (ie: if column 4
| is checked as being first, then when you checked first for column seven,
| it will automatically un-check column four) or (b) to submit/refresh the
| page with each selection.

You're right, you would need JavaScript to do it, unless you want to
reload every time you change something. But using strict DOM and CSS
with JavaScript, you can actually change the document representation
without reloading. I threw together this example page:

~   http://fugal.net/~lukfugl/experiment/

(The source is attached. The CSS is shamelessly borrowed and modified
from www.csszengarden.com, the 'A Garden Apart' theme[1] by Dan
Cederholm[2].)

Obviously the page isn't a complete demonstration of what you want. For
example, there's no mechanism to submit the information. But you could
do that by putting in an array in the javascript, then altering that
array to follow the display inside the 'exlcude', 'include', 'promote'
and 'demote' methods. Then when the page is submitted, run a function
that converts that array into a single text string and stores it in a
hidden input. Eg:

~   <form onsubmit='stashConfiguration()'>
~   <input type='hidden' name='configuration' />
~   <input type='submit' />
~   </form>

Let me know if you have any questions about how the DOM[3] and/or CSS[4]
are working.

Jacob Fugal

[1] http://www.csszengarden.com/?cssfile=010%2F010%2Ecss
[2] http://www.simplebits.com/
[3] http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/
[4] http://www.w3.org/TR/CSS2/
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.3 (GNU/Linux)

iD8DBQFAGV8B/PO7QochUiQRAoGdAJ91nUPBAeB8gNtdTdP2V0j9gtPEzwCeOQUK
soZgHIJWHM5QL6Asq5KuSfg=
=57N3
-----END PGP SIGNATURE-----
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://uphpu.org/pipermail/uphpu/attachments/20040129/43a21a47/index.html