easy-file-system 2.1.11 → 2.1.13

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

@@ -20,18 +20,15 @@ export default class DirectoryNameDragEntryItemDiv extends DragEntryItemDiv {
   }
 
   childElements() {
-    const { name, NameInput, NameButton, ToggleButton, DirectoryNameSVG } = this.properties;
+    const { name, NameSpan, ToggleButton, DirectoryNameSVG } = this.properties;
 
     return ([
 
       <ToggleButton onMouseDown={this.toggleButtonMouseDownHandler} />,
       <DirectoryNameSVG/>,
-      <NameButton>
+      <NameSpan>
         {name}
-      </NameButton>,
-      <NameInput>
-        {name}
-      </NameInput>
+      </NameSpan>
 
     ]);
   }

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

@@ -12,17 +12,14 @@ export default class FileNameDragEntryItemDiv extends DragEntryItemDiv {
   }
 
   childElements() {
-    const { name, NameInput, NameButton, FileNameSVG } = this.properties;
+    const { name, NameSpan, FileNameSVG } = this.properties;
 
     return ([
 
       <FileNameSVG/>,
-      <NameButton>
+      <NameSpan>
         {name}
-      </NameButton>,
-      <NameInput>
-        {name}
-      </NameInput>
+      </NameSpan>
 
     ]);
   }

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

@@ -2,6 +2,8 @@
 
 import EntryItemDiv from "../../../div/item/entry";
 
