/usr/share/stackapplet/html/index.html

<!DOCTYPE html>
<html>
<head>
<title>StackApplet Preferences</title>
<style type="text/css">

/*==================*/
/*    CSS styles    */
/*==================*/

body {
    font-family: arial, helvetica, sans;
    background-image: url(bg.png);
    background-repeat: repeat-x;
}

.main_td {
    padding: 15px;
    vertical-align: top;
}

#main_logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#tab_bar {
    min-height: 400px;
}

#tab_bar a {
    padding: 3px 8px !important;
}

#account_list {
    list-style-type: none;
    padding-left: 0px;
}

#account_list li {
    background-color: #eee;
    border: 1px solid #aaa;
    padding: 6px 10px;
    width: 300px;
    margin-bottom: 3px;
}

#footer {
    font-size: 10pt;
    color: #555;
    text-align: center;
}

#account_dialog {
    display: none;
}

#associated_dialog, #find_dialog {
    display: none;
}

#associated_accounts {
    height: 150px;
    border: 1px solid #aaa;
    overflow-y: scroll;
}

#search_results {
    margin: 3px;
    height: 125px;
    border: 1px solid #aaa;
    overflow-y: auto;
}

.ui-dialog {
    -moz-box-shadow: 0px 0px 8px #000;
    -webkit-box-shadow: 0px 0px 8px #000;
    box-shadow: 0px 0px 8px #000;
}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript" src="translations.js"></script>
<link rel="stylesheet" href="jqueryui.css" type="text/css" media="all" />
<script type="text/javascript">

// This function loads the translations from the HTTP
// server and then applies them to the DOM elements.
// NOTE: this function _must_ be called _after_ the DOM
// has loaded - or you will end up with empty text.
function DoTranslations()
{
    Translator.LoadTranslation('/get_translations', function(result) {
    
        // Now we simply assign all of the DOM
        // translations.
        Translator.AssignToDOM();
        
        // There are a few things that will not get translated with
        // the rest of the page. Do them here.
        window.title = _('title');
        
        $('#account_dialog').attr('title', _('tr_account_dialog_title'));
        $('#associated_dialog').attr('title', _('tr_associated_dialog_title'));
        $('#find_dialog').attr('title', _('tr_find_dialog_title'));
    
    }, 'POST');
}

var accounts = null;

// This function gets called when an error occurrs on the page.
// (Such as an action cannot be performed or communication with the
// server is disrupted.)
function DoError(error_msg)
{
    $('#tr_reorder_hint').html('<strong>Error:</strong> ' + error_msg).prev().removeClass('ui-icon-info').addClass('ui-icon-alert').parent().parent().removeClass('ui-state-highlight').addClass('ui-state-error');
}

// Make a request to /get_accounts
function RefreshSettings()
{
    $.ajax({ url: '/get_settings',
             type: 'POST',
             success: function(data) {
                 
                 // Get the other settings
                 var theme = data['theme'];
                 
                 if(theme == 'light')
                     $("[name='theme'][value='light']").attr('checked', 'true')
                 else
                     $("[name='theme'][value='dark']").attr('checked', 'true')
                 
                 var rate = data['refresh_rate'];
                 
                 $('#refresh_rate option[value=' + rate + ']').attr('selected', 'true');
                 
                 if(data['startup'])
                     $('#startup').attr('checked', 'true')
                 
                 if(data['mm'])
                     $('#mm').attr('checked', 'true')
                 
                 $('#languages')[0].value = data['language'];
                 
                 // Check for the MM
                 if(!data['can_use_mm'])
                     $('.no_mm').hide();
                 
                 // If we're not on Windows, hide some options
                 if(data['on_windows'] == 1)
                     $('.not_on_windows').hide();
                 
                 // Assign the list to the global variable
                 accounts = data['accounts'];
                 var account_list = '<p>[<a href="javascript:void(0)" onclick="AddNew();">' +
                                    _('tr_add_account') + '</a>]</p>';
                 
                 if(accounts.length)
                 {
                     account_list += '<ul id="account_list">';
                 
                     for(var i=0;i<accounts.length;++i)
                         account_list += '<li>' + accounts[i]['site_name'] +
                                         ' [<a href="javascript:void(0)" onclick="RemoveAccount(' +
                                         i + ');">remove</a>]</li>';
                     account_list += '</ul>';
                 }
                 else
                     account_list += '<p><i>' + _('tr_no_accounts') + '</i></p>';
                 
                 $('#accounts').html(account_list);
                 $('#account_list').sortable();
                 
                 // Bind the sorting event handlers
                 $('#account_list').bind("sortstart", function(event, ui) {
                     
                     $(this).data('drag_index', ui.item.index());
                     
                 }).bind("sortupdate", function(event, ui) {
                 
                     var old_index = $(this).data('drag_index');
                     
                     ReorderItems(old_index, ui.item.index());
                     
                 });
             
             },
             error: function() { DoError(_('tr_error_settings')); }});
}

