Start of custom context menu for procedure creation

This commit is contained in:
lwark
2025-05-29 14:13:16 -05:00
parent fef964fba0
commit a2e1c52f22
6 changed files with 179 additions and 58 deletions

View File

@@ -109,4 +109,14 @@ div.gallery {
.grid-item p {
max-width: 100%;
border-radius: 8px;
}
}
.context-menu {
display: none;
position: absolute;
z-index: 10;
}
.context-menu--active {
display: block;
}

View File

@@ -1,6 +1,6 @@
<div class="plate" id="plate-container" style="grid-template-columns: repeat({{ plate_columns }}, {{ vw }}vw);grid-template-rows: repeat({{ plate_rows }}, {{ vw }}vw);">
{% for sample in samples %}
<div class="well" draggable="true" id="sample_{{ sample['submission_rank'] }}" style="background-color: {{ sample['background_color'] }};">
<div class="well" draggable="true" id="{{ sample['well_id'] }}" style="background-color: {{ sample['background_color'] }};">
<p style="font-size: 0.7em; text-align: center; word-wrap: break-word;">{{ sample['sample_id'] }}</p>
<!-- <div class="tooltip" style="font-size: 0.5em; text-align: center; word-wrap: break-word;">{{ sample['sample_id'] }}-->
<!-- <span class="tooltiptext">{{ sample['tooltip'] }}</span>-->

View File

@@ -45,6 +45,25 @@
</div>
</div>
{% endblock %}
<nav class="context-menu">
<ul class="context-menu__items">
<li class="context-menu__item">
<a href="#" class="context-menu__link">
<i class="fa fa-eye"></i> View Task
</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link">
<i class="fa fa-edit"></i> Edit Task
</a>
</li>
<li class="context-menu__item">
<a href="#" class="context-menu__link">
<i class="fa fa-times"></i> Delete Task
</a>
</li>
</ul>
</nav>
</body>
<script>
{% block script %}
@@ -114,11 +133,25 @@
output = [];
fullGrid = [...gridContainer.children];
fullGrid.forEach(function(item, index) {
output.push({item: item, index: index})
output.push({sample_id: item.id, index: index + 1})
});
backend.replow(output);
backend.rearrange_plate(output);
}
});
// Context Menu Functionality
var wells = document.querySelectorAll(".well");
for ( var i = 0, len = wells.length; i < len; i++ ) {
var welloi = wells[i];
welloi.addEventListener( "contextmenu", function(e) {
well = e.target
backend.log_drag(well.id, "el");
});
};
{% endblock %}
</script>
</html>