Skip to content

Commit

Permalink
Fixed double click issue on click to copy [ref #7081, #6685, #5210]
Browse files Browse the repository at this point in the history
  • Loading branch information
@mheppler
mheppler committed Feb 3, 2021
1 parent e17300f commit e9e99b4
Show file tree
Hide file tree
Showing 5 changed files with 56 additions and 64 deletions.
4 changes: 2 additions & 2 deletions src/main/webapp/dataverse_template.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,10 @@

// Rebind bootstrap UI components
bind_bsui_components();
});
});
function clickSupportLink() {
$("[id$='headerSupportLink']").click();
}
}
//]]>
</script>
</h:body>
Expand Down
9 changes: 4 additions & 5 deletions src/main/webapp/file-info-fragment.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,19 +71,18 @@
</div>
<!-- CHECKSUM -->
<div class="checksum-block" jsf:rendered="#{!fileMetadata.dataFile.tabularData and !(empty fileMetadata.dataFile.checksumValue)}">
#{fileMetadata.dataFile.checksumType}:
<span class="sr-only #{!editDatafilesPage ? 'checksum-truncate' : ''}"
<span class="sr-only #{!editDatafilesPage ? 'checksum-truncate' : ''}" style="margin-right:3px;"
data-clipboard-action="copy"
data-clipboard-text="#{fileMetadata.dataFile.checksumValue}"
title="#{bundle['file.metaData.checksum.copy']} #{fileMetadata.dataFile.checksumValue}">#{fileMetadata.dataFile.checksumValue}</span>
title="#{bundle['file.metaData.checksum.copy']} #{fileMetadata.dataFile.checksumValue}">#{fileMetadata.dataFile.checksumType}: #{fileMetadata.dataFile.checksumValue}</span>
<span class="glyphicon glyphicon-copy btn-copy" data-clipboard-action="copy"
data-clipboard-text="#{fileMetadata.dataFile.checksumValue}" title="#{bundle['file.metaData.checksum.copy']} #{fileMetadata.dataFile.checksumValue}"></span>
</div>
<!-- TABULAR VARIABLES, OBSERVATIONS + UNF -->
<div class="unf-block" jsf:rendered="#{fileMetadata.dataFile.tabularData}">
<h:outputText id="fileNumVars" value="#{fileMetadata.dataFile.dataTable.varQuantity} #{bundle['file.metaData.dataFile.dataTab.variables']}, "/>
<h:outputText id="fileNumObs" value="#{fileMetadata.dataFile.dataTable.caseQuantity} #{bundle['file.metaData.dataFile.dataTab.observations']}"/>
<span jsf:id="fileUNF" class="sr-only #{!editDatafilesPage ? 'checksum-truncate' : ''}"
<h:outputText id="fileNumObs" value="#{fileMetadata.dataFile.dataTable.caseQuantity} #{bundle['file.metaData.dataFile.dataTab.observations']} "/>
<span jsf:id="fileUNF" class="sr-only #{!editDatafilesPage ? 'checksum-truncate' : ''}" style="margin-right:3px;"
jsf:rendered="#{!(empty fileMetadata.dataFile.unf)}"
data-clipboard-action="copy"
data-clipboard-text="#{fileMetadata.dataFile.unf}"
Expand Down
2 changes: 1 addition & 1 deletion src/main/webapp/filesFragment.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
style="margin-right:1px;" tableStyle="min-width:100%;width:auto;"
value="#{DatasetPage.fileMetadatasSearch}"
rowIndexVar="rowNum" rowKey="#{fileMetadata.dataFile.storageIdentifier}"
selection="#{DatasetPage.selectedFiles}" var="fileMetadata" widgetVar="filesTable"
rowSelectMode="checkbox" selection="#{DatasetPage.selectedFiles}" var="fileMetadata" widgetVar="filesTable"
rendered="#{DatasetPage.fileDisplayTable and (DatasetPage.workingVersion != null)}"
emptyMessage="#{DatasetPage.workingVersion.fileMetadatas.size() == 0 ? bundle['file.notFound.tip'] : bundle['file.notFound.search']}">
<p:ajax event="page" listener="#{DatasetPage.fileListingPaginatorListener}" update="filesTable" process="@this" oncomplete="refreshPaginator(),rebindCommand()" immediate="true"/>
Expand Down
101 changes: 47 additions & 54 deletions src/main/webapp/resources/js/dv_rebind_bootstrap_ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,57 +38,14 @@ function bind_bsui_components(){
// Custom Popover with HTML content
popoverHTML();

// clipboard.js click to copy
clickCopyClipboard();

// Dialog Listener For Calling handleResizeDialog
PrimeFaces.widget.Dialog.prototype.postShow = function() {
var dialog_id = this.jq.attr('id').split(/[:]+/).pop();
handleResizeDialog(dialog_id);
}


// TO-DO...
//
// MOVE ALL THIS TO ITS OWN FUNCTION

// clipboard.js copy btn
$('button.btn-copy, span.checksum-truncate, span.btn-copy').on('click', function () {


// WHY CLICK TWICE???
// INITIALIZE PLUGIN DOCUMENT.ON
// https://stackoverflow.com/a/9984269

// alert("Click <" + $(this).attr("class") + ">");


// pass selector to clipboard
var clipboard = new ClipboardJS(this);

clipboard.on('success', (e)=> {
// DEV TOOL DEBUG
console.log(e);

// check which selector was clicked
// swap icon for success ok
if ($(this).hasClass('btn-copy')) {
$(this).removeClass('glyphicon-copy').addClass('glyphicon-ok text-success');
// then swap icon back to clipboard
// https://stackoverflow.com/a/54270499
setTimeout(()=> { // use arrow function
$(this).removeClass('glyphicon-ok text-success').addClass('glyphicon-copy')
}, 2000);
}
else {
$(this).next('.btn-copy').removeClass('glyphicon-copy').addClass('glyphicon-ok text-success');
setTimeout(()=> {
$(this).next('.btn-copy').removeClass('glyphicon-ok text-success').addClass('glyphicon-copy')
}, 2000);
}

});
clipboard.on('error', (e)=> {
console.log(e);
});
});
}

