Skip to content

Widget: Scroller

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

What are we learning here?

  • Each widget automatically takes care of scrolling the content

We add some buttons in our content div:

src/demo/apps/widget-basics/content.ejs.html

 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
<h2><%= locals.myHeader %></h2>
<div class="mt-2 card">
  <div class="card-header">Loading Components</div>
  <div class="card-body"><div data-role="stage"></div></div>
</div>
<div class="mt-2 card">
  <div class="card-header">Pass Options</div>
  <div class="card-body">
    Argument 1: <span data-role="arg1"><%= locals.Argument1 %></span><br />
    Argument 2: <span data-role="arg2"><%= locals.Argument2 %></span>
  </div>
</div>
<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>
<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>

And attach some handlers:

src/demo/apps/widget-basics/content.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
35
36
import { Widget } from "@codecoupler/cc-ui";
import template from "./content.ejs.html";
import LoadingComponents from "../../widgets/loading-components";
import styles from "./content.module.css";
export default class extends Widget {
  myHeader = "JS Widget Basics";
  static defaults = {
    myWidgetArg1: "Default 1",
    myWidgetArg2: "Default 2"
  };
  async start() {
    this.injectTemplate(template({
      myHeader: this.myHeader,
      Argument1: this.options.myWidgetArg1,
      Argument2: this.options.myWidgetArg2
    }));
    await this.registerStage(this.element.find("[data-role=stage]")).load(
      LoadingComponents
    );
    this.on("changed.options", () => {
      this.element.find("[data-role=arg1]").text(this.options.myWidgetArg1);
    });
    this.element.addClass(styles.widget);
    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();
    });
  }
  injectTemplate(tpl) {
    this.element.html(tpl);
  }
}

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 width of a widget.