glib-web 1.0.1 → 2.2.0

package/actions/forms/submit.js

@@ -1,5 +1,7 @@
 export default class {
   execute(properties, component) {
-    component.$dispatchEvent("forms/directSubmit");
+    component.$dispatchEvent("forms/directSubmit", {
+      url: properties.overrideUrl
+    });
   }
 }

package/components/fields/richText.vue

@@ -1,34 +1,53 @@
 <template>
   <div :style="$styles()" :class="$classes()">
+    <v-tabs v-model="mode" fixed-tabs>
+      <v-tab>Editor</v-tab>
+      <v-tab>Code</v-tab>
+    </v-tabs>
+
     <v-progress-linear v-if="showProgress" v-model="progress.value" />
+
+    <!-- Remove the editor to avoid circular updating between this editor and the raw field. -->
     <VueEditor
-      v-model="rawValue"
+      v-if="!rawMode"
+      id="rich-editor"
+      v-model="htmlValue"
       :editor-toolbar="customToolbar"
       use-custom-image-handler
-      @text-change="separateOutImages"
+      @text-change="onEditorChange"
       @image-added="uploadImage"
     />
-    <input type="hidden" :name="spec.name" :value="produceValue" />
-    <input
-      v-for="(imageKey, index) in imageKeys"
-      :key="index"
-      type="hidden"
-      :name="imageUploader.name"
-      :value="images[imageKey]"
-    />
+    <!-- Hide these fields but don't remove them because these are the values that will get submitted. -->
+    <div :style="{ display: rawMode ? 'block' : 'none' }">
+      <v-textarea
+        id="raw-editor"
+        v-model="producedValue"
+        :name="spec.name"
+        :style="$styles()"
+        :class="$classes()"
+        :outlined="$classes().includes('outlined')"
+        @input="onCodeChange"
+      ></v-textarea>
+      <v-text-field
+        v-for="(imageKey, index) in imageKeys"
+        :key="index"
+        :label="`Image ${index + 1}`"
+        :style="$styles()"
+        :outlined="$classes().includes('outlined')"
+        type="text"
+        :name="imageUploader.name"
+        :value="images[imageKey]"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import Uploader from "../../utils/uploader";
-import { VueEditor } from "vue2-editor";
+import { VueEditor, Quill } from "vue2-editor";
 import TurndownService from "turndown";
 import { gfm } from "turndown-plugin-gfm";
 
