adapt-authoring-ui 0.0.1

package/app/modules/scaffold/backboneFormsOverrides.js

@@ -0,0 +1,284 @@
+define([
+  'core/origin',
+  'backboneForms',
+], function(Origin, BackboneForms) {
+  var templates = Handlebars.templates;
+  var fieldTemplate = templates.field;
+  var templateData = Backbone.Form.Field.prototype.templateData;
+  var initialize = Backbone.Form.editors.Base.prototype.initialize;
+  var textInitialize = Backbone.Form.editors.Text.prototype.initialize;
+  var textAreaRender = Backbone.Form.editors.TextArea.prototype.render;
+  var textAreaSetValue = Backbone.Form.editors.TextArea.prototype.setValue;
+
+  Backbone.Form.prototype.constructor.template = templates.form;
+  Backbone.Form.Fieldset.prototype.template = templates.fieldset;
+  Backbone.Form.Field.prototype.template = fieldTemplate;
+  Backbone.Form.NestedField.prototype.template = fieldTemplate;
+
+  // add reset to default handler
+  Backbone.Form.Field.prototype.events = {
+    'click [data-action="default"]': function() {
+      this.setValue(this.editor.defaultValue);
+      this.editor.trigger('change', this);
+
+      return false;
+    }
+  };
+
+  // merge schema into data
+  Backbone.Form.Field.prototype.templateData = function() {
+    return _.extend(templateData.call(this), this.schema, {
+      isDefaultValue: _.isEqual(this.editor.value, this.editor.defaultValue)
+    });
+  };
+
+  // use default from schema and set up isDefaultValue toggler
+  Backbone.Form.editors.Base.prototype.initialize = function(options) {
+    var schemaDefault = options.schema.default;
+
+    if (schemaDefault !== undefined && options.id) {
+      this.defaultValue = schemaDefault;
+    }
+
+    this.listenTo(this, 'change', function() {
+      if (this.hasNestedForm) return;
+
+      var isDefaultValue = _.isEqual(this.getValue(), this.defaultValue);
+
+      this.form.$('[data-editor-id="' + this.id + '"]')
+        .toggleClass('is-default-value', isDefaultValue);
+    });
+
+    initialize.call(this, options);
+  };
+
+  // disable automatic completion on text fields if not specified
+  Backbone.Form.editors.Text.prototype.initialize = function(options) {
+    textInitialize.call(this, options);
+
+    if (!this.$el.attr('autocomplete')) {
+      this.$el.attr('autocomplete', 'off');
+    }
+  };
+
+  // render ckeditor in textarea
+  Backbone.Form.editors.TextArea.prototype.render = function() {
+    textAreaRender.call(this);
+    function until(conditionFunction) {
+      function poll(resolve) {
+        if (conditionFunction()) {
+          resolve();
+          return;
+        }
+        setTimeout(function() {
+          poll(resolve)
+        }, 10);
+      }
+      return new Promise(poll);
+    }
+    function isAttached($element) {
+      return function() {
+        return Boolean($element.parents('body').length);
+      };
+    }
+
+    until(isAttached(this.$el)).then(() => {
+      return CKEDITOR.create(this.$el[0], {
+        htmlSupport: {
+          allow: [
+            {
+              name: /.*/,
+              attributes: true,
+              classes: true,
+              styles: true
+            }
+          ]
+        },
+        plugins: window.CKEDITOR.pluginsConfig.concat(function ItalicAsEmPlugin(editor) {
+          editor.conversion.attributeToElement({
+            model: 'italic',
+            view: 'em',
+            converterPriority: 'high'
+          });
+        }),
+        link: {
+          decorators: {
+            openInNewTab: {
+              mode: 'manual',
+              label: Origin.l10n.t('app.openintab'),
+              defaultValue: true,
+              attributes: {
+                target: '_blank',
+                rel: 'noopener noreferrer'
+              }
+            },
+            download: {
+              mode: 'manual',
+              label: Origin.l10n.t('app.forcedownload'),
+              attributes: {
+                download: 'download'
+              }
+            }
+          },
+          defaultProtocol: 'http://'
+        },
+        toolbar: {
+          items: [
+            'sourceEditing',
+            'showBlocks',
+            'undo',
+            'redo',
+            '|',
+            'findAndReplace',
+            'selectAll',
+            '|',
+            'numberedList',
+            'bulletedList',
+            'blockQuote',
+            'indent',
+            'outdent',
+            '|',
+            'bold',
+            'italic',
+            'underline',
+            'strikethrough',
+            'subscript',
+            'superscript',
+            'alignment',
+            'removeFormat',
+            '|',
+            'link',
+            'fontColor',
+            'fontBackgroundColor',
+            '|',
+            'specialCharacters',
+            'insertTable'
+          ],
+          shouldNotGroupWhenFull: true
+        }
+      }).then(editor => {
+        this.editor = editor
+        CKEDITOR.instances = CKEDITOR.instances || []
+        CKEDITOR.instances.length = CKEDITOR.instances.length || 0;
+        this.editor.id = CKEDITOR.instances.length
+        CKEDITOR.instances.length++;
+        CKEDITOR.instances[this.editor.id] = this.editor
+      }).catch(e => console.error(e));
+    });
+    return this;
+  };
+
+  // get data from ckeditor in textarea
+  Backbone.Form.editors.TextArea.prototype.getValue = function() {
+    return this.editor.getData();
+  };
+
+  // set value in ckeditor
+  Backbone.Form.editors.TextArea.prototype.setValue = function(value) {
+    textAreaSetValue.call(this, value);
+
+    if (this.editor) {
+      this.editor.setData(value);
+    }
+  };
+
+  // ckeditor removal
+  Backbone.Form.editors.TextArea.prototype.remove = async function() {
+    this.editor.stopListening()
+    delete CKEDITOR.instances[this.editor]
+  };
+
+  // add override to allow prevention of validation
+  Backbone.Form.prototype.validate = function(options) {
+    var self = this;
+    var fields = this.fields;
+    var model = this.model;
+    var errors = {};
+
+    options = options || {};
+
+    //Collect errors from schema validation
+    // passing in validate: false will stop validation of the backbone forms validators
+    if (!options.skipModelValidate) {
+      _.each(fields, function(field) {
+        var error = field.validate();
+        if (!error) {
+          return;
+        }
+        // add title to error if at field level
+        if (typeof error.type === 'string') {
+          error.title = field.schema.title;
+        }
+        errors[field.key] = error;
+      });
+    }
+
+    //Get errors from default Backbone model validator
+    if (!options.skipModelValidate && model && model.validate) {
+      var modelErrors = model.validate(this.getValue());
+
+      if (modelErrors) {
+        var isDictionary = _.isObject(modelErrors) && !_.isArray(modelErrors);
+
+        //If errors are not in object form then just store on the error object
+        if (!isDictionary) {
+          errors._others = errors._others || [];
+          errors._others.push(modelErrors);
+        }
+
+        //Merge programmatic errors (requires model.validate() to return an object e.g. { fieldKey: 'error' })
+        if (isDictionary) {
+          _.each(modelErrors, function(val, key) {
+            //Set error on field if there isn't one already
+            if (fields[key] && !errors[key]) {
+              fields[key].setError(val);
+              errors[key] = val;
+            }
+
+            else {
+              //Otherwise add to '_others' key
+              errors._others = errors._others || [];
+              var tmpErr = {};
+              tmpErr[key] = val;
+              errors._others.push(tmpErr);
+            }
+          });
+        }
+      }
+    }
+
+    return _.isEmpty(errors) ? null : errors;
+  };
+
+  // allow hyphen to be typed in number fields
+  Backbone.Form.editors.Number.prototype.onKeyPress = function(event) {
+    var self = this,
+      delayedDetermineChange = function() {
+        setTimeout(function() {
+        self.determineChange();
+      }, 0);
+    };
+
+    //Allow backspace
+    if (event.charCode === 0) {
+      delayedDetermineChange();
+      return;
+    }
+
+    //Get the whole new value so that we can prevent things like double decimals points etc.
+    var newVal = this.$el.val()
+    if( event.charCode != undefined ) {
+      newVal = newVal + String.fromCharCode(event.charCode);
+    }
+
+    var numeric = /^-?[0-9]*\.?[0-9]*?$/.test(newVal);
+
+    if (numeric) {
+      delayedDetermineChange();
+    }
+    else {
+      event.preventDefault();
+    }
+  };
+
+});

