Zwibbler Reactive API Example

Example of Zwibbler's Reactive API

by smhanov

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<script src="http://zwibbler.com/zwibbler-demo.js"></script>
<zwibbler 
          showToolbar="false"
          pageView="true"
          defaultPaperSize="letter landscape">
  <div class="tools">
    <div>
      <button tool z-on:click="usePickTool()" title="Select"
              z-class="{selected:getCurrentTool()=='pick'}">
        <i class="fas fa-mouse-pointer"></i>
      </button>
      <button tool z-on:click="useBrushTool()" title="Draw"
              z-class="{selected:getCurrentTool()=='brush'}">
        <i class="fas fa-pencil-alt"></i>
      </button>
      <button tool z-click="useLineTool()" title="Lines"
              z-class="{selected:getCurrentTool()=='line'}">
        <i class="fas fa-pencil-ruler"></i>
      </button>
      <button tool z-click="useRectangleTool()" title="Rectangle"
              z-class="{selected:getCurrentTool()=='rectangle'}">
        <i class="fas fa-square"></i>
      </button>
      <button tool z-click="useCircleTool()" title="Circle"
              z-class="{selected:getCurrentTool()=='circle'}">
        <i class="fas fa-circle"></i>
      </button>
      <button tool z-click="useTextTool()" title="Text"
              z-class="{selected:getCurrentTool()=='text'}">
        <i class="fas fa-font"></i>
      </button>
      <button tool z-click="insertImage()" title="Insert image">
        <i class="fas fa-image"></i>
      </button>
      <button tool z-click="cut()" title="Cut">
        <i class="fas fa-cut"></i>
      </button>
      <button tool z-click="copy()" title="Copy">
        <i class="fas fa-copy"></i>
      </button>
      <button tool z-click="paste()" title="Paste">
        <i class="fas fa-paste"></i>
      </button>
      <button tool z-click="undo()" z-disabled="!canUndo()">
        <i class="fas fa-undo"></i>
      </button>
      <button tool z-click="redo()" z-disabled="!canRedo()">
        <i class="fas...

CSS

zwibbler {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-flow: row nowrap;
}

.tools {
  background: #f5f5f5;
  flex: 0 0 200px;
  display:flex;
  flex-flow: column nowrap;
  overflow-y: scroll;
  padding: 10px;
  font-family: Ubuntu;
}

[z-canvas] {
  flex: 1 1 auto;
}

.tools button {
  font-family: inherit;
  font-size: 100%;
  padding: 5px;
  display: block;
  background-color: white;
  border: none;
  border-radius: 2px;
  border-bottom: 2px solid #ddd;
  width: 100%;
}

.tools button[tool] {
  display: inline-block;
  width: 60px;
  height: 60px;
  font-size: 30px;
}

.tools button.option {
  border: 0;
  padding: 10px;
  border-radius: 3px;
  background: transparent;
  text-align: left;
}

.tools button.selected {
  background: #dbe6d7;
}

.tools button.hover {
  background: #ddd;
}

.tools hr {
  border: none;
  border-top: 1px solid #ccc;
}

.tools select {
  width: 100%;
}

[swatch] {
  border: 1px solid black;
  display: inline-block;
  height: 2em;
  width: 4em;
  vertical-align:middle;
  margin-right: 10px;
}

.colour-picker {
  padding: 10px 0;
}

.pages {
  flex: 0 0 100px;
  background: #ccc;
  display: flex;
  flex-flow: row nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  align-items: center;
}

.page {
  border: 3px solid transparent;
  margin: 5px;
  display: inline-block;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

.page.selected {
  border: 3px solid orange;
}

[z-popup] {
  background: #ccc;
  padding: 10px;
  box-shadow: 2px 2px 2px rgba(0,0,0.2);
}