CSLink javascript not properly scoped #49
Description
so it interferes with other javascript code (e.g. older Bootstrap versions).
Here's an example I put together:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
</head>
<body>
<div>
<!-- Button -->
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover"
data-trigger="focus" title="Dismissible popover"
data-content="And here's some amazing content. It's very engaging. Right?">Dismissible
popover</a>
</div>
<!-- Initiate CSLink -->
<div id="csLink" data-language="" data-correspondent-1-name=""
data-correspondent-1-id="http://d-nb.info/gnd/118554700" data-correspondent-2-name=""
data-correspondent-2-id="http://d-nb.info/gnd/115674667" data-start-date="1839-04-20"
data-end-date="" data-range="30" data-selection-when="before-after"
data-selection-span="median-before-after" data-result-max="4" data-exclude-edition="#AVHR">
</div>
<!-- Load CSLink JS -->
<!-- comment this out to see the expected behaviour of the button -->
<script type="text/javascript" src="https://weber-gesamtausgabe.de/resources/lib/csLink/dist/csLink.js"></script>
<!-- Initiate Bootstrap4 Popovers -->
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>Comment out the CSLink javascript script tag and see the expected behavior of the button: it should be activated by clicking the button and dismissed by clicking anywhere else (see Bootstrap Docs)
With the CSLink javascript included it is not dismissed.
This example also shows the CSS issues mentioned in #1: The popover text of the button is not completely visible and also lacks the arrow.