Adds context menu with delete option.

src/_h5ai/css/inc/context-menu.less

@@ -0,0 +1,37 @@
+
+#extended .context-menu {
+
+	display: block;
+	position: absolute;
+	right: 0;
+	top: 0;
+	background-color: rgb(241,241,241);
+	// border: 1px solid rgb(210,210,210);
+	border: 2px solid rgb(210,210,210);
+	color: #999;
+	z-index: 10;
+	font-size: 0.9em;
+	.border-radius(4px);
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		text-align: left;
+
+		li {
+			// padding: 8px 12px 10px 12px;
+			padding: 4px 4px 4px 4px;
+			white-space: nowrap;
+			border-top: 1px solid rgb(231,231,231);
+			.transition(all 0.2s ease-in-out);
+			.border-radius(4px);
+
+			&:hover {
+				color: #e80;
+				background-color: rgba(255,255,255,0.8);
+			}
+		}
+	}
+}
+

src/_h5ai/css/styles.less

@@ -23,6 +23,7 @@ body {
 
 @import "inc/content";
 @import "inc/extended";
+@import "inc/context-menu";
 @import "inc/dropbox";
 
 @import "inc/bottombar";

src/_h5ai/js/inc/ext/context-menu.js

@@ -0,0 +1,84 @@
+
+modulejs.define('ext/context-menu', ['_', '$', 'core/settings', 'core/entry', 'core/event', 'core/resource'], function (_, $, allsettings, entry, event, resource) {
+
+	var defaults = {
+			enabled: false,
+			deleteBtn: false
+		},
+
+		settings = _.extend({}, defaults, allsettings['context-menu']),
+
+		template = '<div class="context-menu">' +
+						'<ul></ul>' +
+					'</div>',
+
+		// deleteTmp = '<li class="delete">delete</li>',
+		deleteTmp = '<li class="delete"><img src="' + resource.image('delete') + '" /> <span>delete</span></li>',
+		// deleteTmp = '<li class="delete"><img src="' + resource.image('delete') + '" /></li>',
+
+
+		createDeleteBtn = function (entry, $ul) {
+
+			var $del = $(deleteTmp).appendTo($ul);
+
+			$del.on('click', function (event) {
+
+				console.log('delete', entry.label);
+				$.ajax({
+					url: resource.api(),
+					data: {
+						action: 'delete',
+						href: entry.absHref
+					},
+					dataType: 'json',
+					success: function (json) {
+
+					}
+				});
+			});
+		},
+
+		createMenu = function (entry) {
+
+			var $html = $(template),
+				$ul = $html.find('ul');
+
+			$html.on('click', function (event) {
+
+				event.stopPropagation();
+				event.preventDefault();
+			});
+
+			createDeleteBtn(entry, $ul);
+
+			entry.$extended.find('a').append($html);
+		},
+
+		init = function () {
+
+			if (!settings.enabled) {
+				return;
+			}
+
+			event.sub('entry.mouseenter', function (entry) {
+
+				if (!entry.isFolder()) {
+					var ctx = entry.$extended.find('.context-menu');
+					if (ctx.length) {
+						ctx.show();
+					} else {
+						createMenu(entry);
+					}
+				}
+			});
+
+			event.sub('entry.mouseleave', function (entry) {
+
+				// entry.$extended.find('.context-menu').remove();
+				entry.$extended.find('.context-menu').hide();
+			});
+
+		};
+
+	init();
+});

src/_h5ai/js/inc/main.js

@@ -24,6 +24,7 @@
 	// @include "view/viewmode.js"
 
 	// @include "ext/autoupdate.js"
+	// @include "ext/context-menu.js"
 	// @include "ext/crumb.js"
 	// @include "ext/custom.js"
 	// @include "ext/download.js"