color_picker.js

Hippo CMS是一个以信息为中心的开源内容管理系统。Hippo CMS目标是供中,大型企业来管理其发布在互连网

     * for the class.
     */

    this.open = function(anchorage,element)
    {
      this.table.style.display = '';

      this.pick_color();

      // Find position of the element
      this.table.style.position = 'absolute';
      var e = element;
      var top  = 0;
      var left = 0;
      do
      {
        top += e.offsetTop;
        left += e.offsetLeft;
        e = e.offsetParent;
      }
      while(e)

      var x, y;
      if(/top/.test(anchorage))
      {
        this.table.style.top = (top - this.table.offsetHeight) + 'px';
      }
      else
      {
        this.table.style.top = (top + element.offsetHeight) + 'px';
      }

      if(/left/.test(anchorage))
      {
        this.table.style.left = left + 'px';
      }
      else
      {
        this.table.style.left = (left - (this.table.offsetWidth - element.offsetWidth)) + 'px';
      }
    };

    /** Draw the color picker. */
    this.pick_color = function()
    {
      var rows, cols;
      var picker = this;
      var huestep = 359/this.side;
      var saturstep = 1/this.side;
      var valustep  = 1/this.side;
      var constrain = this.constrain_cb.checked;

      if(this.saved_cells == null)
      {
        this.saved_cells = new Array();

        for(var row = 0; row <= this.side; row++)
        {
          var tr = document.createElement('tr');
          this.saved_cells[row] = new Array();
          for(var col = 0; col <= this.side; col++)
          {
            var td = document.createElement('td');
            if(constrain)
            {
              td.colorCode = tupleToColor(rgbToWebsafe(hsvToRGB(huestep*row, saturstep*col, this.value)));
            }
            else
            {
              td.colorCode = tupleToColor(hsvToRGB(huestep*row, saturstep*col, this.value));
            }
            this.saved_cells[row][col] = td;
            td.style.height = td.style.width = this.cellsize;
            td.style.backgroundColor = td.colorCode;
            td.hue = huestep * row;
            td.saturation = saturstep*col;
            td.onmouseover = function()
            {
              picker.chosenColor.value = this.colorCode;
              picker.backSample.style.backgroundColor = this.colorCode;
              picker.foreSample.style.color = this.colorCode;
              if((this.hue >= 195  && this.saturation > 0.25) || picker.value < 0.75)
              {
                picker.backSample.style.color = 'white';
              }
              else
              {
                picker.backSample.style.color = 'black';
              }
            }
            td.onclick = function() { picker.callback(this.colorCode); picker.close(); }
            td.appendChild(document.createTextNode(' '));
            td.style.cursor = 'pointer';
            tr.appendChild(td);
            td = null;
          }

          // Add a blank and thena value column
          var td = document.createElement('td');
          td.appendChild(document.createTextNode(' '));
          td.style.width = this.cellsize;
          tr.appendChild(td);
          td = null;

          var td = document.createElement('td');
          td.appendChild(document.createTextNode(' '));
          td.style.width  = this.cellsize;
          td.style.height = this.cellsize;
          td.constrainedColorCode  = tupleToColor(rgbToWebsafe(hsvToRGB(0,0,valustep*row)));
          td.style.backgroundColor = td.colorCode = tupleToColor(hsvToRGB(0,0,valustep*row));
          td.hue = huestep * row;
          td.saturation = saturstep*col;
          td.hsv_value = valustep*row;
          td.onclick = function() {
            picker.value = this.hsv_value; picker.pick_color();
            if(picker.constrain_cb.checked)
            {
              picker.chosenColor.value = this.constrainedColorCode;
            }
            else
            {
              picker.chosenColor.value = this.colorCode;
            }
          }
          td.style.cursor = 'pointer';
          tr.appendChild(td);
          td = null;

          this.tbody.appendChild(tr);
          tr = null;
        }

        // Add one row of greys
        var tr = document.createElement('tr');
        this.saved_cells[row] = new Array();
        for(var col = 0; col <= this.side; col++)
        {
          var td = document.createElement('td');
          if(constrain)
          {
            td.colorCode = tupleToColor(rgbToWebsafe(hsvToRGB(0, 0, valustep*(this.side-col))));
          }
          else
          {
            td.colorCode = tupleToColor(hsvToRGB(0, 0, valustep*(this.side-col)));
          }
          this.saved_cells[row][col] = td;
          td.style.height = td.style.width = this.cellsize;
          td.style.backgroundColor = td.colorCode;
          td.hue = 0;
          td.saturation = 0;
          td.onmouseover = function()
          {
            picker.chosenColor.value = this.colorCode;
            picker.backSample.style.backgroundColor = this.colorCode;
            picker.foreSample.style.color = this.colorCode;
            if((this.hue >= 195  && this.saturation > 0.25) || picker.value < 0.75)
            {
              picker.backSample.style.color = 'white';
            }
            else
            {
              picker.backSample.style.color = 'black';
            }
          }
          td.onclick = function() { picker.callback(this.colorCode); picker.close(); }
          td.appendChild(document.createTextNode(' '));
          td.style.cursor = 'pointer';
          tr.appendChild(td);
          td = null;
        }
        this.tbody.appendChild(tr);
        tr = null;


        var tr = document.createElement('tr');
        var td = document.createElement('td');
        tr.appendChild(td);
        td.colSpan = this.side + 3;
        td.style.padding = '3px';

        var div = document.createElement('div');
        var label = document.createElement('label');
        label.appendChild(document.createTextNode('Web Safe: '));

        this.constrain_cb.onclick = function() { picker.pick_color() };
        label.appendChild(this.constrain_cb);
        label.style.fontFamily = 'small-caption,caption,sans-serif';
        label.style.fontSize = 'x-small';
        div.appendChild(label);
        td.appendChild(div);

        var div = document.createElement('div');
        var label = document.createElement('label');
        label.style.fontFamily = 'small-caption,caption,sans-serif';
        label.style.fontSize = 'x-small';
        label.appendChild(document.createTextNode('Color: '));
        label.appendChild(this.chosenColor);
        div.appendChild(label);
        td.appendChild(div);

        var sampleTable = document.createElement('table');
        sampleTable.style.width = '100%';
        var sampleBody = document.createElement('tbody');
        sampleTable.appendChild(sampleBody);
        var sampleRow = document.createElement('tr');
        sampleBody.appendChild(sampleRow);
        var leftSampleCell = document.createElement('td');
        sampleRow.appendChild(leftSampleCell);
        leftSampleCell.appendChild(this.backSample);
        leftSampleCell.style.width = '50%';
        var rightSampleCell = document.createElement('td');
        sampleRow.appendChild(rightSampleCell);
        rightSampleCell.appendChild(this.foreSample);
        rightSampleCell.style.width = '50%';

        td.appendChild(sampleTable);


        this.tbody.appendChild(tr);
        document.body.appendChild(this.table);

      }
      else
      {
        for(var row = 0; row <= this.side; row++)
        {
          for(var col = 0; col <= this.side; col++)
          {
            if(constrain)
            {
              this.saved_cells[row][col].colorCode = tupleToColor(rgbToWebsafe(hsvToRGB(huestep*row, saturstep*col, this.value)));
            }
            else
            {
              this.saved_cells[row][col].colorCode = tupleToColor(hsvToRGB(huestep*row, saturstep*col, this.value));
            }
            this.saved_cells[row][col].style.backgroundColor = this.saved_cells[row][col].colorCode;
          }
        }
      }
    };

    /** Close the color picker */
    this.close = function()
    {
      this.table.style.display = 'none';
    };

  }