Panel TypeList plugin - a new ListType

mokhet · 2005-09-10 13:20:17

Hi,

The ListType plugin is nice but i hated the selectbox in the toolbar, so i made mine (TypeList) from scratch using the panels.
It is using images you can find at http://mokhet.com/xinha_TypeList_img.zip

Basically, onUpdateToolbar the plugin is looking for the actuel parent selection and determine if we have a OL or UL parent. If so, it is opening the panel and display the listStyleType available for the actual parent (none, disc, circle and square for UL elements and none, decimal, lower-alpha, upper-alpha, lower-roman and upper-roman for OL elements)

function TypeList(editor) {
  this.editor = editor;
    var self = this;

  editor._typeList = editor.addPanel('right');
  HTMLArea.freeLater(editor, '_typeList');
  HTMLArea.addClass(editor._typeList, 'TypeList');
  HTMLArea.addClass(editor._typeList.parentNode, 'dialog');

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

  var elts_ul = ['disc', 'circle', 'square', 'none'];
  var elts_ol = ['decimal', 'lower-alpha', 'upper-alpha', 'lower-roman', 'upper-roman', 'none'];
  var div = document.createElement('div');
  div.id = 'TLdivUL';
  div.style.display = 'none';
  for (var i=0; i<elts_ul.length; i++) {
    div.appendChild(this.createImage(elts_ul[i]));
  }
  editor._typeList.appendChild(div);
  var div = document.createElement('div');
  div.id = 'TLdivOL';
  div.style.display = 'none';
  for (var i=0; i<elts_ol.length; i++) {
    div.appendChild(this.createImage(elts_ol[i]));
  }
  editor._typeList.appendChild(div);

  editor.hidePanel(editor._typeList);
};

TypeList._pluginInfo = {
    name          : "TypeList",
    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"
};

TypeList.prototype.onUpdateToolbar = function() {
  var courant = this.editor.getParentElement();
  var parent = courant;
    if ((courant.tagName.toLowerCase() == 'li') && (typeof courant.parentNode != 'undefined')) {
     parent = courant.parentNode;
    }
    if ((parent.tagName.toLowerCase() == 'ul') || (parent.tagName.toLowerCase() == 'ol')) {
       this.showPanel(parent);
    } else {
    this.editor.hidePanel(this.editor._typeList);
    }
};

TypeList.prototype.createImage = function(listStyleType) {
  var self = this;
  var editor = this.editor;
  var img = document.createElement('img');
  img.src = _editor_url + 'plugins/TypeList/img/' + listStyleType + '.png';
  img.style.marginTop = '2px';
  img.style.marginLeft = '5px';
  img.style.marginRight = '0';
  img.style.marginBottom = '0';
  img.style.borderWidth = '1px';
  img.style.borderStyle = 'solid';
  img.style.cursor = 'pointer';
  img._listStyleType = listStyleType;
  HTMLArea.freeLater(img, '_listStyleType');
  img.style.borderColor = '#9C96A5';
  HTMLArea._addEvent(img, "click", function () {
    var parent = editor._typeList.currentTypeListParent;
    parent.style.listStyleType = listStyleType;
    self.showActive(parent);
  });

  return img;
};

TypeList.prototype.showActive = function(parent) {
  var activeDiv = document.getElementById((parent.tagName.toLowerCase() == 'ul')? 'TLdivUL':'TLdivOL');
  document.getElementById('TLdivUL').style.display = 'none';
  document.getElementById('TLdivOL').style.display = 'none';
  activeDiv.style.display = 'block';
  var defaultType = parent.style.listStyleType;
  if ('' == defaultType) defaultType = (parent.tagName.toLowerCase() == 'ul')? 'disc':'decimal';
  for (var i=0; i<activeDiv.childNodes.length; i++) {
    var elt = activeDiv.childNodes[i];
    if (elt._listStyleType == defaultType) {
      elt.style.borderColor = '#000084';
    } else {
      elt.style.borderColor = '#9C96A5';
    }
  }
}

TypeList.prototype.showPanel = function(parent) {
  this.editor._typeList.currentTypeListParent = parent;
  this.showActive(parent);
  this.editor.showPanel(this.editor._typeList);
};

mharrisonline · 2005-09-11 13:32:04

It's great that this is context sensitive, and that it supports bullets. I notice though that it will only activate if two lines in the list are selected, simply clicking into the list doesn't make it show up.

mokhet · 2005-09-11 14:13:34

As for CharacterMap, i have integrate this panel version to the actual one, changeset 314, and you can change the way the plugin use it by setting the configuration variable to 'panel'

to use the panel

xinha_config.ListType.mode = 'panel'

to use the old selectbox in the toolbar, that is the default setting

xinha_config.ListType.mode = 'toolbar'

Damn, i should have read the forum before commiting 314.

Can you tell me if there is still the problem you have find with the changeset 315 ? I have made my tests and i cant make it occurs again.

It was caused by this code

  var courant = this.editor.getParentElement();
  var parent = courant;
  if ( ( courant.tagName.toLowerCase() == 'li' ) && ( typeof courant.parentNode != 'undefined' ) )
   parent = courant.parentNode;
  if ( ( parent.tagName.toLowerCase() == 'ul' ) || ( parent.tagName.toLowerCase() == 'ol' ) )

which i have changed to

  var parent = editor.getParentElement();
  while ( parent && !/^[o|u]l$/i.test( parent.tagName ) )
    parent = parent.parentNode;
  if (parent)

sorry for the mess

mharrisonline · 2005-09-11 23:20:11

It works perfectly! It's interesting to see it work at the same time as ListType, too!

mharrisonline · 2005-09-12 01:27:28

Ah, I see. You made ListType configurable to be dropdown or panel. I was testing using both the old ListType and the new TypeList component, so I had the dropdown and panel both at once. When you use one plugin to select a list style, the other doesn't highlight the new selection until you click into the list again. I wonder if it would be possible to make ListType have the option of showing both the dropdown and the panel? Does that make sense?

Xinha Discussion Forum

Announcement

#1 2005-09-10 13:20:17

Panel TypeList plugin - a new ListType

#2 2005-09-11 13:32:04

Re: Panel TypeList plugin - a new ListType

#3 2005-09-11 14:13:34

Re: Panel TypeList plugin - a new ListType

#4 2005-09-11 23:20:11

Re: Panel TypeList plugin - a new ListType

#5 2005-09-12 01:27:28

Re: Panel TypeList plugin - a new ListType

Board footer