Good bye jQuery

Re-implement the same of jQuery's logic by ECMAScript and CSS

Author: aycabta

lib/rdoc/generator/template/darkfish/_head.rhtml

@@ -7,8 +7,11 @@
   var index_rel_prefix = "<%= rel_prefix %>/";
 </script>
 
-<script src="<%= asset_rel_prefix %>/js/jquery.js"></script>
-<script src="<%= asset_rel_prefix %>/js/darkfish.js"></script>
+<script src="<%= asset_rel_prefix %>/js/navigation.js" defer></script>
+<script src="<%= asset_rel_prefix %>/js/search.js" defer></script>
+<script src="<%= asset_rel_prefix %>/js/search_index.js" defer></script>
+<script src="<%= asset_rel_prefix %>/js/searcher.js" defer></script>
+<script src="<%= asset_rel_prefix %>/js/darkfish.js" defer></script>
 
 <link href="<%= asset_rel_prefix %>/css/fonts.css" rel="stylesheet">
 <link href="<%= asset_rel_prefix %>/css/rdoc.css" rel="stylesheet">

lib/rdoc/generator/template/darkfish/css/rdoc.css

@@ -9,6 +9,8 @@
 /* vim: ft=css et sw=2 ts=2 sts=2 */
 /* Base Green is: #6C8C22 */
 
