mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-01 08:39:37 +02:00
make use of CodeMirror in "Advanced settings" page
This commit is contained in:
parent
3fa72d25df
commit
6db88e67b1
@ -2,10 +2,15 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title data-i18n="advancedSettingsPageName"></title>
|
<title data-i18n="advancedSettingsPageName"></title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="css/common.css">
|
<link rel="stylesheet" type="text/css" href="css/common.css">
|
||||||
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
|
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
|
||||||
<link rel="stylesheet" type="text/css" href="css/advanced-settings.css">
|
<link rel="stylesheet" type="text/css" href="css/advanced-settings.css">
|
||||||
|
<link rel="stylesheet" href="css/codemirror.css">
|
||||||
<link rel="shortcut icon" type="image/png" href="img/icon_16.png"/>
|
<link rel="shortcut icon" type="image/png" href="img/icon_16.png"/>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -14,9 +19,13 @@
|
|||||||
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank"></a>
|
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank"></a>
|
||||||
<p>
|
<p>
|
||||||
<button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button> 
|
<button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button> 
|
||||||
<p><textarea id="advancedSettings" dir="auto" spellcheck="false"></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="advancedSettings" class="codeMirrorContainer codeMirrorFillVertical"></div>
|
||||||
|
|
||||||
|
<script src="lib/codemirror/lib/codemirror.js"></script>
|
||||||
|
<script src="lib/codemirror/addon/selection/active-line.js"></script>
|
||||||
|
|
||||||
<script src="js/vapi.js"></script>
|
<script src="js/vapi.js"></script>
|
||||||
<script src="js/vapi-common.js"></script>
|
<script src="js/vapi-common.js"></script>
|
||||||
<script src="js/vapi-client.js"></script>
|
<script src="js/vapi-client.js"></script>
|
||||||
|
@ -1,8 +1,13 @@
|
|||||||
textarea {
|
html {
|
||||||
box-sizing: border-box;
|
height: 100vh;
|
||||||
height: 60vh;
|
overflow: hidden;
|
||||||
text-align: left;
|
}
|
||||||
white-space: pre;
|
body {
|
||||||
width: 100%;
|
overflow: hidden;
|
||||||
word-wrap: normal;
|
}
|
||||||
|
#advancedSettings {
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
height: 75vh;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/*******************************************************************************
|
/*******************************************************************************
|
||||||
|
|
||||||
uBlock Origin - a browser extension to block requests.
|
uBlock Origin - a browser extension to block requests.
|
||||||
Copyright (C) 2016 Raymond Hill
|
Copyright (C) 2016-present Raymond Hill
|
||||||
|
|
||||||
This program is free software: you can redistribute it and/or modify
|
This program is free software: you can redistribute it and/or modify
|
||||||
it under the terms of the GNU General Public License as published by
|
it under the terms of the GNU General Public License as published by
|
||||||
@ -19,23 +19,36 @@
|
|||||||
Home: https://github.com/gorhill/uBlock
|
Home: https://github.com/gorhill/uBlock
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* global uDom */
|
/* global CodeMirror, uDom, uBlockDashboard */
|
||||||
|
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
(function() {
|
(function() { // >>>> Start of private namespace
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
var messaging = vAPI.messaging;
|
let messaging = vAPI.messaging;
|
||||||
var cachedData = '';
|
let noopFunc = function(){};
|
||||||
var rawAdvancedSettings = uDom.nodeFromId('advancedSettings');
|
|
||||||
|
let beforeHash = '';
|
||||||
|
|
||||||
|
let cmEditor = new CodeMirror(
|
||||||
|
document.getElementById('advancedSettings'),
|
||||||
|
{
|
||||||
|
autofocus: true,
|
||||||
|
lineNumbers: true,
|
||||||
|
lineWrapping: true,
|
||||||
|
styleActiveLine: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
uBlockDashboard.patchCodeMirrorEditor(cmEditor);
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
var hashFromAdvancedSettings = function(raw) {
|
let hashFromAdvancedSettings = function(raw) {
|
||||||
return raw.trim().replace(/\s+/g, '|');
|
return raw.trim().replace(/\s+/g, '|');
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -43,59 +56,59 @@ var hashFromAdvancedSettings = function(raw) {
|
|||||||
|
|
||||||
// This is to give a visual hint that the content of user blacklist has changed.
|
// This is to give a visual hint that the content of user blacklist has changed.
|
||||||
|
|
||||||
var advancedSettingsChanged = (function () {
|
let advancedSettingsChanged = (function () {
|
||||||
var timer = null;
|
let timer = null;
|
||||||
|
|
||||||
var handler = function() {
|
let handler = ( ) => {
|
||||||
timer = null;
|
timer = null;
|
||||||
var changed = hashFromAdvancedSettings(rawAdvancedSettings.value) !== cachedData;
|
let changed = hashFromAdvancedSettings(cmEditor.getValue()) !== beforeHash;
|
||||||
uDom.nodeFromId('advancedSettingsApply').disabled = !changed;
|
uDom.nodeFromId('advancedSettingsApply').disabled = !changed;
|
||||||
|
CodeMirror.commands.save = changed ? applyChanges : noopFunc;
|
||||||
};
|
};
|
||||||
|
|
||||||
return function() {
|
return function() {
|
||||||
if ( timer !== null ) {
|
if ( timer !== null ) { clearTimeout(timer); }
|
||||||
clearTimeout(timer);
|
|
||||||
}
|
|
||||||
timer = vAPI.setTimeout(handler, 100);
|
timer = vAPI.setTimeout(handler, 100);
|
||||||
};
|
};
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
cmEditor.on('changes', advancedSettingsChanged);
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
function renderAdvancedSettings() {
|
let renderAdvancedSettings = function(first) {
|
||||||
var onRead = function(raw) {
|
let onRead = function(raw) {
|
||||||
cachedData = hashFromAdvancedSettings(raw);
|
beforeHash = hashFromAdvancedSettings(raw);
|
||||||
var pretty = [],
|
let pretty = [],
|
||||||
whitespaces = ' ',
|
whitespaces = ' ',
|
||||||
lines = raw.split('\n'),
|
lines = raw.split('\n'),
|
||||||
max = 0,
|
max = 0;
|
||||||
pos,
|
for ( let line of lines ) {
|
||||||
i, n = lines.length;
|
let pos = line.indexOf(' ');
|
||||||
for ( i = 0; i < n; i++ ) {
|
if ( pos > max ) { max = pos; }
|
||||||
pos = lines[i].indexOf(' ');
|
|
||||||
if ( pos > max ) {
|
|
||||||
max = pos;
|
|
||||||
}
|
}
|
||||||
|
for ( let line of lines ) {
|
||||||
|
let pos = line.indexOf(' ');
|
||||||
|
pretty.push(whitespaces.slice(0, max - pos) + line);
|
||||||
}
|
}
|
||||||
for ( i = 0; i < n; i++ ) {
|
cmEditor.setValue(pretty.join('\n') + '\n');
|
||||||
pos = lines[i].indexOf(' ');
|
if ( first ) {
|
||||||
pretty.push(whitespaces.slice(0, max - pos) + lines[i]);
|
cmEditor.clearHistory();
|
||||||
}
|
}
|
||||||
rawAdvancedSettings.value = pretty.join('\n') + '\n';
|
|
||||||
advancedSettingsChanged();
|
advancedSettingsChanged();
|
||||||
rawAdvancedSettings.focus();
|
cmEditor.focus();
|
||||||
};
|
};
|
||||||
messaging.send('dashboard', { what: 'readHiddenSettings' }, onRead);
|
messaging.send('dashboard', { what: 'readHiddenSettings' }, onRead);
|
||||||
}
|
};
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
var applyChanges = function() {
|
let applyChanges = function() {
|
||||||
messaging.send(
|
messaging.send(
|
||||||
'dashboard',
|
'dashboard',
|
||||||
{
|
{
|
||||||
what: 'writeHiddenSettings',
|
what: 'writeHiddenSettings',
|
||||||
content: rawAdvancedSettings.value
|
content: cmEditor.getValue()
|
||||||
},
|
},
|
||||||
renderAdvancedSettings
|
renderAdvancedSettings
|
||||||
);
|
);
|
||||||
@ -103,12 +116,17 @@ var applyChanges = function() {
|
|||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
// Handle user interaction
|
uDom.nodeFromId('advancedSettings').addEventListener(
|
||||||
uDom('#advancedSettings').on('input', advancedSettingsChanged);
|
'input',
|
||||||
uDom('#advancedSettingsApply').on('click', applyChanges);
|
advancedSettingsChanged
|
||||||
|
);
|
||||||
|
uDom.nodeFromId('advancedSettingsApply').addEventListener(
|
||||||
|
'click',
|
||||||
|
applyChanges
|
||||||
|
);
|
||||||
|
|
||||||
renderAdvancedSettings();
|
renderAdvancedSettings(true);
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
})();
|
})(); // <<<< End of private namespace
|
||||||
|
Loading…
Reference in New Issue
Block a user