書を選択したら色がつくようにした・ 1b90f8f ・ Gitprep

+54 -80

templates/index.html.ep

@@ -1,30 +1,6 @@
 <%
   my $dbi = app->dbi;
-
   my $books = $dbi->model('book')->select(['id', 'short_name'])->all;
-
-  my $op = param('op') // '';
-  my $book_id = param('book-id');
-  
-  my $word_count_h = {};
-  my $word = param('word');
-  my $word_length = length $word;
-  
-  # 前と次の見つかった書籍
-  my $next_book_id;
-  my $prev_book_id;
-  my $found_books = [];
-  for my $book (@$books) {
-    if (!$word_length || $word_count_h->{$book->{id}} > 0) {
-      push @$found_books, $book;
-    }
-  }
-  for (my $i = 0; $i < @$found_books; $i++) {
-    if ($book_id eq $found_books->[$i]{id}) {
-      $prev_book_id = $found_books->[$i - 1]{id} if $i > 0;
-      $next_book_id = $found_books->[$i + 1]{id} if $i < @$found_books;
-    }
-  }
 %>
 
 
@@ -35,6 +11,7 @@
   
     var current_word;
     var current_book_id;
+    var found_book_ids = [];
     
     var fragment = location.hash;
     var current_pos;
@@ -47,32 +24,30 @@
     }
     $("#word-pos").text(current_pos);
     
-    % if ($word_length) {
-      $("#up-arrow").on('click', function () {
-        var current_pos = $('#word-pos').text();
-        var prev_pos = current_pos - 1;
+    $("#up-arrow").on('click', function () {
+      var current_pos = $('#word-pos').text();
+      var prev_pos = current_pos - 1;
+      
+      if (prev_pos < 1) {
         
-        if (prev_pos < 1) {
-          location.href = "<%= url_for('/')->query(word => $word, 'book-id' => $prev_book_id)->fragment("word-$word_count_h->{$prev_book_id}") %>";
-        } else {
-          location.href = '#word-' + prev_pos;
-          $('#word-pos').text(prev_pos);
-        }
-      });
+      } else {
+        location.href = '#word-' + prev_pos;
+        $('#word-pos').text(prev_pos);
+      }
+    });
 
-      $("#down-arrow").on('click', function () {
-        var current_pos = $('#word-pos').text();
-        var next_pos = current_pos - 0 + 1;
+    $("#down-arrow").on('click', function () {
+      var current_pos = $('#word-pos').text();
+      var next_pos = current_pos - 0 + 1;
+      
+      if (next_pos > 10) {
         
-        if (next_pos > 10) {
-          location.href = "<%= url_for('/')->query(word => $word, 'book-id' => $next_book_id)->fragment('word-1') %>";
-        }
-        else {
-          location.href = '#word-' + next_pos;
-          $('#word-pos').text(next_pos);
-        }
-      });
-    % }
+      }
+      else {
+        location.href = '#word-' + next_pos;
+        $('#word-pos').text(next_pos);
+      }
+    });
     
     // 書をクリック
     $('.book').on('click', function () {
@@ -96,6 +71,19 @@
         
         $("#content").html(result.content);
         current_book_id = book_id;
+        
+        $('#books tr').each(function () {
+          var book_id_str = $(this).attr('id');
+          if (book_id_str) {
+            var book_id = (book_id_str.match(/book-(\d+)/))[1];
+            if (book_id === current_book_id) {
+              $(this).find('.book-short-name').css('background', '#DDDDDD');
+            }
+            else {
+              $(this).find('.book-short-name').css('background', '#FFFFFF');
+            }
+          }
+        });
       });
     });
     
@@ -107,7 +95,7 @@
         var word_count_h;
         $.get('/api/word-count/' + word, function (result) {
           var word_count_h = result.word_count;
-          
+
           $('#books tr').each(function () {
             var book_id_str = $(this).attr('id');
             if (book_id_str) {
@@ -115,14 +103,17 @@
               if (word_count_h[book_id] === 0) {
                 $(this).css('display', 'none');
               }
+              else {
+                found_book_ids.push(book_id);
+              }
               $(this).find('.word-count').text(word_count_h[book_id]);
             }
           });
-          
           $('#word-count-header').text('回数');
+          
+          current_word = word;
         });
         
-        current_word = word;
       }
       
       return false;
@@ -148,15 +139,12 @@
               <a href="<%= url_for('/') %>" style="color:blue">聖書</a>
             </td>
             <td>
