pekhota/gist:8f4c9756d0bac9a37355

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8/>
    <title>Existing list</title>
    <style>
        .list {
            font-family: sans-serif;
            margin: 0;
            padding: 20px 0 0;
        }

        .list > li {
            display: block;
            background-color: #eee;
            padding: 10px;
            box-shadow: inset 0 1px 0 #fff;
        }

        .avatar {
            max-width: 150px;
        }

        img {
            max-width: 100%;
        }

        h3 {
            font-size: 16px;
            margin: 0 0 0.3rem;
            font-weight: normal;
            font-weight: bold;
        }

        p {
            margin: 0;
        }

        input {
            border: solid 1px #ccc;
            border-radius: 5px;
            padding: 7px 14px;
            margin-bottom: 10px
        }

        input:focus {
            outline: none;
            border-color: #aaa;
        }

        .sort {
            padding: 8px 30px;
            border-radius: 6px;
            border: none;
            display: inline-block;
            color: #fff;
            text-decoration: none;
            background-color: #28a8e0;
            height: 30px;
        }

        .sort:hover {
            text-decoration: none;
            background-color: #1b8aba;
        }

        .sort:focus {
            outline: none;
        }

        .sort:after {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid transparent;
            content: "";
            position: relative;
            top: -10px;
            right: -5px;
        }

        .sort.asc:after {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #fff;
            content: "";
            position: relative;
            top: 13px;
            right: -5px;
        }

        .sort.desc:after {
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-bottom: 5px solid #fff;
            content: "";
            position: relative;
            top: -10px;
            right: -5px;
        }
    </style>
    <style>
        /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: rgba(255, 255, 255, .8) url('https://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
        }

        /* When the body has the loading class, we turn
           the scrollbar off with overflow:hidden */
        body.loading {
            overflow: hidden;
        }

        /* Anytime the body has the loading class, our
           modal element will be visible */
        body.loading .modal {
            display: block;
        }
    </style>
</head>
<body>
<div id="users">
    <input class="search" placeholder="Search"/>
    <button class="sort" data-sort="name">
        Sort by name
    </button>

    <ul class="list">
    </ul>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script>
    (function ($, List) {
        $(function () {
            var options = {
                valueNames: ['invoiceId', 'invoiceType'],
                item: '<li><button class="importButton">Import</button>' +
                '<h3 class="invoiceId"></h3>' +
                '<p class="invoiceType"></p>' +
                '</li>'
            };

            var userList = new List('users', options);

            $body = $("body");
            // source http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation
            $(document).on({
                ajaxStart: function () {
                    $body.addClass("loading");
                },
                ajaxStop: function () {
                    $body.removeClass("loading");
                }
            });

            $.getJSON('/en/xero/invoices')
                    .done(function (data) {
                        if(data)

                        $.each(data.Invoices, function (i, item) {
                            userList.add({
                                invoiceId: item.InvoiceID,
                                invoiceType: item.Type
                            });
                        });

                        $('.importButton').click(function () {
                            var id = $(this).next().text();

                            $.getJSON('/en/xero/import', {
                                invoice_id: id
                            }).done(function (response) {
                                window.opener.location = response.data.project_url;
                                window.close();
                            });
                        });
                    });
        });
    })(jQuery, List);

</script>
<div class="modal"><!-- Place at bottom of page --></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8/>
	<title>Existing list</title>
	<style>
	.list {
	font-family: sans-serif;
	margin: 0;
	padding: 20px 0 0;
	}

	.list > li {
	display: block;
	background-color: #eee;
	padding: 10px;
	box-shadow: inset 0 1px 0 #fff;
	}

	.avatar {
	max-width: 150px;
	}

	img {
	max-width: 100%;
	}

	h3 {
	font-size: 16px;
	margin: 0 0 0.3rem;
	font-weight: normal;
	font-weight: bold;
	}

	p {
	margin: 0;
	}

	input {
	border: solid 1px #ccc;
	border-radius: 5px;
	padding: 7px 14px;
	margin-bottom: 10px
	}

	input:focus {
	outline: none;
	border-color: #aaa;
	}

	.sort {
	padding: 8px 30px;
	border-radius: 6px;
	border: none;
	display: inline-block;
	color: #fff;
	text-decoration: none;
	background-color: #28a8e0;
	height: 30px;
	}

	.sort:hover {
	text-decoration: none;
	background-color: #1b8aba;
	}

	.sort:focus {
	outline: none;
	}

	.sort:after {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	content: "";
	position: relative;
	top: -10px;
	right: -5px;
	}

	.sort.asc:after {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #fff;
	content: "";
	position: relative;
	top: 13px;
	right: -5px;
	}

	.sort.desc:after {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 5px solid #fff;
	content: "";
	position: relative;
	top: -10px;
	right: -5px;
	}
	</style>
	<style>
	/* Start by setting display:none to make this hidden.
	Then we position it in relation to the viewport window
	with position:fixed. Width, height, top and left speak
	for themselves. Background we set to 80% white with
	our animation centered, and no-repeating */
	.modal {
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba(255, 255, 255, .8) url('https://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
	}

	/* When the body has the loading class, we turn
	the scrollbar off with overflow:hidden */
	body.loading {
	overflow: hidden;
	}

	/* Anytime the body has the loading class, our
	modal element will be visible */
	body.loading .modal {
	display: block;
	}
	</style>
	</head>
	<body>
	<div id="users">
	<input class="search" placeholder="Search"/>
	<button class="sort" data-sort="name">
	Sort by name
	</button>

	<ul class="list">
	</ul>
	</div>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
	<script>
	(function ($, List) {
	$(function () {
	var options = {
	valueNames: ['invoiceId', 'invoiceType'],
	item: '<li><button class="importButton">Import</button>' +
	'<h3 class="invoiceId"></h3>' +
	'<p class="invoiceType"></p>' +
	'</li>'
	};

	var userList = new List('users', options);

	$body = $("body");
	// source http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation
	$(document).on({
	ajaxStart: function () {
	$body.addClass("loading");
	},
	ajaxStop: function () {
	$body.removeClass("loading");
	}
	});

	$.getJSON('/en/xero/invoices')
	.done(function (data) {
	if(data)

	$.each(data.Invoices, function (i, item) {
	userList.add({
	invoiceId: item.InvoiceID,
	invoiceType: item.Type
	});
	});

	$('.importButton').click(function () {
	var id = $(this).next().text();

	$.getJSON('/en/xero/import', {
	invoice_id: id
	}).done(function (response) {
	window.opener.location = response.data.project_url;
	window.close();
	});
	});
	});
	});
	})(jQuery, List);

	</script>
	<div class="modal"><!-- Place at bottom of page --></div>
	</body>
	</html>