Panel Tab Button Implemented

Panels/PanelTabButton.js

@@ -0,0 +1,223 @@
+function newPanelTabButton () {
+  var thisObject = {
+    container: undefined,
+    draw: draw,
+    parentContainer: undefined,
+    getContainer: getContainer,     // returns the inner most container that holds the point received by parameter.
+    initialize: initialize
+  }
+
+  let isInitialized = false
+   /* Cointainer stuff */
+
+  var container = newContainer()
+
+  container.name = 'Panel Tab Button'
+  container.initialize()
+
+  container.isClickeable = true
+
+  thisObject.container = container
+  thisObject.container.frame.containerName = 'Panel Tab Button'
+
+  /* Lets listen to our own events to react when we have a Mouse Click */
+
+  thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed)
+
+  /* Animation to hide the pannel */
+
+  let tabStatus = 'visible'
+  let visiblePosition = {}
+  let hiddenPosition = {}
+  let transitionPosition = {}
+
+  return thisObject
+
+  function initialize () {
+    thisObject.container.frame.width = 10
+    thisObject.container.frame.height = 10
+
+    var position = {
+      x: thisObject.parentContainer.frame.width - 15,
+      y: 2
+    }
+
+    thisObject.container.frame.position = position
+
+    visiblePosition.x = thisObject.parentContainer.frame.position.x
+    visiblePosition.y = thisObject.parentContainer.frame.position.y
+
+    hiddenPosition.x = thisObject.parentContainer.frame.position.x
+    hiddenPosition.y = viewPort.visibleArea.bottomRight.y
+
+    transitionPosition.x = visiblePosition.x
+    transitionPosition.y = visiblePosition.y
+
+    isInitialized = true
+  }
+
+  function buttonPressed (event) {
+    if (tabStatus === 'visible') {
+      visiblePosition.x = thisObject.parentContainer.frame.position.x
+      visiblePosition.y = thisObject.parentContainer.frame.position.y
+
+      hiddenPosition.x = thisObject.parentContainer.frame.position.x
+      hiddenPosition.y = viewPort.visibleArea.bottomRight.y
+
+      transitionPosition.x = visiblePosition.x
+      transitionPosition.y = visiblePosition.y
+
+      thisObject.parentContainer.isDraggeable = false
+      thisObject.parentContainer.isWheelable = false
+      tabStatus = 'going down'
+    } else {
+      thisObject.parentContainer.isDraggeable = true
+      thisObject.parentContainer.isWheelable = true
+      tabStatus = 'going up'
+    }
+  }
+
+  function draw () {
+    if (isInitialized === false) { return }
+
+    drawButton()
+
+    if (tabStatus === 'going down') {
+      if (transitionPosition.y < hiddenPosition.y) {
+        transitionPosition.y = transitionPosition.y + 25
+        thisObject.parentContainer.frame.position.y = transitionPosition.y
+      } else {
+        thisObject.parentContainer.frame.position.y = hiddenPosition.y
+        tabStatus = 'hidden'
+      }
+    }
+    if (tabStatus === 'going up') {
+      if (transitionPosition.y > visiblePosition.y) {
+        transitionPosition.y = transitionPosition.y - 25
+        thisObject.parentContainer.frame.position.y = transitionPosition.y
+      } else {
+        thisObject.parentContainer.frame.position.y = visiblePosition.y
+        tabStatus = 'visible'
+      }
+    }
+  }
+
+  function getContainer (point) {
+    var container
+
+       /* First we check if thisObject point is inside thisObject space. */
+
+    if (thisObject.container.frame.isThisPointHere(point, true) === true) {
+           /* Now we see which is the inner most container that has it */
+
+      return thisObject.container
+    } else {
+           /* This point does not belong to thisObject space. */
+
+      return undefined
+    }
+  }
+
+  function drawButton () {
+    let point1
+    let point2
+    let point3
+
+    switch (tabStatus) {
+      case 'visible': {
+        point1 = {
+          x: 3,
+          y: 3
+        }
+
+        point2 = {
+          x: container.frame.width - 3,
+          y: 3
+        }
+
+        point3 = {
+          x: container.frame.width / 2,
+          y: container.frame.height - 3
+        }
+        break
+      }
+
+      case 'going down': {
+        point1 = {
+          x: 4,
+          y: 4
+        }
+
+        point2 = {
+          x: container.frame.width - 4,
+          y: 4
+        }
+
+        point3 = {
+          x: container.frame.width / 2,
+          y: container.frame.height - 4
+        }
+        break
+      }
+
+      case 'going up': {
+        point1 = {
+          x: 4,
+          y: container.frame.height - 4
+        }
+
+        point2 = {
+          x: container.frame.width - 4,
+          y: container.frame.height - 4
+        }
+
+        point3 = {
+          x: container.frame.width / 2,
+          y: 4
+        }
+        break
+      }
+
+      case 'hidden': {
+        point1 = {
+          x: 3,
+          y: container.frame.height - 3
+        }
+
+        point2 = {
+          x: container.frame.width - 3,
+          y: container.frame.height - 3
+        }
+
+        point3 = {
+          x: container.frame.width / 2,
+          y: 3
+        }
+        break
+      }
+    }
+
+        /* Now the transformations. */
+
+    point1 = thisObject.container.frame.frameThisPoint(point1)
+    point2 = thisObject.container.frame.frameThisPoint(point2)
+    point3 = thisObject.container.frame.frameThisPoint(point3)
+
+        /* Lets start the drawing. */
+
+    browserCanvasContext.beginPath()
+    browserCanvasContext.moveTo(point1.x, point1.y)
+    browserCanvasContext.lineTo(point2.x, point2.y)
+    browserCanvasContext.lineTo(point3.x, point3.y)
+    browserCanvasContext.lineTo(point1.x, point1.y)
+    browserCanvasContext.closePath()
+
+    browserCanvasContext.strokeStyle = 'rgba(250, 250, 250, 1)'
+    browserCanvasContext.lineWidth = 1
+    browserCanvasContext.stroke()
+
+    browserCanvasContext.fillStyle = 'rgba(250, 250, 250, 1)'
+    browserCanvasContext.fill()
+  }
+}
+

