Xinha Discussion Forum

mokhet

Xinha Authority

From: Paris, France

Registered: 2005-04-03

Posts: 105

Website

Panel CharacterMap and styling question for panel components

Hi, I have created a panel version of the CharacterMap plugin and I'm wondering if anyone got a solution to load custom style in the panel from a plugin ?

I mean, i apply a className to the panel with

  HTMLArea.addClass(editor._characterMap, 'CharacterMap');

how can i then make xinha panels understand i want to use the following style declaration ?

.panels .CharacterMap a.entity {  }
.panels .CharacterMap a.entity:hover {  }

I couldnt find a way, so i end up using some javascript to set the style, but being able to use a className would be less pain

The only topic i could find to answer my question is http://xinha.gogo.co.nz/punbb/viewtopic.php?id=57 but unfortunatly, there's no solution or i wasnt able to understand it.

Here is the version i made

function CharacterMap(editor) {
  this.editor = editor;
  var cfg = editor.config;
  var self = this;
  cfg.registerButton({
    id       : "insertcharacter",
    tooltip  : HTMLArea._lc("Insert special character", 'CharacterMap'),
    image    : editor.imgURL("ed_charmap.gif", "CharacterMap"),
    textMode : false,
    action   : function(editor) { self.buttonPress(editor); }
  });
  cfg.addToolbarElement("insertcharacter", "insertlink", -1);

  editor._characterMap = editor.addPanel('right');
  HTMLArea.addClass(editor._characterMap, 'CharacterMap');

  editor.notifyOn('modechange',
    function(e,args) {
      if (args.mode == 'text') editor.hidePanel(editor._characterMap);
    }
  );

  var entites = [
    'Ÿ', 'š', '@', '"', '¡', '¢', '£', '¤', '¥', '¦',
    '§', '¨', '©', 'ª', '«', '¬', '¯', '°', '±', '²',
    '³', '´', 'µ', '¶', '·', '¸', '¹', 'º', '»', '¼',
    '½', '¾', '¿', '×', 'Ø', '÷', 'ø', 'ƒ', 'ˆ',
    '˜', '–', '—', '‘', '’', '‚', '“', '”', '„',
    '†', '‡', '•', '…', '‰', '‹', '›', '€', '™',
    'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È',
    'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ',
    'Ò', 'Ó', 'Ô', 'Õ', 'Ö', '®', '×', 'Ù', 'Ú',
    'Û', 'Ü', 'Ý', 'Þ', 'ß', 'à', 'á', 'â', 'ã',
    'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì',
    'í', 'î', 'ï', 'ð', 'ñ', 'ò', 'ó', 'ô', 'õ',
    'ö', '÷', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ',
    'ÿ', 'Œ', 'œ', 'Š'
  ];

  for (var i=0; i<entites.length; i++)
    this.addEntity(entites[i], i);
};

CharacterMap._pluginInfo = {
  name          : "CharacterMap",
  version       : "0.1",
  developer     : "Laurent Vilday",
  developer_url : "http://www.mokhet.com/",
  c_owner       : "Xinha community",
  sponsor       : "",
  sponsor_url   : "",
  license       : "Creative Commons Attribution-ShareAlike License"
};

CharacterMap.prototype.buttonPress = function(editor) {
  if (editor._panels.right.container.style.display == 'none') {
    editor.showPanel(editor._characterMap);
  } else {
    editor.hidePanel(editor._characterMap);
  }
}

CharacterMap.prototype.addEntity = function (entite, pos) {
  editor = this.editor;
  var anch = document.createElement('a');
  anch.innerHTML = entite;
  anch.style.fontSize = '12px';
  anch.href = 'javascript:void(0)';
  anch.style.width = "18px";
  anch.style.display = 'block';
  anch.style.cssFloat = 'left';
  anch.style.padding = '2px';
  anch.style.textDecoration = 'none';
  anch.style.backgroundColor = (pos%2)? '#ffffff':'#f7f8fd';
  anch.style.color = '#000000';
  anch.style.textAlign = 'center';
  anch.onclick = function() {
    if (HTMLArea.is_ie) editor.focusEditor();
    editor.insertHTML( entite );
    editor.hidePanel(editor._characterMap);
  };
  editor._characterMap.appendChild(anch);
}

I could not find any other name than CharacterMap and since i use this one and not the original popup one, the conflict name was not a pain for me, sorry if it's of any trouble for someone. Of course, everyone is allowed to do anything with this little plugin

grrr, the & #064; (the third character) keep being changed to @ grrr grrr grr

mokhet

Xinha Authority

From: Paris, France

Registered: 2005-04-03

Posts: 105

Website

Re: Panel CharacterMap and styling question for panel components

CharacterMap.prototype.buttonPress = function(editor) {
  if (editor._panels.right.container.style.display == 'none') {
    editor.showPanel(editor._characterMap);
  } else {
    editor.hidePanel(editor._characterMap);
  }
}

Is this a correct way to know if the panel is visible or hidden ? i use it to switch on/off the visibility of the panel, but i think a better way may exist even if i was not able to find it.

mokhet

Xinha Authority

From: Paris, France

Registered: 2005-04-03

Posts: 105

Website

Re: Panel CharacterMap and styling question for panel components

Making another panel version of a plugin (ListType), i found out that the test to find if the panel is active or not is not enough because if another plugin has open a panel at same position it can then never open the character map panel. So i made some little changes

