apostrophe 3.7.0 → 3.8.0

package/modules/@apostrophecms/schema/ui/apos/components/AposInputAttachment.vue

@@ -6,44 +6,15 @@
   >
     <template #body>
       <div class="apos-attachment">
-        <label
-          class="apos-input-wrapper apos-attachment-dropzone"
-          :class="{
-            'apos-attachment-dropzone--dragover': dragging,
-            'apos-is-disabled': disabled || limitReached
-          }"
-          @drop.prevent="uploadMedia"
-          @dragover="dragHandler"
-          @dragleave="dragging = false"
-        >
-          <p class="apos-attachment-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-attachment-icon" />
-              {{ messages.primary }}&nbsp;
-              <span class="apos-attachment-highlight" v-if="messages.highlighted">
-                {{ messages.highlighted }}
-              </span>
-            </template>
-          </p>
-          <input
-            type="file"
-            class="apos-sr-only"
-            :disabled="disabled || limitReached"
-            @input="uploadMedia"
-            :accept="field.accept"
-          >
-        </label>
-        <div v-if="next && next._id" class="apos-attachment-files">
-          <AposSlatList
-            :value="next ? [ next ] : []"
-            @input="updated"
-            :disabled="field.readOnly"
-          />
-        </div>
+        <AposFile
+          :allowed-extensions="field.accept"
+          :uploading="uploading"
+          :disabled="disabled"
+          :attachment="next"
+          :def="field.def"
+          @upload-file="uploadMedia"
+          @update="updated"
+        />
       </div>
     </template>
   </AposInputWrapper>
@@ -51,13 +22,9 @@
 
 <script>
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
-import AposSlatList from 'Modules/@apostrophecms/ui/components/AposSlatList';
 
 export default {
   name: 'AposInputAttachment',
-  components: {
-    AposSlatList
-  },
   mixins: [ AposInputMixin ],
   emits: [ 'upload-started', 'upload-complete' ],
   data () {
@@ -67,46 +34,13 @@ export default {
       next: (this.value && (typeof this.value.data === 'object'))
         ? this.value.data : (this.field.def || null),
       disabled: false,
-      dragging: false,
-      uploading: false,
-      allowedExtensions: [ '*' ]
+      uploading: false
     };
   },
-  computed: {
-    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.limitReached) {
-        msgs.primary = 'Attachment limit reached';
-        msgs.highlighted = '';
-      }
-      return msgs;
-    },
-    limitReached () {
-      return !!(this.value.data && this.value.data._id);
-    }
-  },
   async mounted () {
     this.disabled = this.field.readOnly;
-
-    const groups = apos.modules['@apostrophecms/attachment'].fileGroups;
-    const groupInfo = groups.find(group => {
-      return group.name === this.field.fileGroup;
-    });
-    if (groupInfo && groupInfo.extensions) {
-      this.allowedExtensions = groupInfo.extensions;
-    }
   },
   methods: {
-    watchNext () {
-      this.validateAndEmit();
-    },
     updated (items) {
       // NOTE: This is limited to a single item.
       this.next = items.length > 0 ? items[0] : null;
@@ -118,31 +52,12 @@ export default {
 
       return false;
     },
-    async uploadMedia (event) {
+    async uploadMedia (file) {
       if (!this.disabled || !this.limitReached) {
         try {
-          this.dragging = false;
           this.disabled = true;
           this.uploading = true;
 
-          const file = event.target.files ? event.target.files[0] : event.dataTransfer.files[0];
-
-          if (!this.checkFileGroup(file.name)) {
-            const joined = this.allowedExtensions.join(this.$t('apostrophe:listJoiner'));
-            await apos.notify('apostrophe:fileTypeNotAccepted', {
-              type: 'warning',
-              icon: 'alert-circle-icon',
-              interpolate: {
-                extensions: joined
-              }
-            });
-
-            this.disabled = false;
-            this.uploading = false;
-
-            return;
-          }
-
           await apos.notify('apostrophe:uploading', {
             dismiss: true,
             icon: 'cloud-upload-icon',
@@ -183,71 +98,7 @@ export default {
           this.uploading = false;
         }
       }
-    },
-    checkFileGroup(filename) {
-      const fileExt = filename.split('.').pop();
-      return this.allowedExtensions[0] === '*' ||
-        this.allowedExtensions.includes(fileExt);
-    },
-    dragHandler (event) {
-      event.preventDefault();
-      if (!this.disabled && !this.dragging) {
-        this.dragging = true;
-      }
     }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-  .apos-attachment-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-attachment-dropzone--dragover {
-    border: 2px dashed var(--a-primary);
-    background-color: var(--a-base-10);
-  }
-
-  .apos-attachment-instructions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    // v-html goofiness
-    & ::v-deep .apos-attachment-highlight {
-      color: var(--a-primary);
-      font-weight: var(--a-weight-bold);
-    }
-  }
-
-  .apos-attachment-icon {
-    transform: rotate(45deg);
-    margin-right: 5px;
-  }
-</style>

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

@@ -652,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/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

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/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/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.7.0",
+  "version": "3.8.0",
   "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"
   },