Skip to content

Commit

Permalink
Good bye jQuery
Browse files Browse the repository at this point in the history 
Re-implement the same of jQuery's logic by ECMAScript and CSS
  • Loading branch information
@aycabta
aycabta committed Aug 28, 2019
1 parent 55c0627 commit 7d4326e
Show file tree
Hide file tree
Showing 8 changed files with 93 additions and 184 deletions.
7 changes: 5 additions & 2 deletions lib/rdoc/generator/template/darkfish/_head.rhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
23 changes: 22 additions & 1 deletion lib/rdoc/generator/template/darkfish/css/rdoc.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
122 changes: 23 additions & 99 deletions lib/rdoc/generator/template/darkfish/js/darkfish.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"];
Expand All @@ -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);

Expand All @@ -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();
});
4 changes: 0 additions & 4 deletions lib/rdoc/generator/template/darkfish/js/jquery.js
View file

This file was deleted.

63 changes: 32 additions & 31 deletions lib/rdoc/generator/template/darkfish/js/search.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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 {
Expand All @@ -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++) {
Expand All @@ -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;
}
Expand Down
Loading

0 comments on commit 7d4326e

Please sign in to comment.