includes/clientside/static/theme-manager.js
changeset 435 a434d60e525d
child 465 fe8b8c9b54e8
equal deleted inserted replaced
434:265725bb0ba6 435:a434d60e525d
       
     1 function ajaxToggleSystemThemes()
       
     2 {
       
     3   var theme_list = document.getElementById('theme_list_edit');
       
     4   var mode = ( theme_list.sys_shown ) ? 'hide' : 'show';
       
     5   for ( var i = 0; i < theme_list.childNodes.length; i++ )
       
     6   {
       
     7     var child = theme_list.childNodes[i];
       
     8     if ( child.tagName == 'DIV' )
       
     9     {
       
    10       if ( $(child).hasClass('themebutton_theme_system') )
       
    11       {
       
    12         if ( $(child).hasClass('themebutton_theme_disabled') )
       
    13         {
       
    14           $(child).rmClass('themebutton_theme_disabled')
       
    15         }
       
    16         if ( mode == 'show' )
       
    17         {
       
    18           domObjChangeOpac(0, child);
       
    19           child.style.display = 'block';
       
    20           domOpacity(child, 0, 100, 1000);
       
    21         }
       
    22         else
       
    23         {
       
    24           domOpacity(child, 100, 0, 1000);
       
    25           setTimeout("document.getElementById('" + child.id + "').style.display = 'none';", 1050);
       
    26         }
       
    27       }
       
    28     }
       
    29   }
       
    30   theme_list.sys_shown = ( mode == 'show' );
       
    31   document.getElementById('systheme_toggler').innerHTML = ( mode == 'hide' ) ? $lang.get('acptm_btn_system_themes_show') : $lang.get('acptm_btn_system_themes_hide');
       
    32 }
       
    33 
       
    34 function ajaxInstallTheme(theme_id)
       
    35 {
       
    36   var thediv = document.getElementById('themebtn_install_' + theme_id);
       
    37   if ( !thediv )
       
    38     return false;
       
    39   thediv.removeChild(thediv.getElementsByTagName('a')[0]);
       
    40   var status = document.createElement('div');
       
    41   status.className = 'status';
       
    42   thediv.appendChild(status);
       
    43   setTimeout(function()
       
    44     {
       
    45       var theme_list = document.getElementById('theme_list_edit');
       
    46       
       
    47       var btn = document.createElement('div');
       
    48       btn.className = 'themebutton';
       
    49       btn.style.backgroundImage = thediv.style.backgroundImage;
       
    50       btn.id = 'themebtn_edit_' + theme_id;
       
    51       
       
    52       var a = document.createElement('a');
       
    53       a.className = 'tb-inner';
       
    54       a.appendChild(document.createTextNode($lang.get('acptm_btn_theme_edit')));
       
    55       a.appendChild(document.createTextNode("\n"));
       
    56       a.theme_id = theme_id;
       
    57       a.onclick = function()
       
    58       {
       
    59         ajaxEditTheme(this.theme_id);
       
    60         return false;
       
    61       }
       
    62       a.href = '#';
       
    63       var span = document.createElement('span');
       
    64       span.className = 'themename';
       
    65       span.appendChild(document.createTextNode(thediv.getAttribute('enano:themename')));
       
    66       a.appendChild(span);
       
    67       btn.appendChild(a);
       
    68       btn.setAttribute('enano:themename', thediv.getAttribute('enano:themename'));
       
    69       theme_list.appendChild(btn);
       
    70       
       
    71       thediv.parentNode.removeChild(thediv);
       
    72     }, 3000);
       
    73 }
       
    74 
       
    75 function ajaxEditTheme(theme_id)
       
    76 {
       
    77   // Fade out and subsequently destroy the entire list, then make an
       
    78   // ajax request to the theme manager for the theme info via JSON
       
    79   var theme_list = document.getElementById('theme_list_edit').parentNode;
       
    80   var backgroundImage = document.getElementById('themebtn_edit_' + theme_id).style.backgroundImage;
       
    81   for ( var i = 0; i < theme_list.childNodes.length; i++ )
       
    82   {
       
    83     var el = theme_list.childNodes[i];
       
    84     if ( el.tagName )
       
    85       domOpacity(el, 100, 0, 1000);
       
    86   }
       
    87   setTimeout(function()
       
    88     {
       
    89       theme_list.innerHTML = '';
       
    90       var req = toJSONString({
       
    91           mode: 'fetch_theme',
       
    92           theme_id: theme_id
       
    93         });
       
    94       // we've finished nukeing the existing interface, request editor data
       
    95       ajaxPost(makeUrlNS('Admin', 'ThemeManager/action.json'), 'r=' + ajaxEscape(req), function()
       
    96         {
       
    97           if ( ajax.readyState == 4 && ajax.status == 200 )
       
    98           {
       
    99             var response = String(ajax.responseText + '');
       
   100             if ( response.substr(0, 1) != '{' )
       
   101             {
       
   102               alert(response);
       
   103               return false;
       
   104             }
       
   105             response = parseJSON(response);
       
   106             if ( response.mode == 'error' )
       
   107             {
       
   108               alert(response.error);
       
   109               return false;
       
   110             }
       
   111             response.background_image = backgroundImage;
       
   112             ajaxBuildThemeEditor(response, theme_list);
       
   113           }
       
   114         });
       
   115     }, 1050);
       
   116 }
       
   117 
       
   118 function ajaxBuildThemeEditor(data, target)
       
   119 {
       
   120   // Build the theme editor interface
       
   121   // Init opacity
       
   122   domObjChangeOpac(0, target);
       
   123   
       
   124   // Theme preview
       
   125   var preview = document.createElement('div');
       
   126   preview.style.border = '1px solid #F0F0F0';
       
   127   preview.style.padding = '5px';
       
   128   preview.style.width = '216px';
       
   129   preview.style.height = '150px';
       
   130   preview.style.backgroundImage = data.background_image;
       
   131   preview.style.backgroundRepeat = 'no-repeat';
       
   132   preview.style.backgroundPosition = 'center center';
       
   133   preview.style.cssFloat = 'right';
       
   134   preview.style.styleFloat = 'right';
       
   135   
       
   136   target.appendChild(preview);
       
   137   
       
   138   // Heading
       
   139   var h3 = document.createElement('h3');
       
   140   h3.appendChild(document.createTextNode($lang.get('acptm_heading_theme_edit', { theme_name: data.theme_name })));
       
   141   target.appendChild(h3);
       
   142   
       
   143   // Field: Theme name
       
   144   var l_name = document.createElement('label');
       
   145   l_name.appendChild(document.createTextNode($lang.get('acptm_field_theme_name') + ' '));
       
   146   var f_name = document.createElement('input');
       
   147   f_name.type = 'text';
       
   148   f_name.id = 'themeed_field_name';
       
   149   f_name.value = data.theme_name;
       
   150   f_name.size = '40';
       
   151   l_name.appendChild(f_name);
       
   152   target.appendChild(l_name);
       
   153   
       
   154   target.appendChild(document.createElement('br'));
       
   155   
       
   156   // Field: default style
       
   157   var l_style = document.createElement('label');
       
   158   l_style.appendChild(document.createTextNode($lang.get('acptm_field_default_style') + ' '));
       
   159   var f_style = document.createElement('select');
       
   160   f_style.id = 'themeed_field_style';
       
   161   var opts = [];
       
   162   for ( var i = 0; i < data.css.length; i++ )
       
   163   {
       
   164     if ( data.css[i] == '_printable' )
       
   165       continue;
       
   166     
       
   167     opts[i] = document.createElement('option');
       
   168     opts[i].value = data.css[i];
       
   169     opts[i].appendChild(document.createTextNode(data.css[i]));
       
   170     if ( data.default_style == data.css[i] )
       
   171     {
       
   172       opts[i].selected = true;
       
   173     }
       
   174     f_style.appendChild(opts[i]);
       
   175   }
       
   176   l_style.appendChild(f_style);
       
   177   target.appendChild(l_style);
       
   178   
       
   179   target.appendChild(document.createElement('br'));
       
   180   
       
   181   // Default theme
       
   182   target.appendChild(document.createTextNode($lang.get('acptm_field_default_theme') + ' '));
       
   183   if ( data.is_default )
       
   184   {
       
   185     var l_default = document.createElement('b');
       
   186     l_default.appendChild(document.createTextNode($lang.get('acptm_field_default_msg_current')));
       
   187   }
       
   188   else
       
   189   {
       
   190     var l_default = document.createElement('label');
       
   191     var f_default = document.createElement('input');
       
   192     f_default.type = 'checkbox';
       
   193     f_default.id = 'themeed_field_default';
       
   194     l_default.appendChild(f_default);
       
   195     l_default.appendChild(document.createTextNode($lang.get('acptm_field_default_btn_make_default')));
       
   196   }
       
   197   target.appendChild(l_default);
       
   198   
       
   199   // Availability policy
       
   200   var h3 = document.createElement('h3');
       
   201   h3.appendChild(document.createTextNode($lang.get('acptm_heading_theme_groups')));
       
   202   target.appendChild(h3);
       
   203   
       
   204   for ( var i = 0; i < data.group_list.length; i++ )
       
   205   {
       
   206     
       
   207   }
       
   208   
       
   209   var clearer = document.createElement('span');
       
   210   clearer.className = 'menuclear';
       
   211   target.appendChild(clearer);
       
   212   
       
   213   // Fade it all in
       
   214   domOpacity(target, 0, 100, 500);
       
   215   f_name.focus();
       
   216 }