package/app/modules/scaffold/index.js

@@ -0,0 +1,342 @@
+define([
+  'core/origin',
+  'core/helpers',
+  'backboneForms',
+  'backboneFormsLists',
+  './backboneFormsOverrides',
+  './views/scaffoldAssetItemView',
+  './views/scaffoldAssetView',
+  './views/scaffoldCodeEditorView',
+  './views/scaffoldColourPickerView',
+  './views/scaffoldDisplayTitleView',
+  './views/scaffoldFileView',
+  './views/scaffoldItemsModalView',
+  './views/scaffoldListView',
+  './views/scaffoldTagsView',
+  './views/scaffoldUsersView'
+], function(Origin, Helpers, BackboneForms, BackboneFormsLists, Overrides, ScaffoldAssetItemView, ScaffoldAssetView, ScaffoldCodeEditorView, ScaffoldColourPickerView, ScaffoldDisplayTitleView, ScaffoldFileView, ScaffoldItemsModalView, ScaffoldListView, ScaffoldTagsView, ScaffoldUsersView) {
+
+  var Scaffold = {};
+  var alternativeModel;
+  var alternativeAttribute;
+  var currentModel;
+  var currentForm;
+  var ActiveItemsModal = 0;
+  var isOverlayActive = false;
+  var defaultValidators = Object.keys(Backbone.Form.validators);
+  var customValidators = [];
+  var customTemplates = [];
+
+  Backbone.Form.editors.List.Modal.ModalAdapter = ScaffoldItemsModalView;
+
+  function generateFieldObject(field, key) {
+    var fieldType = field.type;
+    var isFieldTypeObject = fieldType === 'object';
+    var items = field.items;
+    var itemsProperties = items && items.properties;
+    var confirmDelete = Origin.l10n.t('app.confirmdelete');
+    var formsConfig = field._backboneForms || {};
+
+    var getType = function(item) {
+      if (!item) {
+        item = field;
+      }
+      var config = item._backboneForms;
+      var editor = typeof config === 'string' ? config : config && config.type;
+
+      if (editor) {
+        return editor;
+      }
+      switch (item.type) {
+        case 'array':
+          return 'List';
+        case 'boolean':
+          return 'Checkbox';
+        case 'number':
+          return 'Number';
+        case 'object':
+          return 'Object';
+        case 'string':
+          return 'Text';
+      }
+    };
+
+    var getValidators = function() {
+      var validators = formsConfig.validators || [];
+
+      for (var i = 0, j = validators.length; i < j; i++) {
+        var validator = validators[i];
+
+        if (!validator) continue;
+
+        var isDefaultValidator = !Array.isArray(validator) && _.isObject(validator) ||
+          _.contains(defaultValidators, validator);
+
+        if (isDefaultValidator) continue;
+
+        var customValidator = _.findWhere(customValidators, { name: validator });
+
+        if (customValidator) {
+          validators[i] = customValidator.validatorMethod;
+          continue;
+        }
+
+        validators[i] = '';
+
+        console.log('No validator of that sort – please register "' + validator +
+          '" by using Origin.scaffold.addCustomValidator("' + validator +
+          '", validatorMethod);');
+      }
+
+      return validators.filter(Boolean);
+    };
+
+    var fieldObject = {
+      confirmDelete: itemsProperties ? confirmDelete : formsConfig.confirmDelete,
+      default: field.default,
+      editorAttrs: formsConfig.editorAttrs,
+      editorClass: formsConfig.editorClass,
+      fieldAttrs: formsConfig.fieldAttrs,
+      fieldClass: formsConfig.fieldClass,
+      help: field.description,
+      itemType: itemsProperties ? 'Object' : items && getType(items),
+      inputType: formsConfig.type ? formsConfig : getType(),
+      options: field.enum,
+      subSchema: isFieldTypeObject ? field.properties : itemsProperties || items,
+      title: field.title,
+      titleHTML: formsConfig.titleHTML,
+      type: getType(),
+      validators: getValidators()
+    };
+    return fieldObject;
+  }
+
+  function setUpSchemaFields(field, key, schema, scaffoldSchema) {
+    scaffoldSchema[key] = generateFieldObject(field, key);
+
+    var objectSchema = schema[key].properties || schema[key].subSchema;
+    var scaffoldObjectSchema = scaffoldSchema[key].subSchema;
+
+    for (var i in objectSchema) {
+      if (!objectSchema.hasOwnProperty(i)) continue;
+
+      var objectField = objectSchema[i];
+
+      setRequiredValidators(objectField.required, objectField.properties);
+      setUpSchemaFields(objectField, i, objectSchema, scaffoldObjectSchema);
+    }
+  }
+
+  /**
+   * The following attributes won't be rendered in the front-end forms
+   * @HACK @TODO this should be filtered with some useful logic
+   */
+  var ATTRIBUTE_BLACKLIST = [
+    '_colorLabel',
+    '_component',
+    '_componentType',
+    '_courseId',
+    '_enabledPlugins',
+    '_hasPreview',
+    '_id',
+    '_isSelected',
+    '_latestTrackingId',
+    '_layout',
+    '_menu',
+    '_parentId',
+    '_sortOrder',
+    '_supportedLayout',
+    '_theme',
+    '_themePreset',
+    '_trackingId',
+    '_type',
+    'createdAt',
+    'createdBy',
+    'layoutOptions',
+    'menuSettings',
+    'themeSettings',
+    'themeVariables',
+    'updatedAt',
+    'userGroups',
+  ];
+  function buildSchema(requiredKeys, properties) {
+    var scaffoldSchema = {};
+
+    const blacklist = [...ATTRIBUTE_BLACKLIST];
+
+    Object.entries(properties).forEach(([k,v]) => {
+      try {
+        if(v._backboneForms.showInUi === false && !blacklist.includes(k)) blacklist.push(k)
+      } catch(e) {}
+    });
+    properties = _.omit(properties, blacklist);
+    trimEmptyProperties(properties);
+    setRequiredValidators(_.without(requiredKeys, ...blacklist), properties);
+    properties = { type: 'object', properties };
+    setUpSchemaFields(properties, 'properties', { properties }, scaffoldSchema);
+
+    return scaffoldSchema.properties.subSchema;
+  }
+
+  function trimEmptyProperties(object) {
+    for (var key in object) {
+      if (!object.hasOwnProperty(key) || object[key].type !== 'object' || object[key]._backboneForms) continue;
+      if (_.isEmpty(object[key].properties)) delete object[key];
+    }
+  }
+
+  function buildFieldsets(schema, options) {
+    var fieldsets = {
+      general: { key: 'general', legend: Origin.l10n.t('app.scaffold.general'), fields: [] },
+      properties: { key: 'properties', legend: Origin.l10n.t('app.scaffold.properties'), fields: [] },
+      settings: { key: 'settings', legend: Origin.l10n.t('app.scaffold.settings'), fields: [] },
+      _extensions: { key: 'extensions', legend: Origin.l10n.t('app.scaffold.extensions'), fields: [ '_extensions' ] }
+    };
+
+    for (var key in schema) {
+      if (!schema.hasOwnProperty(key) || key === '_extensions') continue;
+
+      var value = schema[key];
+      var adaptConfig = value._adapt;
+
+      if (adaptConfig && adaptConfig.isSetting) {
+        fieldsets.settings.fields.push(key);
+        continue;
+      }
+      if (value.type !== 'object') {
+        fieldsets.general.fields.push(key);
+        continue;
+      }
+      if (fieldsets[key]) {
+        fieldsets[key].fields.push(key);
+        continue;
+      }
+      fieldsets[key] = {
+        key: key,
+        legend: value.title,
+        description: value.description,
+        fields: [key]
+      };
+      // stop the titles displaying twice
+      var backboneSchema = options.model.schema[key];
+      if(backboneSchema) backboneSchema.title = backboneSchema.help = undefined;
+    }
+    // remove any empty fieldsets
+    Object.keys(fieldsets).forEach(k => {
+      const fields = fieldsets[k].fields;
+      if(!fields) {
+        return;
+      }
+      /*
+      * Delete any 'empty' fieldsets:
+      * - No fields specified
+      * - Only an empty object with no sub-props exists on the schema, so there's nothing to render
+      * */
+     const noFieldsOnSchema = fields.some(f => {
+      return !schema[f] || (schema[f].type === 'object' && (schema[f].properties === undefined && !schema[f]._backboneForms));
+     });
+      if(!fields.length || noFieldsOnSchema) delete fieldsets[k];
+    });
+    return _.values(fieldsets);
+  }
+
+  function setRequiredValidators(requiredKeys, schema) {
+    if (!requiredKeys) return;
+
+    requiredKeys.forEach(function(requiredKey) {
+      var field = schema[requiredKey];
+      if(!field) {
+        throw new Error(`Required attribute '${requiredKey}' not present on schema, ${JSON.stringify(schema, null, 2)}`);
+      }
+      var config = field._backboneForms || {};
+
+      if (typeof config === 'string') {
+        field._backboneForms = { type: config, validators: [ 'required' ] };
+        return;
+      }
+      (config.validators = config.validators || []).push('required');
+      field._backboneForms = config;
+    });
+  }
+
+  Scaffold.buildFormInternal = async function(options) {
+    var model = options.model;
+    var schemaType = model.get('_type') || model._type || model.get('type') || model.type || options.schemaType;
+
+    if(schemaType === 'menu' || schemaType === 'page') {
+      schemaType = 'contentobject';
+    } else if(schemaType === 'component') {
+      try {
+        schemaType = `component&_component=${model.get('_component')}`;
+      } catch(e) {} // nothing to do
+    }
+    const query = model.get('_courseId') ? `&_courseId=${model.get('_courseId')}` : '';
+    const schema = await $.getJSON(`api/content/schema?_type=${schemaType}${query}`);
+
+    options.model.schema = buildSchema(schema.required, schema.properties);
+    options.fieldsets = buildFieldsets(schema.properties, options);
+    alternativeModel = options.alternativeModelToSave;
+    alternativeAttribute = options.alternativeAttributeToSave;
+    currentModel = options.model;
+    currentForm = new Backbone.Form(options).render();
+    return currentForm;
+  };
+
+  Scaffold.buildForm = async function(options) {
+    try {
+      return await Scaffold.buildFormInternal(options);
+    } catch(e) {
+      console.trace(e);
+      throw new Error(Origin.l10n.t('app.formbuilderror'));
+    }
+  };
+
+  Scaffold.addCustomField = function(fieldName, view, overwrite) {
+    if (Backbone.Form.editors[fieldName] && !overwrite) {
+      console.log('Sorry, the custom field you’re trying to add already exists');
+    } else {
+      Backbone.Form.editors[fieldName] = view;
+    }
+  };
+
+  Scaffold.addCustomTemplate = function(templateName, template, overwrite) {
+    if (!templateName || !template) {
+      return console.log('Custom templates need a name and template');
+    }
+    if (customTemplates[templateName] && !overwrite) {
+      console.log('Sorry, the custom template you’re trying to add already exists');
+    } else {
+      customTemplates[templateName] = template;
+    }
+  };
+  /**
+   * @example
+   * Scaffold.addCustomValidator('title', function(value, formValues) {
+   *   if(value.length > 11) return;
+   *   return { type: 'password', message: 'Passwords must be at least 12 characters long' };
+   * });
+   */
+  Scaffold.addCustomValidator = function(name, validatorMethod) {
+    if (!name || !validatorMethod) {
+      console.log('Custom validators need a name and validatorMethod');
+    } else {
+      customValidators.push({ name: name, validatorMethod: validatorMethod });
+    }
+  };
+  Scaffold.getCurrentModel = () => currentModel;
+  Scaffold.getCurrentForm = () => currentForm;
+  Scaffold.getAlternativeModel = () => alternativeModel;
+  Scaffold.getAlternativeAttribute = () => alternativeAttribute;
+  Scaffold.getCurrentActiveModals = () => ActiveItemsModal;
+  Scaffold.isOverlayActive = () => isOverlayActive;
+  Scaffold.setOverlayActive = value => isOverlayActive = value;
+  Scaffold.addCustomField('Boolean', Backbone.Form.editors.Checkbox);
+  Scaffold.addCustomField('QuestionButton', Backbone.Form.editors.Text);
+
+  Origin.on({
+    'scaffold:increaseActiveModals': () => ActiveItemsModal++,
+    'scaffold:decreaseActiveModals': () => ActiveItemsModal--
+  });
+
+  Origin.scaffold = Scaffold;
+});

package/app/modules/scaffold/lang/en.json

@@ -0,0 +1,9 @@
+{
+  "app.scaffold": {
+    "general": "General",
+    "properties": "Properties",
+    "settings": "Settings",
+    "extensions": "Extensions",
+    "colourPickerCancel": "Cancel selection"
+  }
+}

package/app/modules/scaffold/less/codeEditor.less

@@ -0,0 +1,6 @@
+.scaffold-code-editor {
+  height: 200px;
+  width: 93%;
+  border: 1px solid #ccc;
+  margin-bottom: 25px;
+}