easy-file-system 1.5.25 → 1.5.27

package/src/input/name.js

@@ -4,6 +4,8 @@ import withStyle from "easy-with-style";  ///
 
 import { arrayUtilities } from "necessary";
 
+import nameInputMixins from "../mixins/nameInput";
+
 import { NONE, INLINE_BLOCK } from "../constants";
 import { Element, window, document } from "easy";
 import { ENTER_KEY_CODE, ESCAPE_KEY_CODE } from "../keyCodes";
@@ -15,19 +17,13 @@ class NameInput extends Element {
     const { keyCode } = event;
 
     if (keyCode === ENTER_KEY_CODE) {
-      const { onChange } = this.properties,
-            changeHandler = onChange; ///
-
-      changeHandler();
+      this.callChangeHandlers();
 
       event.preventDefault();
     }
 
     if (keyCode === ESCAPE_KEY_CODE) {
-      const { onCancel } = this.properties,
-            cancelHandler = onCancel; ///
-
-      cancelHandler();
+      this.callCancelHandlers();
 
       event.preventDefault();
     }
@@ -41,9 +37,12 @@ class NameInput extends Element {
   }
 
   setName(name) {
-    const html = name;  ///
+    const domElement = this.getDOMElement(),
+          { childNodes } = domElement,
+          firstChildNode = first(childNodes),
+          textNode = firstChildNode;  ///
 
-    this.html(html);
+    textNode.nodeValue = name;  ///
   }
 
   show() {
@@ -87,9 +86,13 @@ class NameInput extends Element {
 
   parentContext() {
     const showNameInput = this.show.bind(this), ///
-          hideNameInput = this.hide.bind(this),
+          hideNameInput = this.hide.bind(this), ///
           getNameInputName = this.getName.bind(this), ///
           setNameInputName = this.setName.bind(this), ///
+          onNameInputChange = this.onChange.bind(this), ///
+          onNameInputCancel = this.onCancel.bind(this), ///
+          offNameInputChange = this.offChange.bind(this), ///
+          offNameInputCancel = this.offCancel.bind(this), ///
           isNameInputDisplayed = this.isDisplayed.bind(this); ///
 
     return ({
@@ -97,17 +100,16 @@ class NameInput extends Element {
       hideNameInput,
       getNameInputName,
       setNameInputName,
+      onNameInputChange,
+      onNameInputCancel,
+      offNameInputChange,
+      offNameInputCancel,
       isNameInputDisplayed
     });
   }
 
   static tagName = "span";  ///
 
-  static ignoredProperties = [
-    "onChange",
-    "onCancel"
-  ];
-
   static defaultProperties = {
     role: "textbox",
     className: "name",
@@ -115,6 +117,8 @@ class NameInput extends Element {
   };
 }
 
+Object.assign(NameInput.prototype, nameInputMixins);
+
 export default withStyle(NameInput)`
   
   outline: none;

package/src/item/entry/drag/directoryName.js

@@ -114,12 +114,6 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 		return collapsed;
 	}
 
-  isEntryDirectory() {
-    const entryDirectory = true;
-
-    return entryDirectory;
-  }
-
 	retrievePathMaps(sourceEntryPath, targetEntryPath, pathMaps) {
 		const name = this.getName(),
 					pathMap = this.getPathMap(sourceEntryPath, targetEntryPath),
@@ -198,9 +192,6 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 																 NameButton={NameButton}
 																 ToggleButton={ToggleButton}
 																 DirectoryNameSVG={DirectoryNameSVG}
-                                 onNameChange={this.nameChangeHandler}
-                                 onNameCancel={this.nameCancelHandler}
-                                 onSVGButtonClick={this.svgButtonClickHandler}
 			/>,
 			<EntriesList explorer={explorer} />
 

package/src/item/entry/drag/fileName.js

@@ -46,12 +46,6 @@ export default class FileNameDragEntryItem extends DragEntryItem {
     return collapsed;
   }
 
-  isEntryDirectory() {
-    const entryDirectory = false;
-
-    return entryDirectory;
-  }
-
 	retrievePathMaps(sourceEntryPath, targetEntryPath, pathMaps) {
 		const pathMap = this.getPathMap(sourceEntryPath, targetEntryPath);
 
@@ -70,9 +64,6 @@ export default class FileNameDragEntryItem extends DragEntryItem {
                             NameInput={NameInput}
                             NameButton={NameButton}
                             FileNameSVG={FileNameSVG}
-                            onNameChange={this.nameChangeHandler}
-                            onNameCancel={this.nameCancelHandler}
-                            onSVGButtonClick={this.svgButtonClickHandler}
       />
 		);
   }

package/src/item/entry/drag.js

@@ -3,16 +3,15 @@
 import withStyle from "easy-with-style";  ///
 
 import { dragMixins } from "easy-drag-and-drop";
-import { pathUtilities } from "necessary";
 
 import EntryItem from "../../item/entry";
 import NameInput from "../../input/name";
 import NameButton from "../../button/name";
 
+import { EMPTY_STRING } from "../../constants";
+import { DIRECTORY_NAME_DRAG_ENTRY_TYPE } from "../../entryTypes";
 import { adjustSourceEntryPath, adjustTargetEntryPath } from "../../utilities/pathMap";
 
-const { concatenatePaths, pathWithoutBottommostNameFromPath } = pathUtilities;
-
 class DragEntryItem extends EntryItem {
   svgButtonClickHandler = (event, element) => {
     const explorer = this.getExplorer(),
@@ -23,24 +22,36 @@ class DragEntryItem extends EntryItem {
     event.stopPropagation();
   }
 
-  nameChangeHandler = () => {
-    const nameChanged = this.hasNameChanged();
+  nameInputChangeHandler = () => {
+    const created = this.isCreated(),
+          explorer = this.getExplorer(),
+          nameChanged = this.hasNameChanged(),
+          dragEntryItem = this; ///
 
     if (!nameChanged) {
-      this.cancel();
-
       return;
     }
 
-    const explorer = this.getExplorer(),
-          dragEntryItem = this; ///
+    if (created) {
+      explorer.createDragEntryItem(dragEntryItem, () => {
+        this.cancel();
+      });
+
+      return;
+    }
 
     explorer.renameDragEntryItem(dragEntryItem, () => {
       this.cancel();
     });
   }
 
-  nameCancelHandler = () => {
+  nameInputCancelHandler = () => {
+    const created = this.isCreated();
+
+    created ?
+      this.remove() :
+        this.cancel();
+
     this.cancel();
   }
 
@@ -77,29 +88,17 @@ class DragEntryItem extends EntryItem {
     markerEntryItemExplorer.dropDragEntryItem(dragEntryItem, done);
   }
 
-  getInputName() {
-    const nameInputName = this.getNameInputName(),
-          inputName = nameInputName;  ///
-
-    return inputName;
-  }
-
-  getInputPath() {
-    const path = this.getPath(),
-          inputName = this.getInputName(),
-          pathWithoutBottommostName = pathWithoutBottommostNameFromPath(path),
-          inputPath = (pathWithoutBottommostName === null) ?
-                        inputName :
-                          concatenatePaths(pathWithoutBottommostName, inputName);
+  isCreated() {
+    const { created } = this.properties;
 
-    return inputPath;
+    return created;
   }
 
   getPathMap(sourceEntryPath, targetEntryPath) {
     const name = this.getName(),
           collapsed = this.isCollapsed(),
           nameInputName = this.getNameInputName(),
-          entryDirectory = this.isEntryDirectory();
+          entryDirectory = this.getEntryDirectory();
 
     sourceEntryPath = adjustSourceEntryPath(sourceEntryPath, name);	///
 
@@ -126,19 +125,34 @@ class DragEntryItem extends EntryItem {
   }
 
   hasNameChanged() {
-    const name = this.getName(),
-          inputName = this.getInputName(),
-          nameChanged = (inputName !== name);
+    const nameInputName = this.getNameInputName(),
+          nameButtonName = this.getNameButtonName(),
+          nameChanged = (nameInputName !== nameButtonName);
 
     return nameChanged;
   }
 
+  getEntryDirectory() {
+    const directoryNameDragEntryItem = this.isDirectoryNameDragEntryItem(),
+          entryDirectory = directoryNameDragEntryItem;  ///
+
+    return entryDirectory;
+  }
+
   retrieveMarkerEntryItem() {
     const { markerEntryItem } = globalThis;
 
     return markerEntryItem;
   }
 
+  isDirectoryNameDragEntryItem() {
+    const type = this.getType(),
+          typeDirectoryNameDragEntryItemType = (type === DIRECTORY_NAME_DRAG_ENTRY_TYPE),
+          directoryNameDragEntryItem = typeDirectoryNameDragEntryItemType;  ///
+
+    return directoryNameDragEntryItem;
+  }
+
   isSelected() {
     const selected = this.hasClass("selected"); ///
 
@@ -161,7 +175,20 @@ class DragEntryItem extends EntryItem {
   }
 
   edit() {
+    const created = this.isCreated();
+
+    if (created) {
+      const name = EMPTY_STRING,
+            nameInputName = name, ///
+            nameButtonName = name;  ///
+
+      this.setNameInputName(nameInputName);
+
+      this.setNameButtonName(nameButtonName);
+    }
+
     this.hideNameButton();
+
     this.showNameInput();
   }
 
@@ -178,17 +205,29 @@ class DragEntryItem extends EntryItem {
   didMount() {
     this.hideNameInput();
 
-	  this.onStartDrag(this.startDragHandler);
-
     this.onStopDrag(this.stopDragHandler);
 
+    this.onStartDrag(this.startDragHandler);
+
+    this.onSVGButtonClick(this.svgButtonClickHandler);
+
+    this.onNameInputChange(this.nameInputChangeHandler);
+
+    this.onNameInputCancel(this.nameInputCancelHandler);
+
     this.enableDrag();
 	}
 
 	willUnmount() {
+    this.offStopDrag(this.stopDragHandler);
+
     this.offStartDrag(this.startDragHandler);
 
-    this.offStopDrag(this.stopDragHandler);
+    this.offSVGButtonClick(this.svgButtonClickHandler);
+
+    this.offNameInputChange(this.nameInputChangeHandler);
+
+    this.offNameInputCancel(this.nameInputCancelHandler);
 
     this.disableDrag();
 	}
@@ -213,6 +252,10 @@ class DragEntryItem extends EntryItem {
 
   static NameButton = NameButton;
 
+  static ignoredProperties = [
+    "created"
+  ];
+
   static defaultProperties = {
 		className: "drag"
 	};

package/src/list/entries.js

@@ -104,7 +104,7 @@ class EntriesList extends Element {
     }
   }
 
-  addFilePath(filePath) {
+  addFilePath(filePath, created = false) {
 		let fileNameDragEntryItem;
 
     const topmostDirectoryName = topmostDirectoryNameFromPath(filePath);
@@ -115,7 +115,7 @@ class EntriesList extends Element {
       fileNameDragEntryItem = this.findFileNameDragEntryItem(fileName);
 
       if (fileNameDragEntryItem === null) {
-        fileNameDragEntryItem = this.createFileNameDragEntryItem(fileName);
+        fileNameDragEntryItem = this.createFileNameDragEntryItem(fileName, created);
 
         this.addEntryItem(fileNameDragEntryItem);
       }
@@ -123,9 +123,10 @@ class EntriesList extends Element {
       let topmostDirectoryNameDragEntryItem = this.findDirectoryNameDragEntryItem(topmostDirectoryName);
 
       if (topmostDirectoryNameDragEntryItem === null) {
-        const collapsed = true;
+        const created = false,
+              collapsed = true;
 
-        topmostDirectoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(topmostDirectoryName, collapsed);
+        topmostDirectoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(topmostDirectoryName, collapsed, created);
 
         this.addEntryItem(topmostDirectoryNameDragEntryItem);
       }
@@ -134,7 +135,7 @@ class EntriesList extends Element {
 
       filePath = filePathWithoutTopmostDirectoryName; ///
 
-      fileNameDragEntryItem = topmostDirectoryNameDragEntryItem.addFilePath(filePath);
+      fileNameDragEntryItem = topmostDirectoryNameDragEntryItem.addFilePath(filePath, created);
     }
 
 		return fileNameDragEntryItem;
@@ -183,7 +184,7 @@ class EntriesList extends Element {
     });
   }
 
-  addDirectoryPath(directoryPath, collapsed = true) {
+  addDirectoryPath(directoryPath, collapsed = true, created = false) {
     let directoryNameDragEntryItem;
 
     const topmostDirectoryName = topmostDirectoryNameFromPath(directoryPath);
@@ -194,7 +195,9 @@ class EntriesList extends Element {
       directoryNameDragEntryItem = this.findDirectoryNameDragEntryItem(directoryName);
 
       if (directoryNameDragEntryItem === null) {
-        directoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(directoryName, collapsed);
+        const created = false;
+
+        directoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(directoryName, collapsed, created);
 
         this.addEntryItem(directoryNameDragEntryItem);
       } else {
@@ -206,7 +209,7 @@ class EntriesList extends Element {
       let topmostDirectoryNameDragEntryItem = this.findDirectoryNameDragEntryItem(topmostDirectoryName);
 
       if (topmostDirectoryNameDragEntryItem === null) {
-        topmostDirectoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(topmostDirectoryName, collapsed);
+        topmostDirectoryNameDragEntryItem = this.createDirectoryNameDragEntryItem(topmostDirectoryName, collapsed, created);
 
         this.addEntryItem(topmostDirectoryNameDragEntryItem);
       }
@@ -215,7 +218,7 @@ class EntriesList extends Element {
 
       directoryPath = directoryPathWithoutTopmostDirectoryName; ///
 
-      directoryNameDragEntryItem = topmostDirectoryNameDragEntryItem.addDirectoryPath(directoryPath, collapsed);
+      directoryNameDragEntryItem = topmostDirectoryNameDragEntryItem.addDirectoryPath(directoryPath, collapsed, created);
     }
 
     return directoryNameDragEntryItem;
@@ -364,26 +367,26 @@ class EntriesList extends Element {
     });
   }
 
-  createFileNameDragEntryItem(fileName) {
+  createFileNameDragEntryItem(fileName, created) {
 		const name = fileName,	///
 					explorer = this.getExplorer(),
 					FileNameDragEntryItem = explorer.getFileNameDragEntryItem(),
 					fileNameDragEntryItem =
 
-						<FileNameDragEntryItem name={name} explorer={explorer} />
+						<FileNameDragEntryItem name={name} explorer={explorer} created={created} />
 
 					;
 
 		return fileNameDragEntryItem;
 	}
 
-	createDirectoryNameDragEntryItem(directoryName, collapsed) {
+	createDirectoryNameDragEntryItem(directoryName, collapsed, created) {
 		const name = directoryName,	///
 					explorer = this.getExplorer(),
 					DirectoryNameDragEntryItem = explorer.getDirectoryNameDragEntryItem(),
 					directoryNameDragEntryItem =
 
-						<DirectoryNameDragEntryItem name={name} collapsed={collapsed} explorer={explorer} />
+						<DirectoryNameDragEntryItem name={name} explorer={explorer} collapsed={collapsed} created={created} />
 
 					;
 
@@ -593,7 +596,7 @@ class EntriesList extends Element {
           forEachDragEntryItem = this.forEachDragEntryItem.bind(this),
           retrieveDragEntryItems = this.retrieveDragEntryItems.bind(this),
           retrieveMarkerEntryItem = this.retrieveMarkerEntryItem.bind(this),
-          retrieveSelectedDragEntryItem = this.retrieveSelectedDragEntryItem.bind(this);;
+          retrieveSelectedDragEntryItem = this.retrieveSelectedDragEntryItem.bind(this);
 
 		return ({
       expandEntriesList,

package/src/mixins/explorer.js

@@ -2,7 +2,7 @@
 
 import { asynchronousUtilities } from "necessary";
 
-import { MOVE_EVENT_TYPE, OPEN_EVENT_TYPE, REMOVE_EVENT_TYPE, RENAME_EVENT_TYPE, SELECT_EVENT_TYPE } from "../eventTypes";
+import { MOVE_EVENT_TYPE, OPEN_EVENT_TYPE, REMOVE_EVENT_TYPE, RENAME_EVENT_TYPE, SELECT_EVENT_TYPE, CREATE_EVENT_TYPE } from "../eventTypes";
 
 const { forEach } = asynchronousUtilities;
 
@@ -62,6 +62,20 @@ function offRename(renameHandler, element) {
   this.removeEventListener(eventType, handler, element);
 }
 
+function onCreate(createHandler, element) {
+  const eventType = CREATE_EVENT_TYPE,
+        handler = createHandler;  ///
+
+  this.addEventListener(eventType, handler, element);
+}
+
+function offCreate(createHandler, element) {
+  const eventType = CREATE_EVENT_TYPE,
+        handler = createHandler;  ///
+
+  this.removeEventListener(eventType, handler, element);
+}
+
 function onSelect(selectHandler, element) {
   const eventType = SELECT_EVENT_TYPE,
         handler = selectHandler;  ///
@@ -94,7 +108,7 @@ function callSelectHandlers(path, selected) {
 
   eventListeners.forEach((eventListener) => {
     const { handler, element } = eventListener,
-        selectHandler = handler;  ///
+          selectHandler = handler;  ///
 
     selectHandler.call(element, path, selected, this);  ///
   });
@@ -115,12 +129,12 @@ function callMoveHandlersAsync(pathMaps, done) {
 
 function callRemoveHandlersAsync(pathMaps, done) {
   const eventType = REMOVE_EVENT_TYPE,
-      eventListeners = this.findEventListeners(eventType);
+        eventListeners = this.findEventListeners(eventType);
 
   forEach(eventListeners, (eventListener, next) => {
     const { handler, element } = eventListener,
-        removeHandler = handler,  ///
-        done = next;  ///
+          removeHandler = handler,  ///
+          done = next;  ///
 
     removeHandler.call(element, pathMaps, done);
   }, done);
@@ -139,7 +153,20 @@ function callRenameHandlersAsync(pathMaps, done) {
   }, done);
 }
 
-const eventMixins = {
+function callCreateHandlersAsync(pathMaps, done) {
+  const eventType = CREATE_EVENT_TYPE,
+        eventListeners = this.findEventListeners(eventType);
+
+  forEach(eventListeners, (eventListener, next) => {
+    const { handler, element } = eventListener,
+          createHandler = handler,  ///
+          done = next;  ///
+
+    createHandler.call(element, pathMaps, done);
+  }, done);
+}
+
+const explorerMixins = {
   onOpen,
   offOpen,
   onMove,
@@ -148,13 +175,16 @@ const eventMixins = {
   offRemove,
   onRename,
   offRename,
+  onCreate,
+  offCreate,
   onSelect,
   offSelect,
   callOpenHandlers,
   callSelectHandlers,
   callMoveHandlersAsync,
   callRemoveHandlersAsync,
-  callRenameHandlersAsync
+  callRenameHandlersAsync,
+  callCreateHandlersAsync
 };
 
-export default eventMixins;
+export default explorerMixins;

package/src/mixins/nameInput.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import { CHANGE_EVENT_TYPE, CANCEL_EVENT_TYPE } from "../eventTypes";
+
+function onChange(changeHandler, element) {
+  const eventType = CHANGE_EVENT_TYPE,
+        handler = changeHandler;  ///
+
+  this.addEventListener(eventType, handler, element);
+}
+
+function offChange(changeHandler, element) {
+  const eventType = CHANGE_EVENT_TYPE,
+        handler = changeHandler;  ///
+
+  this.removeEventListener(eventType, handler, element);
+}
+
+function onCancel(cancelHandler, element) {
+    const eventType = CANCEL_EVENT_TYPE,
+          handler = cancelHandler;  ///
+
+  this.addEventListener(eventType, handler, element);
+}
+
+function offCancel(cancelHandler, element) {
+    const eventType = CANCEL_EVENT_TYPE,
+          handler = cancelHandler;  ///
+
+  this.removeEventListener(eventType, handler, element);
+}
+
+function callChangeHandlers() {
+  const eventType = CHANGE_EVENT_TYPE,
+        eventListeners = this.findEventListeners(eventType);
+
+  eventListeners.forEach((eventListener) => {
+    const { handler, element } = eventListener,
+          changeHandler = handler;  ///
+
+    changeHandler.call(element);
+  });
+}
+
+function callCancelHandlers() {
+    const eventType = CANCEL_EVENT_TYPE,
+          eventListeners = this.findEventListeners(eventType);
+
+  eventListeners.forEach((eventListener) => {
+    const { handler, element } = eventListener,
+          cancelHandler = handler;  ///
+
+    cancelHandler.call(element);
+  });
+}
+
+const nameInputMixins = {
+  onChange,
+  offChange,
+  onCancel,
+  offCancel,
+  callChangeHandlers,
+  callCancelHandlers
+};
+
+export default nameInputMixins;

package/src/utilities/path.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import { pathUtilities } from "necessary";
+
+import { EMPTY_STRING } from "../constants";
+
+const { pathWithoutBottommostNameFromPath } = pathUtilities;
+
+export function nonNullPathWithoutBottommostNameFromPath(path) {
+  const pathWithoutBottommostName = pathWithoutBottommostNameFromPath(path),
+        nonNullPathWithoutBottommostName = (pathWithoutBottommostName !== null) ?
+                                              pathWithoutBottommostName :  ///
+                                                EMPTY_STRING;
+
+  return nonNullPathWithoutBottommostName;
+}

package/src/utilities/pathMap.js

@@ -3,21 +3,22 @@
 import { pathUtilities } from "necessary";
 
 import { EMPTY_STRING } from "../constants";
+import { nonNullPathWithoutBottommostNameFromPath } from "../utilities/path";
 
-const { concatenatePaths, pathWithoutBottommostNameFromPath } = pathUtilities;
+const { concatenatePaths } = pathUtilities;
 
 export function sourceEntryPathFromEntryItem(entryItem) {
-  const entryItemPath = entryItem.getPath(),
-        entryItemPathWithoutBottommostName = pathWithoutBottommostNameFromPath(entryItemPath),
-        sourceEntryPath = nonNullPathFromName(entryItemPathWithoutBottommostName); ///
+  const path = entryItem.getPath(),
+        nonNullPathWithoutBottommostName = nonNullPathWithoutBottommostNameFromPath(path),
+        sourceEntryPath = nonNullPathWithoutBottommostName; ///
 
   return sourceEntryPath;
 }
 
 export function targetEntryPathFromEntryItem(entryItem) {
-  const entryItemPath = entryItem.getPath(),
-        entryItemPathWithoutBottommostName = pathWithoutBottommostNameFromPath(entryItemPath),
-        targetEntryPath = nonNullPathFromName(entryItemPathWithoutBottommostName); ///
+  const path = entryItem.getPath(),
+        nonNullPathWithoutBottommostName = nonNullPathWithoutBottommostNameFromPath(path),
+        targetEntryPath = nonNullPathWithoutBottommostName; ///
 
   return targetEntryPath;
 }
@@ -25,6 +26,8 @@ export function targetEntryPathFromEntryItem(entryItem) {
 export function adjustSourceEntryPath(sourceEntryPath, name) {
   if (false) {
     ///
+  } else if (sourceEntryPath === null) {
+    sourceEntryPath = null;
   } else if (sourceEntryPath === EMPTY_STRING) {
     sourceEntryPath = name;  ///
   } else {
@@ -47,11 +50,3 @@ export function adjustTargetEntryPath(targetEntryPath, nameInputName) {
 
   return targetEntryPath;
 }
-
-function nonNullPathFromName(name) {
-  const path = (name !== null) ?
-                  name :  ///
-                    EMPTY_STRING;
-
-  return path;
-}