1 /**

     2  * Creates a control that can be used to edit a rank.

     3  */

     4 

     5 var RankEditorControl = function(rankdata)

     6 {

     7   this.rankdata = rankdata;

     8   

     9   // have the browser parse CSS for us and use an anchor to be as close

    10   // as possible in calculating CSS

    11   

    12   // this is kind of a hack as it relies on setAttribute/getAttribute in

    13   // order to obtain stringified versions of CSS data

    14   var cssobj = document.createElement('a');

    15   cssobj.setAttribute('style', this.rankdata.rank_style);

    16   

    17   this.style_sim_obj = cssobj;

    18   

    19   // figure out if we're editing or creating

    20   this.editing = ( typeof(this.rankdata.rank_id) == 'number' );

    21   

    22   this.render = function()

    23   {

    24     var editor = document.createElement('div');

    25     editor.className = 'tblholder';

    26     // stash this editor instance in the parent div for later function calls

    27     editor.editor = this;

    28     

    29     // tables suck.

    30     var table = document.createElement('table');

    31     table.setAttribute('cellspacing', '1');

    32     table.setAttribute('cellpadding', '4');

    33     table.setAttribute('width', '100%');

    34     

    35     // heading: "Edit rank: foo" or "Create a new rank"

    36     var tr_head = document.createElement('tr');

    37     var th_head = document.createElement('th');

    38     th_head.setAttribute('colspan', '2');

    39     if ( this.editing )

    40     {

    41       var th_head_string = 'acpur_th_edit_rank';

    42       var th_head_data = { rank_title: $lang.get(this.rankdata.rank_title) };

    43     }

    44     else

    45     {

    46       var th_head_string = 'acpur_th_create_rank';

    47       var th_head_data = { };

    48     }

    49     th_head.appendChild(document.createTextNode($lang.get(th_head_string, th_head_data)));

    50     tr_head.appendChild(th_head);

    51     table.appendChild(tr_head);

    52     

    53     // row: rank title

    54     var tr_title = document.createElement('tr');

    55     var td_title_l = document.createElement('td');

    56     var td_title_f = document.createElement('td');

    57     

    58     td_title_l.className = td_title_f.className = 'row1';

    59     

    60     td_title_l.appendChild(document.createTextNode($lang.get('acpur_field_rank_title')));

    61     

    62     // field: rank title

    63     var f_rank_title = document.createElement('input');

    64     f_rank_title.type = 'text';

    65     f_rank_title.size = '30';

    66     f_rank_title.value = ( this.editing ) ? this.rankdata.rank_title : '';

    67     this.f_rank_title = f_rank_title;

    68     td_title_f.appendChild(f_rank_title);

    69     

    70     tr_title.appendChild(td_title_l);

    71     tr_title.appendChild(td_title_f);

    72     table.appendChild(tr_title);

    73     

    74     // row: basic style options

    75     var tr_basic = document.createElement('tr');

    76     var td_basic_l = document.createElement('td');

    77     var td_basic_f = document.createElement('td');

    78     

    79     td_basic_l.className = td_basic_f.className = 'row2';

    80     

    81     td_basic_l.appendChild(document.createTextNode($lang.get('acpur_field_style_basic')));

    82     

    83     // fieldset: basic style options

    84     // field: bold

    85     var l_basic_bold = document.createElement('label');

    86     var f_basic_bold = document.createElement('input');

    87     f_basic_bold.type = 'checkbox';

    88     f_basic_bold.checked = ( this.style_sim_obj.style.fontWeight == 'bold' ) ? true : false;

    89     f_basic_bold.editor = this;

    90     f_basic_bold.onclick = function()

    91     {

    92       this.editor.style_sim_obj.style.fontWeight = ( this.checked ) ? 'bold' : null;

    93     }

    94     l_basic_bold.style.fontWeight = 'bold';

    95     l_basic_bold.appendChild(f_basic_bold);

    96     l_basic_bold.appendChild(document.createTextNode(' '));

    97     l_basic_bold.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_bold')));

    98     

    99     // field: italic

   100     var l_basic_italic = document.createElement('label');

   101     var f_basic_italic = document.createElement('input');

   102     f_basic_italic.type = 'checkbox';

   103     f_basic_italic.checked = ( this.style_sim_obj.style.fontStyle == 'italic' ) ? true : false;

   104     f_basic_italic.editor = this;

   105     f_basic_italic.onclick = function()

   106     {

   107       this.editor.style_sim_obj.style.fontStyle = ( this.checked ) ? 'italic' : null;

   108     }

   109     l_basic_italic.style.fontStyle = 'italic';

   110     l_basic_italic.appendChild(f_basic_italic);

   111     l_basic_italic.appendChild(document.createTextNode(' '));

   112     l_basic_italic.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_italic')));

   113     

   114     // field: underline

   115     var l_basic_underline = document.createElement('label');

   116     var f_basic_underline = document.createElement('input');

   117     f_basic_underline.type = 'checkbox';

   118     f_basic_underline.checked = ( this.style_sim_obj.style.textDecoration == 'underline' ) ? true : false;

   119     f_basic_underline.editor = this;

   120     f_basic_underline.onclick = function()

   121     {

   122       this.editor.style_sim_obj.style.textDecoration = ( this.checked ) ? 'underline' : null;

   123     }

   124     l_basic_underline.style.textDecoration = 'underline';

   125     l_basic_underline.appendChild(f_basic_underline);

   126     l_basic_underline.appendChild(document.createTextNode(' '));

   127     l_basic_underline.appendChild(document.createTextNode($lang.get('acpur_field_style_basic_underline')));

   128     

   129     // finish up formatting row#1

   130     td_basic_f.appendChild(l_basic_bold);

   131     td_basic_f.appendChild(document.createTextNode(' '));

   132     td_basic_f.appendChild(l_basic_italic);

   133     td_basic_f.appendChild(document.createTextNode(' '));

   134     td_basic_f.appendChild(l_basic_underline);

   135     

   136     tr_basic.appendChild(td_basic_l);

   137     tr_basic.appendChild(td_basic_f);

   138     table.appendChild(tr_basic);

   139     

   140     // row: rank color

   141     var tr_color = document.createElement('tr');

   142     var td_color_l = document.createElement('td');

   143     var td_color_f = document.createElement('td');

   144     

   145     td_color_l.className = td_color_f.className = 'row1';

   146     

   147     td_color_l.appendChild(document.createTextNode($lang.get('acpur_field_style_color')));

   148     

   149     // field: rank color

   150     var f_rank_color = document.createElement('input');

   151     f_rank_color.type = 'text';

   152     f_rank_color.size = '7';

   153     f_rank_color.value = ( this.editing ) ? this.rgb2hex(this.style_sim_obj.style.color) : '';

   154     f_rank_color.style.backgroundColor = this.style_sim_obj.style.color;

   155     this.f_rank_color = f_rank_color;

   156     f_rank_color.onkeyup = function(e)

   157     {

   158       if ( !e.keyCode )

   159         e = window.event;

   160       if ( !e )

   161         return false;

   162       var chr = (String.fromCharCode(e.keyCode)).toLowerCase();

   163       this.value = this.value.replace(/[^a-fA-F0-9]/g, '');

   164       if ( this.value.length > 6 )

   165       {

   166         this.value = this.value.substr(0, 6);

   167       }

   168       if ( this.value.length == 6 || this.value.length == 3 )

   169       {

   170         this.style.backgroundColor = '#' + this.value;

   171       }

   172     }

   173     td_color_f.appendChild(f_rank_color);

   174     

   175     tr_color.appendChild(td_color_l);

   176     tr_color.appendChild(td_color_f);

   177     table.appendChild(tr_color);

   178     

   179     // finalize the editor table

   180     editor.appendChild(table);

   181     

   182     // stash rendered editor

   183     this.editordiv = editor;

   184     

   185     // send output

   186     return editor;

   187   }

   188   

   189   this.getJSONDataset = function()

   190   {

   191     

   192   }

   193   

   194   this.getCSS = function()

   195   {

   196     

   197   }

   198   

   199   /**

   200    * Converts a parenthetical color specification (rgb(x, y, z)) to hex form (xxyyzz)

   201    * @param string

   202    * @return string

   203    */

   204   

   205   this.rgb2hex = function(rgb)

   206   {

   207     var p = rgb.match(/^rgb\(([0-9]+), ([0-9]+), ([0-9]+)\)$/);

   208     if ( !p )

   209       return rgb.replace(/^#/, '');

   210     

   211     var r = parseInt(p[1]).toString(16), g = parseInt(p[2]).toString(16), b = parseInt(p[3]).toString(16);

   212     if ( r.length < 2 )

   213       r = '0' + r;

   214     if ( g.length < 2 )

   215       g = '0' + g;

   216     if ( b.length < 2 )

   217       b = '0' + b;

   218     

   219     return r + g + b;

   220   }

   221 }

   222 

   223 /**

   224  * Perform request for editable rank data and draw editor

   225  */

   226 

   227 function ajaxInitRankEdit(rank_id)

   228 {

   229   var editor = new RankEditorControl({ rank_title: 'Foo', rank_id: rank_id, rank_style: 'color: #ff0000; font-weight: bold;' });

   230   var ren

   231   var container = document.getElementById('admin_ranks_container_right');

   232   container.innerHTML = '';

   233   container.appendChild(editor.render());

   234 }