glib-web 0.5.77

package/actions/http/put.js

@@ -0,0 +1,7 @@
+export default class {
+  execute(properties, target, controller) {
+    GLib.http.execute(properties, "PUT", controller, response =>
+      GLib.action.handleResponse(response, controller)
+    );
+  }
+}

package/actions/panels/scrollTo.js

@@ -0,0 +1,18 @@
+// Scroll the main body of the current window
+export default class {
+  execute(properties) {
+    const pageBody = Utils.history._pageBody;
+    const selector = `#${properties.viewId}`;
+    console.log("Scrolling to", selector);
+    const element = pageBody.querySelector(selector);
+    element.scrollIntoView({
+      behavior: properties["animate"] ? "smooth" : "auto"
+    });
+
+    element.classList.add("glib-scrollto");
+    element.classList.add("glib-scrollto--highlighted");
+    setTimeout(() => {
+      element.classList.remove("glib-scrollto--highlighted");
+    }, 500);
+  }
+}

package/actions/panels/scrollToBottom.js

@@ -0,0 +1,11 @@
+// Scroll the main body of the current window
+export default class {
+  execute(properties) {
+    const pageBody = Utils.history._pageBody;
+    console.log("Scrolling to bottom");
+    pageBody.scrollTo({
+      top: pageBody.scrollHeight,
+      behavior: properties["animate"] ? "smooth" : "auto"
+    });
+  }
+}

package/actions/runMultiple.js

@@ -0,0 +1,11 @@
+export default class {
+  logDisabled() {
+    return true;
+  }
+
+  execute(properties, target, component) {
+    for (const action of properties.childActions) {
+      GLib.action.execute(action, null, component);
+    }
+  }
+}

package/actions/sheets/select.js

@@ -0,0 +1,5 @@
+export default class {
+  execute(properties) {
+    Utils.launch.sheet.open(properties);
+  }
+}

package/actions/snackbars/alert.js

@@ -0,0 +1,15 @@
+import Launch from "../../utils/launch";
+
+export default class {
+  execute(properties) {
+    const spec = Object.assign({}, properties, {
+      buttons: [
+        {
+          text: "OK",
+          onClick: properties.onClose
+        }
+      ]
+    });
+    Utils.launch.snackbar.open(spec);
+  }
+}

package/actions/snackbars/select.js

@@ -0,0 +1,5 @@
+export default class {
+  execute(properties) {
+    Utils.launch.snackbar.open(properties);
+  }
+}

package/actions/timeouts/set.js

@@ -0,0 +1,20 @@
+export default class {
+  execute(properties, target, component) {
+    component.$data._isBusy = true;
+
+    if (properties.repeat) {
+      setInterval(() => {
+        this.onTimeout(properties, component);
+      }, properties.interval);
+    } else {
+      setTimeout(() => {
+        this.onTimeout(properties, component);
+      }, properties.interval);
+    }
+  }
+
+  onTimeout(properties, component) {
+    component.$data._isBusy = false;
+    GLib.action.execute(properties.onTimeout, null, component);
+  }
+}

package/actions/windows/close.js

@@ -0,0 +1,13 @@
+export default class {
+  execute(properties, target, component) {
+    Utils.history.back();
+
+    Utils.type.ifObject(properties["onClose"], it => {
+      // Allow time for history.back() to complete, which is important for actions that need
+      // to use window.location.href such as windows/reload
+      setTimeout(function() {
+        GLib.action.execute(it, null, component);
+      }, 100);
+    });
+  }
+}

package/actions/windows/closeAll.js

@@ -0,0 +1,16 @@
+import Type from "../../utils/type";
+
+export default class {
+  execute(properties, target, component) {
+    // TODO
+    // window.history.deleteAll()
+
+    Type.ifObject(properties["onClose"], it => {
+      // Allow time for history.back() to complete, which is important for actions that need
+      // to use window.location.href such as windows/reload
+      setTimeout(function() {
+        GLib.action.execute(it, null, component);
+      }, 100);
+    });
+  }
+}

package/actions/windows/closeWithReload.js

@@ -0,0 +1,18 @@
+import Hash from "../../utils/hash";
+
+export default class {
+  execute(properties, target, component) {
+    const fallbackUrl = new Hash(properties).remove("fallbackUrl");
+    const data = Object.assign({}, properties);
+    if (!Utils.history.back()) {
+      data.url = fallbackUrl;
+      console.log("Use fallbackUrl", data.url);
+    }
+
+    // Allow time for history.back() to complete, which is important for actions that need
+    // to use window.location.href such as `windows/reload`
+    setTimeout(function() {
+      Utils.http.reload(data, component);
+    }, 100);
+  }
+}

