Changeset 361

Timestamp:

11/03/07 15:48:18 (2 years ago)

Author:

eevee

Message:

Switched the move table collapse controls to be.. unobtrusive. (#159)

Location:

veekun/trunk

Files:

• root/script/dexutils.js (modified) (2 diffs)
• templates/dex/page/pokemon.tt (modified) (1 diff)
• templates/style/dex.tt (modified) (1 diff)

veekun/trunk/root/script/dexutils.js

@@ +1 @@
+function add_move_table_controls() {
+    var table = $('#js-movetable');
+    var target = $('#js-move-table-controls');
+    if (!table || !target) return;
+
+    target.append('Only show moves from: ');
+
+    var version_els = table.find('tr:first-child.heading th img');
+    var ver_ct = version_els.length;
+    var ver = 1;
+    version_els.each(function(){
+        ver++;
+        var closure_ver = ver;
+        var link = this.cloneNode(false);
+        var handler = function(){
+            reduce_move_table(closure_ver, ver_ct + 1)
+        }
+        link.addEventListener('click', handler, false);
+        target.append(link);
+        target.append(' ');
+    });
+
+    var all_link = $("<span>all</span>");
+    all_link.click(function(){
+        reset_move_table();
+        fix_move_table_highlighting();
+    });
+    target.append(all_link);
+
+    target.addClass('js-move-table-controls');
+}
+
 function reduce_move_table(idx, ver_ct) {
     reset_move_table();
@@ -25 +57 @@
 function fix_move_table_highlighting() {
     $(' #js-movetable tr ').removeClass('color1').removeClass('color2');
-    $(' #js-movetable tr:not(.heading):not(.js-move-table-reduced):odd  ').addClass('color1');
-    $(' #js-movetable tr:not(.heading):not(.js-move-table-reduced):even ').addClass('color2');
+    $(' #js-movetable tr:not(.heading):not(.js-move-table-reduced):even ').addClass('color1');
+    $(' #js-movetable tr:not(.heading):not(.js-move-table-reduced):odd  ').addClass('color2');
 }
+
+$(add_move_table_controls);

veekun/trunk/templates/dex/page/pokemon.tt

@@ -433 +433 @@
 
 [% UNLESS header_icons.size == 1 %]
-<hr/>
-<p> NOT DONE: (todo only show this for js clients; don't use javascript:) </p>
-<p>
-    Only show moves from:
-[%     ver_idx = 0 %]
-[%     FOREACH ver IN header_icons %]
-[%         ver_idx = ver_idx + 1 %]
-    <a href="javascript:reduce_move_table([% ver_idx + 1 %], [% header_icons.size + 1 %]);">[% Icons.$ver %]</a>
-[%     END %]
-    <a href="javascript:reset_move_table();fix_move_table_highlighting();">all</a>
-</p>
+<div id="js-move-table-controls"> </div>
 [% END %]
 

veekun/trunk/templates/style/dex.tt

@@ -165 +165 @@
 
 .js-move-table-reduced { display: none; }
+.js-move-table-controls { padding: 3px; border-top: 1px dashed [% header_border %]; }
+  .js-move-table-controls img,
+  .js-move-table-controls span { cursor: pointer; color: [% link_normal %]; vertical-align: bottom; }
+  .js-move-table-controls span:hover { color: [% hover_dark %]; }