added menu buttons and about modal

kexin-zhang · Jul 17, 2016 · 1840e5b · 1840e5b
1 parent 8cc17f4
commit 1840e5b
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 9 deletions.
diff --git a/static/styles.css b/static/styles.css
@@ -92,7 +92,7 @@ body {
 
 #menu-title {
   font-size: 1.5rem;
-  letter-spacing: 2px;
+  letter-spacing: 3px;
 }
 
 #menu-title a{
@@ -147,3 +147,26 @@ body {
   margin: auto;
   padding-top: 15rem;
 }
+
+#loading-msg {
+  text-align: center;
+  width: 50%;
+  padding-top: 15rem
+  display: none;
+}
+
+.menu-links {
+  float: right;
+  font-size: 1.3em;
+  padding-top: 7px;
+  padding-left: 20px;
+}
+
+.menu-links a{
+  color: #F0F0F0;
+  letter-spacing: 2px;
+}
+
+.menu-links a:hover {
+  color: #3399ff;
+}
diff --git a/templates/base.html b/templates/base.html
@@ -11,13 +11,24 @@
   </head>
   <body>
     <div class="row" id="nav-bar" style="max-width: 100%;">
-      <div class="large-10 columns">
+      <div class="large-12 columns">
           <form action="/search" method="POST">
               <span id="menu-title" class="right inline"><a href="{{ url_for('.main') }}">WIKIMAPS</a></span>
               <input type="text" name="query" id="menu-input" placeholder="Search for a topic">
+              <span class="menu-links"><a>SOURCE CODE</a></span>
+              <span class="menu-links"><a data-open="about-modal">ABOUT</a></span>
           </form>
       </div>
     </div>
+
+    <div class="reveal" id="about-modal" data-reveal>
+      <h2 style="text-align: center;">How It Works</h2>
+      <p>On a topic's result page, five random outbound Wikipedia links are displayed as related topics. Clicking these will show that topic's five random related links and add on to the visualization.</p>
+      <button class="close-button" data-close aria-label="Close modal" type="button">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+
     <div class="row" style="max-width: 95rem; color:#454545;">
         <div class="row" style="text-align: center;">
           <a href="{{data.url}}" target="_blank" id="title">{{ data.name }}</a>
@@ -44,8 +55,10 @@
         </div>
     </div>
   </body>
+  <script src="{{ url_for('static', filename='foundation-6.2.3-complete/js/vendor/foundation.min.js') }}"></script>
   <script>
   $(document).ready(function(){
+    $(document).foundation()
     var topiclist = ["{{data.name}}"];
     {% for element in data.children %}
       topiclist.push(decodeURI("{{element.name}}"));
@@ -82,7 +95,7 @@
           }
           console.log(topiclist);
 
-          var index = topiclist.lastIndexOf(decodeURI(topic)) + 1;
+          var index = topiclist.indexOf(decodeURI(topic)) + 1;
           var nodelist = turnIntoNodes(newtopics, len);
           var edgelist = turnIntoEdges(index, len, len + data.children.length -1);
           console.log(edgelist);
@@ -108,17 +121,21 @@
           for (i=0; i<newtopics.length; i++){
             $(newcontainer).find('#topics-list').append('<li class="topics isVisible" id="' + newId + '">' + decodeURI(newtopics[i]) + '</li>');
           }
+        }).fail(function(){
+          $('#loading').hide();
+          alert('Sorry, there was an error in adding the topic. Please try a different one.');
+
         });
 
       }
     });
 
     $("body").on("click", ".go-back", function() {
       var currId = $('.topic-container.isVisible').attr('id');
-      var oldId = clickedOrder.lastIndexOf(Number(currId)) - 1;
+      var oldId = clickedOrder.indexOf(Number(currId)) - 1;
 
       oldId = clickedOrder[oldId];
-      // clickedOrder.push(oldId);
+      clickedOrder.push(oldId);
 
       $('.topic-container.isVisible').hide().removeClass('isVisible');
       $('.topic-container#' + oldId).addClass('isVisible').show();

diff --git a/wikiscrape.py b/wikiscrape.py
@@ -19,7 +19,7 @@ def topic_search(topic):
     i = title.find(' - Wikipedia')
     title = title[:i]
 
-    topics = links(text)
+    topics = links(text, topic)
     children = []
     for topic in topics:
         children.append({"name": topic})
@@ -28,12 +28,12 @@ def topic_search(topic):
 #        json.dump({"name": title, "children": topics}, outfile)
     return {"name": title, "children": children, 'url': url}
 
-def links(text):
+def links(text, root):
     pat = 'href="/wiki/([^"]+)"'
     links = re.findall(pat, text)
 
     results = []
-    for x in random.sample(range(0, len(links)), 10):
+    for x in random.sample(range(0, len(links)), 12):
         topic = links[x]
         topic = topic.replace('_', ' ')
         if '#' in topic:
@@ -42,7 +42,7 @@ def links(text):
         if 'Category:' in topic:
             i = topic.find(':')
             topic = topic[i+1:]
-        if ':' not in topic and topic not in ['Digital object identifier', 'Main Page', 'International Standard Book Number', 'International Standard Serial Number'] and 'ISO' not in topic and 'PubMed' not in topic and 'All articles' not in topic and 'Articles containing' not in topic and 'Articles lacking sources' not in topic and 'Articles needing additional references' not in topic and "Wikipedia articles" not in topic and "Articles with unsourced statements" not in topic:
+        if ':' not in topic and 'Commons category' not in topic and topic not in ['All stub articles', 'Digital object identifier', 'Main Page', 'International Standard Book Number', 'International Standard Serial Number', root] and 'ISO' not in topic and 'PubMed' not in topic and 'All articles' not in topic and 'Articles containing' not in topic and 'Articles lacking sources' not in topic and 'Articles needing additional references' not in topic and "Wikipedia articles" not in topic and "Articles with unsourced statements" not in topic:
             results.append(topic)
 
     return results[0:5]