Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Copy Button and Fix Selection All Shortcuts in Modal #376

Merged
merged 8 commits into from
Feb 5, 2025
Merged

Add Copy Button and Fix Selection All Shortcuts in Modal #376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a0cca41
Add 'Click to Copy response'
WanjohiSammy Jan 24, 2025
f54f3ce
Refactor to work with Ctrl+Shift+A
WanjohiSammy Jan 24, 2025
6755127
Refactor
WanjohiSammy Jan 24, 2025
98b1fd6
Refactor button names and alert message
WanjohiSammy Feb 3, 2025
2702f1e
Update pages/getting-started/understand-odata-in-6-steps.html
WanjohiSammy Feb 4, 2025
de6b209
Resolve conflict
WanjohiSammy Feb 5, 2025
e54deb6
nit
WanjohiSammy Feb 5, 2025
0a26aab
Merge branch 'fix/3069305-missing-copy-code-button-and-ctlr-a-not-wor…
WanjohiSammy Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 69 additions & 1 deletion pages/getting-started/understand-odata-in-6-steps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,9 @@ <h4 class="modal-title" id="step-collection-modal-label">Response</h4>
{% endhighlight %}
</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-copy-code" onclick="copyCode()">Copy</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="feedback" aria-live="assertive" role="alert"></div>
</div>
</p></div>
</p></div>
Expand Down Expand Up @@ -296,7 +298,9 @@ <h4 class="modal-title" id="step-individual-modal-label">Response</h4>
{% endhighlight %}
</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-copy-code" aria-live="assertive" onclick="copyCode()">Copy</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="feedback" aria-live="assertive" role="alert"></div>
</div>
</p></div>
</p></div>
Expand Down Expand Up @@ -336,7 +340,9 @@ <h4 class="modal-title" id="step-query-modal-label">Response</h4>
{% endhighlight %}
</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-copy-code" aria-live="assertive" onclick="copyCode()">Copy</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="feedback" aria-live="assertive" role="alert"></div>
</div>
</p></div>
</p></div>
Expand All @@ -359,7 +365,9 @@ <h4 class="modal-title" id="step-post-modal-label">Response</h4>
{% endhighlight %}
</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-copy-code" aria-live="assertive" onclick="copyCode()">Copy</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="feedback" aria-live="assertive" role="alert"></div>
</div>
</p></div>
</p></div>
Expand All @@ -378,7 +386,9 @@ <h4 class="modal-title" id="step-relationship-modal-label">Response</h4>
{% endhighlight %}
</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-copy-code" aria-live="assertive" onclick="copyCode()">Copy</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="feedback" aria-live="assertive" role="alert"></div>
</div>
</p></div>
</p></div>
Expand Down Expand Up @@ -453,7 +463,9 @@ <h4 class="modal-title" id="step-function-modal-label">Response</h4>
{% endhighlight %}
</p></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-copy-code" aria-live="assertive" onclick="copyCode()">Copy</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="feedback" aria-live="assertive" role="alert"></div>
</div>
</p></div>
</p></div>
Expand Down Expand Up @@ -1360,7 +1372,7 @@ <h4>Contribute to "Understanding OData in 6 steps"</h4>
</p></div>
<script>
$(document).ready(function() {
$('.modal').on('shown.bs.modal', function () {
$('.modal').on('shown.bs.modal', function () {
$('.close').focus();
trapFocus(this)
$(this).find(".modal-body").attr("tabindex", -1);
Expand Down Expand Up @@ -1421,4 +1433,60 @@ <h4>Contribute to "Understanding OData in 6 steps"</h4>

});
}

// Select all text in a modal when Ctrl+A is pressed
$(document).keydown(function(e) {
// If the 'Ctrl + a' or 'Ctrl + Shift + a' for Narrator key are pressed simultaneously.
// If the condition is met, it prevents the default action and selects the contents of any visible modal's body.
// Check if the modal is open
if ($('.modal:visible .modal-body').length && e.ctrlKey && (e.key === 'a' || e.key === 'A')) {
e.preventDefault();
var modalBody = $('.modal:visible .modal-body');
modalBody.focus();

// Create a range to select the content within the modal body
var range = document.createRange();
range.selectNodeContents(modalBody[0]);

// Get the current selection and remove any existing ranges
var selection = window.getSelection();
selection.removeAllRanges();

// Add the new range to the selection
selection.addRange(range);
}
});

// Copy code to clipboard
function copyCode() {
// Loop through each modal
document.querySelectorAll('.modal').forEach(function(modal) {
// Check if the modal is currently open
if (modal.style.display === 'block') {
var body = modal.querySelector('.modal-body');

var range = document.createRange();
range.selectNodeContents(body);
// Get the current selection and remove any existing ranges
var selection = window.getSelection();
selection.removeAllRanges();
// Add the new range to the selection
selection.addRange(range);

document.execCommand("copy");

// Provide feedback to the user

$('#feedback').text('Payload copied to the clipboard.').show();

// Hide the feedback after 3 seconds
setTimeout(function() {
$('#feedback').fadeOut('slow');
}, 3000);

// focus on the modal body to show the user that the content has been copied
body.focus();
}
});
}
</script>
16 changes: 16 additions & 0 deletions public/css/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,16 @@ a.carousel-control.left:focus, a.carousel-control.right:focus {
background-color: #d23714;
border-color: #d23714;
}
.btn-secondary {
padding: 10px 20px;
color: #ffffff;
background-color: #6c757d;
border-color: #6c757d;
cursor: pointer;
}
.btn-secondary:hover {
background-color: #272b2e;
}
.label-success{
background-color: #277a33;
}
Expand Down Expand Up @@ -462,4 +472,10 @@ td {

.other-protocols-item {
background-color: #f2f2f2;
}

#feedback {
margin: 10px;
font-weight: bold;
color: green;
}