js/userdesign.go.js

   1 /** Init for Farbtastic library and page setup
   2  *
   3  * @package   StatusNet
   4  * @author Sarven Capadisli <csarven@status.net>
   5  * @copyright 2009-2011 StatusNet, Inc.
   6  * @license   http://www.fsf.org/licensing/licenses/agpl-3.0.html GNU Affero General Public License version 3.0
   7  * @link      http://status.net/
   8  */
   9 $(document).ready(function() {
  10     function InitColors(i, E) {
  11         switch (parseInt(E.id.slice(-1))) {
  12             case 1: default:
  13                 $(E).val(rgb2hex($('body').css('background-color')));
  14                 break;
  15             case 2:
  16                 $(E).val(rgb2hex($('#content').css('background-color')));
  17                 break;
  18             case 3:
  19                 $(E).val(rgb2hex($('#aside_primary_wrapper, #site_nav_local_views_wrapper').css('background-color')));
  20                 break;
  21             case 4:
  22                 $(E).val(rgb2hex($('html body').css('color')));
  23                 break;
  24             case 5:
  25                 $(E).val(rgb2hex($('a').css('color')));
  26                 break;
  27         }
  28     }
  29
  30     function rgb2hex(rgb) {
  31         if (rgb.slice(0,1) == '#') { return rgb; }
  32         rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  33         return '#' + dec2hex(rgb[1]) + dec2hex(rgb[2]) + dec2hex(rgb[3]);
  34     }
  35     /* dec2hex written by R0bb13 <robertorebollo@gmail.com> */
  36     function dec2hex(x) {
  37         hexDigits = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F');
  38         return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
  39     }
  40
  41     function UpdateColors(S) {
  42         C = $(S).val();
  43         switch (parseInt(S.id.slice(-1))) {
  44             case 1: default:
  45                 $('body').css({'background-color':C});
  46                 break;
  47             case 2:
  48                 $('#content').css({'background-color':C});
  49                 break;
  50             case 3:
  51                 $('#aside_primary_wrapper, #site_nav_local_views_wrapper').css({'background-color':C});
  52                 break;
  53             case 4:
  54                 $('html body').css({'color':C});
  55                 break;
  56             case 5:
  57                 $('a').css({'color':C});
  58                 break;
  59         }
  60     }
  61
  62     function UpdateFarbtastic(e) {
  63         f.linked = e;
  64         f.setColor(e.value);
  65     }
  66
  67     function UpdateSwatch(e) {
  68         $(e).css({"background-color": e.value,
  69                   "color": f.hsl[2] > 0.5 ? "#000": "#fff"});
  70     }
  71
  72     function SynchColors(e) {
  73         var S = f.linked;
  74         var C = f.color;
  75
  76         if (S && S.value && S.value != C) {
  77             S.value = C;
  78             UpdateSwatch(S);
  79             UpdateColors(S);
  80         }
  81     }
  82
  83     function InitFarbtastic() {
  84         $('#settings_design_color').append('<div id="color-picker"></div>');
  85         $('#color-picker').hide();
  86
  87         f = $.farbtastic('#color-picker', SynchColors);
  88         swatches = $('#settings_design_color .swatch');
  89         swatches.each(InitColors);
  90         swatches
  91             .each(SynchColors)
  92             .blur(function() {
  93                 tv = $(this).val();
  94                 $(this).val(tv.toUpperCase());
  95                 (tv.length == 4) ? ((tv[0] == '#') ? $(this).val('#'+tv[1]+tv[1]+tv[2]+tv[2]+tv[3]+tv[3]) : '') : '';
  96              })
  97             .focus(function() {
  98                 $('#color-picker').show();
  99                 UpdateFarbtastic(this);
 100             })
 101             .change(function() {
 102                 UpdateFarbtastic(this);
 103                 UpdateSwatch(this);
 104                 UpdateColors(this);
 105             }).change();
 106     }
 107
 108     var f, swatches;
 109     InitFarbtastic();
 110     $('#form_settings_design').bind('reset', function(){
 111         setTimeout(function(){
 112             swatches.each(function(){UpdateColors(this);});
 113             $('#color-picker').remove();
 114             swatches.unbind();
 115             InitFarbtastic();
 116         },10);
 117     });
 118
 119     $('#design_background-image_off').focus(function() {
 120         $('body').css({'background-image':'none'});
 121     });
 122     $('#design_background-image_on').focus(function() {
 123         $('body').css({'background-image':'url('+$('#design_background-image_onoff img')[0].src+')'});
 124         $('body').css({'background-attachment': 'fixed'});
 125     });
 126
 127     $('#design_background-image_repeat').click(function() {
 128         ($(this)[0].checked) ? $('body').css({'background-repeat':'repeat'}) : $('body').css({'background-repeat':'no-repeat'});
 129     });
 130 });