extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-23 08:23:12 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added tigra color-picker Ver. 1.1

Browse Source
This commit is contained in:
Ralf Becker 2004-05-26 07:21:00 +00:00
parent 6e30dedf98
commit 892a1b369e
7 changed files with 376 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
phpgwapi/js/picker/img/logo.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 660 B

BIN
phpgwapi/js/picker/img/pixel.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 67 B

BIN
phpgwapi/js/picker/img/sel.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 B

BIN
phpgwapi/js/picker/img/tcolorp.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

199
phpgwapi/js/picker/index.html Normal file
View File

@ -0,0 +1,199 @@
<html>
<head>
<title>JavaScript Color Picker - Demo</title>
<meta name="description" content="Tigra Color Picker - Free JavaScript widget that makes it easy for your visitors to fill out color value field(s) by selecting the color from a popup palette.">
<meta name="keywords" content="free JavaScript color picker, DHTML color picker, RGB, palette, pop-up, client side, web safe, grayscale, system colors, client side, netscape, explorer, IE, opera, cross browser, download">
<meta name="robots" content="index,follow">
<style>
a, A:link, a:visited, a:active
{color: #0000aa; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
A:hover
{color: #ff0000; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
p, tr, td, ul, li
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; font-size: 13px; margin: 0px; padding: 2px;}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
.intd
{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px;}
form
{margin: 5px;}
</style>
<!-- Link script file to the HTML document in the header -->
<script language=JavaScript src="picker.js"></script>
</head>
<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" bgcolor="white">
<!-- Header -->
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td width="350" rowspan="2"><img src="img/tcolorp.gif" width="350" height="80" border="0" alt="Tigra Color Picker"></td>
<td align="right" valign="top"><img src="img/logo.gif" width="178" height="30" border="0" alt="Softcomplex logo"></td>
</tr>
<tr>
<td align="right" valign="bottom" nowrap>
<b>
|&nbsp;<a href="http://www.softcomplex.com/index.html">About&nbsp;Us</a>&nbsp;
|&nbsp;<a href="http://www.softcomplex.com/services.html">Services</a>&nbsp;
|&nbsp;<a href="http://www.softcomplex.com/download.html">Download</a>&nbsp;
|&nbsp;<a href="http://www.softcomplex.com/order.html">Order</a>&nbsp;
|&nbsp;<a href="http://www.softcomplex.com/support.html">Support</a>&nbsp;
|
</b>
</td>
</tr>
<tr><td><img src="img/pixel.gif" width="1" height="5" border="0"></td></tr>
</table>
<!-- /Header -->
<!-- Body -->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4" width="100%"><tr><td>
<table cellpadding="0" cellspacing="1" width="100%" border="0">
<tr>
<td class="header1" valign="top">Tigra Color Picker - Demo #1</td>
<td class="header1" valign="top" width="100%">&nbsp;</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF">
<table cellpadding="3" cellspacing="1" border="0" width="100%">
<tr><td class="header2">Notes</td></tr>
<tr>
<td class="intd">
On the right hand side there is a form with Tigra Color Picker attached to the fields. Note, that you can have multiple pickers on the same page independently.
</td>
</tr>
<tr><td><img src="img/pixel.gif" width="250" height="1" border="0"></td></tr>
<tr><td class="header2">Advantages</td></tr>
<tr>
<td class="intd">
<p><b>Easy color input</b> - With Tigra Color Picker color input is simple and intuitive. Visitors can select any color from three available palettes with few clicks.
<p><b>Cost Saving Component</b> - Don't waste your time coding color convertors and validators all over again for each new project. Get the colors on server side ready for further processing.
<p><b>Professional Look</b> - Simple great looking improvement to the user interface of your web application. </p>
</td>
</tr>
<tr><td><img src="img/pixel.gif" width="1" height="1" border="0"></td></tr>
<tr><td class="header2">Links</td></tr>
<tr>
<td class="intd">
<b>
<ul>
<li><a href="http://www.softcomplex.com/products/tigra_color_picker/">Product Page</a>
<li><a href="http://www.softcomplex.com/products/tigra_color_picker/demo1.html">Demo Page</a>
<li><a href="http://www.softcomplex.com/forum/forumdisplay.php?fid=52">Product Forum</a>
<li><a href="http://www.softcomplex.com/download.html">More Downloads</a>
</ul>
</b>
</td>
</tr>
<tr><td><img src="img/pixel.gif" width="1" height="1" border="0"></td></tr>
<tr><td class="header2">Getting Started</td></tr>
<tr>
<td class="intd">
<p>The script is really easy to setup. To see an example just open this document with plain text editor and find comments. Didn't it help? Ask for help in <a href="http://www.softcomplex.com/forum/forumdisplay.php?fid=52">Product Forum</a>.
</td>
</tr>
<tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
<tr><td class="header2">Vote for the script</td></tr>
<tr>
<td class="intd">
If you like the script, please vote for it. We do appreciate this much.
<form action="http://www.scriptsearch.com/cgi-bin/rateit.cgi" method="post" target="_new">
<input type="hidden" name="ID" value="7340">
<a href="http://www.scriptsearch.com/details/7340.html"><b>ScriptSearch.com</b></a> :
<select name="rate" size="1" style="font-size:10px;">
<option value="5" selected>Excellent!</option>
<option value="4">Very Good</option>
<option value="3">Good</option>
<option value="2">Fair</option>
<option value="1">Poor</option>
</select>&nbsp;<input type="submit" value="Vote!" style="font-size:10px;">
</form>
<form action="http://www.hotscripts.com/cgi-bin/rate.cgi" method="POST" target="_new">
<input type=hidden name="ID" value="19922">
<a href="http://www.hotscripts.com/Detailed/19922.html"><b>HotScripts.com</b></a> :
<select name="rate" size="1" style="font-size:10px;">
<option selected value="5">Excellent!</option>
<option value="4">Very Good</option>
<option value="3">Good</option>
<option value="2">Fair</option>
<option value="1">Poor</option>
</select>&nbsp;<input type="submit" value="Rate It!" style="font-size:10px;">
</form>
</td>
</tr>
<tr><td><img src="pixel.gif" width="1" height="1" border="0"></td></tr>
</table>
</td>
<td valign="top" bgcolor="#FFFFFF" align="center">
<img src="img/pixel.gif" width="1" height="40" border="0"><br>
<table cellpadding="0" cellspacing="0" width="450" border="0"><tr><td bgcolor="#4682B4">
<table cellpadding="5" cellspacing="1" width="100%" border="0">
<tr><th colspan="2" bgcolor="#DBEAF5"><font face="tahoma, verdana" size="2">Try out the script with this demo form</font></td></tr>
<!-- Make sure you have valid named HTML form -->
<form name="tcp_test">
<tr>
<td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from Web safe palette:</font></td>
<td bgcolor="#ffffff" valign="top">
<!-- Add input box to the form -->
<input type="Text" name="input0">
<!--
Put icon by the input control.
Make it the link calling picker popup.
Specify input object reference as first parameter to the function and palete selection as second.
-->
<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input0'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="img/sel.gif"></a>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from Windows system palette:</font></td>
<td bgcolor="#ffffff" valign="top">
<input type="Text" name="input1">
<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input1'], 1)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="img/sel.gif"></a>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Select color from grayscale palette:</font> </td>
<td bgcolor="#ffffff" valign="top">
<input type="Text" name="input2">
<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input2'], 2)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="img/sel.gif"></a>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" valign="top" nowrap><font face="tahoma, verdana" size="2">Picker reads initial value from the input:</font></td>
<td bgcolor="#ffffff" valign="top">
<input type="Text" name="input3" value="#DBEAF5">
<a href="javascript:TCP.popup(document.forms['tcp_test'].elements['input3'], 1)"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="img/sel.gif"></a>
</td>
</tr>
</form>
<tr><td colspan="2" bgcolor="#DBEAF5">&nbsp;</td></tr>
</table>
</td></tr></table>
</td>
</tr>
</table>
</td></tr></table>
<!-- /Body -->
<!-- Footer -->
<table cellpadding="3" cellspacing="0" width="100%" border="0">
<tr bgcolor="#4682B4">
<td nowrap><font color="white">Copyright &copy;2003 SoftComplex Inc. All rights reserved.</font></td>
<td align="right">
| <a href="http://www.softcomplex.com/"><font color="white">company info</font></a>
| <a href="http://www.softcomplex.com/privacy_policy.html"><font color="white">privacy policy</font></a>
| <a href="http://www.softcomplex.com/support.html"><font color="white">contact us</font></a>
|
</td>
</tr>
</table>
<!-- /Footer -->
</body>
</html>

40
phpgwapi/js/picker/picker.html Normal file
View File

@ -0,0 +1,40 @@
<!--
Title: Tigra Color Picker
URL: http://www.softcomplex.com/products/tigra_color_picker/
Version: 1.1
Date: 06/26/2003 (mm/dd/yyyy)
Note: Permission given to use this script in ANY kind of applications if
header lines are left unchanged.
Note: Script consists of two files: picker.js and picker.html
-->
<html>
<head>
<title>Tigra Color Picker</title>
<style>
.bd { border : 1px inset InactiveBorder; }
.s { width:181 }
</style>
</head>
<body leftmargin="5" topmargin="5" marginheight="5" marginwidth="5" onload="P.C(P.initPalette)">
<table cellpadding=0 cellspacing=2 border=0 width=184>
<form>
<tr><td align="center">
<select name="type" onchange="P.C(this.selectedIndex)" class="s">
<option>Web Safe Palette</option>
<option>Windows System Palette</option>
<option>Grey Scale Palette</option>
</select>
</td></tr>
<tr><td align="center">
<script language="JavaScript">
var P = opener.TCP;
onload = "P.show(P.initPalette)";
document.forms[0].elements[0].selectedIndex = P.initPalette;
P.draw(window, document);
</script>
</td></tr>
</form>
</table>
</body>
</html>

137
phpgwapi/js/picker/picker.js Normal file
View File

@ -0,0 +1,137 @@
// Title: Tigra Color Picker
// URL: http://www.softcomplex.com/products/tigra_color_picker/
// Version: 1.1
// Date: 06/26/2003 (mm/dd/yyyy)
// Note: Permission given to use this script in ANY kind of applications if
// header lines are left unchanged.
// Note: Script consists of two files: picker.js and picker.html
var TCP = new TColorPicker();
function TCPopup(field, palette) {
this.field = field;
this.initPalette = !palette || palette > 2 ? 0 : palette;
var w = 194, h = 206,
move = screen ?
',left=' + ((screen.width - w) >> 1) + ',top=' + ((screen.height - h) >> 1) : '',
o_colWindow = window.open('picker.html', null, "help=no,status=no,scrollbars=no,resizable=no" + move + ",width=" + w + ",height=" + h + ",dependent=yes", true);
o_colWindow.opener = window;
o_colWindow.focus();
}
function TCBuildCell (R, G, B, w, h) {
return '<td bgcolor="#' + this.dec2hex((R << 16) + (G << 8) + B) + '"><a href="javascript:P.S(\'' + this.dec2hex((R << 16) + (G << 8) + B) + '\')" onmouseover="P.P(\'' + this.dec2hex((R << 16) + (G << 8) + B) + '\')"><img src="pixel.gif" width="' + w + '" height="' + h + '" border="0"></a></td>';
}
function TCSelect(c) {
this.field.value = '#' + c.toUpperCase();
this.win.close();
}
function TCPaint(c, b_noPref) {
c = (b_noPref ? '' : '#') + c.toUpperCase();
if (this.o_samp)
this.o_samp.innerHTML = '<font face=Tahoma size=2>' + c +' <font color=white>' + c + '</font></font>'
if(this.doc.layers)
this.sample.bgColor = c;
else {
if (this.sample.backgroundColor != null) this.sample.backgroundColor = c;
else if (this.sample.background != null) this.sample.background = c;
}
}
function TCGenerateSafe() {
var s = '';
for (j = 0; j < 12; j ++) {
s += "<tr>";
for (k = 0; k < 3; k ++)
for (i = 0; i <= 5; i ++)
s += this.bldCell(k * 51 + (j % 2) * 51 * 3, Math.floor(j / 2) * 51, i * 51, 8, 10);
s += "</tr>";
}
return s;
}
function TCGenerateWind() {
var s = '';
for (j = 0; j < 12; j ++) {
s += "<tr>";
for (k = 0; k < 3; k ++)
for (i = 0; i <= 5; i++)
s += this.bldCell(i * 51, k * 51 + (j % 2) * 51 * 3, Math.floor(j / 2) * 51, 8, 10);
s += "</tr>";
}
return s
}
function TCGenerateGray() {
var s = '';
for (j = 0; j <= 15; j ++) {
s += "<tr>";
for (k = 0; k <= 15; k ++) {
g = Math.floor((k + j * 16) % 256);
s += this.bldCell(g, g, g, 9, 7);
}
s += '</tr>';
}
return s
}
function TCDec2Hex(v) {
v = v.toString(16);
for(; v.length < 6; v = '0' + v);
return v;
}
function TCChgMode(v) {
for (var k in this.divs) this.hide(k);
this.show(v);
}
function TColorPicker(field) {
this.build0 = TCGenerateSafe;
this.build1 = TCGenerateWind;
this.build2 = TCGenerateGray;
this.show = document.layers ?
function (div) { this.divs[div].visibility = 'show' } :
function (div) { this.divs[div].visibility = 'visible' };
this.hide = document.layers ?
function (div) { this.divs[div].visibility = 'hide' } :
function (div) { this.divs[div].visibility = 'hidden' };
// event handlers
this.C = TCChgMode;
this.S = TCSelect;
this.P = TCPaint;
this.popup = TCPopup;
this.draw = TCDraw;
this.dec2hex = TCDec2Hex;
this.bldCell = TCBuildCell;
this.divs = [];
}
function TCDraw(o_win, o_doc) {
this.win = o_win;
this.doc = o_doc;
var
s_tag_openT = o_doc.layers ?
'layer visibility=hidden top=54 left=5 width=182' :
'div style=visibility:hidden;position:absolute;left:6px;top:54px;width:182px;height:0',
s_tag_openS = o_doc.layers ? 'layer top=32 left=6' : 'div',
s_tag_close = o_doc.layers ? 'layer' : 'div'
this.doc.write('<' + s_tag_openS + ' id=sam name=sam><table cellpadding=0 cellspacing=0 border=1 width=181 align=center class=bd><tr><td align=center height=18><div id="samp"><font face=Tahoma size=2>sample <font color=white>sample</font></font></div></td></tr></table></' + s_tag_close + '>');
this.sample = o_doc.layers ? o_doc.layers['sam'] :
o_doc.getElementById ? o_doc.getElementById('sam').style : o_doc.all['sam'].style
for (var k = 0; k < 3; k ++) {
this.doc.write('<' + s_tag_openT + ' id="p' + k + '" name="p' + k + '"><table cellpadding=0 cellspacing=0 border=1 align=center>' + this['build' + k]() + '</table></' + s_tag_close + '>');
this.divs[k] = o_doc.layers
? o_doc.layers['p' + k] : o_doc.all
? o_doc.all['p' + k].style : o_doc.getElementById('p' + k).style
}
if (!o_doc.layers && o_doc.body.innerHTML)
this.o_samp = o_doc.all
? o_doc.all.samp : o_doc.getElementById('samp');
this.C(this.initPalette);
if (this.field.value) this.P(this.field.value, true)
}