search network input functionality, add to favorites functionality

apps/block_scout_web/assets/css/components/_network-selector.scss

@@ -41,7 +41,7 @@ $network-selector-item-icon-dimensions: 30px !default;
   margin-left: auto;
   max-width: 398px;
   min-width: 0;
-  padding: 28px 0 35px;
+  padding-top: 28px;
   position: relative;
   transition: right 0.25s ease-out;
 }
@@ -266,7 +266,6 @@ $network-selector-item-icon-dimensions: 30px !default;
 .network-selector-networks-container {
   flex-grow: 1;
   flex-shrink: 1;
-  margin: 0 0 30px;
   min-height: 100px;
   overflow: auto;
   padding: 0 $network-selector-horizontal-padding;

apps/block_scout_web/assets/js/app.js

@@ -31,6 +31,8 @@ import './pages/chain'
 import './pages/pending_transactions'
 import './pages/transaction'
 import './pages/transactions'
+import './pages/favorites'
+import './pages/network-search'
 
 import './pages/admin/tasks.js'
 

apps/block_scout_web/assets/js/pages/favorites.js

@@ -0,0 +1,41 @@
+import $ from 'jquery'
+
+var favoritesQuantity = 0,
+	favoritesContainer = $(".js-favorites-tab"),
+	favoritesNetworksUrls = [];
+
+$(document).on("change", ".network-selector-item-favorite input[type='checkbox']", function () {
+	
+	var networkUrl = $(this).attr("data-url"),
+		thisStatus = $(this).is(":checked"),
+		parent = $(".network-selector-item[data-url='" + networkUrl +"'").clone(),
+		workWith = $(".network-selector-item[data-url='" + networkUrl +"'");
+	
+	// Add new checkbox status to same network in another tabs
+	$(".network-selector-item-favorite input[data-url='" + networkUrl +"']").prop("checked", thisStatus);
+	
+	// Push or remove favorite networks to array
+	var found = $.inArray(networkUrl, favoritesNetworksUrls);
+	if (found < 0 && thisStatus == true) {
+		favoritesNetworksUrls.push(networkUrl);
+	} else {
+		var index = favoritesNetworksUrls.indexOf(networkUrl);
+		if(index!=-1){
+			favoritesNetworksUrls.splice(index, 1);
+		}
+	}
+	console.log(favoritesNetworksUrls);
+	// Append or remove item from 'favorites' tab
+	
+	if (thisStatus == true) {
+		favoritesContainer.append(parent[0]);
+		$(".js-favorites-tab .network-selector-tab-content-empty").hide();
+	} else {
+		var willRemoved = favoritesContainer.find(workWith);
+		willRemoved.remove();
+		if (favoritesNetworksUrls.length == 0) {
+			$(".js-favorites-tab .network-selector-tab-content-empty").show();
+		}
+	}
+
+});

apps/block_scout_web/assets/js/pages/network-search.js

@@ -0,0 +1,21 @@
+import $ from 'jquery'
+
+var networkSearchInput = $(".network-selector-search-input"),
+	networkSearchInputVal = "";
+
+$(networkSearchInput).on("input", function() {
+	networkSearchInputVal = $(this).val();
+
+	$.expr[":"].Contains = $.expr.createPseudo(function(arg) {
+	    return function( elem ) {
+	        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
+	    };
+	});
+	
+	if (networkSearchInputVal == "") {
+		$(".network-selector-item").show();
+	} else {
+		$(".network-selector-item").hide();
+		$(".network-selector-item:Contains('" + networkSearchInputVal + "')").show();
+	}
+});

apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex

@@ -43,13 +43,13 @@
                         <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %>
                     <% end %>
                 </div>
-                <div class="network-selector-tab-content js-network-selector-tab-content" network-selector-tab="favorites">
+                <div class="network-selector-tab-content js-network-selector-tab-content js-favorites-tab" network-selector-tab="favorites">
                     <div class="network-selector-tab-content-empty">No content.</div>
                 </div>
             </div>
-            <div class="network-selector-load-more-container">
+            <!--<div class="network-selector-load-more-container">
                 <button class="btn-network-selector-load-more"><%= gettext("Show More Networks") %></button>
-            </div>
+            </div>-->
         </div>
     </div>
 </div>

apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex

@@ -1,4 +1,4 @@
-<div class="network-selector-item">
+<div class="network-selector-item" data-url="<%= @url %>" data-name="<%= @title %>">
     <label class="network-selector-item-url js-network-selector-item-url" network-selector-item-url="<%= @url %>">
         <span class="radio">
             <input type="radio" name="networkSelectorItem" />
@@ -17,7 +17,7 @@
         </span>
     </label>
     <label class="network-selector-item-favorite">
-        <input type="checkbox" />
+        <input type="checkbox" data-url="<%= @url %>" />
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15">
             <path fill="#E2E5EC" fill-rule="evenodd" d="M15.647 6.795c.315-.3.426-.741.29-1.151a1.135 1.135 0 0 0-.926-.764l-3.871-.551a.501.501 0 0 1-.381-.271L9.028.624A1.143 1.143 0 0 0 8-.001c-.44 0-.834.24-1.028.625L5.24 4.059a.506.506 0 0 1-.381.271l-3.871.55c-.435.062-.79.355-.926.765-.136.409-.025.85.29 1.15l2.801 2.673a.492.492 0 0 1 .146.439l-.661 3.774c-.058.333.031.656.25.911.342.397.937.518 1.414.272l3.462-1.782a.53.53 0 0 1 .471 0l3.463 1.782a1.16 1.16 0 0 0 1.413-.272c.22-.255.309-.579.25-.911L12.7 9.907a.489.489 0 0 1 .146-.439l2.801-2.673z"/>
         </svg>