jappixmini/jappix/js/home.js

   1 /*
   2
   3 Jappix - An open social platform
   4 These are the homepage JS scripts for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Authors: Vanaryon, LinkMauve
  10 Last revision: 15/01/12
  11
  12 */
  13
  14 // Allows the user to switch the difference home page elements
  15 function switchHome(div) {
  16         // Path to
  17         var home = '#home .';
  18         var right = home + 'right ';
  19         var current = right + '.homediv.' + div;
  20
  21         // We switch the div
  22         $(right + '.homediv, ' + right + '.top').hide();
  23         $(right + '.' + div).show();
  24
  25         // We reset the homedivs
  26         $(home + 'homediv:not(.default), ' + home + 'top:not(.default)').remove();
  27
  28         // Get the HTML code to display
  29         var disable_form = '';
  30         var lock_host = '';
  31         var code = '';
  32
  33         // Apply the previous link
  34         switch(div) {
  35                 case 'loginer':
  36                 case 'anonymouser':
  37                 case 'registerer':
  38                         if(!exists(right + '.top.sub')) {
  39                                 // Append the HTML code for previous link
  40                                 $(right + '.top.default').after('<h1 class="top sub loginer anonymouser registerer">&laquo; <a href="#" class="previous">' + _e("Previous") + '</a></h1>');
  41
  42                                 // Click event on previous link
  43                                 $(home + 'top.sub a.previous').click(function() {
  44                                         return switchHome('default');
  45                                 });
  46                         }
  47
  48                 break;
  49         }
  50
  51         // Apply the form
  52         switch(div) {
  53                 // Login tool
  54                 case 'loginer':
  55                         lock_host = disableInput(LOCK_HOST, 'on');
  56                         code = '<p>' + printf(_e("Login to your existing XMPP account. You can also use the %s to join a groupchat."), '<a href="#" class="to-anonymous">' + _e("anonymous mode") + '</a>') + '</p>' +
  57
  58                                 '<form action="#" method="post">' +
  59                                         '<fieldset>' +
  60                                                 '<legend>' + _e("Required") + '</legend>' +
  61
  62                                                 '<label for="lnick">' + _e("Address") + '</label>' +
  63                                                 '<input type="text" class="nick" id="lnick" pattern="[^@/]+" required="" /><span class="jid">@</span><input type="text" class="server" id="lserver" value="' + HOST_MAIN + '" ' + lock_host + ' pattern="[^@/]+" required="" />' +
  64                                                 '<label for="lpassword">' + _e("Password") + '</label>' +
  65                                                 '<input type="password" class="password" id="lpassword" required="" />' +
  66                                                 '<label for="lremember">' + _e("Remember me") + '</label>' +
  67                                                 '<input type="checkbox" class="remember" id="lremember" />' +
  68                                         '</fieldset>' +
  69
  70                                         '<a href="#" class="advanced home-images">' + _e("Advanced") + '</a>' +
  71
  72                                         '<fieldset class="advanced">' +
  73                                                 '<legend>' + _e("Advanced") + '</legend>' +
  74
  75                                                 '<label for="lresource">' + _e("Resource") + '</label>' +
  76                                                 '<input type="text" class="resource" id="lresource" value="' + JAPPIX_RESOURCE + '" />' +
  77                                                 '<label for="lpriority">' + _e("Priority") + '</label>' +
  78                                                 '<select class="priority" id="lpriority">' +
  79                                                         '<option value="1">' + _e("Low") + '</option>' +
  80                                                         '<option value="10" selected="">' + _e("Medium") + '</option>' +
  81                                                         '<option value="100">' + _e("High") + '</option>' +
  82                                                 '</select>' +
  83                                         '</fieldset>' +
  84
  85                                         '<input type="submit" value="' + _e("Here we go!") + '" />' +
  86                                 '</form>';
  87
  88                         break;
  89
  90                 // Anonymous login tool
  91                 case 'anonymouser':
  92                         disable_form = disableInput(ANONYMOUS, 'off');
  93                         code = '<p>' + printf(_e("Enter the groupchat you want to join and the nick you want to have. You can also go back to the %s."), '<a href="#" class="to-home">' + _e("login page") + '</a>') + '</p>' +
  94
  95                                 '<form action="#" method="post">' +
  96                                         '<fieldset>' +
  97                                                 '<legend>' + _e("Required") + '</legend>' +
  98
  99                                                 '<label>' + _e("Room") + '</label>' +
 100                                                 '<input type="text" class="room"' + disable_form + ' pattern="[^/]+" required="" />' +
 101
 102                                                 '<label>' + _e("Nickname") + '</label>' +
 103                                                 '<input type="text" class="nick"' + disable_form + ' required="" />' +
 104                                         '</fieldset>' +
 105
 106                                         '<input type="submit" value="' + _e("Here we go!") + '"' + disable_form + ' />' +
 107                                 '</form>' +
 108
 109                                 '<div class="info report">' +
 110                                         _e("Share this link with your friends:") + ' <span></span>' +
 111                                 '</div>';
 112
 113                         break;
 114
 115                 // Register tool
 116                 case 'registerer':
 117                         disable_form = disableInput(REGISTRATION, 'off');
 118
 119                         if(!disable_form)
 120                                 lock_host = disableInput(LOCK_HOST, 'on');
 121
 122                         code = '<p>' + _e("Register a new XMPP account to join your friends on your own social cloud. That's simple!") + '</p>' +
 123
 124                                 '<form action="#" method="post">' +
 125                                         '<fieldset>' +
 126                                                 '<legend>' + _e("Required") + '</legend>' +
 127
 128                                                 '<label for="rnick">' + _e("Address") + '</label>' +
 129                                                 '<input type="text" class="nick" id="rnick" ' + disable_form + ' pattern="[^@/]+" required="" /><span class="jid">@</span><input type="text" class="server" id="rserver" value="' + HOST_MAIN + '" ' + disable_form + lock_host + ' pattern="[^@/]+" required="" />' +
 130                                                 '<label for="rpassword">' + _e("Password") + '</label>' +
 131                                                 '<input type="password" class="password" id="rpassword" ' + disable_form + ' required="" />' +
 132                                                 '<label for="spassword">' + _e("Confirm") + '</label><input type="password" class="spassword" id="spassword" ' + disable_form + ' required="" />' +
 133                                         '</fieldset>' +
 134
 135                                         '<input type="submit" value="' + _e("Here we go!") + '" ' + disable_form + '/>' +
 136                                 '</form>';
 137
 138                         break;
 139         }
 140
 141         // Form disabled?
 142         if(disable_form)
 143                 code += '<div class="info fail">' +
 144                                 _e("This tool has been disabled, you cannot use it!") +
 145                         '</div>';
 146
 147         // Create this HTML code
 148         if(code && !exists(current)) {
 149                 // Append it!
 150                 $(right + '.homediv.default').after('<div class="' + div + ' homediv">' + code + '</div>');
 151
 152                 // Create the attached events
 153                 switch(div) {
 154                         // Login tool
 155                         case 'loginer':
 156                                 $(current + ' a.to-anonymous').click(function() {
 157                                         return switchHome('anonymouser');
 158                                 });
 159
 160                                 $(current + ' a.advanced').click(showAdvanced);
 161
 162                                 $(current + ' form').submit(loginForm);
 163
 164                                 break;
 165
 166                         // Anonymous login tool
 167                         case 'anonymouser':
 168                                 $(current + ' a.to-home').click(function() {
 169                                         return switchHome('loginer');
 170                                 });
 171
 172                                 $(current + ' form').submit(doAnonymous);
 173
 174                                 // Keyup event on anonymous join's room input
 175                                 $(current + ' input.room').keyup(function() {
 176                                         var value = $(this).val();
 177                                         var report = current + ' .report';
 178                                         var span = report + ' span';
 179
 180                                         if(!value) {
 181                                                 $(report).hide();
 182                                                 $(span).text('');
 183                                         }
 184
 185                                         else {
 186                                                 $(report).show();
 187                                                 $(span).text(JAPPIX_LOCATION + '?r=' + value);
 188                                         }
 189                                 });
 190
 191                                 break;
 192
 193                         // Register tool
 194                         case 'registerer':
 195                                 $(current + ' form').submit(registerForm);
 196
 197                                 break;
 198                 }
 199         }
 200
 201         // We focus on the first input
 202         $(document).oneTime(10, function() {
 203                 $(right + 'input:visible:first').focus();
 204         });
 205
 206         return false;
 207 }
 208
 209 // Allows the user to display the advanced login options
 210 function showAdvanced() {
 211         // Hide the link
 212         $('#home a.advanced').hide();
 213
 214         // Show the fieldset
 215         $('#home fieldset.advanced').show();
 216
 217         return false;
 218 }
 219
 220 // Reads the login form values
 221 function loginForm() {
 222         // We get the values
 223         var lPath = '#home .loginer ';
 224         var lServer = $(lPath + '.server').val();
 225         var lNick = $(lPath + '.nick').val();
 226         var lPass = $(lPath + '.password').val();
 227         var lResource = $(lPath + '.resource').val();
 228         var lPriority = $(lPath + '.priority').val();
 229         var lRemember = $(lPath + '.remember').filter(':checked').size();
 230
 231         // Enough values?
 232         if(lServer && lNick && lPass && lResource && lPriority)
 233                 doLogin(lNick, lServer, lPass, lResource, lPriority, lRemember);
 234
 235         // Something is missing?
 236         else {
 237                 $(lPath + 'input[type=text], ' + lPath + 'input[type=password]').each(function() {
 238                         var select = $(this);
 239
 240                         if(!select.val())
 241                                 $(document).oneTime(10, function() {
 242                                         select.addClass('please-complete').focus();
 243                                 });
 244                         else
 245                                 select.removeClass('please-complete');
 246                 });
 247         }
 248
 249         return false;
 250 }
 251
 252 // Reads the register form values
 253 function registerForm() {
 254         var rPath = '#home .registerer ';
 255
 256         // Remove the success info
 257         $(rPath + '.success').remove();
 258
 259         // Get the values
 260         var username = $(rPath + '.nick').val();
 261         var domain = $(rPath + '.server').val();
 262         var pass = $(rPath + '.password').val();
 263         var spass = $(rPath + '.spassword').val();
 264
 265         // Enough values?
 266         if(domain && username && pass && spass && (pass == spass)) {
 267                 // We remove the not completed class to avoid problems
 268                 $('#home .registerer input').removeClass('please-complete');
 269
 270                 // Fire the register event!
 271                 doRegister(username, domain, pass);
 272         }
 273
 274         // Something is missing?
 275         else {
 276                 $(rPath + 'input[type=text], ' + rPath + 'input[type=password]').each(function() {
 277                         var select = $(this);
 278
 279                         if(!select.val() || (select.is('#spassword') && pass && (pass != spass)))
 280                                 $(document).oneTime(10, function() {
 281                                         select.addClass('please-complete').focus();
 282                                 });
 283                         else
 284                                 select.removeClass('please-complete');
 285                 });
 286         }
 287
 288         return false;
 289 }
 290
 291 // Plugin launcher
 292 function launchHome() {
 293         // Define the vars
 294         var home = '#home ';
 295         var button = home + 'button';
 296         var corp = home + '.corporation';
 297         var locale = home + '.locale';
 298
 299         // Removes the <noscript /> elements to lighten the DOM
 300         $('noscript').remove();
 301
 302         // Allows the user to switch the home page
 303         $(button).click(function() {
 304                 // Login button
 305                 if($(this).is('.login'))
 306                         return switchHome('loginer');
 307
 308                 // Register button
 309                 else
 310                         return switchHome('registerer');
 311         });
 312
 313         // Allows the user to view the corporation infobox
 314         $(corp).hover(function() {
 315                 $(corp).addClass('hovered');
 316         }, function() {
 317                 $(corp).removeClass('hovered');
 318         });
 319
 320         // Allows the user to switch the language
 321         $(locale).hover(function() {
 322                 // Initialize the HTML code
 323                 var keepget = $(locale).attr('data-keepget');
 324                 var html = '<div class="list">';
 325
 326                 // Generate each locale HTML code
 327                 for(i in LOCALES_AVAILABLE_ID)
 328                         html += '<a href="./?l=' + LOCALES_AVAILABLE_ID[i] + keepget + '">' + LOCALES_AVAILABLE_NAMES[i].htmlEnc() + '</a>';
 329
 330                 html += '</div>';
 331
 332                 // Append the HTML code
 333                 $(locale).append(html);
 334         }, function() {
 335                 $(locale + ' .list').remove();
 336         });
 337
 338         // Disables the browser HTTP-requests stopper
 339         $(document).keydown(function(e) {
 340                 if((e.keyCode == 27) && !isDeveloper())
 341                         return false;
 342         });
 343
 344         // Warns for an obsolete browser
 345         if(isObsolete()) {
 346                 // Add the code
 347                 $(locale).after(
 348                         '<div class="obsolete">' +
 349                                 '<p>' + _e("Your browser is out of date!") + '</p>' +
 350
 351                                 '<a class="firefox browsers-images" title="' + printf(_e("Last %s version is better!"), 'Mozilla Firefox') + '" href="http://www.mozilla.com/firefox/"></a>' +
 352                                 '<a class="chrome browsers-images" title="' + printf(_e("Last %s version is better!"), 'Google Chrome') + '" href="http://www.google.com/chrome"></a>' +
 353                                 '<a class="safari browsers-images" title="' + printf(_e("Last %s version is better!"), 'Safari') + '" href="http://www.apple.com/safari/"></a>' +
 354                                 '<a class="opera browsers-images" title="' + printf(_e("Last %s version is better!"), 'Opera') + '" href="http://www.opera.com/"></a>' +
 355                                 '<a class="ie browsers-images" title="' + printf(_e("Last %s version is better!"), 'Internet Explorer') + '" href="http://www.microsoft.com/hk/windows/internet-explorer/"></a>' +
 356                         '</div>'
 357                 );
 358
 359                 // Display it later
 360                 $(home + '.obsolete').oneTime('1s', function() {
 361                         $(this).slideDown();
 362                 });
 363
 364                 logThis('Jappix does not support this browser!', 2);
 365         }
 366
 367         logThis('Welcome to Jappix! Happy coding in developer mode!');
 368 }
 369
 370 // Launch this plugin!
 371 $(document).ready(launchHome);