@qooxdoo/framework 7.9.1 → 8.0.0-beta.1

package/lib/resource/qx/tool/website/build/scripts/serve.js

@@ -1,4 +1,4 @@
-$(function () {
+document.addEventListener('DOMContentLoaded', function () {
   var query = {};
   (document.location.search.substring(1) || "")
     .split("&")
@@ -11,98 +11,96 @@ $(function () {
       }
     });
 
-  $.qxcli = {
+  window.qxcli = {
     query: query,
 
     get(uri) {
-      return new Promise(function (resolve, reject) {
-        $.ajax(uri, {
-          cache: false,
-          dataType: "json",
-
-          error(jqXHR, textStatus, errorThrown) {
-            reject(textStatus || errorThrown);
-          },
-
-          success: resolve
-        });
+      return fetch(uri, {
+        cache: 'no-cache'
+      }).then(response => {
+        if (!response.ok) {
+          throw new Error('HTTP error ' + response.status);
+        }
+        return response.json();
       });
     }
   };
 
-  $.qxcli.serve = {
-    apps: $.qxcli.get("/serve.api/apps.json")
+  window.qxcli.serve = {
+    apps: window.qxcli.get("/serve.api/apps.json")
   };
 
-  $.qxcli.pages = {
+  window.qxcli.pages = {
     homepage() {
-      $.qxcli.serve.apps.then(function (data) {
+      window.qxcli.serve.apps.then(function (data) {
         console.log(JSON.stringify(data, null, 2));
-        let $root = $("#applications");
-        $root.empty();
+        let root = document.getElementById("applications");
+        root.innerHTML = '';
         data.forEach(targetData => {
-          $root.append(
-            $("<h2>").text(
-              (targetData.target.type == "build" ? "Build" : "Source") +
-                " Target in " +
-                targetData.target.outputDir
-            )
-          );
+          let h2 = document.createElement('h2');
+          h2.textContent = (targetData.target.type == "build" ? "Build" : "Source") +
+            " Target in " +
+            targetData.target.outputDir;
+          root.appendChild(h2);
 
-          var $ul = $("<ul>");
+          var ul = document.createElement('ul');
           targetData.apps.sort(function (l, r) {
             l = l.title || l.name;
             r = r.title || r.name;
             return l < r ? -1 : l > r ? 1 : 0;
           });
           targetData.apps.forEach(function (appData) {
-            var $li = $("<li>");
+            var li = document.createElement('li');
             if (appData.isBrowser) {
-              var $a = $("<a>");
-              $a.text(appData.title || appData.name);
-              $a.attr(
-                "href",
+              var a = document.createElement('a');
+              a.textContent = appData.title || appData.name;
+              a.setAttribute('href',
                 targetData.target.outputDir + appData.outputPath + "/index.html"
               );
-
-              $li.append($a);
+              li.appendChild(a);
             } else {
-              var $p = $("<p>");
-              $p.text(appData.title || appData.name);
-              $li.append($p);
+              var p = document.createElement('p');
+              p.textContent = appData.title || appData.name;
+              li.appendChild(p);
+            }
+            if (appData.description) {
+              let p = document.createElement('p');
+              p.textContent = appData.description;
+              li.appendChild(p);
             }
-            if (appData.description)
-              $li.append($("<p>").text(appData.description));
-            $li.append(
-              "<p class='tools'>" +
-                "<a href='diagnostics/dependson.html?targetDir=" +
-                targetData.target.outputDir +
-                "&appDir=" +
-                appData.outputPath +
-                "&appClass=" +
-                appData.appClass +
-                "'>Depends-On Analysis</a>, " +
-                "<a href='diagnostics/requiredby.html?targetDir=" +
-                targetData.target.outputDir +
-                "&appDir=" +
-                appData.outputPath +
-                "&appClass=" +
-                appData.appClass +
-                "'>Required-By Analysis</a>" +
-                "</p>"
-            );
+            let toolsP = document.createElement('p');
+            toolsP.className = 'tools';
+            toolsP.innerHTML =
+              "<a href='diagnostics/dependson.html?targetDir=" +
+              targetData.target.outputDir +
+              "&appDir=" +
+              appData.outputPath +
+              "&appClass=" +
+              appData.appClass +
+              "'>Depends-On Analysis</a>, " +
+              "<a href='diagnostics/requiredby.html?targetDir=" +
+              targetData.target.outputDir +
+              "&appDir=" +
+              appData.outputPath +
+              "&appClass=" +
+              appData.appClass +
+              "'>Required-By Analysis</a>";
+            li.appendChild(toolsP);
 
-            $ul.append($li);
+            ul.appendChild(li);
           });
-          $root.append($ul);
+          root.appendChild(ul);
         });
-        $root.append(
-          "<p style='font-size: 10px'><input type='checkbox' id='cbxShowTools'>Show Tools</p>"
-        );
+        let p = document.createElement('p');
+        p.style.fontSize = '10px';
+        p.innerHTML = "<input type='checkbox' id='cbxShowTools'>Show Tools";
+        root.appendChild(p);
 
-        $("#cbxShowTools").change(function () {
-          if (this.checked) $(".tools").show();
-          else $(".tools").hide();
+        document.getElementById('cbxShowTools').addEventListener('change', function () {
+          let tools = document.querySelectorAll('.tools');
+          tools.forEach(function (tool) {
+            tool.style.display = this.checked ? 'inherit' : 'none';
+          }.bind(this));
         });
       });
     }

package/lib/resource/qx/tool/website/partials/footer.html

@@ -25,10 +25,10 @@
                 <h5 style="color: #EEE">Learn &amp; Code</h5>
                 <ul class="nav flex-column">
                   <li class="nav-item">
-                    <a class="nav-link p-0" style="color: #BBB" target="docs" href="/docs">Documentation</a>
+                    <a class="nav-link p-0" style="color: #BBB" target="docs" href="https://qooxdoo.org/documentation">Documentation</a>
                   </li>
                   <li class="nav-item">
-                    <a class="nav-link p-0" style="color: #BBB" target="apiviewer" href="/apps/apiviewer">API Viewer</a>
+                    <a class="nav-link p-0" style="color: #BBB" target="apiviewer" href="https://qooxdoo.org/qxl.apiviewer/">API Viewer</a>
                   </li>
                   <li class="nav-item">
                     <a class="nav-link p-0" style="color: #BBB" target="demobrowser" href="https://qooxdoo.org/qxl.demobrowser">Demobrowser</a>
@@ -70,19 +70,19 @@
             </div>
           </div>
           <div class="col-md text-center pb-5">
-            <a class="btn btn-link p-0 mx-1 text-light" data-toggle="tooltip" data-placement="top" title="" target="extern" href="https://github.com/qooxdoo/qooxdoo" data-original-title="Qooxdoo on GitHub">
+            <a class="btn btn-link p-0 mx-1 text-light" title="Qooxdoo on GitHub" target="extern" href="https://github.com/qooxdoo/qooxdoo">
               <i class="fab fa-2x fa-github mx-1"></i>
             </a>
-            <a class="btn btn-link p-0 mx-1 text-light" data-toggle="tooltip" data-placement="top" title="" target="extern" href="https://gitter.im/qooxdoo/qooxdoo" data-original-title="Chat with us on Gitter">
+            <a class="btn btn-link p-0 mx-1 text-light" title="Chat with us on Gitter" target="extern" href="https://gitter.im/qooxdoo/qooxdoo">
               <i class="fab fa-2x fa-gitter mx-1"></i>
             </a>
-            <a class="btn btn-link p-0 mx-1 text-light" data-toggle="tooltip" data-placement="top" title="" target="extern" href="https://news.qooxdoo.org" data-original-title="Qooxdoo Blog">
+            <a class="btn btn-link p-0 mx-1 text-light" title="Qooxdoo Blog" target="extern" href="https://news.qooxdoo.org">
               <i class="fab fa-2x fa-medium mx-1"></i>
             </a>
-            <a class="btn btn-link p-0 mx-1 text-light" data-toggle="tooltip" data-placement="top" title="" target="extern" href="https://twitter.com/qooxdoo" data-original-title="Qooxdoo on Twitter">
+            <a class="btn btn-link p-0 mx-1 text-light" title="Qooxdoo on Twitter" target="extern" href="https://twitter.com/qooxdoo">
               <i class="fab fa-2x fa-twitter mx-1"></i>
             </a>
-            <a class="btn btn-link p-0 mx-1 text-light" data-toggle="tooltip" data-placement="top" title="" target="extern" href="https://stackoverflow.com/questions/tagged/qooxdoo" data-original-title="Qooxdoo Q/A">
+            <a class="btn btn-link p-0 mx-1 text-light" title="Qooxdoo Q/A" target="extern" href="https://stackoverflow.com/questions/tagged/qooxdoo">
               <i class="fab fa-2x fa-stack-overflow mx-1"></i>
             </a>
           </div>
@@ -98,9 +98,4 @@
       </div>
     </div>
 
-    <!-- Optional JavaScript -->
-    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
-    <script src="/assets/common.js" type="text/javascript"></script>
-
+    

package/lib/resource/qx/tool/website/partials/head.html

@@ -3,18 +3,20 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="/assets/bootstrap.min.css">
+    <!-- Custom CSS and Abel font -->
+    <link rel="stylesheet" href="/assets/custom.css">
     <link rel="stylesheet" href="/assets/abel.css" >
     <link rel="icon" href="/assets/favicon.png" type="image/png">
 
+
     <!-- Github buttons -->
-    <script src="/assets/buttons.js"></script>
-    <script src="/assets/fontawesome-all.js"></script>
+    <script src="/assets/buttons.js" type="text/javascript"></script>
+    <script src="/assets/fontawesome-all.js" type="text/javascript"></script>
 
     <title>{{= it.title || it.site.title }}</title>
     <meta name="description" content="{{= it.excerpt || it.site.excerpt || "" }}">
-    <link rel="stylesheet" type="text/css" href="/qooxdoo.css">
-    <script type="text/javascript" src="/assets/jquery.js"></script>
-    <script type="text/javascript" src="/scripts/serve.js"></script>
+
+    <script src="/assets/qxWeb.js"  type="text/javascript"></script>
+    <script src="/assets/common.js" type="text/javascript"></script>
+    <script src="/scripts/serve.js" type="text/javascript" ></script>
 </head>

package/lib/resource/qx/tool/website/partials/header.html

@@ -1,9 +1,9 @@
     <div class="container-fluid pt-0">
-      <nav class="navbar fixed-top navbar-expand-sm pl-1" id="navigatopnBar">
+      <nav class="navbar fixed-top navbar-expand-sm pl-1" id="navigationBar">
         <a class="navbar-brand invisible" href="#" style="width: 0" id="navigationLogo">
           <img src="/assets/logo.svg" width="auto" height="30" alt="">
         </a>
-        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+        <button class="navbar-toggler navbar-dark" type="button" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse navbar-dark" id="navbarNav">
@@ -19,7 +19,7 @@
               <a class="nav-link text-light" target="docs" href="/docs">Documentation</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link text-light" target="api" href="/apps/apiviewer">API</a>
+              <a class="nav-link text-light" target="api" href="/apiviewer">API</a>
             </li>
           </ul>
         </div>

package/lib/resource/qx/tool/website/src/assets/common.js

@@ -0,0 +1,32 @@
+// Common JavaScript for qooxdoo startpage using qxWeb
+document.addEventListener('DOMContentLoaded', function () {
+  // Set current year
+  var currentYear = new Date().getFullYear().toString();
+  q('.current-year').setHtml(currentYear);
+
+  // Navigation bar scroll effect
+  var scroll = function() {
+    var scrollPosition = q(window).getScrollTop();
+    var navigationBar = q('#navigationBar');
+    var navigationLogo = q('#navigationLogo');
+
+    if (navigationBar.length > 0 && navigationLogo.length > 0) {
+      if (scrollPosition < 250) {
+        navigationBar.setStyle('backgroundColor', 'transparent');
+        navigationLogo.setStyle('width', '0').addClass('invisible');
+      } else {
+        navigationBar.setStyle('backgroundColor', 'rgba(0, 40, 56, 0.9)');
+        navigationLogo.setStyle('width', '').removeClass('invisible');
+      }
+    }
+  };
+
+  q(window).on('scroll', scroll);
+  scroll();
+
+  // Simple navbar toggle for mobile
+  q('.navbar-toggler').on('click', function() {
+    q('#navbarNav').toggleClass('show');
+  });
+});
+

package/lib/resource/qx/tool/website/src/assets/custom.css

@@ -0,0 +1,290 @@
+/* Custom CSS to replace Bootstrap - minimal styles for qooxdoo startpage */
+
+/* Basic reset and box-sizing */
+* {
+  box-sizing: border-box;
+}
+
+/* Container and Grid Layout */
+.container-fluid {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.container {
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+  max-width: 1140px;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.col, .col-md {
+  position: relative;
+  width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+  flex-basis: 0;
+  flex-grow: 1;
+  max-width: 100%;
+}
+
+/* Responsive column for medium screens */
+@media (min-width: 768px) {
+  .col-md {
+    flex: 0 0 auto;
+    width: auto;
+  }
+}
+
+/* Navbar Styles */
+.navbar {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1rem;
+}
+
+.navbar.fixed-top {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1030;
+}
+
+.navbar-brand {
+  display: inline-block;
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
+  margin-right: 1rem;
+  font-size: 1.25rem;
+  line-height: inherit;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.navbar-toggler {
+  padding: 0.25rem 0.75rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background-color: transparent;
+  border: 1px solid rgba(255,255,255,.1);
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+
+.navbar-toggler-icon {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  content: "";
+  background: no-repeat center center;
+  background-size: 100% 100%;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.navbar-nav {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.navbar-collapse {
+  flex-basis: 100%;
+  flex-grow: 1;
+  align-items: center;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapse.show {
+  display: block;
+}
+
+@media (min-width: 576px) {
+  .navbar-expand-sm .navbar-nav {
+    flex-direction: row;
+  }
+
+  .navbar-expand-sm .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+
+  .navbar-expand-sm .navbar-toggler {
+    display: none;
+  }
+}
+
+/* Nav items and links */
+.nav {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+}
+
+.nav.flex-column {
+  flex-direction: column;
+}
+
+.nav-item {
+  display: block;
+}
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  transition: color 0.15s ease-in-out;
+}
+
+.nav-link:hover {
+  text-decoration: none;
+}
+
+/* Button Styles */
+.btn {
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.btn-link {
+  font-weight: 400;
+  color: #007bff;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.btn-link:hover {
+  color: #0056b3;
+  text-decoration: underline;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+/* Spacing Utilities */
+.p-0 { padding: 0 !important; }
+.p-4 { padding: 1.5rem !important; }
+.pt-0 { padding-top: 0 !important; }
+.pl-1 { padding-left: 0.25rem !important; }
+.pb-3 { padding-bottom: 1rem !important; }
+.pb-5 { padding-bottom: 3rem !important; }
+.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
+.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
+.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.mt-5 { margin-top: 3rem !important; }
+
+/* Text Utilities */
+.text-center { text-align: center !important; }
+.text-nowrap { white-space: nowrap !important; }
+.text-light { color: #f8f9fa !important; }
+.text-white { color: #fff !important; }
+
+/* Display Utilities */
+.d-none { display: none !important; }
+.d-block { display: block !important; }
+.d-flex { display: flex !important; }
+
+@media (min-width: 576px) {
+  .d-sm-block { display: block !important; }
+  .d-sm-none { display: none !important; }
+}
+
+@media (min-width: 768px) {
+  .d-md-block { display: block !important; }
+}
+
+/* Image Utilities */
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+.img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+/* Utility Classes */
+.invisible {
+  visibility: hidden !important;
+}
+
+/* FontAwesome Icon Sizing */
+.fab, .fa {
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  text-rendering: auto;
+  line-height: 1;
+}
+
+.fa-2x {
+  font-size: 2em;
+}
+
+/* qooxdoo specific styles from qooxdoo.scss */
+#navbarNav.collapsing,
+#navbarNav.collapse.show {
+  background-color: rgba(0,0,0,.9);
+  padding-left: 32px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.carousel-indicators li {
+  background-color: #EEE;
+}
+
+.carousel-indicators li.active {
+  background-color: #AAA;
+}
+
+#applications li {
+  margin-bottom: 0.25em;
+}
+
+#applications li p {
+  font-style: italic;
+  margin-bottom: 0;
+}
+
+#applications li p.tools {
+  display: none;
+  margin: 0 0 0 40px;
+  font-size: 11px;
+}