This adds showing of all demo applications included in a contrib.

qooxdoo · Jul 25, 2019 · ef55b7b · ef55b7b
1 parent 7c9a9c6
commit ef55b7b
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 157 deletions.
diff --git a/source/class/qxl/packagebrowser/PackageBrowser.js b/source/class/qxl/packagebrowser/PackageBrowser.js
@@ -71,7 +71,7 @@ qx.Class.define("qxl.packagebrowser.PackageBrowser", {
       homepage: "qx/icon/Tango/16/actions/go-home.png",
       readme: "qx/icon/Tango/16/mimetypes/text-plain.png",
       sourcecode: "qx/icon/Tango/16/actions/document-properties.png",
-      demos: "qx/icon/Tango/16/apps/internet-web-browser.png",
+      demo: "qx/icon/Tango/16/apps/internet-web-browser.png",
       problems: "qx/icon/Tango/16/emblems/emblem-important.png"
     }
   },
@@ -616,14 +616,14 @@ qx.Class.define("qxl.packagebrowser.PackageBrowser", {
             }
 
             t.setUserData("tags", tags);
-
             buildSubTree(t, t.getUserData("node"));
-            fullPath = currNode.pwd().slice(1).concat([currNode.label]).join("/");
           } else {
             t = new qx.ui.tree.TreeFile(currNode.label);
-            fullPath = currNode.pwd().slice(1).concat([currNode.type]).join("/");
+            if (currNode.type !== "demo") {
+              fullPath = currNode.pwd().slice(1).concat([currNode.type]).join("/");
+            }
           }
