diff --git a/.gitignore b/.gitignore index 3a01937..15c575c 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,5 @@ libraries/* .fuse_hidden* # Don't include .DS_Store files *.DS_Store +# Don't include textastic iCloud stuff +*.icloud diff --git a/README.md b/README.md index 2a07fa5..a9b0750 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ I suck at JavaScript, which is why I wrote a lot of the underlying code in Pytho - [x] Create small info button that explains the project, controls, etc. - [x] Render this README into the help dialog - [x] The area with the network should contain instructions when it is blank - - [ ] Create a more thorough help dialog explaining controls, etc. which also includes the README + - [x] Create a more thorough help dialog explaining controls, etc. which also includes the README - [x] Add a "Random Article" button - [ ] While waiting for a node to expand, show a spinner on it to indicate progress is happening diff --git a/assets/GitHub.png b/assets/GitHub.png new file mode 100644 index 0000000..ea6ff54 Binary files /dev/null and b/assets/GitHub.png differ diff --git a/assets/arrow-back.png b/assets/arrow-back.png new file mode 100755 index 0000000..4051ab2 Binary files /dev/null and b/assets/arrow-back.png differ diff --git a/assets/document.png b/assets/document.png new file mode 100755 index 0000000..0f37ec2 Binary files /dev/null and b/assets/document.png differ diff --git a/assets/game-controller.png b/assets/game-controller.png new file mode 100755 index 0000000..54cd881 Binary files /dev/null and b/assets/game-controller.png differ diff --git a/assets/information.png b/assets/information.png new file mode 100755 index 0000000..8e03190 Binary files /dev/null and b/assets/information.png differ diff --git a/css/helpdialog.css b/css/helpdialog.css index 793da33..f32ef84 100644 --- a/css/helpdialog.css +++ b/css/helpdialog.css @@ -19,9 +19,127 @@ bottom:0;top:0;left:0;right:0; margin: 10vh; /* Allow scrolling */ - overflow: scroll; + overflow-y:auto; + overflow-x:hidden; /* Appearance */ background-color: #fff; border: 1px solid #ccc; border-radius: 15px; } +/* Less margin for small screens */ +@media screen and (max-width: 750px) { + .modal-content { + margin: 5vh; + } +} + + +.menu { + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + padding-top:20px; + background-color:#f1f0f7; +} + +/* Styles for UINavigationController-like menu*/ +.menu > ul { + width:100%; + padding:0 !important; +} +.menu > ul > li { /* Items in help menu list */ + font-size: 18px; + background-color: #fff; + border-top: 1px solid #e2e2e2; + line-height: 40px; + height:40px; + padding-left: 20px; +} +.menu > ul > li > img { + margin-top:3px; + margin-bottom:8px; + margin-right:20px; + height:30px; + vertical-align: middle; + width:auto; + border: 1px solid #ccc; + border-radius:50%; +} +.menu > ul > li:last-child { /* Only bottom element needs bottom border */ + border-bottom: 1px solid #e2e2e2; +} +.menu-spacer { /* Spacers in help menu list */ + height:32px; + background-color:#f1f0f7 !important; + border-top: 1px solid #e2e2e2; +} + +.menu button { + height:33px; + line-height:33px; + opacity:0.75; +} +.menu button > img { + height:20px; + width:auto; + vertical-align: center; +} + +.menu-page { + display:none; + padding:20px; +} + +.menu-content { + position:absolute; + width:100%; + height:100%; + top:0; + left:0; + padding:20px; + background-color: #fff !important; + overflow-y:auto; +} + +.menu button { + position:absolute; +} + + +/* Styles for animation */ +.toLeft { + -webkit-animation: moveToLeft .6s ease both; + animation: moveToLeft .6s ease both; +} +@keyframes moveToLeft { + from { } + to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } +} + +.fromLeft { + -webkit-animation: moveFromLeft .6s ease both; + animation: moveFromLeft .6s ease both; +} +@keyframes moveFromLeft { + from { -webkit-transform: translateX(-100%); transform: translateX(-100%); } +} + + +.toRight { + -webkit-animation: moveToRight .6s ease both; + animation: moveToRight .6s ease both; +} +@keyframes moveToRight { + from {} + to {-webkit-transform: translateX(100%); transform: translateX(100%);} +} + +.fromRight { + -webkit-animation: moveFromRight .6s ease both; + animation: moveFromRight .6s ease both; +} +@keyframes moveFromRight { + from { -webkit-transform: translateX(100%); transform: translateX(100%); } +} diff --git a/css/style.css b/css/style.css index 33bbb1c..e70e59d 100644 --- a/css/style.css +++ b/css/style.css @@ -1,6 +1,7 @@ /* == GLOBAL STYLES == */ -* { +*, *:before, *:after{ overflow:hidden; /* Nothing should scroll unless specified otherwise */ + -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @@ -72,6 +73,7 @@ button[type=button]:active { background: #fff url(../assets/random.png); background-size: 31px 31px; } + #random:active { background: #f5f5f5 url(../assets/random.png); background-size: 31px 31px; diff --git a/index.html b/index.html index c9c00b2..36c3750 100644 --- a/index.html +++ b/index.html @@ -20,27 +20,75 @@ + + +
- - +
+ - +
+

