Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
c73677c8
Commit
c73677c8
authored
Aug 26, 2020
by
Enrique Alcántara
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
GitLab UI tooltips from HAML
Create a service to allow instantiating GitLab UI tooltips from HAML
parent
a7a15788
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
289 additions
and
1 deletion
+289
-1
app/assets/javascripts/tooltips/components/tooltips.vue
app/assets/javascripts/tooltips/components/tooltips.vue
+70
-0
app/assets/javascripts/tooltips/index.js
app/assets/javascripts/tooltips/index.js
+58
-0
spec/frontend/__mocks__/@gitlab/ui.js
spec/frontend/__mocks__/@gitlab/ui.js
+9
-1
spec/frontend/tooltips/components/tooltips_spec.js
spec/frontend/tooltips/components/tooltips_spec.js
+94
-0
spec/frontend/tooltips/index_spec.js
spec/frontend/tooltips/index_spec.js
+58
-0
No files found.
app/assets/javascripts/tooltips/components/tooltips.vue
0 → 100644
View file @
c73677c8
<
script
>
import
{
GlTooltip
,
GlSafeHtmlDirective
as
SafeHtml
}
from
'
@gitlab/ui
'
;
import
{
uniqueId
}
from
'
lodash
'
;
const
getTooltipTitle
=
element
=>
{
return
element
.
getAttribute
(
'
title
'
)
||
element
.
dataset
.
title
;
};
const
newTooltip
=
(
element
,
config
=
{})
=>
{
const
{
placement
,
container
,
boundary
,
html
,
triggers
}
=
element
.
dataset
;
const
title
=
getTooltipTitle
(
element
);
return
{
id
:
uniqueId
(
'
gl-tooltip
'
),
target
:
element
,
title
,
html
,
placement
,
container
,
boundary
,
triggers
,
disabled
:
!
title
,
...
config
,
};
};
export
default
{
components
:
{
GlTooltip
,
},
directives
:
{
SafeHtml
,
},
data
()
{
return
{
tooltips
:
[],
};
},
methods
:
{
addTooltips
(
elements
,
config
)
{
const
newTooltips
=
elements
.
filter
(
element
=>
!
this
.
tooltipExists
(
element
))
.
map
(
element
=>
newTooltip
(
element
,
config
));
this
.
tooltips
.
push
(...
newTooltips
);
},
tooltipExists
(
element
)
{
return
this
.
tooltips
.
some
(
tooltip
=>
tooltip
.
target
===
element
);
},
},
};
</
script
>
<
template
>
<div>
<gl-tooltip
v-for=
"(tooltip, index) in tooltips"
:id=
"tooltip.id"
:key=
"index"
:target=
"tooltip.target"
:triggers=
"tooltip.triggers"
:placement=
"tooltip.placement"
:container=
"tooltip.container"
:boundary=
"tooltip.boundary"
:disabled=
"tooltip.disabled"
>
<span
v-if=
"tooltip.html"
v-safe-html=
"tooltip.title"
></span>
<span
v-else
>
{{
tooltip
.
title
}}
</span>
</gl-tooltip>
</div>
</
template
>
app/assets/javascripts/tooltips/index.js
0 → 100644
View file @
c73677c8
import
Vue
from
'
vue
'
;
import
Tooltips
from
'
./components/tooltips.vue
'
;
let
app
;
const
EVENTS_MAP
=
{
hover
:
'
mouseenter
'
,
click
:
'
click
'
,
focus
:
'
focus
'
,
};
const
DEFAULT_TRIGGER
=
'
hover focus
'
;
const
tooltipsApp
=
()
=>
{
if
(
!
app
)
{
app
=
new
Vue
({
render
(
h
)
{
return
h
(
Tooltips
,
{
props
:
{
elements
:
this
.
elements
,
},
ref
:
'
tooltips
'
,
});
},
}).
$mount
();
}
return
app
;
};
const
isTooltip
=
(
node
,
selector
)
=>
node
.
matches
&&
node
.
matches
(
selector
);
const
addTooltips
=
(
elements
,
config
)
=>
{
tooltipsApp
().
$refs
.
tooltips
.
addTooltips
(
Array
.
from
(
elements
),
config
);
};
const
handleTooltipEvent
=
(
rootTarget
,
e
,
selector
,
config
=
{})
=>
{
for
(
let
{
target
}
=
e
;
target
&&
target
!==
rootTarget
;
target
=
target
.
parentNode
)
{
if
(
isTooltip
(
target
,
selector
))
{
addTooltips
([
target
],
{
show
:
true
,
...
config
,
});
break
;
}
}
};
export
const
initTooltips
=
(
selector
,
config
=
{})
=>
{
const
triggers
=
config
?.
triggers
||
DEFAULT_TRIGGER
;
const
events
=
triggers
.
split
(
'
'
).
map
(
trigger
=>
EVENTS_MAP
[
trigger
]);
events
.
forEach
(
event
=>
{
document
.
addEventListener
(
event
,
e
=>
handleTooltipEvent
(
document
,
e
,
selector
,
config
),
true
);
});
return
tooltipsApp
();
};
spec/frontend/__mocks__/@gitlab/ui.js
View file @
c73677c8
...
...
@@ -18,8 +18,16 @@ jest.mock('@gitlab/ui/dist/directives/tooltip.js', () => ({
}));
jest
.
mock
(
'
@gitlab/ui/dist/components/base/tooltip/tooltip.js
'
,
()
=>
({
props
:
[
'
target
'
,
'
id
'
,
'
triggers
'
,
'
placement
'
,
'
container
'
,
'
boundary
'
,
'
disabled
'
],
render
(
h
)
{
return
h
(
'
div
'
,
this
.
$attrs
,
this
.
$slots
.
default
);
return
h
(
'
div
'
,
{
class
:
'
gl-tooltip
'
,
...
this
.
$attrs
,
},
this
.
$slots
.
default
,
);
},
}));
...
...
spec/frontend/tooltips/components/tooltips_spec.js
0 → 100644
View file @
c73677c8
import
{
shallowMount
}
from
'
@vue/test-utils
'
;
import
{
GlTooltip
}
from
'
@gitlab/ui
'
;
import
Tooltips
from
'
~/tooltips/components/tooltips.vue
'
;
describe
(
'
tooltips/components/tooltips.vue
'
,
()
=>
{
let
wrapper
;
const
buildWrapper
=
()
=>
{
wrapper
=
shallowMount
(
Tooltips
);
};
const
createTooltipTarget
=
(
attributes
=
{})
=>
{
const
target
=
document
.
createElement
(
'
button
'
);
const
defaults
=
{
title
:
'
default title
'
,
...
attributes
,
};
Object
.
keys
(
defaults
).
forEach
(
name
=>
{
target
.
setAttribute
(
name
,
defaults
[
name
]);
});
return
target
;
};
afterEach
(()
=>
{
wrapper
.
destroy
();
});
describe
(
'
addTooltips
'
,
()
=>
{
let
target
;
beforeEach
(()
=>
{
buildWrapper
();
target
=
createTooltipTarget
();
});
it
(
'
attaches tooltips to the targets specified
'
,
async
()
=>
{
wrapper
.
vm
.
addTooltips
([
target
]);
await
wrapper
.
vm
.
$nextTick
();
expect
(
wrapper
.
find
(
GlTooltip
).
props
(
'
target
'
)).
toBe
(
target
);
});
it
(
'
does not attach a tooltip twice to the same element
'
,
async
()
=>
{
wrapper
.
vm
.
addTooltips
([
target
]);
wrapper
.
vm
.
addTooltips
([
target
]);
await
wrapper
.
vm
.
$nextTick
();
expect
(
wrapper
.
findAll
(
GlTooltip
)).
toHaveLength
(
1
);
});
it
(
'
sets tooltip content from title attribute
'
,
async
()
=>
{
wrapper
.
vm
.
addTooltips
([
target
]);
await
wrapper
.
vm
.
$nextTick
();
expect
(
wrapper
.
find
(
GlTooltip
).
text
()).
toBe
(
target
.
getAttribute
(
'
title
'
));
});
it
(
'
supports HTML content
'
,
async
()
=>
{
target
=
createTooltipTarget
({
title
:
'
content with <b>HTML</b>
'
,
'
data-html
'
:
true
,
});
wrapper
.
vm
.
addTooltips
([
target
]);
await
wrapper
.
vm
.
$nextTick
();
expect
(
wrapper
.
find
(
GlTooltip
).
html
()).
toContain
(
target
.
getAttribute
(
'
title
'
));
});
it
.
each
`
attribute | value | prop
${
'
data-placement
'
}
|
${
'
bottom
'
}
|
${
'
placement
'
}
${
'
data-container
'
}
|
${
'
custom-container
'
}
|
${
'
container
'
}
${
'
data-boundary
'
}
|
${
'
viewport
'
}
|
${
'
boundary
'
}
${
'
data-triggers
'
}
|
${
'
manual
'
}
|
${
'
triggers
'
}
`
(
'
sets $prop to $value when $attribute is set in target
'
,
async
({
attribute
,
value
,
prop
})
=>
{
target
=
createTooltipTarget
({
[
attribute
]:
value
});
wrapper
.
vm
.
addTooltips
([
target
]);
await
wrapper
.
vm
.
$nextTick
();
expect
(
wrapper
.
find
(
GlTooltip
).
props
(
prop
)).
toBe
(
value
);
},
);
});
});
spec/frontend/tooltips/index_spec.js
0 → 100644
View file @
c73677c8
import
{
initTooltips
}
from
'
~/tooltips
'
;
describe
(
'
tooltips/index.js
'
,
()
=>
{
const
createTooltipTarget
=
()
=>
{
const
target
=
document
.
createElement
(
'
button
'
);
const
attributes
=
{
title
:
'
default title
'
,
};
Object
.
keys
(
attributes
).
forEach
(
name
=>
{
target
.
setAttribute
(
name
,
attributes
[
name
]);
});
target
.
classList
.
add
(
'
has-tooltip
'
);
return
target
;
};
const
triggerEvent
=
(
target
,
eventName
=
'
mouseenter
'
)
=>
{
const
event
=
new
Event
(
eventName
);
target
.
dispatchEvent
(
event
);
};
describe
(
'
initTooltip
'
,
()
=>
{
it
(
'
attaches a GlTooltip for the elements specified in the selector
'
,
async
()
=>
{
const
target
=
createTooltipTarget
();
const
tooltipsApp
=
initTooltips
(
'
.has-tooltip
'
);
document
.
body
.
appendChild
(
tooltipsApp
.
$el
);
document
.
body
.
appendChild
(
target
);
triggerEvent
(
target
);
await
tooltipsApp
.
$nextTick
();
expect
(
document
.
querySelector
(
'
.gl-tooltip
'
)).
not
.
toBe
(
null
);
expect
(
document
.
querySelector
(
'
.gl-tooltip
'
).
innerHTML
).
toContain
(
'
default title
'
);
});
it
(
'
supports triggering a tooltip in custom events
'
,
async
()
=>
{
const
target
=
createTooltipTarget
();
const
tooltipsApp
=
initTooltips
(
'
.has-tooltip
'
,
{
triggers
:
'
click
'
,
});
document
.
body
.
appendChild
(
tooltipsApp
.
$el
);
document
.
body
.
appendChild
(
target
);
triggerEvent
(
target
,
'
click
'
);
await
tooltipsApp
.
$nextTick
();
expect
(
document
.
querySelector
(
'
.gl-tooltip
'
)).
not
.
toBe
(
null
);
expect
(
document
.
querySelector
(
'
.gl-tooltip
'
).
innerHTML
).
toContain
(
'
default title
'
);
});
});
});
Write
Preview
Markdown
is supported
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