html: avoid horizontal overflows, break-word and limit image width

[pve-docs.git] / api-viewer / PVEAPI.js

diff --git a/api-viewer/PVEAPI.js b/api-viewer/PVEAPI.js
index d0da407d324238d9c748abca97175c9896642ac8..24161612dcf8780254d13c2a7bda32ff00fd990d 100644 (file)
--- a/api-viewer/PVEAPI.js
+++ b/api-viewer/PVEAPI.js
@@ -22,7 +22,8 @@ Ext.onReady(function() {
        ]
     });
 
-    var store = Ext.create('Ext.data.TreeStore', {
+    var store = Ext.define('pve-updated-treestore', {
+       extend: 'Ext.data.TreeStore',
        model: Ext.define('pve-api-doc', {
             extend: 'Ext.data.Model',
             fields:  [
@@ -39,8 +40,33 @@ Ext.onReady(function() {
         }, {
             property: 'text',
             direction: 'ASC'
-        }]
-    });
+       }],
+       filterer: 'bottomup',
+       doFilter: function(node) {
+           this.filterNodes(node, this.getFilters().getFilterFn(), true);
+       },
+
+       filterNodes: function(node, filterFn, parentVisible) {
+           var me = this,
+               bottomUpFiltering = me.filterer === 'bottomup',
+               match = filterFn(node) && parentVisible || (node.isRoot() && !me.getRootVisible()),
+               childNodes = node.childNodes,
+               len = childNodes && childNodes.length, i, matchingChildren;
+
+           if (len) {
+               for (i = 0; i < len; ++i) {
+                   matchingChildren = me.filterNodes(childNodes[i], filterFn, match || bottomUpFiltering) || matchingChildren;
+               }
+               if (bottomUpFiltering) {
+                   match = matchingChildren || match;
+               }
+           }
+
+           node.set("visible", match, me._silentOptions);
+           return match;
+       },
+
+    }).create();
 
     var render_description = function(value, metaData, record) {
        var pdef = record.data;
@@ -354,8 +380,53 @@ Ext.onReady(function() {
        ct.setActiveTab(0);
     };
 
+    Ext.define('Ext.form.SearchField', {
+       extend: 'Ext.form.field.Text',
+       alias: 'widget.searchfield',
+
+       emptyText: 'Search...',
+
+       flex: 1,
+
+       inputType: 'search',
+       listeners: {
+           'change': function(){
+
+               var value = this.getValue();
+               if (!Ext.isEmpty(value)) {
+                   store.filter({
+                       property: 'path',
+                       value: value,
+                       anyMatch: true
+                   });
+               } else {
+                   store.clearFilter();
+               }
+           }
+       }
+    });
+
     var tree = Ext.create('Ext.tree.Panel', {
-        title: 'Resource Tree',
+       title: 'Resource Tree',
+       tbar: [
+           {
+               xtype: 'searchfield',
+           }
+       ],
+       tools: [
+           {
+               type: 'expand',
+               tooltip: 'Expand all',
+               tooltipType: 'title',
+               callback: (tree) => tree.expandAll(),
+           },
+           {
+               type: 'collapse',
+               tooltip: 'Collapse all',
+               tooltipType: 'title',
+               callback: (tree) => tree.collapseAll(),
+           },
+       ],
         store: store,
        width: 200,
         region: 'west',
@@ -368,6 +439,7 @@ Ext.onReady(function() {
                    return;
                var rec = selections[0];
                render_docu(rec.data);
+               location.hash = '#' + rec.data.path;
            }
        }
     });
@@ -389,4 +461,18 @@ Ext.onReady(function() {
        ]
     });
 
+    var deepLink = function() {
+       var path = window.location.hash.substring(1).replace(/\/\s*$/, '')
+       var endpoint = store.findNode('path', path);
+
+       if (endpoint) {
+           tree.getSelectionModel().select(endpoint);
+           tree.expandPath(endpoint.getPath());
+           render_docu(endpoint.data);
+       }
+    }
+    window.onhashchange = deepLink;
+
+    deepLink();
+
 });