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 });