-// import EventController, {
-//   DISABLE_SUBMIT_BUTTON
-// } from "../../utils/global-event-controller";
-
 export default {
   components: { VueEditor },
   props: {
@@ -41,26 +60,52 @@ export default {
       [{ list: "ordered" }, { list: "bullet" }],
       ["image", "link"]
     ],
-    rawValue: "",
-    cleanValue: "",
+    htmlValue: "",
+    cleanValue: null,
+    producedValue: "",
     images: {},
     imageKeys: [],
     progress: { value: -1 },
     imageUploader: {},
-    produce: "markdown",
+    produce: null,
+    mode: null,
     turndownService: new TurndownService({ headingStyle: "atx" })
   }),
   computed: {
-    showProgress: function() {
+    showProgress() {
       return this.progress.value >= 0;
     },
-    produceValue: function() {
-      if (this.produce == "html") {
-        return this.cleanValue;
-      } else if (this.produce == "markdown") {
-        return this.turndownService.turndown(this.cleanValue);
-      } else {
-        return null;
+    rawMode() {
+      return this.mode == 1;
+    }
+  },
+  watch: {
+    cleanValue(val, oldVal) {
+      if (oldVal == null) {
+        // Don't update `producedValue` if this is first-time initialization to preserve the original value.
+        return;
+      }
+      switch (this.produce) {
+        case "html":
+          this.producedValue = val;
+          break;
+        case "markdown":
+          this.producedValue = this.turndownService.turndown(val);
+          break;
+        default:
+          console.log(`Unsupported format: ${this.produce}`);
+      }
+    },
+    producedValue(val) {
+      switch (this.produce) {
+        case "html":
+          this.htmlValue = val;
+          break;
+        case "markdown":
+          this.htmlValue = this.toHtmlValue(val);
+          break;
+        default:
+          console.log(`Unsupported format: ${this.produce}`);
       }
     }
   },
@@ -69,6 +114,8 @@ export default {
   },
   methods: {
     $ready() {
+      this.produce = this.spec.produce || "markdown";
+
       this.turndownService.use(gfm);
       this.turndownService.addRule("strikethrough", {
         filter: ["del", "s", "strike"],
@@ -77,29 +124,39 @@ export default {
         }
       });
 
-      const vm = this;
-      this.rawValue = (this.spec.value || "").replace(
-        /\{\{image([0-9]+)\}\}/g,
-        function(_, index) {
-          const image = vm.spec.images[index - 1];
-          if (
-            image &&
-            vm.$type.isString(image.value) &&
-            vm.$type.isString(image.fileUrl)
-          ) {
-            const url = image.fileUrl;
-            const key = url.hashCode().toString();
-            vm.images[key] = image.value;
-            return url;
-          }
-          return "{{IMAGE_NOT_FOUND}}";
+      this.turndownService.addRule("codeblock", {
+        filter: ["pre"],
+        replacement: function(content) {
+          return "```\n" + content + "```";
         }
-      );
+      });
 
       this.imageUploader = this.spec.imageUploader;
-      if (this.spec.produce) {
-        this.produce = this.spec.produce;
-      }
+
+      // Convert initial markdown value to html for displaying.
+      this.producedValue = this.spec.value || "";
+      this.htmlValue = this.toHtmlValue(this.producedValue);
+    },
+    toHtmlValue(producedValue) {
+      const vm = this;
+      var value = producedValue.replace(/\{\{image([0-9]+)\}\}/g, function(
+        _,
+        index
+      ) {
+        const image = vm.spec.images[index - 1];
+        if (
+          image &&
+          vm.$type.isString(image.value) &&
+          vm.$type.isString(image.fileUrl)
+        ) {
+          const url = image.fileUrl;
+          const key = url.hashCode().toString();
+          vm.images[key] = image.value;
+          return url;
+        }
+        return "{{IMAGE_NOT_FOUND}}";
+      });
+      return this.produce == "markdown" ? Utils.format.markdown(value) : value;
     },
     uploadImage: function(file, editor, cursorLocation) {
       let vm = this;
@@ -127,12 +184,30 @@ export default {
         });
       }
     },
+    onEditorChange() {
+      this.separateOutImages();
+      this.onCodeChange();
+    },
+    onCodeChange() {
+      Utils.type.ifObject(this.spec.onChange, onChange => {
+        this.$nextTick(() => {
+          const params = {
+            [this.spec.paramNameForFormData || "formData"]: {
+              [this.fieldName]: this.fieldModel
+            }
+          };
+
+          const data = Object.assign({}, onChange, params);
+          GLib.action.execute(data, this);
+        });
+      });
+    },
     separateOutImages: function() {
       const vm = this;
       var index = 0;
       vm.imageKeys.clear();
       // TODO: Fix to avoid replacing <video src="">
-      this.cleanValue = this.rawValue.replace(/src="([^"]+)"/g, function(
+      this.cleanValue = this.htmlValue.replace(/src="([^"]+)"/g, function(
         _,
         imageValue
       ) {
@@ -204,9 +279,13 @@ export default {
   height: 375px;
 }
 */
-.ql-toolbar.sticky {
+/* .ql-toolbar.sticky {
   position: fixed;
   z-index: 99;
   background-color: white;
+} */
+#rich-editor,
+#raw-editor {
+  height: 350px;
 }
 </style>

package/components/map.vue

@@ -39,26 +39,35 @@
         :clickable="true"
         :title="String(marker.clusterSize || 1)"
         @click="onMarkerClick(marker, index)"
-      ></gmap-marker>
+      >
+      </gmap-marker>
     </gmap-cluster>
     <template v-else>
-      <gmap-marker
+      <gmap-custom-marker
         v-for="(marker, index) in markers"
         :key="index"
-        :position="{ lat: marker.latitude, lng: marker.longitude }"
-        :clickable="true"
-        @click="onMarkerClick(marker, index)"
-      ></gmap-marker>
+        :marker="{ lat: marker.latitude, lng: marker.longitude }"
+        @click.native="onMarkerClick(marker, index)"
+      >
+        <img v-if="marker.imageUrl" :src="marker.imageUrl" class="marker" />
+        <common-icon
+          v-else
+          class="marker"
+          :spec="{ material: { name: 'place', size: 40 }, color: '#c92b2a' }"
+        />
+      </gmap-custom-marker>
     </template>
   </gmap-map>
 </template>
 
 <script>
 import GmapCluster from "vue2-google-maps/dist/components/cluster";
+import GmapCustomMarker from "vue2-gmap-custom-marker";
 
 export default {
   components: {
-    "gmap-cluster": GmapCluster
+    "gmap-cluster": GmapCluster,
+    "gmap-custom-marker": GmapCustomMarker
   },
   props: {
     spec: { type: Object, required: true }
@@ -204,3 +213,11 @@ export default {
   // }
 };
 </script>
+
+<style lang="scss" scoped>
+.marker {
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+}
+</style>

package/components/markdown.vue

@@ -61,6 +61,15 @@ export default {
   & > span > :last-child {
     margin-bottom: 0;
   }
+  pre {
+    background-color: #f0f0f0;
+    padding: 8px 10px;
+
+    & > code {
+      background-color: transparent;
+      padding: 0;
+    }
+  }
 }
 .line-clamp {
   display: -webkit-box;

package/components/mixins/generic.js

@@ -20,6 +20,17 @@ export default {
             v => (v ? true : spec.message)
           ]);
         });
+        Utils.type.ifObject(val.format, spec => {
+          augmentedRules = augmentedRules.concat([
+            v => {
+              console.log("VALIDATE1");
+              if (v && !v.match(spec.regex)) {
+                return spec.message;
+              }
+              return true;
+            }
+          ]);
+        });
       });
       return augmentedRules;
     },

