@widgetic/editor 3.10.47 → 3.10.48

package/lib/dev/editor.js

@@ -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.47");
+    this.el.attr('editorVersion', "3.10.48");
   }
 
 
@@ -16658,6 +16658,7 @@ var File = function File(options) {
 };
 
 File.defaults = {
+  lastModified: undefined,
   state: 'complete',
   thumbnail: undefined,
   url: undefined,
@@ -16728,6 +16729,7 @@ var UploadService = function (_EventsMixin) {
       }));
 
       return this._fetch(type).then(function (files) {
+        // console.log('fetched files:', files)
         return _this2.files.push.apply(_this2.files, files);
       }).then(this._broadcast.update).then(function (_) {
         return _this2.files.filter(function (f) {
@@ -16745,11 +16747,14 @@ var UploadService = function (_EventsMixin) {
   }, {
     key: 'upload',
     value: function 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: uploadFile
       }));
       this.used += uploadFile.size;
@@ -16758,9 +16763,12 @@ var UploadService = function (_EventsMixin) {
   }, {
     key: 'uploadComplete',
     value: function uploadComplete(uploadFile, instanceId) {
+      // console.log("uploadComplete file:", uploadFile);
       if (uploadFile.status === 'error') return;
-      var response = JSON.parse(uploadFile.xhr.response);
 
+      // read metadata(id here) 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;
 
       // read quota from response
@@ -16772,6 +16780,7 @@ var UploadService = function (_EventsMixin) {
         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]);
@@ -16846,6 +16855,7 @@ var UploadService = function (_EventsMixin) {
         url: '/upload/?user=' + this.user + '&type=' + type,
         headers: this.getAuthHeaders()
       }).then(function (response) {
+        // console.log("fetched files response:", response);
         _this3.refreshed[type] = true;
 
         // read quota from response
@@ -16853,10 +16863,14 @@ var UploadService = function (_EventsMixin) {
         _this3.used = response.quota.used;
 
         return response.files.data.map(function (file) {
+
+          // console.log("fetched file:", file);
+
           var type = parseType(file.mime);
           var url = response.hostUrl + file.path;
           var thumbnail = type === 'image' ? url : undefined;
 
+          // return a new File instance
           return new File({
             id: file.id,
             type: type,
@@ -16864,7 +16878,8 @@ var UploadService = function (_EventsMixin) {
             thumbnail: thumbnail,
             path: file.path,
             name: file.name,
-            size: file.size
+            size: file.size,
+            lastModified: file.lastModified
           });
         });
       });
@@ -17054,6 +17069,8 @@ var template = function () {
 		oncreate: function oncreate() {
 			this.Uploads = this.refs.Uploads.instance();
 			this.set({ maxFilesize: this.Uploads.getMaxFileSize() });
+
+			// load uploaded files
 			this.refresh();
 		},
 		ondestroy: function ondestroy() {
@@ -17062,7 +17079,15 @@ var template = function () {
 
 
 		methods: {
+
+			/**
+    * CONTENT LIST HANDLERS
+    */
+
+			// on selecting a file square
 			toggle: function toggle(file) {
+				console.log("on toggle file:", file);
+
 				if (file.error) {
 					this.Uploads.remove(file);
 					return this.refresh();
@@ -17077,9 +17102,29 @@ var template = function () {
 			refresh: function refresh(ev) {
 				var _this = this;
 
+				console.log("refreshing...");
 				if (ev) ev.preventDefault();
 
 				return this.Uploads.getFiles(this.get('filetypes')).then(function (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(function (a, b) {
+						return a.lastModified - b.lastModified;
+					});
+					console.log("uploadedFiles after sort: ", files);
+
 					return _this.set({ files: files });
 				}).then(this.activate.bind(this)).catch(this._reportError.bind(this)).then(function (_) {
 					return _this.set({ loading: false, error: null });
@@ -17134,16 +17179,44 @@ var template = function () {
 				this.set({ error: processedError });
 				this.fire('error', processedError);
 			},
-			_onNewUpload: function _onNewUpload() {
+
+
+			/**
+    * DROPZONE HANDLERS
+    */
+
+			_onDropZoneNewUpload: function _onDropZoneNewUpload(event) {
+				console.log("on DropZone New Upload:", event);
 				this.refs.scrollPane && this.refs.scrollPane.scrollBottom();
 			},
+			_onDropZoneUpload: function _onDropZoneUpload(event) {
+				console.log("on DropZone Upload:", event);
+				this.toggle(event);
+			},
+
+
+			/**
+    * BROWSER HANDLERS
+    */
+
+			_onUpdate: function _onUpdate(event) {
+				console.log("on Update Content:", event);
+
+				// re-load uploaded files
+				this.refresh();
+			},
 			_onUploadComplete: function _onUploadComplete(_ref) {
 				var _ref2 = _slicedToArray(_ref, 2),
 				    file = _ref2[0],
 				    instanceId = _ref2[1];
 
+				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 });
+
+				// sort files by upload date
+				// this.refresh();
 			}
 		}
 	};
@@ -17151,8 +17224,8 @@ var template = function () {
 
 function add_css() {
 	var style = __WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["e" /* createElement */]('style');
-	style.id = "svelte-268055198-style";
-	style.textContent = "\n  section[svelte-268055198], [svelte-268055198] 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-268055198]:focus, [svelte-268055198] a:focus {\n    outline: none;\n  }\n\n  [svelte-268055198].error-panel, [svelte-268055198] .error-panel {\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    text-align: center;\n    padding-right: 20px;\n  }\n\n  [svelte-268055198].browser-nav, [svelte-268055198] .browser-nav {\n    position: static;\n\n    font-family: ProximaNova-Regular;\n    font-size: 16px;\n    color: #0055FF;\n  }\n\n  [svelte-268055198].blogvio-browser-title, [svelte-268055198] .blogvio-browser-title {\n    margin-top: 0;\n    font: 30px/60px \"ProximaNova-Regular\";\n    color: #0055FF;\n  }\n\n  [svelte-268055198].nano, [svelte-268055198] .nano {\n    flex: 1;\n  }\n\n  strong[svelte-268055198], [svelte-268055198] strong {\n    color: #0055FF;\n  }\n\n  [svelte-268055198].dropzone_plchldr, [svelte-268055198] .dropzone_plchldr {\n    position: relative;\n    margin: 20px 20px 20px 0;\n    height: 75px;\n  }\n\n  [svelte-268055198].dropzone, [svelte-268055198] .dropzone {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  [svelte-268055198].scrolling-container, [svelte-268055198] .scrolling-container {\n    transition: opacity 200ms ease-in;\n  }\n\n  [svelte-268055198].dropzone--dragging .scrolling-container, [svelte-268055198] .dropzone--dragging .scrolling-container {\n    opacity: 0.4;\n  }\n\n  [svelte-268055198].dropzone--dragging .dropzone, [svelte-268055198] .dropzone--dragging .dropzone {\n    top: -100px;\n  }\n\n  [svelte-268055198].dropzone--large .dropzone, [svelte-268055198] .dropzone--large .dropzone,\n  [svelte-268055198].dropzone--dragging .dropzone--large .dropzone, [svelte-268055198] .dropzone--dragging .dropzone--large .dropzone {\n    top: -200px;\n  }\n\n  [svelte-268055198].icon, [svelte-268055198] .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-268055198].clear-content svg, [svelte-268055198] .clear-content svg {\n    width: 14px;\n    fill: #a0a0a0;\n    position: relative;\n    top: 1px;\n    right: 2px;\n  }\n\n  [svelte-268055198].clear-content:hover svg, [svelte-268055198] .clear-content:hover svg {\n    fill: #665b68;\n  }\n";
+	style.id = "svelte-1522966996-style";
+	style.textContent = "\n  section[svelte-1522966996], [svelte-1522966996] 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-1522966996]:focus, [svelte-1522966996] a:focus {\n    outline: none;\n  }\n\n  [svelte-1522966996].error-panel, [svelte-1522966996] .error-panel {\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n    text-align: center;\n    padding-right: 20px;\n  }\n\n  [svelte-1522966996].browser-nav, [svelte-1522966996] .browser-nav {\n    position: static;\n\n    font-family: ProximaNova-Regular;\n    font-size: 16px;\n    color: #0055FF;\n  }\n\n  [svelte-1522966996].blogvio-browser-title, [svelte-1522966996] .blogvio-browser-title {\n    margin-top: 0;\n    font: 30px/60px \"ProximaNova-Regular\";\n    color: #0055FF;\n  }\n\n  [svelte-1522966996].nano, [svelte-1522966996] .nano {\n    flex: 1;\n  }\n\n  strong[svelte-1522966996], [svelte-1522966996] strong {\n    color: #0055FF;\n  }\n\n  [svelte-1522966996].dropzone_plchldr, [svelte-1522966996] .dropzone_plchldr {\n    position: relative;\n    margin: 20px 20px 20px 0;\n    height: 75px;\n  }\n\n  [svelte-1522966996].dropzone, [svelte-1522966996] .dropzone {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  [svelte-1522966996].scrolling-container, [svelte-1522966996] .scrolling-container {\n    transition: opacity 200ms ease-in;\n  }\n\n  [svelte-1522966996].dropzone--dragging .scrolling-container, [svelte-1522966996] .dropzone--dragging .scrolling-container {\n    opacity: 0.4;\n  }\n\n  [svelte-1522966996].dropzone--dragging .dropzone, [svelte-1522966996] .dropzone--dragging .dropzone {\n    top: -100px;\n  }\n\n  [svelte-1522966996].dropzone--large .dropzone, [svelte-1522966996] .dropzone--large .dropzone,\n  [svelte-1522966996].dropzone--dragging .dropzone--large .dropzone, [svelte-1522966996] .dropzone--dragging .dropzone--large .dropzone {\n    top: -200px;\n  }\n\n  [svelte-1522966996].icon, [svelte-1522966996] .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-1522966996].clear-content svg, [svelte-1522966996] .clear-content svg {\n    width: 14px;\n    fill: #a0a0a0;\n    position: relative;\n    top: 1px;\n    right: 2px;\n  }\n\n  [svelte-1522966996].clear-content:hover svg, [svelte-1522966996] .clear-content:hover svg {\n    fill: #665b68;\n  }\n";
 	__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["b" /* appendNode */](style, document.head);
 }
 
@@ -17165,7 +17238,7 @@ function create_main_fragment(state, component) {
 	});
 
 	service.on('update', function (event) {
-		component.refresh();
+		component._onUpdate(event);
 	});
 
 	service.on('complete', function (event) {
@@ -17197,7 +17270,7 @@ function create_main_fragment(state, component) {
 		},
 
 		hydrate: function hydrate(nodes) {
-			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](svg, 'svelte-268055198', '');
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](svg, 'svelte-1522966996', '');
 			__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");
@@ -17651,7 +17724,8 @@ function create_if_block_9(state, component) {
 
 	var scrollpane_1 = new __WEBPACK_IMPORTED_MODULE_1__scroll_pane_html__["a" /* default */]({
 		_root: component._root,
-		_yield: scrollpane_1_yield_fragment
+		_yield: scrollpane_1_yield_fragment,
+		data: { class: "content-list" }
 	});
 
 	component.refs.scrollPane = scrollpane_1;
@@ -17764,7 +17838,7 @@ function create_if_block_1(state, component) {
 		},
 
 		hydrate: function hydrate(nodes) {
-			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](div, 'svelte-268055198', '');
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](div, 'svelte-1522966996', '');
 			div.className = "error-panel";
 			h2.className = "blogvio-browser-title";
 			a.href = "#";
@@ -17808,7 +17882,7 @@ function create_if_block_1(state, component) {
 }
 
 function create_if_block_2(state, component) {
-	var div, text, section, section_class_value, text_1, div_1, div_1_class_value;
+	var div, text, section, section_class_value, text_1, text_2, div_1, div_1_class_value;
 
 	function get_block(state) {
 		if (state.deleteMode) return create_if_block_3;
@@ -17836,15 +17910,15 @@ function create_if_block_2(state, component) {
 	});
 
 	dropzone.on('new', function (event) {
-		component._onNewUpload();
+		component._onDropZoneNewUpload(event);
 	});
 
-	dropzone.on('dragging', function (event) {
-		component.set({ dragging: event });
+	dropzone.on('upload', function (event) {
+		component._onDropZoneUpload(event);
 	});
 
-	dropzone.on('upload', function (event) {
-		component.toggle(event);
+	dropzone.on('dragging', function (event) {
+		component.set({ dragging: event });
 	});
 
 	dropzone.on('error', function (event) {
@@ -17859,17 +17933,18 @@ function create_if_block_2(state, component) {
 			if_block_2.create();
 			text = __WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["g" /* createText */]("\n    ");
 			section = __WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["e" /* createElement */]('section');
+			text_1 = __WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["g" /* createText */]("\n      ");
 			if_block_6.create();
-			text_1 = __WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["g" /* createText */]("\n\n      ");
+			text_2 = __WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["g" /* createText */]("\n\n      \n      ");
 			div_1 = __WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["e" /* createElement */]('div');
 			dropzone._fragment.create();
 			this.hydrate();
 		},
 
 		hydrate: function hydrate(nodes) {
-			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](div, 'svelte-268055198', '');
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](div, 'svelte-1522966996', '');
 			div.className = "browser-nav";
-			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](section, 'svelte-268055198', '');
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["p" /* setAttribute */](section, 'svelte-1522966996', '');
 			section.className = section_class_value = state.dragging ? 'dropzone--dragging' : '';
 			div_1.className = div_1_class_value = "dropzone_plchldr " + (!state.files.length ? 'dropzone--large' : '');
 		},
@@ -17879,8 +17954,9 @@ function create_if_block_2(state, component) {
 			if_block_2.mount(div, null);
 			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["l" /* insertNode */](text, target, anchor);
 			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["l" /* insertNode */](section, target, anchor);
-			if_block_6.mount(section, null);
 			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["b" /* appendNode */](text_1, section);
+			if_block_6.mount(section, null);
+			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["b" /* appendNode */](text_2, section);
 			__WEBPACK_IMPORTED_MODULE_4_svelte_shared_js__["b" /* appendNode */](div_1, section);
 			dropzone._fragment.mount(div_1, null);
 		},
@@ -17907,7 +17983,7 @@ function create_if_block_2(state, component) {
 				if_block_6.destroy();
 				if_block_6 = current_block_1(state, component);
 				if_block_6.create();
-				if_block_6.mount(section, text_1);
+				if_block_6.mount(section, text_2);
 			}
 
 			if (div_1_class_value !== (div_1_class_value = "dropzone_plchldr " + (!state.files.length ? 'dropzone--large' : ''))) {
@@ -18001,7 +18077,7 @@ function SvelteComponent(options) {
 	this._yield = options._yield;
 
 	this._torndown = false;
-	if (!document.getElementById("svelte-268055198-style")) add_css();
+	if (!document.getElementById("svelte-1522966996-style")) add_css();
 	this._renderHooks = [];
 
 	this._fragment = create_main_fragment(this._state, this);