data/shareInput.html

<!--
 * Copyright (C) 2016 Ericsson AB. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->

<!DOCTYPE html>
<html>
<head>
  <title>Share input</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="../resources/main.css">
  <link rel="icon" href="../resources/favicon.ico">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.1/es6-promise.min.js"></script>
  <script type="text/javascript" src="https://get.cct.ericsson.net/latest/cct.js"></script>
  <script type="text/javascript" src="../exampleUtils.js"></script>
  <style>
  table {
    float: left;
    margin-left: 20px;
  }
  </style>
</head>
<body>
  <header></header>
  <main>
    <section>
      <div class="about">
        <h2>Share Input example</h2>
        This example shows how to share form states with a peer. Once connected to the room, the forms will automatically share data with <a href="https://get.cct.ericsson.net/latest/docs/reference/RoomState.html">Room states</a>
      </div>
      <div class="peer-link">
        <h3 class="peer-link-title"></h3>
        <input class="peer-link-input" type="url" value="" size="55">
      </div>
    </section>
    <form id="form">
      <table>
        <tr>
          <td>Name: </td>
          <td><input type="text" cct-binding="name"></td>
        </tr>
        <tr>
          <td>Password: </td>
          <td><input type="password" cct-binding="password"></td>
        </tr>
        <tr>
          <td>Email:</td>
          <td><input type="email" cct-binding="email"></td>
        </tr>
        <tr>
          <td>Number: </td>
          <td><input type="number" cct-binding="number"></td>
        </tr>
        <tr>
          <td>Date: </td>
          <td><input type="date" cct-binding="date"></td>
        </tr>
        <tr>
          <td>Comment: </td>
          <td><textarea cct-binding="textarea"></textarea></td>
        </tr>
      </table>
      <table>
        <tr>
          <td>Color: </td>
          <td><input type="color" value="#FF0000" cct-binding="color"></td>
        </tr>
        <tr>
          <td>Bonus: </td>
          <td><input type="checkbox" cct-binding="checkbox"></td>
        </tr>
        <tr>
          <td>Range: </td>
          <td><input type="range" cct-binding="range"></td>
        </tr>
        <tr>
          <td>Preference:</td>
        </tr>
        <tr>
          <td>
            <input type="radio" name="taste" value="strawberry" checked cct-binding="taste1"> Strawberry<br>
            <input type="radio" name="taste" value="blueberry" checked cct-binding="taste2"> Blueberry<br>
            <input type="radio" name="taste" value="blackberry" checked cct-binding="taste3"> Blackberry<br>
          </td>
        </tr>
      </table>
    </form>
    <footer></footer>
  </main>
  <script>
'use strict'

cct.log.setLogLevel('example', cct.log.ALL)
cct.log.color = true

var el = {
  form: document.getElementById('form'),
}

var client = new cct.Client()

PeerConnecter.clientInRoom(client).then(function (connecter) {
  var state = connecter.room.state('test')
  var elements = el.form.querySelectorAll('[cct-binding]')

  Array.prototype.forEach.call(elements, function (element) {
    var key = element.getAttribute('cct-binding')

    function updateInput(value) {
      cct.log.debug('example', 'change: ' + key + ' = ' + value)
      if (!value && element.type !== 'checkbox') {
        return
      }
      if (element.type === 'checkbox' || element.type === 'radio') {
        element.checked = value
      } else {
        element.value = value
      }
      if (element.type === 'input') {
        var event = new CustomEvent('input', {bubbles: true})
        element.dispatchEvent(event)
      } else {
        var event = new CustomEvent('change', {bubbles: true})
        element.dispatchEvent(event)
      }
    }

    updateInput(state.get(key))
    state.on('update:' + key, updateInput)

    if (element.type === 'checkbox' || element.type === 'radio') {
      element.addEventListener('change', function (event) {
        if (event instanceof CustomEvent) {
          return
        }
        state.set(key, element.checked)
      })
    } else {
      var timeout = 0
      element.addEventListener('input', function (event) {
        if (event instanceof CustomEvent) {
          return
        }
        if (timeout) {
          clearTimeout(timeout)
        }
        timeout = setTimeout(function () {
          state.set(key, element.value)
        }, 500)
      })
    }
  })
})
  </script>
<body>
<html>