enter on HTTP POST

README.md

@@ -66,13 +66,11 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 * Keyboard shortcuts can be pressed at the same time which makes bugs for undo and redo if you aren't careful!
 * Circle brush (works okay for odd width and height numbers)
 * Importer could be re-written with regex
-* Exporter will default transparent bg to black by default, which wont for some asciis
 * Having more than a few layers depending on ascii size will slow things down, until the `fillNullBlocks` is refactored.
 * Select cannot select entire ASCII, is off by one at the end
   * We could add a special clause for the select tool when mouse leaves canvas to select all blocks
 * z indexing for toolbars and stuff is ANNOYING
 * Messing with deleting layers, if you somehow have a layer that isn't selected, it'll be buggy. This is hard to do.
-* Review escape and enter keys on dialogs and modals
 * Fill tool use fg or char as bounds
 ## Focusing on Now / Roadmap
 
@@ -99,6 +97,8 @@ ASCIIBIRD is mostly usable. There are some bugs however to note at the moment. R
 * Rename Layers
 * Some work around layers and transparent blocks, skip drawing transparent bg block on top layers. Or get bg from lowest layer if bg is null on higher layers.
 * The code that hides blocks off screen wont work if you scroll down, however it will work if you drag the canvas upward
+* Exporter will default transparent bg to black by default, which wont for some asciis
+* Review escape and enter keys on dialogs and modals
 
 # Keyboard Shortcuts
 

src/Dashboard.vue

@@ -8,11 +8,24 @@
       :selected-blocks="selectedBlocks"
       :text-editing="textEditing"
       :selecting="selecting"
-      :showing-post-url="showingPostUrl"
+      :is-showing-dialog="isShowingDialog"
       @updatecanvas="updatecanvas"
       :is-inputting-brush-size="this.isInputtingBrushSize"
     />
 
+    <t-dialog
+      name="dialog-posthttp"
+      title="Enter URL"
+      text="Enter URL for POST command"
+      icon="question"
+      :clickToClose=false
+      :showCloseButton=true
+      :disableBodyScroll=true
+      @closed="postHttp()"
+    >
+      <t-input v-model="lastPostURL" />
+    </t-dialog>
+
     <context-menu :display="showContextMenu" ref="menu" class="z-50">
       <ul>
         <li
@@ -87,7 +100,11 @@
     />
 
     <template v-if="asciibirdMeta.length">
-      <div class="bg-gray-500 z-50 relative" ref="tabbar" :style="toolbarString">
+      <div
+        class="bg-gray-500 z-50 relative"
+        ref="tabbar"
+        :style="toolbarString"
+      >
         <t-button class="p-1 rounded-xl" @click="openContextMenu">
           :::
         </t-button>
@@ -128,15 +145,27 @@
         class="z-10"
       />
 
-      <CharPicker v-if="toolbarState.isChoosingChar" class="z-10" :y-offset="scrollOffset" />
+      <CharPicker
+        v-if="toolbarState.isChoosingChar"
+        class="z-10"
+        :y-offset="scrollOffset"
+      />
       <ColourPicker
         v-if="toolbarState.isChoosingFg || toolbarState.isChoosingBg"
         class="z-10"
         :y-offset="scrollOffset"
       />
 
-      <BrushLibrary v-if="brushLibraryState.visible" class="z-10" :y-offset="scrollOffset" />
-      <BrushPreview class="z-10" @inputtingbrush="inputtingbrush" :y-offset="scrollOffset" />
+      <BrushLibrary
+        v-if="brushLibraryState.visible"
+        class="z-10"
+        :y-offset="scrollOffset"
+      />
+      <BrushPreview
+        class="z-10"
+        @inputtingbrush="inputtingbrush"
+        :y-offset="scrollOffset"
+      />
       <LayersLibrary class="z-10" :y-offset="scrollOffset" />
     </template>
     <template v-else>
