Skip to content

Canvas: No Scrolling

Now we introduce another type of a base component, the Canvas. As you have seen we always used the type Widget to create a base for our interface with:

class extends Widget {]

We will use two examples to illustrate the difference to a component based on the Canvas class with:

class extends Canvas {]

The first and most important difference is the lack of scroll functionality. A canvas is just a simple non-scrollable and not overflowing container.

What are we learning here?

  • Canvas components do not have a scroller

We will create a new HTML template, a new canvas component and a new application:

src/demo/apps/canvas-vs-widget-scroll/widget.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<h2>JS Canvas Unusable (No Scroll)</h2>
<div class="mt-2 card">
   <div class="card-header">
      Adding Content
      <button class="btn btn-xs btn-success" data-role="text-plus">
      <i class="fas fa-plus"></i>
      </button>
      <button class="btn btn-xs btn-danger" data-role="text-minus">
      <i class="fas fa-minus"></i>
      </button>
   </div>
   <div data-role="content" class="card-body"></div>
</div>

src/demo/apps/canvas-vs-widget-scroll/widget.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { Canvas } from "@codecoupler/cc-ui";
import template from "./content.html";
export default class extends Canvas {
   async start() {
      this.element.css("padding","20px");
      this.element.html(template);
      let contentElement = this.element.find("[data-role=content]");
      let addText = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr";
      this.element.find("[data-role=text-plus]").on("click", () => {
         contentElement.append(`<p>${addText}</p>`);
      });
      this.element.find("[data-role=text-minus]").on("click", () => {
         contentElement.find("p").last().remove();
      });
   }
}

src/demo/apps/canvas-vs-widget-scroll/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Application } from "@codecoupler/cc-ui";
import ChildComponent from "./content.js";
export default class extends Application {
   static defaults = {
      "@codecoupler": {
         panel: {
            panelSize: "640 400",
            headerTitle: "Test Canvas Features"
         }
      }
   };
   async start() {
      await this.stage.load(ChildComponent);
   }
}

We load the new application in our system.js file (just by replacing the previous one):

src/system.js

1
2
3
4
5
6
7
import { Component } from "@codecoupler/cc-ui";
import TestApp from "./demo/apps/canvas-vs-widget-scroll";
export default class extends Component {
  async boot() {
    await this.stage.load(TestApp);
  }
}

You see now an application with button to add or remove content like before. But if you add text into the content area you cannot scroll.