Skip to content

Instantly share code, notes, and snippets.

@nabbynz

nabbynz/TagPro_HomePage_Rearranger.user.js

Last active August 29, 2015 14:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nabbynz/5c8f08e228c76abf7083 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nabbynz/5c8f08e228c76abf7083 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
TagPro_HomePage_Rearranger.user.js
// ==UserScript==
// @name Homepage Rearranger
// @description Add Drag & Resize to your server page.
// @version 0.1.3
// @include http://tagpro-*.koalabeast.com/
// @include http://tangent.jukejuice.com
// @include http://tangent.jukejuice.com/
// @include http://*.newcompte.fr
// @include http://*.newcompte.fr/
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// @require http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
// @resource jqUI_CSS http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
// @updateURL https://gist.github.com/nabbynz/5c8f08e228c76abf7083/raw/TagPro_HomePage_Rearranger.user.js
// @downloadURL https://gist.github.com/nabbynz/5c8f08e228c76abf7083/raw/TagPro_HomePage_Rearranger.user.js
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue
// @grant GM_getResourceText
// @grant GM_addStyle
// @run-at document-idle
// @license GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
// @author nabby
// ==/UserScript==
var jqUI_CssSrc = GM_getResourceText ("jqUI_CSS");
GM_addStyle (jqUI_CssSrc);
$(document).ready(function() {
console.log('START: Homepage Rearranger');
var defaultDivs = {'HR_Header': { order:0, vtop:0, vwidth:780, vheight:250, top:0, left:0, width:780, height:250, border:false },
'R300': { order:1, vtop:0, vwidth:780, vheight:300, top:0, left:0, width:780, height:300, border:true },
'YAIS': { order:1, vtop:0, vwidth:660, vheight:450, top:0, left:0, width:660, height:450, border:true },
'e_AddCurrentServerButton': { order:1, vtop:0, vwidth:200, vheight:100, top:0, left:0, width:200, height:100, border:false }, //updating server button in YAIS (separate)
'ROT_Container': { order:1, vtop:0, vwidth:450, vheight:560, top:0, left:0, width:450, height:560, border:true },
'MapFreq': { order:1, vtop:0, vwidth:860, vheight:550, top:0, left:0, width:860, height:550, border:true },
'WLT': { order:1, vtop:0, vwidth:780, vheight:300, top:0, left:0, width:780, height:300, border:true },
'SBPR': { order:1, vtop:0, vwidth:780, vheight:300, top:0, left:0, width:780, height:300, border:true },
};
if (GM_getValue('divsToMove') === undefined) {
resetAll();
}
var divsToMove = $.extend(true, {}, defaultDivs, GM_getValue('divsToMove', defaultDivs));
var options = {'HR_ModifyHomeLayout': { display: 'Modify Home Layout', type:'checkbox', value:true },
'HR_VerticalOnly': { display: 'Vertical Only', type:'checkbox', value:false },
'HR_EnableDragging': { display: 'Enable Dragging?', type:'checkbox', value:true },
'HR_EnableResizing': { display: 'Enable Resizing?', type:'checkbox', value:true },
'HR_HideOverflow': { display: 'Hide Overflow', type:'checkbox', value:false },
'HR_ShowBoxShadow': { display: 'Force Borders', type:'checkbox', value:false },
'HR_HideMenuButton': { display: 'Hide the Menu Button', type:'checkbox', value:false }
};
var HR_Selections = $.extend(true, {}, options, GM_getValue('HR_Selections', options));
if (GM_getValue('HR_Selections') === undefined) {
GM_setValue('HR_Selections', HR_Selections);
}
$.each(HR_Selections, function(key, value) {
HR_Selections[key].display = options[key].display;
});
$('body').append('<div id="HR_Menu_Button" style="position:fixed; bottom:70px; right:10px; background:#fff; color:#0b0; opacity:'+(HR_Selections.HR_HideMenuButton.value ? '0' : '0.1')+'; padding:0 8px; font-size:25px; text-align:center; border-radius:25px; cursor:pointer" title="Homepage Rearranger">&#8674;</div>');
$('#HR_Menu_Button').after('<div id="HR_Menu" style="position:fixed; bottom:0px; right:0px; background:#c3c1d0; color:#1e063d; padding:10px; font-size:12px; border:2px solid #AAA; border-radius:6px; overflow:hidden; z-index:1000; display:none"></div>');
$.each(HR_Selections, function(key, value) {
if (value.type === 'checkbox') {
$('#HR_Menu').append('<li style="list-style:none"><label><input type="checkbox" id="'+key+'" class="HR_option"'+ (HR_Selections[key].value ? ' checked' : '') + '> ' + HR_Selections[key].display + '</label></li>');
}
});
$('#HR_Menu').append('<div id="HR_Reset" style="display:inline-block; margin:10px; padding:3px; font-size:11px; color:#fff; background:#AA0000; border-radius:4px; cursor:pointer; float:right" title="Reset all values to defaults">Reset All</div>');
if (HR_Selections.HR_ModifyHomeLayout.value) {
var $article = $('article');
$article.css('padding', '0');
$article.css('width', '100%');
$article.css('position', 'relative');
//$('body').css('overflow', 'auto');
if (!$('#HR_Header').length) {
$article.prepend('<div id="HR_Header" style="margin:0px auto; width:100%; text-align:center;"></div>');
}
$('#HR_Header').append( $('a[href^="/maps"]').parent('div').prevAll().addBack() );
if (!$('#HR_Footer').length) {
$article.after('<div id="HR_Footer" style="width:100%; text-align:center;"></div>');
}
$('#HR_Footer').append( $('a[href^="/donate"]').parent('div').nextAll().addBack() );
$('h1').css('margin-top', '0px');
ModifyHomeLayout();
if (HR_Selections.HR_EnableResizing.value) {
$.each(divsToMove, function(id) {
$('#'+id).resizable('option', { disabled:false, handles:"e, s, w, se, sw" } );
});
} else {
$.each(divsToMove, function(id) {
$('#'+id).resizable('option', { disabled:true, handles:"e, s, w, se, sw" } );
});
}
} else {
$('#HR_VerticalOnly').prop('disabled', true);
$('#HR_EnableDragging').prop('disabled', true);
$('#HR_EnableResizing').prop('disabled', true);
$('#HR_ShowBoxShadow').prop('disabled', true);
$('#HR_HideOverflow').prop('disabled', true);
}
$('.HR_option').on('click', function() {
if (this.id === 'HR_ModifyHomeLayout') {
var response = confirm("Page will reload - OK to continue?");
if (response) {
HR_Selections.HR_ModifyHomeLayout.value = $(this).is(':checked');
GM_setValue('HR_Selections', HR_Selections);
window.location.reload();
} else {
$(this).prop('checked', !$(this).is(':checked'));
}
} else if (this.id === 'HR_VerticalOnly') {
var response = confirm("Page will reload - OK to continue?");
if (response) {
HR_Selections.HR_VerticalOnly.value = $(this).is(':checked');
GM_setValue('HR_Selections', HR_Selections);
window.location.reload();
} else {
$(this).prop('checked', !$(this).is(':checked'));
}
} else if (this.id === 'HR_EnableDragging') {
HR_Selections.HR_EnableDragging.value = $(this).is(':checked');
GM_setValue('HR_Selections', HR_Selections);
if ($(this).is(':checked')) {
$.each(divsToMove, function(id) {
$('#'+id).draggable('enable');
});
} else {
$.each(divsToMove, function(id) {
$('#'+id).draggable('disable');
});
}
} else if (this.id === 'HR_EnableResizing') {
HR_Selections.HR_EnableResizing.value = $(this).is(':checked');
GM_setValue('HR_Selections', HR_Selections);
if ($(this).is(':checked')) {
$.each(divsToMove, function(id) {
$('#'+id).resizable('option', { disabled:false, handles:'e, s, w, se, sw' } );
});
} else {
$.each(divsToMove, function(id) {
$('#'+id).resizable('option', { disabled:true, handles:'e, s, w, se, sw' } );
});
}
} else if (this.id === 'HR_HideOverflow') {
HR_Selections.HR_HideOverflow.value = $(this).is(':checked');
GM_setValue('HR_Selections', HR_Selections);
if ($(this).is(':checked')) {
$.each(divsToMove, function(id) {
$('#'+id).css('overflow', 'hidden');
});
} else {
$.each(divsToMove, function(id) {
$('#'+id).css('overflow', 'visible');
});
}
} else if (this.id === 'HR_ShowBoxShadow') {
HR_Selections.HR_ShowBoxShadow.value = $(this).is(':checked');
GM_setValue('HR_Selections', HR_Selections);
if ($(this).is(':checked')) {
$.each(divsToMove, function(id, value) {
if (value.border) {
$('#'+id).css('box-shadow', '#fff 0px 0px 10px');
$('#'+id).css('background', 'rgba(0,0,0,.05)');
}
});
} else {
$.each(divsToMove, function(id, value) {
$('#'+id).css('box-shadow', 'none');
$('#'+id).css('background', '');
});
}
} else if (this.id === 'HR_HideMenuButton') {
HR_Selections.HR_HideMenuButton.value = $(this).is(':checked');
GM_setValue('HR_Selections', HR_Selections);
if ($(this).is(':checked')) {
$('#HR_Menu_Button').css('opacity', '0');
} else {
$('#HR_Menu_Button').css('opacity', '0.1');
}
}
});
$('#HR_Reset').on('click', function() {
var response = confirm("All current positions will be lost and this page will reload.\n\nOK to continue?");
if (response) {
resetAll();
window.location.reload();
}
});
//=================================================================
$('#HR_Menu_Button').on('click', function() {
$('#HR_Menu').fadeTo(200, 1.0);
});
$('#HR_Menu_Button').mouseenter(function() {
$('#HR_Menu_Button').fadeTo(200, 1);
});
$('#HR_Menu_Button').mouseleave(function() {
$('#HR_Menu_Button').fadeTo(200, (HR_Selections.HR_HideMenuButton.value ? 0 : 0.1));
});
$("#HR_Menu").mouseleave(function() {
$('#HR_Menu').fadeOut(100);
});
function resetAll() {
GM_deleteValue('divsToMove');
GM_deleteValue('HR_Selections');
var divsToMove = $.extend(true, {}, defaultDivs);
var HR_Selections = $.extend(true, {}, options);
$('article').prepend('<div id="HR_Header" style="margin:0px auto; width:100%; text-align:center;"></div>');
$('article').after('<div id="HR_Footer" style="width:100%; text-align:center;"></div>');
var nextTop = 0;
$.each(divsToMove, function(id, value) { //do some basic rearranging so divs are not a complete mess
if ($('#'+id).length) {
divsToMove[id] = $.extend(value, { vtop:nextTop, vwidth:defaultDivs[id].width, vheight:defaultDivs[id].height, top:nextTop, left:0, width:defaultDivs[id].width, height:defaultDivs[id].height } );
nextTop += defaultDivs[id].height + 25;
}
});
GM_setValue('divsToMove', divsToMove);
}
function ModifyHomeLayout() {
var $article = $("article"),
$parent = $("body"),
$container = $("article", $parent),
$header = $("#HR_Header"),
$footer = $("#HR_Footer"),
$document = $(document),
offset = $container.offset(),
scrollbarSafety = 15;
$.each(divsToMove, function(id, value) {
if ( ($('#'+id).length) ) {
if ($('#'+id).parent().prop('tagName') !== 'ARTICLE') {
$('#'+id).appendTo( $container );
}
$('#'+id).css('position', 'absolute');
$('#'+id).css('margin', '0px auto');
//$('#'+id).css('padding', '10px');
if (HR_Selections.HR_ShowBoxShadow.value) {
if (value.border) {
$('#'+id).css('box-shadow', '#fff 0px 0px 10px').css('background', 'rgba(0,0,0,.05)');
} else {
$('#'+id).css('box-shadow', 'none').css('background', 'none');
}
}
if (HR_Selections.HR_HideOverflow.value) {
$('#'+id).css('overflow', 'hidden');
} else {
$('#'+id).css('overflow', 'visible');
}
if (HR_Selections.HR_VerticalOnly.value) {
$('#'+id).css('top', Math.abs(Math.round(value.vtop / 10) * 10));
$('#'+id).css('left', 0);
$('#'+id).css('right', 0);
$('#'+id).css('width', Math.abs(Math.round(value.vwidth / 10) * 10));
$('#'+id).css('height', Math.abs(Math.round(value.vheight / 10) * 10));
} else {
$('#'+id).css('top', Math.abs(Math.round(value.top / 10) * 10));
$('#'+id).css('left', Math.abs(Math.round(value.left / 10) * 10));
$('#'+id).css('width', Math.abs(Math.round(value.width / 10) * 10));
$('#'+id).css('height', Math.abs(Math.round(value.height / 10) * 10));
}
$container.height($document.height() - offset.top - scrollbarSafety);
$('#'+id).resizable({
containment: $parent,
delay: 250,
disabled: !HR_Selections.HR_EnableResizing.value,
distance: 5,
grid: [10, 10],
handles: 'e, s, w, se, sw',
resize: function(event, ui) {
$('#'+id).css('border', '1px dashed #fff');
},
stop: function(event, ui) {
if (HR_Selections.HR_VerticalOnly.value) {
divsToMove[id] = $.extend(value, { vtop:$('#'+id).position().top, vwidth:$('#'+id).width(), vheight:$('#'+id).height() } );
} else {
divsToMove[id] = $.extend(value, { top:$('#'+id).position().top, left:$('#'+id).position().left, width:$('#'+id).width(), height:$('#'+id).height() } );
}
GM_setValue('divsToMove', divsToMove);
$('#'+id).css('border', 'none');
}
});
$('#'+id).draggable({
axis: (HR_Selections.HR_VerticalOnly.value ? 'y' : ''),
containment: $parent,
delay: 250,
disabled: !HR_Selections.HR_EnableDragging.value,
grid: [10, 10],
scroll: true,
drag: function (event, ui) {
var shouldHeight = 0;
$('#'+id).css('border', '1px dashed #fff');
$(".ui-draggable").each(function() {
var draggeeHeight = $(this).position().top + $(this).height() + scrollbarSafety;
if (shouldHeight < draggeeHeight) {
shouldHeight = draggeeHeight + scrollbarSafety + scrollbarSafety;
}
});
$parent.height(shouldHeight);
$container.height($parent.height() + scrollbarSafety);
},
stop: function(event, ui) {
if (HR_Selections.HR_VerticalOnly.value) {
divsToMove[id] = $.extend(value, { vtop:$('#'+id).position().top, vwidth:$('#'+id).width(), vheight:$('#'+id).height() } );
GM_setValue('vMiddle_Height', $container.height());
GM_setValue('vMiddle_Parent_Height', $parent.height());
} else {
divsToMove[id] = $.extend(value, { top:$('#'+id).position().top, left:$('#'+id).position().left, width:$('#'+id).width(), height:$('#'+id).height() } );
GM_setValue('Middle_Height', $container.height());
GM_setValue('Middle_Parent_Height', $parent.height());
}
GM_setValue('divsToMove', divsToMove);
$('#'+id).css('border', 'none');
}
});
}
});
if (HR_Selections.HR_VerticalOnly.value) {
$parent.height(GM_getValue('vMiddle_Parent_Height'));
$container.height(GM_getValue('vMiddle_Height') + scrollbarSafety);
} else {
$parent.height(GM_getValue('Middle_Parent_Height'));
$container.height(GM_getValue('Middle_Height') + scrollbarSafety);
}
}
if (true === false) {
console.log('--------- BODY ---------');
$.each( $('body > div'), function(k, v) {
console.log('k:'+k + ' v:'+v.id);
if (v.id === '') console.dir(v);
});
console.log('--------- ARTICLE ---------');
$.each( $('article > div'), function(k, v) {
console.log('k:'+k + ' v:'+v.id);
if (v.id === '') console.dir(v);
if (!divsToMove.hasOwnProperty(v.id)) console.log('--------> NOT DRAGGABLE (BUT COULD BE?): ' + v.id);
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment