base backend politics
This commit is contained in:
parent
d21d4d772f
commit
4523e25d6d
4 changed files with 389 additions and 102 deletions
|
@ -146,6 +146,7 @@ a:hover {
|
|||
margin: 0;
|
||||
min-height: 380px;
|
||||
width: 100%;
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
109
lib/_popup.js
Normal file
109
lib/_popup.js
Normal file
|
@ -0,0 +1,109 @@
|
|||
// /jquery/1.11.0/jquery.min.js
|
||||
// /jquery/2.1.0/jquery.min.js
|
||||
|
||||
$('#open-popbox').on('click', function() {
|
||||
$('#include-popbox').removeClass('is-hidden');
|
||||
})
|
||||
$('#screen-mask').on('click', function() {
|
||||
$('#include-popbox').addClass('is-hidden');
|
||||
});
|
||||
$('#external-scripts').val("# Uncomment address of script below or type your own (one per line) \n" + "# cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js");
|
||||
|
||||
chrome.tabs.getSelected(null, function(tab) {
|
||||
var cjs = $('#cutomjs'),
|
||||
tsc = $('textarea[name="editor"]', cjs);
|
||||
|
||||
var errorHandler = function() {
|
||||
cjs.css({
|
||||
"min-width": "120px",
|
||||
"min-height": "20px",
|
||||
"width": "350px",
|
||||
"height": "80px"
|
||||
});
|
||||
cjs.removeClass('pure-g').html('<em><strong>It seems that this page cannot be modified with custom js...</strong><br><br> TIP: Try refresh page</em>');
|
||||
};
|
||||
|
||||
var getConfig = function() {
|
||||
return {
|
||||
enable: $('input[name="enable"]').is(':checked'),
|
||||
include: $('select[name="include"]').val()
|
||||
};
|
||||
};
|
||||
|
||||
var defaultContent = "/**\r\n Type Your custom JS code ... \r\n tip: you can include and use jQuery \r\n note: do not use // for comments \r\n**/\r\n\r\n";
|
||||
|
||||
/**
|
||||
* Show current domain
|
||||
*/
|
||||
chrome.tabs.sendRequest(tab.id, {method: "getHost", reload: false}, function(response) {
|
||||
console.log(response);
|
||||
try {
|
||||
$('input[name="domain"]', cjs).val(response.host);
|
||||
}
|
||||
catch(e) {
|
||||
errorHandler();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Fill by local script
|
||||
*/
|
||||
chrome.tabs.sendRequest(tab.id, {method: "getCustomJS", reload: false}, function(response) {
|
||||
var src;
|
||||
if( response.customjs ) {
|
||||
src = response.customjs.src ? decodeURI(response.customjs.src) : defaultContent;
|
||||
|
||||
if( response.customjs.config ) {
|
||||
var config = response.customjs.config;
|
||||
if( config.enable ) {
|
||||
$('input[name="enable"]').attr('checked', 'checked');
|
||||
}
|
||||
if( config.include ) {
|
||||
$('select[name="include"]', cjs).val(response.customjs.config.include);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tsc.val(src || defaultContent);
|
||||
});
|
||||
|
||||
/**
|
||||
* Enable on textarea change
|
||||
*/
|
||||
tsc.on('change keyup paste', function() {
|
||||
$('input[name="enable"]', cjs).attr('checked', 'checked');
|
||||
})
|
||||
|
||||
/**
|
||||
* Save local script
|
||||
*/
|
||||
$('input[name="save"]', cjs).on('click', function() {
|
||||
var src = encodeURI(tsc.val()),
|
||||
customjs = {
|
||||
src: src,
|
||||
config: getConfig()
|
||||
};
|
||||
chrome.tabs.sendRequest(tab.id, {method: "setCustomJS", customjs: customjs, reload: true});
|
||||
window.close();
|
||||
})
|
||||
|
||||
/**
|
||||
* Remove local script
|
||||
*/
|
||||
$('input[name="reset"]', cjs).on('click', function() {
|
||||
tsc.val(decodeURI(defaultContent));
|
||||
chrome.tabs.sendRequest(tab.id, {method: "removeCustomJS", reload: true});
|
||||
window.close();
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Init editor
|
||||
*/
|
||||
var editor = ace.edit("ace-editor");
|
||||
editor.setTheme("ace/theme/tomorrow");
|
||||
editor.getSession().setMode("ace/mode/javascript");
|
||||
editor.setHighlightActiveLine(false);
|
||||
editor.setUseWrapMode(false);
|
||||
|
||||
});
|
374
lib/popup.js
374
lib/popup.js
|
@ -1,109 +1,281 @@
|
|||
// /jquery/1.11.0/jquery.min.js
|
||||
// /jquery/2.1.0/jquery.min.js
|
||||
(function($) {
|
||||
|
||||
$('#open-popbox').on('click', function() {
|
||||
$('#include-popbox').removeClass('is-hidden');
|
||||
})
|
||||
$('#screen-mask').on('click', function() {
|
||||
$('#include-popbox').addClass('is-hidden');
|
||||
});
|
||||
$('#external-scripts').val("# Uncomment address of script below or type your own (one per line) \n" + "# cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js");
|
||||
|
||||
chrome.tabs.getSelected(null, function(tab) {
|
||||
var cjs = $('#cutomjs'),
|
||||
tsc = $('textarea[name="editor"]', cjs);
|
||||
|
||||
var errorHandler = function() {
|
||||
cjs.css({
|
||||
"min-width": "120px",
|
||||
"min-height": "20px",
|
||||
"width": "350px",
|
||||
"height": "80px"
|
||||
});
|
||||
cjs.removeClass('pure-g').html('<em><strong>It seems that this page cannot be modified with custom js...</strong><br><br> TIP: Try refresh page</em>');
|
||||
};
|
||||
|
||||
var getConfig = function() {
|
||||
return {
|
||||
enable: $('input[name="enable"]').is(':checked'),
|
||||
include: $('select[name="include"]').val()
|
||||
};
|
||||
};
|
||||
|
||||
var defaultContent = "/**\r\n Type Your custom JS code ... \r\n tip: you can include and use jQuery \r\n note: do not use // for comments \r\n**/\r\n\r\n";
|
||||
|
||||
/**
|
||||
* Show current domain
|
||||
*/
|
||||
chrome.tabs.sendRequest(tab.id, {method: "getHost", reload: false}, function(response) {
|
||||
console.log(response);
|
||||
try {
|
||||
$('input[name="domain"]', cjs).val(response.host);
|
||||
var popup = {
|
||||
el: {
|
||||
popupForm: $('#popup-form'),
|
||||
hostSelect: $('#host'),
|
||||
hostGoToLink: $('#goto-host'),
|
||||
enableCheck: $('#enable'),
|
||||
shareBtn: $('#share'),
|
||||
includeOpenPopboxLink: $('#open-popbox'),
|
||||
includePopbox: $('#include-popbox'),
|
||||
includeSelect: $('#include'),
|
||||
includeTextarea: $('#extra-scripts'),
|
||||
includeMask: $('#screen-mask'),
|
||||
sourceEditor: $('#ace-editor'),
|
||||
saveBtn: $('#save'),
|
||||
revisionCounterText: $('#revision-counter'),
|
||||
revisionDeleteLink: $('#delete-revision'),
|
||||
revisionPrevBtn: $('#prev-revision'),
|
||||
revisionNextBtn: $('#next-revision')
|
||||
},
|
||||
title: {
|
||||
host: {
|
||||
select: "List of websites modified by Your custom js",
|
||||
goTo: "Jump to the selected host"
|
||||
},
|
||||
share: "Share Your script with other people",
|
||||
save: "Save and apply this revision",
|
||||
revision: {
|
||||
remove: "Delete revision %s permanently",
|
||||
prev: "Switch to previous revision",
|
||||
next: "Switch to next revision",
|
||||
create: "Switch to next revision"
|
||||
},
|
||||
include: {
|
||||
textarea: 'Uncomment address of script below or type your own (one per line)',
|
||||
mask: 'Click to close textarea popup'
|
||||
}
|
||||
catch(e) {
|
||||
errorHandler();
|
||||
},
|
||||
include: {
|
||||
predefined: [
|
||||
{
|
||||
name: 'jQuery 1.11.0',
|
||||
path: '/jquery/1.11.0/jquery.min.js'
|
||||
},
|
||||
{
|
||||
name: 'jQuery 2.1.0',
|
||||
path: '/jquery/2.1.0/jquery.min.js'
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Fill by local script
|
||||
*/
|
||||
chrome.tabs.sendRequest(tab.id, {method: "getCustomJS", reload: false}, function(response) {
|
||||
var src;
|
||||
if( response.customjs ) {
|
||||
src = response.customjs.src ? decodeURI(response.customjs.src) : defaultContent;
|
||||
|
||||
if( response.customjs.config ) {
|
||||
var config = response.customjs.config;
|
||||
if( config.enable ) {
|
||||
$('input[name="enable"]').attr('checked', 'checked');
|
||||
}
|
||||
if( config.include ) {
|
||||
$('select[name="include"]', cjs).val(response.customjs.config.include);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tsc.val(src || defaultContent);
|
||||
});
|
||||
|
||||
/**
|
||||
* Enable on textarea change
|
||||
*/
|
||||
tsc.on('change keyup paste', function() {
|
||||
$('input[name="enable"]', cjs).attr('checked', 'checked');
|
||||
})
|
||||
|
||||
/**
|
||||
* Save local script
|
||||
*/
|
||||
$('input[name="save"]', cjs).on('click', function() {
|
||||
var src = encodeURI(tsc.val()),
|
||||
customjs = {
|
||||
src: src,
|
||||
config: getConfig()
|
||||
};
|
||||
chrome.tabs.sendRequest(tab.id, {method: "setCustomJS", customjs: customjs, reload: true});
|
||||
window.close();
|
||||
})
|
||||
|
||||
/**
|
||||
* Remove local script
|
||||
*/
|
||||
$('input[name="reset"]', cjs).on('click', function() {
|
||||
tsc.val(decodeURI(defaultContent));
|
||||
chrome.tabs.sendRequest(tab.id, {method: "removeCustomJS", reload: true});
|
||||
window.close();
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Init editor
|
||||
*/
|
||||
var editor = ace.edit("ace-editor");
|
||||
],
|
||||
extra: [
|
||||
'//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js'
|
||||
]
|
||||
},
|
||||
editor: {
|
||||
instance: null,
|
||||
defaultValue: "// Here You can type your custom JavaScript...",
|
||||
value: '',
|
||||
init: function() {
|
||||
var editor = this.instance = ace.edit(popup.el.sourceEditor[0]);
|
||||
editor.setTheme("ace/theme/tomorrow");
|
||||
editor.getSession().setMode("ace/mode/javascript");
|
||||
editor.setHighlightActiveLine(false);
|
||||
editor.setUseWrapMode(false);
|
||||
editor.getSession().on('change', this.onChange);
|
||||
}
|
||||
},
|
||||
storage: {
|
||||
key: 'popup-',
|
||||
setHost: function(host) {
|
||||
this.key += host;
|
||||
},
|
||||
get: function(key) {
|
||||
if( this.data === undefined ) {
|
||||
this.data = JSON.parse(localStorage.getItem(this.key) || "{}");
|
||||
}
|
||||
return key ? this.data[key] : this.data;
|
||||
},
|
||||
set: function(arg1, arg2) {
|
||||
// arg1 is a key
|
||||
if( typeof arg1 === 'string' ) {
|
||||
this.data[arg1] = arg2;
|
||||
}
|
||||
// arg1 is data
|
||||
else {
|
||||
this.data = arg1;
|
||||
}
|
||||
|
||||
var str = JSON.stringify(this.data || {});
|
||||
localStorage.setItem(this.key, str);
|
||||
}
|
||||
},
|
||||
apiclb: {
|
||||
onSelectedTab: function(tab) {
|
||||
var handlers = popup.apiclb;
|
||||
chrome.tabs.sendRequest(tab.id, {method: "getHost", reload: false}, handlers.onGetHost);
|
||||
chrome.tabs.sendRequest(tab.id, {method: "getCustomJS", reload: false}, handlers.onGetScript);
|
||||
},
|
||||
onGetHost: function(response) {
|
||||
if( typeof response.host !== 'string' ) {
|
||||
popup.error();
|
||||
return;
|
||||
}
|
||||
|
||||
popup.storage.setHost(response.host);
|
||||
|
||||
var hosts = popup.storage.get('hosts') || [];
|
||||
hosts.push(response.host);
|
||||
hosts.reverse();
|
||||
hosts.forEach(function(host) {
|
||||
var option = '<option>' + host + '</option>';
|
||||
popup.el.hostSelect.append(option);
|
||||
});
|
||||
},
|
||||
onGetScript: function(response) {
|
||||
var _config = response.customjs.config || {},
|
||||
live = {
|
||||
config: {
|
||||
enable: _config.enable || false,
|
||||
include: _config.include || '',
|
||||
extra: (_config.extra || '').replace(';', "\n")
|
||||
},
|
||||
source: decodeURI(response.customjs.src || '')
|
||||
};
|
||||
|
||||
// source is encoded as base64
|
||||
if( live.source.indexOf('data:text/javascript;base64,') === 0 ) {
|
||||
live.source.replace('data:text/javascript;base64,');
|
||||
live.source = atob(source);
|
||||
}
|
||||
|
||||
popup.revisions.load(live);
|
||||
}
|
||||
},
|
||||
revisions: {
|
||||
active: -1,
|
||||
load: function(live) {
|
||||
this.data = popup.storage.get('revisions') || [];
|
||||
|
||||
// Create revision from draft
|
||||
// var draft = popup.storage.get('draft');
|
||||
// if( draft ) {
|
||||
// this.create(draft);
|
||||
// return;
|
||||
// }
|
||||
|
||||
// Backward compatibility width version 1
|
||||
if( this.data.length === 0 ) {
|
||||
this.create(live);
|
||||
}
|
||||
else {
|
||||
// Apply last revision
|
||||
this.active = (this.data.length - 1);
|
||||
this.apply();
|
||||
}
|
||||
},
|
||||
save: function() {
|
||||
popup.storage.set('revisions', this.data);
|
||||
},
|
||||
apply: function() {
|
||||
var revision = this.data[this.active];
|
||||
popup.el.enableCheck.prop('checked', revision.config.enable);
|
||||
|
||||
if( !revision.config.extra ) {
|
||||
revision.config.extra = '# ' + popup.title.include.textarea + "\n";
|
||||
popup.include.extra.forEach(function(url) {
|
||||
revision.config.extra += '# ' + url + "\n";
|
||||
});
|
||||
}
|
||||
|
||||
if( !revision.source ) {
|
||||
revision.source = popup.editor.defaultValue;
|
||||
}
|
||||
|
||||
if( revision.config.include ) {
|
||||
popup.include.predefined.forEach(function(lib) {
|
||||
if( lib.path === revision.config.include ) {
|
||||
popup.el.includeSelect.val(lib.path);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
popup.el.includeTextarea.val(revision.extra);
|
||||
|
||||
var editor = popup.editor.instance;
|
||||
editor.setValue(revision.source);
|
||||
editor.gotoLine(1);
|
||||
},
|
||||
getCurrentState: function() {
|
||||
return {
|
||||
config: {
|
||||
enable: popup.el.enableCheck.prop('checked'),
|
||||
include: popup.el.includeSelect.val(),
|
||||
extra: popup.el.includeTextarea.val()
|
||||
},
|
||||
source: popup.editor.instance.getValue()
|
||||
};
|
||||
},
|
||||
create: function(revision, type) {
|
||||
if( !revision ) {
|
||||
revision = this.getCurrentState();
|
||||
}
|
||||
|
||||
this.data.push(revision);
|
||||
this.active++;
|
||||
this.apply();
|
||||
this.updateCounter(type);
|
||||
},
|
||||
next: function() {
|
||||
|
||||
},
|
||||
prev: function() {
|
||||
|
||||
},
|
||||
updateCounter: function(type) {
|
||||
var text = (this.active + 1) + ' of ' + this.data.length + (type ? '(' + type + ')' : '');
|
||||
popup.el.revisionCounterText.text(text);
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
alert('err');
|
||||
}
|
||||
};
|
||||
|
||||
window.popup = popup;
|
||||
|
||||
/**
|
||||
* Fill predefined libs to include
|
||||
*/
|
||||
|
||||
popup.include.predefined.forEach(function(lib) {
|
||||
var option = '<option value="' + lib.path + '">' + lib.name + '</option>';
|
||||
popup.el.includeSelect.append(option);
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Inicialize Ace Editor
|
||||
*/
|
||||
|
||||
popup.editor.init();
|
||||
|
||||
|
||||
/**
|
||||
* Connect front end (load info about current site)
|
||||
*/
|
||||
|
||||
chrome.tabs.getSelected(null, popup.apiclb.onSelectedTab);
|
||||
|
||||
|
||||
/**
|
||||
* 'Include extra scripts' control
|
||||
*/
|
||||
|
||||
popup.el.includeOpenPopboxLink.on('click', function() {
|
||||
popup.el.includePopbox.removeClass('is-hidden');
|
||||
});
|
||||
|
||||
popup.el.includeMask.on('click', function() {
|
||||
popup.el.includePopbox.addClass('is-hidden');
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Auto save draft
|
||||
*/
|
||||
|
||||
// setInterval(function() {
|
||||
// var draft = popup.revisions.getCurrentState();
|
||||
// if( draft.source !== popup.editor.defaultValue ) {
|
||||
// popup.storage.set('draft', draft);
|
||||
// }
|
||||
// }, 2500);
|
||||
|
||||
|
||||
/**
|
||||
* Revisions control
|
||||
*/
|
||||
|
||||
//popup.el.
|
||||
|
||||
})(jQuery);
|
||||
|
|
19
popup.html
19
popup.html
|
@ -14,7 +14,7 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class="cutomjs" id="cutomjs">
|
||||
<form action="" method="post" accept-charset="utf-8" class="pure-form">
|
||||
<form action="" method="post" accept-charset="utf-8" id="popup-form" class="pure-form">
|
||||
|
||||
<div class="pure-g host">
|
||||
<div class="pure-u-3-5 host__name">
|
||||
|
@ -23,30 +23,35 @@
|
|||
</div>
|
||||
<div class="pure-u-2-5 host__enable">
|
||||
<label for="enable">
|
||||
enable <em class="blue-text">cjs</em> for <span id="enable-label-text">this host</span>
|
||||
enable <em class="blue-text">cjs</em> for this host
|
||||
<input id="enable" name="enable" type="checkbox">
|
||||
</label>
|
||||
</div>
|
||||
</div><!-- .top -->
|
||||
|
||||
<div class="pure-g">
|
||||
|
||||
<div class="pure-u-1-8 share">
|
||||
<button id="share" class="pure-button pure-button-primary icon-share"></button>
|
||||
</div><!-- .share -->
|
||||
|
||||
<div class="pure-u-7-8 include">
|
||||
<div class="include__body">
|
||||
You can inject
|
||||
<a href="#" id="open-popbox">your own external scripts</a> or
|
||||
<label for="include">one of predefined:</label>
|
||||
<select id="include" name="include"></select>
|
||||
<select id="include" name="include">
|
||||
<option value=""> ---- nothing ---- </option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="include__popbox is-hidden" id="include-popbox">
|
||||
<div class="include__popbox__body">
|
||||
<textarea name="external-scripts" id="external-scripts"></textarea>
|
||||
<textarea name="extra-scripts" id="extra-scripts"></textarea>
|
||||
</div>
|
||||
<div class="include__popbox__screenmask" id="screen-mask"></div>
|
||||
<div class="include__popbox__screenmask" id="screen-mask" title="ahaha"></div>
|
||||
</div>
|
||||
</div><!-- .include -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="pure-g source">
|
||||
|
@ -57,8 +62,8 @@
|
|||
|
||||
<div class="pure-g controls">
|
||||
<div class="pure-u-2-5 controls__save-revision">
|
||||
<input type="submit" class="pure-button pure-button-primary" name="save" value="save">
|
||||
<em id="revision-name">revision <span id="revision-counter">1 of 1</span></em>
|
||||
<input type="submit" id="save" class="pure-button pure-button-primary" name="save" value="save">
|
||||
<em>revision <span id="revision-counter">1 of 1</span></em>
|
||||
</div>
|
||||
<div class="pure-u-3-5 controls__revisions">
|
||||
<a class="red-text" id="delete-revision" href="#">delete current revision</a>
|
||||
|
|
Reference in a new issue