Panels/ProductsPanel.js

@@ -17,15 +17,9 @@
    container.isDraggeable = true
    container.isWheelable = true
 
-   container.isClickeable = true
-
    thisObject.container = container
    thisObject.container.frame.containerName = "Indicators and Algobots's Products"
 
-   /* Lets listen to our own events to react when we have a Mouse Click */
-
-   thisObject.container.eventHandler.listenToEvent('onMouseClick', buttonPressed)
-
    let isInitialized = false
    let productCards = []
 
@@ -35,13 +29,7 @@
     /* Needed Variables */
 
    let lastY = 5
-
-   /* Animation to hide the pannel */
-
-   let tabStatus = 'visible'
-   let visiblePosition = {}
-   let hiddenPosition = {}
-   let transitionPosition = {}
+   let panelTabButton
 
    return thisObject
 
@@ -56,14 +44,10 @@
 
      thisObject.container.frame.position = position
 
-     visiblePosition.x = thisObject.container.frame.position.x
-     visiblePosition.y = thisObject.container.frame.position.y
-
-     hiddenPosition.x = thisObject.container.frame.position.x
-     hiddenPosition.y = viewPort.visibleArea.bottomRight.y
-
-     transitionPosition.x = visiblePosition.x
-     transitionPosition.y = visiblePosition.y
+     panelTabButton = newPanelTabButton()
+     panelTabButton.parentContainer = thisObject.container
+     panelTabButton.container.frame.parentFrame = thisObject.container.frame
+     panelTabButton.initialize()
 
         /* First thing is to build the productCards array */
 
@@ -135,27 +119,6 @@
      isInitialized = true
    }
 
-   function buttonPressed (event) {
-     if (tabStatus === 'visible') {
-       visiblePosition.x = thisObject.container.frame.position.x
-       visiblePosition.y = thisObject.container.frame.position.y
-
-       hiddenPosition.x = thisObject.container.frame.position.x
-       hiddenPosition.y = viewPort.visibleArea.bottomRight.y
-
-       transitionPosition.x = visiblePosition.x
-       transitionPosition.y = visiblePosition.y
-
-       container.isDraggeable = false
-       container.isWheelable = false
-       tabStatus = 'going down'
-     } else {
-       container.isDraggeable = true
-       container.isWheelable = true
-       tabStatus = 'going up'
-     }
-   }
-
    function onMouseWheel (pDelta) {
      if (pDelta > 0) {
        pDelta = -1
@@ -216,6 +179,9 @@
    function getContainer (point) {
      var container
 
+     container = panelTabButton.getContainer(point)
+     if (container !== undefined) { return container }
+
         /* First we check if thisObject point is inside thisObject space. */
 
      if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -244,29 +210,12 @@
    function draw () {
      if (isInitialized === false) { return }
 
-     if (tabStatus === 'going down') {
-       if (transitionPosition.y < hiddenPosition.y) {
-         transitionPosition.y = transitionPosition.y + 20
-         thisObject.container.frame.position.y = transitionPosition.y
-       } else {
-         thisObject.container.frame.position.y = hiddenPosition.y
-         tabStatus = 'hidden'
-       }
-     }
-     if (tabStatus === 'going up') {
-       if (transitionPosition.y > visiblePosition.y) {
-         transitionPosition.y = transitionPosition.y - 20
-         thisObject.container.frame.position.y = transitionPosition.y
-       } else {
-         thisObject.container.frame.position.y = visiblePosition.y
-         tabStatus = 'visible'
-       }
-     }
-
      thisObject.container.frame.draw(false, false, true)
 
      for (let i = 0; i < visibleProductCards.length; i++) {
        visibleProductCards[i].draw()
      }
+
+     panelTabButton.draw()
    }
  }

Panels/TimeControlPanel.js

@@ -17,6 +17,7 @@ function newTimeControlPanel () {
   thisObject.container.frame.containerName = 'Current Datetime'
 
   let timePeriod
+  let panelTabButton
 
   return thisObject
 
@@ -31,6 +32,13 @@ function newTimeControlPanel () {
 
     thisObject.container.frame.position = position
 
+    panelTabButton = newPanelTabButton()
+    panelTabButton.parentContainer = thisObject.container
+    panelTabButton.container.frame.parentFrame = thisObject.container.frame
+    panelTabButton.initialize()
+
+    /* The code from here down might be out of date. */
+
     let buttonPosition
 
     let buttonNames = ['Fast Backwards', 'Play Backwards', 'Step Backwards', 'Pause', 'Step Forward', 'Play Forward', 'Fast Forward']
@@ -68,6 +76,9 @@ function newTimeControlPanel () {
   function getContainer (point) {
     let container
 
+    container = panelTabButton.getContainer(point)
+    if (container !== undefined) { return container }
+
         /* First we check if thisObject point is inside thisObject space. */
 
     if (thisObject.container.frame.isThisPointHere(point, true) === true) {
@@ -95,8 +106,8 @@ function newTimeControlPanel () {
 
   function draw () {
     thisObject.container.frame.draw(false, false, true)
-
     thisObject.datetimeDisplay.draw()
+    panelTabButton.draw()
   }
 
   function drawTimeDisplay () {