Changed algorithms menu design.

This commit is contained in:
Oleg Sh 2022-02-12 20:16:29 +02:00
parent 9c6cfb4197
commit 430e6a80be
26 changed files with 180 additions and 22 deletions

View File

@ -387,4 +387,16 @@
.small-bottom-marging
{
margin-bottom: 4px;
}
.small-top-marging
{
margin-top: 4px;
}
.categoryButton {
width: 100%;
text-align: left;
border: none;
border-radius: 0px
}

View File

@ -272,4 +272,7 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang['find_all_paths_from_vertex'] = "Намерете всички най-кратки пътища от връх";
$g_lang['distance_from'] = "Разстояние от ";
$g_lang['path_to'] = "Път до ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -272,4 +272,7 @@
$g_lang['find_all_paths_from_vertex'] = "从一个顶点找所有最短路";
$g_lang['distance_from'] = "距离从";
$g_lang['path_to'] = "路线至 ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -235,4 +235,7 @@
$g_lang['find_all_paths_from_vertex'] = "Find all shortest paths from vertex";
$g_lang['distance_from'] = "Distance from ";
$g_lang['path_to'] = "Path to ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -273,4 +273,7 @@
$g_lang['find_all_paths_from_vertex'] = "Find all shortest paths from vertex";
$g_lang['distance_from'] = "Distance from ";
$g_lang['path_to'] = "Path to ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -272,4 +272,7 @@ We have added Dutch translation 🇳🇱. Thank you Willie de Wit</a>";
$g_lang['find_all_paths_from_vertex'] = "Find all shortest paths from vertex";
$g_lang['distance_from'] = "Distance from ";
$g_lang['path_to'] = "Path to ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -271,5 +271,8 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
// FindShortPatchsFromOne.js
$g_lang['find_all_paths_from_vertex'] = "Find all shortest paths from vertex";
$g_lang['distance_from'] = "Distance from ";
$g_lang['path_to'] = "Path to ";
$g_lang['path_to'] = "Path to ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -239,5 +239,8 @@
// FindShortPatchsFromOne.js
$g_lang['find_all_paths_from_vertex'] = "Find all shortest paths from vertex";
$g_lang['distance_from'] = "Distance from ";
$g_lang['path_to'] = "Path to ";
$g_lang['path_to'] = "Path to ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -236,5 +236,8 @@
// FindShortPatchsFromOne.js
$g_lang['find_all_paths_from_vertex'] = "Find all shortest paths from vertex";
$g_lang['distance_from'] = "Distance from ";
$g_lang['path_to'] = "Path to ";
$g_lang['path_to'] = "Path to ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -237,5 +237,8 @@
// FindShortPatchsFromOne.js
$g_lang['find_all_paths_from_vertex'] = "Find all shortest paths from vertex";
$g_lang['distance_from'] = "Distance from ";
$g_lang['path_to'] = "Path to ";
$g_lang['path_to'] = "Path to ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -273,4 +273,8 @@
$g_lang['find_all_paths_from_vertex'] = "Найти все кратчайшие пути от вершины";
$g_lang['distance_from'] = "Расстояние от ";
$g_lang['path_to'] = "Путь до ";
$g_lang['search_pathes'] = "Поиск путей";
$g_lang['other_algorithms'] = "Другие алгоритмы";
?>

View File

@ -233,5 +233,8 @@
// FindShortPatchsFromOne.js
$g_lang['find_all_paths_from_vertex'] = "Find all shortest paths from vertex";
$g_lang['distance_from'] = "Distance from ";
$g_lang['path_to'] = "Path to ";
$g_lang['path_to'] = "Path to ";
$g_lang['search_pathes'] = "Search paths";
$g_lang['other_algorithms'] = "Other algorithms";
?>

View File

