☰

draggable_DC

Make DC's windows draggable

目前为 2014-06-11 提交的版本。查看 最新版本。

// ==UserScript==
// @name		draggable_DC
// @author		Ladoria
// @version		0.27
// @grant       none
// @description	Make DC's windows draggable
// @match		http://www.dreadcast.net/Main
// @require     http://code.jquery.com/jquery-latest.min.js
// @copyright	2012+, Ladoria
// @namespace	GTFO
// ==/UserScript==

// DEBUG Don't touch those damn things!
var global_debug = true;
var event_debug = (global_debug) ? true : false;
var loading_debug = (global_debug) ? true : false;
var setting_debug = (global_debug) ? true : false;
// /DEBUG

// VARIABLES Don't touch those damn things!
var zIndex = 310000;
var dragging = false;
var DC_draggable = new Array();
var background_draggable;
var coockie_prefix = 'DC_draggable_';
var preset_count;
var preset;
// / VARIABLES

/* 	How to :
	- NE PAS RENDRE LA CARTE DÉPLAÇABLE. JAMAIS. OU SUBISSEZ UN TAS DE PROBLÈMES.

	- Chaque indice du tableau DC_draggable doit être l'identifiant unique de l'élément à rendre déplaçable sur l'interface de DC.
	
	- 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')
	
	- 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.
	-- le style suivant est obligatoire pour toute div afin d'éviter qu'elle soit cachée ou explose l'apparence normale de la page.
	-- style : "height:0px;width:0px;z-index:999999;"
	-- Vous êtes libre de le compléter ensuite. Ne faites que -modifier le positionnement la div- et/ou -modifier l'apparence de la checkbox-.
	-- Une checkbox avec pour attribut "name" -l'identifiant unique de l'élément à déplacer- et "class" "DC_draggable" est obligatoire (CF code existant).
	
	Enjoy!
	
	Commentaires à envoyer à Ladoria IG.
*/

// SETTABLE Touch those nice things as you like! (pervert!)
preset_count = 5;
preset = 1;

background_draggable = 'rgba(172, 0, 0, 0.6)';

DC_draggable['zone_centre'] = new Array();

DC_draggable['zone_gauche'] = new Array();
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>';

DC_draggable['zone_droite'] = new Array();
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>';

DC_draggable['zone_informations_lieu'] = new Array();
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>';

DC_draggable['zone_informations_combat'] = new Array();
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>';

DC_draggable['db_combat'] = new Array();
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>';
// /SETTABLE

jQuery.noConflict();

