☰

WaniKani Item Marker

Tool to mark and track individual radicals/kanji/vocabulary

  1. // ==UserScript==
  2. // @name			WaniKani Item Marker
  3. // @description		Tool to mark and track individual radicals/kanji/vocabulary
  4. // @namespace		irx.wanikani.marker
  5. // @include			https://www.wanikani.com/*
  6. // @version			4.0
  7. // @copyright		2017, Ingo Radax
  8. // @license			MIT; http://opensource.org/licenses/MIT
  9. // @grant			none
  10. // @run-at			document-start
  11. // ==/UserScript==
  12.  
  13. var WaniKani = (function() {
  14. 	var local_storage_prefix = 'wk_toolkit_';
  15. 	
  16. 	var api_key = null;
  17. 	
  18. 	var radical_data = null;
  19. 	var kanji_data = null;
  20. 	var vocabulary_data = null;
  21.  
  22. 	var radicals_with_image = [];
  23. 	
  24. 	function log(msg) {
  25. 		console.log(msg);
  26. 	}
  27. 	
  28. 	function is_on_wanikani() {
  29. 		return (window.location.host == 'www.wanikani.com');
  30. 	}
  31. 	
  32. 	function is_on_dashboard() {
  33. 		return is_on_wanikani() && ((window.location.pathname == '/dashboard') || (window.location.pathname == '/'));
  34. 	}
  35. 	
  36. 	function is_on_review_session_page() {
  37. 		return is_on_wanikani() && (window.location.pathname == '/review/session');
  38. 	}
  39. 	
  40. 	function is_on_review_page() {
  41. 		return is_on_wanikani() && (window.location.pathname == '/review');
  42. 	}
  43. 	
  44. 	function is_on_lesson_session_page() {
  45. 		return is_on_wanikani() && (window.location.pathname == '/lesson/session');
  46. 	}
  47. 	
  48. 	function is_on_lesson_page() {
  49. 		return is_on_wanikani() && (window.location.pathname == '/lesson');
  50. 	}
  51. 	
  52. 	function is_on_lattice_radicals_meaning() {
  53. 		return is_on_wanikani() && (window.location.pathname == '/lattice/radicals/meaning');
  54. 	}
  55. 	
  56. 	function is_on_lattice_radicals_progress() {
  57. 		return is_on_wanikani() && (window.location.pathname == '/lattice/radicals/progress');
  58. 	}
  59. 	
  60. 	function is_on_lattice_kanji_combined() {
  61. 		return is_on_wanikani() && (window.location.pathname == '/lattice/kanji/combined');
  62. 	}
  63. 	
  64. 	function is_on_lattice_kanji_meaning() {
  65. 		return is_on_wanikani() && (window.location.pathname == '/lattice/kanji/meaning');
  66. 	}
  67. 	
  68. 	function is_on_lattice_kanji_reading() {
  69. 		return is_on_wanikani() && (window.location.pathname == '/lattice/kanji/reading');
  70. 	}
  71. 	
  72. 	function is_on_lattice_kanji_progress() {
  73. 		return is_on_wanikani() && (window.location.pathname == '/lattice/kanji/status');
  74. 	}
  75. 	
  76. 	function is_on_lattice_vocabulary_combined() {
  77. 		return is_on_wanikani() && (window.location.pathname == '/lattice/vocabulary/combined');
  78. 	}
  79. 	
  80. 	function is_on_lattice_vocabulary_meaning() {
  81. 		return is_on_wanikani() && (window.location.pathname == '/lattice/vocabulary/meaning');
  82. 	}
  83. 	
  84. 	function is_on_lattice_vocabulary_reading() {
  85. 		return is_on_wanikani() && (window.location.pathname == '/lattice/vocabulary/reading');
  86. 	}
  87. 	
  88. 	function is_on_lattice_vocabulary_progress() {
  89. 		return is_on_wanikani() && (window.location.pathname == '/lattice/vocabulary/status');
  90. 	}
  91. 	
  92. 	//-------------------------------------------------------------------
  93. 	// Try to parse the url and detect if it belongs to a single item.
  94. 	// e.g.	'https://www.wanikani.com/level/1/radicals/construction'
  95. 	//		will be parsed as 'radicals' and 'construction'
  96. 	//-------------------------------------------------------------------
  97. 	function parse_item_url(url) {
  98. 		if ((url == null) || (url == undefined)) {
  99. 			return null;
  100. 		}
  101. 		if (url.indexOf('/lattice/') > -1) {
  102. 			return null;
  103. 		}
  104. 		
  105. 		url = decodeURI(url);
  106. 		var parsed = /.*\/(radicals|kanji|vocabulary)\/(.+)/.exec(url);
  107. 		if (parsed) {
  108. 			return {type:parsed[1], name:parsed[2]};
  109. 		}
  110. 		else {
  111. 			return null;
  112. 		}
  113. 	}
  114. 	
  115. 	function reset_radical_data(resetLocalStorage) {
  116. 		radical_data = null;
  117. 		if (resetLocalStorage) {
  118. 			localStorage.removeItem(local_storage_prefix + 'api_user_radicals');
  119. 			localStorage.removeItem(local_storage_prefix + 'api_user_radicals_fetch_time');
  120. 		}
  121. 	}
  122. 	
  123. 	function reset_kanji_data(resetLocalStorage) {
  124. 		kanji_data = null;
  125. 		if (resetLocalStorage) {
  126. 			localStorage.removeItem(local_storage_prefix + 'api_user_kanji');
  127. 			localStorage.removeItem(local_storage_prefix + 'api_user_kanji_fetch_time');
  128. 		}
  129. 	}
  130. 	
  131. 	function reset_vocabulary_data(resetLocalStorage) {
  132. 		vocabulary_data = null;
  133. 		if (resetLocalStorage) {
  134. 			localStorage.removeItem(local_storage_prefix + 'api_user_vocabulary');
  135. 			localStorage.removeItem(local_storage_prefix + 'api_user_vocabulary_fetch_time');
  136. 		}
  137. 	}
  138. 	
  139. 	function clear_local_storage() {
  140. 		localStorage.removeItem(local_storage_prefix + 'last_review_time');
  141. 		localStorage.removeItem(local_storage_prefix + 'next_review_time');
  142. 		localStorage.removeItem(local_storage_prefix + 'last_unlock_time');
  143. 		localStorage.removeItem(local_storage_prefix + 'api_key');
  144. 		localStorage.removeItem(local_storage_prefix + 'api_user_radicals');
  145. 		localStorage.removeItem(local_storage_prefix + 'api_user_radicals_fetch_time');
  146. 		localStorage.removeItem(local_storage_prefix + 'api_user_kanji');
  147. 		localStorage.removeItem(local_storage_prefix + 'api_user_kanji_fetch_time');
  148. 		localStorage.removeItem(local_storage_prefix + 'api_user_vocabulary');
  149. 		localStorage.removeItem(local_storage_prefix + 'api_user_vocabulary_fetch_time');
  150. 	}
  151. 		
  152. 	function track_times() {
  153. 		if (is_on_review_session_page()) {
  154. 			localStorage.setItem(local_storage_prefix + 'last_review_time', now());
  155. 			
  156. 			var lastUnlockTime = new Date($('.recent-unlocks time:nth(0)').attr('datetime'))/1000;
  157. 			localStorage.setItem(local_storage_prefix + 'last_unlock_time', now());
  158. 		}
  159. 		
  160. 		if (is_on_dashboard()) {
  161. 			var next_review = Number($('.review-status .timeago').attr('datetime'));
  162. 			// Workaround for "WaniKani Real Times" script, which deletes the element we were looking for above.
  163. 			if (isNaN(next_review)) {
  164. 				next_review = Number($('.review-status time1').attr('datetime'));
  165. 				// Conditional divide-by-1000, in case someone fixed this error in Real Times script.
  166. 				if (next_review > 10000000000) next_review /= 1000;
  167. 			}
  168. 			localStorage.setItem(local_storage_prefix + 'next_review_time', next_review);
  169. 		}
  170. 	}
  171. 	
  172. 	function get_last_review_time() {
  173. 		return Number(localStorage.getItem(local_storage_prefix + 'last_review_time') || 0);
  174. 	}
  175. 	
  176. 	function get_next_review_time() {
  177. 		return Number(localStorage.getItem(local_storage_prefix + 'next_review_time') || 0);
  178. 	}
  179. 	
  180. 	function get_last_unlock_time() {
  181. 		return Number(localStorage.getItem(local_storage_prefix + 'last_unlock_time') || 0);
  182. 	}
  183.  
  184. 	function now() {
  185. 		return Math.floor(new Date() / 1000);
  186. 	}
  187. 	
  188. 	function ajax_retry(url, retries, timeout) {
  189. 		retries = retries || 2;
  190. 		timeout = timeout || 3000;
  191. 		function action(resolve, reject) {
  192. 			$.ajax({
  193. 				url: url,
  194. 				timeout: timeout
  195. 			})
  196. 			.done(function(data, status){
  197. 				if (status === 'success')
  198. 					resolve(data);
  199. 				else
  200. 					reject();
  201. 			})
  202. 			.fail(function(xhr, status, error){
  203. 				if (status === 'error' && --retries > 0)
  204. 					action(resolve, reject);
  205. 				else
  206. 					reject();
  207. 			});
  208. 		}
  209. 		return new Promise(action);
  210. 	}
  211.  
  212. 	function query_page_radicals_with_images() {
  213. 		return new Promise(function(resolve, reject) {
  214. 			ajax_retry('/lattice/radicals/meaning').then(function(page) {
  215. 				
  216. 				if (typeof page !== 'string') {return reject();}
  217. 				
  218. 				page = $(page);
  219. 				
  220. 				radicals_with_image = [];
  221. 				
  222. 				page.find('li').each(function(i, item) {
  223. 					var attr = $(this).attr('id');
  224. 					if (attr && attr.startsWith('radical-')) {
  225. 						var radicalChar = $(this).text();
  226. 						
  227. 						var href = $(this).find('a').attr('href');
  228. 						var parsedHref = WaniKani.parse_item_url(href);
  229. 						
  230. 						var image = $(this).find('img');
  231. 						var imageSrc = '';
  232. 						if (image.length > 0) {
  233. 							imageSrc = image.attr('src');
  234. 						}
  235. 						
  236. 						radicals_with_image.push({ name: parsedHref.name, character: radicalChar, image: imageSrc });
  237. 					}
  238. 				});
  239. 				
  240. 				resolve();
  241.  
  242. 			},function(result) {
  243. 				reject(new Error('Failed to query page!'));
  244. 			});
  245. 		});
  246. 	}
  247. 	
  248. 	function get_radicals_with_image() {
  249. 		return radicals_with_image;
  250. 	}
  251. 	
  252. 	function get_api_key() {
  253. 		return new Promise(function(resolve, reject) {
  254. 			api_key = localStorage.getItem(local_storage_prefix + 'api_key');
  255. 			if (typeof api_key === 'string' && api_key.length == 32) {
  256. 				log("Already having API key");
  257. 				return resolve();	
  258. 			}
  259. 			
  260. 			log("Loading API key");
  261. 			
  262. 			ajax_retry('/account').then(function(page) {
  263. 				
  264. 				log("Loading API key ... SUCCESS");
  265. 				
  266. 				// --[ SUCCESS ]----------------------
  267. 				// Make sure what we got is a web page.
  268. 				if (typeof page !== 'string') {return reject();}
  269.  
  270. 				// Extract the user name.
  271. 				page = $(page);
  272. 				
  273. 				// Extract the API key.
  274. 				api_key = page.find('#api-button').parent().find('input').attr('value');
  275. 				if (typeof api_key !== 'string' || api_key.length !== 32)  {return reject();}
  276.  
  277. 				localStorage.setItem(local_storage_prefix + 'api_key', api_key);
  278. 				resolve();
  279.  
  280. 			},function(result) {
  281. 				
  282. 				log("Loading API key ... ERROR");
  283. 				
  284. 				// --[ FAIL ]-------------------------
  285. 				reject(new Error('Failed to fetch API key!'));
  286. 				
  287. 			});
  288. 		});
  289. 	}
  290. 	
  291. 	function call_api_user_radicals() {
  292. 		return new Promise(function(resolve, reject) {
  293. 			log("Calling API: User radicals");
  294. 			$.getJSON('/api/user/' + api_key + '/radicals/', function(json){
  295. 				if (json.error && json.error.code === 'user_not_found') {
  296. 					log("Calling API: User radicals ... ERROR")
  297. 					reset_radical_data(true);
  298. 					location.reload();
  299. 					reject();
  300. 					return;
  301. 				}
  302.  
  303. 				log("Calling API: User radicals ... SUCCESS");
  304. 				
  305. 				localStorage.setItem(local_storage_prefix + 'api_user_radicals', JSON.stringify(json));
  306. 				localStorage.setItem(local_storage_prefix + 'api_user_radicals_fetch_time', now());
  307. 				
  308. 				radical_data = json;
  309. 				
  310. 				resolve();
  311. 			});
  312. 		});
  313. 	}
  314. 	
  315. 	function call_api_user_kanji() {
  316. 		return new Promise(function(resolve, reject) {
  317. 			log("Calling API: User kanji");
  318. 			$.getJSON('/api/user/' + api_key + '/kanji/', function(json){
  319. 				if (json.error && json.error.code === 'user_not_found') {
  320. 					log("Calling API: User kanji ... ERROR")
  321. 					reset_kanji_data(true);
  322. 					location.reload();
  323. 					reject();
  324. 					return;
  325. 				}
  326.  
  327. 				log("Calling API: User kanji ... SUCCESS");
  328. 				
  329. 				localStorage.setItem(local_storage_prefix + 'api_user_kanji', JSON.stringify(json));
  330. 				localStorage.setItem(local_storage_prefix + 'api_user_kanji_fetch_time', now());
  331. 				
  332. 				kanji_data = json;
  333. 				
  334. 				resolve();
  335. 			});
  336. 		});
  337. 	}
  338. 	
  339. 	function call_api_user_vocabulary() {
  340. 		return new Promise(function(resolve, reject) {
  341. 			log("Calling API: User vocabulary");
  342. 			$.getJSON('/api/user/' + api_key + '/vocabulary/', function(json){
  343. 				if (json.error && json.error.code === 'user_not_found') {
  344. 					log("Calling API: User vocabulary ... ERROR")
  345. 					reset_vocabulary_data(true);
  346. 					location.reload();
  347. 					reject();
  348. 					return;
  349. 				}
  350.  
  351. 				log("Calling API: User vocabulary ... SUCCESS");
  352. 				
  353. 				localStorage.setItem(local_storage_prefix + 'api_user_vocabulary', JSON.stringify(json));
  354. 				localStorage.setItem(local_storage_prefix + 'api_user_vocabulary_fetch_time', now());
  355. 				
  356. 				vocabulary_data = json;
  357. 				
  358. 				resolve();
  359. 			});
  360. 		});
  361. 	}
  362. 	
  363. 	function get_last_fetch_time_api_user_radicals() {
  364. 		return Number(localStorage.getItem(local_storage_prefix + 'api_user_radicals_fetch_time'));
  365. 	}
  366. 	
  367. 	function get_last_fetch_time_api_user_kanji() {
  368. 		return Number(localStorage.getItem(local_storage_prefix + 'api_user_kanji_fetch_time'));
  369. 	}
  370. 	
  371. 	function get_last_fetch_time_api_user_vocabulary() {
  372. 		return Number(localStorage.getItem(local_storage_prefix + 'api_user_vocabulary_fetch_time'));
  373. 	}
  374. 	
  375. 	function load_radical_data() {
  376.         var next_review_time = get_next_review_time();
  377. 		var last_review_time = get_last_review_time();
  378. 		var last_unlock_time = get_last_unlock_time();
  379. 		var last_fetch_time = get_last_fetch_time_api_user_radicals();
  380.         if ((last_fetch_time <= last_unlock_time) ||
  381. 			(last_fetch_time <= last_review_time) ||
  382. 			((next_review_time < now()) && (last_fetch_time <= (now() - 3600)))) {
  383. 			log("Clearing previous fetched radical data");
  384. 			radical_data = null;
  385. 			localStorage.removeItem(local_storage_prefix + 'api_user_radicals');
  386. 			localStorage.removeItem(local_storage_prefix + 'api_user_radicals_fetch_time');
  387. 		}
  388. 		
  389. 		if (radical_data == null) {
  390. 			var stringified = localStorage.getItem(local_storage_prefix + 'api_user_radicals');
  391. 			if (stringified != null) {
  392. 				log("Radical data loaded from local storage");
  393. 				radical_data = JSON.parse(stringified);
  394. 			}
  395. 		}
  396. 		
  397. 		if (radical_data != null) {
  398. 			log("Radical data already loaded");
  399. 			return Promise.resolve();
  400. 		}
  401. 		
  402. 		return new Promise(function(resolve, reject) {
  403. 			get_api_key()
  404. 				.then(call_api_user_radicals)
  405. 				.then(function() {
  406. 					resolve();
  407. 				});
  408. 		});
  409. 	}
  410. 	
  411. 	function load_kanji_data() {
  412.         var next_review_time = get_next_review_time();
  413. 		var last_review_time = get_last_review_time();
  414. 		var last_unlock_time = get_last_unlock_time();
  415. 		var last_fetch_time = get_last_fetch_time_api_user_kanji();
  416.         if ((last_fetch_time <= last_unlock_time) ||
  417. 			(last_fetch_time <= last_review_time) ||
  418. 			((next_review_time < now()) && (last_fetch_time <= (now() - 3600)))) {
  419. 			log("Clearing previous fetched kanji data");
  420. 			kanji_data = null;
  421. 			localStorage.removeItem(local_storage_prefix + 'api_user_kanji');
  422. 			localStorage.removeItem(local_storage_prefix + 'api_user_kanji_fetch_time');
  423. 		}
  424. 		
  425. 		if (kanji_data == null) {
  426. 			var stringified = localStorage.getItem(local_storage_prefix + 'api_user_kanji');
  427. 			if (stringified != null) {
  428. 				log("Kanji data loaded from local storage");
  429. 				kanji_data = JSON.parse(stringified);
  430. 			}
  431. 		}
  432. 		
  433. 		if (kanji_data != null) {
  434. 			log("Kanji data already loaded");
  435. 			return Promise.resolve();
  436. 		}
  437. 		
  438. 		return new Promise(function(resolve, reject) {
  439. 			get_api_key()
  440. 				.then(call_api_user_kanji)
  441. 				.then(function() {
  442. 					resolve();
  443. 				});
  444. 		});
  445. 	}
  446. 	
  447. 	function load_vocabulary_data() {
  448.         var next_review_time = get_next_review_time();
  449. 		var last_review_time = get_last_review_time();
  450. 		var last_unlock_time = get_last_unlock_time();
  451. 		var last_fetch_time = get_last_fetch_time_api_user_vocabulary();
  452.         if ((last_fetch_time <= last_unlock_time) ||
  453. 			(last_fetch_time <= last_review_time) ||
  454. 			((next_review_time < now()) && (last_fetch_time <= (now() - 3600)))) {
  455. 			log("Clearing previous fetched vocabulary data");
  456. 			vocabulary_data = null;
  457. 			localStorage.removeItem(local_storage_prefix + 'api_user_vocabulary');
  458. 			localStorage.removeItem(local_storage_prefix + 'api_user_vocabulary_fetch_time');
  459. 		}
  460. 		
  461. 		if (vocabulary_data == null) {
  462. 			var stringified = localStorage.getItem(local_storage_prefix + 'api_user_vocabulary');
  463. 			if (stringified != null) {
  464. 				log("Vocabulary data loaded from local storage");
  465. 				vocabulary_data = JSON.parse(stringified);
  466. 			}
  467. 		}
  468. 		
  469. 		if (vocabulary_data != null) {
  470. 			log("Vocabulary data already loaded");
  471. 			return Promise.resolve();
  472. 		}
  473. 		
  474. 		return new Promise(function(resolve, reject) {
  475. 			get_api_key()
  476. 				.then(call_api_user_vocabulary)
  477. 				.then(function() {
  478. 					resolve();
  479. 				});
  480. 		});
  481. 	}
  482. 	
  483. 	function get_radical_data() {
  484. 		return radical_data;
  485. 	}
  486. 	
  487. 	function get_kanji_data() {
  488. 		return kanji_data;
  489. 	}
  490. 	
  491. 	function get_vocabulary_data() {
  492. 		return vocabulary_data;
  493. 	}
  494. 	
  495. 	function find_radical(meaning) {
  496. 		if (radical_data ==  null) {
  497. 			return null;
  498. 		}
  499. 		
  500. 		var numRadicals = radical_data.requested_information.length;
  501. 		for (var i = 0; i < numRadicals; i++) {
  502. 			if (radical_data.requested_information[i].meaning == meaning) {
  503. 				return radical_data.requested_information[i];
  504. 			}
  505. 		}
  506. 		
  507. 		return null;
  508. 	}
  509. 	
  510. 	function find_kanji(character) {
  511. 		if (kanji_data ==  null) {
  512. 			return null;
  513. 		}
  514. 		
  515. 		var numKanji = kanji_data.requested_information.length;
  516. 		for (var i = 0; i < numKanji; i++) {
  517. 			if (kanji_data.requested_information[i].character == character) {
  518. 				return kanji_data.requested_information[i];
  519. 			}
  520. 		}
  521. 		
  522. 		return null;
  523. 	}
  524. 	
  525. 	function find_vocabulary(character) {
  526. 		if (vocabulary_data ==  null) {
  527. 			return null;
  528. 		}
  529. 		
  530. 		var numVocabulary = vocabulary_data.requested_information.general.length;
  531. 		for (var i = 0; i < numVocabulary; i++) {
  532. 			if (vocabulary_data.requested_information.general[i].character == character) {
  533. 				return vocabulary_data.requested_information.general[i];
  534. 			}
  535. 		}
  536. 		
  537. 		return null;
  538. 	}
  539. 	
  540. 	function find_item(type, name) {
  541. 		if (type == 'radicals') {
  542. 			return find_radical(name);
  543. 		}
  544. 		else if(type == 'kanji') {
  545. 			return find_kanji(name);
  546. 		}
  547. 		else if(type == 'vocabulary') {
  548. 			return find_vocabulary(name);
  549. 		}
  550. 		else {
  551. 			return null;
  552. 		}
  553. 	}
  554. 	
  555. 	return {
  556. 		is_on_wanikani: is_on_wanikani,
  557. 		is_on_dashboard: is_on_dashboard,
  558. 		is_on_review_session_page: is_on_review_session_page,
  559. 		is_on_review_page: is_on_review_page,
  560. 		is_on_lesson_session_page: is_on_lesson_session_page,
  561. 		is_on_lesson_page: is_on_lesson_page,
  562. 		is_on_lattice_radicals_meaning: is_on_lattice_radicals_meaning,
  563. 		is_on_lattice_radicals_progress: is_on_lattice_radicals_progress,
  564. 		is_on_lattice_kanji_combined: is_on_lattice_kanji_combined,
  565. 		is_on_lattice_kanji_meaning: is_on_lattice_kanji_meaning,
  566. 		is_on_lattice_kanji_reading: is_on_lattice_kanji_reading,
  567. 		is_on_lattice_kanji_progress: is_on_lattice_kanji_progress,
  568. 		is_on_lattice_vocabulary_combined: is_on_lattice_vocabulary_combined,
  569. 		is_on_lattice_vocabulary_meaning: is_on_lattice_vocabulary_meaning,
  570. 		is_on_lattice_vocabulary_reading: is_on_lattice_vocabulary_reading,
  571. 		is_on_lattice_vocabulary_progress: is_on_lattice_vocabulary_progress,
  572. 		query_page_radicals_with_images: query_page_radicals_with_images,
  573. 		get_radicals_with_image: get_radicals_with_image,
  574. 		parse_item_url: parse_item_url,
  575. 		reset_radical_data: reset_radical_data,
  576. 		reset_kanji_data: reset_kanji_data,
  577. 		reset_vocabulary_data: reset_vocabulary_data,
  578. 		clear_local_storage: clear_local_storage,
  579. 		track_times: track_times,
  580. 		get_last_review_time: get_last_review_time,
  581. 		get_next_review_time: get_next_review_time,
  582. 		load_radical_data: load_radical_data,
  583. 		get_radical_data: get_radical_data,
  584. 		find_radical: find_radical,
  585. 		load_kanji_data: load_kanji_data,
  586. 		get_kanji_data: get_kanji_data,
  587. 		find_kanji: find_kanji,
  588. 		load_vocabulary_data: load_vocabulary_data,
  589. 		get_vocabulary_data: get_vocabulary_data,
  590. 		find_vocabulary: find_vocabulary,
  591. 		find_item: find_item,
  592. 	};
  593. })();
  594.  
  595. var UI = (function() {
  596. 	function addStyle(aCss) {
  597. 		var head, style;
  598. 		head = document.getElementsByTagName('head')[0];
  599. 		if (head) {
  600. 			style = document.createElement('style');
  601. 			style.setAttribute('type', 'text/css');
  602. 			style.textContent = aCss;
  603. 			head.appendChild(style);
  604. 			return style;
  605. 		}
  606. 		return null;
  607. 	}
  608. 	
  609. 	function initCss() {
  610. 		var css =
  611. 			'#item_marker {' +
  612. 			'  display:none;' +
  613. 			'}' +
  614. 			'#item_marker h3 {' +
  615. 			'  height: 24px;' +
  616. 	        '  margin-top: 10px;' +
  617. 			'  margin-bottom: 0px;' +
  618. 			'  padding: 5px 20px;' +
  619. 			'  border-radius: 5px 5px 0 0;' +
  620. 	        '  background-color: seagreen;' +
  621. 	        '  color: white;' +
  622. 	        '  text-shadow: none;' +
  623. 			'}' +
  624. 			'#item_marker section {' +
  625. 			'  background-color: lightgrey;' +
  626. 			'}' +
  627. 			'#item_marker table {' +
  628. 			'}' +
  629. 			'#item_marker td {' +
  630. 			'  padding: 2px 8px;' +
  631. 			'}' + 
  632. 			'#item_marker .close_button {' +
  633. 			'  float: right;' +
  634. 			'  height: 24px;' +
  635. 			'}'
  636. 			;
  637. 		
  638. 		addStyle(css);
  639. 	}
  640. 	
  641. 	function buildIdAttr(id) {
  642. 		if (id && id != '')
  643. 			return 'id="' + id + '"';
  644. 		return '';
  645. 	}
  646. 	
  647. 	function addOnChangeListener(id, listener) {
  648. 		$('#' + id).off('change');
  649. 		$('#' + id).on('change', listener);
  650. 	}
  651. 	
  652. 	function addOnClickListener(id, listener) {
  653. 		$('#' + id).off('click');
  654. 		$('#' + id).on('click', listener);
  655. 	}
  656. 	
  657. 	function buildWindow(id, title) {
  658. 		var html =
  659. 			'<div ' + buildIdAttr(id) + ' class="container">' +
  660. 				'<div class="row">' +
  661. 					'<div class="span12" >' +
  662. 						'<section id="' + id + '_body">' +
  663. 							'<h3>' +
  664. 								title +
  665. 								'<button class="close_button" " ' + buildIdAttr(id + '_close_btn') + '>Close</button>' +
  666. 							'</h3>' +
  667. 						'</section>' +
  668. 					'</div>' +
  669. 				'</div>' +
  670. 			'</div>'
  671. 			;
  672. 		return html;
  673. 	}
  674. 	
  675. 	function buildTable(id) {
  676. 		var html = 
  677. 			'<table ' + buildIdAttr(id) + '>' +
  678. 				'<tbody ' + buildIdAttr(id + '_body') + '>' +
  679. 				'</tbody>' +
  680. 			'</table>';
  681. 		return html;
  682. 	}
  683. 	
  684. 	function buildTableRow(id, column1, column2) {
  685. 		var html =
  686. 			'<tr' + buildIdAttr(id) + '>' +
  687. 				'<td>' + column1 + '</td>' +
  688. 				'<td>' + column2 + '</td>' +
  689. 			'</tr>';
  690. 		return html;
  691. 	}
  692. 	
  693. 	function buildSelection(id, tooltip) {
  694. 		var html =
  695. 			'<select ' + buildIdAttr(id) + ' class="input" name="' + id + '" title="' + tooltip + '" />';
  696. 		return html;
  697. 	}
  698. 	
  699. 	function addSelectionOption(selectId, value, label, selected) {
  700. 		$('#' + selectId).append(
  701. 				'<option value="' + value + '" ' + (selected ? 'selected' : '') + '>' +
  702. 					label +
  703. 				'</option>');
  704. 	}
  705. 	
  706. 	function buildCheckBox(id, checked) {
  707. 		var html =
  708. 			'<input ' + buildIdAttr(id) + ' type="checkbox" ' + (checked ? 'checked' : '') + '>';
  709. 		return html;
  710. 	}
  711. 	
  712. 	return {
  713. 		initCss: initCss,
  714. 		buildWindow: buildWindow,
  715. 		buildTable: buildTable,
  716. 		buildTableRow: buildTableRow,
  717. 		buildCheckBox: buildCheckBox,
  718. 		buildSelection: buildSelection,
  719. 		addSelectionOption: addSelectionOption,
  720. 		addOnChangeListener: addOnChangeListener,
  721. 		addOnClickListener: addOnClickListener,
  722. 	};
  723. })();
  724.  
  725. (function(gobj) {
  726. 	var data = {
  727. 		lists: [
  728. 			{
  729. 				name: 'A',
  730. 				items:[],
  731. 				settings: {
  732. 					markedItemsBorderColor: 'black',
  733. 					toggleMarksWithLinks: false,
  734. 					showReviewWarning: false,
  735. 					addDelayBeforeAnswerIsPossible: false,
  736. 				}
  737. 			},
  738. 			{
  739. 				name: 'B',
  740. 				items:[],
  741. 				settings: {
  742. 					markedItemsBorderColor: 'red',
  743. 					toggleMarksWithLinks: false,
  744. 					showReviewWarning: false,
  745. 					addDelayBeforeAnswerIsPossible: false,
  746. 				}
  747. 			},
  748. 			{
  749. 				name: 'C',
  750. 				items:[],
  751. 				settings: {
  752. 					markedItemsBorderColor: 'orange',
  753. 					toggleMarksWithLinks: false,
  754. 					showReviewWarning: false,
  755. 					addDelayBeforeAnswerIsPossible: false,
  756. 				}
  757. 			},
  758. 			{
  759. 				name: 'D',
  760. 				items:[],
  761. 				settings: {
  762. 					markedItemsBorderColor: 'yellow',
  763. 					toggleMarksWithLinks: false,
  764. 					showReviewWarning: false,
  765. 					addDelayBeforeAnswerIsPossible: false,
  766. 				}
  767. 			},
  768. 			{
  769. 				name: 'E',
  770. 				items:[],
  771. 				settings: {
  772. 					markedItemsBorderColor: 'cyan',
  773. 					toggleMarksWithLinks: false,
  774. 					showReviewWarning: false,
  775. 					addDelayBeforeAnswerIsPossible: false,
  776. 				}
  777. 			}
  778. 		],
  779. 		settings: {
  780. 			unmarkedItemsBorderColor: 'no_border',
  781. 		}};
  782. 	
  783. 	var dataVersion = 2;
  784. 	
  785. 	var settingsWindowAdded = false;
  786. 	var dropDownMenuExtended = false;
  787. 	
  788. 	var availableBorderColors = [
  789. 	                     		{ value: 'no_border', label: 'No border' },
  790. 	                     		{ value: 'black', label: 'Black' },
  791. 	                     		{ value: 'darkgrey', label: 'Dark Grey' },
  792. 	                     		{ value: 'lightgrey', label: 'Light Grey' },
  793. 	                     		{ value: 'white', label: 'White' },
  794. 	                     		{ value: 'red', label: 'Red' },
  795. 	                     		{ value: 'orange', label: 'Orange' },
  796. 	                     		{ value: 'yellow', label: 'Yellow' },
  797. 	                     		{ value: 'green', label: 'Green' },
  798. 	                     		{ value: 'blue', label: 'Blue' },
  799. 	                     		{ value: 'indigo', label: 'Indigo' },
  800. 	                     		{ value: 'violet', label: 'Violet' },
  801. 	                     		{ value: 'cyan', label: 'Cyan' }
  802. 	                     		];
  803. 	
  804. 	var localStoragePrefix = 'ItemMarker_';
  805. 	
  806. 	var pageUpdateIsLocked = false;
  807. 	
  808. 	var lastSeenItem = 0;
  809. 	var lastSeenQuestionType = '';
  810. 	
  811. 	//-------------------------------------------------------------------
  812. 	// Main function
  813. 	//-------------------------------------------------------------------
  814. 	function main() {
  815. 		console.log('START - WaniKani Item Marker');
  816. 		
  817. 		loadData();
  818. 		
  819. 		WaniKani.track_times();
  820. 		
  821. 		extendDropDownMenu();
  822. 		
  823. 		updatePage();
  824. 		
  825. 		console.log('END - WaniKani Item Marker');
  826. 	}
  827. 	window.addEventListener('load', main, false);
  828. 	//window.addEventListener('focus', main, false);
  829. 	
  830. 	function extendDropDownMenu() {
  831. 		if (dropDownMenuExtended) {
  832. 			return;
  833. 		}
  834. 		
  835. 	    $('<li><a href="#item_marker">Item Marker</a></li>')
  836. 	    	.insertBefore($('.account .dropdown-menu .nav-header:eq(1)'))
  837. 	    	.on('click', toggleSettingsWindow);
  838. 	    
  839. 	    dropDownMenuExtended = true;
  840. 	}
  841. 	
  842. 	function buildSettingsWindow() {
  843. 		UI.initCss();
  844. 		
  845. 		var html;
  846. 		
  847. 		html = UI.buildWindow('item_marker', 'Item Marker');
  848. 		$(html).insertAfter($('.navbar'));
  849. 		
  850. 		html = UI.buildTable('item_marker_settings');
  851. 		console.log(html);
  852. 		$('#item_marker_body').append(html);
  853. 		
  854. 		html = UI.buildTableRow(
  855. 				'',
  856. 				'<b>General settings</b>',
  857. 				'');
  858. 		$('#item_marker_settings_body').append(html);
  859. 			
  860. 		html = UI.buildTableRow(
  861. 				'',
  862. 				'Border color for unmarked items',
  863. 				UI.buildSelection(
  864. 						'border_color_unmarked_items',
  865. 						'Select the border color for unmarked items'));
  866. 		$('#item_marker_settings_body').append(html);
  867. 		
  868. 		for (var i = 0; i < availableBorderColors.length; i++) {
  869. 			UI.addSelectionOption('border_color_unmarked_items',
  870. 					availableBorderColors[i].value,
  871. 					availableBorderColors[i].label,
  872. 					availableBorderColors[i].value == data.settings.unmarkedItemsBorderColor);
  873. 		}
  874. 		
  875. 		UI.addOnChangeListener('border_color_unmarked_items',
  876. 				function()
  877. 				{
  878. 					loadData();
  879. 					data.settings.unmarkedItemsBorderColor = $('#border_color_unmarked_items' + listIndex).val();
  880. 					saveData();
  881. 					updateLinks();
  882. 				});
  883. 		
  884. 		$(data.lists).each(function(listIndex, list) {
  885. 			html = UI.buildTableRow(
  886. 				'',
  887. 				'<b>Settings of List ' + list.name + '</b>',
  888. 				'');
  889. 			$('#item_marker_settings_body').append(html);
  890. 			
  891. 			html = UI.buildTableRow(
  892. 					'',
  893. 					'Border color for marked items',
  894. 					UI.buildSelection(
  895. 							'border_color_marked_items' + listIndex,
  896. 							'Select the border color for marked items'));
  897. 			$('#item_marker_settings_body').append(html);
  898. 			
  899. 			for (var i = 0; i < availableBorderColors.length; i++) {
  900. 				UI.addSelectionOption('border_color_marked_items' + listIndex,
  901. 						availableBorderColors[i].value,
  902. 						availableBorderColors[i].label,
  903. 						availableBorderColors[i].value == list.settings.markedItemsBorderColor);
  904. 			}
  905. 			
  906. 			html = UI.buildTableRow(
  907. 					'',
  908. 					'Use links to mark/unmark items',
  909. 					UI.buildCheckBox(
  910. 							'use_links_to_toggle_items' + listIndex,
  911. 							list.settings.toggleMarksWithLinks));
  912. 			$('#item_marker_settings_body').append(html);
  913. 			
  914. 			html = UI.buildTableRow(
  915. 					'',
  916. 					'Show warning during reviews',
  917. 					UI.buildCheckBox(
  918. 							'show_review_warning' + listIndex,
  919. 							list.settings.showReviewWarning));
  920. 			$('#item_marker_settings_body').append(html);
  921. 			
  922. 			html = UI.buildTableRow(
  923. 					'',
  924. 					'Add 30 second delay before review answer is possible',
  925. 					UI.buildCheckBox(
  926. 							'add_delay_before_answer_is_possible' + listIndex,
  927. 							list.settings.addDelayBeforeAnswerIsPossible));
  928. 			$('#item_marker_settings_body').append(html);
  929. 			
  930. 			UI.addOnChangeListener('border_color_marked_items' + listIndex,
  931. 					function()
  932. 					{
  933. 						loadData();
  934. 						data.lists[listIndex].settings.markedItemsBorderColor = $('#border_color_marked_items' + listIndex).val();
  935. 						saveData();
  936. 						updateLinks();
  937. 					});
  938. 			UI.addOnChangeListener('use_links_to_toggle_items' + listIndex,
  939. 					function()
  940. 					{
  941. 						loadData();
  942. 						data.lists[listIndex].settings.toggleMarksWithLinks = $('#use_links_to_toggle_items' + listIndex).is(':checked');
  943. 						saveData();
  944. 						updateLinks();
  945. 					});
  946. 			UI.addOnChangeListener('show_review_warning' + listIndex,
  947. 					function()
  948. 					{
  949. 						loadData();
  950. 						data.lists[listIndex].settings.showReviewWarning = $('#show_review_warning' + listIndex).is(':checked');
  951. 						saveData();
  952. 					});
  953. 			UI.addOnChangeListener('add_delay_before_answer_is_possible' + listIndex,
  954. 					function()
  955. 					{
  956. 						loadData();
  957. 						data.lists[listIndex].settings.addDelayBeforeAnswerIsPossible = $('#add_delay_before_answer_is_possible' + listIndex).is(':checked');
  958. 						saveData();
  959. 					});
  960. 			UI.addOnClickListener('item_marker_close_btn',
  961. 					function(e)
  962. 					{
  963. 						toggleSettingsWindow(e);
  964. 					});
  965. 		});
  966. 		
  967. 		settingsWindowAdded = true;
  968. 	}
  969.  
  970.     function toggleSettingsWindow(e) {
  971.         if (e !== undefined) e.preventDefault();
  972.  
  973.         // Add the manager if not already.
  974.         if (!settingsWindowAdded) buildSettingsWindow();
  975.  
  976.         $('#item_marker').slideToggle();
  977.         $('html, body').animate({scrollTop: 0}, 800);
  978.     }
  979. 	
  980. 	//-------------------------------------------------------------------
  981. 	// Update the current page and add the item marker features
  982. 	//-------------------------------------------------------------------
  983. 	function updatePage() {
  984. 		if (pageUpdateIsLocked) {
  985. 			return;
  986. 		}
  987. 		
  988. 		if (WaniKani.is_on_dashboard()) {
  989. 			updateDashboardPage();
  990. 		}
  991. 		else if (WaniKani.is_on_review_page() || WaniKani.is_on_lesson_page()) {
  992. 			updateReviewAndLessonPage();
  993. 		}
  994. 		else if (WaniKani.is_on_review_session_page()) {
  995. 			updateReviewSessionPage();
  996. 		}
  997. 		else {
  998. 			var location = decodeURI(window.location);
  999. 			var parsedUrl = WaniKani.parse_item_url(location);
  1000. 			if (parsedUrl) {
  1001. 				updateItemPage(parsedUrl.type, parsedUrl.name);
  1002. 			}
  1003. 		}
  1004. 		
  1005. 		updateLinks();
  1006. 	}
  1007. 	
  1008. 	function updateLinks() {
  1009. 		$('a').each(function(i, item) {
  1010. 			var href = $(this).attr('href');
  1011. 			
  1012. 			updateLinkFunction(href, $(this));
  1013. 			updateItemBorder(href, $(this));
  1014. 		});
  1015. 		
  1016. 		$('ul.alt-character-list a').each(function(i, item) {
  1017. 			var href = $(this).attr('href');
  1018. 			
  1019. 			var parsedUrl = WaniKani.parse_item_url(href);
  1020. 			if (parsedUrl) {
  1021. 				$(this).css('box-shadow', '');
  1022. 				
  1023. 				updateItemBorder(href, $(this).parent('li'));
  1024. 			}
  1025. 		});
  1026. 		
  1027. 		
  1028. 		$(data.lists).each(function(listIndex, list) {
  1029. 			$('#marked_items_list' + listIndex + ' a').each(function(i, item) {
  1030. 				var href = $(this).attr('href');
  1031. 				
  1032. 				var parsedUrl = WaniKani.parse_item_url(href);
  1033. 				if (parsedUrl) {
  1034. 					$(this).css('box-shadow', '');
  1035. 					
  1036. 					updateItemBorder(href, $(this).children('span:nth(0)'));
  1037. 				}
  1038. 			});
  1039. 		});
  1040. 	}
  1041. 	
  1042. 	function updateLinkFunction(url, htmlElem) {
  1043. 		var parsedUrl = WaniKani.parse_item_url(url);
  1044. 		if (parsedUrl) {
  1045. 			htmlElem.off('click');
  1046. 			$(data.lists).each(function(listIndex, list) {
  1047. 				if (list.settings.toggleMarksWithLinks) {
  1048. 					htmlElem.on('click',
  1049. 						function(e)
  1050. 						{
  1051. 							e.preventDefault();
  1052. 							toggleItemByUri(listIndex, url);
  1053. 						});
  1054. 				}
  1055. 			});
  1056. 		}
  1057. 	}
  1058. 	
  1059. 	function updateItemBorder(url, htmlElem) {
  1060. 		var parsedUrl = WaniKani.parse_item_url(url);
  1061. 		if (parsedUrl) {
  1062. 			var marked = false;
  1063. 			var boxShadow = '';
  1064. 			
  1065. 			var shadowWidth = 2;
  1066. 			$(data.lists).each(function(listIndex, list) {
  1067. 				var item_index = indexOf(listIndex, parsedUrl.type, parsedUrl.name);
  1068. 				if (item_index !== -1) {
  1069. 					marked = true;
  1070. 					
  1071. 					if (list.settings.markedItemsBorderColor != 'no_border') {
  1072. 						if (boxShadow == '') {
  1073. 							boxShadow = 'inset 0 0 0 ' + shadowWidth + 'px ' + list.settings.markedItemsBorderColor;
  1074. 						}
  1075. 						else {
  1076. 							boxShadow = boxShadow + ', inset 0 0 0 ' + shadowWidth + 'px ' + list.settings.markedItemsBorderColor;
  1077. 						}
  1078. 						shadowWidth = shadowWidth + 2;
  1079. 					}
  1080. 				}
  1081. 			});
  1082. 			
  1083. 			if (marked) {
  1084. 				htmlElem.css('box-shadow', boxShadow);
  1085. 			}
  1086. 			else {
  1087. 				if (data.settings.unmarkedItemsBorderColor != 'no_border') {
  1088. 					htmlElem.css('box-shadow', 'inset 0 0 0 2px ' + data.settings.unmarkedItemsBorderColor);
  1089. 				}
  1090. 				else {
  1091. 					htmlElem.css('box-shadow', '');
  1092. 				}
  1093. 			}
  1094. 		}
  1095. 	}
  1096. 	
  1097. 	//-------------------------------------------------------------------
  1098. 	// Load item marker data from local storage
  1099. 	//-------------------------------------------------------------------
  1100. 	function loadData() {
  1101. 		var storedData = localStorage.getItem(localStoragePrefix + 'markedItems_v' + data.version);
  1102. 		if (storedData != null) {
  1103. 			console.log('Read current version ' + data.version);
  1104. 			storedData = JSON.parse(storedData);
  1105. 			data = storedData;
  1106. 			return;
  1107. 		}
  1108. 		
  1109. 		storedData = localStorage.getItem(localStoragePrefix + 'markedItems'); // v1
  1110. 		if (storedData != null) {
  1111. 			console.log('Read old version 1');
  1112. 			
  1113. 			storedData = JSON.parse(storedData);
  1114. 			data.lists[0].items = storedData.items;
  1115. 			
  1116. 			var storedSettings = localStorage.getItem(localStoragePrefix + 'settings');
  1117. 			if (storedSettings) {
  1118. 				storedSettings = JSON.parse(storedSettings);
  1119. 				data.lists[0].settings = storedSettings;
  1120. 			}
  1121. 			
  1122. 			return;
  1123. 		}
  1124. 	}
  1125.  
  1126. 	//-------------------------------------------------------------------
  1127. 	// Save item marker data to local storage
  1128. 	//-------------------------------------------------------------------
  1129. 	function saveData() {
  1130. 		localStorage.setItem(localStoragePrefix + 'markedItems_v' + data.version, JSON.stringify(data));
  1131. 	}
  1132.  
  1133. 	//-------------------------------------------------------------------
  1134. 	// Return the index of the given item in the list
  1135. 	// returns -1 if item isn't in list
  1136. 	//-------------------------------------------------------------------
  1137. 	function indexOf(listIndex, type, name) {
  1138. 		return data.lists[listIndex].items.findIndex(function(item) { return (item.type == type) && (item.name == name); });
  1139. 	}
  1140.  
  1141. 	//-------------------------------------------------------------------
  1142. 	// Remove all marks
  1143. 	//-------------------------------------------------------------------
  1144. 	function unmarkAllItems(listIndex) {
  1145. 		loadData();
  1146. 		data.lists[listIndex].items = [];
  1147. 		saveData();
  1148. 		updatePage();
  1149. 	}
  1150.  
  1151. 	//-------------------------------------------------------------------
  1152. 	// Force refresh of page and data
  1153. 	//-------------------------------------------------------------------
  1154. 	function forceRefresh() {
  1155. 		WaniKani.reset_radical_data(true);
  1156. 		
  1157. 		$(data.lists).each(function(listIndex, list) {
  1158. 			for (var i = 0; i < list.items.length; i++) {
  1159. 				if (list.items[i].type == 'radicals') {
  1160. 					list.items[i].radical_character = null;
  1161. 					list.items[i].radical_image = null;
  1162. 				}
  1163. 			}
  1164. 		});
  1165. 		
  1166. 		updatePage();
  1167. 	}
  1168. 	
  1169. 	//-------------------------------------------------------------------
  1170. 	// Unmark a single item
  1171. 	//-------------------------------------------------------------------
  1172. 	function unmarkItem(listIndex, type, name) {
  1173. 		loadData();
  1174. 		var index = indexOf(listIndex, type, name);
  1175. 		if (index > -1) {
  1176. 			data.lists[listIndex].items.splice(index, 1);
  1177. 			saveData();
  1178. 		}
  1179. 		
  1180. 		updatePage();
  1181. 	}
  1182. 	
  1183. 	function toggleItemByUri(listIndex, uri) {
  1184. 		var parsedUrl = WaniKani.parse_item_url(uri);
  1185. 		if (parsedUrl) {
  1186. 			var index = indexOf(listIndex, parsedUrl.type, parsedUrl.name);
  1187. 			if (index > -1) {
  1188. 				unmarkItem(listIndex, parsedUrl.type, parsedUrl.name);
  1189. 			}
  1190. 			else {
  1191. 				markItem(listIndex, parsedUrl.type, parsedUrl.name);
  1192. 			}
  1193. 		}
  1194. 	}
  1195.  
  1196. 	//-------------------------------------------------------------------
  1197. 	// Sort the list of marked items
  1198. 	//-------------------------------------------------------------------
  1199. 	function sortItems(listIndex) {
  1200. 		loadData();
  1201. 		
  1202. 		data.lists[listIndex].items.sort(
  1203. 			function(a, b) {
  1204. 				if (a.type == 'radicals') {
  1205. 					if (b.type != 'radicals') {
  1206. 						return -1;
  1207. 					}
  1208. 				}
  1209. 				else if (a.type == 'kanji') {
  1210. 					if (b.type == 'radicals') {
  1211. 						return 1;
  1212. 					}
  1213. 					else if (b.type == 'vocabulary') {
  1214. 						return -1;
  1215. 					}
  1216. 				}
  1217. 				else {
  1218. 					if (b.type != 'vocabulary') {
  1219. 						return 1;
  1220. 					}
  1221. 				}
  1222. 				
  1223. 				return a.name.localeCompare(b.name);
  1224. 			});
  1225. 			
  1226. 		saveData();
  1227. 		updatePage();
  1228. 	}
  1229. 	
  1230. 	//-------------------------------------------------------------------
  1231. 	// Mark a single item
  1232. 	//-------------------------------------------------------------------
  1233. 	function markItem(listIndex, type, name) {
  1234. 		loadData();
  1235. 		
  1236. 		var index = indexOf(listIndex, type, name);
  1237. 		if (index === -1) {
  1238. 			data.lists[listIndex].items.push({type: type, name: name, radical_character: null, radical_image: null});
  1239. 			saveData();
  1240. 		}
  1241. 		
  1242. 		updatePage();
  1243. 	}
  1244. 	
  1245. 	//-------------------------------------------------------------------
  1246. 	// Copy all items from the source to the target list
  1247. 	// aka marks them all in the target list
  1248. 	//-------------------------------------------------------------------
  1249. 	function copyAll(sourceListIndex, targetListIndex) {
  1250. 		loadData();
  1251. 		
  1252. 		pageUpdateIsLocked = true;
  1253. 		
  1254. 		for (var i = 0; i < data.lists[sourceListIndex].items.length; i++) {
  1255. 			var item = data.lists[sourceListIndex].items[i];
  1256. 			
  1257. 			markItem(targetListIndex, item.type, item.name);
  1258. 		}
  1259. 		
  1260. 		pageUpdateIsLocked = false;
  1261. 		
  1262. 		updatePage();
  1263. 	}
  1264.  
  1265. 	//-------------------------------------------------------------------
  1266. 	// Callback if the currentItem changes
  1267. 	//-------------------------------------------------------------------
  1268. 	function onCurrentItemChanged() {
  1269. 		updatePage();
  1270. 	}
  1271. 	
  1272. 	//-------------------------------------------------------------------
  1273. 	// Extends the review session page
  1274. 	// - Adds buttons to mark/unmark the current item
  1275. 	//-------------------------------------------------------------------
  1276. 	function updateReviewSessionPage() {
  1277. 		$.jStorage.stopListening('currentItem', onCurrentItemChanged);
  1278. 		$.jStorage.listenKeyChange('currentItem', onCurrentItemChanged);
  1279. 		
  1280. 		var currentItem = $.jStorage.get('currentItem');
  1281. 		
  1282. 		var name;
  1283. 		var type;
  1284. 		
  1285. 		if (currentItem.hasOwnProperty('rad')) {
  1286. 			type = 'radicals';
  1287. 			name = currentItem.en[0].toLowerCase().replace(/\s/g, "-");
  1288. 		}
  1289. 		else if (currentItem.hasOwnProperty('kan')) {
  1290. 			type = 'kanji';
  1291. 			name = currentItem.kan;
  1292. 		}
  1293. 		else if (currentItem.hasOwnProperty('voc')) {
  1294. 			type = 'vocabulary';
  1295. 			name = currentItem.voc;
  1296. 		}
  1297. 		else {
  1298. 			return;
  1299. 		}
  1300. 		
  1301. 		//console.log('updateReviewSessionPage - type: ' + type);
  1302. 		//console.log('updateReviewSessionPage - name: ' + name);
  1303. 		
  1304. 		var showReviewWarning = false;
  1305. 		var addDelayBeforeAnswerIsPossible = false;
  1306. 	
  1307. 		$(data.lists).each(function(listIndex, list) {
  1308. 			$('#option-mark' + listIndex).remove();
  1309. 			$('#option-unmark' + listIndex).remove();
  1310. 			
  1311. 			var item_index = indexOf(listIndex, type, name);
  1312. 			if (item_index === -1) {
  1313. 				$('#additional-content ul').append('<li id="option-mark' + listIndex + '"><span title="Mark on list ' + list.name + '">Mark ' + list.name + '</span></li>');
  1314. 				$('#option-mark' + listIndex).on('click', function() { markItem(listIndex, type, name); });
  1315. 			}
  1316. 			else {
  1317. 				$('#additional-content ul').append('<li id="option-unmark' + listIndex + '"><span title="Unmark from list ' + list.name + '">Unmark ' + list.name + '</span></li>');
  1318. 				$('#option-unmark' + listIndex).on('click', function() { unmarkItem(listIndex, type, name); });				
  1319. 				
  1320. 				if (list.settings.showReviewWarning) {
  1321. 					showReviewWarning = true;
  1322. 				}
  1323.  
  1324. 				if (list.settings.addDelayBeforeAnswerIsPossible) {
  1325. 					addDelayBeforeAnswerIsPossible = true;
  1326. 				}
  1327. 			}
  1328. 		});
  1329. 		
  1330. 		$('#warning1').remove();
  1331. 		$('#warning2').remove();
  1332. 		if (showReviewWarning) {
  1333. 			$('#character').append('<span id="warning1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;!!!</span>');
  1334. 			$('#character').prepend('<span id="warning2">!!!&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>');
  1335. 		}
  1336.  
  1337. 		var currentQuestionType = $('#question-type').attr('class');
  1338. 		
  1339. 		$('#reviewWarning').remove();
  1340. 		if ((currentItem.id != lastSeenItem) || (currentQuestionType != lastSeenQuestionType)) {
  1341. 			if (addDelayBeforeAnswerIsPossible) {
  1342. 				$('#answer-form').prepend('<span id="reviewWarning">&nbsp;<br />Beware, it\'s a marked item! Think for a moment about your answer.<br />&nbsp;</span>');
  1343. 				$('#answer-form form').hide();
  1344. 				
  1345. 				setTimeout(function updateReviewSessionPage() {
  1346. 						$('#answer-form form').show();
  1347. 						$('#answer-form input').focus();
  1348. 						$('#reviewWarning').remove();
  1349. 					}, 30000);
  1350. 			}
  1351. 			else {
  1352. 				$('#answer-form form').show();
  1353. 				$('#answer-form input').focus();
  1354. 			}
  1355. 		}
  1356. 		
  1357. 		calculateDynamicWidthForReviewPage();
  1358. 		
  1359. 		lastSeenItem = currentItem.id;
  1360. 		lastSeenQuestionType = currentQuestionType;
  1361. 	}
  1362. 	
  1363. 	//-------------------------------------------------------------------
  1364. 	// Updates the dynamic with for the review page
  1365. 	//-------------------------------------------------------------------
  1366. 	function calculateDynamicWidthForReviewPage(){
  1367. 		var liCount = $('#additional-content ul').children().size();
  1368. 		var percentage = 100 / liCount;
  1369. 		percentage -= 0.1;
  1370. 		var cssDynamicWidth = 
  1371. 			'#additional-content ul li {' +
  1372. 			'    width: ' + percentage + '% !important' +
  1373. 			'} ';
  1374.  
  1375. 		addStyle(cssDynamicWidth);
  1376. 	}
  1377. 	
  1378. 	//-------------------------------------------------------------------
  1379. 	// Adds a css to the page
  1380. 	//-------------------------------------------------------------------
  1381. 	function addStyle(aCss) {
  1382. 		var head, style;
  1383. 		head = document.getElementsByTagName('head')[0];
  1384. 		if (head) {
  1385. 			style = document.createElement('style');
  1386. 			style.setAttribute('type', 'text/css');
  1387. 			style.textContent = aCss;
  1388. 			head.appendChild(style);
  1389. 			return style;
  1390. 		}
  1391. 		return null;
  1392. 	}
  1393. 	
  1394. 	//-------------------------------------------------------------------
  1395. 	// Extends the review and lesson page
  1396. 	// - Adds a black/white border around marked/unmarked items displayed on the page
  1397. 	//-------------------------------------------------------------------
  1398. 	function updateReviewAndLessonPage() {
  1399. 		var query = $('div.active li');
  1400. 		
  1401. 		if (query.length == 0) { // Page not completly loaded yet
  1402. 		  setTimeout(updatePage, 1000);
  1403. 		  return;
  1404. 		}
  1405. 		
  1406. 		updateLinks();
  1407. 	}
  1408. 	
  1409. 	//-------------------------------------------------------------------
  1410. 	// Extends the dashboard
  1411. 	// - Adds a 'marked items' section
  1412. 	// - Adds common buttons and marked items list to section
  1413. 	//-------------------------------------------------------------------
  1414. 	function updateDashboardPage() {
  1415. 		var query = $('section.progression');
  1416. 		if (query.length != 1) {
  1417. 			return;
  1418. 		}
  1419. 		
  1420. 		$('#marked_items').remove();
  1421. 		
  1422. 		$('section.progression').after('<section id="marked_items" />');
  1423. 		
  1424. 		$(data.lists).each(function(listIndex, list) {
  1425. 			$('#marked_items').append('<h2>Marked items - List ' + list.name + '</h2>');
  1426. 			$('#marked_items').append('<p id="marked_items_buttons' + listIndex + '" />');
  1427. 		
  1428. 			addCommonButtons(listIndex);
  1429. 			addMarkedItemsList(listIndex);
  1430. 		});
  1431. 	}
  1432. 	
  1433. 	//-------------------------------------------------------------------
  1434. 	// Extends the an item page
  1435. 	// - Adds a 'marked items' section
  1436. 	// - Adds common buttons and marked items list to section
  1437. 	// - Adds buttons to mark/unmark the current item
  1438. 	//-------------------------------------------------------------------
  1439. 	function updateItemPage(type, name) {
  1440. 		var query = $('section#information');
  1441. 		if (query.length != 1) {
  1442. 			return;
  1443. 		}
  1444. 		
  1445. 		$('#marked_items').remove();
  1446. 		
  1447. 		$('section#information').after('<section id="marked_items" />');
  1448. 		
  1449. 		$(data.lists).each(function(listIndex, list) {
  1450. 			$('#marked_items').append('<h2>Marked items - List ' + list.name + '</h2>');
  1451. 			$('#marked_items').append('<p id="marked_items_buttons' + listIndex + '" />');
  1452.  
  1453. 			var index = indexOf(listIndex, type, name);
  1454. 			if (index === -1) {
  1455. 				var button = $('<button>Mark "' + name + '"</button>');
  1456. 				button.on('click', function() { markItem(listIndex, type, name); });
  1457. 				$('#marked_items_buttons' + listIndex).append(button)
  1458. 			}
  1459. 			else {
  1460. 				var button = $('<button>Unmark "' + name + '"</button>');
  1461. 				button.on('click', function() { unmarkItem(listIndex, type, name); });
  1462. 				$('#marked_items_buttons' + listIndex).append(button)
  1463. 			}
  1464.  
  1465. 			addCommonButtons(listIndex);
  1466. 			addMarkedItemsList(listIndex);
  1467. 		});
  1468. 	}
  1469.  
  1470. 	//-------------------------------------------------------------------
  1471. 	// Adds common buttons that are used on multiple locations
  1472. 	//-------------------------------------------------------------------
  1473. 	function addCommonButtons(listIndex) {
  1474. 		if (data.lists[listIndex].items.length > 0) {
  1475. 			var button = $('<button>Unmark all</button>');
  1476. 			button.on('click', function() { unmarkAllItems(listIndex); });
  1477. 			$('#marked_items_buttons' + listIndex).append(button)
  1478. 		}
  1479. 		
  1480. 		if (data.lists[listIndex].items.length > 0) {
  1481. 			$(data.lists).each(function(otherListIndex, otherList) {
  1482. 				if (otherListIndex != listIndex) {
  1483. 					var button = $('<button>Copy all to List ' + otherList.name + '</button>');
  1484. 					button.on('click', function() { copyAll(listIndex, otherListIndex); });
  1485. 					$('#marked_items_buttons' + listIndex).append(button)
  1486. 				}
  1487. 			});
  1488. 		}
  1489. 		
  1490. 		if (data.lists[listIndex].items.length > 0) {
  1491. 			var button = $('<button>Sort</button>');
  1492. 			button.on('click', function() { sortItems(listIndex); });
  1493. 			$('#marked_items_buttons' + listIndex).append(button)
  1494. 		}
  1495. 		
  1496. 		{
  1497. 			var button = $('<button>Force refresh</button>');
  1498. 			button.on('click', function() { forceRefresh(); });
  1499. 			$('#marked_items_buttons' + listIndex).append(button)
  1500. 		}
  1501. 	}
  1502. 	
  1503. 	 function buildItemList(listIndex) {
  1504. 		detect_radical_characters();
  1505. 		
  1506. 		for (var i = 0; i < data.lists[listIndex].items.length; i++) {
  1507. 			var item = data.lists[listIndex].items[i];
  1508. 			
  1509. 			var typeForClass = item.type;
  1510. 			if (typeForClass == 'radicals')
  1511. 				typeForClass = 'radical';
  1512. 			
  1513. 			var itemText = item.name;
  1514. 			
  1515. 			if (item.type == 'radicals') {
  1516. 				if (item.radical_image && item.radical_image != '') {
  1517. 					itemText = '<img src="' + item.radical_image + '"/>';
  1518. 				}
  1519. 				else if (item.radical_character != '') {
  1520. 					itemText = item.radical_character;
  1521. 				}
  1522. 				else {
  1523. 					itemText = '<i class="radical-' + item.name + '"></i>';
  1524. 				}
  1525. 			}
  1526. 			
  1527. 			$('#marked_items_list' + listIndex).append(
  1528. 				'<a href="/' + item.type + '/' + item.name + '">' +
  1529. 				'	<span class="' + typeForClass + '-icon" lang="ja">' +
  1530. 				'		<span style="display: inline-block; margin-top: 0.1em;" class="japanese-font-styling-correction">' +
  1531. 							itemText +
  1532. 				'		</span>' +
  1533. 				'	</span>' +
  1534. 				'</a>');
  1535. 		}
  1536. 		
  1537. 		updateLinks();
  1538. 	};
  1539. 	
  1540. 	//-------------------------------------------------------------------
  1541. 	// Adds the list of marked items to the current page
  1542. 	//-------------------------------------------------------------------
  1543. 	function addMarkedItemsList(listIndex) {
  1544. 		$('#marked_items').append('<span id="marked_items_list' + listIndex + '" />')
  1545. 	 
  1546. 		if (data.lists[listIndex].items.length == 0) {
  1547. 			$('#marked_items_list' + listIndex).append('<p>No marked items</p>');
  1548. 		}
  1549. 		else {
  1550. 			WaniKani.query_page_radicals_with_images().then(function() { buildItemList(listIndex); });
  1551. 		}
  1552. 	}
  1553. 	
  1554. 	//-------------------------------------------------------------------
  1555. 	// Uses the radical info to determine if a radical uses a character
  1556. 	// or an image.
  1557. 	//-------------------------------------------------------------------
  1558. 	function detect_radical_characters() {
  1559. 		
  1560. 		var radicals_with_images = WaniKani.get_radicals_with_image();
  1561. 		
  1562. 		$(data.lists).each(function(listIndex, list) {
  1563. 			$(list.items).each(function(itemIndex, item) {
  1564. 				if ((item.type == 'radicals') && (item.radical_character == null)) {
  1565. 					var radical_character = null;
  1566. 					
  1567. 					var foundRadical = radicals_with_images.find(function(radical_with_image) {
  1568. 						return radical_with_image.name == item.name;
  1569. 					});
  1570. 					
  1571. 					if (!foundRadical) {
  1572. 						return;
  1573. 					}
  1574. 					
  1575. 					console.log('detect_radical_characters: ' + item.name + ' -> ' + foundRadical.character + ' / ' + foundRadical.image);
  1576. 					
  1577. 					list.items[itemIndex].radical_character = foundRadical.character;
  1578. 					list.items[itemIndex].radical_image = foundRadical.image;
  1579. 				}
  1580. 			});
  1581. 		});
  1582. 		
  1583. 		saveData();
  1584. 	}
  1585.  
  1586. }());