Commit 8a8af840 authored by Emmanuel Raviart's avatar Emmanuel Raviart

Cleanup JavaScript code.

parent 39582496
......@@ -17,7 +17,7 @@ d3Bubbles.installPolyfill();
var rAF = typeof requestAnimationFrame !== 'undefined'
? requestAnimationFrame
: function(callback) { setTimeout(function() { callback(); }, 0); };
: function (callback) { setTimeout(function () { callback(); }, 0); };
// Authentication
......@@ -36,61 +36,53 @@ var flags = {
var main = Elm.Main.embed(document.getElementById('main'), flags);
// Ports
main.ports.setDocumentMetatags.subscribe(function(metatags) {
if (metatags.hasOwnProperty('description')) {
var element = document.head.querySelector('meta[property="og:description"]');
if (element) {
element.setAttribute('content', metatags.description);
}
}
if (metatags.hasOwnProperty('imageUrl')) {
var element = document.head.querySelector('meta[property="og:image"]');
if (element) {
element.setAttribute('content', metatags.imageUrl);
}
// From https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17
main.ports.fileSelected.subscribe(function (id) {
var node = document.getElementById(id);
if (node === null) {
return;
}
if (metatags.hasOwnProperty('title')) {
var genericTitle = "OGP Toolbox";
var title = metatags.title + " – " + genericTitle;
var element = document.head.querySelector('meta[property="og:title"]');
if (element) {
element.setAttribute('content', title);
}
// If your file upload field allows multiple files, you might
// want to consider turning this into a `for` loop.
var file = node.files[0];
var reader = new FileReader();
var elements = document.head.getElementsByTagName('title');
if (elements.length) {
var element = elements[0];
element.innerText = title;
}
}
// FileReader API is event based. Once a file is selected
// it fires events. We hook into the `onload` event for our reader.
reader.onload = (function (event) {
// The event carries the `target`. The `target` is the file
// that was selected. The result is base64 encoded contents of the file.
var base64encoded = event.target.result;
// We build up the `ImagePortData` object here that will be passed to our Elm
// runtime through the `fileContentRead` subscription.
var portData = {
contents: base64encoded,
filename: file.name
};
var element = document.head.querySelector('meta[property="og:url"]');
if (element) {
element.setAttribute('content', window.location.href);
}
// We call the `fileContentRead` port with the file data
// which will be sent to our Elm runtime via Subscriptions.
main.ports.fileContentRead.send(portData);
});
if (metatags.hasOwnProperty('twitterName')) {
var element = document.head.querySelector('meta[property="twitter:site"]');
if (element) {
element.setAttribute('content', metatags.twitterName);
}
}
// Connect our FileReader with the file that was selected in our `input` node.
reader.readAsDataURL(file);
});
main.ports.mountd3bubbles.subscribe(function(data) {
main.ports.mountd3bubbles.subscribe(function (data) {
// Remove previous D3 bubbles instances if present in the DOM.
Array.prototype.forEach.call( document.querySelectorAll("svg.D3Bubbles"), function( node ) {
Array.prototype.forEach.call( document.querySelectorAll("svg.D3Bubbles"), function (node) {
node.parentNode.removeChild( node );
});
// Use rAF in order to be sure that the port Cmd is called after view is rendered.
rAF(function() {
var bubbles = data.popularTags.map(function(popularTag) {
rAF(function () {
var bubbles = data.popularTags.map(function (popularTag) {
return {
name: popularTag.tag,
radius: popularTag.count,
......@@ -99,8 +91,8 @@ main.ports.mountd3bubbles.subscribe(function(data) {
};
});
if (data.selectedTags.length) {
bubbles = bubbles.concat(data.selectedTags.map(function(selectedTag) {
var maxRadius = Math.max.apply(null, data.popularTags.map(function(popularTag) {
bubbles = bubbles.concat(data.selectedTags.map(function (selectedTag) {
var maxRadius = Math.max.apply(null, data.popularTags.map(function (popularTag) {
return popularTag.count;
}));
return {
......@@ -125,38 +117,48 @@ main.ports.mountd3bubbles.subscribe(function(data) {
});
// From https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17
main.ports.fileSelected.subscribe(function (id) {
var node = document.getElementById(id);
if (node === null) {
return;
main.ports.setDocumentMetatags.subscribe(function (metatags) {
if (metatags.hasOwnProperty('description')) {
var element = document.head.querySelector('meta[property="og:description"]');
if (element) {
element.setAttribute('content', metatags.description);
}
}
// If your file upload field allows multiple files, you might
// want to consider turning this into a `for` loop.
var file = node.files[0];
var reader = new FileReader();
if (metatags.hasOwnProperty('imageUrl')) {
var element = document.head.querySelector('meta[property="og:image"]');
if (element) {
element.setAttribute('content', metatags.imageUrl);
}
}
// FileReader API is event based. Once a file is selected
// it fires events. We hook into the `onload` event for our reader.
reader.onload = (function(event) {
// The event carries the `target`. The `target` is the file
// that was selected. The result is base64 encoded contents of the file.
var base64encoded = event.target.result;
// We build up the `ImagePortData` object here that will be passed to our Elm
// runtime through the `fileContentRead` subscription.
var portData = {
contents: base64encoded,
filename: file.name
};
if (metatags.hasOwnProperty('title')) {
var genericTitle = "OGP Toolbox";
var title = metatags.title + " – " + genericTitle;
// We call the `fileContentRead` port with the file data
// which will be sent to our Elm runtime via Subscriptions.
main.ports.fileContentRead.send(portData);
});
var element = document.head.querySelector('meta[property="og:title"]');
if (element) {
element.setAttribute('content', title);
}
// Connect our FileReader with the file that was selected in our `input` node.
reader.readAsDataURL(file);
var elements = document.head.getElementsByTagName('title');
if (elements.length) {
var element = elements[0];
element.innerText = title;
}
}
var element = document.head.querySelector('meta[property="og:url"]');
if (element) {
element.setAttribute('content', window.location.href);
}
if (metatags.hasOwnProperty('twitterName')) {
var element = document.head.querySelector('meta[property="twitter:site"]');
if (element) {
element.setAttribute('content', metatags.twitterName);
}
}
});
......@@ -166,4 +168,4 @@ main.ports.storeAuthentication.subscribe(function (authentication) {
} else {
window.localStorage.removeItem('authentication');
}
});
\ No newline at end of file
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment