solid-panes
Version:
Solid-compatible Panes: applets and views for the mashlib and databrowser
1,278 lines (1,026 loc) • 93.3 kB
JavaScript
"use strict";
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
/* -*- coding: utf-8-dos -*-
Outline Mode Manager
*/
var panes = require('pane-registry');
var $rdf = require('rdflib');
var YAHOO = require('./dragDrop.js');
var outlineIcons = require('./outlineIcons.js');
var UserInput = require('./userInput.js');
var UI = require('solid-ui');
var queryByExample = require('./queryByExample.js');
/* global alert XPathResult sourceWidget */
// XPathResult?
// const iconHeight = '24px'
module.exports = function (context) {
var dom = context.dom;
this.document = context.dom;
this.outlineIcons = outlineIcons;
this.labeller = this.labeller || {};
this.labeller.LanguagePreference = ''; // for now
var outline = this; // Kenny: do we need this?
var thisOutline = this;
var selection = [];
this.selection = selection;
this.ancestor = UI.utils.ancestor; // make available as outline.ancestor in callbacks
this.sparql = UI.rdf.UpdateManager;
this.kb = UI.store;
var kb = UI.store;
var sf = UI.store.fetcher;
dom.outline = this;
this.qs = new queryByExample.QuerySource(); // Track queries in queryByExample
// var selection = [] // Array of statements which have been selected
// this.focusTd // the <td> that is being observed
this.UserInput = new UserInput(this);
this.clipboardAddress = 'tabulator:clipboard'; // Weird
this.UserInput.clipboardInit(this.clipboardAddress);
var outlineElement = this.outlineElement;
this.init = function () {
var table = getOutlineContainer();
table.outline = this;
};
/** benchmark a function **/
benchmark.lastkbsize = 0;
function benchmark(f) {
var args = [];
for (var i = arguments.length - 1; i > 0; i--) {
args[i - 1] = arguments[i];
} // UI.log.debug('BENCHMARK: args=' + args.join());
var begin = new Date().getTime();
var returnValue = f.apply(f, args);
var end = new Date().getTime();
UI.log.info('BENCHMARK: kb delta: ' + (kb.statements.length - benchmark.lastkbsize) + ', time elapsed for ' + f + ' was ' + (end - begin) + 'ms');
benchmark.lastkbsize = kb.statements.length;
return returnValue;
} // benchmark
// / ////////////////////// Representing data
// Represent an object in summary form as a table cell
function appendRemoveIcon(node, subject, removeNode) {
var image = UI.utils.AJARImage(outlineIcons.src.icon_remove_node, 'remove', undefined, dom);
image.addEventListener('click', removeNodeIconMouseDownListener); // image.setAttribute('align', 'right') Causes icon to be moved down
image.node = removeNode;
image.setAttribute('about', subject.toNT());
image.style.marginLeft = '5px';
image.style.marginRight = '10px'; // image.style.border='solid #777 1px';
node.appendChild(image);
return image;
}
this.appendAccessIcons = function (kb, node, obj) {
if (obj.termType !== 'NamedNode') return;
var uris = kb.uris(obj);
uris.sort();
var last = null;
for (var i = 0; i < uris.length; i++) {
if (uris[i] === last) continue;
last = uris[i];
thisOutline.appendAccessIcon(node, last);
}
};
this.appendAccessIcon = function (node, uri) {
if (!uri) return '';
var docuri = UI.rdf.uri.docpart(uri);
if (docuri.slice(0, 5) !== 'http:') return '';
var state = sf.getState(docuri);
var icon, alt, listener;
switch (state) {
case 'unrequested':
icon = outlineIcons.src.icon_unrequested;
alt = 'fetch';
listener = unrequestedIconMouseDownListener;
break;
case 'requested':
icon = outlineIcons.src.icon_requested;
alt = 'fetching';
listener = failedIconMouseDownListener; // new: can retry yello blob
break;
case 'fetched':
icon = outlineIcons.src.icon_fetched;
listener = fetchedIconMouseDownListener;
alt = 'loaded';
break;
case 'failed':
icon = outlineIcons.src.icon_failed;
alt = 'failed';
listener = failedIconMouseDownListener;
break;
case 'unpermitted':
icon = outlineIcons.src.icon_failed;
listener = failedIconMouseDownListener;
alt = 'no perm';
break;
case 'unfetchable':
icon = outlineIcons.src.icon_failed;
listener = failedIconMouseDownListener;
alt = 'cannot fetch';
break;
default:
UI.log.error('?? state = ' + state);
break;
} // switch
var img = UI.utils.AJARImage(icon, alt, outlineIcons.tooltips[icon].replace(/[Tt]his resource/, docuri), dom);
img.setAttribute('uri', uri);
img.addEventListener('click', listener); // @@ seemed to be missing 2017-08
addButtonCallbacks(img, docuri);
node.appendChild(img);
return img;
}; // appendAccessIcon
// Six different Creative Commons Licenses:
// 1. http://creativecommons.org/licenses/by-nc-nd/3.0/
// 2. http://creativecommons.org/licenses/by-nc-sa/3.0/
// 3. http://creativecommons.org/licenses/by-nc/3.0/
// 4. http://creativecommons.org/licenses/by-nd/3.0/
// 5. http://creativecommons.org/licenses/by-sa/3.0/
// 6. http://creativecommons.org/licenses/by/3.0/
/** make the td for an object (grammatical object)
* @param obj - an RDF term
* @param view - a VIEW function (rather than a bool asImage)
**/
this.outlineObjectTD = function outlineObjectTD(obj, view, deleteNode, statement) {
var td = dom.createElement('td');
td.setAttribute('style', 'margin: 0.2em; border: none; padding: 0; vertical-align: top;');
td.setAttribute('notSelectable', 'false');
var theClass = 'obj'; // check the IPR on the data. Ok if there is any checked license which is one the document has.
if (statement && statement.why) {
if (UI.licenceOptions && UI.licenceOptions.checkLicence()) {
theClass += ' licOkay'; // flag as light green etc .licOkay {background-color: #dfd}
}
} // set about and put 'expand' icon
if (obj.termType === 'NamedNode' || obj.termType === 'BlankNode' || obj.termType === 'Literal' && obj.value.slice && (obj.value.slice(0, 6) === 'ftp://' || obj.value.slice(0, 8) === 'https://' || obj.value.slice(0, 7) === 'http://')) {
td.setAttribute('about', obj.toNT());
td.appendChild(UI.utils.AJARImage(UI.icons.originalIconBase + 'tbl-expand-trans.png', 'expand', undefined, dom)).addEventListener('click', expandMouseDownListener);
}
td.setAttribute('class', theClass); // this is how you find an object
// @@ TAKE CSS OUT OF STYLE SHEET
if (kb.whether(obj, UI.ns.rdf('type'), UI.ns.link('Request'))) {
td.className = 'undetermined';
} // @@? why-timbl
if (!view) {
// view should be a function pointer
view = viewAsBoringDefault;
}
td.appendChild(view(obj));
if (deleteNode) {
appendRemoveIcon(td, obj, deleteNode);
}
try {// new YAHOO.util.DDExternalProxy(td)
} catch (e) {
UI.log.error('YAHOO Drag and drop not supported:\n' + e);
} // set DOM methods
td.tabulatorSelect = function () {
setSelected(this, true);
};
td.tabulatorDeselect = function () {
setSelected(this, false);
}; // td.appendChild( iconBox.construct(document.createTextNode('bla')) );
// Create an inquiry icon if there is proof about this triple
if (statement) {
var oneStatementFormula = new UI.rdf.IndexedFormula();
oneStatementFormula.statements.push(statement); // st.asFormula()
// The following works because Formula.hashString works fine for
// one statement formula
var reasons = kb.each(oneStatementFormula, kb.sym('http://dig.csail.mit.edu/TAMI/2007/amord/tms#justification'));
if (reasons.length) {
var inquirySpan = dom.createElement('span');
if (reasons.length > 1) {
inquirySpan.innerHTML = ' × ' + reasons.length;
}
inquirySpan.setAttribute('class', 'inquiry');
inquirySpan.insertBefore(UI.utils.AJARImage(outlineIcons.src.icon_display_reasons, 'explain', undefined, dom), inquirySpan.firstChild);
td.appendChild(inquirySpan);
}
}
td.addEventListener('click', selectableTDClickListener);
return td;
}; // outlineObjectTD
this.outlinePredicateTD = function outlinePredicateTD(predicate, newTr, inverse, internal) {
var predicateTD = dom.createElement('TD');
predicateTD.setAttribute('about', predicate.toNT());
predicateTD.setAttribute('class', internal ? 'pred internal' : 'pred');
var lab;
switch (predicate.termType) {
case 'BlankNode':
// TBD
predicateTD.className = 'undetermined';
break;
case 'NamedNode':
lab = UI.utils.predicateLabelForXML(predicate, inverse);
break;
case 'Collection':
// some choices of predicate
lab = UI.utils.predicateLabelForXML(predicate.elements[0], inverse);
}
lab = lab.slice(0, 1).toUpperCase() + lab.slice(1); // if (kb.statementsMatching(predicate,rdf('type'), UI.ns.link('Request')).length) predicateTD.className='undetermined';
var labelTD = dom.createElement('TD');
labelTD.setAttribute('style', 'margin: 0.2em; border: none; padding: 0; vertical-align: top;');
labelTD.setAttribute('notSelectable', 'true');
labelTD.appendChild(dom.createTextNode(lab));
predicateTD.appendChild(labelTD);
labelTD.style.width = '100%';
predicateTD.appendChild(termWidget.construct(dom)); // termWidget is global???
for (var w in outlineIcons.termWidgets) {
if (!newTr || !newTr.AJAR_statement) break; // case for TBD as predicate
// alert(Icon.termWidgets[w]+' '+Icon.termWidgets[w].filter)
if (outlineIcons.termWidgets[w].filter && outlineIcons.termWidgets[w].filter(newTr.AJAR_statement, 'pred', inverse)) {
termWidget.addIcon(predicateTD, outlineIcons.termWidgets[w]);
}
}
try {// new YAHOO.util.DDExternalProxy(predicateTD)
} catch (e) {
UI.log.error('drag and drop not supported');
} // set DOM methods
predicateTD.tabulatorSelect = function () {
setSelected(this, true);
};
predicateTD.tabulatorDeselect = function () {
setSelected(this, false);
};
predicateTD.addEventListener('click', selectableTDClickListener);
return predicateTD;
}; // outlinePredicateTD
/**
* Render Tabbed set of home app panes
*
* @param {Object} [options] A set of options you can provide
* @param {string} [options.selectedTab] To open a specific dashboard pane
* @param {Function} [options.onClose] If given, will present an X for the dashboard, and call this method when clicked
* @returns Promise<{Element}> - the div that holds the dashboard
*/
function globalAppTabs() {
return _globalAppTabs.apply(this, arguments);
}
function _globalAppTabs() {
_globalAppTabs = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var options,
div,
me,
items,
renderTab,
renderMain,
_args = arguments;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
renderMain = function _renderMain(containerDiv, item) {
// Items are pane names
var pane = panes.byName(item.paneName); // 20190701
containerDiv.innerHTML = '';
var table = containerDiv.appendChild(dom.createElement('table'));
var me = UI.authn.currentUser();
thisOutline.GotoSubject(item.subject || me, true, pane, false, undefined, table);
};
renderTab = function _renderTab(div, item) {
div.dataset.globalPaneName = item.tabName || item.paneName;
div.textContent = item.label;
};
options = _args.length > 0 && _args[0] !== undefined ? _args[0] : {};
console.log('globalAppTabs @@');
div = dom.createElement('div');
me = UI.authn.currentUser();
if (me) {
_context.next = 9;
break;
}
alert('Must be logged in for this');
throw new Error('Not logged in');
case 9:
_context.next = 11;
return getDashboardItems();
case 11:
items = _context.sent;
div.appendChild(UI.tabs.tabWidget({
dom: dom,
subject: me,
items: items,
renderMain: renderMain,
renderTab: renderTab,
ordered: true,
orientation: 0,
backgroundColor: '#eeeeee',
// black?
selectedTab: options.selectedTab,
onClose: options.onClose
}));
return _context.abrupt("return", div);
case 14:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return _globalAppTabs.apply(this, arguments);
}
this.getDashboard = globalAppTabs;
function getDashboardItems() {
return _getDashboardItems.apply(this, arguments);
}
function _getDashboardItems() {
_getDashboardItems = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
var me, div, _yield$Promise$all, _yield$Promise$all2, books, pods, getPods, _getPods, getAddressBooks, _getAddressBooks;
return regeneratorRuntime.wrap(function _callee4$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
_getAddressBooks = function _getAddressBooks3() {
_getAddressBooks = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
var _context3;
return regeneratorRuntime.wrap(function _callee3$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_context4.prev = 0;
_context4.next = 3;
return UI.authn.findAppInstances({
me: me,
div: div,
dom: dom
}, ns.vcard('AddressBook'));
case 3:
_context3 = _context4.sent;
return _context4.abrupt("return", (_context3.instances || []).map(function (book, index) {
return {
paneName: 'contact',
tabName: "contact-".concat(index),
label: 'Contacts',
subject: book,
icon: UI.icons.iconBase + 'noun_15695.svg'
};
}));
case 7:
_context4.prev = 7;
_context4.t0 = _context4["catch"](0);
console.error('oops in globalAppTabs AddressBook');
case 10:
return _context4.abrupt("return", []);
case 11:
case "end":
return _context4.stop();
}
}
}, _callee3, null, [[0, 7]]);
}));
return _getAddressBooks.apply(this, arguments);
};
getAddressBooks = function _getAddressBooks2() {
return _getAddressBooks.apply(this, arguments);
};
_getPods = function _getPods3() {
_getPods = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var pods;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.prev = 0;
_context2.next = 3;
return kb.fetcher.load(me.doc());
case 3:
_context2.next = 9;
break;
case 5:
_context2.prev = 5;
_context2.t0 = _context2["catch"](0);
console.error('Unable to load profile', _context2.t0);
return _context2.abrupt("return", []);
case 9:
pods = kb.each(me, ns.space('storage'), null, me.doc());
return _context2.abrupt("return", pods.map(function (pod, index) {
var label = pods.length > 1 ? pod.uri.split('//')[1].slice(0, -1) : 'Your storage';
return {
paneName: 'folder',
tabName: "folder-".concat(index),
label: label,
subject: pod,
icon: UI.icons.iconBase + 'noun_Cabinet_251723.svg'
};
}));
case 11:
case "end":
return _context2.stop();
}
}
}, _callee2, null, [[0, 5]]);
}));
return _getPods.apply(this, arguments);
};
getPods = function _getPods2() {
return _getPods.apply(this, arguments);
};
me = UI.authn.currentUser();
div = dom.createElement('div');
_context5.next = 8;
return Promise.all([getAddressBooks(), getPods()]);
case 8:
_yield$Promise$all = _context5.sent;
_yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
books = _yield$Promise$all2[0];
pods = _yield$Promise$all2[1];
return _context5.abrupt("return", [{
paneName: 'home',
label: 'Your stuff',
icon: UI.icons.iconBase + 'noun_547570.svg'
}, {
paneName: 'basicPreferences',
label: 'Preferences',
icon: UI.icons.iconBase + 'noun_Sliders_341315_00000.svg'
}, {
paneName: 'editProfile',
label: 'Edit your profile',
icon: UI.icons.iconBase + 'noun_492246.svg'
}].concat(books).concat(pods));
case 13:
case "end":
return _context5.stop();
}
}
}, _callee4);
}));
return _getDashboardItems.apply(this, arguments);
}
this.getDashboardItems = getDashboardItems;
/**
* Call this method to show the global dashboard.
*
* @param {Object} [options] A set of options that can be passed
* @param {string} [options.pane] To open a specific dashboard pane
* @returns {Promise<void>}
*/
function showDashboard() {
return _showDashboard.apply(this, arguments);
}
function _showDashboard() {
_showDashboard = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
var options,
dashboardContainer,
outlineContainer,
tab,
dashboard,
closeDashboard,
closeDashboardIfLoggedOut,
_args5 = arguments;
return regeneratorRuntime.wrap(function _callee5$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
closeDashboardIfLoggedOut = function _closeDashboardIfLogg(session) {
if (session) {
return;
}
closeDashboard();
};
closeDashboard = function _closeDashboard() {
dashboardContainer.style.display = 'none';
outlineContainer.style.display = 'inherit';
};
options = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : {};
dashboardContainer = getDashboardContainer();
outlineContainer = getOutlineContainer(); // reuse dashboard if already children already is inserted
if (!(dashboardContainer.childNodes.length > 0 && options.pane)) {
_context6.next = 13;
break;
}
outlineContainer.style.display = 'none';
dashboardContainer.style.display = 'inherit';
tab = dashboardContainer.querySelector("[data-global-pane-name=\"".concat(options.pane, "\"]"));
if (!tab) {
_context6.next = 12;
break;
}
tab.click();
return _context6.abrupt("return");
case 12:
console.warn('Did not find the referred tab in global dashboard, will open first one');
case 13:
_context6.next = 15;
return globalAppTabs({
selectedTab: options.pane,
onClose: closeDashboard
});
case 15:
dashboard = _context6.sent;
// close the dashboard if user log out
UI.authn.solidAuthClient.trackSession(closeDashboardIfLoggedOut); // finally - switch to showing dashboard
outlineContainer.style.display = 'none';
dashboardContainer.appendChild(dashboard);
case 19:
case "end":
return _context6.stop();
}
}
}, _callee5);
}));
return _showDashboard.apply(this, arguments);
}
this.showDashboard = showDashboard;
function getDashboardContainer() {
return getOrCreateContainer('GlobalDashboard');
}
function getOutlineContainer() {
return getOrCreateContainer('outline');
}
/**
* Get element with id or create a new on the fly with that id
*
* @param {string} id The ID of the element you want to get or create
* @returns {HTMLElement}
*/
function getOrCreateContainer(id) {
return document.getElementById(id) || function () {
var dashboardContainer = document.createElement('div');
dashboardContainer.id = id;
var mainContainer = document.querySelector('[role="main"]') || document.body;
return mainContainer.appendChild(dashboardContainer);
}();
}
function getRelevantPanes(_x, _x2) {
return _getRelevantPanes.apply(this, arguments);
}
function _getRelevantPanes() {
_getRelevantPanes = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(subject, context) {
var panes, relevantPanes, filteredPanes, firstRelevantPaneIndex, firstFilteredPaneIndex;
return regeneratorRuntime.wrap(function _callee6$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
panes = context.session.paneRegistry;
relevantPanes = panes.list.filter(function (pane) {
return pane.label(subject, context) && !pane.global;
});
if (!(relevantPanes.length === 0)) {
_context7.next = 4;
break;
}
return _context7.abrupt("return", [panes.byName('internal')]);
case 4:
_context7.next = 6;
return UI.authn.filterAvailablePanes(relevantPanes);
case 6:
filteredPanes = _context7.sent;
if (!(filteredPanes.length === 0)) {
_context7.next = 9;
break;
}
return _context7.abrupt("return", [relevantPanes[0]]);
case 9:
firstRelevantPaneIndex = panes.list.indexOf(relevantPanes[0]);
firstFilteredPaneIndex = panes.list.indexOf(filteredPanes[0]); // if the first relevant pane is loaded before the panes available wrt role, we still want to offer the most relevant pane
return _context7.abrupt("return", firstRelevantPaneIndex < firstFilteredPaneIndex ? [relevantPanes[0]].concat(filteredPanes) : filteredPanes);
case 12:
case "end":
return _context7.stop();
}
}
}, _callee6);
}));
return _getRelevantPanes.apply(this, arguments);
}
function getPane(relevantPanes, subject) {
return relevantPanes.find(function (pane) {
return pane.shouldGetFocus && pane.shouldGetFocus(subject);
}) || relevantPanes[0];
}
function expandedHeaderTR(_x3, _x4, _x5) {
return _expandedHeaderTR.apply(this, arguments);
} // expandedHeaderTR
// / //////////////////////////////////////////////////////////////////////////
/* PANES
**
** Panes are regions of the outline view in which a particular subject is
** displayed in a particular way. They are like views but views are for query results.
** subject panes are currently stacked vertically.
*/
// / //////////////////// Specific panes are in panes/*.js
//
// The defaultPane is the first one registered for which the label method exists
// Those registered first take priority as a default pane.
// That is, those earlier in this file
/**
* Pane registration
*/
// the second argument indicates whether the query button is required
// / ///////////////////////////////////////////////////////////////////////////
// Remove a node from the DOM so that Firefox refreshes the screen OK
// Just deleting it cause whitespace to accumulate.
function _expandedHeaderTR() {
_expandedHeaderTR = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(subject, requiredPane, options) {
var renderPaneIconTray, _renderPaneIconTray, tr, td, header, showHeader, icon, strong;
return regeneratorRuntime.wrap(function _callee8$(_context9) {
while (1) {
switch (_context9.prev = _context9.next) {
case 0:
_renderPaneIconTray = function _renderPaneIconTray3() {
_renderPaneIconTray = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(td) {
var options,
paneShownStyle,
paneHiddenStyle,
paneIconTray,
relevantPanes,
paneNumber,
_args7 = arguments;
return regeneratorRuntime.wrap(function _callee7$(_context8) {
while (1) {
switch (_context8.prev = _context8.next) {
case 0:
options = _args7.length > 1 && _args7[1] !== undefined ? _args7[1] : {};
paneShownStyle = 'width: 24px; border-radius: 0.5em; border-top: solid #222 1px; border-left: solid #222 0.1em; border-bottom: solid #eee 0.1em; border-right: solid #eee 0.1em; margin-left: 1em; padding: 3px; background-color: #ffd;';
paneHiddenStyle = 'width: 24px; border-radius: 0.5em; margin-left: 1em; padding: 3px';
paneIconTray = td.appendChild(dom.createElement('nav'));
paneIconTray.style = 'display:flex; justify-content: flex-start; align-items: center;';
if (!options.hideList) {
_context8.next = 9;
break;
}
_context8.t0 = [];
_context8.next = 12;
break;
case 9:
_context8.next = 11;
return getRelevantPanes(subject, context);
case 11:
_context8.t0 = _context8.sent;
case 12:
relevantPanes = _context8.t0;
tr.firstPane = requiredPane || getPane(relevantPanes, subject);
paneNumber = relevantPanes.indexOf(tr.firstPane);
if (relevantPanes.length !== 1) {
// if only one, simplify interface
relevantPanes.forEach(function (pane, index) {
var label = pane.label(subject, context);
var ico = UI.utils.AJARImage(pane.icon, label, label, dom);
ico.style = pane === tr.firstPane ? paneShownStyle : paneHiddenStyle; // init to something at least
// ico.setAttribute('align','right'); @@ Should be better, but ffox bug pushes them down
// ico.style.width = iconHeight
// ico.style.height = iconHeight
var listen = function listen(ico, pane) {
// Freeze scope for event time
ico.addEventListener('click', function (event) {
// Find the containing table for this subject
for (var t = td; t.parentNode; t = t.parentNode) {
if (t.nodeName === 'TABLE') break;
}
if (t.nodeName !== 'TABLE') {
throw new Error('outline: internal error.');
}
var removePanes = function removePanes(specific) {
for (var d = t.firstChild; d; d = d.nextSibling) {
if (typeof d.pane !== 'undefined') {
if (!specific || d.pane === specific) {
if (d.paneButton) {
d.paneButton.setAttribute('class', 'paneHidden');
d.paneButton.style = paneHiddenStyle;
}
removeAndRefresh(d); // If we just delete the node d, ffox doesn't refresh the display properly.
// state = 'paneHidden';
if (d.pane.requireQueryButton && t.parentNode.className
/* outer table */
&& numberOfPanesRequiringQueryButton === 1 && dom.getElementById('queryButton')) {
dom.getElementById('queryButton').setAttribute('style', 'display:none;');
}
}
}
}
};
var renderPane = function renderPane(pane) {
var paneDiv;
UI.log.info('outline: Rendering pane (2): ' + pane.name);
if (UI.no_catch_pane_errors) {
// for debugging
paneDiv = pane.render(subject, context, options);
} else {
try {
paneDiv = pane.render(subject, context, options);
} catch (e) {
// Easier debugging for pane developers
paneDiv = dom.createElement('div');
paneDiv.setAttribute('class', 'exceptionPane');
var pre = dom.createElement('pre');
paneDiv.appendChild(pre);
pre.appendChild(dom.createTextNode(UI.utils.stackString(e)));
}
}
if (pane.requireQueryButton && dom.getElementById('queryButton')) {
dom.getElementById('queryButton').removeAttribute('style');
}
var second = t.firstChild.nextSibling;
var row = dom.createElement('tr');
var cell = row.appendChild(dom.createElement('td'));
cell.appendChild(paneDiv);
if (second) t.insertBefore(row, second);else t.appendChild(row);
row.pane = pane;
row.paneButton = ico;
};
var state = ico.getAttribute('class');
if (state === 'paneHidden') {
if (!event.shiftKey) {
// shift means multiple select
removePanes();
}
renderPane(pane);
ico.setAttribute('class', 'paneShown');
ico.style = paneShownStyle;
} else {
removePanes(pane);
ico.setAttribute('class', 'paneHidden');
ico.style = paneHiddenStyle;
}
var numberOfPanesRequiringQueryButton = 0;
for (var d = t.firstChild; d; d = d.nextSibling) {
if (d.pane && d.pane.requireQueryButton) {
numberOfPanesRequiringQueryButton++;
}
}
}, false);
}; // listen
listen(ico, pane);
ico.setAttribute('class', index !== paneNumber ? 'paneHidden' : 'paneShown');
if (index === paneNumber) tr.paneButton = ico;
paneIconTray.appendChild(ico);
});
}
return _context8.abrupt("return", paneIconTray);
case 17:
case "end":
return _context8.stop();
}
}
}, _callee7);
}));
return _renderPaneIconTray.apply(this, arguments);
};
renderPaneIconTray = function _renderPaneIconTray2(_x6) {
return _renderPaneIconTray.apply(this, arguments);
};
// renderPaneIconTray
// Body of expandedHeaderTR
tr = dom.createElement('tr');
if (options.hover) {
// By default no hide till hover as community deems it confusing
tr.setAttribute('class', 'hoverControl');
}
td = tr.appendChild(dom.createElement('td'));
td.setAttribute('style', 'margin: 0.2em; border: none; padding: 0; vertical-align: top;' + 'display:flex; justify-content: space-between; flex-direction: row;');
td.setAttribute('notSelectable', 'true');
td.setAttribute('about', subject.toNT());
td.setAttribute('colspan', '2'); // Stuff at the right about the subject
header = td.appendChild(dom.createElement('div'));
header.style = 'display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;';
showHeader = !!requiredPane;
if (!options.solo && !showHeader) {
icon = header.appendChild(UI.utils.AJARImage(UI.icons.originalIconBase + 'tbl-collapse.png', 'collapse', undefined, dom));
icon.addEventListener('click', collapseMouseDownListener);
strong = header.appendChild(dom.createElement('h1'));
strong.appendChild(dom.createTextNode(UI.utils.label(subject)));
strong.style = 'font-size: 150%; margin: 0 0.6em 0 0; padding: 0.1em 0.4em;';
UI.widgets.makeDraggable(strong, subject);
}
_context9.t0 = header;
_context9.next = 16;
return renderPaneIconTray(td, {
hideList: showHeader
});
case 16:
_context9.t1 = _context9.sent;
_context9.t0.appendChild.call(_context9.t0, _context9.t1);
// set DOM methods
tr.firstChild.tabulatorSelect = function () {
setSelected(this, true);
};
tr.firstChild.tabulatorDeselect = function () {
setSelected(this, false);
};
return _context9.abrupt("return", tr);
case 21:
case "end":
return _context9.stop();
}
}
}, _callee8);
}));
return _expandedHeaderTR.apply(this, arguments);
}
function removeAndRefresh(d) {
var table = d.parentNode;
var par = table.parentNode;
var placeholder = dom.createElement('table');
placeholder.setAttribute('style', 'width: 100%;');
par.replaceChild(placeholder, table);
table.removeChild(d);
par.replaceChild(table, placeholder); // Attempt to
}
var propertyTable = this.propertyTable = function propertyTable(subject, table, pane, options) {
UI.log.debug('Property table for: ' + subject);
subject = kb.canon(subject); // if (!pane) pane = panes.defaultPane;
if (!table) {
// Create a new property table
table = dom.createElement('table');
table.setAttribute('style', 'width: 100%;');
expandedHeaderTR(subject, pane, options).then(function (tr1) {
table.appendChild(tr1);
if (tr1.firstPane) {
var paneDiv;
try {
UI.log.info('outline: Rendering pane (1): ' + tr1.firstPane.name);
paneDiv = tr1.firstPane.render(subject, context, options);
} catch (e) {
// Easier debugging for pane developers
paneDiv = dom.createElement('div');
paneDiv.setAttribute('class', 'exceptionPane');
var pre = dom.createElement('pre');
paneDiv.appendChild(pre);
pre.appendChild(dom.createTextNode(UI.utils.stackString(e)));
}
var row = dom.createElement('tr');
var cell = row.appendChild(dom.createElement('td'));
cell.appendChild(paneDiv);
if (tr1.firstPane.requireQueryButton && dom.getElementById('queryButton')) {
dom.getElementById('queryButton').removeAttribute('style');
}
table.appendChild(row);
row.pane = tr1.firstPane;
row.paneButton = tr1.paneButton;
}
});
return table;
} else {
// New display of existing table, keeping expanded bits
UI.log.info('Re-expand: ' + table); // do some other stuff here
return table;
}
};
/* propertyTable */
function propertyTR(doc, st, inverse) {
var tr = doc.createElement('TR');
tr.AJAR_statement = st;
tr.AJAR_inverse = inverse; // tr.AJAR_variable = null; // @@ ?? was just 'tr.AJAR_variable'
tr.setAttribute('predTR', 'true');
var predicateTD = thisOutline.outlinePredicateTD(st.predicate, tr, inverse);
tr.appendChild(predicateTD); // @@ add 'internal' to predicateTD's class for style? mno
return tr;
}
this.propertyTR = propertyTR; // / ////////// Property list
function appendPropertyTRs(parent, plist, inverse, predicateFilter) {
// UI.log.info('@appendPropertyTRs, 'this' is %s, dom is %s, '+ // Gives 'can't access dead object'
// 'thisOutline.document is %s', this, dom.location, thisOutline.document.location);
// UI.log.info('@appendPropertyTRs, dom is now ' + this.document.location);
// UI.log.info('@appendPropertyTRs, dom is now ' + thisOutline.document.location);
UI.log.debug('Property list length = ' + plist.length);
if (plist.length === 0) return '';
var sel, j, k;
if (inverse) {
sel = function sel(x) {
return x.subject;
};
plist = plist.sort(UI.utils.RDFComparePredicateSubject);
} else {
sel = function sel(x) {
return x.object;
};
plist = plist.sort(UI.utils.RDFComparePredicateObject);
}
var max = plist.length;
for (j = 0; j < max; j++) {
// squishing together equivalent properties I think
var s = plist[j]; // if (s.object == parentSubject) continue; // that we knew
// Avoid predicates from other panes
if (predicateFilter && !predicateFilter(s.predicate, inverse)) continue;
var tr = propertyTR(dom, s, inverse);
parent.appendChild(tr);
var predicateTD = tr.firstChild; // we need to kludge the rowspan later
var defaultpropview = views.defaults[s.predicate.uri]; // LANGUAGE PREFERENCES WAS AVAILABLE WITH FF EXTENSION - get from elsewhere?
var dups = 0; // How many rows have the same predicate, -1?
var langTagged = 0; // how many objects have language tags?
var myLang = 0; // Is there one I like?
for (k = 0; k + j < max && plist[j + k].predicate.sameTerm(s.predicate); k++) {
if (k > 0 && sel(plist[j + k]).sameTerm(sel(plist[j + k - 1]))) dups++;
if (sel(plist[j + k]).lang && outline.labeller.LanguagePreference) {
langTagged += 1;
if (sel(plist[j + k]).lang.indexOf(outline.labeller.LanguagePreference) >= 0) {
myLang++;
}
}
}
/* Display only the one in the preferred language
ONLY in the case (currently) when all the values are tagged.
Then we treat them as alternatives. */
if (myLang > 0 && langTagged === dups + 1) {
for (var _k = j; _k <= j + dups; _k++) {
if (outline.labeller.LanguagePreference && sel(plist[_k]).lang.indexOf(outline.labeller.LanguagePreference) >= 0) {
tr.appendChild(thisOutline.outlineObjectTD(sel(plist[_k]), defaultpropview, undefined, s));
break;
}
}
j += dups; // extra push
continue;
}
tr.appendChild(thisOutline.outlineObjectTD(sel(s), defaultpropview, undefined, s));
/* Note: showNobj shows between n to 2n objects.
* This is to prevent the case where you have a long list of objects
* shown, and dangling at the end is '1 more' (which is easily ignored)
* Therefore more objects are shown than hidden.
*/
tr.showNobj = function (n) {
var predDups = k - dups;
var show = 2 * n < predDups ? n : predDups;
var showLaterArray = [];
if (predDups !== 1) {
predicateTD.setAttribute('rowspan', show === predDups ? predDups : n + 1);
var l;
if (show < predDups && show === 1) {
// what case is this...
predicateTD.setAttribute('rowspan', 2);
}
var displayed = 0; // The number of cells generated-1,
// all duplicate thing removed
for (l = 1; l < k; l++) {
// This detects the same things
if (!kb.canon(sel(plist[j + l])).sameTerm(kb.canon(sel(plist[j + l - 1])))) {
displayed++;
s = plist[j + l];
defaultpropview = views.defaults[s.predicate.uri];
var trObj = dom.createElement('tr');
trObj.style.colspan = '1';
trObj.appendChild(thisOutline.outlineObjectTD(sel(plist[j + l]), defaultpropview, undefined, s));
trObj.AJAR_statement = s;
trObj.AJAR_inverse = inverse;
parent.appendChild(trObj);
if (displayed >= show) {
trObj.style.display = 'none';
showLaterArray.push(trObj);
}
} else {
// ToDo: show all the data sources of this statement
UI.log.info('there are duplicates here: %s', plist[j + l - 1]);
}
} // @@a quick fix on the messing problem.
if (show === predDups) {
predicateTD.setAttribute('rowspan', displayed + 1);
}
} // end of if (predDups!==1)
if (show < predDups) {
// Add the x more <TR> here
var moreTR = dom.createElement('tr');
var moreTD = moreTR.appendChild(dom.createElement('td'));
moreTD.setAttribute('style', 'margin: 0.2em; border: none; padding: 0; vertical-align: top;');
moreTD.setAttribute('notSelectable', 'false');
if (predDups > n) {
// what is this for??
var small = dom.createElement('a');
moreTD.appendChild(small);
var predToggle = function (f) {
return f(predicateTD, k, dups, n);
}(function (predicateTD, k, dups, n) {
return function (display) {
small.innerHTML = '';
if (display === 'none') {
small.appendChild(UI.utils.AJARImage(UI.icons.originalIconBase + 'tbl-more-trans.png', 'more', 'See all', dom));
small.appendChild(dom.createTextNode(predDups - n + ' more...'));
predicateTD.setAttribute('rowspan', n + 1);
} else {
small.appendChild(UI.utils.AJARImage(UI.icons.originalIconBase + 'tbl-shrink.png', '(less)', undefined, dom));
predicateTD.setAttribute('rowspan', predDups + 1);
}
for (var i = 0; i < showLaterArray.length; i++) {
var trObj = showLaterArray[i];
trObj.style.display = display;
}
};
}); // ???
var current = 'none';
var toggleObj = function toggleObj(event) {
predToggle(current);
current = current === 'none' ? '' : 'none';
if (event) event.stopPropagation();
return false; // what is this for?
};
toggleObj();
small.addEventListener('click', toggleObj, false);
} // if(predDups>n)
parent.appendChild(moreTR);
} // if
}; // tr.showNobj
tr.showAllobj = function () {
tr.showNobj(k - dups);
};
tr.showNobj(10);
j += k - 1; // extra push
}
} // appendPropertyTRs
this.appendPropertyTRs = appendPropertyTRs;
/* termWidget
**
*/
var termWidget = {}; // @@@@@@ global
global.termWidget = termWidget;
termWidget.construct = function (dom) {
dom = dom || document;
var td = dom.createElement('TD');
td.setAttribute('style', 'margin: 0.2em; border: none; padding: 0; vert