nodebb/public/templates/admin/categories.tpl

<h1>Categories</h1>

<hr />
<ul class="nav nav-pills">
	<li class='active'><a href='/admin/categories/active'>Active</a></li>
	<li class=''><a href='/admin/categories/disabled'>Disabled</a></li>
</ul>


    	
<div class="row-fluid admin-categories">
	<ul class="span12" id="entry-container">
	<!-- BEGIN categories -->
		<li class="entry-row {categories.blockclass}">
			<form class="form-inline">
				<div class="icon">
					<i onclick="select_icon(this);" class="{categories.icon} icon-2x"></i>
				</div>
				<input placeholder="Category Name" value="{categories.name}" class="input-medium"></input>
				<select class="blockclass input-medium" data-value="{categories.blockclass}" onchange="update_blockclass(this);">
					<option value="category-purple">category-purple</option>
					<option value="category-darkblue">category-darkblue</option>
					<option value="category-blue">category-blue</option>
					<option value="category-darkgreen">category-darkgreen</option>
					<option value="category-orange">category-orange</option>
				</select>
				<!--<input value="{categories.icon}" class="input-medium" onchange="update_icon(this);"></input>-->
				<input placeholder="Category Description" value="{categories.description}" class="input-medium description"></input>
				<!--<a target="_blank" href="../category/{categories.slug}">category/{categories.slug}</a>-->

				<!--<div style="float: right">
					<button class="btn btn-large btn-inverse">Save</button>
				</div>-->
			</form>
		</li>

	<!-- END categories -->
	</ul>
</div>



<script type="text/javascript">

function select_icon(el) {
	var selected = el.className.replace(' icon-2x', '');
	jQuery('#icons .selected').removeClass('selected');
	jQuery('#icons .' + selected).parent().addClass('selected');



	bootbox.confirm('<h2>Select an icon.</h2>' + document.getElementById('icons').innerHTML, function(confirm) {
		if (confirm) {
			var iconClass = jQuery('.bootbox .selected').children(':first').attr('class');
			el.className = iconClass + ' icon-2x';
		}
	});

	jQuery('.bootbox .span3').on('click', function() {
		jQuery('.bootbox .selected').removeClass('selected');
		jQuery(this).addClass('selected');
	})
}


function update_blockclass(el) {
	el.parentNode.parentNode.className = 'entry-row ' + el.value;
}
function update_icon(el) {
	jQuery(el.parentNode.parentNode);
}

jQuery('#entry-container').sortable();
jQuery('.blockclass').each(function() {
	jQuery(this).val(this.getAttribute('data-value'));
});


//DRY Failure. this needs to go into an ajaxify onready style fn. Currently is copy pasted into every single function so after ACP is off the ground fix asap 
(function() {
	jQuery('document').ready(function() {
		var url = window.location.href,
			parts = url.split('/'),
			active = parts[parts.length-1];

		jQuery('.nav-pills li').removeClass('active');
		jQuery('.nav-pills li a').each(function() {
			if (this.getAttribute('href').match(active)) {
				jQuery(this.parentNode).addClass('active');
				return false;
			}
		})
	});
	
}());
</script>


