Skip to content

Commit

Permalink
reworked vuex
Browse files Browse the repository at this point in the history
  • Loading branch information
@kinghat
kinghat committed Oct 24, 2019
1 parent 2df4ff6 commit 410df3e
Show file tree
Hide file tree
Showing 11 changed files with 244 additions and 300 deletions.
164 changes: 70 additions & 94 deletions src/background/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,120 +1,129 @@
<template>
<div>
<!-- <input v-model="hosts[0].userTitle" /> -->
<!-- <input v-model="getHostByHostName()" /> -->
<!-- {{hosts[0].userTitle}} -->
<!-- {{hosts}} -->
<!-- <input v-model="getHostByHostName" /> -->
<!-- {{ getHostByHostName("www.google.com") }} -->
</div>
</template>
<template></template>

<script>
// <div>{{this.hosts[0].userTitle}}</div>
import browser from "webextension-polyfill";
import { mapState, mapGetters, mapActions } from "vuex";
import { mapMultiRowFields, mapFields } from "vuex-map-fields";
// import { Promise } from "q";
export default {
// name: "App",
name: "App",
data() {
return {
// hostObject: "",
// userTitleer: { ...this.hosts }
};
return {};
},
computed: {
...mapState(["options", "name", "hosts"]),
...mapGetters(["getHostByHostName"]),
logHostString(hoststring) {
// const userTitle = getHostByHostName();
console.log(
"userTitle: ",
this.$store.getters.getHostByHostName(hoststring)
);
}
// ...mapGetters("hosts", { getHostByHostName: "getHostByHostName" })
...mapGetters({
getHostByHostName: "hosts/getHostByHostName"
})
// getHostByHostName: hostname =>
// this.$store.getters["hosts/getHostByHostName"](hostname)
},
methods: {
...mapActions(["setHostDefaultTitle"]),
// ...mapActions("hosts", { setHostDefaultTitle: "setHostDefaultTitle" }),
...mapActions({
setHostProperty: "hosts/setHostProperty"
}),
formatDocumentTitle(hostObject, documentObject) {
let userTitle = hostObject.userTitle;
let documentTitle = documentObject.title;
const formattedTitle = hostObject.append
const formattedTitle = hostObject.isAppended
? (documentTitle += userTitle)
: (documentTitle = userTitle);
return formattedTitle;
},
preventDocumentLoops(hostObject, documentObject) {
// debugger;
if (
hostObject.append &&
hostObject.isAppended &&
documentObject.title ===
`${hostObject.defaultTitle}${hostObject.userTitle}`
)
return;
if (
!hostObject.append &&
!hostObject.isAppended &&
documentObject.title === `${hostObject.userTitle}`
)
return;
if (
hostObject.append &&
hostObject.isAppended &&
documentObject.title.includes(hostObject.userTitle)
)
return;
// return formatDocumentTitle(hostObject, documentObject);
return true;
},
sendHostProperty1(mutation, value, index) {
const payload = { index, mutation, value };
console.log(`LOG: sendHostProperty -> payload`, payload);
this.setHostProperty(payload);
}
},
// beforeCreate: function() {
// },
mounted() {
const tabs = browser.tabs.query({});
console.log(tabs);
function handleUpdated(tabId, changeInfo, tabInfo) {
// console.log(
// `LOG: handleUpdated -> tabId, changeInfo, tabInfo`,
// `tabId: `,
// tabId,
// `changeInfo: `,
// changeInfo,
// `tabInfo: `,
// tabInfo
// );
if (tabInfo.status === "complete" && changeInfo.title !== undefined) {
console.log(
`id: ${tabId},
title: ${changeInfo.title},
url: ${tabInfo.url}`
);
}
}
created: function() {
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
const returnedHostObject = this.$store.getters.getHostByHostName(
message.hostname
);
browser.tabs.onUpdated.addListener(handleUpdated);
if (message.type === "contentScriptInit" && returnedHostObject) {
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
const hostObject = this.getHostByHostName(message.hostname);
// console.log(`LOG: created -> message`, message);
// console.log(
// `LOG: created -> this.getHostByHostName(message.hostname)`,
// this.getHostByHostName(message.hostname)
// );
if (message.type === "contentScriptInit" && hostObject) {
browser.tabs.executeScript(sender.tab.id, {
file: "/content-scripts/content-script-inject.js"
});
} else if (message.type === "contentScriptInjectInit") {
this.setHostDefaultTitle(message);
} else if (message.type === "contentScriptInjectInit" && hostObject) {
console.log(`contentScriptInjectInit message: `, message);
this.setHostProperty({
mutation: "SET_DEFAULT_TITLE",
value: message.hostname
});
if (returnedHostObject.hostState) {
if (hostObject) {
return Promise.resolve({
type: "updateTitle",
title: this.formatDocumentTitle(returnedHostObject, message)
title: this.formatDocumentTitle(hostObject, message)
});
}
} else if (message.type === "contentScriptTitleMutation") {
} else if (message.type === "contentScriptTitleMutation" && hostObject) {
console.log(`contentScriptTitleMutation message: `, message);
this.setHostDefaultTitle(message);
console.log(
`returnedHostObject.defaultTitle: `,
returnedHostObject.defaultTitle
);
if (returnedHostObject.hostState) {
// console.log(
// `LOG: preventDocumentLoops(returnedHostObject, message)`,
// this.preventDocumentLoops(returnedHostObject, message)
// );
this.setHostProperty({
mutation: "SET_DEFAULT_TITLE",
value: message.hostname
});
if (!this.preventDocumentLoops(returnedHostObject, message)) return;
if (hostObject.hostState) {
if (!this.preventDocumentLoops(hostObject, message)) return;
return Promise.resolve({
type: "updateTitle",
title: this.formatDocumentTitle(returnedHostObject, message)
title: this.formatDocumentTitle(hostObject, message)
});
}
} else {
Expand All @@ -125,39 +134,6 @@ export default {
}
return true;
});
},
// beforeMount: function() {},
mounted: function() {
console.log("<mounted>");
// console.log(document.location.hostname);
// console.log(getHostByHostName("www.google.com"));
// logHostString("www.google.com");
// stateHosts();
// console.log(getHostByHostName(document.location.hostname));
// getHostByHostName(document.location.hostname);
// this.$store.watch(
// (state, getters) => getters.hosts[0].userTitle,
// (newValue, oldValue) => {
// console.log(`Updating from ${oldValue} to ${newValue}`);
// // Do whatever makes sense now
// // if (newValue === 'success') {
// // this.complex = {
// // deep: 'some deep object',
// // };
// // }
// }
// );
console.log("</mounted>");
},
updated: function() {
console.log("<updated>");
console.log("</updated>");
}
};
Expand Down
9 changes: 7 additions & 2 deletions src/content-scripts/content-script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,13 @@ console.log("HOLA FROM CONTENT-SCRIPT!");

// const testVariable = "is this printing?";
// console.log("testVariable from content-script: ", testVariable);

browser.runtime.sendMessage({ type: "contentScriptInit", hostname: document.location.hostname });
// debugger;
window.addEventListener("DOMContentLoaded", sendInitMessage());
window.removeEventListener("DOMContentLoaded", sendInitMessage);
function sendInitMessage() {
browser.runtime.sendMessage({ type: "contentScriptInit", hostname: document.location.hostname, SENTFROM: document.location });
}
// browser.runtime.sendMessage({ type: "contentScriptInit", hostname: document.location.hostname, SENTFROM: document.location });

// function clickPause() {
// document.querySelector(`[title="Pause"]`).click()
Expand Down
91 changes: 31 additions & 60 deletions src/popup/components/TheList.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
<template>
<div>
<!-- <div class="text-xs-center d-flex pb-3">
<v-btn @click="expandAll">expand all</v-btn>
<v-btn @click="expandNone">none</v-btn>
</div>-->
<v-expansion-panels v-model="panel" focusable multiple>
<v-expansion-panel v-for="(host, index) in hosts" :key="index">
<v-expansion-panel-header v-slot="{ open }">
Expand Down Expand Up @@ -41,7 +37,7 @@
>-->
<v-text-field
:value="host.userTitle"
@input="value => userTitleProxy(index, value)"
@input="value => setHostProperty({index: index, mutation: 'SET_USER_TITLE', value})"
placeholder="NO TITLE SET!"
single-line
outlined
Expand All @@ -52,7 +48,11 @@
</v-flex>
<v-flex xs8>
<ValidationProvider name="append">
<v-radio-group v-model="host.append" row>
<v-radio-group
:value="host.isAppended"
@change="value => setHostProperty({index: index, mutation: 'SET_IS_APPENDED', value})"
row
>
<v-radio :value="true" label="append"></v-radio>
<v-radio :value="false" label="overwrite"></v-radio>
</v-radio-group>
Expand All @@ -61,6 +61,7 @@
<v-flex xs4>
<v-switch
v-model="host.hostState"
@change="setHostProperty({index: index, mutation: 'SET_HOST_STATE', value: $event})"
:label="`${host.hostState && 'enabled' || 'disabled' }`"
color="green accent-4"
></v-switch>
Expand All @@ -74,10 +75,8 @@
</template>

<script>
import { mapState, mapMutations } from "vuex";
// import { mapMultiRowFields, mapFields } from "vuex-map-fields";
import { mapState, mapMutations, mapActions } from "vuex";
import { ValidationProvider, ValidationObserver, validate } from "vee-validate";
import { get, sync } from "vuex-pathify";
export default {
data() {
Expand All @@ -91,59 +90,31 @@ export default {
ValidationProvider,
ValidationObserver
},
methods: {
...mapMutations(["UPDATE_NAME", "UPDATE_HOST"]),
expandAll() {
this.panel = this.hosts.map((k, i) => i);
},
expandNone() {
this.panel = [];
},
updateName(e) {
this.UPDATE_NAME(e.target.value);
console.log("comit updated name value");
},
updateUserTitle(index, value) {
this.$store.commit("UPDATE_USER_TITLE", { index, value });
},
userTitleProxy(index, value) {
if (!this.$refs.userTitleInput[index]) return;
this.$refs.userTitleInput[index].validate(value).then(result => {
if (result.valid) {
console.log(`LOG: userTitleProxy -> result`, result);
this.updateUserTitle(index, value);
}
});
}
},
computed: {
...mapState(["options", "hosts"]),
// ...mapMultiRowFields(["hosts"]),
// hosts: sync("hosts"),
// dynamicProp :sync('dynamic/:name@items[:index].value'),
dynamicUserTitle: sync("hosts[:key].userTitle")
// hosts: {
// get() {
// // return this.$store.getters.hosts;
// console.log("GETTER LOG: ", this.$store.state.hosts);
// return this.$store.state.hosts;
// },
// set(value) {
// // console.log(value);
// this.$store.commit("UPDATE_HOST", value);
// }
...mapState({
globals: state => state.globals.options,
hosts: state => state.hosts.hosts
})
},
methods: {
...mapActions({
setHostProperty: "hosts/setHostProperty"
})
// sendHostProperty(index, mutation, value) {
// const payload = { index, mutation, value };
// this.setHostProperty(...payload);
// },
// userTitleProxy: {
// get() {
// return this.userTitleToValidate;
// },
// set(value) {
// (this.userTitleToValidate = value),
// this.$refs.userTitleInput,
// validate(value).then(result => {
// if (result) this.host.userTitle = value;
// });
// }
// showEvent(event) {
// console.log(`LOG: showEvent -> event`, event);
// }
// userTitleValidationProxy(index, objectProperty, value) {
// if (!this.$refs.userTitleInput[index]) return;
// this.$refs.userTitleInput[index].validate(value).then(result => {
// if (result.valid) {
// console.log(`LOG: userTitleValidationProxy -> result`, result);
// this.setHostProperty(index, objectProperty, value);
// }
// });
// }
}
};
Expand Down
9 changes: 0 additions & 9 deletions src/store/actions.js
View file

This file was deleted.

Loading

0 comments on commit 410df3e

Please sign in to comment.