@@ -233,9 +262,10 @@ export default {
     updateCanvas: false,
     selecting: null,
     isInputtingBrushSize: false,
-    showingPostUrl: false,
     scrollOffset: 0,
-    toolbarString: 'top: 0px;'
+    toolbarString: "top: 0px;",
+    lastPostURL: "",
+    isShowingDialog: false,
   }),
   computed: {
     splashAscii() {
@@ -292,9 +322,9 @@ export default {
   },
   watch: {
     scrollOffset(val) {
-      this.$refs.tabbar.style.top = val
-      this.toolbarString = `top: ${val}px`
-    }
+      this.$refs.tabbar.style.top = val;
+      this.toolbarString = `top: ${val}px`;
+    },
   },
   methods: {
     inputtingbrush(val) {
@@ -412,34 +442,32 @@ export default {
           downloadFile(ascii.output.join(""), ascii.filename, "text/plain");
           break;
         case "post":
-          this.showingPostUrl = true;
-          this.$dialog
-            .prompt({
-              title: "Enter URL",
-              text: "Enter URL for POST command",
-              icon: "question",
-              inputValue: this.lastPostURL,
-              clickToClose: false,
-            })
-            .then((result) => {
-              if (result.isOk) {
-                this.lastPostURL = result.input;
-                const requestOptions = {
-                  method: "POST",
-                  headers: { "Content-Type": "application/octet-stream" },
-                  body: ascii.output.join(""),
-                };
-                fetch(this.lastPostURL, requestOptions)
-                  .then((response) => this.$toasted.show("POSTed ascii!"))
-                  .catch((error) => this.$toasted.show("Error POSTing"));
-              }
-
-              this.showingPostUrl = false;
-            });
-
+          this.$store.commit("toggleDisableKeyboard", true);
+          this.$dialog.show('dialog-posthttp');
+          this.isShowingDialog = true;
           break;
       }
     },
+    postHttp() {
+      let ascii = exportMirc();
+
+      // this.lastPostURL = result.input;
+      const requestOptions = {
+        method: "POST",
+        headers: { "Content-Type": "application/octet-stream" },
+        body: ascii.output.join(""),
+      };
+      fetch(this.lastPostURL, requestOptions)
+        .then((response) => {
+          this.$toasted.show("POSTed ascii!");
+        })
+        .catch((error) => {
+          this.$toasted.show("Error POSTing");
+        });
+
+      this.$store.commit("toggleDisableKeyboard", false);
+      this.isShowingDialog = false;
+    },
     changeTab(key) {
       // Update the tab index in vuex store
       this.$store.commit("changeTab", key);

src/components/parts/KeyboardShortcuts.vue

@@ -28,7 +28,13 @@ export default {
       // Stop blocking input when modals are open
       // Whatever this char "'\0'" is it'd occur even without pressing any keys
       // This fixes it
-      if (this.isModalOpen || e.key === "\0" || this.isInputtingBrushSize || this.showingPostUrl || window.stopKeyEvents) {
+      if (e.key === "\0" || this.isInputtingBrushSize || this.isKeyboardDisabled || this.isShowingDialog || this.isModalOpen) {
+
+        if (e.key === "Enter" && this.isShowingDialog) {
+          this.$dialog.hide('dialog-posthttp');
+          return;
+        }
+
         return;
       }
 
@@ -398,7 +404,7 @@ export default {
   data: () => ({
     isPressed: false,
   }),
-  props: ["selectedBlocks", "textEditing", "selecting", "isInputtingBrushSize", "showingPostUrl"],
+  props: ["selectedBlocks", "textEditing", "selecting", "isInputtingBrushSize", "showingPostUrl", "isShowingDialog"],
   computed: {
     isModalOpen() {
       return this.$store.getters.isModalOpen;
@@ -500,6 +506,9 @@ export default {
     },
     gridView() {
       return this.toolbarState.gridView;
+    },
+    isKeyboardDisabled() {
+      return this.$store.getters.isKeyboardDisabled;
     }
   },
   methods: {

src/store/index.js

@@ -27,6 +27,7 @@ export default new Vuex.Store({
       editAscii: false,
       pasteAscii: false,
     },
+    isKeyboardDisabled: false,
     // The various options of ASCIIBIRD will eventually
     // end up in its own modal I guess
     options: {
@@ -455,20 +456,25 @@ export default new Vuex.Store({
         return item.hash !== hashValue
       });
     },
-
+    toggleDisableKeyboard(state, payload = null) {
+      state.isKeyboardDisabled = (payload === null ? !state.isKeyboardDisabled : payload);
+    },
     // Modals / Tabs
     openModal(state, type) {
       switch (type) {
         case 'new-ascii':
           state.modalState.newAscii = true;
+          state.isKeyboardDiasbled = true;
           break;
 
         case 'edit-ascii':
           state.modalState.editAscii = true;
+          state.isKeyboardDisabled = true;
           break;
 
         case 'paste-ascii':
           state.modalState.pasteAscii = true;
+          state.isKeyboardDisabled = true;
           break;
       }
     },
@@ -476,14 +482,17 @@ export default new Vuex.Store({
       switch (type) {
         case 'new-ascii':
           state.modalState.newAscii = false;
+          state.isKeyboardDisabled = false;
           break;
 
         case 'edit-ascii':
           state.modalState.editAscii = false;
+          state.isKeyboardDisabled = false;
           break;
 
         case 'paste-ascii':
           state.modalState.pasteAscii = false;
+          state.isKeyboardDisabled = false;
           break;
       }
     },
@@ -551,6 +560,7 @@ export default new Vuex.Store({
     brushLibraryState: (state) => state.brushLibraryState,
     brushPreviewState: (state) => state.brushPreviewState,
     layersLibraryState: (state) => state.layersLibraryState,
+    isKeyboardDisabled: (state) => state.isKeyboardDisabled,
     brushBlocks: (state) => JSON.parse(LZString.decompressFromUTF16(state.brushBlocks)) || [],
     selectBlocks: (state) => JSON.parse(LZString.decompressFromUTF16(state.selectBlocks)) || [],
     isModalOpen: (state) => {

src/views/Editor.vue

@@ -1222,7 +1222,7 @@ export default {
 
       // We can eraser or fill
       // if (this.canBg) {
-      //   const current = this.asciiBlockAtXy.bg;
+        const current = this.asciiBlockAtXy.bg;
       // }
 
       // if (this.canFg) {