invoking "file selection box"

[ItsMeOnly]

Hi again,

I now have this dilemma: I want to implement user-selectable background on my site, however I'm not willing to have the background files being uploaded, rather I want local filenames to be used (like file:///c:/blah/mynicepic.jpg), plain easy to implement "site-wise" (cookie magic), but there's a catch:
I'd like to use UAs "file selection box" (like with uploading) to appear. Do you know any way to invoke that?

[ItsMeOnly]

well, the temporary- and probably permanent solution is checking if the <input type="file"> element has value, and grab it.

[Twey]

That's really not going to work. Most browsers won't allow you to do this for security reasons.

[ItsMeOnly]

Yup, just tested, grabbing values works, but FF disallows using anything with file://

Anyway:
here's a test of the "control panel", http://rambo.id.uw.edu.pl/test.html
I have now a different task bothering me, populating the selection box with names and values of options taken from the array on top:

backgrounds = new Array();
backgrounds['Solid'] = new Array("solid", bgvalue);
backgrounds['Scatter'] = new Array("image", "/pictures/back.png");
[...]

The name is backgrounds[x], values are just position in main backgrounds[] array;
The question is the code which would fill in the options in selection box. Of course I can do it manually, but that would be pain if I would want to add or remove stuff...

[Twey]

You haven't declared "backgrounds." Also, the ["solid", bgvalue] syntax is marginally better than new Array() for some obscure reason I can't currently remember.

window.onload = function() {
  var select = document.getElementById("backgroundSelect");
  for(var i in backgrounds)
    select.options.add(new Option(backgrounds[i][0], backgrounds[i][1]), select.options.length);
};

[ItsMeOnly]

Implemented, now the another thing: need to split "HTML color" into rgb:

I know that I can do parseInt(value, 16), but haven't done any splitting yet, so is

function fromHEXtoRGB(value) {
  r = parseInt(value.substr(1, 3), 16);
  g = parseInt(value.substr(3, 5), 16);
  b = parseInt(value.substr(5), 16);
  return r, g, b;
}

is ok?

How with oposite, ho to convert decimal to hex?

[Twey]

  return r, g, b;

You can only return one value. Use an object. In fact, the whole thing can be made into an object:

String.prototype.splitEvery = function(n) {
  var s = this,
    p = [];

  while(s.length < 0) {
    p.push(s.substr(0, n));
    s = s.substr(n);
  }

  return p;
};

String.prototype.padFront = function(n, c) {
  var d = c || "0",
    s = this;

  while(s.length < n)
    s = d + s;

  return s;
};

function Colour(r, g, b) {
  this.red = r;
  this.green = g;
  this.blue = b;
}

Colour.fromThreeDigitHex = function(str) {
  var rgb = str.substr(1).splitEvery(1);

  for(var i = 0; i < rgb.length; ++i)
    rgb[i] = parseInt(rgb[i] + rgb[i], 16);

  return new Colour(rgb[0], rgb[1], rgb[2]);
};

Colour.prototype.toThreeDigitHex = function() {
  return "#" + this.red.toString(16).padFront(2).charAt(0)
    + this.green.toString(16).padFront(2).charAt(0)
    + this.blue.toString(16).padFront(2).charAt(0);
};

Colour.fromSixDigitHex = function(str) {
  var rgb = str.substr(1).splitEvery(2);

  for(var i = 0; i < rgb.length; ++i)
    rgb[i] = parseInt(rgb[i], 16);

  return new Colour(rgb[0], rgb[1], rgb[2]);
};

Colour.prototype.toSixDigitHex = function() {
  return "#" + this.red.toString(16).padFront(2)
    + this.green.toString(16).padFront(2)
    + this.blue.toString(16).padFront(2);
};

Colour.fromCSSRGB = function(str) {
  var rgb = str.substr(4).substr(0, rgb.length - 1).replace(/ /g, "").split(",");

  for(var i = 0; i < rgb.length; ++i)
    rgb[i] = parseInt(rgb[i], 10);

  return new Colour(rgb[0], rgb[1], rgb[2]);
};

Colour.prototype.toCSSRGB = function() {
  return "rgb(" + [this.red, this.green, this.blue].join(", ") + ")";
};

Colour.fromString = function(str) {
  if(str.charAt(0) === "#" && str.length === 4)
    return Colour.fromThreeDigitHex(str);
  else if(str.charAt(0) === "#" && str.length === 7)
    return Colour.fromSixDigitHex(str);
  else if(str.indexOf("rgb(") === 0)
    return Colour.fromCSSRGB(str);
  else throw new Error("Bad colour passed to Colour.fromString()");
};

[ItsMeOnly]

*plunk* that was my jaw dropping...

while I'll deliberate more if I need to implement that (well, maybe later, when I implement color schemes), here's another obstacle I encountered:
document.body.style.backgroundColor is... null?

Found it: document.body.bgColor ... pheeeewww....

[Twey]

It's empty, not null. It probably hasn't been set.

[ItsMeOnly]

anyway, check out the result
now just client- and server-side cookie handling, and I'm set