Added embed server for plugin library

- Added embeded resources server for plugin library
- Added ztnc plugin for global area network
- Added wide mode for side wrapper

src/web/components/plugins.html

@@ -3,7 +3,7 @@
         <h2>Plugins</h2>
         <p>Custom features on Zoraxy</p>
     </div>
-    <table class="ui celled table">
+    <table class="ui basic celled table">
         <thead>
           <tr>
             <th>Plugin Name</th>
@@ -35,9 +35,9 @@ function initiatePluginList(){
         <tr>
           <td data-label="PluginName">
             <h4 class="ui header">
-              <img src="/api/plugins/icon?plugin_id=${plugin.Spec.id}" class="ui image">
+              <img onclick="openPluginUI('${plugin.Spec.id}');" class="clickable" src="/api/plugins/icon?plugin_id=${plugin.Spec.id}" class="ui image">
               <div class="content">
-                 ${plugin.Spec.name}
+                ${plugin.Spec.name}
                 <div class="sub header">${versionString} by <a href="${authorContact}" target="_blank">${plugin.Spec.author}</a></div>
               </div>
             </h4>
@@ -60,7 +60,7 @@ function initiatePluginList(){
 }
 
 function openPluginUI(pluginid){
-  showSideWrapper(`/plugin.ui/${pluginid}/`);
+  showSideWrapper(`/plugin.ui/${pluginid}/`, true);
 }
 
 initiatePluginList();

src/web/index.html

@@ -414,7 +414,7 @@
                 Toggles for side wrapper
             */
 
-            function showSideWrapper(scriptpath=""){
+            function showSideWrapper(scriptpath="", extendedMode=false){
                 if (scriptpath != ""){
                     $(".sideWrapper iframe").attr("src", scriptpath);
                 }
@@ -422,6 +422,12 @@
                 if ($(".sideWrapper .content").transition("is animating") || $(".sideWrapper .content").transition("is visible")){
                     return
                 }
+
+                if (extendedMode){
+                    $(".sideWrapper").addClass("extendedMode");
+                }else{
+                    $(".sideWrapper").removeClass("extendedMode");
+                }
                 $(".sideWrapper").show();
                 $(".sideWrapper .fadingBackground").fadeIn("fast");
                 $(".sideWrapper .content").transition('slide left in', 300);

src/web/main.css

@@ -188,6 +188,10 @@ body{
     z-index: 10;
 }
 
+.sideWrapper.extendedMode{
+    max-width: calc(80% - 1em);
+}
+
 .sideWrapper .content{
     height: 100%;
     width: 100%;