Source: metaview.js

/**
 * metaview.js is part of Aloha Editor project http://www.alohaeditor.org
 *
 * Aloha Editor ● JavaScript Content Editing Library
 * Copyright (c) 2010-2015 Gentics Software GmbH, Vienna, Austria.
 * Contributors http://www.alohaeditor.org/docs/contributing.html
 *
 * @reference: cssminimizer.com
 * @namespace metaview
 */
define(['dom'], function (Dom) {
	'use strict';

	var sectioning = ['p', 'div', 'table', 'ol', 'ul'];
	var heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

	function join(list, prefix, suffix) {
		prefix = prefix || '';
		suffix = suffix || '';
		return list.map(function (item) { return prefix + item + suffix; }).join(',');
	}

	var brStyles = 'content:"↵" !important;'
	             + 'white-space:initial !important;'
	             + 'line-height:inherit !important;'
	             + 'font-size:inherit !important;'
	             + 'font-style:normal !important;'
	             + 'font-weight:700 !important;'
	             + 'left:0 !important;'
	             + 'top:0 !important;'
	             + 'border:0;'
	             + 'opacity:.5;';

	var CSS

		// outlines
		= '.✪{outline:5px solid #fce05e;}'
	    + '.✪ *{border:1px solid rgba(0,0,0,0.1)}'
		+ join(sectioning.concat(heading), '.✪ ')
		+ '{border-style:dotted;border-width:2px}'
		+ '.✪ b    {border-color:#f47d43}'
		+ '.✪ i    {border-color:#82b5e0}'
		+ '.✪ u    {border-color:#bb94b7}'
		+ '.✪ s    {border-color:#3b94b7}'
		+ '.✪ span {border-color:#bb94b7}'
		+ '.✪ code {border-color:#999999}'
		+ '.✪ pre  {border-color:#999999}'
		+ '.✪ ul   {border-color:#91c9cf}'
		+ '.✪ ol   {border-color:#91c9cf}'
		+ '.✪ p    {border-color:#bdd74b}'
		+ '.✪ h1,.✪ h2,.✪ h3,.✪ h4,.✪ h5,.✪ h6 {border-color:#f47d43}'
		+ '.✪ br,.✪ br:before{' + brStyles + '}'
		+ '.✪ br:after {content:"\\A" !important;white-space:pre-line}'

		// tagnames
	    + '.✪✪ *{position:relative}'
	    + '.✪✪ *::before{position:absolute;top:-2px;left:-2px;line-height:8px;'
		+ 'font-size:8px;font-weight:bold;font-style:normal;'
		+ 'letter-spacing:0.5px;background:#fff;color:#111;opacity:0.5}'
		+ '.✪✪ td::before{content:"TD"}'
		+ '.✪✪ th::before{content:"TH"}'
		+ '.✪✪ a::before{content:"A"}'
		+ '.✪✪ b::before{content:"B"}'
		+ '.✪✪ i::before{content:"I"}'
		+ '.✪✪ u::before{content:"U"}'
		+ '.✪✪ s::before{content:"S"}'
		+ '.✪✪ p::before{content:"P"}'
		+ '.✪✪ ul::before{content:"UL"}'
		+ '.✪✪ ol::before{content:"OL"}'
		+ '.✪✪ li::before{content:"LI"}'
		+ '.✪✪ h1::before{content:"H1"}'
		+ '.✪✪ h2::before{content:"H2"}'
		+ '.✪✪ h3::before{content:"H3"}'
		+ '.✪✪ h4::before{content:"H4"}'
		+ '.✪✪ h5::before{content:"H5"}'
		+ '.✪✪ h6::before{content:"H6"}'
		+ '.✪✪ div::before{content:"DIV"}'
		+ '.✪✪ sup::before{content:"SUP"}'
		+ '.✪✪ sub::before{content:"SUB"}'
		+ '.✪✪ pre::before{content:"PRE"}'
		+ '.✪✪ span::before{content:"SPAN"}'
		+ '.✪✪ code::before{content:"CODE"}'

		// padding
		+ '.✪✪✪{padding:10px}'
		+ '.✪✪✪ *{padding:2px 4px;margin:2px}';

	/**
	 * Inserts the necessary styles into the given document head.
	 *
	 * @private
	 * @param {!Document} doc
	 */
	function insertStyle(doc) {
		var metaview = doc.createElement('style');
		Dom.setAttr(metaview, 'id', 'aloha-metaview');
		Dom.append(metaview, doc['head']);
		Dom.append(doc.createTextNode(CSS), metaview);
	}

	var OUTLINE_CLASS = '✪';
	var TAGNAME_CLASS = '✪✪';
	var PADDING_CLASS = '✪✪✪';

	/**
	 * Toggles metaview mode.
	 *
	 * @usage:
	 * aloha.metaview.toggle(editable, {
	 *		outline: true,
	 *		tagname: true,
	 *		padding: true
	 * });
	 *
	 * @param {!Element} editable
	 * @param {Object=}  opts
	 * @memberOf metaview
	 */
	function toggle(editable, opts) {
		if (!editable.ownerDocument.querySelector('style#aloha-metaview')) {
			insertStyle(editable.ownerDocument);
		}
		opts = opts || {};
		if (opts['outline']) {
			Dom.addClass(editable, OUTLINE_CLASS);
		} else {
			Dom.removeClass(editable, OUTLINE_CLASS);
		}
		if (opts['tagname']) {
			Dom.addClass(editable, TAGNAME_CLASS);
		} else {
			Dom.removeClass(editable, TAGNAME_CLASS);
		}
		if (opts['padding']) {
			Dom.addClass(editable, PADDING_CLASS);
		} else {
			Dom.removeClass(editable, PADDING_CLASS);
		}
	}

	return { toggle: toggle };
});