-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
520 additions
and
336 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| <template> | ||
| <div id="sync-button" :class="{ 'is-active' : isOnSyncURL }"> | ||
| <div @click="syncSite()"> | ||
| <img src="@/assets/icons/sync.svg" alt> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| // Synchronization server | ||
| import * as electron from "electron"; | ||
| import * as sync from "../../mixins/sync.js"; | ||
| const currentWindow = electron.remote.getCurrentWindow(); | ||
| export default { | ||
| name: "SyncButton", | ||
| data() { | ||
| return { | ||
| syncServer: "" | ||
| }; | ||
| }, | ||
| computed: { | ||
| url() { | ||
| // Bind to our Vuex Store's URL value | ||
| return this.$store.state.site.url; | ||
| }, | ||
| isOnSyncURL() { | ||
| // Provides simple logic for when to | ||
| // show/hide the "Sync" button | ||
| if (this.url === this.syncServer) { | ||
| return true; | ||
| } else { | ||
| return false; | ||
| } | ||
| } | ||
| }, | ||
| watch: { | ||
| url: function() { | ||
| // When the URL changes... | ||
| // update notBrowserSyncURL | ||
| // this.syncSite() | ||
| } | ||
| }, | ||
| mounted() { | ||
| const vm = this; | ||
| vm.$nextTick().then(async function() { | ||
| // Start our synchronization server | ||
| const setup = await sync.startServer(); | ||
| console.log("setup", setup); | ||
| // Fill in syncServer URL | ||
| vm.syncServer = setup.proxy; | ||
| console.log("sync server", vm.syncServer); | ||
| }); | ||
| }, | ||
| methods: { | ||
| async syncSite() { | ||
| // Avoid cyclical server | ||
| function compareHosts(url1, url2) { | ||
| function returnHost(url) { | ||
| var pathArray = url.split("/"); | ||
| var protocol = pathArray[0]; | ||
| var host = pathArray[2]; | ||
| return host; | ||
| } | ||
| const host1 = returnHost(url1); | ||
| const host2 = returnHost(url2); | ||
| console.log(host1, host2); | ||
| if (host1 === host2) { | ||
| return true; | ||
| } else { | ||
| return false; | ||
| } | ||
| } | ||
| // Changes the BrowserSync proxy URL | ||
| if (compareHosts(this.url, this.syncServer) === false) { | ||
| // Trigger the NodeJS change | ||
| // Send request to change the URL being proxied | ||
| await sync.changeURL(this.url); | ||
| // Update the global URL | ||
| this.$store.commit("changeSiteData", { | ||
| url: this.syncServer | ||
| }); | ||
| console.log(this.syncServer); | ||
| console.log(this.$store.state.site.url); | ||
| return true; | ||
| } else { | ||
| console.log("Contains sync server", this.url, this.syncServer); | ||
| return false; | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import "../../scss/_variables"; | ||
| #sync-button { | ||
| display: flex; | ||
| align-items: center; | ||
| background: darkgray; | ||
| padding: 0.3rem 0.5rem; | ||
| &.is-active { | ||
| background: #d1cff5; | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.