mkrhere
/
pw
mirror of https://github.com/MKRhere/pw
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Fixed tooltip tap event on touchscreens

master
Muthu Kumar 7 years ago
parent
4de1ea7819
commit
c8c515d244
3 changed files with 45 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      docs/index.html
  2. 17
      docs/js/bundle.js
  3. 30
      js/modules/tooltip.js

13
docs/index.html
View File

@ -3,8 +3,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8; X-Content-Type-Options=nosniff">
<title>MKRhere - Portfolio / Anu Rahul Nandhan</title> <title>MKRhere - Portfolio / Anu Rahul Nandhan</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="mkr, muthu, kumar, personal website"> <meta name="keywords" content="mkr, muthu, kumar, personal website">
<meta name="description" content="Welcome to the web home of Muthu Kumar—Architect, web developer, designer, writer, filmmaker and poet. Polymath. Narcissist. And hopeless romantic."> <meta name="description" content="Welcome to the web home of Muthu Kumar—Architect, web developer, designer, writer, filmmaker and poet. Polymath. Narcissist. And hopeless romantic.">
<meta name="subject" content="Personal Website"> <meta name="subject" content="Personal Website">
@ -14,7 +15,9 @@
<meta name="revised" content="Sunday, December 12th, 2017"> <meta name="revised" content="Sunday, December 12th, 2017">
<meta name="author" content="Muthu Kumar, muthukumar(AT)thefeathers.in"> <meta name="author" content="Muthu Kumar, muthukumar(AT)thefeathers.in">
<meta name="url" content="https://mkr.pw"> <meta name="url" content="https://mkr.pw">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-dns-prefetch-control" content="on"> <meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8">
</head> </head>
@ -24,7 +27,7 @@
<h1 class="t-right">Hi, I'm Muthu Kumar</h1> <h1 class="t-right">Hi, I'm Muthu Kumar</h1>
<p class="t-right">a.k.a <p class="t-right">a.k.a
<span class="is-relative"> <span class="is-relative">
<span class="t-white" id="myname-click">Anu Rahul Nandhan S</span> <span class="t-white" id="myname-select">Anu Rahul Nandhan S</span>
<span class="tooltip" id="myname-tip">Anu Rahul Nandhan is indeed my legal name. I work under the pseudonym Muthu Kumar. <span class="tooltip" id="myname-tip">Anu Rahul Nandhan is indeed my legal name. I work under the pseudonym Muthu Kumar.
</span> </span>
</span> </span>
@ -32,9 +35,11 @@
</div> </div>
</div> </div>
<div id="about" class="row-full"> <div id="about" class="row-full">
<div class="col-full"> <div class="col-full t-center">
<h2>Content</h2> <h2>Content</h2>
<p>Is <span class="t-white">Coming</span></p> <p>Is
<span class="t-white">Coming</span>
</p>
</div> </div>
</div> </div>
<script src="js/bundle.js" type="text/javascript" charset="utf-8"></script> <script src="js/bundle.js" type="text/javascript" charset="utf-8"></script>

17
docs/js/bundle.js
View File

File diff suppressed because one or more lines are too long

30
js/modules/tooltip.js
View File

@ -11,6 +11,10 @@ function toggle(obj) {
? 'none' : 'inline-block' ? 'none' : 'inline-block'
} }
function toggleOn(obj) {
__(obj).style.display = 'inline-block'
}
function toggleOff(obj) { function toggleOff(obj) {
__(obj).style.display = 'none' __(obj).style.display = 'none'
} }
@ -19,19 +23,31 @@ const addListener = (element, events, handler) =>
(Array.isArray(events) (Array.isArray(events)
? events ? events
: [events]).forEach(event => : [events]).forEach(event =>
element.addEventListener(event, handler)) element.addEventListener(event, handler))
const addToolTip = selector => { const addToolTip = selector => {
let tipselector = '#' + selector + '-select'
let tipcontent = '#' + selector + '-tip'
addListener( addListener(
__('#' + selector + '-click'), __(tipselector),
['click', 'mouseover', 'mouseout'], ['mouseover', 'mouseout'],
() => toggle('#' + selector + '-tip')) () => toggle(tipcontent))
addListener(
__(tipselector),
'touchstart',
() => addListener(
__(tipselector),
'touchend',
toggle(tipcontent)))
addListener( addListener(
__('body'), __('body'),
'click', 'touchstart',
(e) => { if (e.target !== __('#' + selector + '-tip')) toggleOff('#' + selector + '-tip') } (e) => { if (e.target !== __(tipcontent)) toggleOff(tipcontent) }
)} )
}
//export default addToolTip //export default addToolTip
module.exports = addToolTip module.exports = addToolTip
Write Preview
Loading…
Cancel
Save