8,018
edits
(→Overview: v1.0 is done; suggestions for improvement are welcome) |
Paradox-01 (talk | contribs) (we are getting closer, hopefully ^_^) |
||
Line 335: | Line 335: | ||
As you'll see, the basic idea is that you attach the class "hovertable" to a wikitable, then you place multiple spans in one large cell of class "hovertable_descrip". Each span is "display:none" and contains the description for one type, which is given as that span's id. Then you declare other cells in the hovertable as class "hovercell" with ids that match the ones in the descrip cell. The JS I wrote attaches event handlers to all hovercells which display their corresponding span in the hovertable_descrip cell when the hovercell receives 'mouseover', and hide the span upon 'mouseout'. --[[User:Iritscen|Iritscen]] ([[User talk:Iritscen|talk]]) 20:22, 16 November 2012 (CET) | As you'll see, the basic idea is that you attach the class "hovertable" to a wikitable, then you place multiple spans in one large cell of class "hovertable_descrip". Each span is "display:none" and contains the description for one type, which is given as that span's id. Then you declare other cells in the hovertable as class "hovercell" with ids that match the ones in the descrip cell. The JS I wrote attaches event handlers to all hovercells which display their corresponding span in the hovertable_descrip cell when the hovercell receives 'mouseover', and hide the span upon 'mouseout'. --[[User:Iritscen|Iritscen]] ([[User talk:Iritscen|talk]]) 20:22, 16 November 2012 (CET) | ||
: I checked your test space. It looks awesome, I didn't expected to see so fast results on this. However, there are 2 things I would like you to think about. | |||
:: 1) SSG's [https://dl.dropbox.com/u/139715/temp/ssg_overviews_wikified.txt "Level files" table] (ONLV) is ''too big'' for an ''absolute location'' of the explanation: if the user hovers the CRSA table cell he would see nothing because the explanation is out of view. | |||
::: The solution to this problem might be to fix the explanation area to the screen. Here's an example made of [https://dl.dropbox.com/u/139715/temp/explanation_fixed_to_screen.htm CSS]. (basically ''style="position: fixed; top: 50%; left: 50%;"'') | |||
:: 2) We talked about merging those hierarchies and the general file type overview. In my last draft the types were vertical listed but I think it will look less odd if they are horizontal (because the tables differ in their number of rows). | |||
::: At the moment the chasing explanation makes a strange impression but that's due to the other content here. With nothing else then the content under the gray line should look ... not "super" ... but good enough. Or we make a step back and use H template? | |||
:: 2a) If we agree on the merging then the file types should be click-able: if user clicks TxtC type then of course the TxtC table should appear. | |||
::: I think you can reuse the mechanism here you just created. Not sure about IGPG: it appears in TxtC but also in others (DPge, WPge, Opge, ...) | |||
:: '''2b)''' Facing this problem we might choose an easier path than hiding all tables by default. | |||
::: If we put all table under each other we could create "AAAA-using types" sections at the end of all tables: If the user clicked IGPG then the browser jumps to that section and there the user reads IGPG being used by this, this and that type. From there he can jump again (by clicking <nowiki>[[#ABCD|ABCD]]</nowiki>) and reaches his final choice (TxtC/DPge/WPge/... table). | |||
----- | |||
{| width="100%" style="text-align:center; font-weight:bold;" | |||
| ABNA | |||
| AGQC | |||
| AGQG | |||
| AGQR | |||
| AISA | |||
| AKAA | |||
| AKBA | |||
| AKBP | |||
| AKEV | |||
| AKOT | |||
| AKVA | |||
| BINA | |||
| CBPI | |||
| CBPM | |||
| CONS | |||
| CRSA | |||
| DOOR | |||
| DPge | |||
| ENVP | |||
| FILM | |||
| HPge | |||
| IDXA | |||
| IGHH | |||
|- | |||
| IGPA | |||
| [[#IGPG-using types|IGPG]] | |||
| IGSA | |||
| IGSt | |||
| Impt | |||
| IPge | |||
| KeyI | |||
| M3GA | |||
| M3GM | |||
| Mtrl | |||
| OBAN | |||
| OBOA | |||
| OFGA | |||
| ONCC | |||
| ONCP | |||
| ONCV | |||
| ONGS | |||
| ONIA | |||
| ONLD | |||
| ONLV | |||
| ONOA | |||
| ONSK | |||
| ONVL | |||
|- | |||
| ONWC | |||
| OPge | |||
| OSBD | |||
| OTIT | |||
| OTLF | |||
| PLEA | |||
| PNTA | |||
| PSpc | |||
| PSpL | |||
| PSUI | |||
| QTNA | |||
| SNDD | |||
| SUBT | |||
| TRAC | |||
| TRAM | |||
| TRAS | |||
| TRBS | |||
| TRCM | |||
| TRGA | |||
| TRGE | |||
| TRIA | |||
| TRIG | |||
| TRMA | |||
|- | |||
| TRSC | |||
| TRTA | |||
| TSFF | |||
| TSFL | |||
| TSFT | |||
| TSGA | |||
| TURR | |||
| TXAN | |||
| TXCA | |||
| TXMA | |||
| TXMB | |||
| TXMP | |||
| [[#TxtC|TxtC]] | |||
| VCRA | |||
| WMCL | |||
| WMDD | |||
| WMM | |||
| WMMB | |||
| WPge | |||
|} | |||
Based on OBD:file_types. Maybe we should list BINA subtypes too (object collections like [[XML:BINA/OBJC/CHAR|CHAR]], CONS, DOOR, ...) ? | |||
====TxtC==== | |||
{|width="100%" | |||
|width="200" valign="top"| | |||
{|class="wikitable hovertable" width="400" style="text-align:center; font-weight:bold;" | |||
|style="background-color:#DDDDDD;" class="hovercell" id="txtc"| [[TxtC]] | |||
|width="16.66%"| | |||
|width="16.66%"| | |||
|width="16.66%"| | |||
|width="16.66%"| | |||
|width="16.66%"| | |||
|- | |||
| http://ssg.oni2.net/design/60x20c.gif | |||
|style="background-color:#DDDDDD; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);" class="hovercell" id="igpa"| [[IGPA]] | |||
| | |||
| | |||
| | |||
| | |||
|- | |||
| | |||
| http://ssg.oni2.net/design/60x20c.gif | |||
| style="background-color:#DDDDDD; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);" class="hovercell" id="igpg"| [[IGPG]] | |||
| | |||
| | |||
| | |||
|- | |||
| | |||
| | |||
| http://ssg.oni2.net/design/60x20b.gif | |||
|style="background-color:#CCCCFF;" class="hovercell" id="tsff"| [[TSFF]] | |||
| | |||
| | |||
|- | |||
| | |||
| | |||
| http://ssg.oni2.net/design/60x20a.gif | |||
| http://ssg.oni2.net/design/60x20c.gif | |||
|style="background-color:#CCCCFF; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);" class="hovercell" id="tsfl"| [[TSFL]] | |||
| | |||
|- | |||
| | |||
| | |||
| http://ssg.oni2.net/design/60x20a.gif | |||
| http://ssg.oni2.net/design/60x20c.gif | |||
|style="background-color:#CCCCFF; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);" class="hovercell" id="tsft"| [[TSFT]] | |||
| | |||
|- | |||
| | |||
| | |||
| http://ssg.oni2.net/design/60x20a.gif | |||
| | |||
| http://ssg.oni2.net/design/60x20c.gif | |||
|style="background-color:#CCCCFF; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);" class="hovercell" id="tsga"| [[TSGA]] | |||
|- | |||
| | |||
| | |||
| http://ssg.oni2.net/design/60x20b.gif | |||
|class="hovercell" id="pspc"| [[PSpc]] | |||
| | |||
| | |||
|- | |||
| | |||
| | |||
| http://ssg.oni2.net/design/60x20a.gif | |||
| http://ssg.oni2.net/design/60x20c.gif | |||
|class="hovercell" id="txmp"| [[TXMP]] | |||
| | |||
|- | |||
| | |||
| | |||
| http://ssg.oni2.net/design/60x20c.gif | |||
|style="background-color:#DDDDDD; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);" class="hovercell" id="igsa"| [[IGSA]] | |||
| | |||
| | |||
|- | |||
| | |||
| | |||
| | |||
| http://ssg.oni2.net/design/60x20c.gif | |||
|style="background-color:#DDDDDD; background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.5) 10px, rgba(255,255,255,.5) 20px);" class="hovercell" id="igst"| [[IGSt]] | |||
|} | |||
|valign="top"| | |||
{|style="position: fixed; top: 30%" | |||
|class="hovertable_descrip" valign="top"| | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="txtc">'''TxtC''': This is console text.</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="igpa">'''IGPA''': In-Game User Interface Page Array.</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="igpg">'''IGPG''': In-Game User Interface Page.</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="tsff">'''TSFF''': A font family.</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="tsfl">'''TSFL''': A font language.</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="tsft">'''TSFT''': Actual font bitmaps.</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="tsga">'''TSGA''': A glyph array linking 256 possible symbols to their bitmaps (TSFTs).</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="pspc">'''PSpc''': Part Specification (coordinates for finding a UI symbol in a bitmap collection of UI elements.</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="txmp">'''TXMP''': A texture map!</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="igsa">'''IGSA''': In-Game user interface String Array.</span> | |||
<span style="display:none; background-color:#EEEEEE; border-color:#DDDDDD; border-width:1px; border-style:solid; padding:10px;" id="igst">'''IGSt''': In-Game user interface STring.</span> | |||
|} | |||
|} | |||
[ other tables ] | |||
====IGPG-using types==== | |||
* [[#TxtC|TxtC]] | |||
* OPge | |||
* IPge | |||
* WPge | |||
---- |
edits