I recently created a small demo file using Calibre editor. It contains javascript attached to "onmouseover" and also some javascript to change the css on some div elements.
All the javascript runs in the Calibre editor (and in a Safari as well) - both onmouseover and the div css events. Also RunCheck in the editor reports "no problems". I also modified the manifest and spine elements in metadata.opf so that "properties=scripted" as per W3C instructions. The files are posted at the bottom.
However, when i try to run the file in Calibre editor - NONE of the javascript works . If I run it in Mac Ibook - the div/css javascript works, but not the onmouseover events.
I am running calibre: 5.29.0 installed on a MacBook via home-brew.
1) Does Calibre Reader allow javascript? And if so, are there special settings to allow javascript - I checked preferences and couldn't find any?
2) My eventual goal is to have an SVG element that will respond to the users clicks and mouse movements with a popup, but I can't seem to get a simple alert box to be displayed! I presume that the onmouseover event isn't running because of some conflict with Ibooks own event handling mechanism. If so, how do I coax Ibook and Calibre reader to use my script rather than its own?
Spoiler:
start.xhtml contents:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<style>
div {
width: 60px;
height: 60px;
margin: 10px;
background: blue;
float: left;
}
</style>
</head>
<body>
<h1 onmouseover="alert('h1 mouseover')">Hello world</h1>
<div></div>
<div></div>
<script>
$( "div" ).css( "border", "2px solid red" )
.css( "background", "yellow" );
</script>
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="45"
stroke-width="0" fill="black"
onmouseover="alert('circle mouseover')"
/>
<a href="https://en.wikipedia.org/wiki/Orange">
<circle cx="50" cy="50" r="30"
stroke="black" stroke-width="0" fill="orange"
>
<title>An orange circle</title>
</circle>
</a>
</svg>
</body>
</html>
metadata.opf contents:
<?xml version='1.0' encoding='utf-8'?>
<package xmlns="http://www.idpf.org/2007/opf" unique-identifier="uuid_id" version="2.0">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns
pf="http://www.idpf.org/2007/opf">
<dc:title>Demo</dc:title>
<dc:creator opf:file-as="egfb" opf:role="aut">Unknown</dc:creator>
<dc:identifier opf:scheme="calibre" id="calibre_id">d6a131e9-cd7e-443d-9969-d0b3e13f5a9b</dc:identifier>
<dc:identifier opf:scheme="uuid" id="uuid_id">f551a057-f9c0-4741-be82-e6b860b5b1d2</dc:identifier>
<dc:contributor opf:file-as="calibre" opf:role="bkp">calibre (5.29.0) [https://calibre-ebook.com]</dc:contributor>
<dc:language>eng</dc:language>
</metadata>
<manifest>
<item href="start.xhtml" id="start" media-type="application/xhtml+xml" properties="scripted"/>
<item href="toc.ncx" id="ncx" media-type="application/x-dtbncx+xml"/>
</manifest>
<spine toc="ncx">
<itemref idref="start"/>
</spine>
<guide/>
</package>