// Removes an account
function RemoveAccount(index)
{
    $.ajax({ url: '/remove_account',
             data: { 'index': index },
             contentType: 'application/x-www-form-urlencoded',
             type: 'POST',
             success: function() {
                 
                 RefreshSettings();
             
             },
             error: function() { DoError(_('tr_error_remove')); }});
}

function AddNew()
{
    $('#account_dialog').dialog({ modal: true,
                                  width: 450 });
}

var assoc = new Array();

function AddAccount()
{
    var site_val  = $('#site_list').val().replace('http://', '').replace('.com', '');
    var site_name = $('#site_list option:selected').text();
    var user_id   = $('#user_id').val();
    
    $.ajax({ url: '/add_account',
             data: { 'site'     : site_val,
                     'site_name': site_name,
                     'user_id'  : user_id },
             contentType: 'application/x-www-form-urlencoded',
             type: 'POST',
             success: function() {
                 
                 $('#account_dialog').dialog('close');
                 RefreshSettings();
                 
                 // Now do the check for associated accounts if requested
                 if($('#check_associated').attr('checked'))
                 {
                     $.ajax({ url: 'http://api.stackexchange.com/2.2/users/' + user_id + '?site=' + site_val,
                              dataType: 'jsonp',
                              jsonp: 'jsonp',
                              success: function(data) {
                              
                                  // Now get the association GUID
                                  var assoc_guid = data['items'][0]['account_id'];
                                  
                                  $.ajax({ url: 'http://api.stackexchange.com/2.2/users/' + assoc_guid +
                                                '/associated?pagesize=100',
                                           dataType: 'jsonp',
                                           jsonp: 'jsonp',
                                           success: function(data) {
                                           
                                               // Loop through the accounts
                                               var assoc_str = '';
                                               
                                               for(var i=0;i<data['items'].length;++i)
                                               {
                                                   var site = data['items'][i]['site_url'].replace('http://', '').replace('.com', '');
                                                   
                                                   assoc.push({ 'site': site,
                                                                'site_name': data['items'][i]['site_name'],
                                                                'user_id': data['items'][i]['user_id'] });
                                                   
                                                   if(site == site_val)
                                                       continue;
                                                   
                                                   assoc_str += '<input type="checkbox" id="as_' + i + '">' +
                                                                data['items'][i]['site_name'] + '<br>';
                                               }
                                               
                                               $('#associated_accounts').html(assoc_str);
                                               $('#associated_dialog').dialog({ modal: true,
                                                                                width: 450 });
                                           
                                           },
                                           error: function() { DoError(_('tr_error_check')); }});
                              
                              },
                              error: function() { DoError(_('tr_error_lookup')); }});
                 }
             
             },
             error: function() {
                 
                 $('#account_dialog').dialog('close');
                 DoError(_('tr_error_add'));
             
             }});
}

function ReorderItems(old_index, new_index)
{
    $.ajax({ url: '/reorder',
             data: { 'old_index': old_index,
                     'new_index': new_index },
             contentType: 'application/x-www-form-urlencoded',
             type: 'POST',
             success: function(data) {
                 
                 RefreshSettings();
             
             },
             error: function() { DoError(_('tr_error_swap')); }});
}

function ChangeTheme(new_theme)
{
    $.ajax({ url: '/set_theme',
             data: { 'theme': new_theme },
             contentType: 'application/x-www-form-urlencoded',
             type: 'POST',
             error: function() { alert(_('tr_error_theme')); }});
}

function ChangeRefresh()
{
    var rate = $('#refresh_rate').val();
    
    $.ajax({ url: '/set_rate',
             data: { 'rate': rate },
             contentType: 'application/x-www-form-urlencoded',
             type: 'POST',
             error: function() { DoError(_('tr_error_refresh')); }});
}

function CheckAll()
{
    $('#associated_dialog input').attr('checked', 'true');
}

function UncheckAll()
{
    $('#associated_dialog input').removeAttr('checked');
}

function AddAssoc()
{
    for(var i=0;i<assoc.length;++i)
    {
        if($('#as_' + i).attr('checked'))
        {
            $.ajax({ url: '/add_account',
                     data: assoc[i],
                     contentType: 'application/x-www-form-urlencoded',
                     type: 'POST',
                     error: function() { DoError(_('tr_error_add_assoc')); }});
        }
    }
    
    RefreshSettings();
    $('#associated_dialog').dialog('close');
}

