1
0
Fork 0

base backend politics

This commit is contained in:
Dan Hromada 2014-05-11 19:19:09 +02:00
parent d21d4d772f
commit 4523e25d6d
4 changed files with 389 additions and 102 deletions

View file

@ -146,6 +146,7 @@ a:hover {
margin: 0;
min-height: 380px;
width: 100%;
line-height: 150%;
}
/**

109
lib/_popup.js Normal file
View 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);
});

View file

@ -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);

View file

@ -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>