Make DC's windows draggable
Stan na
// ==UserScript==
// @name draggable_DC
// @author Ladoria
// @version 0.22
// @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 = false;
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();
// / VARIABLES
/* How to :
- 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-.
-- Un checkbox est obligatoire.
Enjoy!
Commentaires à envoyer à Ladoria IG.
*/
// SETTABLE Touch those nice things!
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() {
// 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;
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'] = $(selector).offset();
$(selector).addClass('DC_draggable');
if(undefined != DC_draggable[element]['checkbox']) {
$(selector + ' div').first().before(DC_draggable[element]['checkbox']);
$('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() {
if(true == DC_draggable[$(this).attr('id')]['draggable'])
$('#' + $(this).attr('id')).offset(DC_draggable[$(this).attr('id')]['offset']);
if(event_debug) console.log('Reinitialized: ' + $(this).attr('id'));
});
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;
$('#' + $(this).attr('id')).css('backgroundColor','rgba(172, 0, 0, 0.6)');
$('#' + $(this).attr('id')).css('bottom','auto');
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']);
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('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'])
DC_draggable[id]['offset'] = $('#' + 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);
}
// set draggable element 'after' combat's interface loading
$(document).ajaxSend( function(a,b,c) {
if(c.url == '/Interface/Fight') {
if(event_debug) console.log('fight\'s interface is requesting.');
setTimeout( function() {
if(setting_debug) console.log('delayed loading.');
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);
}, 1000);
}
});
});