robholland/gist:53573

## gistfile1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>GreyMapper Demo</title>
  <script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script>
  <script type="text/javascript" src="occlude.js"></script>
  <script type="text/javascript" src="visibility.js"></script>
  <script type="text/javascript">

    var InlineEditor = new Class({
      initialize: function(node) {
        this.node = node;
        this.editor = new Element('input',{
          events: {
            keypress: this.keypress.bind(this),
            blur: this.save.bind(this)
          },
          value: this.node.get('html')
        });
        this.editor.inject(node, 'before');
        this.editor.focus();
        this.node.hide();
      },
      keypress: function(e) {
        if (e.key == 'enter') {
          this.save();
          return false;
        } else if (e.key == 'esc') {
          this.abort();
          return false;
        }
      },
      save: function() {
        this.node.set('html', this.editor.value);
        this.node.show();
        this.node.focus();
        this.editor.dispose();
      },
      abort: function() {
        this.node.focus();
        this.editor.dispose();
      }
    });

    var MindmapNode = new Class({
      Implements: Occlude,
      property: 'mindmapNode',

      initialize: function(element) {
        this.element = $(element);

        if (this.occlude()) { return this.occluded(); }

        this.title = this.element.getFirst('span');

        // This is required to allow keyup/focus/blur to function
        // http://www.w3.org/TR/WCAG20-TECHS/SCR29.html
        this.title.tabIndex = '0';


        this.title.addEvents({
          'mouseover': this.focus.bind(this),
          'keypress': this.keypress.bind(this),
          'click': this.edit.bind(this)
        });

        this.list = null;
      },
      toElement: function() {
        return this.element;
      },
      focus: function() {
        $$('.greymapper_current').each(function(e) {
          e.removeClass('greymapper_current');
          e.blur();
        });
        this.title.addClass('greymapper_current');
        this.title.focus();
      },
      toggleChildren: function() {
        if (this.list) { this.list.toggleChildren('li'); }
      },
      edit: function() {
        this.focus();
        new InlineEditor(this.title);
      },
      keypress: function(e) {
        if (e.key == 'enter') {
          this.createSibling();
          return false;
        } else if (e.key == 'tab') {
          this.createChild();
          return false;
        } else if (e.key == 'up') {
          var previous = this.element.getPrevious('li');
          if (previous) { new MindmapNode(previous).focus(); }
          return false;
        } else if (e.key == 'down') {
          var next = this.element.getNext('li');
          if (next) { new MindmapNode(next).focus(); }
        } else if (e.key == 'left') {
          var parent = this.element.getParent('li');
          if (parent) { new MindmapNode(parent).focus(); }
        } else if (e.key == 'right') {
          var child = this.element.getElement('li');
          if (child) { new MindmapNode(child).focus(); }
        }
      },
      create: function(element, position) {
        var item = new Element('li').grab(new Element('span'));
        item.inject(element, position);
        new MindmapNode(item).edit();
      },
      createSibling: function() {
        this.create(this.element, 'after');
      },
      createChild: function() {
        if (!this.list) {
          this.list = new Element('ul').inject(this.element);
        }
        this.create(this.list, 'bottom');
      },
      import: function() {
        this.list = this.element.getFirst('ul');
        if (this.list) {
          this.list.getChildren('li').each(function(l) {
            new MindmapNode(l).import();
          });
        }
      }
    });

    window.addEvent('domready', function () {
      new MindmapNode($('greymapper_container')).import();
    });
  </script>
  <style type="text/css">
    #greymapper_container li { list-style-type: none; }
    .greymapper_current { font-weight: bold; }
    .hidden { display: none; }
  </style>
</head>

<body>

