solid-ui 2.4.22-fd0ccabe → 2.4.23

package/lib/widgets/forms.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "field", {
     return _fieldFunction.field;
   }
 });
+Object.defineProperty(exports, "fieldFunction", {
+  enumerable: true,
+  get: function get() {
+    return _fieldFunction.fieldFunction;
+  }
+});
 Object.defineProperty(exports, "fieldLabel", {
   enumerable: true,
   get: function get() {
@@ -44,8 +50,16 @@ exports.findClosest = findClosest;
 exports.formsFor = formsFor;
 exports.makeDescription = makeDescription;
 exports.makeSelectForCategory = makeSelectForCategory;
+exports.makeSelectForChoice = makeSelectForChoice;
+exports.makeSelectForClassifierOptions = makeSelectForClassifierOptions;
 exports.makeSelectForNestedCategory = makeSelectForNestedCategory;
 exports.makeSelectForOptions = makeSelectForOptions;
+Object.defineProperty(exports, "mostSpecificClassURI", {
+  enumerable: true,
+  get: function get() {
+    return _fieldFunction.mostSpecificClassURI;
+  }
+});
 exports.newButton = newButton;
 exports.newThing = newThing;
 exports.promptForNew = promptForNew;
@@ -93,6 +107,8 @@ var _solidLogic = require("solid-logic");
 
 var utils = _interopRequireWildcard(require("../utils"));
 
+var _multiSelect = require("./multiSelect");
+
 var widgets = _interopRequireWildcard(require("../widgets"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -155,6 +171,7 @@ _fieldFunction.field[ns.ui('Form').uri] = _fieldFunction.field[ns.ui('Group').ur
   var ui = ns.ui;
   if (container) container.appendChild(box); // Prevent loops
 
+  if (!form) return;
   var key = subject.toNT() + '|' + form.toNT();
 
   if (already[key]) {
@@ -264,47 +281,43 @@ _fieldFunction.field[ns.ui('Options').uri] = function (dom, container, already,
     values = kb.each(subject, dependingOn);
   }
 
-  if (values.length === 0) {
-    box.appendChild((0, _error.errorMessageBlock)(dom, "Can't select subform as no value of: " + dependingOn));
-  } else {
-    for (var i = 0; i < cases.length; i++) {
-      var c = cases[i];
-      var tests = kb.each(c, ui('for'), null, formDoc); // There can be multiple 'for'
+  for (var i = 0; i < cases.length; i++) {
+    var c = cases[i];
+    var tests = kb.each(c, ui('for'), null, formDoc); // There can be multiple 'for'
 
-      var match = false;
+    var match = false;
 
-      for (var j = 0; j < tests.length; j++) {
-        var _iterator = _createForOfIteratorHelper(values),
-            _step;
+    for (var j = 0; j < tests.length; j++) {
+      var _iterator = _createForOfIteratorHelper(values),
+          _step;
 
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var value = _step.value;
-            var test = tests[j];
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var value = _step.value;
+          var test = tests[j];
 
-            if (value.sameTerm(tests) || value.termType === test.termType && value.value === test.value) {
-              match = true;
-            }
+          if (value.sameTerm(tests) || value.termType === test.termType && value.value === test.value) {
+            match = true;
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
         }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
       }
+    }
 
-      if (match) {
-        var _field3 = kb.the(c, ui('use'));
+    if (match) {
+      var _field3 = kb.the(c, ui('use'));
 
-        if (!_field3) {
-          box.appendChild((0, _error.errorMessageBlock)(dom, 'No "use" part for case in form ' + form));
-          return box;
-        } else {
-          appendForm(dom, box, already, subject, _field3, dataDoc, callbackFunction);
-        }
-
-        break;
+      if (!_field3) {
+        box.appendChild((0, _error.errorMessageBlock)(dom, 'No "use" part for case in form ' + form));
+        return box;
+      } else {
+        appendForm(dom, box, already, subject, _field3, dataDoc, callbackFunction);
       }
+
+      break;
     }
   } // @@ Add box.refresh() to sync fields with values
 
@@ -1042,9 +1055,6 @@ _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, s
   var kb = _solidLogic.store;
   var formDoc = form.doc ? form.doc() : null; // @@ if blank no way to know
 
-  var uiMultipleInUse = false; // this signals to ui:choice that it is part of a ui:multiple
-
-  var multiSelect = false;
   var p;
   var box = dom.createElement('div');
   box.setAttribute('class', 'choiceBox'); // Set flexDirection column?
@@ -1070,108 +1080,142 @@ _fieldFunction.field[ns.ui('Choice').uri] = function (dom, container, already, s
   }
 
   var subForm = kb.any(form, ui('use')); // Optional
-
-  var follow = kb.anyJS(form, ui('follow'), null, formDoc); // data doc moves to new subject?
-
-  var possible = [];
-  var possibleProperties;
-  var firstSelectOptionText = '* Select for ' + utils.label(subject, true) + ' *'; // if we do NOT have a container it means it is a ui:Multiple
-  // only important for the first option text in select
-
-  if (!container) {
-    uiMultipleInUse = true;
-    firstSelectOptionText = utils.label(subject, true);
-  }
-
-  if (subject.termType === 'BlankNode') {
-    firstSelectOptionText = '* Select for ' + utils.label(property) + ' *';
-  }
+  // const follow = kb.anyJS(form, ui('follow'), null, formDoc) // data doc moves to new subject?
 
   var opts = {
     form: form,
     subForm: subForm,
-    multiSelect: multiSelect,
-    firstSelectOptionText: firstSelectOptionText,
-    uiMultipleInUse: uiMultipleInUse,
     disambiguate: false
   };
-  possible = kb.each(undefined, ns.rdf('type'), uiFrom, formDoc);
 
-  for (var x in kb.findMembersNT(uiFrom)) {
-    possible.push(kb.fromNT(x));
-  } // Use rdfs
+  function getSelectorOptions() {
+    var possible = [];
+    var possibleProperties;
+    possible = kb.each(undefined, ns.rdf('type'), uiFrom, formDoc);
 
+    for (var x in findMembersNT(kb, uiFrom, dataDoc)) {
+      possible.push(kb.fromNT(x));
+    } // Use rdfs
 
-  if (uiFrom.sameTerm(ns.rdfs('Class'))) {
-    for (p in buttons.allClassURIs()) {
-      possible.push(kb.sym(p));
-    } // log.debug("%%% Choice field: possible.length 2 = "+possible.length)
 
-  } else if (uiFrom.sameTerm(ns.rdf('Property'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+    if (uiFrom.sameTerm(ns.rdfs('Class'))) {
+      for (p in buttons.allClassURIs()) {
+        possible.push(kb.sym(p));
+      } // log.debug("%%% Choice field: possible.length 2 = "+possible.length)
 
-    for (p in possibleProperties.op) {
-      possible.push(kb.fromNT(p));
-    }
+    } else if (uiFrom.sameTerm(ns.rdf('Property'))) {
+      possibleProperties = buttons.propertyTriage(kb);
 
-    for (p in possibleProperties.dp) {
-      possible.push(kb.fromNT(p));
-    }
+      for (p in possibleProperties.op) {
+        possible.push(kb.fromNT(p));
+      }
 
-    opts.disambiguate = true; // This is a big class, and the labels won't be enough.
-  } else if (uiFrom.sameTerm(ns.owl('ObjectProperty'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+      for (p in possibleProperties.dp) {
+        possible.push(kb.fromNT(p));
+      }
 
-    for (p in possibleProperties.op) {
-      possible.push(kb.fromNT(p));
-    }
+      opts.disambiguate = true; // This is a big class, and the labels won't be enough.
+    } else if (uiFrom.sameTerm(ns.owl('ObjectProperty'))) {
+      possibleProperties = buttons.propertyTriage(kb);
 
-    opts.disambiguate = true;
-  } else if (uiFrom.sameTerm(ns.owl('DatatypeProperty'))) {
-    possibleProperties = buttons.propertyTriage(kb);
+      for (p in possibleProperties.op) {
+        possible.push(kb.fromNT(p));
+      }
+
+      opts.disambiguate = true;
+    } else if (uiFrom.sameTerm(ns.owl('DatatypeProperty'))) {
+      possibleProperties = buttons.propertyTriage(kb);
+
+      for (p in possibleProperties.dp) {
+        possible.push(kb.fromNT(p));
+      }
 
-    for (p in possibleProperties.dp) {
-      possible.push(kb.fromNT(p));
+      opts.disambiguate = true;
     }
 
-    opts.disambiguate = true;
-  }
+    return possible; // return sortByLabel(possible)
+  } // TODO: this checks for any occurrence, regardless of true or false setting
 
-  var sortedPossible = sortByLabel(possible); // TODO: this checks for any occurrence, regardless of true or false setting
 
   if (kb.any(form, ui('canMintNew'))) {
     opts.mint = '* Create new *'; // @@ could be better
   }
 
-  var selector = makeSelectForOptions(dom, kb, subject, property, sortedPossible, uiFrom, opts, dataDoc, callbackFunction);
-  rhs.appendChild(selector);
-  var object;
+  var multiSelect = kb.any(form, ui('multiselect')); // Optional
 
-  if (selector.currentURI) {
-    object = $rdf.sym(selector.currentURI);
-  } else {
-    object = kb.any(subject, property);
-  }
+  if (multiSelect) opts.multiSelect = true;
+  var selector;
 
-  if (object && subForm) {
-    removeNextSiblingsAfterElement(selector);
-    addSubFormChoice(dom, rhs, already, object, subForm, follow ? object.doc() : dataDoc, callbackFunction);
-  }
+  rhs.refresh = function () {
+    // from ui:property
+    var selectedOptions = kb.each(subject, property, null, dataDoc).map(function (object) {
+      return object.value;
+    }); // from ui:from + ui:property
 
-  return box;
-};
-/**
-     * Removes all sibling elements after specified
-     * @param {HTMLElement} currentElement
-     * @private
-  */
+    var possibleOptions = getSelectorOptions();
+    possibleOptions.push(selectedOptions);
+    possibleOptions = sortByLabel(possibleOptions);
+    selector = makeSelectForChoice(dom, rhs, kb, subject, property, possibleOptions, selectedOptions, uiFrom, opts, dataDoc, callbackFunction);
+    rhs.innerHTML = '';
+    rhs.appendChild(selector);
 
+    if (multiSelect) {
+      var multiSelectDiv = new _multiSelect.IconicMultiSelect({
+        placeholder: selector.selected,
+        select: selector,
+        container: rhs,
+        textField: 'textField',
+        valueField: 'valueField'
+      });
+      multiSelectDiv.init();
+      multiSelectDiv.subscribe(function (event) {
+        if (event.action === 'REMOVE_OPTION') {
+          selectedOptions = selectedOptions.filter(function (value) {
+            return value !== event.value;
+          });
+        }
 
-function removeNextSiblingsAfterElement(currentElement) {
-  while (currentElement.nextElementSibling) {
-    currentElement.nextElementSibling.remove();
-  }
-}
+        if (event.action === 'CLEAR_ALL_OPTIONS') {
+          selectedOptions = [];
+        }
+
+        if (event.action === 'ADD_OPTION') {
+          var stringValue = event.value + '';
+
+          if (stringValue.includes('Create new')) {
+            var newObject = newThing(dataDoc);
+            var is = [];
+            is.push($rdf.st(subject, property, kb.sym(newObject), dataDoc));
+            if (uiFrom) is.push($rdf.st(newObject, ns.rdf('type'), kb.sym(uiFrom), dataDoc));
+
+            if (subForm) {
+              addSubFormChoice(dom, rhs, {}, $rdf.sym(newObject), subForm, dataDoc, function (ok, body) {
+                if (ok) {
+                  kb.updater.update([], is, function (uri, success, errorBody) {
+                    if (!success) rhs.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating select: ' + errorBody));
+                  });
+                  selectedOptions.push(newObject);
+                  if (callbackFunction) callbackFunction(ok, {
+                    widget: 'select',
+                    event: 'new'
+                  });
+                } else {
+                  rhs.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in field of select: ' + body));
+                }
+              });
+            }
+          } else selectedOptions.push(event.value);
+        }
+
+        selector.update(selectedOptions);
+      });
+    }
+  };
+
+  rhs.refresh();
+  if (selector && selector.refresh) selector.refresh();
+  return box;
+};
 
 function addSubFormChoice(dom, selectDiv, already, subject, subForm, dataDoc, callbackFunction) {
   (0, _fieldFunction.fieldFunction)(dom, subForm)(dom, selectDiv, already, subject, subForm, dataDoc, callbackFunction);
@@ -1514,10 +1558,9 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
 // @param subject - a term, the subject of the statement(s) being edited.
 // @param predicate - a term, the predicate of the statement(s) being edited
 // @param possible - a list of terms, the possible value the object can take
-// @param options.multiSelect - Boolean - Whether more than one at a time is allowed
-// @param options.firstSelectOptionText - a string to be displayed as the
-//                        option for none selected (for non multiSelect)
-// @param options.uiMultipleInUse - signals that the ui:choise is used with a ui:multiple
+// @param options.multiple - Boolean - Whether more than one at a time is allowed
+// @param options.nullLabel - a string to be displayed as the
+//                        option for none selected (for non multiple)
 // @param options.mint - User may create thing if this sent to the prompt string eg "New foo"
 // @param options.subForm - If mint, then the form to be used for minting the new thing
 // @param dataDoc - The web document being edited
@@ -1525,7 +1568,7 @@ function makeDescription(dom, kb, subject, predicate, dataDoc, callbackFunction)
 */
 
 
-function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, options, dataDoc, callbackFunction) {
+function makeSelectForClassifierOptions(dom, kb, subject, predicate, possible, options, dataDoc, callbackFunction) {
   log.debug('Select list length now ' + possible.length);
   var n = 0;
   var uris = {}; // Count them
@@ -1535,7 +1578,7 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
   for (var i = 0; i < possible.length; i++) {
     var sub = possible[i]; // @@ Maybe; make this so it works with blank nodes too
 
-    if (!sub.uri) debug.warn("makeSelectForOptions: option does not have an uri: ".concat(sub, ", with predicate: ").concat(predicate));
+    if (!sub.uri) debug.warn("makeSelectForClassifierOptions: option does not have an uri: ".concat(sub, ", with predicate: ").concat(predicate));
     if (!sub.uri || sub.uri in uris) continue;
     uris[sub.uri] = true;
     n++;
@@ -1546,7 +1589,7 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
     return (0, _error.errorMessageBlock)(dom, "Can't do selector with no options, subject= " + subject + ' property = ' + predicate + '.');
   }
 
-  log.debug('makeSelectForOptions: dataDoc=' + dataDoc);
+  log.debug('makeSelectForClassifierOptions: dataDoc=' + dataDoc);
   var actual;
 
   var getActual = function getActual() {
@@ -1556,9 +1599,7 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
       actual = kb.findTypeURIs(subject);
     } else {
       kb.each(subject, predicate, null, dataDoc).forEach(function (x) {
-        if (x.uri) {
-          actual[x.uri] = true;
-        }
+        actual[x.uri] = true;
       });
     }
 
@@ -1568,6 +1609,8 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
   actual = getActual();
 
   var onChange = function onChange(_e) {
+    select.disabled = true; // until data written back - gives user feedback too
+
     var ds = [];
     var is = [];
 
@@ -1583,7 +1626,6 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
       var opt = select.options[_i];
 
       if (opt.selected && opt.AJAR_mint) {
-        // not sure if this 'if' is used because I cannot find mintClass
         if (options.mintClass) {
           var thisForm = promptForNew(dom, kb, subject, predicate, options.mintClass, null, dataDoc, function (ok, body) {
             if (!ok) {
@@ -1598,14 +1640,11 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
           newObject = newThing(dataDoc);
         }
 
-        is.push($rdf.st(subject, predicate, kb.sym(newObject), dataDoc));
-        if (uiFrom) is.push($rdf.st(newObject, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // not sure if this 'if' is used because I cannot find mintStatementsFun
+        is.push($rdf.st(subject, predicate, newObject, dataDoc));
 
         if (options.mintStatementsFun) {
           is = is.concat(options.mintStatementsFun(newObject));
         }
-
-        select.currentURI = newObject;
       }
 
       if (!opt.AJAR_uri) continue; // a prompt or mint
@@ -1613,7 +1652,11 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
       if (opt.selected && !(opt.AJAR_uri in actual)) {
         // new class
         is.push($rdf.st(subject, predicate, kb.sym(opt.AJAR_uri), dataDoc));
-        select.currentURI = opt.AJAR_uri;
+      }
+
+      if (!opt.selected && opt.AJAR_uri in actual) {
+        // old class
+        removeValue(kb.sym(opt.AJAR_uri));
       }
 
       if (opt.selected) select.currentURI = opt.AJAR_uri;
@@ -1633,29 +1676,38 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
       sel = sel.superSelect;
     }
 
-    log.info('selectForOptions: data doc = ' + dataDoc); // refresh subForm
+    function doneNew(ok, _body) {
+      callbackFunction(ok, {
+        widget: 'select',
+        event: 'new'
+      });
+    }
+
+    log.info('makeSelectForClassifierOptions: data doc = ' + dataDoc);
+    kb.updater.update(ds, is, function (uri, ok, body) {
+      actual = getActual(); // refresh
 
-    removeNextSiblingsAfterElement(select);
-    addSubFormChoice(dom, select.parentNode, {}, $rdf.sym(select.currentURI), options.subForm, dataDoc, function (ok, body) {
       if (ok) {
-        kb.updater.update(ds, is, function (uri, success, errorBody) {
-          actual = getActual(); // refresh
-
-          if (!success) select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating select: ' + errorBody));
-        });
-        if (callbackFunction) callbackFunction(ok, {
-          widget: 'select',
-          event: 'new'
-        });
+        select.disabled = false; // data written back
+
+        if (newObject) {
+          var fn = (0, _fieldFunction.fieldFunction)(dom, options.subForm);
+          fn(dom, select.parentNode, {}, newObject, options.subForm, dataDoc, doneNew);
+        }
       } else {
-        select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in field of select: ' + body));
+        return select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in select: ' + body));
       }
+
+      if (callbackFunction) callbackFunction(ok, {
+        widget: 'select',
+        event: 'change'
+      });
     });
   };
 
   var select = dom.createElement('select');
   select.setAttribute('style', style.formSelectSTyle);
-  if (options.multiSelect) select.setAttribute('multiSelect', 'true');
+  if (options.multiple) select.setAttribute('multiple', 'true');
   select.currentURI = null;
 
   select.refresh = function () {
@@ -1706,14 +1758,184 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
     select.insertBefore(mint, select.firstChild);
   }
 
-  if (!select.currentURI && options.uiMultipleInUse) {
+  if (select.currentURI == null && !options.multiple) {
     var prompt = dom.createElement('option');
-    prompt.appendChild(dom.createTextNode(options.firstSelectOptionText));
-    prompt.disabled = true;
-    prompt.value = true;
-    prompt.hidden = true;
+    prompt.appendChild(dom.createTextNode(options.nullLabel));
+    select.insertBefore(prompt, select.firstChild);
     prompt.selected = true;
+  }
+
+  if (editable) {
+    select.addEventListener('change', onChange, false);
+  }
+
+  return select;
+} // makeSelectForClassifierOptions
+
+/** Make SELECT element to select options
+//
+// @param subject - a term, the subject of the statement(s) being edited.
+// @param predicate - a term, the predicate of the statement(s) being edited
+// @param possible - a list of terms, the possible value the object can take
+// @param options.nullLabel - a string to be displayed as the
+//                        option for none selected (for non multiple)
+// @param options.subForm - If mint, then the form to be used for minting the new thing
+// @param dataDoc - The web document being edited
+// @param callbackFunction - takes (boolean ok, string errorBody)
+*/
+
+
+function makeSelectForOptions(dom, kb, subject, predicate, possible, options, dataDoc, callbackFunction) {
+  log.debug('Select list length now ' + possible.length);
+  var n = 0;
+  var uris = {}; // Count them
+
+  var editable = kb.updater.editable(dataDoc.uri);
+
+  for (var i = 0; i < possible.length; i++) {
+    var sub = possible[i]; // @@ Maybe; make this so it works with blank nodes too
+
+    if (!sub.uri) debug.warn("makeSelectForOptions: option does not have an uri: ".concat(sub, ", with predicate: ").concat(predicate));
+    if (!sub.uri || sub.uri in uris) continue;
+    uris[sub.uri] = true;
+    n++;
+  } // uris is now the set of possible options
+
+
+  if (n === 0) {
+    return (0, _error.errorMessageBlock)(dom, "Can't do selector with no options, subject= " + subject + ' property = ' + predicate + '.');
+  }
+
+  log.debug('makeSelectForOptions: dataDoc=' + dataDoc);
+  var actual;
+
+  var getActual = function getActual() {
+    actual = {};
+
+    if (predicate.sameTerm(ns.rdf('type'))) {
+      actual = kb.findTypeURIs(subject);
+    } else {
+      kb.each(subject, predicate, null, dataDoc).forEach(function (x) {
+        if (x.uri) {
+          actual[x.uri] = true;
+        }
+      });
+    }
+
+    return actual;
+  };
+
+  actual = getActual();
+
+  var onChange = function onChange(_e) {
+    select.disabled = true; // until data written back - gives user feedback too
+
+    var ds = [];
+    var is = [];
+
+    var removeValue = function removeValue(t) {
+      if (kb.holds(subject, predicate, t, dataDoc)) {
+        ds.push($rdf.st(subject, predicate, t, dataDoc));
+      }
+    };
+
+    for (var _i3 = 0; _i3 < select.options.length; _i3++) {
+      var opt = select.options[_i3];
+      if (!opt.AJAR_uri) continue; // a prompt or mint
+
+      if (opt.selected && !(opt.AJAR_uri in actual)) {
+        // new class
+        is.push($rdf.st(subject, predicate, kb.sym(opt.AJAR_uri), dataDoc));
+      }
+
+      if (!opt.selected && opt.AJAR_uri in actual) {
+        // old class
+        removeValue(kb.sym(opt.AJAR_uri));
+      }
+
+      if (opt.selected) select.currentURI = opt.AJAR_uri;
+    }
+
+    var sel = select.subSelect; // All subclasses must also go
+
+    while (sel && sel.currentURI) {
+      removeValue(kb.sym(sel.currentURI));
+      sel = sel.subSelect;
+    }
+
+    sel = select.superSelect; // All superclasses are redundant
+
+    while (sel && sel.currentURI) {
+      removeValue(kb.sym(sel.currentURI));
+      sel = sel.superSelect;
+    }
+
+    log.info('selectForOptions: data doc = ' + dataDoc);
+    kb.updater.update(ds, is, function (uri, ok, body) {
+      actual = getActual(); // refresh
+
+      if (ok) {
+        select.disabled = false; // data written back
+      } else {
+        return select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in select: ' + body));
+      }
+
+      if (callbackFunction) callbackFunction(ok, {
+        widget: 'select',
+        event: 'change'
+      });
+    });
+  };
+
+  var select = dom.createElement('select');
+  select.setAttribute('style', style.formSelectSTyle);
+  select.currentURI = null;
+
+  select.refresh = function () {
+    actual = getActual(); // refresh
+
+    for (var _i4 = 0; _i4 < select.children.length; _i4++) {
+      var option = select.children[_i4];
+
+      if (option.AJAR_uri) {
+        option.selected = option.AJAR_uri in actual;
+      }
+    }
+
+    select.disabled = false; // unlocked any conflict we had got into
+  };
+
+  for (var uri in uris) {
+    var c = kb.sym(uri);
+    var option = dom.createElement('option');
+
+    if (options.disambiguate) {
+      option.appendChild(dom.createTextNode(utils.labelWithOntology(c, true))); // Init. cap
+    } else {
+      option.appendChild(dom.createTextNode(utils.label(c, true))); // Init.
+    }
+
+    var backgroundColor = kb.any(c, kb.sym('http://www.w3.org/ns/ui#backgroundColor'));
+
+    if (backgroundColor) {
+      option.setAttribute('style', 'background-color: ' + backgroundColor.value + '; ');
+    }
+
+    option.AJAR_uri = uri;
+
+    if (uri in actual) {
+      option.setAttribute('selected', 'true');
+      select.currentURI = uri; // dump("Already in class: "+ uri+"\n")
+    }
+
+    select.appendChild(option);
+  }
+
+  if (!select.currentURI) {
+    var prompt = dom.createElement('option');
+    prompt.appendChild(dom.createTextNode(options.nullLabel));
     select.insertBefore(prompt, select.firstChild);
+    prompt.selected = true;
   }
 
   if (editable) {
@@ -1732,11 +1954,11 @@ function makeSelectForOptions(dom, kb, subject, predicate, possible, uiFrom, opt
 function makeSelectForCategory(dom, kb, subject, category, dataDoc, callbackFunction) {
   var du = kb.any(category, ns.owl('disjointUnionOf'));
   var subs;
-  var multiSelect = false;
+  var multiple = false;
 
   if (!du) {
     subs = kb.each(undefined, ns.rdfs('subClassOf'), category);
-    multiSelect = true;
+    multiple = true;
   } else {
     subs = du.elements;
   }
@@ -1744,15 +1966,16 @@ function makeSelectForCategory(dom, kb, subject, category, dataDoc, callbackFunc
   log.debug('Select list length ' + subs.length);
 
   if (subs.length === 0) {
-    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiSelect ? 'multiple ' : '') + 'selector with no subclasses of category: ' + category);
+    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiple ? 'multiple ' : '') + 'selector with no subclasses of category: ' + category);
   }
 
   if (subs.length === 1) {
-    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiSelect ? 'multiple ' : '') + 'selector with only 1 subclass of category: ' + category + ':' + subs[1]);
+    return (0, _error.errorMessageBlock)(dom, "Can't do " + (multiple ? 'multiple ' : '') + 'selector with only 1 subclass of category: ' + category + ':' + subs[1]);
   }
 
-  return makeSelectForOptions(dom, kb, subject, ns.rdf('type'), subs, null, {
-    multiSelect: multiSelect
+  return makeSelectForClassifierOptions(dom, kb, subject, ns.rdf('type'), subs, {
+    multiple: multiple,
+    nullLabel: '* Select type *'
   }, dataDoc, callbackFunction);
 }
 /** Make SELECT element to select subclasses recurively
@@ -1786,8 +2009,7 @@ function makeSelectForNestedCategory(dom, kb, subject, category, dataDoc, callba
   function onChange(ok, body) {
     if (ok) update();
     callbackFunction(ok, body);
-  } // eslint-disable-next-line prefer-const
-
+  }
 
   var select = makeSelectForCategory(dom, kb, subject, category, dataDoc, onChange);
   container.appendChild(select);
@@ -1942,4 +2164,326 @@ function newThing(doc) {
   var now = new Date();
   return $rdf.sym(doc.uri + '#' + 'id' + ('' + now.getTime()));
 }
+/** Make SELECT element to select options
+//
+// @param subject - a term, the subject of the statement(s) being edited.
+// @param predicate - a term, the predicate of the statement(s) being edited
+// @param possible - a list of terms, the possible value the object can take
+// @param options.mint - User may create thing if this sent to the prompt string eg "New foo"
+// @param options.subForm - If mint, then the form to be used for minting the new thing
+// @param dataDoc - The web document being edited
+// @param callbackFunction - takes (boolean ok, string errorBody)
+*/
+
+
+function makeSelectForChoice(dom, container, kb, subject, predicate, inputPossibleOptions, selectedOptions, uiFrom, options, dataDoc, callbackFunction) {
+  var optionsFromClassUIfrom = {}; // Count them
+
+  var editable = kb.updater.editable(dataDoc.uri);
+
+  for (var i = 0; i < inputPossibleOptions.length; i++) {
+    var sub = inputPossibleOptions[i]; // @@ Maybe; make this so it works with blank nodes too
+    // if (!sub.uri) debug.warn(`makeSelectForChoice: option does not have an uri: ${sub}, with predicate: ${predicate}`)
+
+    if (!sub.uri || sub.uri in optionsFromClassUIfrom) continue;
+    optionsFromClassUIfrom[sub.uri] = true;
+  }
+
+  var isEmpty = Object.keys(optionsFromClassUIfrom).length === 0;
+
+  if (isEmpty && !options.mint) {
+    return (0, _error.errorMessageBlock)(dom, "Can't do selector with no options, subject= " + subject + ' property = ' + predicate + '.');
+  }
+
+  log.debug('makeSelectForChoice: dataDoc=' + dataDoc);
+
+  function createDefaultSelectOptionText() {
+    var firstSelectOptionText = '--- choice ---';
+
+    if (predicate && !(predicate.termType === 'BlankNode')) {
+      firstSelectOptionText = '* Select for property: ' + utils.label(predicate) + ' *';
+    }
+
+    if (subject && !(subject.termType === 'BlankNode')) {
+      firstSelectOptionText = '* Select for ' + utils.label(subject, true) + ' *';
+    }
+
+    return firstSelectOptionText;
+  }
+
+  function createDefaultSelectOption() {
+    var option = dom.createElement('option');
+    option.appendChild(dom.createTextNode(createDefaultSelectOptionText()));
+    option.disabled = true;
+    option.value = true;
+    option.hidden = true;
+    option.selected = true;
+    return option;
+  }
+
+  var onChange = function onChange(_e) {
+    container.removeChild(container.lastChild);
+    select.refresh();
+  };
+
+  var select = dom.createElement('select');
+  select.setAttribute('style', style.formSelectSTyle);
+  select.setAttribute('id', 'formSelect');
+  select.currentURI = null;
+
+  for (var uri in optionsFromClassUIfrom) {
+    select.appendChild(createOption(uri));
+  }
+
+  if (editable && options.mint) {
+    var mint = dom.createElement('option');
+    mint.appendChild(dom.createTextNode(options.mint));
+    mint.AJAR_mint = true; // Flag it
+
+    select.insertBefore(mint, select.firstChild);
+  }
+
+  if (select.children.length === 0) select.insertBefore(createDefaultSelectOption(), select.firstChild);
+
+  select.update = function (newSelectedOptions) {
+    selectedOptions = newSelectedOptions;
+    var ds = [];
+    var is = [];
+
+    var removeValue = function removeValue(t) {
+      if (kb.holds(subject, predicate, t, dataDoc)) {
+        ds.push($rdf.st(subject, predicate, t, dataDoc));
+      }
+    };
+
+    var addValue = function addValue(t) {
+      if (!kb.holds(subject, predicate, t, dataDoc)) {
+        is.push($rdf.st(subject, predicate, t, dataDoc)); // console.log("----value added " + t)
+      }
+
+      if (uiFrom && !kb.holds(t, ns.rdf('type'), kb.sym(uiFrom), dataDoc)) {
+        is.push($rdf.st(t, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // console.log("----added type to value " + uiFrom)
+      }
+    };
+
+    var existingValues = kb.each(subject, predicate, null, dataDoc).map(function (object) {
+      return object.value;
+    });
+
+    var _iterator2 = _createForOfIteratorHelper(existingValues),
+        _step2;
+
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var value = _step2.value;
+        if (!containsObject(value, selectedOptions)) removeValue($rdf.sym(value));
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+
+    var _iterator3 = _createForOfIteratorHelper(selectedOptions),
+        _step3;
+
+    try {
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var _value = _step3.value;
+        if (!(_value in existingValues)) addValue($rdf.sym(_value));
+      }
+    } catch (err) {
+      _iterator3.e(err);
+    } finally {
+      _iterator3.f();
+    }
+
+    kb.updater.update(ds, is, function (uri, ok, body) {
+      if (!ok) return select.parentNode.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in select: ' + body));
+      select.refresh();
+      if (callbackFunction) callbackFunction(ok, {
+        widget: 'select',
+        event: 'change'
+      });
+    });
+  };
+
+  select.refresh = function () {
+    select.disabled = true; // unlocked any conflict we had got into
+
+    var is = [];
+    var newObject;
+
+    for (var _i5 = 0; _i5 < select.options.length; _i5++) {
+      var opt = select.options[_i5];
+
+      if (opt.selected && opt.AJAR_mint) {
+        // not sure if this 'if' is used because I cannot find mintClass
+        if (options.mintClass) {
+          var thisForm = promptForNew(dom, kb, subject, predicate, uiFrom, options.subForm, dataDoc, function (ok, body) {
+            if (!ok) {
+              callbackFunction(ok, body, {
+                change: 'new'
+              }); // @@ if ok, need some form of refresh of the select for the new thing
+            }
+          });
+          select.parentNode.appendChild(thisForm);
+          newObject = thisForm.AJAR_subject;
+        } else {
+          newObject = newThing(dataDoc);
+        }
+
+        is.push($rdf.st(subject, predicate, kb.sym(newObject), dataDoc));
+        if (uiFrom) is.push($rdf.st(newObject, ns.rdf('type'), kb.sym(uiFrom), dataDoc)); // not sure if this 'if' is used because I cannot find mintStatementsFun
+
+        if (options.mintStatementsFun) {
+          is = is.concat(options.mintStatementsFun(newObject));
+        }
+
+        select.currentURI = newObject;
+      }
+
+      if (!opt.AJAR_uri) continue; // a prompt or mint
+
+      if (opt.selected && containsObject(opt.AJAR_uri, selectedOptions)) {
+        select.currentURI = opt.AJAR_uri;
+      }
+
+      if (!containsObject(opt.AJAR_uri, selectedOptions)) opt.removeAttribute('selected');
+      if (containsObject(opt.AJAR_uri, selectedOptions)) opt.setAttribute('selected', 'true');
+    }
+
+    log.info('selectForOptions: data doc = ' + dataDoc);
+
+    if (select.currentURI && options.subForm && !options.multiSelect) {
+      addSubFormChoice(dom, container, {}, $rdf.sym(select.currentURI), options.subForm, dataDoc, function (ok, body) {
+        if (ok) {
+          kb.updater.update([], is, function (uri, success, errorBody) {
+            if (!success) container.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating select: ' + errorBody));
+          });
+          if (callbackFunction) callbackFunction(ok, {
+            widget: 'select',
+            event: 'new'
+          });
+        } else {
+          container.appendChild((0, _error.errorMessageBlock)(dom, 'Error updating data in field of select: ' + body));
+        }
+      });
+    }
+
+    select.disabled = false;
+  };
+
+  function createOption(uri) {
+    var option = dom.createElement('option');
+    var c = kb.sym(uri);
+    var label;
+
+    if (options.disambiguate) {
+      label = utils.labelWithOntology(c, true); // Init. cap
+    } else {
+      label = utils.label(c, true);
+    }
+
+    option.appendChild(dom.createTextNode(label)); // Init.
+
+    option.setAttribute('value', uri);
+    var backgroundColor = kb.any(c, kb.sym('http://www.w3.org/ns/ui#backgroundColor'));
+
+    if (backgroundColor) {
+      option.setAttribute('style', 'background-color: ' + backgroundColor.value + '; ');
+    }
+
+    option.AJAR_uri = uri;
+
+    if (containsObject(c.value, selectedOptions)) {
+      option.setAttribute('selected', 'true');
+    }
+
+    return option;
+  }
+
+  if (editable) {
+    select.addEventListener('change', onChange, false);
+  }
+
+  return select;
+} // makeSelectForChoice
+
+
+function containsObject(obj, list) {
+  var i;
+
+  for (i = 0; i < list.length; i++) {
+    if (list[i] === obj) {
+      return true;
+    }
+  }
+
+  return false;
+} // This functions replaces the findMembersNT (thisClass) from rdflib until we fix: https://github.com/linkeddata/rdflib.js/issues/565
+
+/**
+ * For anything which has thisClass (or any subclass) as its type,
+ * or is the object of something which has thisClass (or any subclass) as its range,
+ * or subject of something which has thisClass (or any subclass) as its domain
+ * We don't bother doing subproperty (yet?) as it doesn't seem to be used
+ * much.
+ * Get all the Classes of which we can RDFS-infer the subject is a member
+ * @return a hash of URIs
+ */
+
+
+function findMembersNT(store, thisClass, quad) {
+  var len2;
+  var len4;
+  var m;
+  var pred;
+  var ref1;
+  var ref2;
+  var ref3;
+  var ref4;
+  var ref5;
+  var st;
+  var u;
+  var seeds = {};
+  seeds[thisClass.toNT()] = true;
+  var members = {};
+  var ref = store.transitiveClosure(seeds, store.rdfFactory.namedNode('http://www.w3.org/2000/01/rdf-schema#subClassOf'), true);
+
+  for (var t in ref) {
+    ref1 = store.statementsMatching(null, store.rdfFactory.namedNode('http://www.w3.org/1999/02/22-rdf-syntax-ns#type'), store.fromNT(t), quad);
+
+    for (var i = 0, len = ref1.length; i < len; i++) {
+      st = ref1[i];
+      members[st.subject.toNT()] = st;
+    }
+
+    ref2 = store.each(null, store.rdfFactory.namedNode('http://www.w3.org/2000/01/rdf-schema#domain'), store.fromNT(t), quad);
+
+    for (var l = 0, len1 = ref2.length; l < len1; l++) {
+      pred = ref2[l];
+      ref3 = store.statementsMatching(null, pred, null, quad);
+
+      for (m = 0, len2 = ref3.length; m < len2; m++) {
+        st = ref3[m];
+        members[st.subject.toNT()] = st;
+      }
+    }
+
+    ref4 = store.each(null, store.rdfFactory.namedNode('http://www.w3.org/2000/01/rdf-schema#range'), store.fromNT(t), quad);
+
+    for (var q = 0, len3 = ref4.length; q < len3; q++) {
+      pred = ref4[q];
+      ref5 = store.statementsMatching(null, pred, null, quad);
+
+      for (u = 0, len4 = ref5.length; u < len4; u++) {
+        st = ref5[u];
+        members[st.object.toNT()] = st;
+      }
+    }
+  }
+
+  return members;
+}
 //# sourceMappingURL=forms.js.map