function bind_tooltip_popover(){
Expand Down Expand Up @@ -202,30 +159,66 @@ function sharrre(){
}

/*
* Truncate file checksums + click to copy
* Truncate file checksums
*/
function checksumTruncate(){
$('span.checksum-truncate').each(function () {
$(this).toggleClass('sr-only').toggleClass('visisble');
var checksumText = $(this).text();
if (checksumText.length > 25) {
// COUNT ":" IN UNF VERSION LABEL
var labelIndex = checksumText.indexOf(':');
var checksumLength = checksumText.length;
if (checksumLength > 25) {
// COUNT " " IN TYPE LABEL, UNF HAS NONE
var prefixCount = (checksumText.match(/ /g) || []).length;

// INDEX OF LAST ":" IN TYPE LABEL, UNF HAS MORE THAN ONE
var labelIndex = checksumText.lastIndexOf(':');

// COUNT "=" IN UNF SUFFIX
var suffixCount = (checksumText.match(/=/g) || []).length;

// TRUNCATE MIDDLE W/ "..." + FIRST/LAST 3 CHARACTERS
// CHECK IF UNF LABEL
if (labelIndex > 0) {
$(this).text(checksumText.substr(0, (labelIndex + 3) + 3) + '...' + checksumText.substr((checksumText.length - suffixCount - 3), checksumText.length));
// CHECK IF UNF LABEL, LESS THAN ONE " "
if (prefixCount < 0) {
$(this).text(checksumText.substr(0,(labelIndex + 3)) + '...' + checksumText.substr((checksumLength - suffixCount - 3),checksumLength));
}
else {
$(this).text(checksumText.substr(0, 3) + '...' + checksumText.substr((checksumText.length - 3), checksumText.length));
$(this).text(checksumText.substr(0,(labelIndex + 5)) + '...' + checksumText.substr((checksumLength - suffixCount - 3),checksumLength));
}
}
});
}

function clickCopyClipboard(){
// clipboard.js click to copy
// pass selector to clipboard
var clipboard = new ClipboardJS('button.btn-copy, span.checksum-truncate, span.btn-copy');

clipboard.on('success', (e)=> {
// DEV TOOL DEBUG
// console.log(e);

// check which selector was clicked
// swap icon for success ok
if ($(e.trigger).hasClass('btn-copy')) {
$(e.trigger).removeClass('glyphicon-copy').addClass('glyphicon-ok text-success');
// then swap icon back to clipboard
// https://stackoverflow.com/a/54270499
setTimeout(()=> { // use arrow function
$(e.trigger).removeClass('glyphicon-ok text-success').addClass('glyphicon-copy')
}, 2000);
}
else {
$(e.trigger).next('.btn-copy').removeClass('glyphicon-copy').addClass('glyphicon-ok text-success');
setTimeout(()=> {
$(e.trigger).next('.btn-copy').removeClass('glyphicon-ok text-success').addClass('glyphicon-copy')
}, 2000);
}
});
clipboard.on('error', (e)=> {
console.log(e);
});
}

/*
* Select dataset/file citation onclick event
*/
Expand Down
4 changes: 2 additions & 2 deletions src/main/webapp/search-include-fragment.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -612,12 +612,12 @@
<h:outputText value="#{result.filetype}" rendered="#{empty SearchIncludeFragment.tabularDataDisplayInfo(result.entity) and result.fileTypeHighlightSnippet == null}"/>
<h:outputText value="#{result.fileTypeHighlightSnippet}" rendered="#{empty SearchIncludeFragment.tabularDataDisplayInfo(result.entity) and result.fileTypeHighlightSnippet != null}" escape="false"/>
<h:outputText value=" - #{SearchIncludeFragment.dataFileSizeDisplay(result.entity)}" rendered="#{!result.harvested}"/>
<h:outputText value=" - #{result.fileChecksumType}: " rendered="#{!result.harvested and !SearchIncludeFragment.isTabular(result.entity) and !(empty result.fileChecksumValue)}"/>
<h:outputText value=" - " rendered="#{!result.harvested and !SearchIncludeFragment.isTabular(result.entity) and !(empty result.fileChecksumValue)}"/>
<span class="checksum-block" jsf:rendered="#{!result.harvested and !SearchIncludeFragment.isTabular(result.entity) and !(empty result.fileChecksumValue)}">
<span class="sr-only checksum-truncate" style="margin-right:3px;"
data-clipboard-action="copy"
data-clipboard-text="#{result.fileChecksumValue}"
title="#{bundle['file.metaData.checksum.copy']} #{result.fileChecksumValue}">#{result.fileChecksumValue}</span>
title="#{bundle['file.metaData.checksum.copy']} #{result.fileChecksumValue}">#{result.fileChecksumType}: #{result.fileChecksumValue}</span>
<span class="glyphicon glyphicon-copy btn-copy"
data-clipboard-action="copy"
data-clipboard-text="#{result.fileChecksumValue}" title="#{bundle['file.metaData.checksum.copy']} #{result.fileChecksumValue}"></span>
Expand Down

0 comments on commit e9e99b4

Please sign in to comment.