package/actions/windows/open.js

@@ -0,0 +1,5 @@
+export default class {
+  execute(properties, target, component) {
+    Utils.http.load(properties, null, component);
+  }
+}

package/actions/windows/openWeb.js

@@ -0,0 +1,5 @@
+export default class {
+  execute(properties) {
+    window.open(properties["url"]);
+  }
+}

package/actions/windows/refreshState.js

@@ -0,0 +1,5 @@
+export default class {
+  execute(properties) {
+    window.vueApp.stateUpdatedAt = Date.now();
+  }
+}

package/actions/windows/reload.js

@@ -0,0 +1,24 @@
+export default class {
+  execute(properties, target, component) {
+    if (Utils.settings.reactive) {
+      // const currentUrl = window.location.href;
+      // const data = {
+      //   url: properties.url || currentUrl
+      // };
+
+      // Utils.http.execute(data, "GET", component, (page, response) => {
+      //   Utils.http.forceComponentUpdate(() => {
+      //     window.vueApp.page = page;
+      //     const redirectUrl = Utils.url.htmlUrl(response.url);
+      //     Utils.history.updatePage(redirectUrl);
+
+      //     GLib.action.execute(properties["onReload"], null, component);
+      //   });
+      // });
+
+      Utils.http.reload(properties, component);
+    } else {
+      window.location.reload();
+    }
+  }
+}

package/actions/ws/push.js

@@ -0,0 +1,35 @@
+export default class {
+  execute(properties, target, component, params) {
+    Utils.type.ifString(properties.topic, topicName => {
+      const ws = window.vueApp.webSocket;
+      const channel = ws.channels[topicName];
+
+      Utils.type.ifString(properties.event, eventName => {
+        if (channel) {
+          const payload = Object.assign({}, properties.payload, ws.header, {
+            formData: properties.formData
+          });
+          console.debug(`Pushing to '${topicName}/${eventName}'`, payload);
+          channel
+            .push(eventName, payload)
+            .receive("ok", resp => {
+              console.log(
+                `Push to '${topicName}/${eventName}' succeeded`,
+                resp
+              );
+              Utils.ws.handleResponse(resp.onResponse, component);
+            })
+            .receive("error", resp => {
+              console.log(`Push to '${topicName}/${eventName}' failed`, resp);
+              Utils.ws.handleResponse(resp.onResponse, component);
+            });
+        } else {
+          console.error(`Topic not joined: '${topicName}'`);
+          Utils.launch.snackbar.error(
+            "Something went wrong and we have been notified"
+          );
+        }
+      });
+    });
+  }
+}

package/app.vue

