AJAX core library: possible breaking change, readystatechange functions are now called with the XHR instance as the first parameter, to allow requests to run in parallel. This means much better stability but may break some applets (compatibility hack is included)
/**
* Creates a control that can be used to edit a rank.
*/
var RankEditorControl = function(rankdata)
{
this.rankdata = ( typeof(rankdata) == 'object' ) ? rankdata : {};
if ( !this.rankdata.rank_style )
{
this.rankdata.rank_style = '';
}
// have the browser parse CSS for us and use an anchor to be as close
// as possible in calculating CSS
// this is kind of a hack as it relies on setAttribute/getAttribute in
// order to obtain stringified versions of CSS data
var cssobj = document.createElement('a');
cssobj.setAttribute('style', this.rankdata.rank_style);
this.style_sim_obj = cssobj;
// figure out if we're editing or creating
this.editing = ( typeof(this.rankdata.rank_id) == 'number' );
this.render = function()
{
var editor = document.createElement('div');
editor.className = 'tblholder';
// stash this editor instance in the parent div for later function calls
editor.editor = this;
this.wrapperdiv = editor;
editor.style.width = '100%';
// tables suck.
var table = document.createElement('table');
table.setAttribute('cellspacing', '1');
table.setAttribute('cellpadding', '4');
table.setAttribute('width', '100%');
// heading: "Edit rank: foo" or "Create a new rank"
var tr_head = document.createElement('tr');
var th_head = document.createElement('th');
th_head.setAttribute('colspan', '2');
if ( this.editing )
{
var th_head_string = 'acpur_th_edit_rank';
var th_head_data = { rank_title: $lang.get(this.rankdata.rank_title) };
}
else
{
var th_head_string = 'acpur_th_create_rank';
var th_head_data = { };
}
th_head.appendChild(document.createTextNode($lang.get(th_head_string, th_head_data)));
tr_head.appendChild(th_head);
this.th_head = th_head;
table.appendChild(tr_head);
// row: rank title
var tr_title = document.createElement('tr');
var td_title_l = document.createElement('td');
var td_title_f = document.createElement('td');
td_title_l.className = td_title_f.className = 'row1';
td_title_l.appendChild(document.createTextNode($lang.get('acpur_field_rank_title')));
// field: rank title
var f_rank_title = document.createElement('input');
f_rank_title.type = 'text';
f_rank_title.size = '30';
f_rank_title.value = ( this.editing ) ? this.rankdata.rank_title : '';
f_rank_title.editor = this;
f_rank_title.onkeyup = function()
{
this.editor.renderPreview();
}
this.f_rank_title = f_rank_title;
td_title_f.appendChild(f_rank_title);
tr_title.appendChild(td_title_l);
tr_title.appendChild(td_title_f);
table.appendChild(tr_title);
// row: basic style options
var tr_basic = document.createElement('tr');
var td_basic_l = document.createElement('td');
var td_basic_f = document.createElement('td');
td_basic_l.className = td_basic_f.className = 'row2';
td_basic_l.appendChild(document.createTextNode($lang.get('acpur_field_style_basic')));
// fieldset: basic style options
// field: bold
var l_basic_bold = document.createElement('label');
var f_basic_bold = document.createElement('input');
f_basic_bold.type = 'checkbox';
f_basic_bold.checked = ( this.style_sim_obj.style.fontWeight == 'bold' ) ? true : false;
f_basic_bold.editor = this;
f_basic_bold.onclick = function()
{
this.editor.style_sim_obj.style.fontWeight = ( this.checked ) ? 'bold' : null;
this.editor.renderPreview();
}
l_basic_bold.style.fontWeight = 'bold';
l_basic_bold.appendChild(f_basic_bold);
l_basic_bold.appendChild(document.createTextNode(' '));
l_basic_bold.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_bold')));
// field: italic
var l_basic_italic = document.createElement('label');
var f_basic_italic = document.createElement('input');
f_basic_italic.type = 'checkbox';
f_basic_italic.checked = ( this.style_sim_obj.style.fontStyle == 'italic' ) ? true : false;
f_basic_italic.editor = this;
f_basic_italic.onclick = function()
{
this.editor.style_sim_obj.style.fontStyle = ( this.checked ) ? 'italic' : null;
this.editor.renderPreview();
}
l_basic_italic.style.fontStyle = 'italic';
l_basic_italic.appendChild(f_basic_italic);
l_basic_italic.appendChild(document.createTextNode(' '));
l_basic_italic.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_italic')));
// field: underline
var l_basic_underline = document.createElement('label');
var f_basic_underline = document.createElement('input');
f_basic_underline.type = 'checkbox';
f_basic_underline.checked = ( this.style_sim_obj.style.textDecoration == 'underline' ) ? true : false;
f_basic_underline.editor = this;
f_basic_underline.onclick = function()
{
this.editor.style_sim_obj.style.textDecoration = ( this.checked ) ? 'underline' : null;
this.editor.renderPreview();
}
l_basic_underline.style.textDecoration = 'underline';
l_basic_underline.appendChild(f_basic_underline);
l_basic_underline.appendChild(document.createTextNode(' '));
l_basic_underline.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_underline')));
// finish up formatting row#1
td_basic_f.appendChild(l_basic_bold);
td_basic_f.appendChild(document.createTextNode(' '));
td_basic_f.appendChild(l_basic_italic);
td_basic_f.appendChild(document.createTextNode(' '));
td_basic_f.appendChild(l_basic_underline);
tr_basic.appendChild(td_basic_l);
tr_basic.appendChild(td_basic_f);
table.appendChild(tr_basic);
// row: rank color
var tr_color = document.createElement('tr');
var td_color_l = document.createElement('td');
var td_color_f = document.createElement('td');
td_color_l.className = td_color_f.className = 'row1';
td_color_l.appendChild(document.createTextNode($lang.get('acpur_field_style_color')));
// field: rank color
var f_rank_color = document.createElement('input');
f_rank_color.type = 'text';
f_rank_color.size = '7';
f_rank_color.value = ( this.editing ) ? this.rgb2hex(this.style_sim_obj.style.color) : '';
f_rank_color.style.backgroundColor = this.style_sim_obj.style.color;
f_rank_color.editor = this;
this.f_rank_color = f_rank_color;
f_rank_color.onkeyup = function(e)
{
if ( !e.keyCode )
e = window.event;
if ( !e )
return false;
var chr = (String.fromCharCode(e.keyCode)).toLowerCase();
this.value = this.value.replace(/[^a-fA-F0-9]/g, '');
if ( this.value.length > 6 )
{
this.value = this.value.substr(0, 6);
}
if ( this.value.length == 6 || this.value.length == 3 )
{
this.style.backgroundColor = '#' + this.value;
this.editor.style_sim_obj.style.color = '#' + this.value;
this.style.color = '#' + this.editor.determineLightness(this.value);
this.editor.renderPreview();
}
else if ( this.value.length == 0 )
{
this.style.backgroundColor = null;
this.editor.style_sim_obj.style.color = null;
this.editor.renderPreview();
}
}
td_color_f.appendChild(f_rank_color);
tr_color.appendChild(td_color_l);
tr_color.appendChild(td_color_f);
table.appendChild(tr_color);
// field: additional CSS
var tr_css = document.createElement('tr');
var td_css_l = document.createElement('td');
td_css_l.className = 'row2';
td_css_l.appendChild(document.createTextNode($lang.get('acpur_field_style_css')));
tr_css.appendChild(td_css_l);
var td_css_f = document.createElement('td');
td_css_f.className = 'row2';
var f_css = document.createElement('input');
f_css.type = 'text';
f_css.value = this.stripBasicCSSAttributes(this.rankdata.rank_style);
f_css.style.width = '98%';
f_css.editor = this;
f_css.onkeyup = function()
{
if ( !(trim(this.value)).match(/^((([a-z-]+):(.+?);)+)?$/) )
return;
var newcss = this.editor.stripExtendedCSSAttributes(String(this.editor.style_sim_obj.getAttribute('style'))) + ' ' + this.value;
this.editor.preview_div.setAttribute('style', 'font-size: x-large; ' + newcss);
this.editor.style_sim_obj.setAttribute('style', newcss);
}
this.f_css = f_css;
td_css_f.appendChild(f_css);
tr_css.appendChild(td_css_f);
table.appendChild(tr_css);
// "field": preview
var tr_preview = document.createElement('tr');
var td_preview_l = document.createElement('td');
td_preview_l.className = 'row1';
td_preview_l.appendChild(document.createTextNode($lang.get('acpur_field_preview')));
tr_preview.appendChild(td_preview_l);
var td_preview_f = document.createElement('td');
td_preview_f.className = 'row1';
var div_preview = document.createElement('a');
this.preview_div = div_preview;
div_preview.style.fontSize = 'x-large';
div_preview.appendChild(document.createTextNode(''));
div_preview.firstChild.nodeValue = ( this.editing ) ? this.rankdata.rank_title : '';
td_preview_f.appendChild(div_preview);
tr_preview.appendChild(td_preview_f);
table.appendChild(tr_preview);
// submit button
var tr_submit = document.createElement('tr');
var th_submit = document.createElement('th');
th_submit.className = 'subhead';
th_submit.setAttribute('colspan', '2');
var btn_submit = document.createElement('input');
btn_submit.type = 'submit';
btn_submit.value = ( this.editing ) ? $lang.get('acpur_btn_save') : $lang.get('acpur_btn_create_submit');
btn_submit.editor = this;
btn_submit.style.fontWeight = 'bold';
btn_submit.onclick = function(e)
{
this.editor.submitEvent(e);
}
this.btn_submit = btn_submit;
th_submit.appendChild(btn_submit);
// delete button
if ( this.editing )
{
var btn_delete = document.createElement('input');
btn_delete.type = 'button';
btn_delete.value = $lang.get('acpur_btn_delete');
btn_delete.editor = this;
btn_delete.onclick = function(e)
{
this.editor.deleteEvent(e);
}
th_submit.appendChild(document.createTextNode(' '));
th_submit.appendChild(btn_delete);
}
tr_submit.appendChild(th_submit);
table.appendChild(tr_submit);
// render preview
this.renderPreview();
// finalize the editor table
editor.appendChild(table);
// stash rendered editor
this.editordiv = editor;
// send output
return editor;
}
/**
* Takes the existing editor div and transforms the necessary elements so that it goes from "create" mode to "edit" mode
* @param object Edit data - same format as the rankdata parameter to the constructor, but we should only need rank_id
*/
this.transformToEditor = function(rankdata)
{
// we need a rank ID
if ( typeof(rankdata.rank_id) != 'number' )
return false;
if ( this.editing )
return false;
this.editing = true;
this.rankdata = rankdata;
this.rankdata.rank_title = this.f_rank_title.value;
this.rankdata.rank_style = this.getCSS();
// transform various controls
this.th_head.firstChild.nodeValue = $lang.get('acpur_th_edit_rank', {
rank_title: $lang.get(this.rankdata.rank_title)
});
this.btn_submit.value = $lang.get('acpur_btn_save');
// add the delete button
var th_submit = this.btn_submit.parentNode;
var btn_delete = document.createElement('input');
btn_delete.type = 'button';
btn_delete.value = $lang.get('acpur_btn_delete');
btn_delete.editor = this;
btn_delete.onclick = function(e)
{
this.editor.deleteEvent(e);
}
th_submit.appendChild(document.createTextNode(' '));
th_submit.appendChild(btn_delete);
return true;
}
/**
* Takes a hex color, averages the three channels, and returns either 'ffffff' or '000000' depending on the luminosity of the color.
* @param string
* @return string
*/
this.determineLightness = function(hexval)
{
var rgb = this.hex2rgb(hexval);
var lumin = ( rgb[0] + rgb[1] + rgb[2] ) / 3;
return ( lumin > 60 ) ? '000000' : 'ffffff';
}
/**
* Strips out basic CSS attributes (color, font-weight, font-style, text-decoration) from a snippet of CSS.
* @param string
* @return string
*/
this.stripBasicCSSAttributes = function(css)
{
return trim(css.replace(/(color|font-weight|font-style|text-decoration): ?([A-z0-9# ,\(\)]+);/g, ''));
}
/**
* Strips out all but basic CSS attributes.
* @param string
* @return string
*/
this.stripExtendedCSSAttributes = function(css)
{
var match;
var final_css = '';
var basics = ['color', 'font-weight', 'font-style', 'text-decoration'];
while ( match = css.match(/([a-z-]+):(.+?);/) )
{
if ( in_array(match[1], basics) )
{
final_css += ' ' + match[0] + ' ';
}
css = css.replace(match[0], '');
}
final_css = trim(final_css);
return final_css;
}
this.getCSS = function()
{
return this.style_sim_obj.getAttribute('style');
}
this.renderPreview = function()
{
if ( !this.preview_div )
return false;
var color = ( this.style_sim_obj.style.color ) ? '#' + this.rgb2hex(this.style_sim_obj.style.color) : null;
this.preview_div.style.color = color;
this.preview_div.style.fontWeight = this.style_sim_obj.style.fontWeight;
this.preview_div.style.fontStyle = this.style_sim_obj.style.fontStyle;
this.preview_div.style.textDecoration = this.style_sim_obj.style.textDecoration;
this.preview_div.firstChild.nodeValue = $lang.get(this.f_rank_title.value);
}
this.submitEvent = function(e)
{
if ( this.onsubmit )
{
this.onsubmit(e);
}
else
{
window.console.error('RankEditorControl: no onsubmit event specified');
}
}
this.deleteEvent = function(e)
{
if ( this.ondelete )
{
this.ondelete(e);
}
else
{
window.console.error('RankEditorControl: no ondelete event specified');
}
}
/**
* Converts a parenthetical color specification (rgb(x, y, z)) to hex form (xxyyzz)
* @param string
* @return string
*/
this.rgb2hex = function(rgb)
{
var p = rgb.match(/^rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)$/);
if ( !p )
return rgb.replace(/^#/, '');
var r = parseInt(p[1]).toString(16), g = parseInt(p[2]).toString(16), b = parseInt(p[3]).toString(16);
if ( r.length < 2 )
r = '0' + r;
if ( g.length < 2 )
g = '0' + g;
if ( b.length < 2 )
b = '0' + b;
return r + g + b;
}
/**
* Get red, green, and blue values for the given hex color
* @param string
* @return array (numbered, e.g. not an object
*/
this.hex2rgb = function(hex)
{
hex = hex.replace(/^#/, '');
if ( hex.length != 3 && hex.length != 6 )
{
return hex;
}
if ( hex.length == 3 )
{
// is there a better way to do this?
hex = hex.charAt(0) + hex.charAt(0) + hex.charAt(1) + hex.charAt(1) + hex.charAt(2) + hex.charAt(2);
}
hex = [ hex.substr(0, 2), hex.substr(2, 2), hex.substr(4, 2) ];
var red = parseInt(hex[0], 16);
var green = parseInt(hex[1], 16);
var blue = parseInt(hex[2], 16);
return [red, green, blue];
}
}
/**
* Perform request for editable rank data and draw editor
*/
function ajaxInitRankEdit(rank_id)
{
load_component('messagebox');
var json_packet = {
mode: 'get_rank',
rank_id: rank_id
};
json_packet = ajaxEscape(toJSONString(json_packet));
ajaxPost(makeUrlNS('Admin', 'UserRanks/action.json'), 'r=' + json_packet, function(ajax)
{
if ( ajax.readyState == 4 && ajax.status == 200 )
{
var response = String(ajax.responseText + '');
if ( !check_json_response(response) )
{
handle_invalid_json(ajax.responseText);
return false;
}
try
{
var response = parseJSON(ajax.responseText);
}
catch(e)
{
handle_invalid_json(ajax.responseText);
}
if ( response.error )
{
if ( response.error == 'need_auth_to_admin' )
{
load_component('login');
var rid = rank_id;
ajaxDynamicReauth(function()
{
ajaxInitRankEdit(rid);
});
}
else
{
alert(response.error);
}
return false;
}
var editor = new RankEditorControl(response);
editor.onsubmit = ajaxRankEditHandleSaveExisting;
editor.ondelete = ajaxRankEditHandleDelete;
var container = document.getElementById('admin_ranks_container_right');
container.innerHTML = '';
container.appendChild(editor.render());
}
}, true);
}
function ajaxInitRankCreate()
{
load_component('messagebox');
var editor = new RankEditorControl();
editor.onsubmit = ajaxRankEditHandleSaveNew;
var container = document.getElementById('admin_ranks_container_right');
container.innerHTML = '';
container.appendChild(editor.render());
}
function ajaxRankEditHandleSave(editor, switch_new)
{
var whitey = whiteOutElement(editor.wrapperdiv);
// pack it up, ...
var json_packet = {
mode: ( switch_new ) ? 'create_rank' : 'save_rank',
rank_title: editor.f_rank_title.value,
rank_style: editor.getCSS()
}
if ( !switch_new )
{
json_packet.rank_id = editor.rankdata.rank_id;
}
/// ... pack it in
var json_packet = ajaxEscape(toJSONString(json_packet));
ajaxPost(makeUrlNS('Admin', 'UserRanks/action.json'), 'r=' + json_packet, function(ajax)
{
if ( ajax.readyState == 4 && ajax.status == 200 )
{
var response = String(ajax.responseText + '');
if ( !check_json_response(response) )
{
handle_invalid_json(ajax.responseText);
return false;
}
try
{
var response = parseJSON(ajax.responseText);
}
catch(e)
{
handle_invalid_json(ajax.responseText);
}
if ( response.mode == 'success' )
{
whiteOutReportSuccess(whitey);
if ( switch_new )
{
//
// we have a few more things to do with a newly created rank.
//
// 1. transform editor
editor.transformToEditor(response);
editor.onsubmit = ajaxRankEditHandleSaveExisting;
editor.ondelete = ajaxRankEditHandleDelete;
// 2. append the new rank to the list
var create_link = document.getElementById('rankadmin_createlink');
if ( create_link )
{
var parent = create_link.parentNode;
var edit_link = document.createElement('a');
edit_link.href = '#rank_edit:' + response.rank_id;
edit_link.className = 'rankadmin-editlink';
edit_link.setAttribute('style', editor.getCSS());
edit_link.id = 'rankadmin_editlink_' + response.rank_id;
edit_link.rank_id = response.rank_id;
edit_link.appendChild(document.createTextNode($lang.get(editor.f_rank_title.value)));
parent.insertBefore(edit_link, create_link);
edit_link.onclick = function()
{
ajaxInitRankEdit(this.rank_id);
}
}
}
else
{
// update the rank title on the left
var edit_link = document.getElementById('rankadmin_editlink_' + editor.rankdata.rank_id);
if ( edit_link )
{
edit_link.firstChild.nodeValue = $lang.get(editor.f_rank_title.value);
edit_link.setAttribute('style', editor.getCSS());
}
}
}
else
{
whitey.parentNode.removeChild(whitey);
if ( response.error == 'need_auth_to_admin' )
{
load_component('login');
ajaxDynamicReauth(function()
{
ajaxRankEditHandleSave(editor, switch_new);
});
}
else
{
miniPromptMessage({
title: $lang.get('acpur_err_save_failed_title'),
message: response.error,
buttons: [
{
text: $lang.get('etc_ok'),
color: 'red',
style: {
fontWeight: 'bold'
},
onclick: function()
{
miniPromptDestroy(this);
}
}
]
});
}
}
}
}, true);
}
var ajaxRankEditHandleSaveExisting = function()
{
ajaxRankEditHandleSave(this, false);
}
var ajaxRankEditHandleSaveNew = function()
{
ajaxRankEditHandleSave(this, true);
}
var ajaxRankEditHandleDelete = function()
{
var mp = miniPromptMessage({
title: $lang.get('acpur_msg_rank_delete_confirm_title'),
message: $lang.get('acpur_msg_rank_delete_confirm_body'),
buttons: [
{
text: $lang.get('acpur_btn_delete'),
color: 'red',
style: {
fontWeight: 'bold'
},
onclick: function()
{
var parent = miniPromptGetParent(this);
var editor = parent.editor;
setTimeout(function()
{
ajaxRankEditDeleteConfirmed(editor);
}, 1000);
miniPromptDestroy(parent);
}
},
{
text: $lang.get('etc_cancel'),
onclick: function()
{
miniPromptDestroy(this);
}
}
]
});
console.debug(mp);
mp.editor = this;
}
function ajaxRankEditDeleteConfirmed(editor)
{
var whitey = whiteOutElement(editor.wrapperdiv);
load_component(['jquery', 'jquery-ui']);
var json_packet = {
mode: 'delete_rank',
rank_id: editor.rankdata.rank_id
};
var rank_id = editor.rankdata.rank_id;
json_packet = ajaxEscape(toJSONString(json_packet));
ajaxPost(makeUrlNS('Admin', 'UserRanks/action.json'), 'r=' + json_packet, function(ajax)
{
if ( ajax.readyState == 4 && ajax.status == 200 )
{
var response = String(ajax.responseText + '');
if ( !check_json_response(response) )
{
handle_invalid_json(ajax.responseText);
return false;
}
try
{
var response = parseJSON(ajax.responseText);
}
catch(e)
{
handle_invalid_json(ajax.responseText);
}
if ( response.mode == 'success' )
{
// the deletion was successful, report success and kill off the editor
whiteOutReportSuccess(whitey);
setTimeout(function()
{
// nuke the rank title on the left
var edit_link = document.getElementById('rankadmin_editlink_' + editor.rankdata.rank_id);
if ( edit_link )
{
edit_link.parentNode.removeChild(edit_link);
}
// collapse and destroy the editor
$(editor.wrapperdiv).hide("blind", {}, 500, function()
{
// when the animation finishes, nuke the whole thing
var container = document.getElementById('admin_ranks_container_right');
container.innerHTML = $lang.get('acpur_msg_select_rank');
}
);
}, 1500);
}
else
{
whitey.parentNode.removeChild(whitey);
if ( response.error == 'need_auth_to_admin' )
{
load_component('login');
ajaxDynamicReauth(function()
{
ajaxRankEditDeleteConfirmed(editor);
});
}
else
{
miniPromptMessage({
title: $lang.get('acpur_err_delete_failed_title'),
message: response.error,
buttons: [
{
text: $lang.get('etc_ok'),
color: 'red',
style: {
fontWeight: 'bold'
},
onclick: function()
{
miniPromptDestroy(this);
}
}
]
});
}
}
}
}, true);
}