$(document).ready( function() {
	if(undefined != getCookie('background'))
		background_draggable = getCookie('background');
	if(undefined != getCookie('preset'))
		preset = parseInt(getCookie('preset'));
		
	// load element's options from cookie
	function load_from_cookie(element) {
		if(undefined == DC_draggable[element]['checkbox']) return;
	
		var variables = ['offset'];
		
		for(var i = 0; i < variables.length; i++) {
			var variable_name = element + '_' + variables[i];
			
			switch(variables[i]) {
				case 'offset' :
					for(var j = 1; j < preset_count + 1; j++) {
						if(	 undefined != getCookie(variable_name + '_top_' + j)
						&& 	undefined != getCookie(variable_name + '_left_' + j)) {
							console.log('Loading: ' + variable_name + '_' + j);
							
							var offset = new Object();
							offset.top = parseInt(getCookie(variable_name + '_top_' + j));
							offset.left = parseInt(getCookie(variable_name + '_left_' + j));
							DC_draggable[element]['offset_' + j] = offset;
						}
					}
					break;
				default: break;
			}
		}
	}
	
	// save element's options to cookie
	function save_to_cookie(element) {
		if(undefined == DC_draggable[element]['checkbox']) return;
	
		var variables = ['offset'];
		console.log('Saving: ' + element);
		
		for(var i = 0; i < variables.length; i++) {
			var variable_name = element + '_' + variables[i];
			
			switch(variables[i]) {
				case 'offset' :
					for(var j = 1; j < preset_count + 1; j++) {
						console.log('Saving: ' + variable_name + '_' + j);
						
						if(undefined != DC_draggable[element]['offset_' + j]) {
							saveCookie(variable_name + '_top_' + j, DC_draggable[element]['offset_' + j].top);
							saveCookie(variable_name + '_left_' + j, DC_draggable[element]['offset_' + j].left);
						}
					}
					break;
				default: break;
			}
		}
	}
	
	// make the element in given array (DC_draggabele model) draggables
	function set_DC_draggable(make_draggable) {
		var to_drag = Object.keys(make_draggable);
		
		if(setting_debug) console.log('setting draggable options for: ' + to_drag);
	
		for(var i = 0; i < to_drag.length; i++) {
			var element = to_drag[i];
			var selector = '#' + element;
			
			load_from_cookie(element);
			
			console.log(DC_draggable);
			
			if(loading_debug) console.log('\n' + element + ': ' + ((0 != $(selector).length) ? 'founded, process...' : 'missing, skip...'));
			
			if(0 != $(selector).length) {
				DC_draggable[element]['draggable'] = false;
				DC_draggable[element]['offset_initial'] = $(selector).offset();
				DC_draggable[element]['css_initial'] = {'bottom': $(selector).css('bottom')};
				console.log($(selector).offset());
				
				// ici l'offset dernièrement en mémoire
				reinitalize(element, preset, true);
				
				$(selector).addClass('DC_draggable');
				
				if(undefined != DC_draggable[element]['checkbox']) {
					$(selector + ' div').first().before(DC_draggable[element]['checkbox']);
					
					// enable or disable element's drag at checkbox click
					$('input[type=checkbox][name=' + element +'].DC_draggable').click( function() {
						if($(this).is(':checked'))
							enableDrag($(this).attr('name'));
						else
							disableDrag($(this).attr('name'));
						
						if(event_debug) console.log('checked: ' + $(this).attr('name'));
					});
					if(loading_debug) console.log('event:click:checkbox: done');
					
					// place the element to its original area
					$(selector).dblclick( function() {
						reinitalize($(this).attr('id'), 'initial', false);
					});
					if(loading_debug) console.log('event:doubleclick: done');
					
					// set size end background of element while dragging
					$(selector).bind('drag', function(event) {
						if(true == DC_draggable[$(this).attr('id')]['draggable']) {
							if(!dragging) {
								dragging = true;
								if("" != background_draggable)
									$('#' + $(this).attr('id')).css('backgroundColor',background_draggable);
								
								$('#' + $(this).attr('id')).css('bottom','auto'); // 'cause of weird unfixed height
								
								if(event_debug) console.log('dragging: ' + $(this).attr('id'));
							}
						}
					});
					if(loading_debug) console.log('event:drag: done');
					
					// set original background of element at the end of drag
					$(selector).mouseup( function() {
						if(dragging) {
							dragging = false;
							
							$('#' + $(this).attr('id')).css('backgroundColor', DC_draggable[$(this).attr('id')]['backgroundColor']);
							DC_draggable[$(this).attr('id')]['offset_' + preset] = $('#' + $(this).attr('id')).offset();
							save_to_cookie($(this).attr('id'));
							
							if(event_debug) if(!dragging) console.log('end of drag: ' + $(this).attr('id'));
						}
					});
					if(loading_debug) console.log('event:mouseup: done');
				}
				
				// puts the element on foreground
				$(selector).mousedown( function() {
					zIndex++;
					$('#' + $(this).attr('id')).zIndex(zIndex);
					
					if(event_debug) console.log('foregrounded: ' + $(this).attr('id'));
				});
				if(loading_debug) console.log('event:mousedown: done');
			}
		}
	}
	
	// need that to let the javascript display all element after the 'ready' state of the DOM
	setTimeout( function() {
		if(setting_debug) console.log('first delayed loading.');
	
		set_DC_draggable(DC_draggable);
	}, 1000);
	
	// enabling dragging of element
	function enableDrag(id) {
		$('#' + id).draggable();
		$('#' + id).css('cursor','move');
		DC_draggable[id]['draggable'] = true;
		DC_draggable[id]['backgroundColor'] = $('#' + id).css('backgroundColor');
		
		/*
		if(undefined == DC_draggable[id]['offset_' + preset])
			DC_draggable[id]['offset_' + preset] = $('#' + id).offset();
		*/
		
		if(setting_debug) console.log('drag enabled: ' + id);
	}
	// disable dragging of element
	function disableDrag(id) {
		$('#' + id).draggable('destroy');
		$('#' + id).addClass('');
		$('#' + id).css('cursor','auto');
		DC_draggable[id]['draggable'] = false;
		
		if(setting_debug) console.log('drag disabled: ' + id);
	}
	
	// disable dragging of element
	function reinitalize(id, offset, forced) {
		if(true == forced
		|| true == DC_draggable[id]['draggable']) {
			console.log('offset_' + offset + ':');
			console.log(DC_draggable[id]['offset_' + offset]);
		
			if(	undefined == DC_draggable[id]['offset_' + offset]
			|| 'initial'== offset) {
				console.log('Setting initial offset');
				$('#' + id).offset(DC_draggable[id]['offset_initial']);
				$('#' + id).css(DC_draggable[id]['css_initial']);
			}
			else {
				console.log('Setting offset ' + offset);
				$('#' + id).offset(DC_draggable[id]['offset_' + offset]);
				$('#' + id).css('bottom','auto'); // 'cause of weird unfixed height
			}
			
			//disable auto_save
			//DC_draggable[id]['offset_default'] = $('#' + id).offset();
			//save_to_cookie(id);
		}
		
		if(setting_debug) console.log('reinitialized: ' + id);
	}
	
	// set draggable element 'after' combat's interface loading
	$(document).ajaxComplete( function(a,b,c) {
		if(c.url == '/Interface/Fight') {
			if(event_debug) console.log('fight\'s interface is requesting.');
				
			var DC_draggable_fight = new Array();
			DC_draggable_fight['zone_informations_combat'] = DC_draggable['zone_informations_combat'];
			DC_draggable_fight['db_combat'] = DC_draggable['db_combat'];
			
			set_DC_draggable(DC_draggable_fight);
		}
	});
	
	// menu
	$('#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="DC_draggable textbox" value="' + background_draggable + '"></li><li><div name="enable" class="DC_draggable button">Tout activer</div></li><li>Profiles<div class="DC_draggable presetContainer">' + build_preset_html() + '</div></li><li class="separator"><div name="bug_report" class="DC_draggable button">Signaler un bug</div></li><li><div name="suggest" class="DC_draggable button">Suggérer un truc</div></li><li><div class="DC_draggable button"><a target="_blank" href="https://gf.qytechs.cn/scripts/2035-draggable-dc">Mettre à jour</a></div></li></ul></li><li class="separator"></li>');
	
	$('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-left: 7px !important;padding-right: 7px !important;}#DC_draggable:hover > ul {display:block !important;}#DC_draggable .textbox {width: 150px !important;background-color: #ffffff !important;}#DC_draggable .presetContainer {overflow: hidden !important;}#DC_draggable .preset {float: left !important;overflow: hidden !important;color: #000000 !important;border: 1px solid black !important;padding: 1px !important;}#DC_draggable .preset.selected {border-color: green !important;}#DC_draggable .preset input {margin-top: 3px !important;cursor: pointer !important;}#DC_draggable .btnTxt {margin: 2px !important;padding: 1px 8px !important;cursor: pointer !important;}.DC_draggable.button {cursor: pointer !important;}</style>');
	
	// swtich element's offset's preset
	$('#DC_draggable input[type=checkbox][name=preset]').click( function() {
		moveTo($(this).val());
	});
	
	// display a message box to send a bug report, IG
	$('#DC_draggable [name=bug_report]').click( function() {
		nav.getMessagerie().newMessage();
		$('#db_new_message:last').zIndex('1000');
		$('#db_new_message:last .head .title').html('Reporter un BUG sur DC Draggable');
		$('#db_new_message:last #nm_cible input').val('Ladoria');
		$('#db_new_message:last #nm_sujet input').val('[HRP][DC Draggable][Bug]');
		$('#db_new_message:last #nm_texte textarea').focus();
	});
	
	// Suggeste something, IG
	$('#DC_draggable [name=suggest]').click( function() {
		nav.getMessagerie().newMessage();
		$('#db_new_message:last').zIndex('1000');
		$('#db_new_message:last .head .title').html('Suggérer un truc pour DC Draggable');
		$('#db_new_message:last #nm_cible input').val('Ladoria');
		$('#db_new_message:last #nm_sujet input').val('[HRP][DC Draggable][Suggestion]');
		$('#db_new_message:last #nm_texte textarea').focus();
	});

	// change background color when dragging
	$('#DC_draggable input[name=backgroundColor]').keyup( function (e) {
		if(e.keyCode == 13) {
			background_draggable = $(this).val();
			saveCookie('background', background_draggable);
		}
	});

	// enable/disable all drag
	$('#DC_draggable [name=enable]').click( function() {
		var enable;
		
		if($(this).html() == 'Tout activer') {
			enable = true;
			$(this).html('Tout désactiver');
		}
		else {
			$(this).html('Tout activer');
			enable = false;
		}
		
		$('input[type=checkbox].DC_draggable').each( function() {
			$(this).prop('checked', enable);
			
			if(enable)
				enableDrag($(this).attr('name'));
			else
				disableDrag($(this).attr('name'));
		});
	});

	// load preset positions
	$('.DC_draggable.preset .btnTxt').click( function() {
		console.log('setting for preset: ' + $('.DC_draggable .preset .btnTxt').attr('name'));
		
		if($(this).hasClass('load')) {
			preset = ('base' == $(this).attr('name')) ? 'initial' : $(this).attr('name');
			saveCookie('preset',preset);
			
			$('.DC_draggable.preset.selected').removeClass('selected');
			$(this).parent().addClass('selected');
		
			var to_load = Object.keys(DC_draggable);
			
			for (var i = 0; i < to_load.length; i++) {
				reinitalize(to_load[i], preset, true);
			}
		}
		else if($(this).hasClass('save')) {
			var to_save = Object.keys(DC_draggable);
			
			for (var i = 0; i < to_save.length; i++) {
				DC_draggable[to_save[i]]['offset_' + $(this).attr('name')] = $('#' + to_save[i]).offset();
				save_to_cookie(to_save[i]);
			}
		}
	});
});

function saveCookie(name,val) {
	name = coockie_prefix + name;
	
	if(!navigator.cookieEnabled) return;
		document.cookie = name + '=' + val + ';expire=Wed, 01 Jan 2020 00:00:00 GMT; path=/';
}
function getCookie(name) {
	name = coockie_prefix + name;
	
	if(!navigator.cookieEnabled) return undefined;
	
	var start = document.cookie.indexOf(name)
	if(start == -1) return undefined;
	start += name.length + 1;
	
	var end = document.cookie.indexOf(';',start);
	
	return document.cookie.substring(start,end);
};

function build_preset_html() {
	var preset_html = '';
	var preset_name;
	
	for(var i = 0; i < preset_count + 1; i++) {
		preset_name = (i == 0) ? 'initial' : i;
		preset_html += '<div class="DC_draggable preset';
		
		if(preset == i) preset_html += ' selected';
		
		preset_html += '">';
		
		if('initial' == preset_name)
			preset_html += '<div class="DC_draggable btnTxt load" name="' + i + '">Base</div>';
		else
			preset_html += '<div class="DC_draggable btnTxt save" name="' + i + '">Save</div>';
		
		preset_html += '<div class="DC_draggable btnTxt load" name="' + i + '">Load</div>';
		preset_html += '</div>';
	}
	
	return preset_html;
};

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址