@widgetic/editor 3.10.49 → 3.10.51

package/lib/dev/editor.js

@@ -6641,7 +6641,7 @@ var template = function () {
 		computed: {
 			instance: function instance(service) {
 				return __WEBPACK_IMPORTED_MODULE_0_Core_services_container_instance__["default"][service];
-			}
+			} // get the service instance
 		},
 
 		oncreate: function oncreate() {
@@ -13347,7 +13347,7 @@ WidgetEditor = (function(superClass) {
     this.el.append(this.tabs.el);
     LoginPopup.place(this.el);
     Blogvio.pubsub.subscribe('api/token/update', this._updateLoggedInStatus);
-    this.el.attr('editorVersion', "3.10.49");
+    this.el.attr('editorVersion', "3.10.51");
   }
 
 
@@ -16747,43 +16747,58 @@ var UploadService = function (_EventsMixin) {
   }, {
     key: 'upload',
     value: function upload(uploadFile) {
-      // console.log("upload file:", uploadFile);
+      // console.log("on upload file:", uploadFile);
 
-      this.files.push(new File({
+      // create a new File instance from the uploadFile 
+      var file = new File({
         state: 'new',
         size: uploadFile.size,
         name: uploadFile.name,
         type: parseType(uploadFile.type),
-        // lastModified: uploadFile.lastModified,
+        lastModified: Date.now(),
         uploadFile: uploadFile
-      }));
+      });
+      console.log("on upload file:", file);
+
+      // push it to the files array
+      this.files.push(file);
+
+      // increase used quota
       this.used += uploadFile.size;
+
+      // broadcast the update of the files array
       this._broadcast.update();
     }
   }, {
     key: 'uploadComplete',
     value: function uploadComplete(uploadFile, instanceId) {
       // console.log("uploadComplete file:", uploadFile);
+
       if (uploadFile.status === 'error') return;
 
-      // read metadata(id here) from the file that's on the server
+      // read metadata from the file that's on the server
       var response = JSON.parse(uploadFile.xhr.response);
-      // console.log("uploadComplete file on the server:", response.files.data[0])
-      var id = response.files.data[0].id;
+      // console.log("uploadComplete server response:", response);
+
+      // read file from the response
+      var serverFile = response.files.data[0];
+      // console.log("uploadComplete file on the server:", serverFile);
 
       // read quota from response
       // this.quota = response.quota.max;
       this.used = response.quota.used;
 
+      // update the file in the files array with the data from the server
       this._update(uploadFile, function (f) {
         f.state = 'complete';
-        f.id = id;
-        f.path = response.files.data[0].path;
+        f.id = serverFile.id;
+        f.path = serverFile.path;
         f.url = response.hostUrl + f.path;
-        // f.lastModified = uploadFile.lastModified;
+        f.lastModified = serverFile.lastModified;
       });
 
-      this._broadcast.complete([this.get(id), instanceId]);
+      // broadcast the completion of the upload based on the fileId and instanceId
+      this._broadcast.complete([this.get(serverFile.id), instanceId]);
     }
   }, {
     key: 'accept',
@@ -16840,10 +16855,13 @@ var UploadService = function (_EventsMixin) {
   }, {
     key: '_update',
     value: function _update(file, transform) {
+      // apply the transform function to the file in the array
       this.files = this.files.map(function (f) {
         if (f.uploadFile === file) transform(f);
         return f;
       });
+
+      // broadcast the update of the files array
       this._broadcast.update();
     }
   }, {
@@ -17039,6 +17057,8 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = [
 
 
 var template = function () {
+	// actually imports services/uploads.js
+
 	var instanceId = 0;
 
 	return {
@@ -17072,6 +17092,9 @@ var template = function () {
 
 			// load uploaded files
 			this.refresh();
+
+			// scroll to uploads files list to bottom
+			this.scrollToListBottom();
 		},
 		ondestroy: function ondestroy() {
 			this.observer.cancel();
@@ -17086,7 +17109,7 @@ var template = function () {
 
 			// on selecting a file square
 			toggle: function toggle(file) {
-				console.log("on toggle file:", file);
+				// console.log("on toggle file:", file);
 
 				if (file.error) {
 					this.Uploads.remove(file);
@@ -17102,7 +17125,7 @@ var template = function () {
 			refresh: function refresh(ev) {
 				var _this = this;
 
-				console.log("refreshing...");
+				// console.log("refreshing...");
 				if (ev) ev.preventDefault();
 
 				return this.Uploads.getFiles(this.get('filetypes')).then(function (files) {
@@ -17114,20 +17137,37 @@ var template = function () {
 					//   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));
+					//   // console.log("noIdA & noIdB: ", noIdA, noIdB, (noIdA - noIdB));
 					//   return noIdA - noIdB;
 					// });
 					// console.log("uploadedFiles after sort: ", files);
 
-					// sort files by last modified date
+					// sort files by last modified(uploadTime) date
 					files = files.sort(function (a, b) {
+
+						//  read a lastModified timestamp
 						var x = a.lastModified;
+
+						// read the lastModified date from the id
+						if (!x) x = a.id.substring(a.id.indexOf('_u') + 3);
+
+						// if still not available then set it to 0
 						if (!x) x = 0;
+						// a.lastModified = x;
 
+
+						// read b lastModified timestamp
 						var y = b.lastModified;
+
+						// read the lastModified date from the id
+						if (!y) y = b.id.substring(b.id.indexOf('_u') + 3);
+
+						// if still not available then set it to 0
 						if (!y) y = 0;
+						// b.lastModified = y;
 
-						// console.log("x & y: ", x, y);
+
+						// console.log("x & y: ", a.lastModified, x, b.lastModified, y);
 
 						return x - y;
 					});
@@ -17194,11 +17234,20 @@ var template = function () {
     */
 
 			_onDropZoneNewUpload: function _onDropZoneNewUpload(event) {
-				console.log("on DropZone New Upload:", event);
+				// console.log("on DropZone New Upload:", event);
+
+				// scroll the list to the bottom 
+				this.scrollToListBottom();
+			},
+
+
+			// scroll to uploads files list to bottom
+			scrollToListBottom: function scrollToListBottom() {
+				// console.log("on DropZone New Upload:", event);
 				this.refs.scrollPane && this.refs.scrollPane.scrollBottom();
 			},
 			_onDropZoneUpload: function _onDropZoneUpload(event) {
-				console.log("on DropZone Upload:", event);
+				// console.log("on DropZone Upload:", event);
 				this.toggle(event);
 			},
 
@@ -17232,8 +17281,8 @@ var template = function () {
 
 function add_css() {
 	var style = __WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["e" /* createElement */]('style');
-	style.id = "svelte-712365636-style";
-	style.textContent = "\n  section[svelte-712365636], [svelte-712365636] section {\n    display: flex;\n    flex-direction: column;\n    padding-left: 20px;\n    height: calc(100% - 25px);\n    color: #665b68;\n  }\n\n  a[svelte-712365636]:focus, [svelte-712365636] a:focus {\n    outline: none;\n  }\n\n  [svelte-712365636].error-panel, [svelte-712365636] .error-panel {\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    text-align: center;\n    padding-right: 20px;\n  }\n\n  [svelte-712365636].browser-nav, [svelte-712365636] .browser-nav {\n    position: static;\n\n    font-family: ProximaNova-Regular;\n    font-size: 16px;\n    color: #0055FF;\n  }\n\n  [svelte-712365636].blogvio-browser-title, [svelte-712365636] .blogvio-browser-title {\n    margin-top: 0;\n    font: 30px/60px \"ProximaNova-Regular\";\n    color: #0055FF;\n  }\n\n  [svelte-712365636].nano, [svelte-712365636] .nano {\n    flex: 1;\n  }\n\n  strong[svelte-712365636], [svelte-712365636] strong {\n    color: #0055FF;\n  }\n\n  [svelte-712365636].dropzone_plchldr, [svelte-712365636] .dropzone_plchldr {\n    position: relative;\n    margin: 20px 20px 20px 0;\n    height: 75px;\n  }\n\n  [svelte-712365636].dropzone, [svelte-712365636] .dropzone {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  [svelte-712365636].scrolling-container, [svelte-712365636] .scrolling-container {\n    transition: opacity 200ms ease-in;\n  }\n\n  [svelte-712365636].dropzone--dragging .scrolling-container, [svelte-712365636] .dropzone--dragging .scrolling-container {\n    opacity: 0.4;\n  }\n\n  [svelte-712365636].dropzone--dragging .dropzone, [svelte-712365636] .dropzone--dragging .dropzone {\n    top: -100px;\n  }\n\n  [svelte-712365636].dropzone--large .dropzone, [svelte-712365636] .dropzone--large .dropzone,\n  [svelte-712365636].dropzone--dragging .dropzone--large .dropzone, [svelte-712365636] .dropzone--dragging .dropzone--large .dropzone {\n    top: -200px;\n  }\n\n  [svelte-712365636].icon, [svelte-712365636] .icon {\n    display: inline-block;\n    width: 1em;\n    height: 1em;\n    stroke-width: 0;\n    stroke: currentColor;\n    fill: currentColor\n  }\n\n  [svelte-712365636].clear-content svg, [svelte-712365636] .clear-content svg {\n    width: 14px;\n    fill: #a0a0a0;\n    position: relative;\n    top: 1px;\n    right: 2px;\n  }\n\n  [svelte-712365636].clear-content:hover svg, [svelte-712365636] .clear-content:hover svg {\n    fill: #665b68;\n  }\n";
+	style.id = "svelte-3393837139-style";
+	style.textContent = "\n  section[svelte-3393837139], [svelte-3393837139] section {\n    display: flex;\n    flex-direction: column;\n    padding-left: 20px;\n    height: calc(100% - 25px);\n    color: #665b68;\n  }\n\n  a[svelte-3393837139]:focus, [svelte-3393837139] a:focus {\n    outline: none;\n  }\n\n  [svelte-3393837139].error-panel, [svelte-3393837139] .error-panel {\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    text-align: center;\n    padding-right: 20px;\n  }\n\n  [svelte-3393837139].browser-nav, [svelte-3393837139] .browser-nav {\n    position: static;\n\n    font-family: ProximaNova-Regular;\n    font-size: 16px;\n    color: #0055FF;\n  }\n\n  [svelte-3393837139].blogvio-browser-title, [svelte-3393837139] .blogvio-browser-title {\n    margin-top: 0;\n    font: 30px/60px \"ProximaNova-Regular\";\n    color: #0055FF;\n  }\n\n  [svelte-3393837139].nano, [svelte-3393837139] .nano {\n    flex: 1;\n  }\n\n  strong[svelte-3393837139], [svelte-3393837139] strong {\n    color: #0055FF;\n  }\n\n  [svelte-3393837139].dropzone_plchldr, [svelte-3393837139] .dropzone_plchldr {\n    position: relative;\n    margin: 20px 20px 20px 0;\n    height: 75px;\n  }\n\n  [svelte-3393837139].dropzone, [svelte-3393837139] .dropzone {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  [svelte-3393837139].scrolling-container, [svelte-3393837139] .scrolling-container {\n    transition: opacity 200ms ease-in;\n  }\n\n  [svelte-3393837139].dropzone--dragging .scrolling-container, [svelte-3393837139] .dropzone--dragging .scrolling-container {\n    opacity: 0.4;\n  }\n\n  [svelte-3393837139].dropzone--dragging .dropzone, [svelte-3393837139] .dropzone--dragging .dropzone {\n    top: -100px;\n  }\n\n  [svelte-3393837139].dropzone--large .dropzone, [svelte-3393837139] .dropzone--large .dropzone,\n  [svelte-3393837139].dropzone--dragging .dropzone--large .dropzone, [svelte-3393837139] .dropzone--dragging .dropzone--large .dropzone {\n    top: -200px;\n  }\n\n  [svelte-3393837139].icon, [svelte-3393837139] .icon {\n    display: inline-block;\n    width: 1em;\n    height: 1em;\n    stroke-width: 0;\n    stroke: currentColor;\n    fill: currentColor\n  }\n\n  [svelte-3393837139].clear-content svg, [svelte-3393837139] .clear-content svg {\n    width: 14px;\n    fill: #a0a0a0;\n    position: relative;\n    top: 1px;\n    right: 2px;\n  }\n\n  [svelte-3393837139].clear-content:hover svg, [svelte-3393837139] .clear-content:hover svg {\n    fill: #665b68;\n  }\n";
 	__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["b" /* appendNode */](style, document.head);
 }
 
@@ -17278,7 +17327,7 @@ function create_main_fragment(state, component) {
 		},
 
 		hydrate: function hydrate(nodes) {
-			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](svg, 'svelte-712365636', '');
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](svg, 'svelte-3393837139', '');
 			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](svg, 'style', "position: absolute; width: 0; height: 0; overflow: hidden");
 			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](svg, 'version', "1.1");
 			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](svg, 'xmlns', "http://www.w3.org/2000/svg");
@@ -17846,7 +17895,7 @@ function create_if_block_1(state, component) {
 		},
 
 		hydrate: function hydrate(nodes) {
-			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](div, 'svelte-712365636', '');
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](div, 'svelte-3393837139', '');
 			div.className = "error-panel";
 			h2.className = "blogvio-browser-title";
 			a.href = "#";
@@ -17950,9 +17999,9 @@ function create_if_block_2(state, component) {
 		},
 
 		hydrate: function hydrate(nodes) {
-			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](div, 'svelte-712365636', '');
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](div, 'svelte-3393837139', '');
 			div.className = "browser-nav";
-			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](section, 'svelte-712365636', '');
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](section, 'svelte-3393837139', '');
 			section.className = section_class_value = state.dragging ? 'dropzone--dragging' : '';
 			div_1.className = div_1_class_value = "dropzone_plchldr " + (!state.files.length ? 'dropzone--large' : '');
 		},
@@ -18085,7 +18134,7 @@ function SvelteComponent(options) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if (!document.getElementById("svelte-712365636-style")) add_css();
+	if (!document.getElementById("svelte-3393837139-style")) add_css();
 	this._renderHooks = [];
 
 	this._fragment = create_main_fragment(this._state, this);