Full Page Plugin: Color selection

[Brice Burgess]

I'm planning on integrating xinha into my new GPL'd project (a mailing list manager) -- and all up & coming web apps that'll take HTML input... Some of my target customers aren't the brightest, and haven't the faintest clue as to hex codes representing a color.

Has anyone looked into modifying the full page plugin so that you can select the text and background color (vs. inputing its hex value)?

Brice

[gocher]

look at TableOperations plugin

[mokhet]

Hello gocher and all, i've looked at TableOperations plugin. So far i have managed to have (as in TableOperations) the select_color.html dialog pop and have the input text changed when a color is selected.

Basically, the changes are

function chooseColor(id) {
  var old_window_name = window.name;
  window.name = 'docprop';
  var input = document.getElementById(id);
  editor._popupDialog("select_color.html", function(color) {
    if (color && (typeof color == 'string') ) {
      input.style.backgroundColor = "#" + color;
      input.value = "#" + color;
    }
    window.name = old_window_name;
  }, input.value);
}
...
<input type="text" id="f_body_bgcolor" class="txt" onclick="chooseColor('f_body_bgcolor'); " />

If I dont change the window.name (with window.name = 'docprop';), the current dialog is updated to the select_color and i cant find a way to have it back .

But now with the window.name changed, everything is working the way i want but i obtain a very obscur error message from firefox i dont understand when i click on the input text. And then, nothing is saved when we click on the OK button.

Erreur: [Exception... "Permission refusée d'obtenir la propriété XULElement.selectedInCde' when calling method: [nsIAutoCompletePopup::selectedInex]" nsresult: "0x80570001e (NS_ERROR_XPC_JS_THREW_STRING) location: "JS frame :: /xinha/dialog.js :: anonymous :: line 43" data: no]

I've looked into dialog.js, and the line 43 doesnt seems to be the real origin of the problem. I think it is the way i open the dialog popup which is totally wrong, but i cant see any other method yet.

my last test is at http://mokhet.com/xinha/examples/fullpage_test.html

If someone could lead me on a solution to this, or at least show me how to pop the select_color.html dialog in a correct way from another dialog, that's would be great. Because so far, I cant see any solution Thank.

[gocher]

Thats a Firefox mistake and the only way to fix it, is to add autocomplete="off" to the INPUT tag's in your docprop.html.

popups\docprop.html

<div>
  <label class="fr" for="f_body_bgcolor">Background color:</label>
  <input type="text" id="f_body_bgcolor" class="txt" autocomplete="off" onclick="chooseColor('f_body_bgcolor');" />
</div>
<div>
  <label class="fr" for="f_body_fgcolor">Text color:</label>
  <input type="text" id="f_body_fgcolor" class="txt" autocomplete="off" onclick="chooseColor('f_body_fgcolor');" />
</div>

[gocher]

add in Changeset 276

[Brice Burgess]

As of the latest test example page (2005-08-12) It seems that the color selection dialog pops up as desired, but upon hitting OK from the full page dialog the changes are NOT saved -- the HTML title is, however. This was tested using Firefox 1.0.6 on GNU/Linux platform. Anyone look into this? I know.. I should learn my way around this code!! :)

Thanks,

Brice

[gogo]

It might be better to look at using the color picker I developed for ImageManager, rather than the original HTMLArea one, my one doesn't do the popup window thing, and is a nice HSV chart, should also be easier to use :)

[gogo]

Should also say that the color picker is found in xinha/popups/color_picker.js and the source contains a usage example and ample comments to show you how to use it.

[mokhet]

fixed in changeset:305 As suggested by gogo, the plugin is now using the colorpicker widget instead of the old popup

[gocher]

Display problem with IE! Look attachment colorpicker.jpg

[gocher]

Display problem with IE

[gocher]

Look Ticket #459, for I few day's I upload a patch and in that patch I took the position of the dialog titel to manage that problem, the rest is similar!

[gocher]

A Patch for changeset:305

Index: docprop.html
===================================================================
--- docprop.html	(revision 306)
+++ docprop.html	(working copy)
@@ -34,13 +34,23 @@
 
   var bgCol_pick = document.getElementById('bgCol_pick');
   var f_body_bgcolor = document.getElementById('f_body_bgcolor');
-  var bgColPicker = new colorPicker({cellsize:'5px',callback:function(color){f_body_bgcolor.value=color;}});
-  bgCol_pick.onclick = function() { bgColPicker.open('top,right', f_body_bgcolor ); }
+  var bgColPicker = new colorPicker (
+        { cellsize: '5px',
+          callback: function(color){f_body_bgcolor.value=color},
+          granularity: 18
+        }
+      );
+  bgCol_pick.onclick = function() { bgColPicker.open('bottom,left', document.getElementById('title')) };
 
   var fgCol_pick = document.getElementById('fgCol_pick');
   var f_body_fgcolor = document.getElementById('f_body_fgcolor');
-  var fgColPicker = new colorPicker({cellsize:'5px',callback:function(color){f_body_fgcolor.value=color;}});
-  fgCol_pick.onclick = function() { fgColPicker.open('top,right', f_body_fgcolor ); }
+  var fgColPicker = new colorPicker (
+        { cellsize: '5px',
+          callback: function(color){f_body_fgcolor.value=color},
+          granularity: 18
+        }
+      );
+  fgCol_pick.onclick = function() { fgColPicker.open('bottom,left', document.getElementById('title')) };
 
   document.getElementById("f_title").focus();
   document.getElementById("f_title").select();
@@ -82,7 +92,7 @@
 
 <body class="dialog" onload="Init()">
 
-<div class="title">Document properties</div>
+<div id="title" class="title">Document properties</div>
 
 <div>
   <label class="fr" for="f_title">Document title:</label>
@@ -139,4 +149,4 @@
 </div>
 
 </body>
-</html>
\ No newline at end of file
+</html>

[gogo]

gocher, is this still a problem or did you fix it? If so can you close this please.

[anonymous]

The color selector is ok for full HTML plugin, but Xinha is still opening awfull popup to select foreground and background colors from generic toolbar.

[mokhet]

plugin is fixed and generic toolbar is now opening the colorpicker (changeset:550 ticket #85)

closing this ticket now.

[wymsy]

This fix for the display problem doesn't really fix it in the general case, so it is still a problem when used in the generic toolbar. The only way to truly fix it is to generate an iframe the same size as the color picker and position it behind the picker to mask out any select lists that might be on the page. The attached copy of color_picker.js includes a fix to do this, as well as several other improvements:

1. Limit checking to keep the picker inside the window.

2. Many improvements to the user interface:

• you can now go back and forth between the color grid and the value scale, which now behaves like a slider (click and drag).

• the selected color is highlighted in the grid and can also be dragged.

• double-click to accept the color and close the picker.

• you can now type in a color code. an OK button has been added.

Unfortunately, this version shares one *major* problem with the original, which is that it doesn't work *at all* in IE! When you click in the color picker, whatever was selected in xinha is deselected before the color is returned, so nothing is changed. I guess we have to intercept the click and prevent it from being passed back to xinha, but this is getting into unfamiliar territory for me. Does anyone have any suggestions?

[wymsy]

I think ticket #85 is the more appropriate place for this discussion now. I'll close this one again and reopen #85.