From 6514a878120c63f1af94ed49f7b4b83b88d74384 Mon Sep 17 00:00:00 2001 From: secret_online Date: Mon, 22 Jun 2015 18:09:46 +1200 Subject: [PATCH] Add JSON exporting --- index.html | 4 +++ main.js | 99 +++++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 21 +++++++++++- 3 files changed, 119 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 1fd0975..b701d71 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,10 @@

Aquatic Plants

Fish

+
+ + +

Source available on GitHub.

diff --git a/main.js b/main.js index 2db40fc..8a02b03 100644 --- a/main.js +++ b/main.js @@ -8,6 +8,10 @@ function init(){ addAddButton(arr[i]); var button = document.getElementById('genMD'); button.addEventListener('click', function(){showModal(generateMarkdown());}); + button = document.getElementById('genJSON'); + button.addEventListener('click', function(){showModal(generateJSON());}); + button = document.getElementById('importJSON'); + button.addEventListener('click', function(){importJSON();}); } function addInput(parent){ 'use strict'; @@ -51,6 +55,90 @@ function addRemoveButton(parent){ button.addEventListener('click', function(){removeInput(this.parentNode);}); parent.appendChild(button); } +function generateJSON(){ + var obj = {}; + obj._v = '1.0'; // JSON Version, in case structure changes later + obj.beacon = document.getElementById('beacon').value; + obj.planet = document.getElementById('planetName').value; + obj.star = document.getElementById('starName').value; + obj.region = document.getElementById('region').value; + obj.discoverer = document.getElementById('discoverer').value; + obj.atmosphere = []; + arr = document.querySelectorAll('#atmosphere input'); + for (var i = 0; i < arr.length; i++) + obj.atmosphere[i] = arr[i].value; + obj.general = {}; + obj.general.space = []; + var arr = document.querySelectorAll('#spaceFeatures input'); + for (var i = 0; i < arr.length; i++) + obj.general.space[i] = arr[i].value; + obj.general.ground = []; + arr = document.querySelectorAll('#ground input'); + for (var i = 0; i < arr.length; i++) + obj.general.ground[i] = arr[i].value; + obj.general.aquatic = []; + arr = document.querySelectorAll('#water input'); + for (var i = 0; i < arr.length; i++) + obj.general.aquatic[i] = arr[i].value; + obj.plants = {}; + obj.plants.ground = []; + var arr = document.querySelectorAll('#groundPlants .detail'); + for (var i = 0; i < arr.length; i++){ + obj.plants.ground[i] = {}; + obj.plants.ground[i].name = arr[i].querySelector('.name').value; + obj.plants.ground[i].image = arr[i].querySelector('.image').value; + obj.plants.ground[i].general = []; + var bullets = arr[i].querySelectorAll('.input input'); + for (var j = 0; j < bullets.length; j++) + obj.plants.ground[i].general[j] = bullets[j].value; + } + obj.plants.tree = []; + var arr = document.querySelectorAll('#trees .detail'); + for (var i = 0; i < arr.length; i++){ + obj.plants.tree[i] = {}; + obj.plants.tree[i].name = arr[i].querySelector('.name').value; + obj.plants.tree[i].image = arr[i].querySelector('.image').value; + obj.plants.tree[i].general = []; + var bullets = arr[i].querySelectorAll('.input input'); + for (var j = 0; j < bullets.length; j++) + obj.plants.tree[i].general[j] = bullets[j].value; + } + obj.plants.aquatic = []; + var arr = document.querySelectorAll('#waterPlants .detail'); + for (var i = 0; i < arr.length; i++){ + obj.plants.aquatic[i] = {}; + obj.plants.aquatic[i].name = arr[i].querySelector('.name').value; + obj.plants.aquatic[i].image = arr[i].querySelector('.image').value; + obj.plants.aquatic[i].general = []; + var bullets = arr[i].querySelectorAll('.input input'); + for (var j = 0; j < bullets.length; j++) + obj.plants.aquatic[i].general[j] = bullets[j].value; + } + obj.animals = {}; + obj.animals.ground = []; + var arr = document.querySelectorAll('#groundAnimals .detail'); + for (var i = 0; i < arr.length; i++){ + obj.animals.ground[i] = {}; + obj.animals.ground[i].name = arr[i].querySelector('.name').value; + obj.animals.ground[i].image = arr[i].querySelector('.image').value; + obj.animals.ground[i].general = []; + var bullets = arr[i].querySelectorAll('.input input'); + for (var j = 0; j < bullets.length; j++) + obj.animals.ground[i].general[j] = bullets[j].value; + } + obj.animals.aquatic = []; + var arr = document.querySelectorAll('#waterAnimals .detail'); + for (var i = 0; i < arr.length; i++){ + obj.animals.aquatic[i] = {}; + obj.animals.aquatic[i].name = arr[i].querySelector('.name').value; + obj.animals.aquatic[i].image = arr[i].querySelector('.image').value; + obj.animals.aquatic[i].general = []; + var bullets = arr[i].querySelectorAll('.input input'); + for (var j = 0; j < bullets.length; j++) + obj.animals.aquatic[i].general[j] = bullets[j].value; + } + return JSON.stringify(obj); +} function generateMarkdown(){ var md = '#Beacon Number: ' + document.getElementById('beacon').value + '
#Planet Name: ' + document.getElementById('planetName').value + '
#Star Name: ' + document.getElementById('starName').value + '
#Region: ' + document.getElementById('region').value + '
#Discoverer: ' + document.getElementById('discoverer').value + '

##Space Features:

'; var arr = document.querySelectorAll('#spaceFeatures input'); @@ -139,7 +227,6 @@ function generateMarkdown(){ } return md; } - function hideModal(){ 'use strict'; var oldDetail = document.querySelector('#modalContainer'); @@ -147,7 +234,6 @@ function hideModal(){ oldDetail.parentNode.removeChild(oldDetail); } } - function showModal(text){ 'use strict'; hideModal(); @@ -155,11 +241,12 @@ function showModal(text){ var close = document.createElement('button'); close.innerHTML = 'Close'; close.type = 'button'; + close.id = 'close'; close.addEventListener('click', hideModal); var quote = document.createElement('blockquote'); quote.innerHTML = text; var help = document.createElement('p'); - help.innerHTML = 'The following text has been generated from the information provided. Something wrong? Submit an issue on GitHub' + help.innerHTML = 'Something wrong? Submit an issue on GitHub' var modal = document.createElement('div'); modal.id = 'modal'; modal.appendChild(close); @@ -171,4 +258,8 @@ function showModal(text){ document.querySelector('body').appendChild(modalContainer); } -window.addEventListener('load', init); \ No newline at end of file +function importJSON(){ + showModal("Unfortunately, JSON importing is not yet available. It should be here Soontm, just like No Man's Sky itself... :("); +} + +window.addEventListener('load', init); diff --git a/style.css b/style.css index dfcfee8..23fa8d6 100644 --- a/style.css +++ b/style.css @@ -9,8 +9,18 @@ font-weight: normal; font-style: normal; } +@font-face { + font-family: 'Raleway'; + font-style: normal; + font-weight: 400; + src: local('Raleway'), url(http://fonts.gstatic.com/s/raleway/v9/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; +} * { - font-family: 'geosanslight-nmsregular', Helvetica, Verdana, Arial, sans-serif; + font-family: Raleway, Helvetica, Verdana, Arial, sans-serif; +} +h1, h2, h3, h4, h5, h6 { +font-family: geosanslight-nmsregular, Helvetica, Verdana, Arial, sans-serif; } /* Main layout */ header { @@ -36,6 +46,10 @@ main { width: auto; padding: 16px; } +.center { + margin: 0 auto; + text-align: center; +} button[type=button]{ color: #FFFFFF; background-color: #A4443C; @@ -67,6 +81,11 @@ button#genMD { margin: 10px auto; display: block; } +button#close { + margin-right: 10px; + position: absolute; + right: 0; +} .detailContainer, .inputContainer { position: relative; }