kalley/marionette.views.events.html

## marionette.views.events.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Marionette Render Process</title>
<style>
body, select {
  font-family: sans-serif;
}
ul {
  padding-left: 20px;
}
ul ul {
  margin-bottom: 5px;
}
.key span:before {
  content: '•';
}
.key span:after {
  content: attr(class);
  margin: 0 10px 0 5px;
}
.event {
  color: darkgreen;
}
.trigger {
  color: darkblue;
}
.action {
  color: orange;
}
.iterator {
  color: purple;
  font-style: italic;
}
.iterator ul {
  font-style: normal;
}
.view-parent {
  font-weight: 700;
}
</style>
</head>
<body>
  <h1>Marionette Render Process</h1>
  <div class="key">
    <span class="event"></span>
    <span class="trigger"></span>
    <span class="action"></span>
    <span class="iterator"></span>
  </div>
  <p><code>Region.show(<select id="marionetteView">
    <option>ItemView</option>
    <option>Layout</option>
    <option>CollectionView</option>
    <option>CompositeView</option>
  </select>);</code></p>
  <ul id="process"></ul>
<script>
(function() {
  // Taken from marionette.triggermethod.js

  // split the event name on the :
  var splitter = /(^|:)(\w)/gi;

  // take the event section ("section1:section2:section3")
  // and turn it in to uppercase name
  function getEventName(match, prefix, eventName) {
    return eventName.toUpperCase();
  }

  // end

  var methods = {};
  methods.Region = [];
  methods.child = ['show::dom:refresh'];
  methods.RegionManager = ['generateProcess(Region, region:add::region:add, )'];
  methods.ItemView = ['before:render', 'item:before:render', '%$el.html(template(model.toJSON()))%', 'render', 'item:rendered'];
  methods.Layout = ['generateProcess(RegionManager,,)'].concat(methods.ItemView);
  methods.CollectionView = ['before:render', 'collection:before:render', 'item:removed', 'generateProcess(ItemView, before:item:added, %$el.append(ItemView.el)%|after:item:added)', 'render', 'collection:rendered'];
  methods.CompositeView = methods.CollectionView.slice(0);
  methods.CompositeView.splice(4, 0, 'composite:rendered');
  methods.CompositeView.splice(2, 0, '%$el.html(template(model.toJSON()))%', 'composite:model:rendered');


  var process = document.getElementById('process');
  var dropdown = document.getElementById('marionetteView');

  var itemMap = function(item) {
    return '<li class="' + item.className + '"><code>' + item.content + '</code>';
  };

  var addViewClass = function(view, parentView) {
    return '<span class="view' + ( parentView ? '' : ' view-parent') + '">' + view + '</span>';
  };

  var processEvent = function(view, eventName, parentView) {
    var extras = eventName.split(/::(?=[^\)]*(?:\(|$))/);
    eventName = extras.shift();
    var items = [{
      className: 'event',
      content: addViewClass(view, parentView) + '.on(' + eventName + ')'
    }];
    extras.forEach(function(extra) {
      items = items.concat(processStep(view, extra, parentView));
    });
    return items.concat({
      className: 'trigger',
      content: addViewClass(view, parentView) + '.on' + eventName.replace(splitter, getEventName)
    });
  };

  var processStep = function(view, event, parentView) {
    var items = [];
    var action = event.match(/^%(.*)%$/);
    var generate = event.match(/^generateProcess\((.*?)\)$/);
    view = parentView && ! view.match('Region') ? 'child' : view;
    console.log(view, parentView, event);
    if ( action ) {
      items.push({
        className: 'action',
        content: addViewClass(view, parentView) + '.' + action[1]
      });
    } else if ( generate ) {
      items.push({
        className: 'iterator',
        content: addViewClass(view, parentView) + '.children.each<ul>' + generateProcess.apply(this, generate[1].split(/, */, 3).concat(view, parentView) ).map(itemMap).join('') + '</ul>'
      });
    } else {
      items = items.concat(processEvent(view, event, parentView));
    }
    return items;
  };

  var generateProcess = function(view, before, after, parentView, parentParentView) {
    var items = [];
    if ( before ) {
      before = before.split('|');
      before.forEach(function(step) {
        items = items.concat(processStep(parentView, step, parentParentView));
      });
    }
    methods[view].forEach(function(event) {
      items = items.concat(processStep(view, event, parentView));
    });
    if ( after ) {
      after = after.split('|');
      after.forEach(function(step) {
        items = items.concat(processStep(parentView, step, parentParentView));
      });
    }
    return items;
  };

  var swapTriggers = function(ev) {
    var view = this.value;
    var items = generateProcess(view);
    var show = 'show::dom:refresh';
    items = items.concat(processStep('Region', '%$el.empty().append(' + view + '.el)%', view));
    items = items.concat(processEvent('Region', 'show', view));
    if ( view !== 'ItemView' && view !== 'Layout' ) {
      show += '::generateProcess(child,,)';
    }
    items = items.concat(processStep(view, show));
    process.innerHTML = items.map(itemMap).join('');
  };

  dropdown.addEventListener('change', swapTriggers, false);
  swapTriggers.call(dropdown);
})();
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Marionette Render Process</title>
	<style>
	body, select {
	font-family: sans-serif;
	}
	ul {
	padding-left: 20px;
	}
	ul ul {
	margin-bottom: 5px;
	}
	.key span:before {
	content: '•';
	}
	.key span:after {
	content: attr(class);
	margin: 0 10px 0 5px;
	}
	.event {
	color: darkgreen;
	}
	.trigger {
	color: darkblue;
	}
	.action {
	color: orange;
	}
	.iterator {
	color: purple;
	font-style: italic;
	}
	.iterator ul {
	font-style: normal;
	}
	.view-parent {
	font-weight: 700;
	}
	</style>
	</head>
	<body>
	<h1>Marionette Render Process</h1>
	<div class="key">
	<span class="event"></span>
	<span class="trigger"></span>
	<span class="action"></span>
	<span class="iterator"></span>
	</div>
	<p><code>Region.show(<select id="marionetteView">
	<option>ItemView</option>
	<option>Layout</option>
	<option>CollectionView</option>
	<option>CompositeView</option>
	</select>);</code></p>
	<ul id="process"></ul>
	<script>
	(function() {
	// Taken from marionette.triggermethod.js

	// split the event name on the :
	var splitter = /(^\|:)(\w)/gi;

	// take the event section ("section1:section2:section3")
	// and turn it in to uppercase name
	function getEventName(match, prefix, eventName) {
	return eventName.toUpperCase();
	}

	// end

	var methods = {};
	methods.Region = [];
	methods.child = ['show::dom:refresh'];
	methods.RegionManager = ['generateProcess(Region, region:add::region:add, )'];
	methods.ItemView = ['before:render', 'item:before:render', '%$el.html(template(model.toJSON()))%', 'render', 'item:rendered'];
	methods.Layout = ['generateProcess(RegionManager,,)'].concat(methods.ItemView);
	methods.CollectionView = ['before:render', 'collection:before:render', 'item:removed', 'generateProcess(ItemView, before:item:added, %$el.append(ItemView.el)%\|after:item:added)', 'render', 'collection:rendered'];
	methods.CompositeView = methods.CollectionView.slice(0);
	methods.CompositeView.splice(4, 0, 'composite:rendered');
	methods.CompositeView.splice(2, 0, '%$el.html(template(model.toJSON()))%', 'composite:model:rendered');


	var process = document.getElementById('process');
	var dropdown = document.getElementById('marionetteView');

	var itemMap = function(item) {
	return '<li class="' + item.className + '"><code>' + item.content + '</code>';
	};

	var addViewClass = function(view, parentView) {
	return '<span class="view' + ( parentView ? '' : ' view-parent') + '">' + view + '</span>';
	};

	var processEvent = function(view, eventName, parentView) {
	var extras = eventName.split(/::(?=[^\)]*(?:\(\|$))/);
	eventName = extras.shift();
	var items = [{
	className: 'event',
	content: addViewClass(view, parentView) + '.on(' + eventName + ')'
	}];
	extras.forEach(function(extra) {
	items = items.concat(processStep(view, extra, parentView));
	});
	return items.concat({
	className: 'trigger',
	content: addViewClass(view, parentView) + '.on' + eventName.replace(splitter, getEventName)
	});
	};

	var processStep = function(view, event, parentView) {
	var items = [];
	var action = event.match(/^%(.*)%$/);
	var generate = event.match(/^generateProcess\((.*?)\)$/);
	view = parentView && ! view.match('Region') ? 'child' : view;
	console.log(view, parentView, event);
	if ( action ) {
	items.push({
	className: 'action',
	content: addViewClass(view, parentView) + '.' + action[1]
	});
	} else if ( generate ) {
	items.push({
	className: 'iterator',
	content: addViewClass(view, parentView) + '.children.each<ul>' + generateProcess.apply(this, generate[1].split(/, */, 3).concat(view, parentView) ).map(itemMap).join('') + '</ul>'
	});
	} else {
	items = items.concat(processEvent(view, event, parentView));
	}
	return items;
	};

	var generateProcess = function(view, before, after, parentView, parentParentView) {
	var items = [];
	if ( before ) {
	before = before.split('\|');
	before.forEach(function(step) {
	items = items.concat(processStep(parentView, step, parentParentView));
	});
	}
	methods[view].forEach(function(event) {
	items = items.concat(processStep(view, event, parentView));
	});
	if ( after ) {
	after = after.split('\|');
	after.forEach(function(step) {
	items = items.concat(processStep(parentView, step, parentParentView));
	});
	}
	return items;
	};

	var swapTriggers = function(ev) {
	var view = this.value;
	var items = generateProcess(view);
	var show = 'show::dom:refresh';
	items = items.concat(processStep('Region', '%$el.empty().append(' + view + '.el)%', view));
	items = items.concat(processEvent('Region', 'show', view));
	if ( view !== 'ItemView' && view !== 'Layout' ) {
	show += '::generateProcess(child,,)';
	}
	items = items.concat(processStep(view, show));
	process.innerHTML = items.map(itemMap).join('');
	};

	dropdown.addEventListener('change', swapTriggers, false);
	swapTriggers.call(dropdown);
	})();
	</script>
	</body>
	</html>