refactor(you don't need jquery): removes jquery

having jquery in there for some minor element seelction and class toggle is an overhead

BREAKING CHANGE: Removes jQuery

fix #79

Author: fabianmoronzirfas

_includes/aside-left.html

@@ -11,16 +11,16 @@
         -->
       {% assign pages = site.pages | sort: 'order'  %}
       {% for item in pages %}{% if item.layout != 'entry' %}{%if item.layout == 'default' or item.layout == 'reference' %}{% if item.url != '/' %}
-        <li class="menu-item {% if item.title == page.title %}active{% endif %}"><a href="{{item.url}}" class="textgrow">{{item.title}}</a></li>
+        <li class="menu-item {% if item.title == page.title %}active{% endif %}"><a href="{{item.url}}" class="textgrow menu-link">{{item.title}}</a></li>
             {% endif %}{% endif %}{% endif %}{% endfor %}
 
       </ul>
+      <div class="tweet">
+        <div class="message"></div>
+        <div class="tweettime"></div>
+        <div class="twitter-link"><a href="https://twitter.com/basil_js" class="textgrow menu-link">@basil_js</a></div>
+      </div>
     </nav>
-        <div class="tweet">
-          <div class="message"></div>
-          <div class="tweettime"></div>
-          <div class="twitter-link"><a href="https://twitter.com/basil_js" class="textgrow">@basil_js</a></div>
-        </div>
         <div class="fhnw-logo">
           <a href="http://www.fhnw.ch/hgk/ivk"><img src="/assets/images/fhnwlogo.png" alt="FHNW logo and link"></a>
         </div>

_layouts/default.html

@@ -35,20 +35,18 @@
         <div class="guidelines"></div>
         {% include footer.html %}
     </div>
-    <script src="/assets/js/jquery.min.js" type="text/javascript"></script>
-    <script src="/assets/js/basiljs.js" type="text/javascript"></script>
-    <script src="/assets/js/tweets.js" type="text/javascript" async></script>
-    <script src="/assets/js/p5.min.js" type="text/javascript" defer></script>
-    <script src="/assets/js/sketch.js" type="text/javascript" defer></script>
-    <script src="/assets/js/main.bundle.js" type="text/javascript" defer></script>
-    <script type="text/javascript">
+    {% if jekyll.environment == "production" %}
+    <script src="assets/js/vendors~main.bundle.js" type="text/javascript" defer></script>
+    {% endif %}
+    <script src="/assets/js/main.bundle.js" type="text/javascript"></script>
+    <!-- <script type="text/javascript">
         window.onblur = function() {
             noLoop();
         }
         window.onfocus = function() {
             loop();
         }
-    </script>
+    </script> -->
     {% if page.layout == 'reference' %}
     <script src="/assets/js/reference.bundle.js" type="text/javascript"></script>
     {% endif %}

assets/js/main.bundle.js

@@ -0,0 +1,46 @@
+/* global $*/
+export function specialChars() {
+  let elements = document.querySelectorAll('a.textgrow');
+  [...elements].forEach( element => {
+    const chars = element.innerText.split('');
+    element.innerHTML = null;
+    chars.forEach((char, i) => {
+      const fontSize = 30 - (2 * i);
+      const style = `border-bottom-width: ${ (i+1) }px; font-size: ${fontSize }px; top: -${(i+(2*i))}px;`;
+      const node = document.createElement('span');
+      node.style.cssText = style;
+      const content = document.createTextNode(char);
+      node.appendChild(content);
+      element.appendChild(node);
+    });
+  });
+}
+
+export function createGuideLines() {
+  const element = document.querySelector('.guidelines');
+  const bottomlines = document.createElement('div');
+  const rightlines = document.createElement('div');
+  const pagelines = document.createElement('div');
+  bottomlines.className = 'bottom_lines';
+  rightlines.className = 'right_lines';
+  pagelines.className = 'page_lines';
+
+  for (let i = 0; i < 5; i++) {
+    const line = document.createElement('div');
+    line.classList.add('bottomLine', `line_${i+1}`);
+    bottomlines.appendChild(line);
+  }
+  for (let i = 0; i < 3; i++) {
+    const line = document.createElement('div');
+    line.classList.add('right_line', `line_${i+1}`);
+    rightlines.appendChild(line);
+  }
+  for (let i = 0; i < 4; i++) {
+    const line = document.createElement('div');
+    line.classList.add('line', `line_${i+1}`);
+    pagelines.appendChild(line);
+  }
+  element.appendChild(bottomlines);
+  element.appendChild(rightlines);
+  element.appendChild(pagelines);
+}

assets/js/main.bundle.js.map

@@ -0,0 +1,28 @@
+/* global $*/
+export function specialChars() {
+  $('a.textgrow').each(function() {
+    const chars = $(this).text().split('');
+    const that = $(this);
+    that.empty();
+    $.each(chars, function(i, char) {
+      const fontSize = 30 - (2 * i);
+      const style = `border-bottom-width: ${ (i+1) }px; font-size: ${fontSize }px; top: -${(i+(2*i))}px;`;
+      that.append('<span style="' + style + '">' + char + '</span>');
+    });
+  });
+}
+
+export function createGuideLines() {
+  $('.guidelines').append('<div class="bottom_lines">');
+  for (var b = 0; b < 5; b++) {
+    $('.bottom_lines').append('<div class="bottomLine line_' + (b + 1) + '">');
+  }
+  $('.guidelines').append('<div class="right_lines">');
+  for (var r = 0; r < 3; r++) {
+    $('.right_lines').append('<div class="right_line line_' + (r + 1) + '">');
+  }
+  $('.guidelines').append('<div class="page_lines">');
+  for (var i = 0; i < 4; i++) {
+    $('.page_lines').append('<div class="line line_' + (i + 1) + '">');
+  }
+}

assets/js/reference.bundle.js

@@ -1,4 +1,23 @@
-/* global $ */
-$(document).ready(()=>{
-  console.log('JQ: doc ready...');
+// import $ from 'jquery';
+import p5 from 'p5/lib/p5.min';
+import sketch from './p5sketch.js';
+import mobileNav from './mobile-nav-nojq.js';
+import tweets from './tweets.js';
+// import { createGuideLines} from './decoration.js';
+import {specialChars, createGuideLines} from './decoration-nojq.js';
+let p5sketch;
+document.addEventListener('DOMContentLoaded',() =>{
+  specialChars();
+  createGuideLines();
+  mobileNav();
+  tweets();
+  p5sketch = new p5(sketch);
 });
+
+
+window.onblur = function() {
+  p5sketch.noLoop();
+};
+window.onfocus = function() {
+  p5sketch.loop();
+};