...
 
Commits (2)
......@@ -2,5 +2,10 @@ Uses d3, installable with:
npm install d3
Using svgpan
git clone https://github.com/aleofreddi/svgpan.git
Problem now that d3 generated svg doesn't include the proper namespace (does d3 itself have a means of addressing this, and/or is this best done more general purpose).
* [SVG Styling](https://www.w3.org/TR/SVG/styling.html#StyleElementExample)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg8"
id="svg12393"
inkscape:version="0.92.1 r15371"
sodipodi:docname="emptypage.svg">
sodipodi:docname="playlist.svg"
class="">
<script
xlink:href="svgpan/svgpan.js"
id="script9240" />
<defs
id="defs2" />
id="defs12387">
<style
id="style7655"><![CDATA[
.nowplaying {
fill: purple;
}
]]></style>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
......@@ -25,11 +34,11 @@
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35"
inkscape:cx="-182.85714"
inkscape:cy="554.28571"
inkscape:zoom="0.0875"
inkscape:cx="1677.0847"
inkscape:cy="321.0501"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
inkscape:current-layer="svg12393"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="704"
......@@ -37,7 +46,7 @@
inkscape:window-y="27"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
id="metadata12390">
<rdf:RDF>
<cc:Work
rdf:about="">
......@@ -51,5 +60,6 @@
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1" />
id="viewport">
</g>
</svg>
......@@ -20,9 +20,13 @@
}
audio {
position: absolute;
left: 0; top: 0;
left: 0; bottom: 0;
width: 100%;
z-index: 7;
}
.nowplaying {
fill: red;
}
</style>
</head>
......@@ -62,11 +66,13 @@ function load_and_map_data (dataurl, svg) {
d3.text(dataurl, function (data) {
data = data.trim().split(/\n/);
// console.log("data", data);
var selection = d3.select(svg)
var selection = d3.select(svg).select("g")
.selectAll("a.item").data(data, function (d) { return d });
var enter = selection.enter();
console.log("ENTER", enter.size());
enter.append("a").attr("class", "item").attr("xlink:href", function (d) { return d })
enter.append("a").attr("class", "item")
.attr("xlink:href", function (d) { return d })
.attr("xlink:title", function (d) { return d })
.append("g").attr("transform", function (d) {
var x = Math.random() * 800,
y = Math.random() * 800;
......@@ -93,53 +99,29 @@ function map_clicks(document, audio) {
// console.log("href", href);
if (href) {
audio.src = href;
var old_playing = document.querySelector(".nowplaying");
if (old_playing) {
old_playing.classList.remove("nowplaying");
}
e.target.classList.add("nowplaying");
}
}
}, false);
}
function post (url, data, callback) {
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
// request.setRequestHeader('Content-Type', 'application/octet-stream');
request.onload = function() {
if (request.readyState == XMLHttpRequest.DONE && request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
callback(null, resp);
} else {
callback("server error");
}
};
request.onerror = function() {
callback("connection error");
};
var sdata = "";
for (var key in data) {
if (data.hasOwnProperty(key)) {
sdata += (sdata?"&":"") + key+"="+encodeURIComponent(data[key]);
}
}
request.send(sdata);
}
function save_svg (svg) {
var text = svg.rootElement.outerHTML;
// var text = svg.rootElement.outerHTML;
var text = (new XMLSerializer()).serializeToString(svg); // apparently XMLSerializer existing in IE >= 9 ... this includes important things like the xmlstylesheet!
// console.log("save svg", svg, text);
post("playlist.svg", {text: text}, function (err, resp) {
if (err) {
alert("ERROR saving: " + err);
} else {
// console.log("saved", resp);
alert("Saved " + resp);;
}
d3.request("playlist.svg").post("text="+encodeURIComponent(text), function (resp) {
alert("Saved ("+resp.status+" "+resp.statusText+")");
})
}
document.addEventListener("keydown", function (e) {
console.log("keydown", e);
// console.log("keydown", e);
if (e.key == "s" && e.ctrlKey) {
console.log("SAVE SVG");
// console.log("SAVE SVG");
e.preventDefault();
save_svg(iframe.contentDocument);
}
......
This diff could not be displayed because it is too large.