+import { EMPTY_STRING } from "../../../constants";
+
 export default class DragEntryItemDiv extends EntryItemDiv {
   mouseDownHandler = (event, element) => {
     const explorer = this.getExplorer(),
@@ -24,8 +26,7 @@ export default class DragEntryItemDiv extends EntryItemDiv {
 
   static ignoredProperties = [
     "name",
-    "NameInput",
-    "NameButton"
+    "NameSpan"
   ];
 
   static defaultProperties = {

package/src/div/item/entry.js

@@ -34,7 +34,6 @@ class EntryItemDiv extends Element {
 
 export default withStyle(EntryItemDiv)`
 
-  position: relative;
   padding-top: ${entryItemDivPaddingTop};
   
 `;

package/src/explorer.js

@@ -105,9 +105,9 @@ class Explorer extends Element {
 
       if (selectedDragEntryItem !== null) {
         const dragEntryItem = selectedDragEntryItem,  ///
-              dragEntryItemEdited = dragEntryItem.isEdited();
+              dragEntryItemEditable = dragEntryItem.isEditable();
 
-        if (dragEntryItemEdited) {
+        if (dragEntryItemEditable) {
           return;
         }
 

package/src/index.js

@@ -5,8 +5,7 @@ export { default as RubbishBin } from "./rubbishBin";
 
 export { default as eventTypes } from "./eventTypes";
 
-export { default as NameInput } from "./input/name";
-export { default as NameButton } from "./button/name";
+export { default as NameSpan } from "./span/name";
 export { default as EntriesList } from "./list/entries";
 export { default as ToggleButton } from "./button/toggle";
 

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

@@ -117,13 +117,13 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 	retrievePathMaps(sourceEntryPath, targetEntryPath, pathMaps) {
 		const name = this.getName(),
 					pathMap = this.getPathMap(sourceEntryPath, targetEntryPath),
-          nameInputName = this.getNameInputName();
+          nameSpanName = this.getNameSpanName();
 
 		pathMaps.push(pathMap);
 
 		sourceEntryPath = adjustSourceEntryPath(sourceEntryPath, name);
 
-		targetEntryPath = adjustTargetEntryPath(targetEntryPath, nameInputName);
+		targetEntryPath = adjustTargetEntryPath(targetEntryPath, nameSpanName);
 
 		this.forEachDragEntryItem((dragEntryItem) => {
 			dragEntryItem.retrievePathMaps(sourceEntryPath, targetEntryPath, pathMaps);
@@ -180,7 +180,7 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 
   childElements() {
 		const { name } = this.properties,
-          { NameInput, NameButton, ToggleButton, DirectoryNameSVG } = this.constructor,
+          { NameSpan, ToggleButton, DirectoryNameSVG } = this.constructor,
           explorer = this.getExplorer(),
           EntriesList = explorer.getEntriesList();
 
@@ -188,8 +188,7 @@ export default class DirectoryNameDragEntryItem extends DragEntryItem {
 
 			<DirectoryNameDragEntryItemDiv name={name}
 																		 explorer={explorer}
-																		 NameInput={NameInput}
-																		 NameButton={NameButton}
+																		 NameSpan={NameSpan}
 																		 ToggleButton={ToggleButton}
 																		 DirectoryNameSVG={DirectoryNameSVG}
 			/>,

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

@@ -54,17 +54,17 @@ export default class FileNameDragEntryItem extends DragEntryItem {
 
 	childElements() {
     const { name } = this.properties,
-          { NameInput, NameButton, FileNameSVG } = this.constructor,
+          { NameSpan, FileNameSVG } = this.constructor,
 					explorer = this.getExplorer();
 
 		return (
 
 			<FileNameDragEntryItemDiv name={name}
 																explorer={explorer}
-																NameInput={NameInput}
-																NameButton={NameButton}
+																NameSpan={NameSpan}
 																FileNameSVG={FileNameSVG}
-      />
+			/>
+
 		);
   }
 

package/src/item/entry/drag.js

@@ -4,25 +4,27 @@ import withStyle from "easy-with-style";  ///
 
 import { dragMixins } from "easy-drag-and-drop";
 
+import NameSpan from "../../span/name";
 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";
 
 class DragEntryItem extends EntryItem {
-  nameInputChangeHandler = () => {
-    const created = this.isCreated(),
-          explorer = this.getExplorer(),
-          nameChanged = this.hasNameChanged(),
-          dragEntryItem = this; ///
+  nameSpanChangeHandler = (event, element) => {
+    const name = this.getName(),
+          nameSpanName = this.getNameSpanName(),
+          nameChanged = (name !== nameSpanName);
 
     if (!nameChanged) {
       return;
     }
 
+    const created = this.isCreated(),
+          explorer = this.getExplorer(),
+          dragEntryItem = this; ///
+
     if (created) {
       explorer.createDragEntryItem(dragEntryItem, () => {
         this.cancel();
@@ -36,7 +38,7 @@ class DragEntryItem extends EntryItem {
     });
   }
 
-  nameInputCancelHandler = () => {
+  nameSpanCancelHandler = (event, element) => {
     const created = this.isCreated();
 
     created ?
@@ -88,12 +90,12 @@ class DragEntryItem extends EntryItem {
   getPathMap(sourceEntryPath, targetEntryPath) {
     const name = this.getName(),
           collapsed = this.isCollapsed(),
-          nameInputName = this.getNameInputName(),
+          nameSpanName = this.getNameSpanName(),
           entryDirectory = this.getEntryDirectory();
 
     sourceEntryPath = adjustSourceEntryPath(sourceEntryPath, name);	///
 
-    targetEntryPath = adjustTargetEntryPath(targetEntryPath, nameInputName);	///
+    targetEntryPath = adjustTargetEntryPath(targetEntryPath, nameSpanName);	///
 
     const pathMap = {
       collapsed,
@@ -115,14 +117,6 @@ class DragEntryItem extends EntryItem {
     return pathMaps;
   }
 
-  hasNameChanged() {
-    const nameInputName = this.getNameInputName(),
-          nameButtonName = this.getNameButtonName(),
-          nameChanged = (nameInputName !== nameButtonName);
-
-    return nameChanged;
-  }
-
   getEntryDirectory() {
     const directoryNameDragEntryItem = this.isDirectoryNameDragEntryItem(),
           entryDirectory = directoryNameDragEntryItem;  ///
@@ -150,11 +144,11 @@ class DragEntryItem extends EntryItem {
     return selected;
   }
 
-  isEdited() {
-    const nameInputDisplayed = this.isNameInputDisplayed(),
-          edited = nameInputDisplayed;  ///
+  isEditable() {
+    const nameSpanEdited = this.isNameSpanEditable(),
+          editable = nameSpanEdited; ///
 
-    return edited;
+    return editable;
   }
 
   deselect() {
@@ -166,44 +160,34 @@ 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);
-    }
+    const created = this.isCreated(),
+          name = created ?
+                   EMPTY_STRING :
+                     this.getName(),
+          nameSpanName = name; ///
 
-    this.hideNameButton();
+    this.setNameSpanName(nameSpanName);
 
-    this.showNameInput();
+    this.editNameSpan();
   }
 
   cancel() {
     const name = this.getName(),
-          nameInputName = name; ///
-
-    this.setNameInputName(nameInputName);
+          nameSpanName = name; ///
 
-    this.showNameButton();
+    this.setNameSpanName(nameSpanName);
 
-    this.hideNameInput();
+    this.cancelNameSpan();
   }
 
   didMount() {
-    this.hideNameInput();
-
     this.onStopDrag(this.stopDragHandler);
 
     this.onStartDrag(this.startDragHandler);
 
-    this.onNameInputChange(this.nameInputChangeHandler);
+    this.onNameSpanChange(this.nameSpanChangeHandler);
 
-    this.onNameInputCancel(this.nameInputCancelHandler);
+    this.onNameSpanCancel(this.nameSpanCancelHandler);
 
     this.enableDrag();
 	}
@@ -213,9 +197,9 @@ class DragEntryItem extends EntryItem {
 
     this.offStartDrag(this.startDragHandler);
 
-    this.offNameInputChange(this.nameInputChangeHandler);
+    this.offNameSpanChange(this.nameSpanChangeHandler);
 
-    this.offNameInputCancel(this.nameInputCancelHandler);
+    this.offNameSpanCancel(this.nameSpanCancelHandler);
 
     this.disableDrag();
 	}
@@ -236,9 +220,7 @@ class DragEntryItem extends EntryItem {
 		this.assignContext();
 	}
 
-  static NameInput = NameInput;
-
-  static NameButton = NameButton;
+  static NameSpan = NameSpan;
 
   static ignoredProperties = [
     "created"

package/src/mixins/{nameInput.js → nameSpan.js}

@@ -54,7 +54,7 @@ function callCancelHandlers() {
   });
 }
 
-const nameInputMixins = {
+const nameSpanMixins = {
   onChange,
   offChange,
   onCancel,
@@ -63,4 +63,4 @@ const nameInputMixins = {
   callCancelHandlers
 };
 
-export default nameInputMixins;
+export default nameSpanMixins;

package/src/{input → span}/name.js

@@ -4,15 +4,15 @@ import withStyle from "easy-with-style";  ///
 
 import { arrayUtilities } from "necessary";
 
-import nameInputMixins from "../mixins/nameInput";
+import nameSpanMixins from "../mixins/nameSpan";
 
-import { NONE, INLINE_BLOCK } from "../constants";
 import { Element, window, document } from "easy";
 import { ENTER_KEY_CODE, ESCAPE_KEY_CODE } from "../keyCodes";
+import { ROLE, TRUE, TEXTBOX, CONTENT_EDITABLE } from "../constants";
 
 const { first } = arrayUtilities;
 
-class NameInput extends Element {
+class NameSpan extends Element {
   keyDownHandler = (event, element) => {
     const { keyCode } = event;
 
@@ -29,6 +29,12 @@ class NameInput extends Element {
     }
   }
 
+  isEditable() {
+    const editable = this.hasClass("editable");
+
+    return editable;
+  }
+
   getName() {
     const html = this.html(),
           name = html;  ///
@@ -45,12 +51,14 @@ class NameInput extends Element {
     textNode.nodeValue = name;  ///
   }
 
-  show() {
-    const display = INLINE_BLOCK;
+  edit() {
+    this.focus();
 
-    this.display(display);
+    this.addClass("editable");
 
-    this.focus();
+    this.addAttribute(ROLE, TEXTBOX);
+
+    this.addAttribute(CONTENT_EDITABLE, TRUE);
 
     const html = this.html(),
           range = document.createRange(),
@@ -68,65 +76,66 @@ class NameInput extends Element {
     selection.removeAllRanges();
 
     selection.addRange(range);
-  }
 
-  hide() {
-    const display = NONE;
-
-    this.display(display);
-  }
-
-  didMount() {
     this.onKeyDown(this.keyDownHandler);
   }
 
-  willUnmount() {
+  cancel() {
     this.offKeyDown(this.keyDownHandler);
+
+    this.removeClass("editable");
+
+    this.removeAttribute(ROLE, TEXTBOX);
+
+    this.removeAttribute(CONTENT_EDITABLE, TRUE);
   }
 
   parentContext() {
-    const showNameInput = this.show.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); ///
+    const editNameSpan = this.edit.bind(this), ///
+          cancelNameSpan = this.cancel.bind(this), ///
+          getNameSpanName = this.getName.bind(this), ///
+          setNameSpanName = this.setName.bind(this), ///
+          onNameSpanChange = this.onChange.bind(this), ///
+          onNameSpanCancel = this.onCancel.bind(this), ///
+          offNameSpanChange = this.offChange.bind(this), ///
+          offNameSpanCancel = this.offCancel.bind(this), ///
+          isNameSpanEditable = this.isEditable.bind(this); ///
 
     return ({
-      showNameInput,
-      hideNameInput,
-      getNameInputName,
-      setNameInputName,
-      onNameInputChange,
-      onNameInputCancel,
-      offNameInputChange,
-      offNameInputCancel,
-      isNameInputDisplayed
+      editNameSpan,
+      cancelNameSpan,
+      getNameSpanName,
+      setNameSpanName,
+      onNameSpanChange,
+      onNameSpanCancel,
+      offNameSpanChange,
+      offNameSpanCancel,
+      isNameSpanEditable
     });
   }
 
   static tagName = "span";  ///
 
   static defaultProperties = {
-    role: "textbox",
-    className: "name",
-    contentEditable: "true"
+    className: "name"
   };
 }
 
-Object.assign(NameInput.prototype, nameInputMixins);
+Object.assign(NameSpan.prototype, nameSpanMixins);
 
-export default withStyle(NameInput)`
-  
-  outline: none;
+export default withStyle(NameSpan)`
+
+  border: none;
+  display: inline-block;
   font-size: inherit;
   text-align: left;
+  background: transparent;
   font-weight: inherit;
   font-family: inherit;
-  border: 1px solid black;
-  padding: 4px;
+
+  .editable {
+    border: 1px solid black;
+    padding: 4px;
+  }
   
 `;

package/src/utilities/pathMap.js

@@ -37,15 +37,15 @@ export function adjustSourceEntryPath(sourceEntryPath, name) {
   return sourceEntryPath;
 }
 
-export function adjustTargetEntryPath(targetEntryPath, nameInputName) {
+export function adjustTargetEntryPath(targetEntryPath, nameSpanName) {
   if (false) {
     ///
   } else if (targetEntryPath === null) {
     targetEntryPath = null;
   } else if (targetEntryPath === EMPTY_STRING) {
-    targetEntryPath = nameInputName;  ///
+    targetEntryPath = nameSpanName;  ///
   } else {
-    targetEntryPath = concatenatePaths(targetEntryPath, nameInputName);
+    targetEntryPath = concatenatePaths(targetEntryPath, nameSpanName);
   }
 
   return targetEntryPath;