apostrophe 3.5.0 → 3.8.1

package/modules/@apostrophecms/task/index.js

@@ -219,8 +219,8 @@ module.exports = {
         };
         addCloneMethod(req);
         req.res.__ = req.__;
-        const { role, ..._properties } = options || {};
-        Object.assign(req, _properties);
+        const { _role, ...properties } = options || {};
+        Object.assign(req, properties);
         self.apos.i18n.setPrefixUrls(req);
         return req;
 

package/modules/@apostrophecms/template/index.js

@@ -61,11 +61,14 @@ module.exports = {
       prefix: self.apos.prefix
     };
 
+    self.envs = {};
+
     self.filters = {};
 
     self.nunjucks = self.options.language || require('nunjucks');
 
     self.insertions = {};
+
   },
   handlers(self) {
     return {
@@ -248,6 +251,34 @@ module.exports = {
 
         let result;
 
+        const args = self.getRenderArgs(req, data, module);
+
+        const env = self.getEnv(req, module);
+
+        if (type === 'file') {
+          let finalName = s;
+          if (!finalName.match(/\.\w+$/)) {
+            finalName += '.html';
+          }
+          result = await Promise.promisify(function (finalName, args, callback) {
+            return env.getTemplate(finalName).render(args, callback);
+          })(finalName, args);
+        } else if (type === 'string') {
+          result = await Promise.promisify(function (s, args, callback) {
+            return env.renderString(s, args, callback);
+          })(s, args);
+        } else {
+          throw new Error('renderBody does not support the type ' + type);
+        }
+        return result;
+      },
+
+      // Implementation detail of `renderBody` responsible for
+      // creating the input object passed to Nunjucks for rendering,
+      // with `data` merged into the `.data` property,
+      // `apos` available separately, `__req` available separately, etc.
+
+      getRenderArgs(req, data, module) {
         const merged = {};
 
         if (data) {
@@ -278,8 +309,6 @@ module.exports = {
 
         args.data.locale = args.data.locale || req.locale;
 
-        const env = self.getEnv(req, module);
-
         args.apos = self.templateApos;
         args.__t = req.t;
         args.__ = key => {
@@ -289,39 +318,39 @@ module.exports = {
           `);
           return key;
         };
-        if (type === 'file') {
-          let finalName = s;
-          if (!finalName.match(/\.\w+$/)) {
-            finalName += '.html';
+        args.__req = req;
+        args.getOption = (key, def) => {
+          const colonAt = key.indexOf(':');
+          let optionModule = self.apos.modules[module.__meta.name];
+          if (colonAt !== -1) {
+            const name = key.substring(0, colonAt);
+            key = key.substring(colonAt + 1);
+            optionModule = self.apos.modules[name];
           }
-          result = await Promise.promisify(function (finalName, args, callback) {
-            return env.getTemplate(finalName).render(args, callback);
-          })(finalName, args);
-        } else if (type === 'string') {
-          result = await Promise.promisify(function (s, args, callback) {
-            return env.renderString(s, args, callback);
-          })(s, args);
-        } else {
-          throw new Error('renderBody does not support the type ' + type);
-        }
-        return result;
+          return optionModule.getOption(req, key, def);
+        };
+        return args;
       },
 
       // Fetch a nunjucks environment in which `include`, `extends`, etc. search
       // the views directories of the specified module and its ancestors.
       // Typically you will call `self.render` or `self.partial` on your module
       // object rather than calling this directly.
+      //
+      // `req` is effectively here for bc purposes only. This method
+      // does NOT always pass `req` to `newEnv` for every new release, as
+      // `req` is separately supplied to each request to fix a memory leak
+      // that occurs when Nunjucks environments are created for every request.
 
       getEnv(req, module) {
         const name = module.__meta.name;
-
-        req.envs = req.envs || {};
-        // Cache for performance
-        if (_.has(req.envs, name)) {
-          return req.envs[name];
+        if (!_.has(self.envs, name)) {
+          // Pass the original req for bc purposes only,
+          // note that due to the reuse of envs there is
+          // no guarantee newEnv will be called for every req
+          self.envs[name] = self.newEnv(req, name, self.getViewFolders(module));
         }
-        req.envs[name] = self.newEnv(req, name, self.getViewFolders(module));
-        return req.envs[name];
+        return self.envs[name];
       },
 
       getViewFolders(module) {
@@ -343,7 +372,14 @@ module.exports = {
       // specified directories are searched for includes,
       // etc. Don't call this directly, use:
       //
-      // apos.template.getEnv(module)
+      // apos.template.getEnv(req, module)
+      //
+      // `req` is effectively here for bc purposes only. Apostrophe
+      // does NOT always pass `req` to `newEnv` for every new release, as
+      // `req` is separately supplied to each request to fix a memory leak
+      // that occurs when Nunjucks environments are created for every request.
+      // If you must access `req` in a custom Nunjucks tag use
+      // `context.ctx.__req`, NOT `env.opts.req` which is no longer provided.
 
       newEnv(req, moduleName, dirs) {
 
@@ -351,22 +387,11 @@ module.exports = {
 
         const env = new self.nunjucks.Environment(loader, {
           autoescape: true,
-          req,
           module: self.apos.modules[moduleName]
         });
 
         env.addGlobal('apos', self.templateApos);
         env.addGlobal('module', self.templateApos.modules[moduleName]);
-        env.addGlobal('getOption', function(key, def) {
-          const colonAt = key.indexOf(':');
-          let optionModule = self.apos.modules[moduleName];
-          if (colonAt !== -1) {
-            const name = key.substring(0, colonAt);
-            key = key.substring(colonAt + 1);
-            optionModule = self.apos.modules[name];
-          }
-          return optionModule.getOption(req, key, def);
-        });
 
         self.addStandardFilters(env);
 
@@ -627,6 +652,8 @@ module.exports = {
           locale: req.locale,
           csrfCookieName: self.apos.csrfCookieName,
           tabId: self.apos.util.generateId(),
+          uploadsUrl: self.apos.attachment.uploadfs.getUrl(),
+          assetBaseUrl: self.apos.asset.getAssetBaseUrl(),
           scene
         };
         if (req.user) {

package/modules/@apostrophecms/template/lib/custom-tags/component.js

@@ -23,7 +23,7 @@ module.exports = function(self) {
     },
     // Do the actual work
     async run(context, name, data) {
-      const req = context.env.opts.req;
+      const req = context.ctx.__req;
       if (!data) {
         data = {};
       }

package/modules/@apostrophecms/template/lib/custom-tags/render.js

@@ -98,9 +98,8 @@ module.exports = (self) => {
       const source = info.body();
       const input = createRenderInput(info);
 
-      const req = context.env.opts.req;
+      const req = context.ctx.__req;
       const env = self.getEnv(req, context.env.opts.module);
-      input.apos = self.templateApos;
 
       // attach the render caller as a function
       // it's just a string, but we keep
@@ -108,6 +107,11 @@ module.exports = (self) => {
       input.rendercaller = rendercaller;
 
       const result = await require('util').promisify((s, args, callback) => {
+        args = {
+          ...self.getRenderArgs(req, {}, context.env.opts.module),
+          // Parameters to fragments are top level, they are not in `data`
+          ...args
+        };
         return env.renderString(s, args, callback);
       })(source, input);
       return result;

package/modules/@apostrophecms/ui/ui/apos/components/AposButton.vue

@@ -15,6 +15,7 @@
       :type="buttonType"
       :role="role"
       :id="attrs.id ? attrs.id : id"
+      :style="{color: textColor}"
       v-bind="attrs"
     >
       <transition name="fade">
@@ -71,6 +72,10 @@ export default {
       type: String,
       default: null
     },
+    textColor: {
+      type: String,
+      default: null
+    },
     href: {
       type: [ String, Boolean ],
       default: false
@@ -402,8 +407,6 @@ export default {
     box-sizing: border-box;
     display: block;
     width: 100%;
-    height: 47px;
-    max-width: 400px;
   }
 
   .apos-button--icon-right {

package/modules/@apostrophecms/ui/ui/apos/components/AposCellContextMenu.vue

@@ -64,7 +64,7 @@ export default {
   .apos-table__cell-field--context-menu__content {
     @include apos-transition();
     display: inline-block;
-    opacity: 0;
+    opacity: 0.3;
     &.apos-is-visible {
       opacity: 1;
     }

package/modules/@apostrophecms/ui/ui/apos/components/AposFile.vue

@@ -0,0 +1,205 @@
+<template>
+  <div>
+    <label
+      class="apos-input-wrapper apos-file-dropzone"
+      :class="{
+        'apos-file-dropzone--dragover': dragging,
+        'apos-is-disabled': disabled || fileOrAttachment
+      }"
+      @drop.prevent="uploadFile"
+      @dragover="dragHandler"
+      @dragleave="dragging = false"
+    >
+      <p class="apos-file-instructions">
+        <template v-if="dragging">
+          <cloud-upload-icon :size="38" />
+        </template>
+        <AposSpinner v-else-if="uploading" />
+        <template v-else>
+          <paperclip-icon :size="14" class="apos-file-icon" />
+          {{ messages.primary }}&nbsp;
+          <span class="apos-file-highlight" v-if="messages.highlighted">
+            {{ messages.highlighted }}
+          </span>
+        </template>
+      </p>
+      <input
+        type="file"
+        class="apos-sr-only"
+        :disabled="disabled || fileOrAttachment"
+        @input="uploadFile"
+        :accept="allowedExtensions"
+      >
+    </label>
+    <div v-if="fileOrAttachment" class="apos-file-files">
+      <AposSlatList
+        :value="[fileOrAttachment]"
+        @input="update"
+        :disabled="readOnly"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    uploading: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    attachment: {
+      type: Object,
+      default: null
+    },
+    allowedExtensions: {
+      type: String,
+      default: '*'
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    def: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [ 'upload-file', 'update' ],
+  data () {
+    return {
+      selectedFile: null,
+      dragging: false
+    };
+  },
+  computed: {
+    fileOrAttachment () {
+      return this.selectedFile || this.attachment;
+    },
+    messages () {
+      const msgs = {
+        primary: 'Drop a file here or',
+        highlighted: 'click to open the file explorer'
+      };
+      if (this.disabled) {
+        msgs.primary = 'Field is disabled';
+        msgs.highlighted = '';
+      }
+      if (this.fileOrAttachment) {
+        msgs.primary = 'Attachment limit reached';
+        msgs.highlighted = '';
+      }
+      return msgs;
+    }
+  },
+  methods: {
+    async uploadFile ({ target, dataTransfer }) {
+      this.dragging = false;
+      const [ file ] = target.files ? target.files : (dataTransfer.files || []);
+
+      const extension = file.name.split('.').pop();
+      const allowedFile = await this.checkFileGroup(`.${extension}`);
+
+      if (!allowedFile) {
+        return;
+      }
+
+      this.selectedFile = {
+        _id: file.name,
+        title: file.name,
+        extension,
+        _url: URL.createObjectURL(file)
+      };
+
+      this.$emit('upload-file', file);
+    },
+    dragHandler (event) {
+      event.preventDefault();
+
+      if (!this.disabled && !this.dragging) {
+        this.dragging = true;
+      }
+    },
+    update(items) {
+      if (this.selectedFile && this.selectedFile._url) {
+        URL.revokeObjectURL(this.selectedFile._url);
+      }
+
+      this.selectedFile = null;
+      this.$emit('update', items);
+    },
+    async checkFileGroup(fileExt) {
+      const allowedExt = this.allowedExtensions.split(',');
+      const allowed = allowedExt.includes(fileExt);
+
+      if (!allowed) {
+        await apos.notify('apostrophe:fileTypeNotAccepted', {
+          type: 'warning',
+          icon: 'alert-circle-icon',
+          interpolate: {
+            extensions: this.allowedExtensions
+          }
+        });
+      }
+
+      return allowed;
+    }
+  }
+};
+</script>
+<style scoped lang='scss'>
+  .apos-file-dropzone {
+    @include apos-button-reset();
+    @include type-base;
+    display: block;
+    margin: 10px 0;
+    padding: 20px;
+    border: 2px dashed var(--a-base-8);
+    border-radius: var(--a-border-radius);
+    transition: all 0.2s ease;
+    &:hover {
+      border-color: var(--a-primary);
+      background-color: var(--a-base-10);
+    }
+    &:active,
+    &:focus {
+      border: 2px solid var(--a-primary);
+    }
+    &.apos-is-disabled {
+      color: var(--a-base-4);
+      background-color: var(--a-base-7);
+      border-color: var(--a-base-4);
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .apos-file-dropzone--dragover {
+    border: 2px dashed var(--a-primary);
+    background-color: var(--a-base-10);
+  }
+
+  .apos-file-instructions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    // v-html goofiness
+    & ::v-deep .apos-file-highlight {
+      color: var(--a-primary);
+      font-weight: var(--a-weight-bold);
+    }
+  }
+
+  .apos-file-icon {
+    transform: rotate(45deg);
+    margin-right: 5px;
+  }
+</style>

package/modules/@apostrophecms/ui/ui/apos/lib/i18next.js

@@ -10,11 +10,20 @@ export default {
   install(Vue, options) {
     const i18n = options.i18n;
 
+    const fallbackLng = [ i18n.defaultLocale ];
+    // In case the default locale also has inadequate admin UI phrases
+    if (fallbackLng[0] !== 'en') {
+      fallbackLng.push('en');
+    }
+
     i18next.init({
       lng: i18n.locale,
-      fallbackLng: i18n.defaultLocale,
+      fallbackLng,
       resources: {},
-      debug: i18n.debug
+      debug: i18n.debug,
+      interpolation: {
+        escapeValue: false
+      }
     });
 
     for (const [ ns, phrases ] of Object.entries(i18n.i18n[i18n.locale])) {
@@ -25,6 +34,11 @@ export default {
         i18next.addResourceBundle(i18n.defaultLocale, ns, phrases, true, true);
       }
     }
+    if ((i18n.locale !== 'en') && (i18n.defaultLocale !== 'en')) {
+      for (const [ ns, phrases ] of Object.entries(i18n.i18n.en)) {
+        i18next.addResourceBundle('en', ns, phrases, true, true);
+      }
+    }
 
     // Like standard i18next $t, but also with support
     // for just one object argument with at least a `key`

package/modules/@apostrophecms/ui/ui/apos/scss/global/_tables.scss

@@ -5,7 +5,7 @@
 
 .apos-table__header {
   margin-bottom: $spacing-base;
-  padding: 12.5px 4.5px;
+  padding: 12.5px 15px;
   border-bottom: 1px solid var(--a-base-8);
   color: var(--a-base-3);
   text-align: left;
@@ -52,12 +52,13 @@ span.apos-table__header-label:hover {
   @include apos-transition(all, 0.05s);
 }
 .apos-table__cell {
-  padding: 5px;
+  padding: 5px 15px;
   border-bottom: 1px solid var(--a-base-10);
 }
 
 .apos-table__cell--context-menu  {
-  width: 40px;
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .apos-table__cell-field--context-menu  {

package/modules/@apostrophecms/util/index.js

@@ -414,7 +414,7 @@ module.exports = {
           return self.insensitiveSortCompare(a[property], b[property]);
         });
       },
-      // Copmpare two strings in a case-insensitive way, returning -1, 0 or 1, suitable for use with sort().
+      // Compare two strings in a case-insensitive way, returning -1, 0 or 1, suitable for use with sort().
       // If the two strings represent numbers, compare them as numbers for a natural sort order
       // when comparing strings like '4' and '10'.
       insensitiveSortCompare(a, b) {
@@ -858,7 +858,7 @@ module.exports = {
         return _.startCase(o);
       },
 
-      // check if something is a function (as opposd to property)
+      // check if something is a function (as opposed to property)
       isFunction: function(o) {
         return (typeof o === 'function');
       },

package/modules/@apostrophecms/util/ui/src/http.js

@@ -150,10 +150,12 @@ export default () => {
     if (options.busy) {
       if (!busyActive[busyName]) {
         busyActive[busyName] = 0;
-        apos.bus.$emit('busy', {
-          active: true,
-          name: busyName
-        });
+        if (apos.bus) {
+          apos.bus.$emit('busy', {
+            active: true,
+            name: busyName
+          });
+        }
       }
       // keep track of nested calls
       busyActive[busyName]++;
@@ -240,10 +242,12 @@ export default () => {
         busyActive[busyName]--;
         if (!busyActive[busyName]) {
           // if no nested calls, disable the "busy" state
-          apos.bus.$emit('busy', {
-            active: false,
-            name: busyName
-          });
+          if (apos.bus) {
+            apos.bus.$emit('busy', {
+              active: false,
+              name: busyName
+            });
+          }
         }
       }
     });

package/modules/@apostrophecms/util/ui/src/util.js

@@ -257,6 +257,21 @@ export default () => {
     return path + '.' + file.extension;
   };
 
+  // Given an asset path such as `/modules/modulename/images/file.png`, this
+  // method will return a URL for it. This is used when frontend JavaScript
+  // code needs to access static assets shipped in the `public` subdirectory of
+  // individual modules. Currently `path` must begin with `/modules/` followed
+  // by a module name; other namespaces may exist later. The remainder of the
+  // path, such as `/images/file.png` in the above example, must currespond
+  // to a file that exists in the `public` subdirectory of the named module.
+  //
+  // Asset paths of this type are also automatically supported by CSS and
+  // SCSS files in the project when using `url()`.
+
+  apos.util.assetUrl = function(path) {
+    return apos.assetBaseUrl + path;
+  };
+
   // Returns true if the uri references the same site (same host and port) as the
   // current page. Cross-browser implementation, valid at least back to IE11.
   // Regarding port numbers, this will match as long as the URIs are consistent

package/modules/@apostrophecms/widget-type/index.js

@@ -156,7 +156,7 @@ module.exports = {
         self.schema = self.apos.schema.compose({
           addFields: self.apos.schema.fieldsToArray(`Module ${self.__meta.name}`, self.fields),
           arrangeFields: self.apos.schema.groupsToArray(self.fieldsGroups)
-        });
+        }, self);
         const forbiddenFields = [
           '_id',
           'type'

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -19,6 +19,7 @@
               :schema="schema"
               :value="docFields"
               @input="updateDocFields"
+              @validate="triggerValidate"
               :following-values="followingValues()"
               :conditional-fields="conditionalFields()"
               ref="schema"

package/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js

@@ -23,7 +23,8 @@ export default {
   data() {
     return {
       rendered: '...',
-      playerOpts: null
+      playerOpts: null,
+      playerEl: null
     };
   },
   mounted() {
@@ -40,6 +41,7 @@ export default {
   },
   methods: {
     async renderContent() {
+      const self = this;
       const parameters = {
         _docId: this.docId,
         widget: this.value,
@@ -61,6 +63,7 @@ export default {
         // AposAreas manager can spot any new area divs.
         // This will also run the player
         setTimeout(function() {
+          self.setPlayerEl();
           apos.bus.$emit('widget-rendered');
         }, 0);
       } catch (e) {
@@ -68,13 +71,18 @@ export default {
         console.error('Unable to render widget. Possibly the schema has been changed and the existing widget does not pass validation.', e);
       }
     },
-    runPlayer() {
-      if (!this.playerOpts) {
-        return;
+    setPlayerEl() {
+      if (this.playerOpts) {
+        const el = this.$el.querySelector(this.playerOpts.selector);
+        if (el && this.playerOpts.player) {
+          this.playerEl = el;
+        }
       }
-      const el = this.$el.querySelector(this.playerOpts.selector);
-      if (el && this.playerOpts.player) {
-        this.playerOpts.player(el);
+    },
+    runPlayer() {
+      if (this.playerEl && !this.playerEl.aposWidgetPlayed) {
+        this.playerOpts.player(this.playerEl);
+        this.playerEl.aposWidgetPlayed = true;
       }
     },
     clicked(e) {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "apostrophe",
-  "version": "3.5.0",
+  "version": "3.8.1",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
-    "pretest": "npm run lint && npm audit",
+    "pretest": "npm run lint",
     "test": "nyc --reporter=html mocha -t 10000",
     "lint": "eslint . && node scripts/lint-i18n"
   },
@@ -127,7 +127,7 @@
     "eslint-loader": "^4.0.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-vue": "^7.9.0",
-    "mocha": "^7.1.2",
+    "mocha": "^9.1.2",
     "nyc": "^15.1.0",
     "replace-in-file": "^6.1.0",
     "vue-eslint-parser": "^7.1.1",