@ -141,6 +141,11 @@ BaseAlgorithm.prototype.IsSupportMultiGraph = function()
return false;
}
BaseAlgorithm.prototype.getCategory = function()
{
return 0;
}
/**
* Default handler.
* Select using mouse, drag.

View File

@ -1295,6 +1295,7 @@ Application.prototype.getAlgorithmNames = function()
obj.name = oneFactory.getName(g_language);
obj.id = oneFactory.getId();
obj.priority = oneFactory.getPriority();
obj.category = oneFactory.getCategory();
res.push(obj);
}

View File

@ -1,7 +1,7 @@
var SiteDir = "";
var DisableEmscripted = false;
var algorithmsVersion = 1;
var algorithmsVersion = 2;
var application = new Application(document, window);
@ -111,8 +111,8 @@ function createAlgorithmMenu()
{
algorithm = algorithms[i];
var list = document.getElementById("algorithmList");
var item = list.lastElementChild;
var list = document.getElementById("algorithmCategoryElements" + algorithm.category);
var item = document.getElementById("algTopic" + algorithm.category);
var clone = item.cloneNode(true);
var button = clone.getElementsByTagName("button")[0];
var textSpan = button.getElementsByTagName("span")[1];
@ -122,8 +122,9 @@ function createAlgorithmMenu()
buttonsList.push(algorithm.id);
button.onclick = function ()
button.onclick = function (e)
{
e["closeThisMenu"] = true;
userAction(this.id);
restButtons (this.id);
application.SetHandlerMode(this.id);
@ -144,7 +145,7 @@ function createAlgorithmMenu()
$(data.object).show();
});
list.appendChild(clone);
list.insertBefore(clone, document.getElementById("insert" + algorithm.category));
index++;
}
@ -643,7 +644,6 @@ function postLoadPage()
});
}
// Get algorithms list and load it.
$.get( "/" + SiteDir + "cgi-bin/getPluginsList.php",
function( data )
@ -675,6 +675,48 @@ function postLoadPage()
devTools.style.left = 0;
resizeCanvas();
application.onPostLoadEvent();
$(function() {
$('#algorithmList').on('click', function(event) {
if (!event.originalEvent.closeThisMenu) {
event.stopPropagation();
}
});
$(window).on('click', function() {
$('#algorithmList').slideUp();
});
});
let showHideCategory = function(button, elementsListName){
let width = $( button ).width();
let elementsList = $(elementsListName);
var hideMark = button.querySelector('span[name="hideMark"]')
var showMark = button.querySelector('span[name="showMark"]')
if (elementsList.is(":visible")) {
elementsList.hide();
$(hideMark).show();
$(showMark).hide();
} else {
elementsList.show();
$(hideMark).hide();
$(showMark).show();
}
$( button ).width(width);
userAction("algCategory_" + elementsListName);
}
$(document.getElementById("algorithmCategoryBtn1").querySelector('span[name="hideMark"]')).hide();
$(document.getElementById("algorithmCategoryBtn0").querySelector('span[name="hideMark"]')).hide();
$('#algorithmCategoryBtn1').click(function(){
showHideCategory(this, "#algorithmCategoryElements1");
});
$('#algorithmCategoryBtn0').click(function(){
showHideCategory(this, "#algorithmCategoryElements0");
});
}
//window.onload = function ()

View File

@ -29,6 +29,11 @@ BFSAlgorithm.prototype.getMessage = function(local)
return this.message;
}
BFSAlgorithm.prototype.getCategory = function()
{
return 1;
}
BFSAlgorithm.prototype.result = function(resultCallback)
{
var result = {};

View File

@ -70,6 +70,11 @@ DFSAlgorithm.prototype.getPriority = function()
return -9.5;
}
DFSAlgorithm.prototype.getCategory = function()
{
return 1;
}
DFSAlgorithm.prototype.step = function()
{
for (var i = this.visited.length - 1; i >= 0; i--)

View File

@ -30,6 +30,11 @@ FindEulerianLoop.prototype.getMessage = function(local)
return this.message;
}
FindEulerianLoop.prototype.getCategory = function()
{
return 1;
}
FindEulerianLoop.prototype.result = function(resultCallback)
{
this.outResultCallback = function (result ) { resultCallback(result); };

View File

@ -30,6 +30,11 @@ FindEulerianPath.prototype.getMessage = function(local)
return this.message;
}
FindEulerianPath.prototype.getCategory = function()
{
return 1;
}
FindEulerianPath.prototype.result = function(resultCallback)
{
this.outResultCallback = function (result ) { resultCallback(result); };

View File

@ -40,6 +40,11 @@ FindAllPathes.prototype.getMessage = function(local)
return this.message;
}
FindAllPathes.prototype.getCategory = function()
{
return 1;
}
FindAllPathes.prototype.result = function(resultCallback)
{
if (this.firstObject && this.secondObject)

View File

@ -40,6 +40,11 @@ FindShortPatchsFromOne.prototype.getMessage = function(local)
return this.message;
}
FindShortPatchsFromOne.prototype.getCategory = function()
{
return 1;
}
FindShortPatchsFromOne.prototype.result = function(resultCallback)
{
if (this.firstObject)

View File

@ -39,6 +39,11 @@ FloidAlgorithm.prototype.getMessage = function(local)
return this.message;
}
FloidAlgorithm.prototype.getCategory = function()
{
return 1;
}
FloidAlgorithm.prototype.result = function(resultCallback)
{
var result = {};

View File

@ -30,6 +30,11 @@ FindHamiltonianLoop.prototype.getMessage = function(local)
return this.message;
}
FindHamiltonianLoop.prototype.getCategory = function()
{
return 1;
}
FindHamiltonianLoop.prototype.result = function(resultCallback)
{
this.outResultCallback = function (result ) { resultCallback(result); };

View File

@ -30,6 +30,11 @@ FindHamiltonianPath.prototype.getMessage = function(local)
return this.message;
}
FindHamiltonianPath.prototype.getCategory = function()
{
return 1;
}
FindHamiltonianPath.prototype.result = function(resultCallback)
{
this.outResultCallback = function (result ) { resultCallback(result); };

View File

@ -37,6 +37,11 @@ FindShortPathNew.prototype.getMessage = function(local)
return this.message;
}
FindShortPathNew.prototype.getCategory = function()
{
return 1;
}
FindShortPathNew.prototype.result = function(resultCallback)
{
if (this.firstObject && this.secondObject)

View File

@ -10,7 +10,7 @@
<script src="<?= Root('i/js/dev/jquery-ui.js')?>"></script>
<script src="<?= Root('i/js/dev/jquery.feedback_me.js')?>"></script>
<script src="<?= Root("script/example.js?v=54")?>" ></script>
<script src="<?= Root("script/example.js?v=55")?>" ></script>
<!-- Yandex.RTB -->
<script>window.yaContextCb=window.yaContextCb||[]</script>
@ -109,17 +109,31 @@
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false" id="openAlgorithmList">
<span class="glyphicon glyphicon-cog fa-fw "></span><span class="hidden-phone"> <?= L('algorithms') ?> </span><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" id="algorithmList">
<!--
<li>
<button type="button" class="btn btn-default btn-sm" style="width: 100%; text-align: left; border: none;" id="FindPath"><span class="glyphicon glyphicon-search fa-fw"></span> <?= L('short_path')?></button></li>
<li><button type="button" class="btn btn-default btn-sm" style="width: 100%; text-align: left; border: none;" id="ConnectedComponent"><span class="glyphicon glyphicon-search fa-fw"></span> <?= L('connected_component') ?> </button></li>
<li><button type="button" class="btn btn-default btn-sm" style="width: 100%; text-align: left; border: none;" id="EulerianLoop"><span class="glyphicon glyphicon-refresh fa-fw"></span> <span><?= L('find_eulerian_loop')?></span></button></li>
-->
<li style="display: none;"><button type="button" class="btn btn-default btn-sm" style="width: 100%; text-align: left; border: none;" id=""><span class="glyphicon glyphicon-search fa-fw"></span> <span></span></button></li>
<div class="dropdown-menu dropdown-menu-right" role="menu" id="algorithmList">
<button type="button" class="btn btn-primary categoryButton" id="algorithmCategoryBtn1">
<span class="glyphicon glyphicon-chevron-down fa-fw" name="showMark"></span>
<span class="glyphicon glyphicon-chevron-right fa-fw" name="hideMark"></span>
<?= L('search_pathes')?>
</button>
<div id="algorithmCategoryElements1">
<div class="dropdown-item" style="display: none;" id="algTopic1"><button type="button" class="btn btn-default btn-sm" style="width: 100%; text-align: left; border: none;" id=""><span class="glyphicon glyphicon-search fa-fw"></span> <span></span></button></div>
<span id="insert1"></span>
</div>
<button type="button" class="btn btn-primary categoryButton" id="algorithmCategoryBtn0">
<span class="glyphicon glyphicon-chevron-down fa-fw" name="showMark"></span>
<span class="glyphicon glyphicon-chevron-right fa-fw" name="hideMark"></span>
<?= L('other_algorithms')?>
</button>
<div id="algorithmCategoryElements0">
<div class="dropdown-item" style="display: none;" id="algTopic0"><button type="button" class="btn btn-default btn-sm" style="width: 100%; text-align: left; border: none;" id=""><span class="glyphicon glyphicon-search fa-fw"></span> <span></span></button></div>
<span id="insert0"></span>
</div>
</div>
</div>
</ul>
</div>
<button type="button" class="btn btn-default btn-sm" id="DeleteObject"><span class="glyphicon glyphicon-remove fa-fw"></span><span class="hidden-phone"> <?= L('delete')?> <sub style="color:#AAAAAA">r</sub></span></button>