funguje ono to

README.md

@@ -4,10 +4,8 @@
 
 The MIcKA Search extension, searches configured metadata catalogue and show returned data in table.
 
-<!--
 #### Demo:
 ![](demo.gif)
--->
 
 ## Configuration
 

main.css

@@ -79,4 +79,20 @@
   
   #mickaSearch-wrapper .toc-item .toc-item{
     padding-left: 10px;
-  }
+  }
+  
+  
+  
+  table.table, table.table tr, table.table td, table.table th {
+      border: 0;
+  }
+  table.table-nonfluid {
+      width: auto !important;
+  }
+  table.table {
+      margin-left: 0;
+      margin-right: 0;
+  }
+	details > details {
+			margin-left: 1em;
+	}

main.js

@@ -1,24 +1,26 @@
-/*jshint esversion: 6 */
 define([
-    'require',
-    'jqueryui',
+	'require',
     'base/js/namespace',
-    'base/js/events',
+	'base/js/events',
+    'jquery'
 ], function(
+	requirejs,
     Jupyter,
-    requirejs,
-    $,
-    IPython,
-    events
+	events,
+    $
 ) {
+	var have_bs_tooltips = false;
+	
     var mod_name = "mickaSearch";
     var log_prefix = `[${mod_name}] `;
-    // default configuration parameters
+	var side_panel_min_rel_width = 10;
+    var side_panel_max_rel_width = 90;
+    var side_panel_start_width = 45;
     var cfg = {
         'micka_url': 'https://hub.lesprojekt.cz/micka/',
         'proxy_url': 'https://cors-anywhere.herokuapp.com/'
     };
-    // read user configuration from Jupyter
+
     var read_config = function () {
         var config = IPython.notebook.config;
         for (var key in cfg) {
@@ -26,12 +28,13 @@ define([
                 cfg[key] = config.data.mickaSearch[key];
         }
     };
-    // get metadata
+	
+	// get metadata
     var fetch_metatada = function (search_params) {
-        return fetch(`${cfg.proxy_url}${cfg.micka_url}csw/${search_params}`);
+        return fetch(`${cfg.proxy_url}${cfg.micka_url}csw/${search_params}`, {credentials: 'same-origin'});
     };
     // do search 
-    var search_micka = function () {
+    search_micka = function () {
         var query = document.getElementById('mquery').value;
         query = query.length > 0 ? `FullText%3D'${query}'` : '';
         var mdata = fetch_metatada(`?request=GetRecords&query=${query}&format=application/json&MaxRecords=9999&StartPosition=&sortby=title%3AA&language=eng&outputSchema=http://www.w3.org/2005/Atom&typenames=gmd:MD_Metadata`);
@@ -66,25 +69,152 @@ define([
         });
         document.getElementById('msres').innerHTML = output;
     };
+	
+/////////////////////////////////
+
+	var build_side_panel = function (main_panel, side_panel, min_rel_width, max_rel_width) {
+        if (min_rel_width === undefined) min_rel_width = 0;
+        if (max_rel_width === undefined) max_rel_width = 100;
+
+        side_panel.css('display','none');
+        side_panel.insertAfter(main_panel);
+
+        var side_panel_splitbar = $('<div class="side_panel_splitbar"/>');
+        var side_panel_inner = $('<div class="side_panel_inner"/>');
+        var side_panel_expand_contract = $('<i class="btn fa fa-expand hidden-print">');
+        side_panel.append(side_panel_splitbar);
+        side_panel.append(side_panel_inner);
+        side_panel_inner.append(side_panel_expand_contract);
+
+        side_panel_expand_contract.attr({
+            title: 'expand/contract panel',
+            'data-toggle': 'tooltip'
+        }).tooltip({
+            placement: 'right'
+        }).click(function () {
+            var open = $(this).hasClass('fa-expand');
+            var site = $('#site');
+            slide_side_panel(main_panel, side_panel,
+                open ? 100 : side_panel.data('last_width') || side_panel_start_width);
+            $(this).toggleClass('fa-expand', !open).toggleClass('fa-compress', open);
+
+            var tooltip_text = (open ? 'shrink to not' : 'expand to') + ' fill the window';
+            if (open) {
+                side_panel.insertAfter(site);
+                site.slideUp();
+                $('#header').slideUp();
+                side_panel_inner.css({'margin-left': 0});
+                side_panel_splitbar.hide();
+            }
+            else {
+                side_panel.insertAfter(main_panel);
+                $('#header').slideDown();
+                site.slideDown({
+                    complete: function() { events.trigger('resize-header.Page'); }
+                });
+                side_panel_inner.css({'margin-left': ''});
+                side_panel_splitbar.show();
+            }
+
+            if (have_bs_tooltips) {
+                side_panel_expand_contract.attr('title', tooltip_text);
+                side_panel_expand_contract.tooltip('hide').tooltip('fixTitle');
+            }
+            else {
+                side_panel_expand_contract.tooltip('option', 'content', tooltip_text);
+            }
+        });
+
+        // bind events for resizing side panel
+        side_panel_splitbar.mousedown(function (md_evt) {
+            md_evt.preventDefault();
+            $(document).mousemove(function (mm_evt) {
+                mm_evt.preventDefault();
+                var pix_w = side_panel.offset().left + side_panel.outerWidth() - mm_evt.pageX;
+                var rel_w = 100 * (pix_w) / side_panel.parent().width();
+                rel_w = rel_w > min_rel_width ? rel_w : min_rel_width;
+                rel_w = rel_w < max_rel_width ? rel_w : max_rel_width;
+                main_panel.css('width', (100 - rel_w) + '%');
+                side_panel.css('width', rel_w + '%').data('last_width', rel_w);
+            });
+            return false;
+        });
+        $(document).mouseup(function (mu_evt) {
+            $(document).unbind('mousemove');
+        });
+
+        return side_panel;
+    };
+
+    var slide_side_panel = function (main_panel, side_panel, desired_width) {
+
+        var anim_opts = {
+            step : function (now, tween) {
+                main_panel.css('width', 100 - now + '%');
+            }
+        };
+
+        if (desired_width === undefined) {
+            if (side_panel.is(':hidden')) {
+                desired_width = (side_panel.data('last_width') || side_panel_start_width);
+            }
+            else {
+                desired_width = 0;
+            }
+        }
+
+        var visible = desired_width > 0;
+        if (visible) {
+            main_panel.css({float: 'left', 'overflow-x': 'auto'});
+            side_panel.show();
+        }
+        else {
+            anim_opts['complete'] = function () {
+                side_panel.hide();
+                main_panel.css({float : '', 'overflow-x': '', width: ''});
+            };
+        }
+
+        side_panel.animate({width: desired_width + '%'}, anim_opts);
+        return visible;
+    };
+
+    var populate_side_panel = function(side_panel) {
+        var side_panel_inner = side_panel.find('.side_panel_inner');
+		var inner_content = '<div id="msform"><input type="text" id="mquery" onfocus="Jupyter.keyboard_manager.disable()"><button onclick="search_micka();Jupyter.keyboard_manager.enable()">Search</button></div><div id="msres"></div>';
+		side_panel_inner.append(inner_content);
+    };
+
+    var toggleSearchPanel = function () {
+        var main_panel = $('#notebook_panel');
+        var side_panel = $('#side_panel');
+
+        if (side_panel.length < 1) {
+            side_panel = $('<div id="side_panel"/>');
+            build_side_panel(main_panel, side_panel,
+                side_panel_min_rel_width, side_panel_max_rel_width);
+            populate_side_panel(side_panel);
+        }
+
+        var visible = slide_side_panel(main_panel, side_panel);
+        //if (params.help_panel_add_toolbar_button) {
+            $('#btn_help_panel').toggleClass('active', visible);
+        //}
+        return visible;
+    };
+
+////////////////////////////////
 
     var initialize = function () {
         read_config();
-        // show/hide panel
+
         var handler = function () {
-            mdata = fetch_metatada('?request=GetRecords&query=&format=application/json&MaxRecords=9999&StartPosition=&sortby=title%3AA&language=eng&outputSchema=http://www.w3.org/2005/Atom&typenames=gmd:MD_Metadata');
-            mdata.then(response => response.json())
-            .then(arrayOfMetadata => {
-                console.log(arrayOfMetadata);
-                alert(arrayOfMetadata.records[0].id);
-            })
-            .catch(error => {
-                console.log(error);
-            });
+			var visible = toggleSearchPanel();
         };
 
         var action = {
-            icon: 'fa-search',
-            help    : 'Show Micka Search panel',
+            icon: 'fa-search', // a font-awesome class used on buttons, etc
+            help    : 'Micka Search',
             help_index : 'zz',
             label: 'Micka',
             handler : handler
@@ -95,13 +225,20 @@ define([
         var full_action_name = Jupyter.actions.register(action, action_name, prefix);
         Jupyter.toolbar.add_buttons_group([full_action_name]);
         console.log(log_prefix + 'button added');
-    };
+    }
 
     var load_ipython_extension = function() {
+		$('head').append(
+            $('<link/>', {
+                rel: 'stylesheet',
+                type:'text/css',
+                href: requirejs.toUrl('./search_panel.css')
+            })
+        );
         return IPython.notebook.config.loaded.then(initialize);
     };
 
     return {
         load_ipython_extension: load_ipython_extension
     };
-});
+});

mickaSearch.yaml

@@ -6,7 +6,7 @@ Icon: icon.png
 Main: main.js
 Compatibility: 4.x, 5.x
 Parameters:
-- name: mickaSearch.csw_url
+- name: mickaSearch.micka_url
   description: URL of MIcKA
   input_type: text
   default: https://hub.lesprojekt.cz/micka/

search_panel.css

@@ -0,0 +1,58 @@
+#side_panel {
+	position: relative;
+	top: 0;
+	right: 0;
+	height: 100%;
+	font-size: 0.9em;
+	overflow: auto;
+	background-color: #FFFFFF;
+}
+details > details {
+		margin-left: 1em;
+	}
+@media print {
+	/* print-previews can't handle 100%-height element as main part of page */
+	#side_panel {
+		height: auto;
+	}
+	
+	/*
+		see
+		stackoverflow.com/questions/19948474
+		stackoverflow.com/questions/20243767
+	*/
+	.col-md-6 {
+		float: left;
+		width: 50%;
+	}
+
+	.quickhelp {
+		page-break-inside: avoid;
+	}
+}
+
+.side_panel_splitbar {
+	position: absolute;
+	left: 0;
+	top: 0;
+	cursor: col-resize;
+	height: 100%;
+	width: 8px;
+	background: url(./img/handle-v.png) 2px 50% no-repeat;
+	background-color: #F6F6F6;
+}
+
+.side_panel_inner {
+	overflow: auto;
+	height: inherit;
+	margin-left: 8px;
+}
+
+.side_panel_inner > div:not(.alert) {
+	padding: 0.5em;
+}
+
+.search_panel_hide .modal-backdrop,
+.search_panel_hide .modal {
+	display: none !important;
+}