Commit cbb5ea89 authored by Leigh Stoller's avatar Leigh Stoller

Fix up the URN links on the image listing pages so that you can actually

copy the URN to the clipboard.
parent 23ae2273
......@@ -7,6 +7,30 @@ $(function ()
var filterindex = 7;
var showformat = false;
/*
* Add urn copy-to-clipboard popovers.
*/
var urnPopoverContent = function (urn) {
var string =
"<div style='width 100%'> "+
" <input readonly type=text " +
" style='display:inline; width: 93%; padding: 2px;' " +
" class='form-control input-sm' "+
" value='" + urn + "'>" +
" <a href='#' class='btn urn-copy-button' " +
" style='padding: 0px'>" +
" <span class='glyphicon glyphicon-copy'></span></a></div>";
return string;
};
function addUrnPopovers(id)
{
sup.addPopoverClip('#' + id + ' .urn-button',
function (target) {
var urn = $(target).data("urn");
return urnPopoverContent(urn);
});
}
function initialize()
{
window.APT_OPTIONS.initialize(sup);
......@@ -51,22 +75,10 @@ $(function ()
delay: {"hide" : 500, "show" : 150},
placement: 'auto',
});
// Prevent shooting to the top of the page on clicking the popover.
$('#images-table [data-toggle="popover"]')
.click(function (event) {
event.preventDefault();
});
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) &&
$(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
// Set up the urn link popovers to the table.
addUrnPopovers("images-table");
// Bind handlers for the checkboxes.
$('#my-images, #project-images, #public-images, ' +
'#admin-images, #system-images')
......
......@@ -13,8 +13,9 @@ $(function ()
var waitwaitString = templates["waitwait-modal"];
var amlist = null;
// Results for each AM so we can get it later.
var imagelist = {};
var imagelist = {};
// Popover for the URN link
function initialize()
{
window.APT_OPTIONS.initialize(sup);
......@@ -28,6 +29,30 @@ $(function ()
LoadClassic();
}
/*
* Add urn copy-to-clipboard popovers.
*/
var urnPopoverContent = function (urn) {
var string =
"<div style='width 100%'> "+
" <input readonly type=text " +
" style='display:inline; width: 93%; padding: 2px;' " +
" class='form-control input-sm' "+
" value='" + urn + "'>" +
" <a href='#' class='btn urn-copy-button' " +
" style='padding: 0px'>" +
" <span class='glyphicon glyphicon-copy'></span></a></div>";
return string;
};
function addUrnPopovers(id)
{
sup.addPopoverClip('#' + id + ' .urn-button',
function (target) {
var urn = $(target).data("urn");
return urnPopoverContent(urn);
});
}
/*
* Load images from each am in the list and generate a table.
*/
......@@ -105,6 +130,9 @@ $(function ()
}
});
// Set up the urn link popovers to the table.
addUrnPopovers(name);
var TableInit = function(tablename) {
$('#' + name + ' #' + tablename).removeClass("hidden");
......@@ -424,29 +452,7 @@ $(function ()
$(this).html(moment($(this).html()).format("ll"));
}
});
// This activates the popover subsystem.
$('#classic-images-table [data-toggle="popover"]').popover({
placement: 'auto',
});
// Prevent shooting to the top of the page on clicking the popover.
$('#classic-images-table [data-toggle="popover"]')
.click(function (event) {
event.preventDefault();
});
// This is to make the URN popover go away on click outside.
$('body').on('click', function (e) {
$('[data-toggle="popover"]')
.each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that
//triggers a popup
if (!$(this).is(e.target) &&
$(this).has(e.target).length === 0 &&
$('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
addUrnPopovers("classic-images-table");
$('#classic-images-div').removeClass("hidden");
var table = $('#classic-images-table')
......
......@@ -221,6 +221,69 @@ function SpitOops(id, msg)
ShowModal(modal_name);
}
function addPopoverClip (id, contentfunction)
{
$(id).click(function(event) {
event.preventDefault();
var button = this;
// If clicking on the button when the popover is
// showing, hide it and return.
if ($(button).data("bs.popover") !== undefined) {
$(button).popover('destroy');
return;
}
var urn = $(button).data("urn");
$(button).popover({
html: true,
content: contentfunction(this),
trigger: 'manual',
placement:'auto',
container:'body',
});
if (0) {
// If the user clicks somewhere else, kill this popover.
var hide = function (event) {
console.info("hide");
$(button).popover('destroy');
$('body').off("click", hide);
};
// Cannot bind it till the popover is shown.
$(button).on("shown.bs.popover", function() {
$('body').on("click", hide);
});
}
$(button).popover('show');
// Timeout to hide the popover. I tried the body click event
// above but it did not work consistently. Will revisit if
// I hear enough whining.
var mytimout = setTimeout(function f() {
$(button).popover('destroy');
}, 5000);
$(button).on("hide.bs.popover", function() {
clearTimeout(mytimout);
});
// DOM of the popover content.
var content = $(button).data("bs.popover").tip();
// Bind the copy-to-clipboard button.
$(content).find("a").click(function (e) {
e.preventDefault();
$(content).find("input").select();
document.execCommand("copy");
$(button).popover('destroy');
});
// If user clicks in the input, kill the popover.
$(content).find("input").click(function (e) {
e.preventDefault();
$(button).popover('destroy');
});
});
}
function GeniAuthenticate(cert, r1, success, failure)
{
var callback = function(json) {
......@@ -418,6 +481,7 @@ return {
InitGeniLogin: InitGeniLogin,
ImageDisplay: ImageDisplay,
ConfirmModal: ConfirmModal,
addPopoverClip: addPopoverClip,
};
})();
});
......@@ -65,15 +65,7 @@
<td><%- value.format %></td>
<% } %>
<td align="center">
<a href="#"
data-toggle='popover'
data-html='true'
data-trigger='click'
data-title="URN for your geni-lib script or RSpec"
data-content="<input type=text readonly=readonly
class=form-control
onClick='this.select();'
value='<%- value.urn %>'>">
<a href="#" data-urn="<%- value.urn %>" class="urn-button">
<span class="glyphicon glyphicon-link"></span>
</a>
</td>
......
......@@ -106,15 +106,7 @@
<% } %>
<td class="image-filesize"></td>
<td align="center">
<a href="#"
data-toggle='popover'
data-html='true'
data-trigger='click'
data-title="URN for your geni-lib script or RSpec"
data-content="<input type=text readonly=readonly
class=form-control
onClick='this.select();'
value='<%- image.urn %>'>">
<a href="#" data-urn="<%- image.urn %>" class="urn-button">
<span class="glyphicon glyphicon-link"></span>
</a>
</td>
......@@ -150,15 +142,7 @@
<% } %>
<td class="version-filesize"><%- version.filesize %></td>
<td align="center">
<a href="#"
data-toggle='popover'
data-html='true'
data-trigger='click'
data-title="URN for your geni-lib script or RSpec"
data-content="<input type=text readonly=readonly
class=form-control
onClick='this.select();'
value='<%- version.urn %>'>">
<a href="#" data-urn="<%- version.urn %>" class="urn-button">
<span class="glyphicon glyphicon-link"></span>
</a>
</td>
......@@ -248,15 +232,7 @@
<% } %>
<td class="image-filesize"></td>
<td align="center">
<a href="#"
data-toggle='popover'
data-html='true'
data-trigger='click'
data-title="URN for your geni-lib script or RSpec"
data-content="<input type=text readonly=readonly
class=form-control
onClick='this.select();'
value='<%- image.urn %>'>">
<a href="#" data-urn="<%- image.urn %>" class="urn-button">
<span class="glyphicon glyphicon-link"></span>
</a>
</td>
......@@ -292,15 +268,7 @@
<% } %>
<td class="version-filesize"><%- version.filesize %></td>
<td align="center">
<a href="#"
data-toggle='popover'
data-html='true'
data-trigger='click'
data-title="URN for your geni-lib script or RSpec"
data-content="<input type=text readonly=readonly
class=form-control
onClick='this.select();'
value='<%- version.urn %>'>">
<a href="#" data-urn="<%- version.urn %>" class="urn-button">
<span class="glyphicon glyphicon-link"></span>
</a>
</td>
......@@ -396,15 +364,7 @@
<% } %>
<td class="image-filesize"></td>
<td align="center">
<a href="#"
data-toggle='popover'
data-html='true'
data-trigger='click'
data-title="URN for your geni-lib script or RSpec"
data-content="<input type=text readonly=readonly
class=form-control
onClick='this.select();'
value='<%- image.urn %>'>">
<a href="#" data-urn="<%- image.urn %>" class="urn-button">
<span class="glyphicon glyphicon-link"></span>
</a>
</td>
......@@ -435,15 +395,7 @@
<% } %>
<td class="version-filesize"><%- version.filesize %></td>
<td align="center">
<a href="#"
data-toggle='popover'
data-html='true'
data-trigger='click'
data-title="URN for your geni-lib script or RSpec"
data-content="<input type=text readonly=readonly
class=form-control
onClick='this.select();'
value='<%- version.urn %>'>">
<a href="#" data-urn="<%- version.urn %>" class="urn-button">
<span class="glyphicon glyphicon-link"></span>
</a>
</td>
......
......@@ -146,15 +146,7 @@
<% } %>
<td><%- value.description %></td>
<td align="center">
<a href="#"
data-toggle='popover'
data-html='true'
data-trigger='click'
data-title="URN for your geni-lib script or RSpec"
data-content="<input type=text readonly=readonly
class=form-control
onClick='this.select();'
value='<%- value.urn %>'>">
<a href="#" data-urn="<%- value.urn %>" class="urn-button">
<span class="glyphicon glyphicon-link"></span>
</a>
</td>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment