Editor Metadata Section Example

This example displays the history of the content item being edited.

class HistoryElement extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          margin: 0;
          padding: 0;
          width: 100%
        }
        h1 {
          color: #9c9c9c;
          font-size: 24px;
          font-weight: 300;
        }
        .entry {
          width: 100%;
          display: flex;
          flex-direction: row;
        }
        .state {
          width: 25%
        }
        .date {
          width: 42%;
        }
        .author {
          width: 33%;
        }
      </style>

      <h1>History</h1>
      <div class="entries"></div>
    `;
  }

  HistoryProto.attachedCallback = function() {
    this.fetchHistory();
    this.cueInterface.editor.addContentWatcher(function () {
      this.fetchHistory();
    }.bind(this));
  };

  HistoryProto.fetchHistory = function() {
    var historyLinks = this.cueInterface.editor.getContent().links['http://www.vizrt.com/types/relation/log'];
    if (historyLinks && historyLinks.length > 0) {
      var historyLink = historyLinks[0];
      $.ajax({
        url: historyLink.uri.toString(),
        type: 'GET',
        accept: historyLink.mimeType.format(),
        beforeSend: function (xhr) {
          xhr.setRequestHeader('Authorization', this.cueInterface.escenic.credentials);
        }.bind(this),
        success: function (result) {
          this.displayHistory(result);
        }.bind(this),
        error: function (request, error)  {
          console.error(error);
        }
      });
    }
  };

  HistoryProto.displayHistory = function(document) {
    var entriesDiv = panelShadowRoot.querySelector('.entries');
    var parsedEntries = this.parseDocument(document);
    entriesDiv.innerHTML = '';
    parsedEntries.forEach(function (entry) {
      entriesDiv.innerHTML += '<div class="entry">' +
          '<span class="state">' + entry.state + '</span>' +
          '<span class="date">' + entry.updated.format('lll') + '</span>' +
          '<span class="author">' + entry.author + '</span>' +
          '</div>';
    });
  };

  HistoryProto.parseDocument = function(document) {
    var resolver = function (namespace) {
      switch (namespace) {
        case 'app':
          return 'http://www.w3.org/2007/app';
        case 'atom':
          return 'http://www.w3.org/2005/Atom';
        case 'vaext':
          return 'http://www.vizrt.com/atom-ext';
      }
    };

    var entries = document.evaluate('//atom:entry', document, resolver);
    var entry = entries.iterateNext();
    var parsedEntries = [];
    while (entry) {
      var updated = document.evaluate('./atom:updated', entry, resolver).iterateNext().firstChild.nodeValue;
      var state = document.evaluate('./app:control/vaext:state', entry, resolver).iterateNext().attributes.getNamedItem('name').value;
      var author = document.evaluate('./atom:author/atom:name', entry, resolver).iterateNext().firstChild.nodeValue;
      parsedEntries.push({
        updated: moment(updated, moment.ISO_8601, true),
        state: state,
        author: author
      });
      entry = entries.iterateNext();
    }
    return parsedEntries;
  };

document.registerElement('content-history', {
      prototype: HistoryProto
    });

/**
 * Creating the icon (if required)
 */
var HistoryIconProto = Object.create(HTMLElement.prototype);
  var iconShadowRoot;

    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          margin: 0;
          display: block;
        }
        .icon:before {
          font: 16px 'cf';
          font-style: normal;
          font-weight: normal;
          color: #444444;
          content: '\\e8b9';
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .icon.active:before {
          color: #09ab00;
        }
      </style>
      <span class="icon"></span>
    `;
  }

  HistoryIconProto.attachedCallback = function() {
    this.activeStateChanged(this.cueInterface.isActive());
    this.cueInterface.addActiveWatcher(function (active) {
      this.activeStateChanged(active);
    }.bind(this));
  };

  HistoryIconProto.activeStateChanged = function(active) {
    var icon = iconShadowRoot.querySelector('.icon');
    if (active) {
      $(icon).addClass('active');
    }
    else {
      $(icon).removeClass('active');
    }
  };

document.registerElement('content-history-icon', {
      prototype: HistoryIconProto
    });