head	1.4;
access;
symbols;
locks; strict;
comment	@# @;


1.4
date	2013.02.16.02.34.39;	author TWikiContributor;	state Exp;
branches;
next	1.3;

1.3
date	2012.12.04.08.24.04;	author TWikiContributor;	state Exp;
branches;
next	1.2;

1.2
date	2012.08.11.22.23.39;	author TWikiContributor;	state Exp;
branches;
next	1.1;

1.1
date	2011.08.21.04.15.56;	author TWikiContributor;	state Exp;
branches;
next	;


desc
@buildrelease
@


1.4
log
@buildrelease
@
text
@%META:TOPICINFO{author="TWikiContributor" date="1360982079" format="1.1" version="4"}%
---+!! Color Picker Plugin
<!--
   Contributions to this plugin package are appreciated. Please update this page at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPlugin or provide feedback at
   http://twiki.org/cgi-bin/view/Plugins/ColorPickerPluginDev.
   If you are a TWiki contributor please update the extension in the SVN repository.
-->
<sticky>
<div style="float:right; background-color:#EBEEF0; margin:0 0 20px 20px; padding: 0 10px 0 10px;">
%TOC{title="Page contents"}%
</div>
<img src="%ATTACHURLPATH%/screenshot-edit.png" alt="screenshot-edit.png" width="201" height="227" style="float:right" />
</sticky>
%SHORTDESCRIPTION%

---++ Introduction