function SetStartup()
{
    // Determine whether the checkbox was checked or not.
    var startup = ($('#startup').attr('checked'))?1:0;
    
    $.ajax({ url: '/set_startup',
             data: { 'value': startup },
             contentType: 'application/x-www-form-urlencoded',
             type: 'POST',
             error: function() { alert(_('tr_error_startup')); }});
}

function SetMM()
{
    // Determine whether the checkbox was checked or not.
    var mm = ($('#mm').attr('checked'))?1:0;
    
    $.ajax({ url: '/set_mm',
             data: { 'value': mm },
             contentType: 'application/x-www-form-urlencoded',
             type: 'POST',
             error: function() { alert(_('tr_error_startup')); }});
}

function SetLanguage()
{
    var language = $('#languages').val();
    
    $.ajax({ url: '/set_language',
             data: { 'language': language },
             contentType: 'application/x-www-form-urlencoded',
             type: 'POST',
             success: function() {
                 alert(_('tr_success_language'));
                 DoTranslations();
             },
             error: function() { alert(_('tr_error_language')); }});
}

function FindUser()
{
    $('#find_dialog').dialog({ modal: true });
}

function SelectUserID(id)
{
    $('#find_dialog').dialog('close');
    
    $('#user_id').val(id);
}

function DoUserSearch()
{
    // Get the current site.
    var site_val   = $('#site_list').val().replace('http://', '').replace('.com', '');
    var search_str = $('#dn_search').val();
    
    $('#search_results').html('<br><br><div style="color: #777; text-align: center;">' + _('tr_searching') + '</div>');
    
    // Fire off an AJAX request
    $.ajax({ url: 'http://api.stackexchange.com/2.2/users?site=' + site_val + '&key=VN8jyf7k8STlkO3lx*iw6w((&inname=' + search_str,
             dataType: 'jsonp',
             jsonp: 'jsonp',
             success: function(data) {
             
                 var user_data = '';
                 
                 for(var i=0;i<data['items'].length;++i)
                     user_data += '<a href="javascript:void(0)" onclick="SelectUserID(' +
                                  data['items'][i]['user_id'] + ')">' + data['items'][i]['display_name'] +
                                  '</a><br>';
                 
                 $('#search_results').html(user_data);
             
             },
             error: function() { alert(_('tr_error_search')); }});
}

$(document).ready(function() {

    DoTranslations();
    
    RefreshSettings();
    $('#tab_bar').tabs();
    
    $.ajax({ url: 'http://stackauth.com/1.0/sites?key=_qlxmEAOH06hLA1_FsZIGQ',
             dataType: 'jsonp',
             jsonp: 'jsonp',
             success: function(data) {
                 
                 var site_str  = '';
                 
                 for(var i=0;i<data['api_sites'].length;++i)
                 {
                     site_str += '<option value="' + data['api_sites'][i]['site_url'] + '">' +
                                 data['api_sites'][i]['name'] + '</option>';
                 }
                 
                 $('#site_list').html(site_str);
             
             },
             error: function() { alert(_('tr_error_stackauth')); }});
    
});