Wikipedia Mapper

A tool for visualizing the connections between wikipedia pages.
@@ -56,8 +104,6 @@

Wikipedia Mapper

- - @@ -68,10 +114,10 @@

Wikipedia Mapper

+ + - - diff --git a/js/bindings.js b/js/bindings.js index 6401d80..2f50486 100644 --- a/js/bindings.js +++ b/js/bindings.js @@ -2,8 +2,8 @@ // network, in the search bar, and for the modal popup. -// Is the user on a touch device? -var isTouchDevice = 'ontouchstart' in document.documentElement; +// Have changes been made +var changesmade = false; //Functions that will be used as bindings function expandEvent (params) { // Expand a node (with event handler) diff --git a/js/help.js b/js/help.js index e35db68..fde6b6b 100644 --- a/js/help.js +++ b/js/help.js @@ -4,8 +4,129 @@ //Render `data` and load it into the modal function loadHTML(data) { var readmeHTML = marked(data); //Render README from markdown to HTML - var modalContent = document.getElementById("modal-content"); - modalContent.innerHTML = readmeHTML; + var target = document.getElementById("readme"); + target.innerHTML = readmeHTML; } -requestPage("README.md",loadHTML); //Read README.md +requestPage("README.md",loadHTML); //Read README.md and load it into the appropriate menu + +//Menu items +var menuMain = document.getElementById("menu-main"); +// The currently selected page +var selectedPage=menuMain; + + +//== EASY ANIMATION FUNCTIONS ==// +//Remove all animation classes from elem +function removeAnimClasses(elem) { + var cn = elem.className; + var ac = [" toLeft"," toRight"," fromLeft"," fromRight"]; //Animation classes + for (var i=0;i=0) { + cn = cn.replace(ac[i],""); + } + } + elem.className=cn; +} + +function animatePage(newPage) { //Move to `page` + selectedPage.className += " toLeft"; + newPage.className += " fromRight"; + newPage.style.display = "block"; + setTimeout(function() { + //Reset the scene + removeAnimClasses(selectedPage); + removeAnimClasses(newPage); + selectedPage.style.display = "none"; + newPage.style.display = "block"; //In case of rapid button-pressing + selectedPage = newPage; + },600); +} + +function animateReturn() { //Return to menu + selectedPage.className += " toRight"; + menuMain.className += " fromLeft"; + menuMain.style.display = "block"; + setTimeout(function() { + //Reset the scene + removeAnimClasses(selectedPage); + removeAnimClasses(menuMain); + selectedPage.style.display = "none"; + menuMain.style.display = "block"; //In case of rapid button-pressing + selectedPage = menuMain; + },600); +} + + +// Bind opening the help pages +document.getElementById("aboutActivator").onclick=function(){ //Open about page + animatePage(document.getElementById("menu-about")); +}; +document.getElementById("controlsActivator").onclick=function(){ // Open controls page + animatePage(document.getElementById("menu-controls")); +}; +document.getElementById("readmeActivator").onclick=function(){ //Open README page + animatePage(document.getElementById("menu-readme")); +}; +// Bind all the back buttons to return to main menu page +backButtons=document.getElementsByClassName("backbutton") +for (var i=0;i