package/components/panels/form.vue

@@ -64,7 +64,7 @@ export default {
       });
 
       this.$onEvent("forms/directSubmit", e => {
-        this.directSubmit();
+        this.directSubmit(e.data.url);
       });
     },
     $ready() {
@@ -117,10 +117,14 @@ export default {
         );
       });
     },
-    directSubmit() {
-      this.validate(() => {
-        GLib.form.submitData(this.formElement, this);
-      });
+    directSubmit(overrideUrl = null) {
+      if (overrideUrl) {
+        GLib.form.submitData(this.formElement, this, overrideUrl);
+      } else {
+        this.validate(() => {
+          GLib.form.submitData(this.formElement, this);
+        });
+      }
     },
     validate(onPassed) {
       if (this.$refs.form.validate()) {

package/components/panels/timeline.vue

@@ -1,42 +1,32 @@
 <template>
   <v-container :class="$classes()">
-    <v-timeline v-if="items" dense align-top>
+    <v-timeline v-if="events" dense align-top>
       <v-timeline-item
-        v-for="(item, item_key) in items"
-        :key="item_key"
+        v-for="(item, index) in events"
+        :key="index"
         color="white"
         fill-dot
         :small="$classes().includes('small')"
         :large="$classes().includes('large')"
-        :class="timelineItemClasses(item)"
+        class="my-6"
         :hide-dot="item.hide_dot"
       >
         <template v-slot:icon>
-          <div
-            :class="$classes().includes('outlined') ? 'outlined-dots' : ''"
-            :style="`border-color: ${dotColor(item)};`"
-          >
-            <div v-if="item.left_label" class="number-circle">
-              {{ item.left_label }}
+          <div :class="$classes().includes('outlined') ? 'outlined-dots' : ''">
+            <div v-if="item.label" class="number-circle">
+              {{ item.label }}
+            </div>
+            <div v-else class="icon">
+              <common-icon
+                :spec="{
+                  material: { name: item.icon, size: iconSize() },
+                  color: item.color
+                }"
+              />
             </div>
-            <!-- TODO: Use common-icon -->
-            <v-icon v-else size="24" :color="dotColor(item)">
-              {{ dotIcon(item) }}
-            </v-icon>
           </div>
         </template>
-
-        <div :class="item.subtitle ? 'mt-5' : 'mt-2'" class="content">
-          <div
-            :class="item.active ? 'font-weight-bold' : 'font-weight-regular'"
-          >
-            {{ item.label }}
-          </div>
-          <div class="font-weight-regular">
-            {{ item.subtitle }}
-          </div>
-          <panels-responsive v-if="item.active" :spec="spec" />
-        </div>
+        <panels-responsive :spec="{ childViews: [childViews[index]] }" />
       </v-timeline-item>
     </v-timeline>
   </v-container>
@@ -49,32 +39,17 @@ export default {
   },
   data() {
     return {
-      items: this.spec.items,
-      uncompletedIcon: this.spec.uncompletedIcon || "check_circle",
-      completedIcon: this.spec.completedIcon || "radio_button_unchecked",
-      completedColor: this.spec.completedColor || "blue",
-      uncompletedColor: this.spec.uncompletedColor || "grey"
+      events: null,
+      childViews: null
     };
   },
   methods: {
-    timelineItemClasses(item) {
-      let classes = !item.completed && !item.active ? "uncompleted" : "";
-
-      if (!this.$classes().includes("small")) {
-        classes += " my-6";
-      }
-
-      return classes;
-    },
-    dotColor(item) {
-      return !item.completed && !item.active
-        ? this.uncompletedColor
-        : this.completedColor;
+    $ready() {
+      this.events = this.spec.events;
+      this.childViews = this.spec.childViews;
     },
-    dotIcon(item) {
-      return item.active || item.completed
-        ? item.uncompletedIcon || this.uncompletedIcon
-        : item.completedIcon || this.completedIcon
+    iconSize() {
+      return this.$classes().includes("small") ? 16 : 24;
     }
   }
 };
@@ -84,18 +59,12 @@ export default {
 .v-timeline {
   padding-top: 0px;
 }
-
 .v-timeline-item {
   padding-bottom: 0px !important;
 }
 .container {
   padding-top: 0px;
 }
-.small {
-  > .number-circle {
-    font-size: 14px;
-  }
-}
 .outlined-dots {
   border-radius: 50%;
   width: 100%;
@@ -111,4 +80,18 @@ export default {
     box-shadow: none;
   }
 }
+.icon {
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+// Size variations
+.number-circle {
+  font-size: 16px;
+}
+.small {
+  .number-circle {
+    font-size: 14px;
+  }
+}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glib-web",
-  "version": "1.0.1",
+  "version": "2.2.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -30,6 +30,7 @@
     "vue-youtube": "^1.4.0",
     "vue2-editor": "^2.9.1",
     "vue2-google-maps": "^0.10.6",
+    "vue2-gmap-custom-marker": "^6.1.1",
     "vuedraggable": "^2.24.1",
     "vuetify": "2.3.9"
   },

package/utils/form.js

@@ -3,14 +3,14 @@ export default class {
   // Button -> Button.onClick() -> Utils.http.execute() -- doesn't save autofill values
   // Button -> Button.onClick() -> form.submit() -- doesn't execute Form.onSubmit(), so cannot call Utils.http.execute() there
   // Submit -> Form.onSubmit() -> Utils.http.execute() -- save autofill values and auto-submit when ENTER is pressed
-  static submitData(form, component) {
+  static submitData(form, component, overrideUrl = null) {
     // Analogous to Rails' form_with's `local: true`
     if (form.dataset.local) {
       // Prevent onUnload dirty prompt.
       Utils.http.clearDirtyState();
       form.submit();
     } else {
-      const url = form.getAttribute("action");
+      const url = overrideUrl ? overrideUrl : form.getAttribute("action");
       const formData = new FormData(form);
       const method = form.getAttribute("method");
       if (method.toUpperCase() === "GET") {