glib-web 0.5.77

package/styles/test.sass

@@ -0,0 +1,3 @@
+.sass
+  a
+    color: white

package/styles/test.scss

@@ -0,0 +1,5 @@
+.scss {
+  a {
+    color: white
+  }
+}

package/templates/_menu.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-list-item-action v-if="editMenu">
+    <common-dropdownMenu :spec="editMenu" :disabled="$isBusy" />
+  </v-list-item-action>
+</template>
+
+<script>
+export default {
+  props: {
+    editButtons: { type: Array, required: true }
+  },
+  computed: {
+    // This needs to be computed so that it is always up-to-date, regardless of whether:
+    // 1. The page is navigated away and the parent component gets reused or
+    // 2. There is just a delay in the initialization of the menu variable in ($ready())
+    editMenu() {
+      if (this.editButtons.length > 0) {
+        return {
+          icon: { material: { name: "more_vert" } },
+          childButtons: this.editButtons
+        };
+      } else {
+        return null;
+      }
+    }
+  },
+  methods: {
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: ["text"]
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/templates/comment.vue

@@ -0,0 +1,202 @@
+<template>
+  <div v-longclick="$onLongPress" class="outer-container">
+    <div :class="[spec.editButtons ? 'container-edit' : 'container']">
+      <v-card flat :class="mode" class="py-1">
+        <v-card-title v-if="mode === 'system'" class="caption">{{
+          spec.subtitle
+        }}</v-card-title>
+        <v-avatar
+          v-if="spec.imageUrl && mode !== 'outgoing'"
+          class="avatar"
+          size="30px"
+        >
+          <img :src="spec.imageUrl" alt="avatar" />
+        </v-avatar>
+        <v-card-title
+          v-if="spec.title"
+          class="font-weight-bold body-2 subtitle"
+          >{{ spec.title }}</v-card-title
+        >
+        <div v-if="mode !== 'system'" class="comment-bubble pa-2">
+          {{ spec.subtitle }}
+        </div>
+        <img
+          v-if="spec.image"
+          :src="spec.image"
+          class="comment-image pa-2"
+          :href="taHref(spec)"
+          @click="taClick($event, spec)"
+        />
+        <v-card-title v-if="spec.subsubtitle" class="subsubtitle caption">{{
+          spec.subsubtitle
+        }}</v-card-title>
+
+        <div class="mt-1 chips">
+          <template v-for="(spec, index) in chips">
+            <v-chip :key="index" class="ma-1" :color="spec.color">
+              {{ spec.text }}
+            </v-chip>
+          </template>
+        </div>
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data: function() {
+    return {
+      position: null,
+      mode: null,
+      chips: []
+    };
+  },
+  methods: {
+    $ready() {
+      const template = this.spec.template;
+      this.mode = this.determineMode(template);
+
+      this.chips = (this.spec.chips || []).map(spec => {
+        var color = null;
+        this.$type.ifArray(spec.styleClasses, classes => {
+          for (const val of ["success", "info", "warning", "error"]) {
+            if (classes.includes(val)) {
+              color = val;
+            }
+          }
+        });
+        return Object.assign({}, spec, { color: color });
+      });
+    },
+    determineMode(template) {
+      switch (template) {
+        case "commentIncoming":
+        case "commentImageIncoming":
+        case "commentVideoIncoming":
+          return "incoming";
+        case "commentOutgoing":
+        case "commentImageOutgoing":
+        case "commentVideoOutgoing":
+          return "outgoing";
+        case "systemComment":
+          return "system";
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.outer-container {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 56px;
+}
+.edit-actions {
+  grid-column: 2/3;
+  justify-content: center;
+}
+.container,
+.container-edit {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 30% 20% 20% 30%;
+}
+.container-edit {
+  padding: 0px;
+  grid-column: 1/2;
+}
+.container {
+  grid-column: 1/3;
+}
+.system {
+  max-height: auto;
+  grid-column: 1/5;
+  color: #bdbdbd;
+  justify-self: center;
+}
+.incoming {
+  display: grid;
+  grid-template-columns: 36px auto;
+  grid-template-rows: 1fr auto 0.5fr;
+  grid-column: 1/4;
+
+  > * {
+    justify-self: start;
+    grid-column: 2/3;
+  }
+
+  > .chips {
+    grid-row: 4/4;
+  }
+
+  > .comment-bubble {
+    background-color: #e6e5ea;
+    border-radius: 0px 10px 10px 10px;
+    grid-row: 2/3;
+  }
+
+  > .comment-image {
+    max-width: 100%;
+    height: 300px;
+    border-radius: 10px !important;
+    grid-row: 2/3;
+    padding: 0px !important;
+    cursor: pointer;
+  }
+
+  > .subsubtitle {
+    grid-row: 3/4;
+    padding: 0;
+    color: #9e9e9e;
+    padding-top: 4px;
+    align-self: start;
+  }
+}
+.avatar {
+  grid-row: 1/2;
+  grid-column: 1/2;
+  padding: 0;
+  justify-self: center;
+}
+.subtitle {
+  grid-row: 1/2;
+  grid-column: 2/3;
+  padding: 0;
+}
+.outgoing {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-column: 2/5;
+
+  > * {
+    justify-self: end;
+  }
+
+  > .comment-bubble {
+    background-color: #0084ff;
+    color: #fff;
+    border-radius: 10px 10px 0px 10px !important;
+    grid-row: 1/2;
+  }
+
+  > .comment-image {
+    max-width: 100%;
+    height: 300px;
+    border-radius: 10px !important;
+    grid-row: 1/2;
+    padding: 0px !important;
+    cursor: pointer;
+  }
+
+  > .subsubtitle {
+    grid-row: 2/3;
+    padding: 0;
+    color: #9e9e9e;
+  }
+}
+</style>

package/templates/featured.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-card :href="$href()" @click="$onClick()">
+    <v-img :src="spec.imageUrl" height="200" :style="genericStyles()" />
+
+    <v-list-item v-if="spec.template != 'spacer'">
+      <v-list-item-content>
+        <v-list-item-title>{{ spec.title }}</v-list-item-title>
+        <v-list-item-subtitle v-if="spec.subtitle">{{
+          spec.subtitle
+        }}</v-list-item-subtitle>
+        <v-list-item-subtitle v-if="spec.subsubtitle">{{
+          spec.subsubtitle
+        }}</v-list-item-subtitle>
+      </v-list-item-content>
+
+      <template-menu :edit-buttons="spec.editButtons || []" />
+    </v-list-item>
+  </v-card>
+</template>
+
+<script>
+// import Menu from "./menu";
+
+export default {
+  // components: {
+  //   "template-menu": Menu
+  // },
+  props: {
+    spec: { type: Object, required: true }
+  }
+};
+</script>

package/templates/thumbnail.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-list-item
+    v-longclick="$onLongPress"
+    :href="$href()"
+    style="padding-left: 0"
+    @[clickCondition]="$onClick()"
+  >
+    <v-icon v-if="spec.onReorder" class="handle">drag_indicator</v-icon>
+
+    <div class="left-universal">
+      <template v-for="(item, index) in spec.leftButtons">
+        <common-button
+          :key="index"
+          :spec="buttonSpec(item)"
+          :disabled="$isBusy"
+        />
+      </template>
+    </div>
+
+    <v-list-item-avatar
+      v-if="$type.isString(spec.imageUrl)"
+      :tile="!spec.avatar"
+      class="left-thumbnail"
+    >
+      <img :src="spec.imageUrl" />
+    </v-list-item-avatar>
+    <!-- <v-list-item-avatar v-else-if="$type.isObject(spec.icon)">
+      <common-icon :spec="spec.icon" />
+    </v-list-item-avatar> -->
+    <div v-else class="left-icon">
+      <v-list-item-avatar v-if="$type.isObject(spec.icon)">
+        <common-icon :spec="spec.icon" />
+      </v-list-item-avatar>
+    </div>
+
+    <v-list-item-content>
+      <v-list-item-title>{{ spec.title }}</v-list-item-title>
+      <v-list-item-subtitle v-if="spec.subtitle">{{
+        spec.subtitle
+      }}</v-list-item-subtitle>
+      <v-list-item-subtitle v-if="spec.subsubtitle">{{
+        spec.subsubtitle
+      }}</v-list-item-subtitle>
+
+      <div>
+        <template v-for="(item, index) in chips">
+          <v-chip :key="index" class="ma-1" :color="item.color" small>
+            {{ item.text }}
+          </v-chip>
+        </template>
+      </div>
+
+      <!-- NOTE: Experimental -->
+      <panels-responsive :spec="accessory" />
+    </v-list-item-content>
+
+    <template v-for="(item, index) in spec.rightButtons">
+      <common-button
+        :key="index"
+        :spec="buttonSpec(item)"
+        :disabled="$isBusy"
+      />
+    </template>
+
+    <templates-menu :edit-buttons="editButtons" />
+  </v-list-item>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true }
+  },
+  data() {
+    return {
+      accessory: {},
+      editButtons: []
+      // chips: []
+    };
+  },
+  computed: {
+    clickCondition() {
+      if (this.spec.onClick || this.spec.onLongPress) {
+        // This will show the clickable indication
+        return "click";
+      }
+      return null;
+    },
+    // Implemented as computed so that it gets reflected when reordering
+    chips() {
+      return (this.spec.chips || []).map(item => {
+        var color = null;
+        this.$type.ifArray(item.styleClasses, classes => {
+          for (const val of ["success", "info", "warning", "error"]) {
+            if (classes.includes(val)) {
+              color = val;
+            }
+          }
+        });
+        return Object.assign({}, item, { color: color });
+      });
+    }
+  },
+  methods: {
+    $ready() {
+      this.accessory = { childViews: this.spec.accessoryViews };
+      this.editButtons = this.spec.editButtons || [];
+    },
+    buttonSpec(item) {
+      return Object.assign({}, item, {
+        view: "button-v1",
+        styleClasses: item.text ? ["text"] : ["icon"]
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@media (min-width: 600px) {
+  .left-thumbnail.v-avatar.v-list-item__avatar {
+    margin: 6px 6px 6px 6px;
+    width: 60px;
+    height: 60px;
+  }
+  .left-icon {
+    // margin-left: 16px;
+    margin-left: 4px;
+  }
+  .left-universal {
+    padding-left: 16px;
+  }
+  .handle {
+    margin-left: 10px;
+    cursor: move;
+  }
+}
+</style>

package/templates/unsupported.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>Unsupported template: {{ name }}</div>
+</template>
+
+<script>
+export default {
+  props: {
+    spec: { type: Object, required: true },
+    name: { type: String, required: true }
+  }
+};
+</script>

package/utils/app.js

@@ -0,0 +1,14 @@
+export default class {
+  static componentName(jsonName) {
+    const name = `${jsonName.replace("/", "-").replace(/-v1$/, "")}`;
+    if (!name.includes("-")) {
+      // Avoid conflicting with builtin html elements
+      return "views-" + name;
+    }
+    return name;
+  }
+
+  static vueName(component) {
+    return component.$options._componentTag;
+  }
+}

package/utils/dom.js

@@ -0,0 +1,13 @@
+export default class {
+  static get csrfElement() {
+    return document.querySelector(`meta[name="csrf-token"]`);
+  }
+
+  static getCsrf() {
+    return this.csrfElement.getAttribute("content");
+  }
+
+  static setCsrf(value) {
+    return this.csrfElement.setAttribute("content", value);
+  }
+}

package/utils/form.js

@@ -0,0 +1,34 @@
+export default class {
+  // Execution flows:
+  // 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, but cannot have submit action nested in another action
+  // TOTRY: Button -> Button.onClick() -> form.clickSubmit() -> submit.click() -> Form.onSubmit() -> Utils.http.execute()
+  static submitData(form, component) {
+    // const form = target.closest("form");
+    // const form = this.formElement;
+
+    // Analogous to Rails' form_with's local
+    if (form.dataset.local) {
+      form.submit();
+    } else {
+      const url = form.getAttribute("action");
+      const formData = new FormData(form);
+      const method = form.getAttribute("method");
+      if (method.toUpperCase() === "GET") {
+        const data = {
+          url: Utils.url.appendParams(url, formData)
+        };
+        Utils.http.load(data, null, component);
+      } else {
+        const data = {
+          url: url,
+          formData: formData
+        };
+        Utils.http.execute(data, method, component, response => {
+          GLib.action.handleResponse(response, component);
+        });
+      }
+    }
+  }
+}

package/utils/format.js

@@ -0,0 +1,14 @@
+import marked from "marked";
+
+export default class {
+  static markdown(text) {
+    return marked(text, { sanitize: true });
+  }
+
+  static local_iso8601(date) {
+    // See https://stackoverflow.com/a/29774197
+    const offset = date.getTimezoneOffset();
+    return new Date(date.getTime() - offset * 60 * 1000).toISOString();
+    // return yourDate.toISOString().split("T")[0];
+  }
+}

package/utils/hash.js

@@ -0,0 +1,29 @@
+export default class Hash {
+  constructor(object) {
+    for (const key in object) {
+      this[key] = object[key];
+    }
+  }
+
+  remove(key) {
+    const value = this[key];
+    delete this[key];
+    return value;
+  }
+
+  without(...keys) {
+    for (const key of keys) {
+      this.remove(key);
+    }
+    return this;
+  }
+
+  with(...keys) {
+    for (const key in this) {
+      if (!keys.includes(key)) {
+        this.remove(key);
+      }
+    }
+    return this;
+  }
+}

package/utils/helper.js

@@ -0,0 +1,44 @@
+import History from "./history";
+import Settings from "./settings";
+import Url from "./url";
+import Http from "./http";
+import Type from "./type";
+import App from "./app";
+import Dom from "./dom";
+import Launch from "./launch";
+import Format from "./format";
+import Ws from "./private/ws";
+
+export default class {
+  static get history() {
+    return History;
+  }
+  static get settings() {
+    return Settings;
+  }
+  static get url() {
+    return Url;
+  }
+  static get http() {
+    return Http;
+  }
+  static get type() {
+    return Type;
+  }
+  static get app() {
+    return App;
+  }
+  static get dom() {
+    return Dom;
+  }
+  static get format() {
+    return Format;
+  }
+  static get ws() {
+    return Ws;
+  }
+  // Move this to Glib/public ?
+  static get launch() {
+    return Launch;
+  }
+}

package/utils/history.js

@@ -0,0 +1,70 @@
+import Vue from "vue";
+
+export default class {
+  static saveInitialContent(content) {
+    // History only handles document's scroll position. It doesn't handle our body div's position
+    this.bodyScrollTops = [];
+    // This differs from window.history.length in that this only counts internal navigation
+    this.navigationCount = 0;
+    // Set initial state so we can go back to it
+    window.history.replaceState(this._data(content), "", window.location.href);
+  }
+
+  static get _pageBody() {
+    return document.getElementById("page_body");
+  }
+
+  static _data(content) {
+    return { content: content, navigationCount: this.navigationCount };
+  }
+
+  static pushPage(content, url) {
+    // Save scroll position of the current page when navigating to the next page
+    this.bodyScrollTops[this.navigationCount] = this._pageBody.scrollTop;
+
+    this.navigationCount++;
+
+    // Save data of the next page (page getting pushed)
+    window.history.pushState(this._data(content), "", url);
+  }
+
+  static resetScroll() {
+    this._pageBody.scrollTop = 0;
+  }
+
+  static restoreOnBackOrForward() {
+    const vm = this;
+    window.onpopstate = event => {
+      // Save scroll position of the current page when navigating through back/forward button
+      this.bodyScrollTops[this.navigationCount] = this._pageBody.scrollTop;
+
+      const data = event.state;
+      data.content.__poppedState = true;
+      window.vueApp.page = data.content;
+      vm.navigationCount = data.navigationCount;
+
+      Vue.nextTick(() => {
+        const scrollTop = this.bodyScrollTops[this.navigationCount];
+        this._pageBody.scrollTop = scrollTop;
+      });
+    };
+  }
+
+  static isPoppedState(page) {
+    return page.__poppedState == true;
+  }
+
+  static updatePage(url = window.location.href) {
+    window.history.replaceState(this._data(window.vueApp.page), "", url);
+  }
+
+  static back() {
+    if (this.navigationCount > 0) {
+      window.history.back();
+      return true;
+    } else {
+      console.log("Reached beginning of navigation stack");
+      return false;
+    }
+  }
+}