1) add a boolean flag to know if the CM panel is shown or not

CharacterMap._isActive = false;

2) test this flag to open/close the panel

CharacterMap.prototype.buttonPress = function(editor) {
  if (this._isActive) {
    this._isActive = false;
    editor.hidePanel(editor._characterMap);
  } else {
    this._isActive = true;
    editor.showPanel(editor._characterMap);
  }
};

It is working as intended, but i still wonder if it is a good or bad solution. Panels are still very mysticals for me

Here is the new version i'm using

function CharacterMap(editor) {
  this.editor = editor;
    var cfg = editor.config;
    var self = this;
  cfg.registerButton({
    id       : "insertcharacter",
    tooltip  : HTMLArea._lc("Insert special character", 'CharacterMap'),
    image    : editor.imgURL("ed_charmap.gif", "CharacterMap"),
    textMode : false,
    action   : function(editor) { self.buttonPress(editor); }
  });
    cfg.addToolbarElement("insertcharacter", "createlink", -1);

  editor._characterMap = editor.addPanel('right');
  HTMLArea.addClass(editor._characterMap, 'CharacterMap');

  editor.notifyOn('modechange',
    function(e,args) {
      if (args.mode == 'text') editor.hidePanel(editor._characterMap);
    }
  );

  var entites = [
    'Ÿ', 'š', '@', '"', '¡', '¢', '£', '¤', '¥', '¦',
    '§', '¨', '©', 'ª', '«', '¬', '¯', '°', '±', '²',
    '³', '´', 'µ', '¶', '·', '¸', '¹', 'º', '»', '¼',
    '½', '¾', '¿', '×', 'Ø', '÷', 'ø', 'ƒ', 'ˆ',
    '˜', '–', '—', '‘', '’', '‚', '“', '”', '„',
    '†', '‡', '•', '…', '‰', '‹', '›', '€', '™',
    'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È',
    'É', 'Ê', 'Ë', 'Ì', 'Í', 'Î', 'Ï', 'Ð', 'Ñ',
    'Ò', 'Ó', 'Ô', 'Õ', 'Ö', '®', '×', 'Ù', 'Ú',
    'Û', 'Ü', 'Ý', 'Þ', 'ß', 'à', 'á', 'â', 'ã',
    'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì',
    'í', 'î', 'ï', 'ð', 'ñ', 'ò', 'ó', 'ô', 'õ',
    'ö', '÷', 'ø', 'ù', 'ú', 'û', 'ü', 'ý', 'þ',
    'ÿ', 'Œ', 'œ', 'Š'
  ];

  for (var i=0; i<entites.length; i++)
    this.addEntity(entites[i], i);

  editor.hidePanel(editor._characterMap);
};

CharacterMap._pluginInfo = {
    name          : "CharacterMap",
    version       : "0.2",
    developer     : "Laurent Vilday",
    developer_url : "http://www.mokhet.com/",
    c_owner       : "Xinha community",
    sponsor       : "",
    sponsor_url   : "",
    license       : "Creative Commons Attribution-ShareAlike License"
};

CharacterMap._isActive = false;

CharacterMap.prototype.buttonPress = function(editor) {
  if (this._isActive) {
    this._isActive = false;
    editor.hidePanel(editor._characterMap);
  } else {
    this._isActive = true;
    editor.showPanel(editor._characterMap);
  }
};

CharacterMap.prototype.addEntity = function (entite, pos) {
  editor = this.editor;
  var self = this;
  var anch = document.createElement('a');
  anch.innerHTML = entite;
  anch.style.fontSize = '12px';
  anch.href = 'javascript:void(0)';
  anch.style.width = "18px";
  anch.style.display = 'block';
  if (typeof anch.style.styleFloat != 'undefined') {
    anch.style.styleFloat = 'left'; // IE version :(
  } else {
    anch.style.cssFloat = 'left'; // gecko
  }
  anch.style.padding = '2px';
  anch.style.textDecoration = 'none';
  anch.style.backgroundColor = (pos%2)? '#ffffff':'#f7f8fd';
  anch.style.color = '#000000';
  anch.style.textAlign = 'center';
  anch.onclick = function() {
    if (HTMLArea.is_ie) editor.focusEditor();
    editor.insertHTML( entite );
    self._isActive = false;
    editor.hidePanel(editor._characterMap);
    return false;
  };
  anch.onmouseover = function() {
    anch.style.backgroundColor = '#ffd760';
    return false;
  };
  anch.onmouseout = function() {
    anch.style.backgroundColor = (pos%2)? '#ffffff':'#f7f8fd';
    return false;
  };
  editor._characterMap.appendChild(anch);
};

mokhet

Xinha Authority

From: Paris, France

Registered: 2005-04-03

Posts: 105

Website

Re: Panel CharacterMap and styling question for panel components

I'm wondering if anyone got a solution to load custom style in the panel from a plugin ?

Ok, i finally found out how to do it, it was too simple

HTMLArea.loadStyle('filename.css', 'plugin_name');

mokhet

Xinha Authority

From: Paris, France

Registered: 2005-04-03

Posts: 105

Website

Re: Panel CharacterMap and styling question for panel components

as suggested by gogo, i have integrate this version to the existing plugin in changeset 313

to use the panel representation, you have to set the configuration variable to 'panel'

to use the panel

xinha_config.CharacterMap.mode = 'panel'

to use the old popup, that is the default setting

xinha_config.CharacterMap.mode = 'popup'