Changed algorithms menu design.

i/css/home.css

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

lang/bg/home.php

@@ -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";
 ?>

lang/ch/home.php

@@ -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";
 ?>

lang/de/home.php

@@ -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";    
 ?>

lang/el/home.php

@@ -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";    
 ?>

lang/en/home.php

@@ -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";    
 ?>

lang/es/home.php

@@ -272,4 +272,7 @@ Tenemos traducciones en griego 🇬🇷.</a> <a href=\"https://github.com/UnickS
     $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";    
 ?>

lang/fr/home.php

@@ -240,4 +240,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";    
 ?>

lang/nl/home.php

@@ -237,4 +237,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";    
 ?>

lang/pt/home.php

@@ -238,4 +238,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";    
 ?>

lang/ru/home.php

@@ -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'] = "Другие алгоритмы";
+
 ?>

lang/sv/home.php

@@ -234,4 +234,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";    
 ?>

script/Algorithms.js

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

script/Appilcation.js

@@ -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);
     }
     

script/main.js

@@ -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 list   = document.getElementById("algorithmCategoryElements" + algorithm.category);
-        var item   = list.lastElementChild;
+        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 ()

script/plugins/BFS.js

@@ -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 = {};

script/plugins/DFS.js

@@ -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--)

script/plugins/EulerianLoop.js

@@ -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); };

script/plugins/EulerianPath.js

@@ -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); };

script/plugins/FindAllPatches.js

@@ -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)

script/plugins/FindShortPatchsFromOne.js

@@ -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)

script/plugins/Floid.js

@@ -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 = {};

script/plugins/HamiltonianLoop.js

@@ -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); };

script/plugins/HamiltonianPath.js

@@ -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); };

script/plugins/ShortestPath.js

@@ -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)

tpl/home.php

@@ -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,18 +109,32 @@
             <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">
+          <div 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>
 
-          </ul>
+      <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>
+
+
         <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>