widgets/public/scripts/commit-button-example.html at 13de63f388158f18e68c8b1dce01ea56ef13ad25 · bosonprotocol/widgets · GitHub

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <script src="./zoid/zoid.min.js"></script>
  <script src="../../scripts/boson-zoid.js"></script>
  <script src="../../scripts/commit-button.js"></script>
  <style>
    html,
    body {
      min-height: 100vh;
      overflow-y: hidden;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <h3>Commit button example</h3>

  <div id="container"></div>

  <script>
    let disabled = false;
    let context = "iframe";
    let layout = "horizontal";
    const isProd =
      window.location.href.startsWith("https://widgets.bosonprotocol.io") ||
      window.location.href.startsWith(
        "https://widgets-production.on-fleek.app"
      );
    const prodData = {
      configId: "production-137-0",
      productUuid: "2540b-1cf7-26e7-ddaf-4de1dcf7ebc",
      sellerId: "2"
    };
    const argsThatDependOnEnv = {
      configId: "testing-80002-0",
      productUuid: "f4bb0f8-2f2c-d151-2801-0d3c6250461",
      sellerId: "4",
      ...(isProd && prodData)
    };
    const buttonStyle = {
      minWidth: "100px",
      minHeight: "200px",
      shape: "rounded",
      color: "white",
      layout
    };
    let justifyContent = "flex-start";
    const containerStyle = {
      justifyContent,
      alignItems: "initial"
    };
    const instance = CommitButton({
      ...argsThatDependOnEnv,
      context: "iframe",
      modalMargin: "2%",
      lookAndFeel: "modal",
      disabled,
      buttonStyle: {
        ...buttonStyle,
        border: "1px solid red" // ignored on purpose, we dont allow that
      },
      containerStyle,
      onGetDimensions: function (dimensions) {
        const { offsetHeight, offsetWidth } = dimensions;
        document.querySelector("#container").style.height = `${offsetHeight}px`;
        document.querySelector(
          "#container"
        ).style.minWidth = `${offsetWidth}px`;
      },
      onClickCommitButton: function () {
        document.querySelector("body").style.overflow = "hidden";
        console.log("you clicked on the commit button!");
      },
      onCloseCommitButton: function () {
        console.log("commit button widget was closed!");
      }
    });

    instance.render("#container");
    function toggleDisableState() {
      disabled = !disabled;
      instance.updateProps({ disabled });
    }
    function toggleContextState() {
      context = context === "iframe" ? "popup" : "iframe";
      instance.updateProps({ context });
    }
    function toggleLayoutState() {
      layout = layout === "vertical" ? "horizontal" : "vertical";
      instance.updateProps({ buttonStyle: { ...buttonStyle, layout } });
    }
    function toggleJustifyContentState() {
      justifyContent =
        justifyContent === "flex-start" ? "flex-end" : "flex-start";
      instance.updateProps({
        containerStyle: { ...containerStyle, justifyContent }
      });
    }
    function responsiveLayout(...args) {
      const [resizeObserverEntry] = args;
      const {
        borderBoxSize,
        contentBoxSize,
        contentRect,
        devicePixelContentBoxSize,
        target
      } = resizeObserverEntry[0];
      if (contentRect?.width < 400) {
        layout = "vertical";
        instance.updateProps({ buttonStyle: { ...buttonStyle, layout } });
      }
    }

    new ResizeObserver(responsiveLayout).observe(
      document.querySelector("#container")
    );
  </script>
  <button onclick="toggleDisableState()" style="margin: 20px">
    toggle disable state
  </button>
  <button onclick="toggleContextState()" style="margin: 20px">
    toggle context state
  </button>
  <button onclick="toggleLayoutState()" style="margin: 20px">
    toggle layout state
  </button>
  <button onclick="toggleJustifyContentState()" style="margin: 20px">
    toggle justify content state
  </button>
</body>