-              % if ($word_length) {
-                <span>
-                  <a id="up-arrow" href="javascript:void()">▲</a>
-                  <div id="word-pos" style="display:inline-block;border:1px solid #DDDDDD;padding:2px 5px;width:35px;text-align:center">
-                    <%= $book_id ? '　' : '-' %>
-                  </div>
-                  <a id="down-arrow" href="javascript:void()">▼</a>
-                </span>
-              % }
+              <span id="up-down">
+                <a id="up-arrow" href="javascript:void()">▲</a>
+                <div id="word-pos" style="display:inline-block;border:1px solid #DDDDDD;padding:2px 5px;width:35px;text-align:center">
+                </div>
+                <a id="down-arrow" href="javascript:void()">▼</a>
+              </span>
             </td>
           </tr>
         </table>
@@ -168,32 +156,18 @@
                 書
               </td>
               <td id="word-count-header" style="text-align:right">
-                % if ($word_length) {
-                  回数
-                % }
               </td>
             </tr>
           % my $prev_book_id;
           % for my $book (@$books) {
             <tr id="<%= "book-$book->{id}" %>">
-              % if (!$word_length || $word_count_h->{$book->{id}} > 0) {
-                <td style="<%= ($book_id // '') eq $book->{id} ? 'background:#DDDDDD' : '' %>">
-                  % my $book_url_query = {'book-id' => $book->{id}};
-                  % $book_url_query->{word} = $word if $word_length;
-                  % my $book_url = url_for->query($book_url_query);
-                  % $book_url->fragment('word-1') if $word_length;
-                  <a class="book" id="<%= "book-$book->{id}" %>" href="javascript:void(0)">
-                    <%= $book->{short_name} %>
-                  </a>
-                </td>
-                <td class="word-count" style="text-align:right">
-                </td>
-                
-                % if ($prev_book_id && $book_id) {
-                  $next_book_list->{$prev_book_id} = $book_id;
-                  $prev_book_list->{$book_id} = $prev_book_id;
-                % }
-              % }
+              <td class="book-short-name">
+                <a class="book" id="<%= "book-$book->{id}" %>" href="javascript:void(0)">
+                  <%= $book->{short_name} %>
+                </a>
+              </td>
+              <td class="word-count" style="text-align:right">
+              </td>
             </tr>
           % }
         </table>

...	...	@@ -1,30 +1,6 @@
1	1	<%
2	2	my $dbi = app->dbi;
3		-
4	3	my $books = $dbi->model('book')->select(['id', 'short_name'])->all;
5		-
6		- my $op = param('op') // '';
7		- my $book_id = param('book-id');
8		-
9		- my $word_count_h = {};
10		- my $word = param('word');
11		- my $word_length = length $word;
12		-
13		- # 前と次の見つかった書籍
14		- my $next_book_id;
15		- my $prev_book_id;
16		- my $found_books = [];
17		- for my $book (@$books) {
18		- if (!$word_length \|\| $word_count_h->{$book->{id}} > 0) {
19		- push @$found_books, $book;
20		- }
21		- }
22		- for (my $i = 0; $i < @$found_books; $i++) {
23		- if ($book_id eq $found_books->[$i]{id}) {
24		- $prev_book_id = $found_books->[$i - 1]{id} if $i > 0;
25		- $next_book_id = $found_books->[$i + 1]{id} if $i < @$found_books;
26		- }
27		- }
28	4	%>
29	5
30	6
...	...	@@ -35,6 +11,7 @@
35	11
36	12	var current_word;
37	13	var current_book_id;
	14	+ var found_book_ids = [];
38	15
39	16	var fragment = location.hash;
40	17	var current_pos;
...	...	@@ -47,32 +24,30 @@
47	24	}
48	25	$("#word-pos").text(current_pos);
49	26
50		- % if ($word_length) {
51		- $("#up-arrow").on('click', function () {
52		- var current_pos = $('#word-pos').text();
53		- var prev_pos = current_pos - 1;
	27	+ $("#up-arrow").on('click', function () {
	28	+ var current_pos = $('#word-pos').text();
	29	+ var prev_pos = current_pos - 1;
	30	+
	31	+ if (prev_pos < 1) {
54	32
55		- if (prev_pos < 1) {
56		- location.href = "<%= url_for('/')->query(word => $word, 'book-id' => $prev_book_id)->fragment("word-$word_count_h->{$prev_book_id}") %>";
57		- } else {
58		- location.href = '#word-' + prev_pos;
59		- $('#word-pos').text(prev_pos);
60		- }
61		- });
	33	+ } else {
	34	+ location.href = '#word-' + prev_pos;
	35	+ $('#word-pos').text(prev_pos);
	36	+ }
	37	+ });
62	38
63		- $("#down-arrow").on('click', function () {
64		- var current_pos = $('#word-pos').text();
65		- var next_pos = current_pos - 0 + 1;
	39	+ $("#down-arrow").on('click', function () {
	40	+ var current_pos = $('#word-pos').text();
	41	+ var next_pos = current_pos - 0 + 1;
	42	+
	43	+ if (next_pos > 10) {
66	44
67		- if (next_pos > 10) {
68		- location.href = "<%= url_for('/')->query(word => $word, 'book-id' => $next_book_id)->fragment('word-1') %>";
69		- }
70		- else {
71		- location.href = '#word-' + next_pos;
72		- $('#word-pos').text(next_pos);
73		- }
74		- });
75		- % }
	45	+ }
	46	+ else {
	47	+ location.href = '#word-' + next_pos;
	48	+ $('#word-pos').text(next_pos);
	49	+ }
	50	+ });
