mickaSearch/main.js

define([
	'require',
    'base/js/namespace',
	'base/js/events',
    'jquery'
], function(
	requirejs,
    Jupyter,
	events,
    $
) {
	var have_bs_tooltips = false;
	
    var mod_name = "mickaSearch";
    var log_prefix = `[${mod_name}] `;
	var side_panel_min_rel_width = 10;
    var side_panel_max_rel_width = 90;
    var side_panel_start_width = 45;
    var load_next;
    var cfg = {
        //'micka_url': 'https://hub.lesprojekt.cz/micka/',
        'micka_url': '',
        //'proxy_url': 'https://cors-anywhere.herokuapp.com/'
        'proxy_url': ''
    };

    var read_config = function () {
        var config = IPython.notebook.config;
        for (var key in cfg) {
            if (config.data.mickaSearch.hasOwnProperty(key))
                cfg[key] = config.data.mickaSearch[key];
        }
    };
	
	// get metadata
    var fetch_metatada = function (search_params) {
        return fetch(`${cfg.proxy_url}${cfg.micka_url}csw/${search_params}`, {credentials: 'same-origin'});
    };
    // do search 
    search_micka = function () {
        load_next = 1;
        document.getElementById('msres').innerHTML = '';
        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&sortby=title%3AA&language=eng&outputSchema=http://www.w3.org/2005/Atom&typenames=gmd:MD_Metadata&StartPosition=${load_next}`);
        mdata.then(response => response.json())
        .then(arrayOfMetadata => {
            create_view(arrayOfMetadata.records);
            create_load(arrayOfMetadata.next);
        })
        .catch(error => {
            console.log(log_prefix + error);
        });
    };
    // load next page 
    search_micka_next = 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&sortby=title%3AA&language=eng&outputSchema=http://www.w3.org/2005/Atom&typenames=gmd:MD_Metadata&StartPosition=${load_next}`);
        mdata.then(response => response.json())
        .then(arrayOfMetadata => {
            create_view(arrayOfMetadata.records);
            create_load(arrayOfMetadata.next);
        })
        .catch(error => {
            console.log(log_prefix + error);
        });
    };
    // prepare and render html structure
    var create_view = function(data) {
        var output = '';
        data.forEach(function(entry) {
            output += `<details><summary>${entry.title}</summary>`;
            output += '<p>Type: ';
            output += entry.type=='application' ? `${entry.type} - Service: ${entry.serviceType}` : `${entry.type}`;
            output += `<br><a href="${cfg.micka_url}record/basic/${entry.id}" target="_blank" title="Full MD Record">MD Record</a>`;
            output += entry.abstract.length > 0 ? `<br>Abstract: ${entry.abstract}` : '';
            output += entry.bbox.length > 0 ? `<br>Boundig box: ${entry.bbox}` : '';
            output += entry.imgURL ? `<details><summary>Thumbnail</summary><img src="${entry.imgURL}" width="200" onerror="this.parentElement.style.display='none'"></details>` : '';
            var links = '';
            entry.links.forEach(function(link) {
                links += `<li>${link.url}</li>`;
            });
            output += links.length > 0 ? `<details><summary>Links</summary><ul>${links}</ul></details>` : '';
            output += '</p>';
            output += '</details>';
        });
        document.getElementById('msres').innerHTML += output;
    };
    //check pagination, enable load next page
    var create_load = function (next) {
        if (next) {
            load_next += 100;
            document.getElementById('msnext').innerHTML = `<button onclick="search_micka_next()">More</button>`;		
        } else {
            document.getElementById('msnext').innerHTML ='';
        }
    }
	
/////////////////////////////////

	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()" onfocusout="Jupyter.keyboard_manager.enable()">
		<button onclick="search_micka();Jupyter.keyboard_manager.enable()" id="msBtn">Search</button>
		</div>
		<div id="msres"></div>
		<div id="msnext"></div>
		<script>
		var msinput = document.getElementById("mquery");
		msinput.addEventListener("keyup", function(event) {
			if (event.keyCode === 13) {
				event.preventDefault();
                document.getElementById("msBtn").click();
				msinput.blur();
			}
		});
		</script>`;
		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_msearch').toggleClass('active', visible);
        //}
        return visible;
    };

////////////////////////////////

    var initialize = function () {
        read_config();

        var handler = function () {
			var visible = toggleSearchPanel();
        };

        var action = {
            icon: 'fa-search',
            help    : 'Micka Search',
            help_index : 'zz',
            label: 'Micka',
            handler : handler,
			id: 'btn_msearch'
        };
        var prefix = 'micka_search';
        var action_name = 'micka-search';

        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
    };
});