wip????
This commit is contained in:
Gerard Burns
parent
b9d36f9802
commit
793e5cb4cb
|
|
@ -11,7 +11,6 @@
|
|||
|
||||
let hovering = false
|
||||
let wrapper
|
||||
let resetWrapper
|
||||
let currentTooltip
|
||||
let previousTooltip
|
||||
|
||||
|
|
@ -30,13 +29,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper, resetWrapper) => {
|
||||
const updatePosition = (anchor, currentTooltip, previousTooltip, wrapper) => {
|
||||
requestAnimationFrame(() => {
|
||||
if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null || resetWrapper == null) {
|
||||
if (anchor == null || currentTooltip == null || previousTooltip == null || wrapper == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = anchor.getBoundingClientRect();
|
||||
const previousStyles = window.getComputedStyle(previousTooltip?.firstChild)
|
||||
const currentStyles = window.getComputedStyle(currentTooltip?.firstChild)
|
||||
|
||||
console.log(previousStyles.backgroundColor);
|
||||
console.log(currentStyles.backgroundColor);
|
||||
console.log("")
|
||||
|
||||
currentTooltipWidth = currentTooltip.clientWidth
|
||||
currentTooltipHeight = currentTooltip.clientHeight
|
||||
|
|
@ -49,23 +54,32 @@
|
|||
currentY = rect.y
|
||||
const fadeIn = [{ opacity: "0" }, { opacity: "1" }];
|
||||
const fadeOut = [{ opacity: "1" }, { opacity: "0" }];
|
||||
const color = [{ offset: 0, backgroundColor: previousStyles.backgroundColor }, { offset: 0.85, backgroundColor: currentStyles.backgroundColor }, { offset: 1, backgroundColor: "black" }];
|
||||
|
||||
const fadeInTiming = {
|
||||
duration: 150,
|
||||
delay: 150,
|
||||
duration: 100,
|
||||
delay: 100,
|
||||
iterations: 1,
|
||||
easing: "ease-in",
|
||||
fill: "both"
|
||||
};
|
||||
const fadeOutTiming = {
|
||||
duration: 150,
|
||||
duration: 100,
|
||||
iterations: 1,
|
||||
easing: "ease-in",
|
||||
fill: "forwards"
|
||||
};
|
||||
|
||||
const colorTiming = {
|
||||
duration: 300,
|
||||
iterations: 1,
|
||||
easing: "ease-in",
|
||||
fill: "both"
|
||||
};
|
||||
|
||||
currentTooltip.animate(fadeIn, fadeInTiming);
|
||||
previousTooltip.animate(fadeOut, fadeOutTiming);
|
||||
wrapper.animate(color, colorTiming);
|
||||
|
||||
// Bypass animations if the tooltip has only just been opened
|
||||
if (initialShow) {
|
||||
|
|
@ -74,18 +88,14 @@
|
|||
previousTooltip.style.visibility = "hidden"
|
||||
|
||||
wrapper.style.transition = "none";
|
||||
wrapper.style.width = `${currentTooltipWidth}px`
|
||||
wrapper.style.height = `${currentTooltipHeight}px`
|
||||
//wrapper.style.width = `${currentTooltipWidth}px`
|
||||
//wrapper.style.height = `${currentTooltipHeight}px`
|
||||
wrapper.style.top = `${currentY}px`
|
||||
wrapper.style.left = `${currentX}px`
|
||||
|
||||
resetWrapper.style.transition = "none";
|
||||
resetWrapper.style.top = `${-currentY}px`
|
||||
resetWrapper.style.left = `${-currentX}px`
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
wrapper.style.removeProperty("transition");
|
||||
resetWrapper.style.removeProperty("transition");
|
||||
})
|
||||
} else {
|
||||
previousTooltip.style.removeProperty("visibility");
|
||||
|
|
@ -93,7 +103,7 @@
|
|||
})
|
||||
}
|
||||
|
||||
$: updatePosition(anchor, currentTooltip, previousTooltip, wrapper, resetWrapper)
|
||||
$: updatePosition(anchor, currentTooltip, previousTooltip, wrapper)
|
||||
$: handleVisibilityChange(visible, hovering)
|
||||
|
||||
const handleMouseenter = (e) => {
|
||||
|
|
@ -110,26 +120,25 @@
|
|||
bind:this={wrapper}
|
||||
on:mouseenter={handleMouseenter}
|
||||
on:mouseleave={handleMouseleave}
|
||||
style:width={`${currentTooltipWidth}px`}
|
||||
style:height={`${currentTooltipHeight}px`}
|
||||
style:left={`${currentX}px`}
|
||||
style:top={`${currentY}px`}
|
||||
style:width={`${currentTooltipWidth}px`}
|
||||
style:height={`${currentTooltipHeight}px`}
|
||||
class="tooltip"
|
||||
class:visible={visible || hovering}
|
||||
>
|
||||
<!-- absolutely position element with the opposite positioning, so that the tooltip elements can be positioned
|
||||
using the same values as the root wrapper, while still being occluded by it.
|
||||
-->
|
||||
<div class="screenSizeAbsoluteWrapper"
|
||||
bind:this={resetWrapper}
|
||||
style:left={`${-currentX}px`}
|
||||
style:top={`${-currentY}px`}
|
||||
>
|
||||
<div class="screenSizeAbsoluteWrapper"
|
||||
style:left={`${-currentX}px`}
|
||||
style:top={`${-currentY}px`}
|
||||
>
|
||||
<div
|
||||
style:left={`${currentX}px`}
|
||||
style:top={`${currentY}px`}
|
||||
bind:this={currentTooltip}
|
||||
class="currentContent"
|
||||
style:left={`${currentX}px`}
|
||||
style:top={`${currentY}px`}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
|
|
@ -153,16 +162,16 @@
|
|||
background-color: var(--spectrum-global-color-gray-200);
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
|
||||
transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
|
||||
}
|
||||
|
||||
.screenSizeAbsoluteWrapper {
|
||||
width: 200vw;
|
||||
height: 200vh;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
transition: top 300ms ease-in, left 300ms ease-in;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,9 +12,12 @@
|
|||
|
||||
let contextTooltipId = 0;
|
||||
let contextTooltipAnchor = null
|
||||
let contextTooltipOption = null
|
||||
let previousContextTooltipOption = null
|
||||
let currentOption = null
|
||||
let previousOption = null
|
||||
let contextTooltipVisible = false
|
||||
let currentOptionSupport = {}
|
||||
let previousOptionSupport = {}
|
||||
|
||||
|
||||
const TypeIconMap = {
|
||||
text: "Text",
|
||||
|
|
@ -78,6 +81,8 @@
|
|||
|
||||
const getOptionIcon = optionKey => {
|
||||
const option = schema[optionKey]
|
||||
if (!option) return ""
|
||||
|
||||
if (option.autocolumn) {
|
||||
return "MagicWand"
|
||||
}
|
||||
|
|
@ -94,14 +99,7 @@
|
|||
const getOptionIconTooltip = optionKey => {
|
||||
const option = schema[optionKey]
|
||||
|
||||
return option.type;
|
||||
}
|
||||
|
||||
const getOptionTooltip = optionKey => {
|
||||
const support = fieldSupport[optionKey]?.support;
|
||||
const message = fieldSupport[optionKey]?.message;
|
||||
|
||||
return message
|
||||
return option?.type;
|
||||
}
|
||||
|
||||
const isOptionEnabled = optionKey => {
|
||||
|
|
@ -116,23 +114,67 @@
|
|||
return true
|
||||
}
|
||||
|
||||
const getSupportLevel = (optionKey) => {
|
||||
const level = fieldSupport[optionKey]?.level;
|
||||
|
||||
if (level === validatorConstants.unsupported) {
|
||||
return {
|
||||
class: "supportLevelUnsupported",
|
||||
icon: "Alert",
|
||||
iconTooltip: fieldSupport[optionKey]?.message,
|
||||
text: "Unsupported"
|
||||
}
|
||||
}
|
||||
|
||||
if (level === validatorConstants.partialSupport) {
|
||||
return {
|
||||
class: "supportLevelPartialSupport",
|
||||
icon: "AlertCheck",
|
||||
iconTooltip: fieldSupport[optionKey]?.message,
|
||||
text: "Partial Support"
|
||||
}
|
||||
}
|
||||
|
||||
if (level === validatorConstants.supported) {
|
||||
return {
|
||||
class: "supportLevelSupported",
|
||||
icon: "CheckmarkCircle",
|
||||
iconTooltip: fieldSupport[optionKey]?.message,
|
||||
text: "Supported"
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
class: "supportLevelUnsupported",
|
||||
icon: "Alert",
|
||||
iconTooltip: "",
|
||||
text: "Unsupported"
|
||||
}
|
||||
}
|
||||
|
||||
$: currentOptionSupport = getSupportLevel(currentOption)
|
||||
$: previousOptionSupport = getSupportLevel(previousOption)
|
||||
|
||||
const onOptionMouseenter = (e, option, idx) => {
|
||||
console.log(option)
|
||||
contextTooltipId += 1;
|
||||
const invokedContextTooltipId = contextTooltipId
|
||||
|
||||
setTimeout(() => {
|
||||
if (contextTooltipId === invokedContextTooltipId) {
|
||||
contextTooltipAnchor = e.target;
|
||||
previousContextTooltipOption = contextTooltipOption;
|
||||
contextTooltipOption = option;
|
||||
previousOption = currentOption;
|
||||
currentOption = option;
|
||||
contextTooltipVisible = true;
|
||||
currentOptionSupport = getSupportLevel(currentOption)
|
||||
previousOptionSupport = getSupportLevel(previousOption)
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
|
||||
const onOptionMouseleave = (e, option) => {
|
||||
setTimeout(() => {
|
||||
if (option === contextTooltipOption) {
|
||||
if (option === currentOption) {
|
||||
contextTooltipVisible = false;
|
||||
}
|
||||
}, 600)
|
||||
|
|
@ -156,39 +198,80 @@
|
|||
offset={20}
|
||||
>
|
||||
<div
|
||||
class="tooltipContents"
|
||||
class={`tooltipContents ${currentOptionSupport.class}`}
|
||||
>
|
||||
{#if contextTooltipOption}
|
||||
<div class={`supportLevel ${currentOptionSupport.class}`}>
|
||||
<Icon tooltip={currentOptionSupport.iconTooltip} name={currentOptionSupport.icon} />
|
||||
<p>{currentOptionSupport.text}</p>
|
||||
</div>
|
||||
<div class="contextTooltipContent">
|
||||
<div class="contextTooltipHeader">
|
||||
<Icon name={getOptionIcon(contextTooltipOption)} />
|
||||
<span>{contextTooltipOption}</span>
|
||||
<Icon name={getOptionIcon(currentOption)} />
|
||||
<span>{currentOption}</span>
|
||||
</div>
|
||||
<p>{getOptionTooltip(contextTooltipOption)}</p>
|
||||
{/if}
|
||||
|
||||
{#if fieldSupport[currentOption]?.errors?.length > 0}
|
||||
{#each (fieldSupport[currentOption].errors) as datum}
|
||||
<p>{datum}</p>
|
||||
{/each}
|
||||
{:else if fieldSupport[currentOption]?.warnings?.length > 0}
|
||||
{#each (fieldSupport[currentOption].warnings) as datum}
|
||||
<p>{datum}</p>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div slot="previous"
|
||||
class="tooltipContents"
|
||||
class={`tooltipContents ${previousOptionSupport.class}`}
|
||||
>
|
||||
{#if previousContextTooltipOption}
|
||||
<div class={`supportLevel ${previousOptionSupport.class}`}>
|
||||
<Icon tooltip={previousOptionSupport.iconTooltip} name={previousOptionSupport.icon} />
|
||||
<p>{previousOptionSupport.text}</p>
|
||||
</div>
|
||||
<div class="contextTooltipContent">
|
||||
<div class="contextTooltipHeader">
|
||||
<Icon name={getOptionIcon(previousContextTooltipOption)} />
|
||||
<span>{previousContextTooltipOption}</span>
|
||||
<Icon name={getOptionIcon(previousOption)} />
|
||||
<span>{previousOption}</span>
|
||||
</div>
|
||||
<p>{getOptionTooltip(previousContextTooltipOption)}</p>
|
||||
{/if}
|
||||
|
||||
{#if fieldSupport[previousOption]?.errors?.length > 0}
|
||||
{#each (fieldSupport[previousOption].errors) as datum}
|
||||
<p>{datum}</p>
|
||||
{/each}
|
||||
{:else if fieldSupport[previousOption]?.warnings?.length > 0}
|
||||
{#each (fieldSupport[previousOption].warnings) as datum}
|
||||
<p>{datum}</p>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</ContextTooltip>
|
||||
|
||||
<style>
|
||||
.tooltipContents {
|
||||
max-width: 200px;
|
||||
max-width: 400px;
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
display: block;
|
||||
padding: 0 0 12px 0 ;
|
||||
border-radius: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tooltipContents.supportLevelUnsupported {
|
||||
background-color: var(--red);
|
||||
color: var(--ink)
|
||||
}
|
||||
|
||||
.tooltipContents.supportLevelPartialSupport {
|
||||
background-color: var(--yellow);
|
||||
color: var(--ink)
|
||||
}
|
||||
|
||||
.tooltipContents.supportLevelSupported {
|
||||
background-color: var(--green);
|
||||
color: var(--ink)
|
||||
}
|
||||
|
||||
.contextTooltipHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -203,14 +286,41 @@
|
|||
);
|
||||
}
|
||||
|
||||
.contextTooltipContent {
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
.contextTooltipHeader :global(svg) {
|
||||
color: var(--background);
|
||||
color: var(--ink);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.contextTooltipHeader :global(span) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.supportLevel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: var(--spectrum-alias-item-height-m);
|
||||
padding: 0px var(--spectrum-alias-item-padding-m);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.supportLevel :global(svg) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.supportLevel.supportLevelUnsupported {
|
||||
background-color: var(--red-light)
|
||||
}
|
||||
|
||||
.supportLevel.supportLevelPartialSupport {
|
||||
background-color: var(--yellow-light)
|
||||
}
|
||||
|
||||
.supportLevel.supportLevelSupported {
|
||||
background-color: var(--green-light)
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { capitalize } from 'lodash';
|
||||
|
||||
export const constants = {
|
||||
warning: Symbol("values-validator-warning"),
|
||||
error: Symbol("values-validator-error"),
|
||||
|
|
@ -8,16 +10,17 @@ export const constants = {
|
|||
|
||||
export const validators = {
|
||||
chart: (fieldSchema) => {
|
||||
console.log(fieldSchema);
|
||||
try {
|
||||
const response = {
|
||||
support: null,
|
||||
level: null,
|
||||
message: null,
|
||||
warnings: [],
|
||||
errors: []
|
||||
}
|
||||
const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"]
|
||||
if (generalUnsupportedFields.includes(fieldSchema.type)) {
|
||||
response.errors.push(`${fieldSchema.type} columns can not be used as chart inputs.`)
|
||||
response.errors.push(`${capitalize(fieldSchema.type)} columns are unsupported.`)
|
||||
}
|
||||
|
||||
if (fieldSchema.type === "json") {
|
||||
|
|
@ -26,7 +29,7 @@ export const validators = {
|
|||
|
||||
if (fieldSchema.type === "string") {
|
||||
response.warnings.push(
|
||||
"This column can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
|
||||
"String columns can be used as input for a chart, but non-numeric values may cause unexpected behavior.")
|
||||
}
|
||||
if (fieldSchema.type === "date") {
|
||||
response.warnings.push(
|
||||
|
|
@ -40,13 +43,13 @@ export const validators = {
|
|||
}
|
||||
|
||||
if (response.errors.length > 0) {
|
||||
response.support = constants.unsupported
|
||||
response.level = constants.unsupported
|
||||
response.message = "This column can not be used as a chart input."
|
||||
} else if (response.warnings.length > 0) {
|
||||
response.support = constants.partialSupport
|
||||
response.level = constants.partialSupport
|
||||
response.message = "This column can be used as a chart input, but certain values may cause issues."
|
||||
} else {
|
||||
response.support = constants.supported
|
||||
response.level = constants.supported
|
||||
response.message = "This column can be used as a chart input."
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +57,7 @@ export const validators = {
|
|||
} catch (e) {
|
||||
console.log(e)
|
||||
return {
|
||||
support: constants.partialSupport,
|
||||
level: constants.partialSupport,
|
||||
message: "There was an issue validating this field, it may not be fully supported for use with charts.",
|
||||
warnings: [],
|
||||
errors: []
|
||||
|
|
|
|||
Loading…
Reference in New Issue