+.hide { display: none !important; }
+
 * { padding: 0; margin: 0; }
 
 body {
@@ -48,6 +50,16 @@ h6:hover span {
   display: inline;
 }
 
+h1:target,
+h2:target,
+h3:target,
+h4:target,
+h5:target,
+h6:target {
+  margin-left: -10px;
+  border-left: 10px solid #f1edba;
+}
+
 :link,
 :visited {
   color: #6C8C22;
@@ -441,7 +453,16 @@ main header h3 {
 /* @group Method Details */
 
 main .method-source-code {
-  display: none;
+  max-height: 0;
+  overflow: hidden;
+  transition-duration: 200ms;
+  transition-delay: 0ms;
+  transition-property: all;
+  transition-timing-function: ease-in-out;
+}
+
+main .method-source-code.active-menu {
+  max-height: 100vh;
 }
 
 main .method-description .method-calls-super {

lib/rdoc/generator/template/darkfish/js/darkfish.js

@@ -8,6 +8,7 @@
  */
 
 /* Provide console simulation for firebug-less environments */
+/*
 if (!("console" in window) || !("firebug" in console)) {
   var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
     "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
@@ -16,41 +17,35 @@ if (!("console" in window) || !("firebug" in console)) {
   for (var i = 0; i < names.length; ++i)
     window.console[names[i]] = function() {};
 };
-
-
-/**
- * Unwrap the first element that matches the given @expr@ from the targets and return them.
- */
-$.fn.unwrap = function( expr ) {
-  return this.each( function() {
-    $(this).parents( expr ).eq( 0 ).after( this ).remove();
-  });
-};
+*/
 
 
 function showSource( e ) {
   var target = e.target;
-  var codeSections = $(target).
-    parents('.method-detail').
-    find('.method-source-code');
-
-  $(target).
-    parents('.method-detail').
-    find('.method-source-code').
-    slideToggle();
+  while (!target.classList.contains('method-detail')) {
+    target = target.parentNode;
+  }
+  if (typeof target !== "undefined" && target !== null) {
+    target = target.querySelector('.method-source-code');
+  }
+  if (typeof target !== "undefined" && target !== null) {
+    target.classList.toggle('active-menu')
+  }
 };
 
 function hookSourceViews() {
-  $('.method-heading').click( showSource );
+  document.querySelectorAll('.method-heading').forEach(function (codeObject) {
+    codeObject.addEventListener('click', showSource);
+  });
 };
 
 function hookSearch() {
-  var input  = $('#search-field').eq(0);
-  var result = $('#search-results').eq(0);
-  $(result).show();
+  var input  = document.querySelector('#search-field');
+  var result = document.querySelector('#search-results');
+  result.classList.remove("initially-hidden");
 
-  var search_section = $('#search-section').get(0);
-  $(search_section).show();
+  var search_section = document.querySelector('#search-section');
+  search_section.classList.remove("initially-hidden");
 
   var search = new Search(search_data, input, result);
 
@@ -77,85 +72,14 @@ function hookSearch() {
   }
 
   search.select = function(result) {
-    var result_element = result.get(0);
-    window.location.href = result_element.firstChild.firstChild.href;
+      console.log(result);
+    window.location.href = result.firstChild.firstChild.href;
   }
 
   search.scrollIntoView = search.scrollInWindow;
 };
 
-function highlightTarget( anchor ) {
-  console.debug( "Highlighting target '%s'.", anchor );
-
-  $("a[name]").each( function() {
-    if ( $(this).attr("name") == anchor ) {
-      if ( !$(this).parent().parent().hasClass('target-section') ) {
-        console.debug( "Wrapping the target-section" );
-        $('div.method-detail').unwrap( 'div.target-section' );
-        $(this).parent().wrap( '<div class="target-section"></div>' );
-      } else {
-        console.debug( "Already wrapped." );
-      }
-    }
-  });
-};
-
-function highlightLocationTarget() {
-  console.debug( "Location hash: %s", window.location.hash );
-  if ( ! window.location.hash || window.location.hash.length == 0 ) return;
-
-  var anchor = window.location.hash.substring(1);
-  console.debug( "Found anchor: %s; matching %s", anchor, "a[name=" + anchor + "]" );
-
-  highlightTarget( anchor );
-};
-
-function highlightClickTarget( event ) {
-  console.debug( "Highlighting click target for event %o", event.target );
-  try {
-    var anchor = $(event.target).attr( 'href' ).substring(1);
-    console.debug( "Found target anchor: %s", anchor );
-    highlightTarget( anchor );
-  } catch ( err ) {
-    console.error( "Exception while highlighting: %o", err );
-  };
-};
-
-function loadAsync(path, success, prefix) {
-  $.ajax({
-    url: prefix + path,
-    dataType: 'script',
-    success: success,
-    cache: true
-  });
-};
-
-$(document).ready( function() {
+document.addEventListener('DOMContentLoaded', function() {
   hookSourceViews();
-  highlightLocationTarget();
-  $('ul.link-list a').bind( "click", highlightClickTarget );
-
-  var search_scripts_loaded = {
-    navigation_loaded:   false,
-    search_loaded:       false,
-    search_index_loaded: false,
-    searcher_loaded:     false,
-  }
-
-  var search_success_function = function(variable) {
-    return (function (data, status, xhr) {
-      search_scripts_loaded[variable] = true;
-
-      if (search_scripts_loaded['navigation_loaded']   == true &&
-          search_scripts_loaded['search_loaded']       == true &&
-          search_scripts_loaded['search_index_loaded'] == true &&
-          search_scripts_loaded['searcher_loaded']     == true)
-        hookSearch();
-    });
-  }
-
-  loadAsync('js/navigation.js',   search_success_function('navigation_loaded'), rdoc_rel_prefix);
-  loadAsync('js/search.js',       search_success_function('search_loaded'), rdoc_rel_prefix);
-  loadAsync('js/search_index.js', search_success_function('search_index_loaded'), index_rel_prefix);
-  loadAsync('js/searcher.js',     search_success_function('searcher_loaded'), rdoc_rel_prefix);
+  hookSearch();
 });

lib/rdoc/generator/template/darkfish/js/jquery.js

@@ -1,29 +1,29 @@
 Search = function(data, input, result) {
   this.data = data;
-  this.$input = $(input);
-  this.$result = $(result);
+  this.input = input;
+  this.result = result;
 
-  this.$current = null;
-  this.$view = this.$result.parent();
+  this.current = null;
+  this.view = this.result.parentNode;
   this.searcher = new Searcher(data.index);
   this.init();
 }
 
-Search.prototype = $.extend({}, Navigation, new function() {
+Search.prototype = Object.assign({}, Navigation, new function() {
   var suid = 1;
 
   this.init = function() {
     var _this = this;
     var observer = function(e) {
-      switch(e.originalEvent.keyCode) {
+      switch(e.keyCode) {
         case 38: // Event.KEY_UP
         case 40: // Event.KEY_DOWN
           return;
       }
-      _this.search(_this.$input[0].value);
+      _this.search(_this.input.value);
     };
-    this.$input.keyup(observer);
-    this.$input.click(observer); // mac's clear field
+    this.input.addEventListener('keyup', observer);
+    this.input.addEventListener('click', observer); // mac's clear field
 
     this.searcher.ready(function(results, isLast) {
       _this.addResults(results, isLast);
@@ -34,7 +34,7 @@ Search.prototype = $.extend({}, Navigation, new function() {
   }
 
   this.search = function(value, selectFirstMatch) {
-    value = jQuery.trim(value).toLowerCase();
+    value = value.trim().toLowerCase();
     if (value) {
       this.setNavigationActive(true);
     } else {
@@ -43,23 +43,23 @@ Search.prototype = $.extend({}, Navigation, new function() {
 
     if (value == '') {
       this.lastQuery = value;
-      this.$result.empty();
-      this.$result.attr('aria-expanded', 'false');
+      this.result.innerHTML = '';
+      this.result.setAttribute('aria-expanded', 'false');
       this.setNavigationActive(false);
     } else if (value != this.lastQuery) {
       this.lastQuery = value;
-      this.$result.attr('aria-busy',     'true');
-      this.$result.attr('aria-expanded', 'true');
+      this.result.setAttribute('aria-busy',     'true');
+      this.result.setAttribute('aria-expanded', 'true');
       this.firstRun = true;
       this.searcher.find(value);
     }
   }
 
   this.addResults = function(results, isLast) {
-    var target = this.$result.get(0);
+    var target = this.result;
     if (this.firstRun && (results.length > 0 || isLast)) {
-      this.$current = null;
-      this.$result.empty();
+      this.current = null;
+      this.result.innerHTML = '';
     }
 
     for (var i=0, l = results.length; i < l; i++) {
@@ -70,25 +70,26 @@ Search.prototype = $.extend({}, Navigation, new function() {
 
     if (this.firstRun && results.length > 0) {
       this.firstRun = false;
-      this.$current = $(target.firstChild);
-      this.$current.addClass('search-selected');
+      this.current = target.firstChild;
+      this.current.classList.add('search-selected');
     }
-    if (jQuery.browser.msie) this.$element[0].className += '';
+    //TODO: ECMAScript
+    //if (jQuery.browser.msie) this.$element[0].className += '';
 
-    if (isLast) this.$result.attr('aria-busy', 'false');
+    if (isLast) this.result.setAttribute('aria-busy', 'false');
   }
 
   this.move = function(isDown) {
-    if (!this.$current) return;
-    var $next = this.$current[isDown ? 'next' : 'prev']();
-    if ($next.length) {
-      this.$current.removeClass('search-selected');
-      $next.addClass('search-selected');
-      this.$input.attr('aria-activedescendant', $next.attr('id'));
-      this.scrollIntoView($next[0], this.$view[0]);
-      this.$current = $next;
-      this.$input.val($next[0].firstChild.firstChild.text);
-      this.$input.select();
+    if (!this.current) return;
+    var next = isDown ? this.current.nextElementSibling : this.current.previousElementSibling;
+    if (next) {
+      this.current.classList.remove('search-selected');
+      next.classList.add('search-selected');
+      this.input.setAttribute('aria-activedescendant', next.getAttribute('id'));
+      this.scrollIntoView(next, this.view);
+      this.current = next;
+      this.input.value = next.firstChild.firstChild.text;
+      this.input.select();
     }
     return true;
   }