js/userdesign.go.js

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