[pLog-svn] r1148 - in plugins/trunk/blogtimes: js/colorpicker
js/colorpicker/img templates
mark at devel.plogworld.net
mark at devel.plogworld.net
Sun Feb 20 16:34:57 GMT 2005
Author: mark
Date: 2005-02-20 16:34:56 +0000 (Sun, 20 Feb 2005)
New Revision: 1148
Removed:
plugins/trunk/blogtimes/js/colorpicker/img/logo.gif
plugins/trunk/blogtimes/js/colorpicker/img/pixel.gif
plugins/trunk/blogtimes/js/colorpicker/img/tcolorp.gif
plugins/trunk/blogtimes/js/colorpicker/picker.html
Modified:
plugins/trunk/blogtimes/js/colorpicker/picker.js
plugins/trunk/blogtimes/templates/blogtimes.template
Log:
Improve coloe picker in Blogtimes admin UI.
Deleted: plugins/trunk/blogtimes/js/colorpicker/img/logo.gif
===================================================================
(Binary files differ)
Deleted: plugins/trunk/blogtimes/js/colorpicker/img/pixel.gif
===================================================================
(Binary files differ)
Deleted: plugins/trunk/blogtimes/js/colorpicker/img/tcolorp.gif
===================================================================
(Binary files differ)
Deleted: plugins/trunk/blogtimes/js/colorpicker/picker.html
===================================================================
--- plugins/trunk/blogtimes/js/colorpicker/picker.html 2005-02-20 06:41:40 UTC (rev 1147)
+++ plugins/trunk/blogtimes/js/colorpicker/picker.html 2005-02-20 16:34:56 UTC (rev 1148)
@@ -1,41 +0,0 @@
-<!--
-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>
- <option>Mac OS 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>
Modified: plugins/trunk/blogtimes/js/colorpicker/picker.js
===================================================================
--- plugins/trunk/blogtimes/js/colorpicker/picker.js 2005-02-20 06:41:40 UTC (rev 1147)
+++ plugins/trunk/blogtimes/js/colorpicker/picker.js 2005-02-20 16:34:56 UTC (rev 1148)
@@ -1,170 +1,659 @@
-// 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();
-var base_url = "plugins/blogtimes/js/colorpicker/";
-
-function TCPopup(field, palette) {
- this.field = field;
- this.initPalette = !palette || palette > 3 ? 0 : palette;
- var w = 194, h = 240,
- move = screen ?
- ',left=' + ((screen.width - w) >> 1) + ',top=' + ((screen.height - h) >> 1) : '',
- o_colWindow = window.open(base_url + '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 TCGenerateMac() {
- var s = '';
- var c = 0,n = 1;
- var r,g,b;
- for (j = 0; j < 15; j ++) {
- s += "<tr>";
- for (k = 0; k < 3; k ++)
- for (i = 0; i <= 5; i++){
- if(j<12){
- s += this.bldCell( 255-(Math.floor(j / 2) * 51), 255-(k * 51 + (j % 2) * 51 * 3),255-(i * 51), 8, 10);
- }else{
- if(n<=14){
- r = 255-(n * 17);
- g=b=0;
- }else if(n>14 && n<=28){
- g = 255-((n-14) * 17);
- r=b=0;
- }else if(n>28 && n<=42){
- b = 255-((n-28) * 17);
- r=g=0;
- }else{
- r=g=b=255-((n-42) * 17);
- }
- s += this.bldCell( r, g,b, 8, 10);
- n++;
- }
- }
- 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.build3 = TCGenerateMac;
- 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 < 4; 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)
-}
\ No newline at end of file
+// ===================================================================
+// Author: Matt Kruse <matt at mattkruse.com>
+// WWW: http://www.mattkruse.com/
+//
+// NOTICE: You may use this code for any purpose, commercial or
+// private, without any further permission from the author. You may
+// remove this notice from your final code if you wish, however it is
+// appreciated by the author if at least my web site address is kept.
+//
+// You may *NOT* re-distribute this code in any way except through its
+// use. That means, you can include it in your product, or your web
+// site, or any other form where the code is actually being used. You
+// may not put the plain javascript up on your site for download or
+// include it in your javascript libraries for download.
+// If you wish to share this code with others, please just point them
+// to the URL instead.
+// Please DO NOT link directly to my .js files from your site. Copy
+// the files to your server and use them there. Thank you.
+// ===================================================================
+
+
+/* SOURCE FILE: AnchorPosition.js */
+
+/*
+AnchorPosition.js
+Author: Matt Kruse
+Last modified: 10/11/02
+
+DESCRIPTION: These functions find the position of an <A> tag in a document,
+so other elements can be positioned relative to it.
+
+COMPATABILITY: Netscape 4.x,6.x,Mozilla, IE 5.x,6.x on Windows. Some small
+positioning errors - usually with Window positioning - occur on the
+Macintosh platform.
+
+FUNCTIONS:
+getAnchorPosition(anchorname)
+ Returns an Object() having .x and .y properties of the pixel coordinates
+ of the upper-left corner of the anchor. Position is relative to the PAGE.
+
+getAnchorWindowPosition(anchorname)
+ Returns an Object() having .x and .y properties of the pixel coordinates
+ of the upper-left corner of the anchor, relative to the WHOLE SCREEN.
+
+NOTES:
+
+1) For popping up separate browser windows, use getAnchorWindowPosition.
+ Otherwise, use getAnchorPosition
+
+2) Your anchor tag MUST contain both NAME and ID attributes which are the
+ same. For example:
+ <A NAME="test" ID="test"> </A>
+
+3) There must be at least a space between <A> </A> for IE5.5 to see the
+ anchor tag correctly. Do not do <A></A> with no space.
+*/
+
+// getAnchorPosition(anchorname)
+// This function returns an object having .x and .y properties which are the coordinates
+// of the named anchor, relative to the page.
+function getAnchorPosition(anchorname) {
+ // This function will return an Object with x and y properties
+ var useWindow=false;
+ var coordinates=new Object();
+ var x=0,y=0;
+ // Browser capability sniffing
+ var use_gebi=false, use_css=false, use_layers=false;
+ if (document.getElementById) { use_gebi=true; }
+ else if (document.all) { use_css=true; }
+ else if (document.layers) { use_layers=true; }
+ // Logic to find position
+ if (use_gebi && document.all) {
+ x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
+ y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
+ }
+ else if (use_gebi) {
+ var o=document.getElementById(anchorname);
+ x=AnchorPosition_getPageOffsetLeft(o);
+ y=AnchorPosition_getPageOffsetTop(o);
+ }
+ else if (use_css) {
+ x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);
+ y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);
+ }
+ else if (use_layers) {
+ var found=0;
+ for (var i=0; i<document.anchors.length; i++) {
+ if (document.anchors[i].name==anchorname) { found=1; break; }
+ }
+ if (found==0) {
+ coordinates.x=0; coordinates.y=0; return coordinates;
+ }
+ x=document.anchors[i].x;
+ y=document.anchors[i].y;
+ }
+ else {
+ coordinates.x=0; coordinates.y=0; return coordinates;
+ }
+ coordinates.x=x;
+ coordinates.y=y;
+ return coordinates;
+ }
+
+// getAnchorWindowPosition(anchorname)
+// This function returns an object having .x and .y properties which are the coordinates
+// of the named anchor, relative to the window
+function getAnchorWindowPosition(anchorname) {
+ var coordinates=getAnchorPosition(anchorname);
+ var x=0;
+ var y=0;
+ if (document.getElementById) {
+ if (isNaN(window.screenX)) {
+ x=coordinates.x-document.body.scrollLeft+window.screenLeft;
+ y=coordinates.y-document.body.scrollTop+window.screenTop;
+ }
+ else {
+ x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
+ y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;
+ }
+ }
+ else if (document.all) {
+ x=coordinates.x-document.body.scrollLeft+window.screenLeft;
+ y=coordinates.y-document.body.scrollTop+window.screenTop;
+ }
+ else if (document.layers) {
+ x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;
+ y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;
+ }
+ coordinates.x=x;
+ coordinates.y=y;
+ return coordinates;
+ }
+
+// Functions for IE to get position of an object
+function AnchorPosition_getPageOffsetLeft (el) {
+ var ol=el.offsetLeft;
+ while ((el=el.offsetParent) != null) { ol += el.offsetLeft; }
+ return ol;
+ }
+function AnchorPosition_getWindowOffsetLeft (el) {
+ return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;
+ }
+function AnchorPosition_getPageOffsetTop (el) {
+ var ot=el.offsetTop;
+ while((el=el.offsetParent) != null) { ot += el.offsetTop; }
+ return ot;
+ }
+function AnchorPosition_getWindowOffsetTop (el) {
+ return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;
+ }
+
+/* SOURCE FILE: PopupWindow.js */
+
+/*
+PopupWindow.js
+Author: Matt Kruse
+Last modified: 02/16/04
+
+DESCRIPTION: This object allows you to easily and quickly popup a window
+in a certain place. The window can either be a DIV or a separate browser
+window.
+
+COMPATABILITY: Works with Netscape 4.x, 6.x, IE 5.x on Windows. Some small
+positioning errors - usually with Window positioning - occur on the
+Macintosh platform. Due to bugs in Netscape 4.x, populating the popup
+window with <STYLE> tags may cause errors.
+
+USAGE:
+// Create an object for a WINDOW popup
+var win = new PopupWindow();
+
+// Create an object for a DIV window using the DIV named 'mydiv'
+var win = new PopupWindow('mydiv');
+
+// Set the window to automatically hide itself when the user clicks
+// anywhere else on the page except the popup
+win.autoHide();
+
+// Show the window relative to the anchor name passed in
+win.showPopup(anchorname);
+
+// Hide the popup
+win.hidePopup();
+
+// Set the size of the popup window (only applies to WINDOW popups
+win.setSize(width,height);
+
+// Populate the contents of the popup window that will be shown. If you
+// change the contents while it is displayed, you will need to refresh()
+win.populate(string);
+
+// set the URL of the window, rather than populating its contents
+// manually
+win.setUrl("http://www.site.com/");
+
+// Refresh the contents of the popup
+win.refresh();
+
+// Specify how many pixels to the right of the anchor the popup will appear
+win.offsetX = 50;
+
+// Specify how many pixels below the anchor the popup will appear
+win.offsetY = 100;
+
+NOTES:
+1) Requires the functions in AnchorPosition.js
+
+2) Your anchor tag MUST contain both NAME and ID attributes which are the
+ same. For example:
+ <A NAME="test" ID="test"> </A>
+
+3) There must be at least a space between <A> </A> for IE5.5 to see the
+ anchor tag correctly. Do not do <A></A> with no space.
+
+4) When a PopupWindow object is created, a handler for 'onmouseup' is
+ attached to any event handler you may have already defined. Do NOT define
+ an event handler for 'onmouseup' after you define a PopupWindow object or
+ the autoHide() will not work correctly.
+*/
+
+// Set the position of the popup window based on the anchor
+function PopupWindow_getXYPosition(anchorname) {
+ var coordinates;
+ if (this.type == "WINDOW") {
+ coordinates = getAnchorWindowPosition(anchorname);
+ }
+ else {
+ coordinates = getAnchorPosition(anchorname);
+ }
+ this.x = coordinates.x;
+ this.y = coordinates.y;
+ }
+// Set width/height of DIV/popup window
+function PopupWindow_setSize(width,height) {
+ this.width = width;
+ this.height = height;
+ }
+// Fill the window with contents
+function PopupWindow_populate(contents) {
+ this.contents = contents;
+ this.populated = false;
+ }
+// Set the URL to go to
+function PopupWindow_setUrl(url) {
+ this.url = url;
+ }
+// Set the window popup properties
+function PopupWindow_setWindowProperties(props) {
+ this.windowProperties = props;
+ }
+// Refresh the displayed contents of the popup
+function PopupWindow_refresh() {
+ if (this.divName != null) {
+ // refresh the DIV object
+ if (this.use_gebi) {
+ document.getElementById(this.divName).innerHTML = this.contents;
+ }
+ else if (this.use_css) {
+ document.all[this.divName].innerHTML = this.contents;
+ }
+ else if (this.use_layers) {
+ var d = document.layers[this.divName];
+ d.document.open();
+ d.document.writeln(this.contents);
+ d.document.close();
+ }
+ }
+ else {
+ if (this.popupWindow != null && !this.popupWindow.closed) {
+ if (this.url!="") {
+ this.popupWindow.location.href=this.url;
+ }
+ else {
+ this.popupWindow.document.open();
+ this.popupWindow.document.writeln(this.contents);
+ this.popupWindow.document.close();
+ }
+ this.popupWindow.focus();
+ }
+ }
+ }
+// Position and show the popup, relative to an anchor object
+function PopupWindow_showPopup(anchorname) {
+ this.getXYPosition(anchorname);
+ this.x += this.offsetX;
+ this.y += this.offsetY;
+ if (!this.populated && (this.contents != "")) {
+ this.populated = true;
+ this.refresh();
+ }
+ if (this.divName != null) {
+ // Show the DIV object
+ if (this.use_gebi) {
+ document.getElementById(this.divName).style.left = this.x + "px";
+ document.getElementById(this.divName).style.top = this.y;
+ document.getElementById(this.divName).style.visibility = "visible";
+ }
+ else if (this.use_css) {
+ document.all[this.divName].style.left = this.x;
+ document.all[this.divName].style.top = this.y;
+ document.all[this.divName].style.visibility = "visible";
+ }
+ else if (this.use_layers) {
+ document.layers[this.divName].left = this.x;
+ document.layers[this.divName].top = this.y;
+ document.layers[this.divName].visibility = "visible";
+ }
+ }
+ else {
+ if (this.popupWindow == null || this.popupWindow.closed) {
+ // If the popup window will go off-screen, move it so it doesn't
+ if (this.x<0) { this.x=0; }
+ if (this.y<0) { this.y=0; }
+ if (screen && screen.availHeight) {
+ if ((this.y + this.height) > screen.availHeight) {
+ this.y = screen.availHeight - this.height;
+ }
+ }
+ if (screen && screen.availWidth) {
+ if ((this.x + this.width) > screen.availWidth) {
+ this.x = screen.availWidth - this.width;
+ }
+ }
+ var avoidAboutBlank = window.opera || ( document.layers && !navigator.mimeTypes['*'] ) || navigator.vendor == 'KDE' || ( document.childNodes && !document.all && !navigator.taintEnabled );
+ this.popupWindow = window.open(avoidAboutBlank?"":"about:blank","window_"+anchorname,this.windowProperties+",width="+this.width+",height="+this.height+",screenX="+this.x+",left="+this.x+",screenY="+this.y+",top="+this.y+"");
+ }
+ this.refresh();
+ }
+ }
+// Hide the popup
+function PopupWindow_hidePopup() {
+ if (this.divName != null) {
+ if (this.use_gebi) {
+ document.getElementById(this.divName).style.visibility = "hidden";
+ }
+ else if (this.use_css) {
+ document.all[this.divName].style.visibility = "hidden";
+ }
+ else if (this.use_layers) {
+ document.layers[this.divName].visibility = "hidden";
+ }
+ }
+ else {
+ if (this.popupWindow && !this.popupWindow.closed) {
+ this.popupWindow.close();
+ this.popupWindow = null;
+ }
+ }
+ }
+// Pass an event and return whether or not it was the popup DIV that was clicked
+function PopupWindow_isClicked(e) {
+ if (this.divName != null) {
+ if (this.use_layers) {
+ var clickX = e.pageX;
+ var clickY = e.pageY;
+ var t = document.layers[this.divName];
+ if ((clickX > t.left) && (clickX < t.left+t.clip.width) && (clickY > t.top) && (clickY < t.top+t.clip.height)) {
+ return true;
+ }
+ else { return false; }
+ }
+ else if (document.all) { // Need to hard-code this to trap IE for error-handling
+ var t = window.event.srcElement;
+ while (t.parentElement != null) {
+ if (t.id==this.divName) {
+ return true;
+ }
+ t = t.parentElement;
+ }
+ return false;
+ }
+ else if (this.use_gebi && e) {
+ var t = e.originalTarget;
+ while (t.parentNode != null) {
+ if (t.id==this.divName) {
+ return true;
+ }
+ t = t.parentNode;
+ }
+ return false;
+ }
+ return false;
+ }
+ return false;
+ }
+
+// Check an onMouseDown event to see if we should hide
+function PopupWindow_hideIfNotClicked(e) {
+ if (this.autoHideEnabled && !this.isClicked(e)) {
+ this.hidePopup();
+ }
+ }
+// Call this to make the DIV disable automatically when mouse is clicked outside it
+function PopupWindow_autoHide() {
+ this.autoHideEnabled = true;
+ }
+// This global function checks all PopupWindow objects onmouseup to see if they should be hidden
+function PopupWindow_hidePopupWindows(e) {
+ for (var i=0; i<popupWindowObjects.length; i++) {
+ if (popupWindowObjects[i] != null) {
+ var p = popupWindowObjects[i];
+ p.hideIfNotClicked(e);
+ }
+ }
+ }
+// Run this immediately to attach the event listener
+function PopupWindow_attachListener() {
+ if (document.layers) {
+ document.captureEvents(Event.MOUSEUP);
+ }
+ window.popupWindowOldEventListener = document.onmouseup;
+ if (window.popupWindowOldEventListener != null) {
+ document.onmouseup = new Function("window.popupWindowOldEventListener(); PopupWindow_hidePopupWindows();");
+ }
+ else {
+ document.onmouseup = PopupWindow_hidePopupWindows;
+ }
+ }
+// CONSTRUCTOR for the PopupWindow object
+// Pass it a DIV name to use a DHTML popup, otherwise will default to window popup
+function PopupWindow() {
+ if (!window.popupWindowIndex) { window.popupWindowIndex = 0; }
+ if (!window.popupWindowObjects) { window.popupWindowObjects = new Array(); }
+ if (!window.listenerAttached) {
+ window.listenerAttached = true;
+ PopupWindow_attachListener();
+ }
+ this.index = popupWindowIndex++;
+ popupWindowObjects[this.index] = this;
+ this.divName = null;
+ this.popupWindow = null;
+ this.width=0;
+ this.height=0;
+ this.populated = false;
+ this.visible = false;
+ this.autoHideEnabled = false;
+
+ this.contents = "";
+ this.url="";
+ this.windowProperties="toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no";
+ if (arguments.length>0) {
+ this.type="DIV";
+ this.divName = arguments[0];
+ }
+ else {
+ this.type="WINDOW";
+ }
+ this.use_gebi = false;
+ this.use_css = false;
+ this.use_layers = false;
+ if (document.getElementById) { this.use_gebi = true; }
+ else if (document.all) { this.use_css = true; }
+ else if (document.layers) { this.use_layers = true; }
+ else { this.type = "WINDOW"; }
+ this.offsetX = 0;
+ this.offsetY = 0;
+ // Method mappings
+ this.getXYPosition = PopupWindow_getXYPosition;
+ this.populate = PopupWindow_populate;
+ this.setUrl = PopupWindow_setUrl;
+ this.setWindowProperties = PopupWindow_setWindowProperties;
+ this.refresh = PopupWindow_refresh;
+ this.showPopup = PopupWindow_showPopup;
+ this.hidePopup = PopupWindow_hidePopup;
+ this.setSize = PopupWindow_setSize;
+ this.isClicked = PopupWindow_isClicked;
+ this.autoHide = PopupWindow_autoHide;
+ this.hideIfNotClicked = PopupWindow_hideIfNotClicked;
+ }
+
+/* SOURCE FILE: ColorPicker2.js */
+
+/*
+Last modified: 02/24/2003
+
+DESCRIPTION: This widget is used to select a color, in hexadecimal #RRGGBB
+form. It uses a color "swatch" to display the standard 216-color web-safe
+palette. The user can then click on a color to select it.
+
+COMPATABILITY: See notes in AnchorPosition.js and PopupWindow.js.
+Only the latest DHTML-capable browsers will show the color and hex values
+at the bottom as your mouse goes over them.
+
+USAGE:
+// Create a new ColorPicker object using DHTML popup
+var cp = new ColorPicker();
+
+// Create a new ColorPicker object using Window Popup
+var cp = new ColorPicker('window');
+
+// Add a link in your page to trigger the popup. For example:
+<A HREF="#" onClick="cp.show('pick');return false;" NAME="pick" ID="pick">Pick</A>
+
+// Or use the built-in "select" function to do the dirty work for you:
+<A HREF="#" onClick="cp.select(document.forms[0].color,'pick');return false;" NAME="pick" ID="pick">Pick</A>
+
+// If using DHTML popup, write out the required DIV tag near the bottom
+// of your page.
+<SCRIPT LANGUAGE="JavaScript">cp.writeDiv()</SCRIPT>
+
+// Write the 'pickColor' function that will be called when the user clicks
+// a color and do something with the value. This is only required if you
+// want to do something other than simply populate a form field, which is
+// what the 'select' function will give you.
+function pickColor(color) {
+ field.value = color;
+ }
+
+NOTES:
+1) Requires the functions in AnchorPosition.js and PopupWindow.js
+
+2) Your anchor tag MUST contain both NAME and ID attributes which are the
+ same. For example:
+ <A NAME="test" ID="test"> </A>
+
+3) There must be at least a space between <A> </A> for IE5.5 to see the
+ anchor tag correctly. Do not do <A></A> with no space.
+
+4) When a ColorPicker object is created, a handler for 'onmouseup' is
+ attached to any event handler you may have already defined. Do NOT define
+ an event handler for 'onmouseup' after you define a ColorPicker object or
+ the color picker will not hide itself correctly.
+*/
+ColorPicker_targetInput = null;
+function ColorPicker_writeDiv() {
+ document.writeln("<DIV ID=\"colorPickerDiv\" STYLE=\"position:absolute;visibility:hidden;\"> </DIV>");
+ }
+
+function ColorPicker_show(anchorname) {
+ this.showPopup(anchorname);
+ }
+
+function ColorPicker_pickColor(color,obj) {
+ obj.hidePopup();
+ pickColor(color);
+ }
+
+// A Default "pickColor" function to accept the color passed back from popup.
+// User can over-ride this with their own function.
+function pickColor(color) {
+ if (ColorPicker_targetInput==null) {
+ alert("Target Input is null, which means you either didn't use the 'select' function or you have no defined your own 'pickColor' function to handle the picked color!");
+ return;
+ }
+ ColorPicker_targetInput.value = color;
+ ColorPicker_targetInput.style.backgroundColor = color;
+ }
+
+// This function is the easiest way to popup the window, select a color, and
+// have the value populate a form field, which is what most people want to do.
+function ColorPicker_select(inputobj,linkname) {
+ if (inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea") {
+ alert("colorpicker.select: Input object passed is not a valid form input object");
+ window.ColorPicker_targetInput=null;
+ return;
+ }
+ window.ColorPicker_targetInput = inputobj;
+ this.show(linkname);
+ }
+
+// This function runs when you move your mouse over a color block, if you have a newer browser
+function ColorPicker_highlightColor(c) {
+ var thedoc = (arguments.length>1)?arguments[1]:window.document;
+ var d = thedoc.getElementById("colorPickerSelectedColor");
+ d.style.backgroundColor = c;
+ d = thedoc.getElementById("colorPickerSelectedColorValue");
+ d.innerHTML = c;
+ }
+
+function ColorPicker() {
+ var windowMode = false;
+ // Create a new PopupWindow object
+ if (arguments.length==0) {
+ var divname = "colorPickerDiv";
+ }
+ else if (arguments[0] == "window") {
+ var divname = '';
+ windowMode = true;
+ }
+ else {
+ var divname = arguments[0];
+ }
+
+ if (divname != "") {
+ var cp = new PopupWindow(divname);
+ }
+ else {
+ var cp = new PopupWindow();
+ cp.setSize(225,250);
+ }
+
+ // Object variables
+ cp.currentValue = "#FFFFFF";
+
+ // Method Mappings
+ cp.writeDiv = ColorPicker_writeDiv;
+ cp.highlightColor = ColorPicker_highlightColor;
+ cp.show = ColorPicker_show;
+ cp.select = ColorPicker_select;
+
+ // Code to populate color picker window
+ var colors = new Array("#000000","#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099","#3300CC",
+ "#3300FF","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990000","#990033","#990066","#990099",
+ "#9900CC","#9900FF","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066",
+ "#FF0099","#FF00CC","#FF00FF","#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333",
+ "#333366","#333399","#3333CC","#3333FF","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300",
+ "#993333","#993366","#993399","#9933CC","#9933FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF",
+ "#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#006600","#006633","#006666","#006699","#0066CC",
+ "#0066FF","#336600","#336633","#336666","#336699","#3366CC","#3366FF","#666600","#666633","#666666","#666699",
+ "#6666CC","#6666FF","#996600","#996633","#996666","#996699","#9966CC","#9966FF","#CC6600","#CC6633","#CC6666",
+ "#CC6699","#CC66CC","#CC66FF","#FF6600","#FF6633","#FF6666","#FF6699","#FF66CC","#FF66FF","#009900","#009933",
+ "#009966","#009999","#0099CC","#0099FF","#339900","#339933","#339966","#339999","#3399CC","#3399FF","#669900",
+ "#669933","#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999","#9999CC","#9999FF",
+ "#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","#FF9999","#FF99CC",
+ "#FF99FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00","#33CC33","#33CC66","#33CC99",
+ "#33CCCC","#33CCFF","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66",
+ "#99CC99","#99CCCC","#99CCFF","#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33",
+ "#FFCC66","#FFCC99","#FFCCCC","#FFCCFF","#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00",
+ "#33FF33","#33FF66","#33FF99","#33FFCC","#33FFFF","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF",
+ "#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF","#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC",
+ "#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF");
+ var total = colors.length;
+ var width = 18;
+ var cp_contents = "";
+ var windowRef = (windowMode)?"window.opener.":"";
+ if (windowMode) {
+ cp_contents += "<HTML><HEAD><TITLE>Select Color</TITLE></HEAD>";
+ cp_contents += "<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0><CENTER>";
+ }
+ cp_contents += "<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0>";
+ var use_highlight = (document.getElementById || document.all)?true:false;
+ for (var i=0; i<total; i++) {
+ if ((i % width) == 0) { cp_contents += "<TR>"; }
+ if (use_highlight) { var mo = 'onMouseOver="'+windowRef+'ColorPicker_highlightColor(\''+colors[i]+'\',window.document)"'; }
+ else { mo = ""; }
+ cp_contents += '<TD BGCOLOR="'+colors[i]+'"><FONT SIZE="-3"><A HREF="#" onClick="'+windowRef+'ColorPicker_pickColor(\''+colors[i]+'\','+windowRef+'window.popupWindowObjects['+cp.index+']);return false;" '+mo+' STYLE="text-decoration:none;"> </A></FONT></TD>';
+ if ( ((i+1)>=total) || (((i+1) % width) == 0)) {
+ cp_contents += "</TR>";
+ }
+ }
+ // If the browser supports dynamically changing TD cells, add the fancy stuff
+ if (document.getElementById) {
+ var width1 = Math.floor(width/2);
+ var width2 = width = width1;
+ cp_contents += "<TR><TD COLSPAN='"+width1+"' BGCOLOR='#ffffff' ID='colorPickerSelectedColor'> </TD><TD COLSPAN='"+width2+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";
+ }
+ cp_contents += "</TABLE>";
+ if (windowMode) {
+ cp_contents += "</CENTER></BODY></HTML>";
+ }
+ // end populate code
+
+ // Write the contents to the popup object
+ cp.populate(cp_contents+"\n");
+ // Move the table down a bit so you can see it
+ cp.offsetY = 25;
+ cp.autoHide();
+ return cp;
+ }
Modified: plugins/trunk/blogtimes/templates/blogtimes.template
===================================================================
--- plugins/trunk/blogtimes/templates/blogtimes.template 2005-02-20 06:41:40 UTC (rev 1147)
+++ plugins/trunk/blogtimes/templates/blogtimes.template 2005-02-20 16:34:56 UTC (rev 1148)
@@ -1,6 +1,9 @@
{include file="$admintemplatepath/header.template"}
{include file="$admintemplatepath/navigation.template" showOpt=BlogTimes title=$locale->tr("blogtimes_plugin")}
<script type="text/javascript" src="plugins/blogtimes/js/colorpicker/picker.js"></script>
+<SCRIPT type="text/javascript">
+var cp = new ColorPicker('window');
+</SCRIPT>
<form name="blogTimesPluginConfig" method="post">
<fieldset class="inputField">
<legend>{$locale->tr("label_configuration")}</legend>
@@ -18,48 +21,48 @@
<label for="backColor">{$locale->tr("label_backcolor")}</label>
<span class="required">*</span>
<div class="formHelp">{$locale->tr("blogtimes_backcolor")}</div>
- <input style="width:100px;" class="text" type="text" name="backColor" id="backColor" value="{$backColor}" width="10" />
- <a href="javascript:TCP.popup(document.forms['blogTimesPluginConfig'].elements['backColor'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="plugins/blogtimes/js/colorpicker/img/sel.gif"></a>
+ <input style="width:100px; background:{$backColor};" class="text" type="text" name="backColor" id="backColor" value="{$backColor}" width="10" />
+ <A HREF="#" onClick="cp.select(document.forms['blogTimesPluginConfig'].elements['backColor'],'pickBackColor');return false;" NAME="pickBackColor" ID="pickBackColor"><img width="15" height="13" border="0" alt="Pick" src="plugins/blogtimes/js/colorpicker/img/sel.gif" /></A>
</div>
<div class="field">
<label for="boxColor">{$locale->tr("label_boxcolor")}</label>
<span class="required">*</span>
<div class="formHelp">{$locale->tr("blogtimes_boxcolor")}</div>
- <input style="width:100px;" class="text" type="text" name="boxColor" id="boxColor" value="{$boxColor}" width="10" />
- <a href="javascript:TCP.popup(document.forms['blogTimesPluginConfig'].elements['boxColor'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="plugins/blogtimes/js/colorpicker/img/sel.gif"></a>
+ <input style="width:100px; background:{$boxColor};" class="text" type="text" name="boxColor" id="boxColor" value="{$boxColor}" width="10" />
+ <A HREF="#" onClick="cp.select(document.forms['blogTimesPluginConfig'].elements['boxColor'],'pickBoxColor');return false;" NAME="pickBoxColor" ID="pickBoxColor"><img width="15" height="13" border="0" alt="Pick" src="plugins/blogtimes/js/colorpicker/img/sel.gif" /></A>
</div>
<div class="field">
<label for="textColor">{$locale->tr("label_textcolor")}</label>
<span class="required">*</span>
<div class="formHelp">{$locale->tr("blogtimes_textcolor")}</div>
- <input style="width:100px;" class="text" type="text" name="textColor" id="textColor" value="{$textColor}" width="10" />
- <a href="javascript:TCP.popup(document.forms['blogTimesPluginConfig'].elements['textColor'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="plugins/blogtimes/js/colorpicker/img/sel.gif"></a>
+ <input style="width:100px; background:{$textColor};" class="text" type="text" name="textColor" id="textColor" value="{$textColor}" width="10" />
+ <A HREF="#" onClick="cp.select(document.forms['blogTimesPluginConfig'].elements['textColor'],'pickTextColor');return false;" NAME="pickTextColor" ID="pickTextColor"><img width="15" height="13" border="0" alt="Pick" src="plugins/blogtimes/js/colorpicker/img/sel.gif" /></A>
</div>
<div class="field">
<label for="lineColor">{$locale->tr("label_linecolor")}</label>
<span class="required">*</span>
<div class="formHelp">{$locale->tr("blogtimes_linecolor")}</div>
- <input style="width:100px;" class="text" type="text" name="lineColor" id="lineColor" value="{$lineColor}" width="10" />
- <a href="javascript:TCP.popup(document.forms['blogTimesPluginConfig'].elements['lineColor'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="plugins/blogtimes/js/colorpicker/img/sel.gif"></a>
+ <input style="width:100px; background:{$lineColor};" class="text" type="text" name="lineColor" id="lineColor" value="{$lineColor}" width="10" />
+ <A HREF="#" onClick="cp.select(document.forms['blogTimesPluginConfig'].elements['lineColor'],'pickLineColor');return false;" NAME="pickLineColor" ID="pickLineColor"><img width="15" height="13" border="0" alt="Pick" src="plugins/blogtimes/js/colorpicker/img/sel.gif" /></A>
</div>
<div class="field">
<label for="borderColor">{$locale->tr("label_bordercolor")}</label>
<span class="required">*</span>
<div class="formHelp">{$locale->tr("blogtimes_bordercolor")}</div>
- <input style="width:100px;" class="text" type="text" name="borderColor" id="borderColor" value="{$borderColor}" width="10" />
- <a href="javascript:TCP.popup(document.forms['blogTimesPluginConfig'].elements['borderColor'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="plugins/blogtimes/js/colorpicker/img/sel.gif"></a>
+ <input style="width:100px; background:{$borderColor};" class="text" type="text" name="borderColor" id="borderColor" value="{$borderColor}" width="10" />
+ <A HREF="#" onClick="cp.select(document.forms['blogTimesPluginConfig'].elements['borderColor'],'pickBorderColor');return false;" NAME="pickBorderColor" ID="pickBorderColor"><img width="15" height="13" border="0" alt="Pick" src="plugins/blogtimes/js/colorpicker/img/sel.gif" /></A>
</div>
<div class="field">
<label for="tickColor">{$locale->tr("label_tickcolor")}</label>
<span class="required">*</span>
<div class="formHelp">{$locale->tr("blogtimes_tickcolor")}</div>
- <input style="width:100px;" class="text" type="text" name="tickColor" id="tickColor" value="{$tickColor}" width="10" />
- <a href="javascript:TCP.popup(document.forms['blogTimesPluginConfig'].elements['tickColor'])"><img width="15" height="13" border="0" alt="Click Here to Pick up the color" src="plugins/blogtimes/js/colorpicker/img/sel.gif"></a>
+ <input style="width:100px; background:{$tickColor};" class="text" type="text" name="tickColor" id="tickColor" value="{$tickColor}" width="10" />
+ <A HREF="#" onClick="cp.select(document.forms['blogTimesPluginConfig'].elements['tickColor'],'pickTickColor');return false;" NAME="pickTickColor" ID="pickTickColor"><img width="15" height="13" border="0" alt="Pick" src="plugins/blogtimes/js/colorpicker/img/sel.gif" /></A>
</div>
<div class="field">
More information about the pLog-svn
mailing list