samples/optimizely-audiences/index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Optimizely audiences</title>

  <link rel="stylesheet" href="https://contentful.github.io/ui-extensions-sdk/cf-extension.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css">

  <style>
    body {
      margin: 0;
      background: none;
      height: 130px;
    }

    select {
      width: 100%;
    }

    .optimizely-logo {
      height: 3em;
      background: url(https://a.mtstatic.com/@public/production/site_6806/1461019488-logo.svg) no-repeat;
      background-position: top -1em left -0px;
      background-size: auto 4em;
    }

    .select2-choices {
      min-height: 150px;
      max-height: 150px;
      overflow-y: auto;
    }

    .cf-field-error,
    .cf-form-field {
      display: none;
    }
  </style>

  <script src="https://unpkg.com/contentful-ui-extensions-sdk@3"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>

<body>
  <p class="loading">Loading ...</p>
  <p class="cf-field-error"></p>

  <div class="cf-form-field">
    <div class="select-container"></div>
    <div class="cf-form-hint">
      Please select the target audience for this content.
    </div>
    <div class="optimizely-logo"></div>
  </div>


  <script>
    window.contentfulExtension.init(function (api) {
      api.window.startAutoResizer();

      var detachValueChangeHandler;
      window.addEventListener('onbeforeunload', unloadHandler);

      $.ajax({
        type: 'GET',
        beforeSend: function (request) {
          // Read-only api token for Optimizely test account.
          request.setRequestHeader('Authorization', 'Bearer ' + api.parameters.instance.token);
        },
        url: 'https://api.optimizely.com/v2/audiences?project_id=' + api.parameters.instance.projectId,
        success: function (response) {

          // Filter archived audiences.
          var audiences = response.filter(function (item) {
            return !item.archived;
          })

          // Hide loader.
          document.querySelector('.loading').style.display = 'none';
          // Show form.
          document.querySelector('.cf-form-field').style.display = 'block';

          createDropDown(audiences);
        },
        error: function (response) {
          showError(response.status + ' ' + response.statusText + ' - ' + response.responseJSON.message);
        }
      });

      function showError(msg) {
        document.querySelector('.loading').style.display = 'none';
        var errorEl = document.querySelector('.cf-field-error');
        errorEl.style.display = 'block';

        errorEl.appendChild(document.createTextNode(msg));
        document.querySelector('.cf-form-field').style.display = 'none';
      }

      function createDropDown(data) {

        // Map structure of data so it can seed the dropdown.
        var dropdownData = data.map(function (data) {
          return { id: data.id, text: data.name };
        });

        var selectEl = document.createElement('select');
        selectEl.id = 'audiences-select';
        selectEl.setAttribute('multiple', 'multiple');
        document.querySelector('.select-container').append(selectEl);
        var $select2 = $('#audiences-select').select2({
          placeholder: 'Select audiences',
          data: dropdownData
        });

        $select2.on('change', function () {
          api.field.setValue(getSelection());
        });

        detachValueChangeHandler = api.field.onValueChanged(function () {
          var value = api.field.getValue();
          if (value.join(',') !== getSelection().join(',')) {
            $select2.val(value);
            $select2.trigger('change');
          }
        })

        function getSelection() {
          return $select2.select2('data').map(function (item) {
            return item.id;
          });
        }
      }
      // Event handler for window unload.
      function unloadHandler() {
        window.removeEventListener('onbeforeunload', unloadHandler);
        if (detachValueChangeHandler) {
          detachValueChangeHandler();
        }
      }

    });

  </script>
</body>

</html>