Change in Code Indentation
This commit is contained in:
Luis Fernando Molina committed
1 parent
1a52e5494e
commit
199a71a4e5
89 files changed
+22093
-22093
No files matched your search
+215
-215
@@ -1,237 +1,237 @@
|
||||
function newSidePanelTab () {
|
||||
const MODULE_NAME = 'Side Panel Tab'
|
||||
let thisObject = {
|
||||
pointerDirection: 'left',
|
||||
container: undefined,
|
||||
resize: resize,
|
||||
physics: physics,
|
||||
draw: draw,
|
||||
getContainer: getContainer,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
const TAB_WIDTH = 25
|
||||
const TAB_HEIGHT = 60
|
||||
|
||||
let isInitialized = false
|
||||
let animation = 'none'
|
||||
let ORIGINAL_PARENT_POSITON
|
||||
let xOffset = 0
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.name = MODULE_NAME
|
||||
thisObject.container.initialize()
|
||||
thisObject.container.isClickeable = true
|
||||
thisObject.container.isDraggeable = false
|
||||
|
||||
return thisObject
|
||||
|
||||
function initialize () {
|
||||
thisObject.container.frame.width = TAB_WIDTH
|
||||
thisObject.container.frame.height = TAB_HEIGHT
|
||||
|
||||
ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
|
||||
|
||||
thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
|
||||
resize()
|
||||
isInitialized = true
|
||||
}
|
||||
|
||||
function resize () {
|
||||
thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
|
||||
thisObject.container.frame.position.y = 69
|
||||
setClosed()
|
||||
}
|
||||
|
||||
function onMouseClick (event) {
|
||||
if (thisObject.pointerDirection === 'left') {
|
||||
animation = 'opening'
|
||||
thisObject.container.eventHandler.raiseEvent('opening')
|
||||
} else {
|
||||
animation = 'closing'
|
||||
thisObject.container.eventHandler.raiseEvent('closing')
|
||||
}
|
||||
}
|
||||
|
||||
function getContainer (point) {
|
||||
let container
|
||||
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
function physics () {
|
||||
if (isInitialized === false) { return }
|
||||
animate()
|
||||
}
|
||||
|
||||
function draw () {
|
||||
if (isInitialized === false) { return }
|
||||
borders()
|
||||
arrow()
|
||||
}
|
||||
|
||||
function animate () {
|
||||
const STEP = 50
|
||||
|
||||
if (animation === 'opening') {
|
||||
xOffset = xOffset + STEP
|
||||
thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
|
||||
if (xOffset >= thisObject.container.parentContainer.frame.width) {
|
||||
setOpened()
|
||||
thisObject.container.eventHandler.raiseEvent('opened')
|
||||
}
|
||||
function newSidePanelTab() {
|
||||
const MODULE_NAME = 'Side Panel Tab'
|
||||
let thisObject = {
|
||||
pointerDirection: 'left',
|
||||
container: undefined,
|
||||
resize: resize,
|
||||
physics: physics,
|
||||
draw: draw,
|
||||
getContainer: getContainer,
|
||||
initialize: initialize
|
||||
}
|
||||
|
||||
if (animation === 'closing') {
|
||||
xOffset = xOffset - STEP
|
||||
thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
|
||||
if (xOffset <= 0) {
|
||||
const TAB_WIDTH = 25
|
||||
const TAB_HEIGHT = 60
|
||||
|
||||
let isInitialized = false
|
||||
let animation = 'none'
|
||||
let ORIGINAL_PARENT_POSITON
|
||||
let xOffset = 0
|
||||
|
||||
thisObject.container = newContainer()
|
||||
thisObject.container.name = MODULE_NAME
|
||||
thisObject.container.initialize()
|
||||
thisObject.container.isClickeable = true
|
||||
thisObject.container.isDraggeable = false
|
||||
|
||||
return thisObject
|
||||
|
||||
function initialize() {
|
||||
thisObject.container.frame.width = TAB_WIDTH
|
||||
thisObject.container.frame.height = TAB_HEIGHT
|
||||
|
||||
ORIGINAL_PARENT_POSITON = thisObject.container.parentContainer.frame.position.x
|
||||
|
||||
thisObject.container.eventHandler.listenToEvent('onMouseClick', onMouseClick)
|
||||
resize()
|
||||
isInitialized = true
|
||||
}
|
||||
|
||||
function resize() {
|
||||
thisObject.container.frame.position.x = 0 + thisObject.container.parentContainer.frame.width
|
||||
thisObject.container.frame.position.y = 69
|
||||
setClosed()
|
||||
thisObject.container.eventHandler.raiseEvent('closed')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setOpened () {
|
||||
animation = 'none'
|
||||
xOffset = thisObject.container.parentContainer.frame.width
|
||||
thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
|
||||
thisObject.container.parentContainer.status = 'visible'
|
||||
thisObject.pointerDirection = 'right'
|
||||
}
|
||||
function setClosed () {
|
||||
animation = 'none'
|
||||
xOffset = 0
|
||||
thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
|
||||
thisObject.container.parentContainer.status = 'hidden'
|
||||
thisObject.pointerDirection = 'left'
|
||||
}
|
||||
|
||||
function arrow () {
|
||||
let point1
|
||||
let point2
|
||||
let point3
|
||||
|
||||
if (thisObject.pointerDirection === 'left') {
|
||||
point1 = {
|
||||
x: TAB_WIDTH * 3.5 / 10,
|
||||
y: TAB_HEIGHT * 12.5 / 30
|
||||
}
|
||||
|
||||
point2 = {
|
||||
x: TAB_WIDTH * 6.5 / 10,
|
||||
y: TAB_HEIGHT * 15 / 30
|
||||
}
|
||||
|
||||
point3 = {
|
||||
x: TAB_WIDTH * 3.5 / 10,
|
||||
y: TAB_HEIGHT * 17.5 / 30
|
||||
}
|
||||
} else {
|
||||
point1 = {
|
||||
x: TAB_WIDTH * 6.5 / 10,
|
||||
y: TAB_HEIGHT * 12.5 / 30
|
||||
}
|
||||
|
||||
point2 = {
|
||||
x: TAB_WIDTH * 3.5 / 10,
|
||||
y: TAB_HEIGHT * 15 / 30
|
||||
}
|
||||
|
||||
point3 = {
|
||||
x: TAB_WIDTH * 6.5 / 10,
|
||||
y: TAB_HEIGHT * 17.5 / 30
|
||||
}
|
||||
}
|
||||
|
||||
point1 = thisObject.container.frame.frameThisPoint(point1)
|
||||
point2 = thisObject.container.frame.frameThisPoint(point2)
|
||||
point3 = thisObject.container.frame.frameThisPoint(point3)
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.moveTo(point1.x, point1.y)
|
||||
browserCanvasContext.lineTo(point2.x, point2.y)
|
||||
browserCanvasContext.lineTo(point3.x, point3.y)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
let opacity = 1
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
|
||||
function borders () {
|
||||
let point1
|
||||
let point2
|
||||
let point3
|
||||
let point4
|
||||
|
||||
point1 = {
|
||||
x: 0,
|
||||
y: 0
|
||||
function onMouseClick(event) {
|
||||
if (thisObject.pointerDirection === 'left') {
|
||||
animation = 'opening'
|
||||
thisObject.container.eventHandler.raiseEvent('opening')
|
||||
} else {
|
||||
animation = 'closing'
|
||||
thisObject.container.eventHandler.raiseEvent('closing')
|
||||
}
|
||||
}
|
||||
|
||||
point2 = {
|
||||
x: TAB_WIDTH,
|
||||
y: 0
|
||||
function getContainer(point) {
|
||||
let container
|
||||
if (thisObject.container.frame.isThisPointHere(point, true) === true) {
|
||||
return thisObject.container
|
||||
} else {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
point3 = {
|
||||
x: TAB_WIDTH,
|
||||
y: TAB_HEIGHT
|
||||
function physics() {
|
||||
if (isInitialized === false) { return }
|
||||
animate()
|
||||
}
|
||||
|
||||
point4 = {
|
||||
x: 0,
|
||||
y: TAB_HEIGHT
|
||||
function draw() {
|
||||
if (isInitialized === false) { return }
|
||||
borders()
|
||||
arrow()
|
||||
}
|
||||
|
||||
point1 = thisObject.container.frame.frameThisPoint(point1)
|
||||
point2 = thisObject.container.frame.frameThisPoint(point2)
|
||||
point3 = thisObject.container.frame.frameThisPoint(point3)
|
||||
point4 = thisObject.container.frame.frameThisPoint(point4)
|
||||
function animate() {
|
||||
const STEP = 50
|
||||
|
||||
let opacity
|
||||
if (animation === 'opening') {
|
||||
xOffset = xOffset + STEP
|
||||
thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
|
||||
if (xOffset >= thisObject.container.parentContainer.frame.width) {
|
||||
setOpened()
|
||||
thisObject.container.eventHandler.raiseEvent('opened')
|
||||
}
|
||||
}
|
||||
|
||||
/* Shadow */
|
||||
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
opacity = 1 - (i / 100) - 0.93
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.moveTo(point1.x + i, point1.y + i)
|
||||
browserCanvasContext.lineTo(point2.x + i, point2.y + i)
|
||||
browserCanvasContext.lineTo(point3.x + i, point3.y + i)
|
||||
browserCanvasContext.lineTo(point4.x + i, point4.y + i)
|
||||
browserCanvasContext.lineTo(point1.x + i, point1.y + i)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
|
||||
browserCanvasContext.lineWidth = 1
|
||||
browserCanvasContext.stroke()
|
||||
if (animation === 'closing') {
|
||||
xOffset = xOffset - STEP
|
||||
thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
|
||||
if (xOffset <= 0) {
|
||||
setClosed()
|
||||
thisObject.container.eventHandler.raiseEvent('closed')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Background and Border */
|
||||
function setOpened() {
|
||||
animation = 'none'
|
||||
xOffset = thisObject.container.parentContainer.frame.width
|
||||
thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON + xOffset
|
||||
thisObject.container.parentContainer.status = 'visible'
|
||||
thisObject.pointerDirection = 'right'
|
||||
}
|
||||
function setClosed() {
|
||||
animation = 'none'
|
||||
xOffset = 0
|
||||
thisObject.container.parentContainer.frame.position.x = ORIGINAL_PARENT_POSITON
|
||||
thisObject.container.parentContainer.status = 'hidden'
|
||||
thisObject.pointerDirection = 'left'
|
||||
}
|
||||
|
||||
browserCanvasContext.setLineDash([0, 0])
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.moveTo(point1.x, point1.y)
|
||||
browserCanvasContext.lineTo(point2.x, point2.y)
|
||||
browserCanvasContext.lineTo(point3.x, point3.y)
|
||||
browserCanvasContext.lineTo(point4.x, point4.y)
|
||||
browserCanvasContext.lineTo(point1.x, point1.y)
|
||||
browserCanvasContext.closePath()
|
||||
function arrow() {
|
||||
let point1
|
||||
let point2
|
||||
let point3
|
||||
|
||||
opacity = 1
|
||||
if (thisObject.pointerDirection === 'left') {
|
||||
point1 = {
|
||||
x: TAB_WIDTH * 3.5 / 10,
|
||||
y: TAB_HEIGHT * 12.5 / 30
|
||||
}
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
|
||||
browserCanvasContext.fill()
|
||||
point2 = {
|
||||
x: TAB_WIDTH * 6.5 / 10,
|
||||
y: TAB_HEIGHT * 15 / 30
|
||||
}
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
|
||||
browserCanvasContext.lineWidth = 0.3
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
point3 = {
|
||||
x: TAB_WIDTH * 3.5 / 10,
|
||||
y: TAB_HEIGHT * 17.5 / 30
|
||||
}
|
||||
} else {
|
||||
point1 = {
|
||||
x: TAB_WIDTH * 6.5 / 10,
|
||||
y: TAB_HEIGHT * 12.5 / 30
|
||||
}
|
||||
|
||||
point2 = {
|
||||
x: TAB_WIDTH * 3.5 / 10,
|
||||
y: TAB_HEIGHT * 15 / 30
|
||||
}
|
||||
|
||||
point3 = {
|
||||
x: TAB_WIDTH * 6.5 / 10,
|
||||
y: TAB_HEIGHT * 17.5 / 30
|
||||
}
|
||||
}
|
||||
|
||||
point1 = thisObject.container.frame.frameThisPoint(point1)
|
||||
point2 = thisObject.container.frame.frameThisPoint(point2)
|
||||
point3 = thisObject.container.frame.frameThisPoint(point3)
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.moveTo(point1.x, point1.y)
|
||||
browserCanvasContext.lineTo(point2.x, point2.y)
|
||||
browserCanvasContext.lineTo(point3.x, point3.y)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
let opacity = 1
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
|
||||
browserCanvasContext.fill()
|
||||
}
|
||||
|
||||
function borders() {
|
||||
let point1
|
||||
let point2
|
||||
let point3
|
||||
let point4
|
||||
|
||||
point1 = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
point2 = {
|
||||
x: TAB_WIDTH,
|
||||
y: 0
|
||||
}
|
||||
|
||||
point3 = {
|
||||
x: TAB_WIDTH,
|
||||
y: TAB_HEIGHT
|
||||
}
|
||||
|
||||
point4 = {
|
||||
x: 0,
|
||||
y: TAB_HEIGHT
|
||||
}
|
||||
|
||||
point1 = thisObject.container.frame.frameThisPoint(point1)
|
||||
point2 = thisObject.container.frame.frameThisPoint(point2)
|
||||
point3 = thisObject.container.frame.frameThisPoint(point3)
|
||||
point4 = thisObject.container.frame.frameThisPoint(point4)
|
||||
|
||||
let opacity
|
||||
|
||||
/* Shadow */
|
||||
|
||||
for (let i = 0; i <= 5; i++) {
|
||||
opacity = 1 - (i / 100) - 0.93
|
||||
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.moveTo(point1.x + i, point1.y + i)
|
||||
browserCanvasContext.lineTo(point2.x + i, point2.y + i)
|
||||
browserCanvasContext.lineTo(point3.x + i, point3.y + i)
|
||||
browserCanvasContext.lineTo(point4.x + i, point4.y + i)
|
||||
browserCanvasContext.lineTo(point1.x + i, point1.y + i)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + ''
|
||||
browserCanvasContext.lineWidth = 1
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
|
||||
/* Background and Border */
|
||||
|
||||
browserCanvasContext.setLineDash([0, 0])
|
||||
browserCanvasContext.beginPath()
|
||||
browserCanvasContext.moveTo(point1.x, point1.y)
|
||||
browserCanvasContext.lineTo(point2.x, point2.y)
|
||||
browserCanvasContext.lineTo(point3.x, point3.y)
|
||||
browserCanvasContext.lineTo(point4.x, point4.y)
|
||||
browserCanvasContext.lineTo(point1.x, point1.y)
|
||||
browserCanvasContext.closePath()
|
||||
|
||||
opacity = 1
|
||||
|
||||
browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + ''
|
||||
browserCanvasContext.fill()
|
||||
|
||||
browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + ''
|
||||
browserCanvasContext.lineWidth = 0.3
|
||||
browserCanvasContext.stroke()
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user