1.3.7: feat: search

CHANGELOG.md

@@ -1,3 +1,7 @@
+### v1.3.7 9/19/2018
+
+ - feat: search function in the detail list page & add an option to allow to enable or disable it
+
 ### v1.3.6 9/17/2018
 
  - fix: cover browser action in firefox

src/_locales/en/messages.json

@@ -104,6 +104,9 @@
  "opt_desc_removeDuplicate": {
  "message": "Remove duplicate item in a list"
  },
+ "opt_desc_enableSearch": {
+ "message": "Enable search in the detail list page"
+ },
  "opt_label_popup": {
  "message": "popup simple list"
  },

src/_locales/zh_CN/messages.json

@@ -104,6 +104,9 @@
  "opt_desc_removeDuplicate": {
  "message": "去除列表中重复的项目"
  },
+ "opt_desc_enableSearch": {
+ "message": "启用详细列表中的搜索功能"
+ },
  "opt_label_popup": {
  "message": "弹出简单列表"
  },

src/common/options.js

@@ -205,9 +205,20 @@ export const optionsList = [
  default: false,
  new: '1.3.6',
  },
+ {
+ cate: cate.APPEARANCE,
+ name: 'enableSearch',
+ desc: __('opt_desc_enableSearch'),
+ type: Boolean,
+ default: true,
+ new: '1.3.7',
+ },
 ]
 
-if (DEBUG) console.debug('current options number:', optionsList.length)
+if (DEBUG) {
+ console.debug('current options number', optionsList.length)
+ window.printOptionsMap = () => console.debug(optionsList.map(i => i.name + ': ' + i.type.name + ',').join('\n'))
+}
 
 const getDefaultOptions = () => _.mapValues(_.keyBy(optionsList, 'name'), i => i.default)
 

src/manifest.json

@@ -1,7 +1,7 @@
 {
  "manifest_version": 2,
  "name": "__MSG_ext_name__",
- "version": "1.3.6",
+ "version": "1.3.7",
  "default_locale": "en",
  "description": "__MSG_ext_desc__",
  "author": "WangJie <doudou19758@gmail.com>",

src/page/DetailList.vue

@@ -1,11 +1,41 @@
 <template>
 <div>
+
+<v-autocomplete
+ v-if="opts.enableSearch"
+ solo
+ :label="'search'"
+ :items="searchItems"
+ clearable
+ item-text="title"
+ item-value="value"
+ :filter="searchItem"
+ v-model="choice"
+>
+ <template
+ slot="item"
+ slot-scope="{ item }"
+ >
+ <v-list-tile-content
+ :class="item.color ? item.color + '--text' : ''"
+ transition="none"
+ >
+ <v-list-tile-title v-text="item.title"></v-list-tile-title>
+ <v-list-tile-sub-title v-text="item.subtitle"></v-list-tile-sub-title>
+ </v-list-tile-content>
+ <v-list-tile-action>
+ <v-icon>{{ 'tabIndex' in item.value ? 'link' : 'list' }}</v-icon>
+ </v-list-tile-action>
+ </template>
+</v-autocomplete>
+
 <v-expansion-panel ref="panel" expand popout :value="expandStatus" @input="expandStatusChanged">
  <v-expansion-panel-content
  hide-actions
  v-for="(list, listIndex) in lists"
  class="tab-list"
  :key="listIndex"
+ ref="list"
  >
  <v-layout slot="header" row spacer>
  <v-flex no-wrap md7 lg4>
@@ -75,6 +105,7 @@
  :target="opts.itemClickAction !== 'none' ? '_blank' : null"
  @click="itemClicked(listIndex, tabIndex)"
  class="list-item"
+ :ref="'list-' + listIndex + '-tab'"
  :key="tabIndex">
  <v-list-tile-action v-if="opts.removeItemBtnPos === 'left'">
  <v-icon class="clear-btn" color="red" @click.stop.prevent="removeTab(listIndex, tabIndex)">clear</v-icon>
@@ -129,30 +160,79 @@ const colorList = [
  'green', 'yellow', 'orange', 'brown',
 ]
 
+const SEPARATOR = '__$$SEPARATOR$$__'
+
 export default {
  data() {
  return {
  colorList,
  lists: [],
  processed: false, // if task to get list completed
+ choice: null,
  }
  },
  computed: {
  ...mapState(['opts']),
  expandStatus() {
  return this.lists.map(i => i.expand)
  },
+ searchItems() {
+ const tabs = this.lists.map((list, listIndex) => {
+ return list.tabs.map((tab, tabIndex) => ({
+ text: [tab.title, tab.url].join(SEPARATOR),
+ title: tab.title,
+ subtitle: tab.url,
+ value: {listIndex, tabIndex},
+ color: list.color || '',
+ }))
+ })
+ const lists = this.lists.map((list, listIndex) => {
+ return {
+ text: [list.title || '', formatTime(list.time), list.color || ''].join(SEPARATOR),
+ title: list.title || __('ui_untitled'),
+ subtitle: formatTime(list.time),
+ value: {listIndex},
+ color: list.color || '',
+ }
+ })
+ return _.flatten(tabs).concat(lists)
+ },
  },
  created() {
  this.init()
+ window.d = this
  },
  components: {
  draggable,
  dynamicTime,
  },
+ watch: {
+ choice(item) {
+ const opt = {
+ duration: 500,
+ offset: -50,
+ easing: 'easeInOutCubic',
+ }
+ if (item.tabIndex) {
+ this.expandList(true, item.listIndex)
+ this.$vuetify.goTo(this.$refs[`list-${item.listIndex}-tab`][item.tabIndex], opt)
+ } else {
+ this.$vuetify.goTo(this.$refs.list[item.listIndex], opt)
+ }
+ }
+ },
  methods: {
  __,
  formatTime,
+ searchItem(item, query, itemText) {
+ const texts = itemText.split(SEPARATOR)
+ .filter(t => t)
+ .map(i => i.toLowerCase())
+ return query.split(' ')
+ .filter(i => i)
+ .map(i => i.toLowerCase())
+ .every(i => texts.some(t => ~t.indexOf(i)))
+ },
  async itemClicked(listIndex, tabIndex) {
  const action = this.opts.itemClickAction
  if (action === 'open-and-remove') {
@@ -244,6 +324,7 @@ export default {
  this.swapListItem(listIndex, listIndex + 1)
  },
  expandList(expand, listIndex) {
+ if (this.lists[listIndex].expand === expand) return
  this.lists[listIndex].expand = expand
  this.storeLists()
  },