Adds a yet unstyled selector.

src/_h5ai/client/css/inc/view.less

@@ -9,6 +9,45 @@
 	background-color: rgba(0,0,0,0.01);
 }
 
+#selector {
+	position: absolute;
+	left: 8px;
+	top: 8px;
+	width: 16px;
+	height: 16px;
+	background-color: #fff;
+	border: 1px solid #555;
+	border-radius: 100px;
+	opacity: 0.7;
+	cursor: pointer;
+
+	.on-selected, .on-not-selected {
+		display: block;
+		width: 16px;
+		height: 16px;
+	}
+
+	&:hover {
+		opacity: 1;
+	}
+}
+
+.item.selected {
+	#selector {
+		.on-not-selected {
+			display: none;
+		}
+	}
+}
+.item:not(.selected) {
+	#selector {
+		.on-selected {
+			display: none;
+		}
+	}
+}
+
+
 @item-border-col-sep: @col-border;
 
 @item-background-col-hover: rgba(0,0,0,0.02);

src/_h5ai/client/js/inc/ext/select.js

@@ -1,5 +1,5 @@
 
-modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/event'], function (_, $, allsettings, event) {
+modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/resource', 'core/event'], function (_, $, allsettings, resource, event) {
 
 	var settings = _.extend({
 			enabled: false
@@ -111,8 +111,38 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/event'], functio
 			}
 		},
 
-		onLocationChanged = function () {
+		initItem = function (item) {
 
+			if (item.$view) {
+				item.$view
+					.on('mouseenter', function () {
+
+						$('#selector').remove();
+						$('<div id="selector">' +
+							'<img src="' + resource.image('select') + '" class="on-selected" alt="selected" />' +
+							'<img src="' + resource.image('blank') + '" class="on-not-selected" alt="not-selected" />' +
+							'</div>')
+							.on('click', function (event) {
+
+								event.stopImmediatePropagation();
+								event.preventDefault();
+								console.log('icon', event);
+
+								item.$view.toggleClass('selected');
+								publish();
+							})
+							.appendTo(item.$view.find('a'));
+					})
+					.on('mouseleave', function () {
+
+						$('#selector').remove();
+					});
+			}
+		},
+
+		onLocationChanged = function (item) {
+
+			_.each(item.content, initItem);
 			publish();
 		},
 
@@ -120,6 +150,7 @@ modulejs.define('ext/select', ['_', '$', 'core/settings', 'core/event'], functio
 
 			var selectionChanged = false;
 
+			_.each(added, initItem);
 			_.each(removed, function (item) {
 
 				if (item.$view && item.$view.hasClass('selected')) {