completed initial draft of import/export functionality, needs tests
This commit is contained in:
Peter Snyder
parent
1b62fd1ffe
commit
49b9833f86
4 changed files with 238 additions and 21 deletions
|
|
@ -11,28 +11,56 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<section class="container">
|
<section class="container">
|
||||||
<div class="row">
|
<ul class="nav nav-tabs" role="tablist">
|
||||||
<div class="col-xs-12 col-md-12">
|
<li role="presentation" :class="activeTab === 'domain-rules' ? 'active' : ''">
|
||||||
<p>
|
<a href="#domain-rules" @click="setActiveTab">Domain Rules</a>
|
||||||
Enter <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">domain matching rules</a>
|
</li>
|
||||||
on the right, to create a new blocking rule. On the
|
<li role="presentation" :class="activeTab === 'import-export' ? 'active' : ''">
|
||||||
right, select which functionality should be blocked for
|
<a href="#import-export" @click="setActiveTab">Import / Export</a>
|
||||||
hosts matching each rule.
|
</li>
|
||||||
</p>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-4 col-md-4">
|
|
||||||
<domain-rules :domain-names="domainNames" :selected-domain="selectedDomain"></domain-rules>
|
|
||||||
|
|
||||||
<logging-settings :should-log="shouldLog"></logging-settings>
|
<div class="tab-content">
|
||||||
|
<div role="tabpanel" :class="['tab-pane', activeTab === 'domain-rules' ? 'active' : '']" id="domain-rules">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-12 col-md-12">
|
||||||
|
<p>
|
||||||
|
Enter <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns">domain matching rules</a>
|
||||||
|
on the right, to create a new blocking rule. On the
|
||||||
|
right, select which functionality should be blocked for
|
||||||
|
hosts matching each rule.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4 col-md-4">
|
||||||
|
<domain-rules
|
||||||
|
:domain-names="domainNames"
|
||||||
|
:selected-domain="selectedDomain"
|
||||||
|
></domain-rules>
|
||||||
|
|
||||||
|
<logging-settings :should-log="shouldLog"></logging-settings>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-xs-8 col-md-8">
|
||||||
|
<web-api-standards
|
||||||
|
:standards="standards"
|
||||||
|
:selected-standards="selectedStandards"
|
||||||
|
:selected-domain="selectedDomain">
|
||||||
|
</web-api-standards>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-8 col-md-8">
|
<div role="tabpanel" :class="['tab-pane', activeTab === 'import-export' ? 'active' : '']" id="import-export">
|
||||||
<web-api-standards :standards="standards"
|
<div class="row">
|
||||||
:selected-standards="selectedStandards"
|
<div class="col-xs-12 col-md-12">
|
||||||
:selected-domain="selectedDomain">
|
<import-export
|
||||||
</web-api-standards>
|
:domain-names="domainNames"
|
||||||
|
:selected-standards="selectedStandards">
|
||||||
|
</import-export>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -43,6 +71,7 @@
|
||||||
<script src="js/third_party/vue.js"></script>
|
<script src="js/third_party/vue.js"></script>
|
||||||
<script src="js/state.js"></script>
|
<script src="js/state.js"></script>
|
||||||
<script src="js/components/domain-rules.vue.js"></script>
|
<script src="js/components/domain-rules.vue.js"></script>
|
||||||
|
<script src="js/components/import-export.vue.js"></script>
|
||||||
<script src="js/components/web-api-standards.vue.js"></script>
|
<script src="js/components/web-api-standards.vue.js"></script>
|
||||||
<script src="js/components/logging-settings.vue.js"></script>
|
<script src="js/components/logging-settings.vue.js"></script>
|
||||||
<script src="js/config.js"></script>
|
<script src="js/config.js"></script>
|
||||||
|
|
|
||||||
172
add-on/config/js/components/import-export.vue.js
Normal file
172
add-on/config/js/components/import-export.vue.js
Normal file
|
|
@ -0,0 +1,172 @@
|
||||||
|
(function () {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
const Vue = window.Vue;
|
||||||
|
|
||||||
|
const generateExportString = function (domainsToExport, allDomainData) {
|
||||||
|
|
||||||
|
const dataToExport = domainsToExport.map(function (domain) {
|
||||||
|
return {
|
||||||
|
"pattern": domain,
|
||||||
|
"standards": allDomainData[domain]
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return JSON.stringify(dataToExport);
|
||||||
|
};
|
||||||
|
|
||||||
|
Vue.component("import-export", {
|
||||||
|
props: ["domainNames", "selectedStandards"],
|
||||||
|
template: `
|
||||||
|
<h2>Export Settings</h2>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label">Select domain rules to export:</label>
|
||||||
|
<select multiple class="form-control" v-model="domainsToExport">
|
||||||
|
<option v-for="domain in domainNames" :value="domain">
|
||||||
|
{{ domain }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<span class="help-block">
|
||||||
|
Select one or more domain rules to export.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label">
|
||||||
|
The below is a copy of the selected standards to export elsewhere:
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
rows="3"
|
||||||
|
readonly
|
||||||
|
v-model="exportedData"
|
||||||
|
placeholder="Exported data will appear here."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Import Settings</h2>
|
||||||
|
|
||||||
|
<div :class="['form-group', {'has-error': importError }]">
|
||||||
|
<label class="control-label">
|
||||||
|
Paste the exported data you'd like to import in the textarea below:
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
rows="3"
|
||||||
|
v-model="importTextAreaData"
|
||||||
|
placeholder="Paste the data you would like to import below."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div :class="['form-group', {'has-error': importError }]">
|
||||||
|
<div class="checkbox">
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" v-model="shouldOverwrite">
|
||||||
|
Overwrite existing settings?
|
||||||
|
</label>
|
||||||
|
<span class="help-block">
|
||||||
|
If this option is selected, than existing options will be
|
||||||
|
overwritten. If it is unchecked, then the blocked standards
|
||||||
|
for existing domains will not be affected.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<button class="btn btn-primary"
|
||||||
|
v-bind:disabled="!isValidToImport()"
|
||||||
|
@click="onImportClicked">Import Settings</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group>
|
||||||
|
<label class="control-label">Import log:</label>
|
||||||
|
<textarea
|
||||||
|
readonly
|
||||||
|
:class="['form-control', importError ? 'alert-danger' : '']"
|
||||||
|
rows="3"
|
||||||
|
v-model="importLog"
|
||||||
|
placeholder="The results of each import will be presented here."></textarea>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
data: function () {
|
||||||
|
return {
|
||||||
|
exportedData: "",
|
||||||
|
domainsToExport: [],
|
||||||
|
importError: false,
|
||||||
|
importLog: "",
|
||||||
|
importTextAreaData: "",
|
||||||
|
dataToImport: "",
|
||||||
|
shouldOverwrite: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onImportClicked: function (event) {
|
||||||
|
|
||||||
|
if (!this.isValidToImport()) {
|
||||||
|
this.importError = true;
|
||||||
|
this.dataToImport = "";
|
||||||
|
this.importLog = "No data to import.";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const shouldOverwrite = !!this.shouldOverwrite;
|
||||||
|
const stateObject = this.$root.$data;
|
||||||
|
const currentDomainRules = stateObject.domainRules;
|
||||||
|
const newDomainRules = this.dataToImport;
|
||||||
|
this.importLog = "";
|
||||||
|
|
||||||
|
const logMessages = newDomainRules.map(function (newDomainRule) {
|
||||||
|
const {pattern, standards} = newDomainRule;
|
||||||
|
if (currentDomainRules[pattern] !== undefined && shouldOverwrite === false) {
|
||||||
|
return ` ! ${pattern}: Skipped. Set to not override.\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
stateObject.setStandardsForDomain(pattern, standards);
|
||||||
|
return ` * ${pattern}: Blocking ${standards.length} standards.\n`;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.importError = false;
|
||||||
|
this.importLog = logMessages.join("\n");
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
},
|
||||||
|
isValidToImport: function () {
|
||||||
|
return (this.importError === false) && (this.dataToImport !== "");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
selectedStandards: function () {
|
||||||
|
this.exportedData = generateExportString(
|
||||||
|
this.domainsToExport,
|
||||||
|
this.$root.$data.domainRules
|
||||||
|
);
|
||||||
|
},
|
||||||
|
domainsToExport: function (selectedDomains) {
|
||||||
|
this.exportedData = generateExportString(
|
||||||
|
selectedDomains,
|
||||||
|
this.$root.$data.domainRules
|
||||||
|
);
|
||||||
|
},
|
||||||
|
importTextAreaData: function () {
|
||||||
|
|
||||||
|
const value = this.importTextAreaData;
|
||||||
|
|
||||||
|
if (value.trim() === "") {
|
||||||
|
this.dataToImport = "";
|
||||||
|
this.importError = false;
|
||||||
|
this.importLog = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.dataToImport = JSON.parse(value);
|
||||||
|
this.importError = false;
|
||||||
|
this.importLog = "";
|
||||||
|
} catch (ignore) {
|
||||||
|
this.dataToImport = "";
|
||||||
|
this.importError = true;
|
||||||
|
this.importLog = "Invalid import data provided.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}());
|
||||||
|
|
@ -13,10 +13,19 @@
|
||||||
const onSettingsLoaded = function (storedSettings) {
|
const onSettingsLoaded = function (storedSettings) {
|
||||||
|
|
||||||
state.populateFromStorage(storedSettings);
|
state.populateFromStorage(storedSettings);
|
||||||
|
state.activeTab = "domain-rules";
|
||||||
|
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
el: doc.body,
|
el: doc.querySelector("section.container"),
|
||||||
data: state
|
data: state,
|
||||||
|
methods: {
|
||||||
|
setActiveTab: function (event) {
|
||||||
|
const targetElement = event.target;
|
||||||
|
this.activeTab = targetElement.hash.replace("#", "");
|
||||||
|
event.stopPropagation();
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const updateStoredSettings = function () {
|
const updateStoredSettings = function () {
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,13 @@
|
||||||
|
|
||||||
setShouldLog: function (shouldLog) {
|
setShouldLog: function (shouldLog) {
|
||||||
this.shouldLog = shouldLog;
|
this.shouldLog = shouldLog;
|
||||||
|
},
|
||||||
|
|
||||||
|
setStandardsForDomain: function (domain, standards) {
|
||||||
|
this.domainRules[domain] = standards;
|
||||||
|
if (domain === this.selectedDomain) {
|
||||||
|
this.selectedStandards = standards;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue