Updates.

rowanhogan · Sep 22, 2015 · 4556d1d · 4556d1d
1 parent fa9297c
commit 4556d1d
Show file tree

Hide file tree

Showing 9 changed files with 739 additions and 616 deletions.
diff --git a/app/index.html b/app/index.html
@@ -56,20 +56,22 @@ <h3>Options</h3>
 
   <div class="container push">
     <div id="content">
-      <img class="logo" src="./images/logo.svg" width="250">
+      <h1 class='logo'>Wik<em>i<span>P</span>adia</em></h1>
 
       <form class="search-form" type="POST">
         <input type='search' placeholder="Search to get started...">
         <button type="submit">Search</button>
       </form>
 
+      <a href="/?Main_Page" class="main-page-link">Main Page</a>
+
       <div class="blurb">
         <p><em>WikiPadia</em> is a beautiful, customisable Wikipedia reader. It was specifically built for leisurely reading on an iPad.</p>
       </div>
 
-      <p>The themes and options provide you with the ability to customize your reading experience, as well as the ability to add you own CSS which is saved locally on your device.</p>
-
-      <p>The inverted theme allows for better night/low-light reading by inverting and darkening images to better display when the <em>Invert Colors</em> setting is enabled — Found in <em>Settings &gt; General &gt; Accessibility &gt; Invert Colors</em> on iOS.</p>
+      <center>
+        <a href="https://github.com/rowanhogan/wikipadia#readme">Read more&hellip;</a>
+      </center>
 
     </div>
 
@@ -80,13 +82,15 @@ <h3>Options</h3>
       </form>
 
       <small class='attribution'><a href="https://github.com/rowanhogan/wikipadia">Made</a> by <a href="http://rowanhogan.com">Rowan Hogan</a>.</small>
+
       <br>
+
       <a class="home-link" href="/">Home</a>
 
     </footer>
   </div>
 
   <script type="text/javascript" src="./js/main.js"></script>
-  <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700' rel='stylesheet' type='text/css'>
+  <link href='https://fonts.googleapis.com/css?family=Cardo:400,400italic,700' rel='stylesheet' type='text/css'>
 </body>
 </html>
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -12,23 +12,25 @@ if (window.location.hostname.split('.').length > 2) {
 }
 
 $(function() {
+  var htmlEl = document.body.parentElement;
+
   if (window.location.search.length) {
-    $('html').removeClass('initial');
+    htmlEl.classList.remove('initial');
     var pageTitle = window.location.search.substring(1, window.location.search.length)
     handleNewPage(pageTitle, lang);
   } else {
-    $('html').removeClass('loading');
+    htmlEl.classList.remove('loading');
   }
 
   if (localStorage.getItem('theme')) {
-    $('#theme-changer').val(localStorage.getItem('theme'));
+    document.getElementById('theme-changer').value = localStorage.getItem('theme');
     handleTheme(localStorage.getItem('theme'));
   }
 
   if (localStorage.getItem('customStyles')) {
     var styles = localStorage.getItem('customStyles');
-    $('#custom-styles').html(styles);
-    $('#custom-styles-input').val(styles);
+    document.getElementById('custom-styles').innerHTML(styles);
+    document.getElementById('custom-styles-input').value = styles;
   }
 
   $('.menu-link').bigSlide({

diff --git a/app/scripts/components/handleData.js b/app/scripts/components/handleData.js
@@ -3,24 +3,31 @@ var $ = require('jquery');
 
 function handleData (data, lang) {
   var html = data.parse.text['*'];
-
+  var title = data.parse.title;
+  var contentEl = document.getElementById('content');
   var regex = new RegExp('href="/wiki/', 'g');
+
   html = html.replace(regex, 'href="?');
 
   // Fix for special links
 
-  $.each(['File', 'Help', 'Book'], function(i, typeString) {
+  ['File', 'Help', 'Book'].forEach(function(typeString, i) {
     html = html.split('?' + typeString).join(`https://${lang}.m.wikipedia.org/wiki/${typeString}`);
   });
 
-  $('#content').html(html);
+  contentEl.innerHTML = html;
 
-  $('#content').find('a[href*="wikipedia.org"]').each(function() {
-    $(this).attr('target', '_blank');
+  var remoteLinks = document.querySelectorAll('a[href*="wikipedia.org"]');
+  Array.prototype.forEach.call(remoteLinks, function(el, i){
+    el.target = '_blank';
   });
 
-  $('title').html(data.parse.title + " – WikiPadia");
-  $('#content').prepend("<h1>" + data.parse.title + "</h1>");
+  var titleEl = document.createElement('h1');
+  titleEl.innerHTML = title;
+
+  contentEl.parentElement.insertBefore(titleEl, contentEl.parentElement.firstChild);
+
+  document.title = title + " – WikiPadia";
   $(window).scrollTop(0);
 
   if ($('ul.redirectText').length) {

diff --git a/app/scripts/components/handleNewPage.js b/app/scripts/components/handleNewPage.js
@@ -3,7 +3,9 @@ var $ = require('jquery');
 var handleData = require('./handleData');
 
 function handleNewPage (pageTitle, lang) {
-  $('html').addClass('loading');
+  var htmlEl = document.body.parentElement;
+
+  htmlEl.classList.add('loading');
 
   var request = $.ajax({
       url: `https://${lang}.wikipedia.org/w/api.php?callback=?`,
@@ -21,9 +23,9 @@ function handleNewPage (pageTitle, lang) {
 
   request.then(function( data, textStatus, jqXHR ) {
     handleData(data, lang);
-    $('html').removeClass('loading');
+    htmlEl.classList.remove('loading');
   }, function( jqXHR, textStatus, errorThrown ) {
-    $('html').removeClass('loading');
+    htmlEl.classList.remove('loading');
     console.log(jqXHR, textStatus, errorThrown);
   });
 }

diff --git a/app/scripts/components/handleTheme.js b/app/scripts/components/handleTheme.js
@@ -1,10 +1,14 @@
 
-var $ = require('jquery');
-
 function handleTheme (theme) {
-  $('html').removeClass('dark');
-  $('html').removeClass('inverted');
-  $('html').addClass(theme);
+  var htmlEl = document.body.parentElement;
+
+  htmlEl.classList.remove('dark');
+  htmlEl.classList.remove('inverted');
+
+  if (theme.length) {
+    htmlEl.classList.add(theme);
+  }
+
   localStorage.setItem('theme', theme);
 }