76	51
77	52	// 書をクリック
78	53	$('.book').on('click', function () {
...	...	@@ -96,6 +71,19 @@
96	71
97	72	$("#content").html(result.content);
98	73	current_book_id = book_id;
	74	+
	75	+ $('#books tr').each(function () {
	76	+ var book_id_str = $(this).attr('id');
	77	+ if (book_id_str) {
	78	+ var book_id = (book_id_str.match(/book-(\d+)/))[1];
	79	+ if (book_id === current_book_id) {
	80	+ $(this).find('.book-short-name').css('background', '#DDDDDD');
	81	+ }
	82	+ else {
	83	+ $(this).find('.book-short-name').css('background', '#FFFFFF');
	84	+ }
	85	+ }
	86	+ });
99	87	});
100	88	});
101	89
...	...	@@ -107,7 +95,7 @@
107	95	var word_count_h;
108	96	$.get('/api/word-count/' + word, function (result) {
109	97	var word_count_h = result.word_count;
110		-
	98	+
111	99	$('#books tr').each(function () {
112	100	var book_id_str = $(this).attr('id');
113	101	if (book_id_str) {
...	...	@@ -115,14 +103,17 @@
115	103	if (word_count_h[book_id] === 0) {
116	104	$(this).css('display', 'none');
117	105	}
	106	+ else {
	107	+ found_book_ids.push(book_id);
	108	+ }
118	109	$(this).find('.word-count').text(word_count_h[book_id]);
119	110	}
120	111	});
121		-
122	112	$('#word-count-header').text('回数');
	113	+
	114	+ current_word = word;
123	115	});
124	116
125		- current_word = word;
126	117	}
127	118
128	119	return false;
...	...	@@ -148,15 +139,12 @@
148	139	<a href="<%= url_for('/') %>" style="color:blue">聖書</a>
149	140	</td>
150	141	<td>
151		- % if ($word_length) {
152		- <span>
153		- <a id="up-arrow" href="javascript:void()">▲</a>
154		- <div id="word-pos" style="display:inline-block;border:1px solid #DDDDDD;padding:2px 5px;width:35px;text-align:center">
155		- <%= $book_id ? '　' : '-' %>
156		- </div>
157		- <a id="down-arrow" href="javascript:void()">▼</a>
158		- </span>
159		- % }
	142	+ <span id="up-down">
	143	+ <a id="up-arrow" href="javascript:void()">▲</a>
	144	+ <div id="word-pos" style="display:inline-block;border:1px solid #DDDDDD;padding:2px 5px;width:35px;text-align:center">
	145	+ </div>
	146	+ <a id="down-arrow" href="javascript:void()">▼</a>
	147	+ </span>
160	148	</td>
161	149	</tr>
162	150	</table>
...	...	@@ -168,32 +156,18 @@
168	156	書
169	157	</td>
170	158	<td id="word-count-header" style="text-align:right">
171		- % if ($word_length) {
172		- 回数
173		- % }
174	159	</td>
175	160	</tr>
176	161	% my $prev_book_id;
177	162	% for my $book (@$books) {
178	163	<tr id="<%= "book-$book->{id}" %>">
179		- % if (!$word_length \|\| $word_count_h->{$book->{id}} > 0) {
180		- <td style="<%= ($book_id // '') eq $book->{id} ? 'background:#DDDDDD' : '' %>">
181		- % my $book_url_query = {'book-id' => $book->{id}};
182		- % $book_url_query->{word} = $word if $word_length;
183		- % my $book_url = url_for->query($book_url_query);
184		- % $book_url->fragment('word-1') if $word_length;
185		- <a class="book" id="<%= "book-$book->{id}" %>" href="javascript:void(0)">
186		- <%= $book->{short_name} %>
187		- </a>
188		- </td>
189		- <td class="word-count" style="text-align:right">
190		- </td>
191		-
192		- % if ($prev_book_id && $book_id) {
193		- $next_book_list->{$prev_book_id} = $book_id;
194		- $prev_book_list->{$book_id} = $prev_book_id;
195		- % }
196		- % }
	164	+ <td class="book-short-name">
	165	+ <a class="book" id="<%= "book-$book->{id}" %>" href="javascript:void(0)">
	166	+ <%= $book->{short_name} %>
	167	+ </a>
	168	+ </td>
	169	+ <td class="word-count" style="text-align:right">
	170	+ </td>
197	171	</tr>
198	172	% }
199	173	</table>