Skip to content

Commit

Permalink
Changed start/end indicators style
Browse files Browse the repository at this point in the history
  • Loading branch information
@thiagorossener
thiagorossener committed Nov 30, 2020
1 parent 37c717b commit 844a060
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 35 deletions.
6 changes: 3 additions & 3 deletions src/scrollmagic/controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default class Controller implements IBaseController {
"margin-top": "2px",
"border-top": "0 solid transparent",
"border-bottom": "19px solid transparent",
"border-right": "8px solid black",
"border-right": "8px solid currentColor",
"margin-right": "-2px",
})
DomUtils.css(tagBlock, {
Expand All @@ -198,7 +198,7 @@ export default class Controller implements IBaseController {
"margin-bottom": "2px",
"border-top": "19px solid transparent",
"border-bottom": "0 solid transparent",
"border-right": "8px solid black",
"border-right": "8px solid currentColor",
"margin-right": "-2px",
})
DomUtils.css(tagBlock, {
Expand All @@ -223,7 +223,7 @@ export default class Controller implements IBaseController {
DomUtils.css(tagFrontArrow, {
"border-top": "10px solid transparent",
"border-bottom": "10px solid transparent",
"border-right": "9px solid black",
"border-right": "9px solid currentColor",
"margin-right": "-3px",
})
DomUtils.css(tagBlock, {
Expand Down
130 changes: 112 additions & 18 deletions src/scrollmagic/indicator/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ export interface IndicatorGroup {
}

const DEFAULT = {
colorStart: "green",
colorEnd: "red",
colorTrigger: "#000",
colorStart: "#4385f4",
colorEnd: "#ff0a16",
colorTrigger: "#4385f4",
}

export default class Indicator {
Expand Down Expand Up @@ -53,10 +53,12 @@ export default class Indicator {
this.elemEnd = Template.end(this.options.colorEnd || DEFAULT.colorEnd)

// Prepare bounds elements
if (this.elemStart.firstChild) {
this.elemStart.firstChild.textContent += ` ${this.options.name}`
if (this.elemStart.firstChild && this.elemStart.firstChild.firstChild) {
this.elemStart.firstChild.firstChild.textContent += ` ${this.options.name}`
}
if (this.elemEnd.firstChild && this.elemEnd.firstChild.firstChild) {
this.elemEnd.firstChild.firstChild.textContent += ` ${this.options.name}`
}
this.elemEnd.textContent += ` ${this.options.name}`
this.elemBounds.appendChild(this.elemStart)
this.elemBounds.appendChild(this.elemEnd)

Expand Down Expand Up @@ -156,22 +158,26 @@ export default class Indicator {
const isVertical: boolean = this.controller.info().isVertical

// Apply stuff we didn't know before...

// ...to start element
DomUtils.css(<HTMLElement>this.elemStart.firstChild, {
"border-bottom-width": isVertical ? 1 : 0,
"border-right-width": isVertical ? 0 : 1,
bottom: isVertical ? -1 : this.options.indent,
right: isVertical ? this.options.indent : -1,
padding: isVertical ? "0 8px" : "2px 4px",
})
DomUtils.css(<HTMLElement>this.elemStart.firstChild?.firstChild, {
padding: isVertical ? "4px 8px 6px 8px" : "2px 4px",
})

DomUtils.css(this.elemEnd, {
"border-top-width": isVertical ? "1" : "0",
"border-left-width": isVertical ? "0" : "1",
// ...to end element
DomUtils.css(<HTMLElement>this.elemEnd, {
top: isVertical ? "100%" : "",
left: isVertical ? "" : "100%",
})
DomUtils.css(<HTMLElement>this.elemEnd.firstChild, {
right: isVertical ? this.options.indent : "",
bottom: isVertical ? "" : this.options.indent,
left: isVertical ? "" : "100%",
padding: isVertical ? "0 8px" : "2px 4px",
})
DomUtils.css(<HTMLElement>this.elemEnd.firstChild?.firstChild, {
padding: isVertical ? "4px 8px 6px 8px" : "2px 4px",
})

// Append
Expand Down Expand Up @@ -200,9 +206,97 @@ export default class Indicator {

DomUtils.css(this.elemBounds, css)

DomUtils.css(this.elemEnd, {
display: this.scene.duration > 0 ? "" : "none",
})
const startTag = <HTMLElement>this.elemStart.firstChild
const startTagBlock = <HTMLElement>startTag.children[0]
const startTagBackArrow = <HTMLElement>startTag.children[1]
const startTagFrontArrow = <HTMLElement>startTag.children[2]

const endTag = <HTMLElement>this.elemEnd.firstChild
const endTagBlock = <HTMLElement>endTag.children[0]
const endTagBackArrow = <HTMLElement>endTag.children[1]
const endTagFrontArrow = <HTMLElement>endTag.children[2]

// Has duration?
if (this.scene.duration > 0) {
// Modify start tag style
DomUtils.css(startTag, {
"align-items": "flex-start",
transform: "translate3d(-5px, 0, 0)",
})
DomUtils.css(startTagBlock, {
"border-top-left-radius": "9px",
"border-top-right-radius": "0",
"border-bottom-left-radius": "9px",
"border-bottom-right-radius": "11px",
})
DomUtils.css(startTagBackArrow, {
top: 0,
transform: "",
"border-top": "0 solid transparent",
"border-bottom": "24px solid transparent",
"border-left": "10px solid currentColor",
})
DomUtils.css(startTagFrontArrow, {
"margin-top": "2px",
"border-top": "0 solid transparent",
"border-bottom": "19px solid transparent",
"border-left": "8px solid #fff",
"margin-left": "-2px",
})
// Modify end tag style
DomUtils.css(this.elemEnd, {
display: "",
})
DomUtils.css(endTag, {
"align-items": "flex-end",
transform: "translate3d(-5px, -100%, 0)",
})
DomUtils.css(endTagBlock, {
"border-top-left-radius": "9px",
"border-bottom-left-radius": "9px",
"border-top-right-radius": "11px",
})
DomUtils.css(endTagBackArrow, {
bottom: 0,
"border-top": "24px solid transparent",
"border-bottom": "0 solid transparent",
"border-left": "10px solid currentColor",
})
DomUtils.css(endTagFrontArrow, {
"margin-bottom": "2px",
"border-top": "19px solid transparent",
"border-bottom": "0 solid transparent",
"border-left": "8px solid #fff",
"margin-left": "-2px",
})
} else {
// Modify start tag style
DomUtils.css(startTag, {
"align-items": "center",
transform: "translate3d(-5px, -50%, 0)",
})
DomUtils.css(startTagBlock, {
"border-radius": "9px",
})
DomUtils.css(startTagBackArrow, {
top: "50%",
transform: "translate3d(0, -50%, 0)",
"border-top": "12px solid transparent",
"border-bottom": "12px solid transparent",
"border-left": "12px solid currentColor",
})
DomUtils.css(startTagFrontArrow, {
"margin-top": "",
"border-top": "10px solid transparent",
"border-bottom": "10px solid transparent",
"border-left": "9px solid #fff",
"margin-left": "-3px",
})
// Hide end tag
DomUtils.css(this.elemEnd, {
display: "none",
})
}
}

/*
Expand Down
98 changes: 84 additions & 14 deletions src/scrollmagic/indicator/template.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,41 +3,110 @@ import Indicator from "."

export default {
start(color: string): HTMLElement {
// Inner element (for bottom offset -1, while keeping top position 0)
const inner = document.createElement("div")
inner.textContent = "start"
domUtils.css(inner, {
const tagBackArrow = document.createElement("div")
domUtils.css(tagBackArrow, {
width: 0,
height: 0,
position: "absolute",
right: "-3px",
"z-index": -1,
})

const tagFrontArrow = document.createElement("div")
domUtils.css(tagFrontArrow, {
width: 0,
height: 0,
position: "relative",
"z-index": 2,
})

const tagBlock = document.createElement("div")
tagBlock.textContent = "start"
domUtils.css(tagBlock, {
"font-family": "Arial, sans-serif",
"font-weight": "bold",
"font-size": Indicator.FONT_SIZE,
"line-height": Indicator.LINE_HEIGHT,
"background-color": "#fff",
color: "currentColor",
border: "2px solid white",
"box-shadow": "4px 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1)",
"border-color": "currentColor",
})

const tag = document.createElement("div")
domUtils.css(tag, {
position: "absolute",
overflow: "visible",
"border-width": 0,
"border-style": "solid",
display: "flex",
color: color,
"border-color": color,
})
tag.appendChild(tagBlock)
tag.appendChild(tagBackArrow)
tag.appendChild(tagFrontArrow)

// Wrapper
const elem = document.createElement("div")
domUtils.css(elem, {
position: "absolute",
overflow: "visible",
width: 0,
height: 0,
})
elem.appendChild(inner)
elem.appendChild(tag)

return elem
},
end(color: string): HTMLElement {
const tagBackArrow = document.createElement("div")
domUtils.css(tagBackArrow, {
width: 0,
height: 0,
position: "absolute",
right: "-3px",
"z-index": -1,
})

const tagFrontArrow = document.createElement("div")
domUtils.css(tagFrontArrow, {
width: 0,
height: 0,
position: "relative",
"z-index": 2,
})

const tagBlock = document.createElement("div")
tagBlock.textContent = "end"
domUtils.css(tagBlock, {
"font-family": "Arial, sans-serif",
"font-weight": "bold",
"font-size": Indicator.FONT_SIZE,
"line-height": Indicator.LINE_HEIGHT,
"background-color": "#fff",
color: "currentColor",
border: "2px solid white",
"box-shadow": "4px 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.1)",
"border-color": "currentColor",
})

const tag = document.createElement("div")
domUtils.css(tag, {
position: "absolute",
overflow: "visible",
display: "flex",
color: color,
})
tag.appendChild(tagBlock)
tag.appendChild(tagBackArrow)
tag.appendChild(tagFrontArrow)

const elem = document.createElement("div")
elem.textContent = "end"
domUtils.css(elem, {
position: "absolute",
overflow: "visible",
"border-width": 0,
"border-style": "solid",
color: color,
"border-color": color,
width: 0,
height: 0,
})
elem.appendChild(tag)
return elem
},
bounds(): HTMLElement {
Expand Down Expand Up @@ -99,6 +168,7 @@ export default {
overflow: "visible",
"white-space": "nowrap",
"pointer-events": "none",
color: color,
})
elem.style.zIndex = Indicator.ZINDEX
elem.appendChild(tag)
Expand Down

0 comments on commit 844a060

Please sign in to comment.