</script>
</head>
<body>
<img src='main_logo.png' id='main_logo' />
<hr />
<noscript>
<br /><span style="color: red;">Error: StackApplet requires JavaScript to be enabled.</span><br /><br />
</noscript>
<!-- The tab bar that goes along the top row -->
<div id="tab_bar">
  <ul>
    <li><a href="#tab_bar_1" id="tr_accounts"></a></li>
    <li><a href="#tab_bar_2" id="tr_appearance"></a></li>
    <li><a href="#tab_bar_3" id="tr_system"></a></li>
  </ul>
  <div id="tab_bar_1">
    <div class="ui-state-highlight ui-corner-all" style="padding: 0px 10px;"> 
     <p style="margin: 2px;">
      <span class="ui-icon ui-icon-info" style="float: left; margin-right: 5px; margin-top: 3px;"></span>
      <span id="tr_reorder_hint"></span>
     </p>
    </div>
    <table style="width: 100%;">
     <tr>
      <td class="main_td">
       <p>
        <strong id="tr_account_list"></strong>
       </p>
       <div id="accounts">
        <i id="tr_loading"></i>
       </div>
      </td>
      <td class="main_td" style="width: 350px;">
       <p><strong id="tr_account_settings"></strong></p>
       <span id="tr_refresh_rate"></span>&nbsp;&nbsp;
       <select id="refresh_rate" onchange="ChangeRefresh()">
        <option value="300000" id="tr_every_5"></option>
        <option value="480000" id="tr_every_8"></option>
        <option value="600000" id="tr_every_10"></option>
        <option value="900000" id="tr_every_15"></option>
        <option value="1200000" id="tr_every_20"></option>
       </select>
      </td>
     </tr>
    </table>
  </div>
  <div id="tab_bar_2">
	<p><strong id="tr_appearance_title"></strong></p>
	<p id="tr_icon_theme"></p>
	<table style="text-align: center;">
	 <tr>
	  <td style="padding: 6px;">
	   <img src="dark_theme.png" /><br />
	   <input type="radio" name="theme" value='dark' onclick='ChangeTheme("dark")' />
	   <span id="tr_dark"></span>
	  </td>
	  <td style="padding: 6px;">
	   <img src="light_theme.png" /><br />
	   <input type="radio" name="theme" value='light' onclick='ChangeTheme("light")' />
	   <span id="tr_light"></span>
	  </td>
	 </tr>
	</table>
  </div>
  <div id="tab_bar_3">
	<p><strong id="tr_behavior"></strong></p>
	<div class="not_on_windows">
	  <input type="checkbox" id="startup" onclick="SetStartup();" /><span id="tr_startup"></span>
	</div>
	<div class="not_on_windows no_mm">
	  <input type="checkbox" id="mm" onclick="SetMM();" /><span id="tr_mm"></span>
	</div>
	<div>
	  <span id="tr_language"></span>
	  <!-- Very horrible: hard-coded list -->
	  <select id="languages" onchange="SetLanguage();">
	    <option value="">System Default</option>
	    <option value="nl">Dutch</option>
	    <option value="en_CA">English (Canadian)</option>
	    <option value="en_GB">English (UK)</option>
	    <option value="fr">French</option>
	    <option value="gl">Galician</option>
	    <option value="de">German</option>
	    <option value="hi">Hindi</option>
	    <option value="ru">Russian</option>
	    <option value="pt_BR">Portuguese (Brazil)</option>
	    <option value="sv">Swedish</option>
	    <option value="es">Spanish</option>
	    <option value="ta">Tamil</option>
	    <option value="tr">Turkish</option>
	  </select>
	</div>
  </div>
</div>
<br />
<div id="footer">
<span id="tr_footer"></span>
</div>

<!-- Dialog box for adding a new account. -->
<div id="account_dialog">
 <div>
  <p id="tr_enter_details"></p>
  <table style="margin-left: auto; margin-right: auto;">
   <tr>
    <td id="tr_site"></td>
    <td colspan="2"><select id="site_list" style="width: 100%;"></select></td>
   </tr>
   <tr>
    <td style="width: 80px;" id="tr_user_id"></td>
    <td><input type="text" id="user_id" style="width: 100%;" /></td>
    <td>&nbsp;<button onclick="FindUser();" id="tr_find_user"></button></td>
   </tr>
   <tr>
    <td colspan="3">
     <span style="color: #666; font-size: 10pt;" id="tr_find_user_hint"></span>
     <br /><br />
     <input type="checkbox" id="check_associated" checked="true" /> <span id="tr_check_assoc"></span>
     <br /><br /><button onclick="AddAccount();" id="tr_add_account_button"></button>
    </td>
   </tr>
  </table>
 </div>
</div>

<!-- Dialog for account associations -->
<div id="associated_dialog">
 <div>
  <p id="tr_assoc_list"></p>
  <div id="associated_accounts"></div>
  <div style="float: right;">
   [<a href="javascript:void(0)" onclick="CheckAll();" id="tr_check_all"></a>]
   [<a href="javascript:void(0)" onclick="UncheckAll();" id="tr_uncheck_all"></a>]
  </div>
  <p id="tr_select_assoc"></p>
  <button onclick="AddAssoc();" id="tr_add_accounts"></button>
 </div>
</div>

<!-- Dialog for finding users -->
<div id="find_dialog">
 <div>
  <p id="tr_enter_disp"></p>
  <table style="width: 100%;">
   <tr><td>
    <input type="text" id="dn_search" style="width: 100%;" /></td><td>
    <button onclick="DoUserSearch();" style="margin-left: 2px;" id="tr_search"></button>
   </td></tr>
  </table>
  <!-- Results are displayed below: -->
  <div id="search_results">
  </div>
 </div>
</div>

</body>
</html>
stackapplet 1.5.2-1 / usr / share / stackapplet / html / index.html