-
+          fullPath = fullPath || currNode.pwd().slice(1).concat([currNode.label]).join("/");
           _sampleToTreeNodeMap[fullPath] = t;
           if (fullPath === state) {
             _initialNode = t;
@@ -716,9 +716,18 @@ qx.Class.define("qxl.packagebrowser.PackageBrowser", {
         switch (modelNode.type) {
           case "sourcecode":
           case "homepage":
-          case "demos":
             url = modelNode.url;
             break;
+          case "demo":
+            if (modelNode.hasChildren()) {
+              // demo parent (without url)
+              html = this.__getApplicationsHtml(modelNode.children);
+            } else {
+              // demo child (with url)
+              url = modelNode.url;
+              state = modelNode.pwd().slice(1).concat([modelNode.label]).join("/");
+            }
+            break;
           case "library":
             html = this.__getLibraryInfoHtml(modelNode);
             break;
@@ -814,7 +823,7 @@ qx.Class.define("qxl.packagebrowser.PackageBrowser", {
 
       const dependencies = Object.entries(req).map(([pkg_uri, range]) => {
         if (!pkg_uri.startsWith("@") && !pkg_uri.startsWith("qooxdoo-")) {
-          return createTableRow(createAnchor(`javascript:void(top.location.href='/#${pkg_uri.replace("/", "~")}~library');`, pkg_uri), range);
+          return createTableRow(createAnchor(`javascript:void(top.location.hash='${pkg_uri.replace("/", "~")}~library')`, pkg_uri), range);
         }
       }).filter(v => Boolean(v));
       let html = `
@@ -877,6 +886,18 @@ qx.Class.define("qxl.packagebrowser.PackageBrowser", {
       return html;
     },
 
+    __getApplicationsHtml(children) {
+      const appsHtml = children.map(childNode => {
+          const hash = childNode.pwd().slice(1).concat([childNode.label]).join("~");
+          return `<a href="javascript:void(top.location.hash='${hash}')"><h2>${childNode.label}</h2></a>` +
+            (childNode.description ? `<p>${childNode.description}</p>` : "")
+        }
+      ).join("\n");
+      return `<h1>Demo Applications</h1>
+      <p>This package contains the following executable applications:</p>
+      ${appsHtml}`;
+    },
+
     /**
      *
      * @param url

diff --git a/source/class/qxl/packagebrowser/TreeDataHandler.js b/source/class/qxl/packagebrowser/TreeDataHandler.js
@@ -105,13 +105,22 @@ qx.Class.define("qxl.packagebrowser.TreeDataHandler", {
             readmeNode.type = "readme";
             readmeNode.url = `https://api.github.com/repos/${elem.uri}/readme`;
             parent.add(readmeNode);
-            if (elem.data && elem.data.applications) {
-              // for the moment, just show the default one
+            let applications = elem.data && elem.data.applications;
+            if (Array.isArray(applications) && applications.length > 0) {
               let demosNode = new qxl.packagebrowser.Tree("Demos");
-              demosNode.type = "demos";
+              demosNode.type = "demo";
               demosNode.data = elem.data;
-              demosNode.url = `${qx.$$appRoot}/demos/${elem.uri}`;
               parent.add(demosNode);
+              applications.forEach(app => {
+                if (app.showInPackageBrowser === "off") {
+                  return;
+                }
+                let appNode = new qxl.packagebrowser.Tree(`${app.title || app.name}`);
+                appNode.data = app;
+                appNode.type = "demo";
+                appNode.url = `${qx.$$appRoot}/demos/${elem.uri}/${app.name}`;
+                demosNode.add(appNode);
+              });
             }
             if (elem.data && elem.data.problems) {
               let problemsNode = new qxl.packagebrowser.Tree("Problems");

diff --git a/source/resource/qxl/packagebrowser/css/pages.css b/source/resource/qxl/packagebrowser/css/pages.css
@@ -0,0 +1,73 @@
+*{
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    font-size: 13px;
+    font-family: "Trebuchet MS", Tahoma, Arial, "Bitstream Vera Sans", Verdana, sans-serif;
+    margin: 0;
+    padding: 10px;
+}
+
+img{
+    box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    border: 1px #134275 solid;
+}
+
+#content{
+    margin: 20px;
+    width: 600px;
+}
+
+h1{
+    padding-top: 10px;
+    font-size: 22px;
+    color: #134275;
+    padding-bottom: 5px;
+}
+
+h2{
+    padding-top: 10px;
+    font-size: 16px;
+    color: #134275;
+}
+
+li{
+    margin-left: 16px;
+    margin-bottom: 3px;
+    margin-top: 3px;
+    list-style: square;
+}
+
+p{
+    margin: 6px 0;
+}
+
+a{
+    text-decoration: none;
+    color: #134275;
+}
+
+td{
+    padding-top: 3px;
+    padding-right: 3px;
+    vertical-align: top;
+}
+
+td:first-child {
+    font-weight: bold;
+    padding-right: 10px;
+}
+
+.code {
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border: 1px solid #BCBEC0;
+    padding: 2px;
+    font:12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace
+}
diff --git a/source/resource/qxl/packagebrowser/default.html b/source/resource/qxl/packagebrowser/default.html
@@ -3,80 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>qooxdoo &raquo; Package Browser</title>
-  <style type="text/css">
-    *{
-      box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body{
-      font-size: 12px;
-      font-family: "Trebuchet MS", Tahoma, Arial, "Bitstream Vera Sans", Verdana, sans-serif;
-      margin: 0;
-      padding: 10px;
-    }
-
-    img{
-      box-sizing: content-box;
-      -moz-box-sizing: content-box;
-      border: 1px #134275 solid;
-    }
-
-    #content{
-      margin: 20px;
-      width: 600px;
-    }
-
-    h1{
-      padding-top: 10px;
-      font-size: 22px;
-      color: #134275;
-      padding-bottom: 5px;
-    }
-
-    h2{
-      padding-top: 10px;
-      font-size: 16px;
-      color: #134275;
-    }
-
-    li{
-      margin-left: 16px;
-      list-style: square;
-    }
-
-    p{
-      font-size: 12px;
-      margin: 6px 0;
-    }
-
-    a{
-      text-decoration: none;
-      color: #134275;
-    }
-
-    .code {
-      border-radius: 5px;
-      -moz-border-radius: 5px;
-      -webkit-border-radius: 5px;
-      border: 1px solid #BCBEC0;
-      padding: 2px;
-      font:12px Monaco,Consolas,"Andale  Mono","DejaVu Sans Mono",monospace
-    }
-
-    td{
-      padding-top: 3px;
-      padding-right: 3px;
-      vertical-align: top;
-    }
-
-    td:first-child {
-      font-weight: bold;
-      padding-right: 10px;
-    }
-  </style>
+  <link rel="stylesheet" href="css/pages.css">
 </head>
 <body>
   <p>Loading...</p>

diff --git a/source/resource/qxl/packagebrowser/welcome.html b/source/resource/qxl/packagebrowser/welcome.html
@@ -3,73 +3,7 @@
 <head>
   <meta charset="utf-8">
   <title>qooxdoo &raquo; Package Browser</title>
-  <style type="text/css">
-    *{
-      box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    body{
-      font-size: 14px;
-      font-family: "Trebuchet MS", Tahoma, Arial, "Bitstream Vera Sans", Verdana, sans-serif;
-      margin: 0;
-      padding: 10px;
-    }
-
-    img{
-      box-sizing: content-box;
-      -moz-box-sizing: content-box;
-      border: 1px #134275 solid;
-    }
-
-    #content{
-      margin: 20px;
-      width: 600px;
-    }
-
-    h1{
-      padding-top: 10px;
-      font-size: 22px;
-      color: #134275;
-      padding-bottom: 5px;
-    }
-
-    h2{
-      padding-top: 10px;
-      font-size: 16px;
-      color: #134275;
-    }
-
-    li{
-      margin-left: 16px;
-      margin-bottom: 3px;
-      margin-top: 3px;
-      list-style: square;
-    }
-
-    p{
-      font-size: 14px;
-      margin: 6px 0;
-    }
-
-    a{
-      text-decoration: none;
-      color: #134275;
-    }
-
-    td{
-      padding-top: 3px;
-      padding-right: 3px;
-      vertical-align: top;
-    }
-
-    td:first-child {
-      font-weight: bold;
-      padding-right: 10px;
-    }
-  </style>
+  <link rel="stylesheet" href="css/pages.css">
 </head>
 
 <body>
@@ -99,13 +33,13 @@ <h1>Welcome to the Package Browser</h1>
       the URL, so you can link to the application state via its URL.
     </li>
     <li>
-      Check out the <span style="font-weight: bold">live
-      demos</span> of <a href="javascript:void(top.location.href='/#filter~demos')">
+      Check out the <span style="font-weight: bold">live demos</span> of
+      <a href="javascript:void(top.location.hash='filter~demos')">
       all packages that contain a compilable application</a>.
     </li>
     <li>
       This web app can also be used to control the quality of the packages. It
-      displays  <a href="javascript:void(top.location.href='/#filter~problems')">
+      displays  <a href="javascript:void(top.location.hash='filter~problems')">
       warnings and errors</a> that were logged during the compilation. In a future
       version, linting and test results will also be displayed.
     </li>
@@ -114,8 +48,8 @@ <h1>Welcome to the Package Browser</h1>
       so you will see new packages and new releases after a certain delay. To
       browse the latest and greatest versions of the packages, clone the
       <a href="javascript:void(window.open('https://github.com/qooxdoo/qxl.packageviewer'))">
-        qooxdoo/qxl.packageviewer repo</a>
-      and (re)build it with  <pre>qx serve --clean</pre>.
+        qooxdoo/qxl.packageviewer repo</a> and (re)build it with
+      <span class="code">qx serve --clean</span>.
   </ul>
 </body>
 </html>