Home

Awesome

preact-touchable-dock

npm version

A touch and drag and droppable dock for single page web applications.

MobileSimulated Mobile

Installation

$ npm i --save preact-touchable-dock
# or
$ yarn add preact-touchable-dock

Usage

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Touchable Dock Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://unpkg.com/preact@10.4.6/dist/preact.min.js"></script>
    <script src="https://unpkg.com/htm@3.0.4/dist/htm.js"></script>
    <script src="https://unpkg.com/jss/dist/jss.min.js"></script>
    <script src="https://unpkg.com/jss-preset-default/dist/jss-preset-default.min.js"></script>
    
    <script src="./TouchableDock.min.js"></script>
    <script type="module">
      const { h, Component, render, createRef } = preact;
      const htm = window.htm;

      const html = htm.bind(h);

      class ControllableDock extends Component {
        constructor(props) {
          super(props);

          this.dock = createRef();  
          this.state = {
            stage: "hide"
          }
        }

        render() {
          const { stage } = this.state;
          return html`
            <h1>Hello World</h1>
            <p>
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <button onClick=${() => this.dock.current.setStage("hide")}>hide</button>
            <button onClick=${() => this.dock.current.setStage("hint")}>hint</button>
            <button onClick=${() => this.dock.current.setStage("full")}>full</button>
            <${TouchableDock}
              ref=${this.dock}
              onClose=${() => console.log("Dock was closed")}
              onClick=${() => console.log("Dock was clicked")}
              style=${{
                borderTop: "5px solid green",
                backgroundColor: "white"
              }}>
              <h2>This is a dock text</h2> 
            <//>
          `;
        }
      }

      render(html`<${ControllableDock} />`, document.body);
  </script>
  </head>
  <body>
  </body>
</html>

Notes

Contributing

$ git clone git@github.com:TimDaub/preact-touchable-dock.git
$ cd preact-touchable-dock
$ npm i
$ npm run dev

Changelog

0.3.5

0.3.4

0.3.3

0.3.2

0.3.1

0.3.0

0.2.2

0.2.1

0.2.0

0.1.0

0.0.1