This TWiki plugin packages the [[http://acko.net/dev/farbtastic][Farbtastic color picker]], which is a jQuery plugin developed by Steven Wittens of Acko.net. The package adds a color picker to TWiki forms and TWiki applications.

---++ Using the color picker in !TWikiForms

This package adds a =color= type to %SYSTEMWEB%.TWikiForms:

| *Type* | *Description* | *Size* | *Value* |
| =color= | %IF{ "'%BASETOPIC%'!='%TOPIC%'" then="<img src='%PUBURLPATH%/%WEB%/ColorPickerPlugin/screenshot-small.png' alt='screenshot-small' width='150' height='170' align='right' /> " }%Single-line text box and a color picker to pick a color. The color can also be typed into the text box, such as =#123456=. %IF{ "'%BASETOPIC%'='TWikiForms'" then="[[ColorPickerPlugin][See details]]." }% | Text box width in number of characters | Initial (default) color |

Example form definition:

| *Name:* | *Type:* | *Size* | *Values:* | *Tooltip message:* |
| Background color | color | 12 | | Select color |

---++ Using the color picker in an HTML form

You can also use the color picker directly in your HTML forms, without having to write any code. Just include this in the topic text:
<verbatim>
<form action="...">
%COLORPICKER{ name="text_color" size="12" value="#123456" class="twikiInputField" }%
<form>
</verbatim>
This will show an HTML input field named "text_color" and a color picker tied to it.

%INCLUDE{ "VarCOLORPICKER" section="parameters" }%

Test: (this only works if the !ColorPickerPlugin is installed and enabled)

<form>
%COLORPICKER{ name="text_color" size="12" value="#123456" class="twikiInputField" }%
</form>

---++ Using the color picker with disabled plugin

It is also possible to use the color picker in HTML forms with _disabled_ !ColorPickerPlugin:

<verbatim>
%INCLUDE{ "%SYSTEMWEB%.ColorPickerPlugin" section="code" }%
<form action="...">
%INCLUDE{ "%SYSTEMWEB%.ColorPickerPlugin" section="picker" NAME="demo_color" SIZE="12" VALUE="#123456" EXTRA="class=\"twikiInputField\"" }%
</form>
</verbatim>
This will show an HTML input field named "demo_color" and a color picker tied to it. The ="code"= section should be included once per topic, the ="picker"= section can be included as many times as needed. The =NAME= parameter is required; =SIZE=, =VALUE= and =EXTRA= parameters are optional. Use the =EXTRA= parameter to add additional parameters to the HTML input field.

Test: (this works only if the !ColorPickerPlugin is installed and disabled)

<!--
%STARTSECTION{code}%<script type="text/javascript" src="%PUBURL%/%SYSTEMWEB%/ColorPickerPlugin/farbtastic.js"></script> <link rel="stylesheet" href="%PUBURL%/%SYSTEMWEB%/ColorPickerPlugin/farbtastic.css" type="text/css" />%ENDSECTION{code}%
%STARTSECTION{picker}%<input type="text" id="%NAME%" name="%NAME%" value="%IF{ "defined VALUE" then="$percntVALUE$percnt" else="#808080" }%" size="%IF{ "defined SIZE" then="$percntSIZE$percnt" else="12" }%" %IF{ "defined EXTRA" then="$percntEXTRA$percnt" }% /> <div id="%NAME%picker"></div> <script type="text/javascript"> $(document).ready(function() { $('#%NAME%picker').farbtastic('#%NAME%'); }); </script>%ENDSECTION{picker}%
-->
%INCLUDE{ "%TOPIC%" section="code" }%
<form>
%INCLUDE{ "%TOPIC%" section="picker" NAME="demo_color" SIZE="12" VALUE="#ff6611" EXTRA="class=\"twikiInputField\"" }%
</form>

---++ Installation Instructions

This plugin is pre-installed. TWiki administrators can upgrade the plugin as needed on the TWiki server.
%TWISTY{
 mode="div"
 showlink="Show details %ICONURL{toggleopen}% "
 hidelink="Hide details %ICONURL{toggleclose}% "
}%

   * For an __automated installation__, run the [[%SCRIPTURL{configure}%][configure]] script and follow "Find More Extensions" in the in the __Extensions__ section.
      * See the [[http://twiki.org/cgi-bin/view/Plugins/BuildContribInstallationSupplement][installation supplement]] on TWiki.org for more information.

   * Or, follow these __manual installation__ steps:
      * Download the ZIP file from the extension home on twiki.org (see below).
      * Unzip ==%TOPIC%.zip== in your twiki installation directory.
      * Set the ownership of the extracted directories and files to the webserver user.
      * Install the dependencies (if any).

   * Plugin __configuration and testing__: 
      * Run the [[%SCRIPTURL{configure}%][configure]] script and enable the plugin in the __Plugins__ section.
      * Configure additional plugin settings in the __Extensions__ section if needed.
      * Test if the installation was successful using the examples provided.

%ENDTWISTY%

---++ Plugin Info

   * Set SHORTDESCRIPTION = Color picker for use in TWiki forms and TWiki applications

%TABLE{ tablewidth="100%" columnwidths="170," }%
|  Author: | TWiki:Main.PeterThoeny, [[http://twiki.org/][TWiki.org]] |
|  Copyright: | &copy; 2007 [[http://acko.net/about][Steven Wittens]], Acko.net for Farbtastic jQuery plugin %BR% &copy; 2010-2013 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki !ColorPickerPlugin |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Dependencies: | JQueryPlugin (pre-installed) |
|  Version: | 2013-02-15 |
%TWISTY{
 mode="div"
 showlink="Show Change History %ICONURL{toggleopen}%"
 hidelink="Hide Change History %ICONURL{toggleclose}%"
}%
%TABLE{ tablewidth="100%" columnwidths="170," }%
|  2013-02-15: | TWikibug:Item7148: Fix for color picker not working if initial value of TWiki forms field of type color is empty |
|  2013-01-09: | TWikibug:Item7091: Dependency clarification; use TWISTY for installation instructions |
|  2012-12-03: | TWikibug:Item7020: Add VarCOLORPICKER with category; doc improvements |
|  2012-08-11: | TWikibug:Item6837: Doc fixes; updated installation instructions |
|  2011-06-11: | TWikibug:Item6725: Change global package variables from "use vars" to "our" |
|  2010-11-30: | TWikibug:Item6610: Rewrite !ColorPickerContrib into !ColorPickerPlugin |
|  2010-11-27: | TWikibug:Item6609: In %SYSTEMWEB%.TWikiForms type table, automatically list the =color= form field type defined in this contrib -- TWiki:Main.PeterThoeny |
|  2010-11-26: | TWikibug:Item6606: Complete rewrite of contrib using [[http://acko.net/dev/farbtastic][Farbtastic color picker]] -- TWiki:Main.PeterThoeny |
|  2006-10-27: | Initial version of !ColorPickerContrib by TWiki:Main.FlavioCurti using Colorpicker by Norman Timmler (inlet media e.K., Hamburg, Germany) |
%ENDTWISTY%
%TABLE{ tablewidth="100%" columnwidths="170," }%
|  Home: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC% |
|  Feedback: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Dev |
|  Appraisal: | http://TWiki.org/cgi-bin/view/Plugins/%TOPIC%Appraisal |

__Related Topics:__ VarCOLORPICKER, %SYSTEMWEB%.TWikiPreferences, %SYSTEMWEB%.TWikiForms, %SYSTEMWEB%.TWikiPlugins

%META:FILEATTACHMENT{name="screenshot-edit.png" attachment="screenshot-edit.png" attr="h" comment="" date="1290756224" path="screenshot-edit.png" size="29633" user="TWikiContributor" version="1"}%
@


1.3
log
@buildrelease
@
text
@d1 1
a1 1
%META:TOPICINFO{author="TWikiContributor" date="1354609444" format="1.1" version="3"}%
d76 6
a81 1
__Note:__ You do not need to install anything on the browser to use this extension. The following instructions are for the administrator who installs the extension on the TWiki server.
d97 1
d103 1
d105 1
a105 1
|  Copyright: | &copy; 2007 [[http://acko.net/about][Steven Wittens]], Acko.net for Farbtastic jQuery plugin %BR% &copy; 2010-2012 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki !ColorPickerPlugin |
d107 10
a116 3
|  Dependencies: | <table border="1"><tr><th>Name</th><th>Version</th><th>Description</th></tr><tr><td align="left">TWiki::Plugins::JQueryPlugin</td><td align="left">&gt;=1.0</td><td align="left">Required; download from TWiki:Plugins/JQueryPlugin</td></tr></table> |
|  Version: | 2012-12-03 |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
d124 2
@


1.2
log
@buildrelease
@
text
@d1 1
a1 1
%META:TOPICINFO{author="TWikiContributor" date="1344723819" format="1.1" version="2"}%
d41 3
a43 1
This will show an HTML input field named "text_color" and a color picker tied to it. The =size=, =value= and =class= parameters are optional. Additional parameters can be supplied; they will be added to the HTML input field.
d101 1
a101 1
|  Version: | 2012-08-11 |
d103 1
d114 1
a114 1
__Related Topics:__ %SYSTEMWEB%.TWikiPreferences, %SYSTEMWEB%.TWikiForms, %SYSTEMWEB%.TWikiPlugins
@


1.1
log
@buildrelease
@
text
@d1 1
a1 1
%META:TOPICINFO{author="TWikiContributor" date="1307859243" format="1.1" version="1"}%
d26 1
a26 1
| =color= | %IF{ "'%BASETOPIC%'='TWikiForms'" then="<img src='%PUBURLPATH%/%WEB%/ColorPickerPlugin/screenshot-small.png' alt='screenshot-small' width='150' height='170' align='right' />" }% Single-line text box and a color picker to pick a color. The color can also be typed into the text box, such as =#123456=. %IF{ "'%BASETOPIC%'='TWikiForms'" then="[[ColorPickerPlugin][See details]]." }% | Text box width in number of characters | Initial (default) color |
a71 21
---++ Detailed Documentation


This package includes a small Perl module to make it easier to use the 
color picker from other TWiki plugins. This module includes the functions:


---+++ addHEAD

TWiki::Plugins::ColorPickerPlugin::addHEAD( )

=addHEAD= needs to be called before TWiki::Plugins::ColorPickerPlugin::renderForEdit
is called.


---+++ renderForEdit

TWiki::Plugins::ColorPickerPlugin::renderForEdit($name, $value, [, \%options]) -> $html



d74 1
a74 1
You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server where TWiki is running.
d76 1
a76 3
Like many other TWiki extensions, this module is shipped with a fully
automatic installer script written using the Build<nop>Contrib.
   * If you have TWiki 4.2 or later, you can install from the =configure= interface (Go to Plugins->Find More Extensions)
a77 10
   * If you have any problems, then you can still install manually from the command-line:
      1 Download one of the =.zip= or =.tgz= archives
      1 Unpack the archive in the root directory of your TWiki installation.
      1 Run the installer script ( =perl &lt;module&gt;_installer= )
      1 Run =configure= and enable the module, if it is a plugin.
      1 Repeat for any missing dependencies.
   * If you are *still* having problems, then instead of running the installer script:
      1 Make sure that the file permissions allow the webserver user to access all files.
      1 Check in any installed files that have existing =,v= files in your existing install (take care *not* to lock the files when you check in)
      1 Manually edit !LocalSite.cfg to set any configuration variables.
d79 10
a88 1
%IF{"defined 'SYSTEMWEB'" else="<div class='twikiAlert'>%X% WARNING: SYSTEMWEB is not defined in this TWiki. Please add these definitions to your %MAINWEB%.TWikiPreferences, if they are not already there:<br><pre>   * <nop>Set SYSTEMWEB = %<nop>TWIKIWEB%<br>   * <nop>Set USERSWEB = %<nop>MAINWEB%</pre></div>"}%
d95 2
a96 2
|  Author: | TWiki:Main.PeterThoeny, [[http://twiki.net][Twiki Inc]] |
|  Copyright: | &copy; 2007 [[http://acko.net/about][Steven Wittens]], Acko.net for Farbtastic jQuery plugin %BR% &copy; 2010-2011 TWiki:Main.PeterThoeny and TWiki:TWiki.TWikiContributor for TWiki !ColorPickerPlugin |
d99 1
a99 1
|  Version: | 21489 (2011-08-20) |
d101 1
@