<div id="greymapper_container">
  <span>root</span>
  <ul>
    <li><span>javascript</span>
      <ul>
        <li><span>lang</span></li>
        <li><span>ok</span>
          <ul>
            <li><span>stuff</span></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><span>python</span>
      <ul>
        <li><span>lang</span></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
	<head>
	<title>GreyMapper Demo</title>
	<script type="text/javascript" src="mootools-1.2.1-core-yc.js"></script>
	<script type="text/javascript" src="occlude.js"></script>
	<script type="text/javascript" src="visibility.js"></script>
	<script type="text/javascript">

	var InlineEditor = new Class({
	initialize: function(node) {
	this.node = node;
	this.editor = new Element('input',{
	events: {
	keypress: this.keypress.bind(this),
	blur: this.save.bind(this)
	},
	value: this.node.get('html')
	});
	this.editor.inject(node, 'before');
	this.editor.focus();
	this.node.hide();
	},
	keypress: function(e) {
	if (e.key == 'enter') {
	this.save();
	return false;
	} else if (e.key == 'esc') {
	this.abort();
	return false;
	}
	},
	save: function() {
	this.node.set('html', this.editor.value);
	this.node.show();
	this.node.focus();
	this.editor.dispose();
	},
	abort: function() {
	this.node.focus();
	this.editor.dispose();
	}
	});

	var MindmapNode = new Class({
	Implements: Occlude,
	property: 'mindmapNode',

	initialize: function(element) {
	this.element = $(element);

	if (this.occlude()) { return this.occluded(); }

	this.title = this.element.getFirst('span');

	// This is required to allow keyup/focus/blur to function
	// http://www.w3.org/TR/WCAG20-TECHS/SCR29.html
	this.title.tabIndex = '0';


	this.title.addEvents({
	'mouseover': this.focus.bind(this),
	'keypress': this.keypress.bind(this),
	'click': this.edit.bind(this)
	});

	this.list = null;
	},
	toElement: function() {
	return this.element;
	},
	focus: function() {
	$$('.greymapper_current').each(function(e) {
	e.removeClass('greymapper_current');
	e.blur();
	});
	this.title.addClass('greymapper_current');
	this.title.focus();
	},
	toggleChildren: function() {
	if (this.list) { this.list.toggleChildren('li'); }
	},
	edit: function() {
	this.focus();
	new InlineEditor(this.title);
	},
	keypress: function(e) {
	if (e.key == 'enter') {
	this.createSibling();
	return false;
	} else if (e.key == 'tab') {
	this.createChild();
	return false;
	} else if (e.key == 'up') {
	var previous = this.element.getPrevious('li');
	if (previous) { new MindmapNode(previous).focus(); }
	return false;
	} else if (e.key == 'down') {
	var next = this.element.getNext('li');
	if (next) { new MindmapNode(next).focus(); }
	} else if (e.key == 'left') {
	var parent = this.element.getParent('li');
	if (parent) { new MindmapNode(parent).focus(); }
	} else if (e.key == 'right') {
	var child = this.element.getElement('li');
	if (child) { new MindmapNode(child).focus(); }
	}
	},
	create: function(element, position) {
	var item = new Element('li').grab(new Element('span'));
	item.inject(element, position);
	new MindmapNode(item).edit();
	},
	createSibling: function() {
	this.create(this.element, 'after');
	},
	createChild: function() {
	if (!this.list) {
	this.list = new Element('ul').inject(this.element);
	}
	this.create(this.list, 'bottom');
	},
	import: function() {
	this.list = this.element.getFirst('ul');
	if (this.list) {
	this.list.getChildren('li').each(function(l) {
	new MindmapNode(l).import();
	});
	}
	}
	});

	window.addEvent('domready', function () {
	new MindmapNode($('greymapper_container')).import();
	});
	</script>
	<style type="text/css">
	#greymapper_container li { list-style-type: none; }
	.greymapper_current { font-weight: bold; }
	.hidden { display: none; }
	</style>
	</head>

	<body>

	<div id="greymapper_container">
	<span>root</span>
	<ul>
	<li><span>javascript</span>
	<ul>
	<li><span>lang</span></li>
	<li><span>ok</span>
	<ul>
	<li><span>stuff</span></li>
	</ul>
	</li>
	</ul>
	</li>
	<li><span>python</span>
	<ul>
	<li><span>lang</span></li>
	</ul>
	</li>
	</ul>
	</div>

	</body>
	</html>