<div id="icons" style="display:none;"><div class="icon-container"><div class="row">
  <div class="span3"><i class="icon-compass"></i></div><div class="span3"><i class="icon-collapse"></i></div><div class="span3"><i class="icon-collapse-top"></i></div><div class="span3"><i class="icon-expand"></i></div><div class="span3"><i class="icon-eur"></i></div><div class="span3"><i class="icon-euro"></i></div><div class="span3"><i class="icon-gbp"></i></div><div class="span3"><i class="icon-usd"></i></div><div class="span3"><i class="icon-dollar"></i></div><div class="span3"><i class="icon-inr"></i></div><div class="span3"><i class="icon-rupee"></i></div><div class="span3"><i class="icon-jpy"></i></div><div class="span3"><i class="icon-yen"></i></div><div class="span3"><i class="icon-cny"></i></div><div class="span3"><i class="icon-renminbi"></i></div><div class="span3"><i class="icon-krw"></i></div><div class="span3"><i class="icon-won"></i></div><div class="span3"><i class="icon-btc"></i></div><div class="span3"><i class="icon-bitcoin"></i></div><div class="span3"><i class="icon-file"></i></div><div class="span3"><i class="icon-file-text"></i></div><div class="span3"><i class="icon-sort-by-alphabet"></i></div><div class="span3"><i class="icon-sort-by-alphabet-alt"></i></div><div class="span3"><i class="icon-sort-by-attributes"></i></div><div class="span3"><i class="icon-sort-by-attributes-alt"></i></div><div class="span3"><i class="icon-sort-by-order"></i></div><div class="span3"><i class="icon-sort-by-order-alt"></i></div><div class="span3"><i class="icon-thumbs-up"></i></div><div class="span3"><i class="icon-thumbs-down"></i></div><div class="span3"><i class="icon-youtube-sign"></i></div><div class="span3"><i class="icon-youtube"></i></div><div class="span3"><i class="icon-xing"></i></div><div class="span3"><i class="icon-xing-sign"></i></div><div class="span3"><i class="icon-youtube-play"></i></div><div class="span3"><i class="icon-dropbox"></i></div><div class="span3"><i class="icon-stackexchange"></i></div><div class="span3"><i class="icon-instagram"></i></div><div class="span3"><i class="icon-flickr"></i></div><div class="span3"><i class="icon-adn"></i></div><div class="span3"><i class="icon-bitbucket"></i></div><div class="span3"><i class="icon-bitbucket-sign"></i></div><div class="span3"><i class="icon-tumblr"></i></div><div class="span3"><i class="icon-tumblr-sign"></i></div><div class="span3"><i class="icon-long-arrow-down"></i></div><div class="span3"><i class="icon-long-arrow-up"></i></div><div class="span3"><i class="icon-long-arrow-left"></i></div><div class="span3"><i class="icon-long-arrow-right"></i></div><div class="span3"><i class="icon-apple"></i></div><div class="span3"><i class="icon-windows"></i></div><div class="span3"><i class="icon-android"></i></div><div class="span3"><i class="icon-linux"></i></div><div class="span3"><i class="icon-dribbble"></i></div><div class="span3"><i class="icon-skype"></i></div><div class="span3"><i class="icon-foursquare"></i></div><div class="span3"><i class="icon-trello"></i></div><div class="span3"><i class="icon-female"></i></div><div class="span3"><i class="icon-male"></i></div><div class="span3"><i class="icon-gittip"></i></div><div class="span3"><i class="icon-sun"></i></div><div class="span3"><i class="icon-moon"></i></div><div class="span3"><i class="icon-archive"></i></div><div class="span3"><i class="icon-bug"></i></div><div class="span3"><i class="icon-vk"></i></div><div class="span3"><i class="icon-weibo"></i></div><div class="span3"><i class="icon-renren"></i></div><div class="span3"><i class="icon-adjust"></i></div><div class="span3"><i class="icon-anchor"></i></div><div class="span3"><i class="icon-archive"></i></div><div class="span3"><i class="icon-asterisk"></i></div><div class="span3"><i class="icon-ban-circle"></i></div><div class="span3"><i class="icon-bar-chart"></i></div><div class="span3"><i class="icon-barcode"></i></div><div class="span3"><i class="icon-beaker"></i></div><div class="span3"><i class="icon-beer"></i></div><div class="span3"><i class="icon-bell"></i></div><div class="span3"><i class="icon-bell-alt"></i></div><div class
  <div class="span3"><i class="icon-align-center"></i></div><div class="span3"><i class="icon-align-justify"></i></div><div class="span3"><i class="icon-align-left"></i></div><div class="span3"><i class="icon-align-right"></i></div><div class="span3"><i class="icon-bold"></i></div><div class="span3"><i class="icon-columns"></i></div><div class="span3"><i class="icon-copy"></i></div><div class="span3"><i class="icon-cut"></i></div><div class="span3"><i class="icon-eraser"></i></div><div class="span3"><i class="icon-file"></i></div><div class="span3"><i class="icon-file-alt"></i></div><div class="span3"><i class="icon-file-text"></i></div><div class="span3"><i class="icon-file-text-alt"></i></div><div class="span3"><i class="icon-font"></i></div><div class="span3"><i class="icon-indent-left"></i></div><div class="span3"><i class="icon-indent-right"></i></div><div class="span3"><i class="icon-italic"></i></div><div class="span3"><i class="icon-link"></i></div><div class="span3"><i class="icon-list"></i></div><div class="span3"><i class="icon-list-alt"></i></div><div class="span3"><i class="icon-list-ol"></i></div><div class="span3"><i class="icon-list-ul"></i></div><div class="span3"><i class="icon-paper-clip"></i></div><div class="span3"><i class="icon-paperclip"></i></div><div class="span3"><i class="icon-paste"></i></div><div class="span3"><i class="icon-repeat"></i></div><div class="span3"><i class="icon-rotate-left"></i></div><div class="span3"><i class="icon-rotate-right"></i></div><div class="span3"><i class="icon-save"></i></div><div class="span3"><i class="icon-strikethrough"></i></div><div class="span3"><i class="icon-table"></i></div><div class="span3"><i class="icon-text-height"></i></div><div class="span3"><i class="icon-text-width"></i></div><div class="span3"><i class="icon-th"></i></div><div class="span3"><i class="icon-th-large"></i></div><div class="span3"><i class="icon-th-list"></i></div><div class="span3"><i class="icon-underline"></i></div><div class="span3"><i class="icon-undo"></i></div><div class="span3"><i class="icon-unlink"></i></div><div class="span3"><i class="icon-angle-down"></i></div><div class="span3"><i class="icon-angle-left"></i></div><div class="span3"><i class="icon-angle-right"></i></div><div class="span3"><i class="icon-angle-up"></i></div><div class="span3"><i class="icon-arrow-down"></i></div><div class="span3"><i class="icon-arrow-left"></i></div><div class="span3"><i class="icon-arrow-right"></i></div><div class="span3"><i class="icon-arrow-up"></i></div><div class="span3"><i class="icon-caret-down"></i></div><div class="span3"><i class="icon-caret-left"></i></div><div class="span3"><i class="icon-caret-right"></i></div><div class="span3"><i class="icon-caret-up"></i></div><div class="span3"><i class="icon-chevron-down"></i></div><div class="span3"><i class="icon-chevron-left"></i></div><div class="span3"><i class="icon-chevron-right"></i></div><div class="span3"><i class="icon-chevron-sign-down"></i></div><div class="span3"><i class="icon-chevron-sign-left"></i></div><div class="span3"><i class="icon-chevron-sign-right"></i></div><div class="span3"><i class="icon-chevron-sign-up"></i></div><div class="span3"><i class="icon-chevron-up"></i></div><div class="span3"><i class="icon-circle-arrow-down"></i></div><div class="span3"><i class="icon-circle-arrow-left"></i></div><div class="span3"><i class="icon-circle-arrow-right"></i></div><div class="span3"><i class="icon-circle-arrow-up"></i></div><div class="span3"><i class="icon-double-angle-down"></i></div><div class="span3"><i class="icon-double-angle-left"></i></div><div class="span3"><i class="icon-double-angle-right"></i></div><div class="span3"><i class="icon-double-angle-up"></i></div><div class="span3"><i class="icon-hand-down"></i></div><div class="span3"><i class="icon-hand-left"></i></div><div class="span3"><i class="icon-hand-right"></i></div><div class="span3"><i class="icon-hand-up"></i></div><div class="span3"><i class="icon-long-arrow-down"></i></div><div class="span3"><i class="icon-long-arrow-left"></i></div><div c
  <div class="span3"><i class="icon-adn"></i></div><div class="span3"><i class="icon-android"></i></div><div class="span3"><i class="icon-apple"></i></div><div class="span3"><i class="icon-bitbucket"></i></div><div class="span3"><i class="icon-bitbucket-sign"></i></div><div class="span3"><i class="icon-bitcoin"></i></div><div class="span3"><i class="icon-btc"></i></div><div class="span3"><i class="icon-css3"></i></div><div class="span3"><i class="icon-dribbble"></i></div><div class="span3"><i class="icon-dropbox"></i></div><div class="span3"><i class="icon-facebook"></i></div><div class="span3"><i class="icon-facebook-sign"></i></div><div class="span3"><i class="icon-flickr"></i></div><div class="span3"><i class="icon-foursquare"></i></div><div class="span3"><i class="icon-github"></i></div><div class="span3"><i class="icon-github-alt"></i></div><div class="span3"><i class="icon-github-sign"></i></div><div class="span3"><i class="icon-gittip"></i></div><div class="span3"><i class="icon-google-plus"></i></div><div class="span3"><i class="icon-google-plus-sign"></i></div><div class="span3"><i class="icon-html5"></i></div><div class="span3"><i class="icon-instagram"></i></div><div class="span3"><i class="icon-linkedin"></i></div><div class="span3"><i class="icon-linkedin-sign"></i></div><div class="span3"><i class="icon-linux"></i></div><div class="span3"><i class="icon-maxcdn"></i></div><div class="span3"><i class="icon-pinterest"></i></div><div class="span3"><i class="icon-pinterest-sign"></i></div><div class="span3"><i class="icon-renren"></i></div><div class="span3"><i class="icon-skype"></i></div><div class="span3"><i class="icon-stackexchange"></i></div><div class="span3"><i class="icon-trello"></i></div><div class="span3"><i class="icon-tumblr"></i></div><div class="span3"><i class="icon-tumblr-sign"></i></div><div class="span3"><i class="icon-twitter"></i></div><div class="span3"><i class="icon-twitter-sign"></i></div><div class="span3"><i class="icon-vk"></i></div><div class="span3"><i class="icon-weibo"></i></div><div class="span3"><i class="icon-windows"></i></div><div class="span3"><i class="icon-xing"></i></div><div class="span3"><i class="icon-xing-sign"></i></div><div class="span3"><i class="icon-youtube"></i></div><div class="span3"><i class="icon-youtube-play"></i></div><div class="span3"><i class="icon-youtube-sign"></i></div>
  <div class="span3"><i class="icon-ambulance"></i></div><div class="span3"><i class="icon-h-sign"></i></div><div class="span3"><i class="icon-hospital"></i></div><div class="span3"><i class="icon-medkit"></i></div><div class="span3"><i class="icon-plus-sign-alt"></i></div><div class="span3"><i class="icon-stethoscope"></i></div><div class="span3"><i class="icon-user-md"></i></div>
</div></div></div>