glib-web 0.6.1 → 0.6.2

package/templates/thumbnail.vue

@@ -1,145 +1,145 @@
-<template>
-  <v-list-item
-    v-longclick="$onLongPress"
-    :href="$href()"
-    style="padding-left: 0;"
-    :style="columnStyles()"
-    @[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 },
-    responsiveCols: { type: Number, default: () => 0 }
-  },
-  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"]
-      });
-    },
-    columnStyles() {
-      if (this.responsiveCols) {
-        return `width: ${100 / this.responsiveCols}%; float: left;`;
-      }
-    }
-  }
-};
-</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>
+<template>
+  <v-list-item
+    v-longclick="$onLongPress"
+    :href="$href()"
+    style="padding-left: 0;"
+    :style="columnStyles()"
+    @[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 },
+    responsiveCols: { type: Number, default: () => 0 }
+  },
+  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"]
+      });
+    },
+    columnStyles() {
+      if (this.responsiveCols) {
+        return `width: ${100 / this.responsiveCols}%; float: left;`;
+      }
+    }
+  }
+};
+</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

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

package/utils/history.js

@@ -1,70 +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;
-    }
-  }
-}
+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;
+    }
+  }
+}