Skip to content

Widgets: Scroller

Let's explore another feature of a widget by adding some more content.

src/widgets/testing-features/index.ejs.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<h2><%= locals.myHeader %></h2>
<h5><%= locals.myTemplateArg %></h5>
<div class="border rounded d-inline-block p-1 mr-2">
  Text
  <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 class="content"><p>Hello World!</p></div>
<div class="arrow arrow-left"><i class="fas fa-chevron-circle-left"></i></div>
<div class="arrow arrow-right"><i class="fas fa-chevron-circle-right"></i></div>
<div class="arrow arrow-up"><i class="fas fa-chevron-circle-up"></i></div>
<div class="arrow arrow-down"><i class="fas fa-chevron-circle-down"></i></div>

src/widgets/testing-features/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { Widget } from "@codecoupler/cc-ui";
import template from "./index.ejs.html";
import styles from "./index.module.css";
export default class extends Widget {
  myHeader = "JS Widget Base";
  async init() {
    this.buildStructure();
    this.addStyles();
    this.attachHandler();
  }
  buildStructure() {
    this.env.$element.html(
      template({
        myHeader: this.myHeader,
        myTemplateArg: "No Arguments here"
      })
    );
  }
  addStyles() {
    this.env.$element.addClass(styles.widget);
  }
  attachHandler() {
    this.env.$element.find("[data-role=text-plus]").on("click", () => {
      this.env.$element
        .find("div.content")
        .append(
          "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</p>"
        );
    });
    this.env.$element.find("[data-role=text-minus]").on("click", () => {
      this.env.$element.find("div.content p").last().remove();
    });
  }
}

Now click on the plus button multiple times. You will see the down arrow will disapear because your widget is now bigger as it's container. You can now scroll down and a scrollbar will appear.

All this logic will be done automatically. Because of not using the browser scrollbar you can use always the full area of the container for your widget.