☰

draggable_DC

Make DC's windows draggable

  1. // ==UserScript==
  2. // @name		draggable_DC
  3. // @author		Ladoria
  4. // @version		0.31
  5. // @grant       none
  6. // @description	Make DC's windows draggable
  7. // @match		http://www.dreadcast.net/Main
  8. // @require     http://code.jquery.com/jquery-latest.min.js
  9. // @copyright	2012+, Ladoria
  10. // @namespace InGame
  11. // ==/UserScript==
  12.  
  13. /* DEBUG Don't touch those damn things! */
  14.  
  15. var global_debug = false;
  16. var event_debug = (global_debug) ? true : false;
  17. var loading_debug = (global_debug) ? true : false;
  18. var setting_debug = (global_debug) ? true : false;
  19. // /DEBUG
  20.  
  21. /* VARIABLES Don't touch those damn things! */
  22. var zIndex = 310000;
  23. var dragging = false;
  24. var DC_draggable = new Array();
  25. var background_draggable;
  26. var coockie_prefix = 'DC_draggable_';
  27. var preset_count;
  28. var preset_aliases = new Array();
  29. var preset;
  30. // / VARIABLES
  31.  
  32. /* 	How to :
  33. 	- NE PAS RENDRE LA CARTE DÉPLAÇABLE. JAMAIS. OU SUBISSEZ UN TAS DE PROBLÈMES.
  34.  
  35. 	- Chaque indice du tableau DC_draggable doit être l'identifiant unique de l'élément à rendre déplaçable sur l'interface de DC.
  36. 	
  37. 	- Créer un indice du tableau DC_draggable contenant un tableau vide afin faire remonter l'élément au premier plan suite à un appuie sur le clic gauche de votre souris. (CF ligne pour 'zone_centre')
  38. 	
  39. 	- Créer un indice du tableau DC_draggable contenant un tableau lui-même contentant un indice 'checkbox' afin d'activer la possibilité de déplacement de l'élément. Il faudra, bien-sûr et également, renseigner le code HTML afin qu'il soit rajouter sur l'interface.
  40. 	-- le style suivant est obligatoire pour toute div afin d'éviter qu'elle soit cachée ou explose l'apparence normale de la page.
  41. 	-- style : "height:0px;width:0px;z-index:999999;"
  42. 	-- Vous êtes libre de le compléter ensuite. Ne faites que -modifier le positionnement la div- et/ou -modifier l'apparence de la checkbox-.
  43. 	-- Une checkbox avec pour attribut "name" -l'identifiant unique de l'élément à déplacer- et "class" "DC_draggable" est obligatoire (CF code existant).
  44. 	
  45. 	Enjoy!
  46. 	
  47. 	Commentaires à envoyer à Ladoria IG.
  48. */
  49.  
  50. /* SETTABLE Touch those nice things as you like! (pervert!) */
  51. preset_count = 5;
  52. preset = 0;
  53.  
  54. background_draggable = 'rgba(172, 0, 0, 0.6)';
  55.  
  56. DC_draggable['zone_centre'] = new Array();
  57.  
  58. DC_draggable['zone_gauche'] = new Array();
  59. DC_draggable['zone_gauche']['checkbox'] = '<div style="height:0px;width:0px;z-index:999999;margin-right:-13px;"><input type="checkbox" name="zone_gauche" class="DC_draggable"></div>';
  60.  
  61. DC_draggable['zone_droite'] = new Array();
  62. DC_draggable['zone_droite']['checkbox'] = '<div style="height:0px;width:0px;z-index:999999;margin-right:-13px;"><input type="checkbox" name="zone_droite" class="DC_draggable"></div>';
  63.  
  64. DC_draggable['zone_informations_lieu'] = new Array();
  65. DC_draggable['zone_informations_lieu']['checkbox'] = '<div style="height:0px;width:0px;z-index:999999;top:-11px;left:-15px;"><input type="checkbox" name="zone_informations_lieu" class="DC_draggable"></div>';
  66. DC_draggable['zone_informations_lieu']['css_initial_optionnal'] = {'top': 'auto'};
  67.  
  68. DC_draggable['zone_informations_combat'] = new Array();
  69. DC_draggable['zone_informations_combat']['checkbox'] = '<div style="height:0px;width:0px;z-index:999999;top:-11px;left:-15px;"><input type="checkbox" name="zone_informations_combat" class="DC_draggable"></div>';
  70. DC_draggable['zone_informations_combat']['css_initial_optionnal'] = {'top': 'auto'};
  71.  
  72. DC_draggable['db_combat'] = new Array();
  73. DC_draggable['db_combat']['checkbox'] = '<div style="height:0px;width:0px;z-index:999999;top:-36px;left:-10px;"><input type="checkbox" name="db_combat" class="DC_draggable"></div>';
  74. // /SETTABLE
  75.  
  76. jQuery.noConflict();
  77.  
  78. $(document).ready( function() {
  79. 	if(undefined != getCookie('background'))
  80. 		background_draggable = getCookie('background');
  81. 	if(undefined != getCookie('preset'))
  82. 		preset = parseInt(getCookie('preset'));
  83. 	
  84. 	for(var i = 1; i < preset_count + 1; i++) {
  85. 		if(undefined != getCookie('preset_aliases_' + i))
  86. 			preset_aliases.push(getCookie('preset_aliases_' + i));
  87. 	}
  88. 	
  89. 	// make the element in given array (DC_draggabele model) draggables
  90. 	function set_DC_draggable(make_draggable) {
  91. 		var to_drag = Object.keys(make_draggable);
  92. 		
  93. 		if(setting_debug) console.log('setting draggable options for: ' + to_drag);
  94. 	
  95. 		for(var i = 0; i < to_drag.length; i++) {
  96. 			var element = to_drag[i];
  97. 			var selector = '#' + element;
  98. 			
  99. 			load_from_cookie(element);
  100. 			
  101. 			if(loading_debug) console.log('\n' + element + ': ' + ((0 != $(selector).length) ? 'founded, process...' : 'missing, skip...'));
  102. 			
  103. 			if(0 != $(selector).length) {
  104. 				DC_draggable[element]['draggable'] = false;
  105. 				DC_draggable[element]['offset_initial'] = $(selector).offset();
  106. 				DC_draggable[element]['css_initial'] = {'bottom': $(selector).css('bottom')};
  107. 				
  108. 				// ici l'offset dernièrement en mémoire
  109. 				reinitalize(element, preset, true);
  110. 				
  111. 				$(selector).addClass('DC_draggable');
  112. 				
  113. 				if(undefined != DC_draggable[element]['checkbox']) {
  114. 					$(selector + ' div').first().before(DC_draggable[element]['checkbox']);
  115. 					
  116. 					// enable or disable element's drag at checkbox click
  117. 					$('input[type=checkbox][name=' + element +'].DC_draggable').click( function() {
  118. 						if($(this).is(':checked'))
  119. 							enableDrag($(this).attr('name'));
  120. 						else
  121. 							disableDrag($(this).attr('name'));
  122. 						
  123. 						if(event_debug) console.log('checked: ' + $(this).attr('name'));
  124. 					});
  125. 					if(loading_debug) console.log('event:click:checkbox: done');
  126. 					
  127. 					// place the element to its original area
  128. 					$(selector).dblclick( function() {
  129. 						reinitalize($(this).attr('id'), 'initial', false);
  130. 						
  131. 						if(event_debug) console.log('doubleclick: ' + $(this).attr('id'));
  132. 					});
  133. 					if(loading_debug) console.log('event:doubleclick: done');
  134. 					
  135. 					// set size end background of element while dragging
  136. 					$(selector).bind('drag', function(event) {
  137. 						if(true == DC_draggable[$(this).attr('id')]['draggable']) {
  138. 							if(!dragging) {
  139. 								dragging = true;
  140. 								if("" != background_draggable)
  141. 									$('#' + $(this).attr('id')).css('backgroundColor',background_draggable);
  142. 								
  143. 								$('#' + $(this).attr('id')).css('bottom','auto'); // 'cause of weird unfixed height
  144. 								
  145. 								if(event_debug) console.log('dragging: ' + $(this).attr('id'));
  146. 							}
  147. 						}
  148. 					});
  149. 					if(loading_debug) console.log('event:drag: done');
  150. 					
  151. 					// a placer sur $(document) et un .each sur les element pour retirer tout BG à la fin de totu mouse up (réglant le problème du drag & drop d'objet)
  152. 					// set original background of element at the end of drag
  153. 					$(selector).mouseup( function() {
  154. 						if(dragging) {
  155. 							dragging = false;
  156. 							
  157. 							$('#' + $(this).attr('id')).css('backgroundColor', DC_draggable[$(this).attr('id')]['backgroundColor']);
  158. 							
  159. 							if('initial' != preset) {
  160. 								DC_draggable[$(this).attr('id')]['offset_' + preset] = $('#' + $(this).attr('id')).offset();
  161. 								save_to_cookie($(this).attr('id'));
  162. 							}
  163. 							
  164. 							if(event_debug) if(!dragging) console.log('end of drag: ' + $(this).attr('id'));
  165. 						}
  166. 					});
  167. 					if(loading_debug) console.log('event:mouseup: done');
  168. 				}
  169. 				
  170. 				// puts the element on foreground
  171. 				$(selector).mousedown( function() {
  172. 					zIndex++;
  173. 					$('#' + $(this).attr('id')).zIndex(zIndex);
  174. 					
  175. 					if(event_debug) console.log('foregrounded: ' + $(this).attr('id'));
  176. 				});
  177. 				if(loading_debug) console.log('event:mousedown: done');
  178. 			}
  179. 		}
  180. 	}
  181. 	
  182. 	// need that to let the javascript display all element after the 'ready' state of the DOM
  183. 	setTimeout( function() {
  184. 		if(setting_debug) console.log('first delayed loading.');
  185. 	
  186. 		set_DC_draggable(DC_draggable);
  187. 	}, 1000);
  188. 	
  189. 	// enabling dragging of element
  190. 	function enableDrag(id) {
  191. 		$('#' + id).draggable();
  192. 		$('#' + id).css('cursor','move');
  193. 		DC_draggable[id]['draggable'] = true;
  194. 		DC_draggable[id]['backgroundColor'] = $('#' + id).css('backgroundColor');
  195. 		
  196. 		if(setting_debug) console.log('drag enabled: ' + id);
  197. 	}
  198. 	
  199. 	// disable dragging of element
  200. 	function disableDrag(id) {
  201. 		$('#' + id).draggable('destroy');
  202. 		$('#' + id).addClass('');
  203. 		$('#' + id).css('cursor','auto');
  204. 		DC_draggable[id]['draggable'] = false;
  205. 		
  206. 		if(setting_debug) console.log('drag disabled: ' + id);
  207. 	}
  208. 	
  209. 	// disable dragging of element
  210. 	function reinitalize(id, offset, forced) {
  211. 		if((true == forced
  212. 		|| true == DC_draggable[id]['draggable'])
  213. 		&& 0 != $('#' + id).length) {
  214. 			if(global_debug) console.log('offset_' + offset + ':');
  215. 			if(global_debug) console.log(DC_draggable[id]['offset_' + offset]);
  216. 		
  217. 			if(	undefined == DC_draggable[id]['offset_' + offset]
  218. 			|| 0 == offset
  219. 			|| 	(DC_draggable[id]['offset_' + offset].top == DC_draggable[id]['offset_initial'].top
  220. 				&& DC_draggable[id]['offset_' + offset].left == DC_draggable[id]['offset_initial'].left)
  221. 			) {
  222. 				if(global_debug) console.log('Setting initial offset');
  223. 				$('#' + id).offset(DC_draggable[id]['offset_initial']);
  224. 				$('#' + id).css(DC_draggable[id]['css_initial']);
  225. 				
  226. 				if(undefined != DC_draggable[id]['css_initial_optionnal'])
  227. 					$('#' + id).css(DC_draggable[id]['css_initial_optionnal']);
  228. 			}
  229. 			else {
  230. 				if(global_debug) console.log('Setting offset ' + offset);
  231. 				$('#' + id).offset(DC_draggable[id]['offset_' + offset]);
  232. 				$('#' + id).css('bottom','auto'); // 'cause of weird unfixed height
  233. 			}
  234. 		}
  235. 		
  236. 		if(setting_debug) console.log('reinitialized: ' + id);
  237. 	}
  238. 	
  239. 	// set draggable element 'after' combat's interface loading
  240. 	$(document).ajaxComplete( function(a,b,c) {
  241. 		if(c.url == '/Interface/Fight') {
  242. 			if(event_debug) console.log('fight\'s interface is requesting.');
  243. 				
  244. 			var DC_draggable_fight = new Array();
  245. 			DC_draggable_fight['zone_informations_combat'] = DC_draggable['zone_informations_combat'];
  246. 			DC_draggable_fight['db_combat'] = DC_draggable['db_combat'];
  247. 			
  248. 			set_DC_draggable(DC_draggable_fight);
  249. 		}
  250. 	});
  251. 	
  252. 	// menu
  253. 	$('#bandeau .menus > li').first().before('<li id="DC_draggable" class="couleur5"><img src="http://image.noelshack.com/fichiers/2014/23/1401993008-lado-head.png" class="infoAide" title="Une Ladoria" alt="Une Ladoria"><ul><li class="separator">Couleur de fond lors du drag:<input type="text" name="backgroundColor" class="textbox backgroundColor" value="' + background_draggable + '"></li><li name="enable" class="button">Tout activer</li><li>Configurations<div class="presetContainer">' + build_preset_html() + '</div></li><li name="bug_report" class="button separator">Signaler un bug</li><li name="suggest" class="button">Suggérer un truc</li><li class="button"><a target="_blank" href="https://greasyfork.org/scripts/2035-draggable-dc"><div>Mettre à jour</div></a></li></ul></li><li class="separator"></li>');
  254. 	
  255. 	// global style
  256. 	$('head').append('<style>#DC_draggable {padding-top: 0px !important;padding-bottom: 0px !important;}#DC_draggable ul {margin-top: 28px !important;width: 168px !important;}#DC_draggable li {padding-right: 7px !important;}#DC_draggable:hover > ul {display: block !important;}#DC_draggable .button {cursor: pointer;}#DC_draggable .textbox {width: 150px;background-color: #ffffff;}#DC_draggable .textbox.backgroundColor {margin-top: 3px;}#DC_draggable .center {text-align: center;width: 168px;color: white;font-size: 1.4em;}#DC_draggable .presetContainer {overflow: hidden;}#DC_draggable .preset {float: left;overflow: hidden;color: #000000;border: 1px solid black;padding: 1px 1px 1px 1px;width: 73px;}#DC_draggable .preset .btnTxt {margin: 1px 1px 1px 1px;padding: 1px 3px;cursor: pointer;}#DC_draggable .preset .btnTxt {width: 26px;}#DC_draggable .preset .load {float: left;}#DC_draggable .preset .save {float: right;}#DC_draggable .preset .base {width: 64px;height: 38px;}#DC_draggable .preset .base div {top: 50%;margin-top: -0.7em;}#DC_draggable .preset.selected {border-color: green;}#DC_draggable .preset .textbox {width: 69px;margin-bottom: 1px;}</style>/* to minimize [\n\t\r] */');
  257. 	
  258. 	// swtich element's offset's preset
  259. 	$('#DC_draggable input[type=checkbox][name=preset]').click( function() {
  260. 		moveTo($(this).val());
  261. 	});
  262. 	
  263. 	// display a message box to send a bug report, IG
  264. 	$('#DC_draggable [name=bug_report]').click( function() {
  265. 		nav.getMessagerie().newMessage();
  266. 		$('#db_new_message:last').zIndex('1000');
  267. 		$('#db_new_message:last .head .title').html('Reporter un BUG sur DC Draggable');
  268. 		$('#db_new_message:last #nm_cible input').val('Ladoria');
  269. 		$('#db_new_message:last #nm_sujet input').val('[HRP][DC Draggable][Bug]');
  270. 		$('#db_new_message:last #nm_texte textarea').focus();
  271. 	});
  272. 	
  273. 	// Suggeste something, IG
  274. 	$('#DC_draggable [name=suggest]').click( function() {
  275. 		nav.getMessagerie().newMessage();
  276. 		$('#db_new_message:last').zIndex('1000');
  277. 		$('#db_new_message:last .head .title').html('Suggérer un truc pour DC Draggable');
  278. 		$('#db_new_message:last #nm_cible input').val('Ladoria');
  279. 		$('#db_new_message:last #nm_sujet input').val('[HRP][DC Draggable][Suggestion]');
  280. 		$('#db_new_message:last #nm_texte textarea').focus();
  281. 	});
  282.  
  283. 	// change background color when dragging
  284. 	$('#DC_draggable input[name=backgroundColor]').keyup( function (e) {
  285. 		if(e.keyCode == 13) {
  286. 			background_draggable = $(this).val();
  287. 			saveCookie('background', background_draggable);
  288. 		}
  289. 	});
  290.  
  291. 	// enable/disable all drag
  292. 	$('#DC_draggable [name=enable]').click( function() {
  293. 		var enable;
  294. 		
  295. 		if($(this).html() == 'Tout activer') {
  296. 			enable = true;
  297. 			$(this).html('Tout désactiver');
  298. 		}
  299. 		else {
  300. 			$(this).html('Tout activer');
  301. 			enable = false;
  302. 		}
  303. 		
  304. 		$('input[type=checkbox].DC_draggable').each( function() {
  305. 			$(this).prop('checked', enable);
  306. 			
  307. 			if(enable)
  308. 				enableDrag($(this).attr('name'));
  309. 			else
  310. 				disableDrag($(this).attr('name'));
  311. 		});
  312. 	});
  313.  
  314. 	// load preset positions
  315. 	$('#DC_draggable .preset .btnTxt').click( function() {
  316. 		if(global_debug) console.log('setting for preset: ' + $(this).attr('name'));
  317. 		
  318. 		if($(this).hasClass('load')) {
  319. 			preset = $(this).attr('name');
  320. 			saveCookie('preset',preset);
  321. 			
  322. 			$('#DC_draggable .preset.selected').removeClass('selected');
  323. 			$(this).parent().addClass('selected');
  324. 		
  325. 			var to_load = Object.keys(DC_draggable);
  326. 			
  327. 			for (var i = 0; i < to_load.length; i++) {
  328. 				reinitalize(to_load[i], preset, true);
  329. 			}
  330. 		}
  331. 		else if($(this).hasClass('save')) {
  332. 			if('0' == $(this).attr('name')) return;
  333. 		
  334. 			var to_save = Object.keys(DC_draggable);
  335. 			
  336. 			for (var i = 0; i < to_save.length; i++) {
  337. 				DC_draggable[to_save[i]]['offset_' + $(this).attr('name')] = $('#' + to_save[i]).offset();
  338. 				save_to_cookie(to_save[i]);
  339. 			}
  340. 			
  341. 			saveCookie('preset_aliases_' + $(this).attr('name'), $('#preset_aliases_' + $(this).attr('name')).val());
  342. 		}
  343. 	});
  344. 	
  345. 	$('.preset_aliases').keyup( function (e) {
  346. 		if(e.keyCode == 13) {
  347. 			preset_aliases[parseInt($(this).attr('name'))] = $(this).val();
  348. 			saveCookie('preset_aliases_' + $(this).attr('name'), preset_aliases[parseInt($(this).attr('name'))]);
  349. 		}
  350. 	});
  351. });
  352.  
  353. function saveCookie(name,val) {
  354. 	name = coockie_prefix + name;
  355. 	
  356. 	if(!navigator.cookieEnabled) return;
  357. 		document.cookie = name + '=' + val + ';expires=Wed, 01 Jan 2020 00:00:00 GMT; path=/';
  358. }
  359.  
  360. function getCookie(var_name) {
  361. 	name = coockie_prefix + var_name;
  362. 	
  363. 	if(!navigator.cookieEnabled) return undefined;
  364. 	
  365. 	var start = document.cookie.indexOf(name + '=')
  366. 	if(start == -1) return undefined;
  367. 	start += name.length + 1;
  368. 	
  369. 	var end = document.cookie.indexOf(';',start);
  370. 	if (end == -1) end = document.cookie.lenght;
  371. 	
  372. 	if(global_debug) console.log(var_name + ': ' + document.cookie.substring(start,end));
  373. 	
  374. 	return document.cookie.substring(start,end);
  375. };
  376.  
  377. // load element's options from cookie
  378. function load_from_cookie(element) {
  379. 	if(undefined == DC_draggable[element]['checkbox']) return;
  380.  
  381. 	var variables = ['offset'];
  382. 	
  383. 	for(var i = 0; i < variables.length; i++) {
  384. 		var variable_name = element + '_' + variables[i];
  385. 		
  386. 		switch(variables[i]) {
  387. 			case 'offset' :
  388. 				for(var j = 1; j < preset_count + 1; j++) {
  389. 					if(	 undefined != getCookie(variable_name + '_top_' + j)
  390. 					&& 	undefined != getCookie(variable_name + '_left_' + j)) {
  391. 						if(global_debug) console.log('Loading: ' + variable_name + '_' + j);
  392. 						
  393. 						var offset = new Object();
  394. 						offset.top = parseInt(getCookie(variable_name + '_top_' + j));
  395. 						offset.left = parseInt(getCookie(variable_name + '_left_' + j));
  396. 						DC_draggable[element]['offset_' + j] = offset;
  397. 					}
  398. 				}
  399. 				break;
  400. 			default: break;
  401. 		}
  402. 	}
  403. }
  404.  
  405. // save element's options to cookie
  406. function save_to_cookie(element) {
  407. 	if(undefined == DC_draggable[element]['checkbox']) return;
  408.  
  409. 	var variables = ['offset'];
  410. 	if(global_debug) console.log('Saving: ' + element);
  411. 	
  412. 	for(var i = 0; i < variables.length; i++) {
  413. 		var variable_name = element + '_' + variables[i];
  414. 		
  415. 		switch(variables[i]) {
  416. 			case 'offset' :
  417. 				for(var j = 1; j < preset_count + 1; j++) {
  418. 					if(global_debug) console.log('Saving: ' + variable_name + '_' + j);
  419. 					
  420. 					if(undefined != DC_draggable[element]['offset_' + j]) {
  421. 						saveCookie(variable_name + '_top_' + j, DC_draggable[element]['offset_' + j].top);
  422. 						saveCookie(variable_name + '_left_' + j, DC_draggable[element]['offset_' + j].left);
  423. 					}
  424. 				}
  425. 				break;
  426. 			default: break;
  427. 		}
  428. 	}
  429. }
  430.  
  431. function build_preset_html() {
  432. 	var preset_html = '';
  433. 	
  434. 	for(var i = 0; i < preset_count + 1; i++) {
  435. 		preset_html += '<div class="DC_draggable preset';
  436. 		
  437. 		if(preset == i) preset_html += ' selected';
  438. 		
  439. 		preset_html += '">';
  440. 		
  441. 		if(0 == i) {
  442. 			preset_html += '<div class="DC_draggable btnTxt load base" name="' + i + '"><div>Initiale</div></div>';
  443. 		}
  444. 		else {
  445. 			preset_html += '<div class="DC_draggable"><input type="text" id="preset_aliases_' + i + '" class="DC_draggable textbox preset_aliases" name="' + i + '" value="' + ((undefined != preset_aliases[i - 1]) ? preset_aliases[i - 1] : ('Conf. ' + i)) + '" onclick="this.select();"></div>';
  446. 		
  447. 			preset_html += '<div class="DC_draggable btnTxt save" name="' + i + '">Save</div>';
  448. 			preset_html += '<div class="DC_draggable btnTxt load" name="' + i + '">Load</div>';
  449. 		}
  450. 		preset_html += '</div>';
  451. 	}
  452. 	
  453. 	return preset_html;
  454. };