@widgetic/editor 3.10.46 → 3.10.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widgetic/editor",
-  "version": "3.10.46",
+  "version": "3.10.48",
   "scripts": {
     "start": "webpack --config webpack.config.js --watch --progress",
     "build": "webpack --config webpack.config.js",

package/src/core/services/uploads.js

@@ -11,6 +11,7 @@ class File {
 }
 
 File.defaults = {
+  lastModified: undefined,
   state: 'complete',
   thumbnail: undefined,
   url: undefined,
@@ -38,10 +39,10 @@ export default class UploadService extends EventsMixin(Service) {
     this.files = [];
 
     // max file size in MB
-    this.maxFilesize = user.premium ? 250 : 25; // MB limit / file for premium / free
+    this.maxFilesize = user.premium ? 250 : 25; // MB limit / file for premium / free plan
 
     // max quota in bytes
-    this.quota = (user.premium ? 1000 : 250) * 1000 * 1000; // 250 MB total quota for free users
+    this.quota = (user.premium ? 10000 : 250) * 1000 * 1000; // total quota for premium / free plan
     
     // used quota in bytes
     this.used = 0;
@@ -67,7 +68,10 @@ export default class UploadService extends EventsMixin(Service) {
       return Promise.resolve(this.files.filter(f => f.type === type));
 
     return this._fetch(type)
-      .then(files => this.files.push.apply(this.files, files))
+      .then(files => {
+        // console.log('fetched files:', files)
+        return this.files.push.apply(this.files, files)
+      })
       .then(this._broadcast.update)
       .then(_ => this.files.filter(f => f.type === type));
   }
@@ -77,12 +81,15 @@ export default class UploadService extends EventsMixin(Service) {
   }
 
   upload(uploadFile) {
+    // console.log("upload file:", uploadFile);
+
     this.files.push(
       new File({
         state: 'new',
         size: uploadFile.size,
         name: uploadFile.name,
         type: parseType(uploadFile.type),
+        // lastModified: uploadFile.lastModified,
         uploadFile,
       })
     );
@@ -91,9 +98,12 @@ export default class UploadService extends EventsMixin(Service) {
   }
 
   uploadComplete(uploadFile, instanceId) {
+    // console.log("uploadComplete file:", uploadFile);
     if (uploadFile.status === 'error') return;
-    const response = JSON.parse(uploadFile.xhr.response);
 
+    // read metadata(id here) from the file that's on the server
+    const response = JSON.parse(uploadFile.xhr.response);
+    // console.log("uploadComplete file on the server:", response.files.data[0])
     const id = response.files.data[0].id;
 
     // read quota from response
@@ -105,6 +115,7 @@ export default class UploadService extends EventsMixin(Service) {
       f.id = id;
       f.path = response.files.data[0].path;
       f.url = response.hostUrl + f.path;
+      // f.lastModified = uploadFile.lastModified;
     });
 
     this._broadcast.complete([this.get(id), instanceId]);
@@ -165,6 +176,7 @@ export default class UploadService extends EventsMixin(Service) {
         headers: this.getAuthHeaders(),
       })
       .then(response => {
+        // console.log("fetched files response:", response);
         this.refreshed[type] = true;
 
         // read quota from response
@@ -172,10 +184,14 @@ export default class UploadService extends EventsMixin(Service) {
         this.used = response.quota.used;
 
         return response.files.data.map(file => {
+
+          // console.log("fetched file:", file);
+
           const type = parseType(file.mime);
           const url = response.hostUrl + file.path;
           const thumbnail = type === 'image' ? url : undefined;
 
+          // return a new File instance
           return new File({
             id: file.id,
             type,
@@ -184,6 +200,7 @@ export default class UploadService extends EventsMixin(Service) {
             path: file.path,
             name: file.name,
             size: file.size,
+            lastModified: file.lastModified,
           });
         });
       });

package/src/editor/content/browser/upload.html

@@ -1,6 +1,6 @@
 <Service ref:Uploads
   service="Uploads"
-  on:update="refresh()"
+  on:update="_onUpdate(event)"
   on:complete="_onUploadComplete(event)"
   />
 
@@ -44,8 +44,10 @@
       {{/if}}
     </div>
     <section class="{{ dragging ? 'dropzone--dragging' : '' }}">
+      
+      <!-- Uploaded Content List -->
       {{#if files.length}}
-        <ScrollPane ref:scrollPane>
+        <ScrollPane ref:scrollPane class="content-list">
           {{#each files as file}}
             <File
               file="{{file}}"
@@ -63,12 +65,13 @@
         </div>
       {{/if}}
 
+      <!-- Dropzone -->
       <div class="dropzone_plchldr {{ !files.length ? 'dropzone--large' : '' }}">
         <Dropzone
           ref:dropzone
-          on:new="_onNewUpload()"
+          on:new="_onDropZoneNewUpload(event)"
+          on:upload="_onDropZoneUpload( event )"
           on:dragging="set({ dragging: event })"
-          on:upload="toggle( event )"
           on:error="fire( 'error', event )"
           filetypes="{{ filetypes }}/*"
           maxFilesize="{{ maxFilesize }}"
@@ -214,6 +217,8 @@ export default {
   oncreate() {
     this.Uploads = this.refs.Uploads.instance();
     this.set({ maxFilesize: this.Uploads.getMaxFileSize() });
+    
+    // load uploaded files
     this.refresh();
   },
   ondestroy() {
@@ -221,7 +226,15 @@ export default {
   },
 
   methods: {
+
+    /**
+     * CONTENT LIST HANDLERS
+     */
+
+    // on selecting a file square
     toggle(file) {
+      console.log("on toggle file:", file);
+
       if (file.error) {
         this.Uploads.remove(file);
         return this.refresh();
@@ -238,10 +251,30 @@ export default {
     },
 
     refresh(ev) {
+      console.log("refreshing...");
       if (ev) ev.preventDefault();
 
       return this.Uploads.getFiles(this.get('filetypes'))
-        .then(files => this.set({ files }))
+        .then(files => {
+          // console.log("uploadedFiles: ", files);
+
+          // sort files by id
+          // files = files.sort((a, b) => {
+          //   // console.log("a & b: ", a.id, b.id);
+          //   if(!a.id.indexOf) return -1;
+          //   let noIdA = a.id.substr(a.id.indexOf('_t')+2, 4);
+          //   let noIdB = b.id.substr(a.id.indexOf('_t')+2, 4);
+          //   // console.log("noIdA & noIdB: ", noIdA, noIdB, (noIdA >= noIdB));
+          //   return noIdA - noIdB;
+          // });
+          // console.log("uploadedFiles after sort: ", files);
+
+          // sort files by last modified date
+          files = files.sort((a, b) => { return a.lastModified - b.lastModified; });
+          console.log("uploadedFiles after sort: ", files);
+
+          return this.set({ files })
+        })
         .then(this.activate.bind(this))
         .catch(this._reportError.bind(this))
         .then(_ => this.set({ loading: false, error: null }));
@@ -294,14 +327,39 @@ export default {
       this.fire('error', processedError);
     },
 
-    _onNewUpload() {
+    /**
+     * DROPZONE HANDLERS
+     */
+
+    _onDropZoneNewUpload(event) {
+      console.log("on DropZone New Upload:", event);
       this.refs.scrollPane && this.refs.scrollPane.scrollBottom();
     },
 
+    _onDropZoneUpload(event) {
+      console.log("on DropZone Upload:", event);
+      this.toggle( event );
+    },
+
+    /**
+     * BROWSER HANDLERS
+     */
+
+    _onUpdate(event) {
+      console.log("on Update Content:", event);
+
+      // re-load uploaded files
+      this.refresh();
+    },
+
     _onUploadComplete([file, instanceId]) {
+      console.log("on Upload Complete:", file, instanceId);
+
       // toggle the file only if it's upload originated from this instance
-      if (instanceId === this.get('instanceId'))
-        this._toggleSelect(file, { afterUpload: true });
+      if (instanceId === this.get('instanceId')) this._toggleSelect(file, { afterUpload: true });
+
+      // sort files by upload date
+      // this.refresh();
     },
   },
 };

package/src/editor/content/index.coffee

@@ -100,6 +100,8 @@ class Content extends Tabs
     @listenTo ContentModel, 'create', @_onItemCreate
     @listenTo ContentModel, 'change', => @el.toggleClass 'has-reached-max', @composition.maxContentReached()
 
+    # console.log('Editor Content initialized:', ContentModel, @composition, @browsers);
+
     # activate the first tab
     @children()[0].active()