@@ -0,0 +1,180 @@
+<template>
+  <v-app :class="page.styleClasses">
+    <nav-appbar :page="page" />
+
+    <v-progress-linear
+      v-if="$root.vueApp.indicator"
+      :indeterminate="true"
+      height="5"
+      style="position: fixed; z-index: 4;"
+    >
+    </v-progress-linear>
+
+    <div class="pages-header">
+      <layouts-content
+        :template="page.template"
+        :spec="header"
+        :full-height="false"
+      />
+    </div>
+
+    <div id="page_body" class="pages-body body-wrapper">
+      <layouts-content
+        :template="page.template"
+        :spec="body"
+        :full-height="true"
+      />
+    </div>
+
+    <div class="pages-footer">
+      <layouts-content
+        :template="page.template"
+        :spec="footer"
+        :full-height="false"
+      />
+    </div>
+  </v-app>
+</template>
+
+<script>
+import NavAppBar from "./nav/appbar";
+import Utils from "./utils/helper";
+import ContentLayout from "./nav/content";
+import phoenixSocketMixin from "./components/mixins/ws/phoenixSocket.js";
+import actionCableMixin from "./components/mixins/ws/actionCable.js";
+
+export default {
+  components: {
+    "nav-appbar": NavAppBar,
+    "layouts-content": ContentLayout
+  },
+  mixins: [phoenixSocketMixin, actionCableMixin],
+  props: {
+    page: { type: Object, required: true }
+  },
+  data() {
+    return {
+      title: "..."
+    };
+  },
+  computed: {
+    header() {
+      return this.page.header || {};
+    },
+    body() {
+      return this.page.body || {};
+    },
+    footer() {
+      return this.page.footer || {};
+    }
+  },
+  watch: {
+    "$root.indicator": function(val, oldVal) {
+      document.title = val ? "..." : this.page.title;
+    }
+  },
+  created() {
+    console.log(
+      `Version: ${Utils.settings.appVersion} (${Utils.settings.env})`
+    );
+    Utils.history.saveInitialContent(this.page);
+    Utils.history.restoreOnBackOrForward();
+  },
+  methods: {
+    $ready: function() {
+      document.title = this.page.title;
+
+      this.$wsInitPhoenixSocket(this.page.phoenixSocket);
+      this.$wsInitActionCable(this.page.actionCable);
+
+      if (this.$gtag) {
+        if (!Utils.settings.isDev) {
+          console.log(`Tracking analytics: ${window.location}`);
+          // this.$ga.page(window.location);
+
+          this.$gtag.pageview({
+            page_location: window.location
+          });
+        }
+      } else {
+        console.warn("Analytics not setup. Set `settings.gtagId`.");
+      }
+
+      if (Utils.history.isPoppedState(this.page)) {
+        setTimeout(() => {
+          // Wait until page is rendered
+          GLib.action.execute(this.page.onRefocus, null, this);
+        });
+      } else {
+        setTimeout(() => {
+          // Wait until page is rendered
+          GLib.action.execute(this.page.onLoad, null, this);
+        });
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+// h1,
+// h2,
+// h3,
+// h4,
+// h5,
+// h6,
+// span {
+//   line-height: 1;
+// }
+
+body {
+  // Hide superfluous scrollbar (Edge)
+  -ms-overflow-style: none;
+  * {
+    -ms-overflow-style: initial;
+  }
+
+  // Hide superfluous scrollbar (Webkit)
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+html {
+  // Hide superfluous scrollbar (Firefox)
+  scrollbar-width: none;
+}
+
+/*** Header/footer support ***/
+html,
+body,
+#app {
+  height: 100%;
+}
+/******/
+
+/*** panels/scrollTo support ***/
+.glib-scrollto {
+  transition: background 0.5s;
+}
+.glib-scrollto--highlighted {
+  background: yellow !important;
+}
+/******/
+</style>
+
+<style scoped>
+/*** Header/footer support ***/
+.application--wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.body-wrapper {
+  height: 100%;
+  /* overflow-y: auto; */
+  overflow-y: overlay;
+}
+/******/
+</style>

package/components/_button.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-btn
+    :type="type"
+    :disabled="disabled || $isBusy"
+    :style="styles()"
+    :class="$classes()"
+    :href="$href()"
+    :rel="$rel()"
+    :text="linkStyling || $classes().includes('text')"
+    :small="linkStyling"
+    :icon="$classes().includes('icon')"
+    :outlined="$classes().includes('outlined')"
+    :tile="$classes().includes('tile')"
+    :rounded="$classes().includes('rounded')"
+    :depressed="$classes().includes('depressed')"
+    @click="type == 'submit' ? null : $onClick()"
+  >
+    <span><common-icon :spec="spec.icon || {}"/></span>
+    <div :class="hideTextOnXs && spec.icon ? 'd-none d-sm-flex' : null">
+      {{ spec.text }}
+    </div>
+  </v-btn>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    type: { type: String, default: "button" },
+    disabled: { type: Boolean, required: true },
+    hideTextOnXs: { type: Boolean }
+  },
+  data: function() {
+    return {
+      linkStyling: false
+    };
+  },
+  methods: {
+    $ready() {
+      this.$type.ifArray(this.spec.styleClasses, val => {
+        this.linkStyling = val.includes("link");
+      });
+    },
+    styles() {
+      const styles = this.genericStyles();
+      if (this.linkStyling) {
+        styles["color"] = styles["color"] || "#1976d2";
+      }
+      return styles;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+a,
+button {
+  min-width: 0;
+  margin: 0;
+}
+.v-btn {
+  &.link {
+    text-transform: none !important;
+    /* text-decoration: underline; */
+    padding-left: 0;
+    padding-right: 0;
+    /* `height: inherit/auto/initial` will stretch to max height when used inside a horizontal panel,
+      presumably because it is affected by the panel's flex arrangement. */
+    height: 16px;
+    font-size: 16px;
+    line-height: 1;
+    min-width: auto;
+  }
+}
+.v-btn--rounded {
+  // Override .v-application.rounded
+  border-radius: 28px !important;
+}
+.v-banner__wrapper .v-btn:not(.v-btn--round).v-size--default {
+  min-width: 0;
+  padding: 0;
+}
+.v-banner__wrapper .v-btn.v-size--default {
+  font-size: 12px;
+}
+.breadcrumbs .v-btn.link {
+  display: inline-table;
+  justify-content: left;
+  white-space: normal;
+}
+
+@media only screen and (min-width: 600px) {
+  .v-banner__wrapper.v-btn.v-size--default {
+    font-size: 0.875rem;
+  }
+  .v-banner__wrapper.v-btn:not(.v-btn--round).v-size--default {
+    min-width: 64px;
+    padding: 0 16px;
+  }
+}
+</style>

package/components/_dropdownMenu.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-menu left bottom>
+    <template v-slot:activator="{ on, attrs }">
+      <v-btn
+        :icon="iconStyling"
+        :text="textStyling"
+        v-bind="attrs"
+        style="color: inherit;"
+        v-on="on"
+        @click.stop.prevent=""
+      >
+        <span v-if="spec.icon" :class="[textStyling ? 'padder' : '']"
+          ><common-icon :spec="spec.icon || {}"
+        /></span>
+        {{ spec.text }}
+      </v-btn>
+    </template>
+
+    <v-list>
+      <v-list-item
+        v-for="(childItem, childIndex) in spec.childButtons"
+        :key="childIndex"
+      >
+        <common-button
+          :spec="buttonSpec(childItem)"
+          :disabled="childItem.disabled || $isBusy"
+        />
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      iconStyling: false,
+      textStyling: false
+    };
+  },
+  methods: {
+    $ready() {
+      if (this.spec.text) {
+        this.textStyling = true;
+      } else {
+        this.iconStyling = true;
+      }
+    },
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: ["text"]
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.v-list-item {
+  padding: 0 8px 0 8px;
+
+  > a,
+  > button {
+    width: 100%;
+    min-height: 48px;
+    justify-content: flex-start;
+  }
+}
+.padder {
+  margin-right: 8px;
+}
+</style>

package/components/_icon.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-badge v-if="badge.text" :color="badge.backgroundColor" overlap>
+    <template v-slot:badge>{{ badge.text }}</template>
+    <v-icon :style="genericStyles()" :size="size">{{ value }}</v-icon>
+  </v-badge>
+  <v-icon v-else :style="genericStyles()" :size="size" :color="color">{{
+    value
+  }}</v-icon>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    isBusy: { type: Boolean }
+  },
+  data() {
+    return {
+      badge: {},
+      color: null,
+      name: null,
+      size: null
+    };
+  },
+  computed: {
+    value() {
+      return this.isBusy || this.$isBusy ? "autorenew" : this.name;
+    }
+  },
+  methods: {
+    $ready() {
+      this.badge = this.spec.badge || {};
+      this.color =
+        this.spec.color || this.$builtinColor(this.spec.styleClasses);
+
+      Utils.type.ifObject(this.spec.fa, fa => {
+        this.name = `fab fa-${fa.name}`;
+        this.size = fa.size;
+      });
+
+      Utils.type.ifObject(this.spec.material, material => {
+        this.name = material.name;
+        this.size = material.size;
+      });
+    }
+  }
+};
+</script>
+
+<style scoped></style>

package/components/_message.vue

@@ -0,0 +1,25 @@
+<!-- TODO: Deprecate this in favor of supporting `body` in dialogs, banners, and sheets -->
+<template>
+  <div v-if="isMarkdown" v-html="compiledText"></div>
+  <div v-else class="unformatted">{{this.spec.message}}</div>
+</template>
+
+<script>
+export default {
+  props: ["spec"],
+  computed: {
+    compiledText() {
+      return Utils.format.markdown(this.spec.message);
+    },
+    isMarkdown() {
+      return this.spec.message_format == 'markdown'
+    }
+  }
+};
+</script>
+
+<style scoped>
+.unformatted {
+  white-space: pre-wrap;
+}
+</style>

package/components/avatar.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-avatar :style="genericStyles()" :class="$classes()" :size="spec.size">
+    <v-img :src="spec.url || spec.base64Data" @click="$onClick()"> </v-img>
+  </v-avatar>
+
+  <!-- <v-avatar :width="genericStyles().remove('width')" :height="genericStyles().remove('height')">
+    <v-img :src="spec.url || spec.base64Data" :style="genericStyles()" @click='$onClick()'>
+    </v-img>
+  </v-avatar> -->
+</template>
+
+<script>
+export default {
+  props: ["spec"]
+};
+</script>