home *** CD-ROM | disk | FTP | other *** search
/ Freelog 117 / FreelogNo117-OctobreNovembre2013.iso / Theme / 8GadgetPack / 8GadgetPackSetup.msi / Gadgets.7z / Gadgets / StickyNotesOnline.gadget / Scripts / Lib / jquery.crayonbox.js < prev    next >
Text File  |  2011-06-16  |  3KB  |  109 lines
  1. ;(function($){ // secure $ jQuery alias
  2. /********************************************************
  3.  * jquery.crayonbox.js - rev 2
  4.  * Copyright (c) 2009, Gelform
  5.  * Liscensed under the MIT License (MIT-LICENSE.txt)
  6.  * http://www.opensource.org/licenses/mit-license.php
  7.  * Created: 2009-01-20 | Updated: 2009-02-18
  8.  ********************************************************/
  9.  
  10. /**
  11.  * create a crayonbox around a textfield
  12.  * 
  13.  * @param    object    opt    options
  14.  */
  15. jQuery.fn.crayonbox = function(opt)
  16. {
  17.     // set default options and overwrite them
  18.     var options = jQuery.extend(
  19.     {
  20.         // your crayon colors
  21.         colors: new Array('Silver', 'Tomato', 'Orange', 'Yellow', 'Chartreuse', 'DeepSkyBlue', 'Violet'),
  22.         
  23.         // define a default selected color
  24.         selected: null, 
  25.         
  26.         // the tag that will wrap each crayon - span, a or button work well
  27.         crayonTag: 'span',
  28.         
  29.         // optional X button that will clear your selected crayon
  30.         clearButton: false,
  31.         
  32.         // function that gets called once a crayon has been selected, returns the crayonbox
  33.         onSelection: function(){}
  34.     }, opt);
  35.  
  36.     // return each object passed in
  37.     return this.each(function()
  38.     {
  39.         // if textfield has a color, select it (overwritten by option)
  40.         if ( '' != $(this).val() && null == options.selected )
  41.         {
  42.             options.selected = $(this).val();
  43.         }
  44.         
  45.         // set self to containing span.crayonbox
  46.         var self = $(this).wrap('<span class="crayonbox"></span>').parent('.crayonbox');
  47.  
  48.         // add click behavior
  49.         $(self).click(function(e)
  50.         {
  51.             var clicked = e.target;
  52.             if ( $(e.target).hasClass('crayon') )
  53.             {
  54.                 $(self).uncolor();
  55.                 $(clicked).html('♦').addClass('coloring');
  56.                 $('input', self).val( $(clicked).attr('title') );
  57.             }
  58.             
  59.             // optional callback
  60.             options.onSelection.call(self);
  61.         });
  62.  
  63.         // build our crayons
  64.         var html = '';
  65.         for ( var i in options.colors )
  66.         {
  67.             $('<' + options.crayonTag + ' class="crayon" title="' + options.colors[i] + '"> </' + options.crayonTag + '>')
  68.             .appendTo( $(self) )
  69.             .css( 'background-color', options.colors[i] );
  70.         } 
  71.  
  72.         // add clear button
  73.         if ( options.clearButton )
  74.         {
  75.             $('<' + options.crayonTag + ' class="boxlid">X</' + options.crayonTag + '>')
  76.             .appendTo( $(self) )
  77.             .click(function(){
  78.                 $(this).parents('.crayonbox').uncolor();
  79.             });
  80.         }
  81.         
  82.         // select default crayon
  83.         if ( null != options.selected )
  84.         {
  85.             $(self).find('[title=' + options.selected + ']').trigger('click');
  86.         }
  87.     });
  88. }
  89.  
  90. /**
  91.  * Unselect the selected crayon
  92.  * 
  93.  * @param    boolean    clearTextfield    option to clear the textfield as well 
  94.  * @return    object    each item passed in 
  95.  */
  96. jQuery.fn.uncolor = function(clearTextfield)
  97. {
  98.     if (undefined == clearTextfield)
  99.     {
  100.         clearTextfield = true;
  101.     }
  102.     
  103.     return this.each(function()
  104.     {
  105.         $('.coloring', this).html(' ').removeClass('coloring');
  106.     });
  107. }
  108. /*******************************************************************************************/
  109. })( jQuery ); // confine scope