Opened 13 years ago

Closed 12 years ago

#364 closed defect (fixed)

Full Page Plugin: Color selection

Reported by: Brice Burgess Owned by: gogo
Priority: normal Milestone: Version 1.0
Component: Plugin_FullPage Version: trunk
Severity: normal Keywords:
Cc:

Description

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


Attachments (2)

colorpicker.jpg (30.1 KB) - added by gocher 13 years ago.
Display problem with IE
color_picker.js (23.5 KB) - added by wymsy 12 years ago.

Download all attachments as: .zip

Change History (18)

comment:1 Changed 13 years ago by gocher

look at TableOperations? plugin

comment:2 Changed 13 years ago by 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.

comment:3 Changed 13 years ago by 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>

comment:4 Changed 13 years ago by gocher

  • Resolution set to fixed
  • Status changed from new to closed

add in Changeset 276

comment:5 Changed 13 years ago by Brice Burgess

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

comment:6 Changed 13 years ago by 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 :)

comment:7 Changed 13 years ago by 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.

comment:8 Changed 13 years ago by mokhet

  • Resolution set to fixed
  • Status changed from reopened to closed

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

comment:9 Changed 13 years ago by gocher

  • Resolution fixed deleted
  • Status changed from closed to reopened

Display problem with IE! Look attachment colorpicker.jpg

Changed 13 years ago by gocher

Display problem with IE

comment:10 Changed 13 years ago by 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!

comment:11 Changed 13 years ago by 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>

comment:12 Changed 13 years ago by gogo

  • Milestone set to Version 1.0
  • Version set to trunk

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

comment:13 Changed 13 years ago by 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.

comment:14 Changed 12 years ago by mokhet

  • Resolution set to fixed
  • Status changed from reopened to closed

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

closing this ticket now.

comment:15 Changed 12 years ago by wymsy

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.
  1. 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?

Changed 12 years ago by wymsy

comment:16 Changed 12 years ago by wymsy

  • Resolution set to fixed
  • Status changed from reopened to closed

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

Note: See TracTickets for help on using tickets.