View db.js
export default { | |
/** | |
* This will ask for ALL items from chrome storage and return only the ones we're interested in. | |
* @param type | |
*/ | |
getAll (type) { | |
return this.get(null).then(allItems => { | |
return allItems.filter(f => f && f.type && f.type === type) | |
}) |
View content-hooks.js
const | |
iFrame = document.createElement('iframe'), | |
defaultFrameHeight = '0px', | |
defaultFrameWidth = '0px' | |
/** | |
* Set the height of our iFrame housing our BEX | |
* @param height | |
*/ | |
const setIFrameDimensions = (height, width) => { |
View background-hooks.js
export default function attachBackgroundHooks (bridge, allActiveConnections) { | |
bridge.on('storage.get', event => { | |
const payload = event.data | |
if (payload.key === null) { | |
chrome.storage.local.get(null, r => { | |
const result = [] | |
// Group the items up into an array to take advantage of the bridge's chunk splitting. | |
for (const itemKey in r) { | |
result.push(r[itemKey]) |
View manifest.json
{ | |
"name": "quasar-todo-extension", | |
"description": "A Quasar web browser extension for bookmarking and adding todos.", | |
"version": "1.0.0", | |
"manifest_version": 2, | |
"icons": { | |
"16": "icons/icon16x16.png", | |
"48": "icons/icon48x48.png", | |
"128": "icons/icon128x128.png" | |
}, |
View TodoToggle.alt2.vue
<template> | |
... | |
</template> | |
<script> | |
... | |
methods: { | |
updateCache (store, { data: { toggleTodo } }) { | |
const id = `TodoItem:${this.id}` | |
const fragment = queries.toggleTodoFragment |
View TodoToggle.alt.vue
<template> | |
<ApolloMutation | |
:mutation="mutation" | |
:update="updateCache" | |
> | |
<template v-slot="{ mutate, loading, error }"> | |
<q-checkbox | |
v-model="todoToggle" | |
@input="mutate" | |
/> |
View TodoToggle.vue
<template> | |
<div> | |
<q-checkbox | |
v-model="todoToggle" | |
@input="setToggle" | |
/> | |
<p v-if="error">There has been an error<br>{{error}}</p> | |
</div> | |
</template> | |
<script> |
View TodoList.alt.vue
<template> | |
<ApolloQuery | |
:query="gql => gql` | |
query GetTodos { | |
todos @client { | |
id | |
text | |
completed | |
} | |
} |
View ToDoList.vue
<template> | |
<div style="width: 300px"> | |
<q-list bordered separator v-if="todos.length"> | |
<q-item v-for="todo in visibleTodos" :key="todo.id"> | |
<Todo :todo="todo" /> | |
</q-item> | |
</q-list> | |
<p v-else class="text-center"> Add some tasks and let's get some work done! </p> | |
</div> | |
</template> |
View FilterBar.vue
<template> | |
<div class="q-pa-sm text-center"> | |
<q-btn | |
color="primary" | |
v-for="(filter, index) in filters" | |
:flat="!filter.active" | |
:key="index" | |
@click="setFilter(filter.name)" | |
> | |
{{ filter.label }} |
NewerOlder