Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
open-source
MetaGer
Commits
2396367e
Commit
2396367e
authored
Jul 24, 2019
by
Aria Givi
Browse files
outsourced javascript, made result tabbing a bit more dynamic
parent
330ffb2c
Changes
8
Hide whitespace changes
Inline
Side-by-side
resources/js/keyboardNavigation.js
0 → 100644
View file @
2396367e
var
ctrlInfo
=
false
;
// Flag used for checking if the user was shown the keyboard control information
var
currentResultIndex
=
1
;
// stores result which was focused last
document
.
onkeydown
=
checkKey
;
function
checkKey
(
e
)
{
e
=
e
||
window
.
event
;
// Check for TAB keypress
if
(
e
.
keyCode
==
'
9
'
)
{
e
.
preventDefault
();
tabKeyPressed
(
$
(
document
.
activeElement
));
}
}
function
tabKeyPressed
()
{
if
(
!
ctrlInfo
)
{
ctrlInfo
=
true
;
showInfoBox
();
}
else
{
focusNextElement
(
$
(
"
:focus
"
));
}
}
function
showInfoBox
()
{
$
(
"
#keyboard-ctrl-info
"
).
show
();
$
(
"
#keyboard-ctrl-info
"
).
focus
();
}
function
focusNextElement
(
currentFocus
)
{
if
(
currentFocus
.
hasClass
(
"
result
"
))
{
focusNextResult
(
currentFocus
);
}
else
if
(
false
)
{
}
else
{
focusResult
();
}
}
function
focusResult
()
{
$
(
"
div[data-index='
"
+
currentResultIndex
+
"
'
"
).
focus
();
n
=
$
(
"
.result
"
).
length
;
currentResultIndex
=
1
+
currentResultIndex
%
n
;
console
.
log
(
currentResultIndex
+
"
-
"
+
n
);
}
function
focusNextResult
(
currentFocus
)
{
if
(
!
currentFocus
.
next
().
focus
())
{
alert
(
"
test
"
);
}
console
.
log
(
currentFocus
);
}
\ No newline at end of file
resources/js/utility.js
View file @
2396367e
$
(
document
).
ready
(
function
()
{
$
(
'
.js-only
'
).
removeClass
(
'
js-only
'
);
$
(
'
.no-js
'
).
addClass
(
'
hide
'
);
});
// Flag used for checking if the user was shown the keyboard control information
ctrlInfo
=
false
;
currentResultIndex
=
1
;
document
.
onkeydown
=
checkKey
;
function
checkKey
(
e
)
{
e
=
e
||
window
.
event
;
if
(
e
.
keyCode
==
'
9
'
)
{
e
.
preventDefault
();
guideThroughMenu
(
$
(
document
.
activeElement
));
}
}
function
guideThroughMenu
(
focused
)
{
if
(
!
ctrlInfo
)
{
ctrlInfo
=
true
;
showInfoBox
();
}
else
{
focusNextResult
();
}
}
function
showInfoBox
()
{
$
(
"
#keyboard-ctrl-info
"
).
show
();
$
(
"
#keyboard-ctrl-info
"
).
focus
();
}
function
focusNextResult
()
{
$
(
"
div[data-index='
"
+
currentResultIndex
+
"
'
"
).
focus
();
n
=
$
(
"
.result
"
).
length
;
currentResultIndex
=
1
+
currentResultIndex
%
n
;
console
.
log
(
currentResultIndex
+
"
-
"
+
n
);
}
\ No newline at end of file
});
\ No newline at end of file
resources/less/metager/pages/resultpage/keyboard-ctrl.less
View file @
2396367e
...
...
@@ -16,5 +16,12 @@
.keyboard-ctrl-info-header{
text-align: center;
h5 {
font-weight: bold;
}
}
ul {
text-align: left;
}
}
\ No newline at end of file
resources/views/layouts/ad.blade.php
View file @
2396367e
@
if
(
isset
(
$ad
)
&&
!
$apiAuthorized
)
<
div
class
=
"result ad"
>
<
div
class
=
"result ad"
tabindex
=
"0"
>
</
span
>
<
div
class
=
"result-header"
>
<
div
class
=
"result-headline"
>
...
...
resources/views/layouts/keyboardNavBox.blade.php
View file @
2396367e
<!-- Modal HTML
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to save changes to this document before closing?</p>
<p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<div
id=
"keyboard-ctrl-info"
tabindex=
"0"
>
<div
class=
"keyboard-ctrl-info-content"
>
<div
class=
"keyboard-ctrl-info-header"
>
<h5
class=
"keyboard-ctrl-info-title"
>
Tastatur-Navigationsanleitung
</h5>
<div
class=
"keyboard-ctrl-info-body"
>
<p>
Die Navigation durch die Ergebnisseite ist hierarchisch aufgebaut.
</p>
<ul>
<li>
TAB-Taste: Innerhalb der aktuellen Ebene zum nächsten Element springen.
</li>
<li>
Enter-Taste: Aktuelles Element auswählen und eine Stufe tiefer gehen.
</li>
<li>
Escape-Taste: Eine Ebene nach oben springen.
</li>
<ul>
</div>
</div>
</div>
-->
<div
id=
"keyboard-ctrl-info"
tabindex=
"0"
>
<div
class=
"keyboard-ctrl-info-content"
>
<div
class=
"keyboard-ctrl-info-header"
>
<h5
class=
"keyboard-ctrl-info-title"
>
Tastatur-Navigationsanleitung
</h5>
<div
class=
"keyboard-ctrl-info-body"
>
</div>
</div>
</div>
</div>
\ No newline at end of file
</div>
\ No newline at end of file
resources/views/layouts/result.blade.php
View file @
2396367e
<div
class=
"result"
data-count=
"{{ $result->hash }}"
>
<div
class=
"result"
data-count=
"{{ $result->hash }}"
data-index=
"{{$index}}"
tabindex=
"0"
>
<div
class=
"result-header"
>
<div
class=
"result-headline"
>
<h2
class=
"result-title"
title=
"{{ $result->titel }}"
>
...
...
resources/views/resultpages/results.blade.php
View file @
2396367e
...
...
@@ -18,7 +18,7 @@
@include('layouts.ad', ['ad' => $metager->popAd()])
@endif
@endif
@include('layouts.result', ['result' => $result])
@include('layouts.result', ['result' => $result
, 'index' => $index + 1
])
@endforeach
@include('parts.pager')
</div>
webpack.mix.js
View file @
2396367e
...
...
@@ -68,7 +68,7 @@ mix
.
babel
(
"
resources/js/bitpay.js
"
,
"
public/js/bitpay.js
"
)
// utility
.
babel
(
[
"
resources/js/utility.js
"
,
"
resources/js/translations.js
"
],
[
"
resources/js/utility.js
"
,
"
resources/js/keyboardNavigation.js
"
,
"
resources/js/translations.js
"
],
"
public/js/utility.js
"
)
.
babel
(
"
resources/js/widgets.js
"
,
"
public/js/widgets.js
"
)
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment