MDL-62491 core_privacy: Add html files to the user data export.

This adds html to the data export that allows for easier navigation
and reading of data.

privacy/export_files/general.css

@@ -0,0 +1,50 @@
+.hide {
+    display: none;
+}
+
+li.menu-item {
+    cursor: pointer;
+}
+
+li[aria-expanded=false]:not(.item) {
+    list-style-image: url('pix/collapsed.svg');
+}
+
+li[aria-expanded=true]:not(.item) {
+    list-style-image: url('pix/expanded.svg');
+}
+
+[aria-expanded="false"] > [role="group"] {
+    display: none;
+}
+
+#navigation {
+    display: inline-block;
+    width: 20%;
+    vertical-align: top;
+    overflow: scroll;
+    border-radius: 0.3rem;
+}
+
+[data-main-content] {
+    display: inline-block;
+    width: 69%;
+    vertical-align: top;
+}
+
+.title {
+    font-size: large;
+    font-weight: bold;
+}
+
+.block {
+    padding: 19px;
+}
+
+.item {
+    list-style-image: url('pix/navigationitem.svg');
+}
+
+.moodle-logo {
+    width: 110px;
+}

privacy/export_files/general.js

@@ -0,0 +1,138 @@
+var currentlyloaded = [];
+
+/**
+ * Loads the data for the clicked navigation item.
+ *
+ * @param  {Object} clickednode The jquery object for the clicked node.
+ */
+function handleClick(clickednode) {
+    var contextcrumb = '';
+    var parentnodes = clickednode.parents('li');
+    for (var i = parentnodes.length; i >= 0; i--) {
+        var treenodes = window.$(parentnodes[i]);
+        if (treenodes.hasClass('item')) {
+            if (contextcrumb == '') {
+                contextcrumb = treenodes[0].innerText;
+            } else {
+                contextcrumb = contextcrumb + ' | ' + treenodes[0].innerText;
+            }
+        } else if (treenodes.hasClass('menu-item')) {
+            if (contextcrumb == '') {
+                contextcrumb = treenodes[0].firstChild.textContent;
+            } else {
+                contextcrumb = contextcrumb + ' | ' + treenodes[0].firstChild.textContent;
+            }
+        }
+    }
+    var datafile = clickednode.attr('data-var');
+    loadContent(datafile, function() {
+        addFileDataToMainArea(window[datafile], contextcrumb);
+    });
+}
+
+/**
+ * Load content to be displayed.
+ *
+ * @param  {String}   datafile The json data to be displayed.
+ * @param  {Function} callback The function to run after loading the json file.
+ */
+function loadContent(datafile, callback) {
+
+    // Check to see if this file has already been loaded. If so just go straight to the callback.
+    if (fileIsLoaded(datafile)) {
+        callback();
+        return;
+    }
+
+    // This (user_data_index) is defined in data_index.js
+    var data = window.user_data_index[datafile];
+    var newscript = document.createElement('script');
+
+    if (newscript.readyState) {
+        newscript.onreadystatechange = function() {
+            if (this.readyState == 'complete' || this.readyState == 'loaded') {
+                this.onreadystatechange = null;
+                callback();
+            }
+        };
+    } else {
+        newscript.onload = function() {
+            callback();
+        };
+    }
+
+    newscript.type = 'text/javascript';
+    newscript.src = data;
+    newscript.charset = 'utf-8';
+    document.getElementsByTagName("head")[0].appendChild(newscript);
+
+    // Keep track that this file has already been loaded.
+    currentlyloaded.push(datafile);
+}
+
+/**
+ * Checks to see if the datafile has already been loaded onto the page or not.
+ *
+ * @param  {String} datafile The file entry we are checking to see if it is already loaded.
+ * @return {Boolean} True if already loaded otherwise false.
+ */
+function fileIsLoaded(datafile) {
+    for (var index in currentlyloaded) {
+        if (currentlyloaded[index] == datafile) {
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * Adds the loaded data to the main content area of the page.
+ *
+ * @param {Object} data  Data to be added to the main content area of the page.
+ * @param {String} title Title for the content area.
+ */
+function addFileDataToMainArea(data, title) {
+    var dataarea = window.$('[data-main-content]');
+    while (dataarea[0].firstChild) {
+        dataarea[0].removeChild(dataarea[0].firstChild);
+    }
+    var htmldata = makeList(data);
+
+    var areatitle = document.createElement('h2');
+    areatitle.innerHTML = title;
+    dataarea[0].appendChild(areatitle);
+
+    var maincontentlist = document.createElement('div');
+    maincontentlist.innerHTML = htmldata;
+    dataarea[0].appendChild(maincontentlist.firstChild);
+}
+
+/**
+ * Creates an unordered list with the json data provided.
+ *
+ * @param  {Object} jsondata The json data to turn into an unordered list.
+ * @return {String} The html string of the unordered list.
+ */
+function makeList(jsondata) {
+    var html = '<ul>';
+    for (var key in jsondata) {
+        html += '<li>';
+        if (typeof jsondata[key] == 'object') {
+            html += key;
+            html += makeList(jsondata[key]);
+        } else {
+            html += key + ': ' + jsondata[key];
+        }
+        html += '</li>';
+    }
+    html += '</ul>';
+    return html;
+}
+
+window.$(document).ready(function() {
+    window.$('[data-var]').click(function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleClick(window.$(this));
+    });
+});