matomo-mirror/matomo-injector
Archived
1
0
Fork 0
Code Releases Activity

Removed revisions, added draft behavior

Browse source
This commit is contained in:
Dan Hromada 2014-05-12 10:13:52 +02:00
parent 4523e25d6d
commit 9daa4a3f09
3 changed files with 123 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
css/style.css
View file

@ -156,22 +156,14 @@ a:hover {
.controls {
}
.controls__save-revision input {
.controls__save input {
font-size: 18px;
}
.controls__save-revision em {
margin-left: 10px;
.controls__remove-draft {
margin-left: 15px;
}
.controls__revisions {
text-align: right;
line-height: 39px;
}
.controls__revisions a {
margin-right: 10px;
}
/**

232
lib/popup.js
View file

@ -14,10 +14,7 @@
includeMask: $('#screen-mask'),
sourceEditor: $('#ace-editor'),
saveBtn: $('#save'),
revisionCounterText: $('#revision-counter'),
revisionDeleteLink: $('#delete-revision'),
revisionPrevBtn: $('#prev-revision'),
revisionNextBtn: $('#next-revision')
draftRemoveLink: $('#draft-remove')
},
title: {
host: {
@ -25,17 +22,12 @@
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"
},
save: "Save and apply this script",
include: {
textarea: 'Uncomment address of script below or type your own (one per line)',
mask: 'Click to close textarea popup'
}
},
draft: "This is a draft, click to remove it"
},
include: {
predefined: [
@ -62,6 +54,11 @@
editor.getSession().setMode("ace/mode/javascript");
editor.setHighlightActiveLine(false);
editor.getSession().on('change', this.onChange);
},
apply: function(source) {
var editor = this.instance;
editor.setValue(source);
editor.gotoLine(1);
}
},
storage: {
@ -96,7 +93,7 @@
chrome.tabs.sendRequest(tab.id, {method: "getCustomJS", reload: false}, handlers.onGetScript);
},
onGetHost: function(response) {
if( typeof response.host !== 'string' ) {
if( !response || typeof response.host !== 'string' ) {
popup.error();
return;
}
@ -112,109 +109,103 @@
});
},
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);
var data = response.customjs || {},
conf = response.customjs.config || {};
// Backward compatibility (version 1)
if( data.src ) {
data.source = decodeURI(data.src);
}
if( data.source ) {
// source is encoded as base64
if( data.source.indexOf('data:text/javascript;base64,') === 0 ) {
data.source.replace('data:text/javascript;base64,', '');
data.source = atob(data.source);
}
else {
popup.data.source = data.source;
}
}
popup.data.config.enable = conf.enable ? true : false;
if( conf.include ) {
popup.data.config.include = conf.include;
}
if( conf.extra ) {
popup.data.config.extra = conf.extra;
}
popup.revisions.load(live);
// Apply draft if exist
popup.applyData(popup.storage.get('draft'));
}
},
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();
}
data: {
config: {
enable: false,
include: '',
extra: ''
},
save: function() {
popup.storage.set('revisions', this.data);
},
apply: function() {
var revision = this.data[this.active];
popup.el.enableCheck.prop('checked', revision.config.enable);
source: ''
},
applyData: function(draft) {
var data = draft || this.data;
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);
if( draft ) {
this.el.draftRemoveLink.removeClass('is-hidden');
}
// Default value for 'extra include'
if( !data.config.extra ) {
data.config.extra = '# ' + popup.title.include.textarea + "\n";
popup.include.extra.forEach(function(url) {
data.config.extra += '# ' + url + "\n";
});
}
// Default value for source
if( !data.source ) {
data.source = popup.editor.defaultValue;
}
// Source copy is current, isn't necessary to highlight save button
else {
popup.el.saveBtn.removeClass('pure-button-primary');
}
// Set 'predefined include' value
if( data.config.include ) {
popup.include.predefined.forEach(function(lib) {
if( lib.path === data.config.include ) {
popup.el.includeSelect.val(lib.path);
}
});
}
// Set enable checkbox
popup.el.enableCheck.prop('checked', data.config.enable);
// Fill 'extra include' textarea
popup.el.includeTextarea.val(data.extra);
// Apply source into editor
popup.editor.apply(data.source);
},
getCurrentData: function() {
return {
config: {
enable: popup.el.enableCheck.prop('checked'),
include: popup.el.includeSelect.val(),
extra: popup.el.includeTextarea.val()
},
source: popup.editor.instance.getValue()
};
},
removeDraft: function() {
popup.storage.set('draft', null);
popup.applyData();
popup.el.draftRemoveLink.addClass('is-hidden');
},
error: function() {
alert('err');
@ -264,18 +255,25 @@
* Auto save draft
*/
// setInterval(function() {
// var draft = popup.revisions.getCurrentState();
// if( draft.source !== popup.editor.defaultValue ) {
// popup.storage.set('draft', draft);
// }
// }, 2500);
setInterval(function() {
var draft = popup.getCurrentData(),
source = draft.source.replace(popup.editor.defaultValue, '');
console.log(popup.data.source);
if( (source || !popup.data.source) && source !== popup.data.source ) {
popup.storage.set('draft', draft);
popup.el.saveBtn.addClass('pure-button-primary')
}
else {
popup.el.saveBtn.removeClass('pure-button-primary')
}
}, 1000);
/**
* Revisions control
* Remove draft
*/
//popup.el.
popup.el.draftRemoveLink.on('click', popup.removeDraft);
})(jQuery);

15
popup.html
View file

@ -39,9 +39,9 @@
<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>
<label for="include">predefined one:</label>
<select id="include" name="include">
<option value=""> ---- nothing ---- </option>
<option value=""> ---- nothing ---- </option>
</select>
</div>
<div class="include__popbox is-hidden" id="include-popbox">
@ -61,14 +61,9 @@
</div><!-- .source -->
<div class="pure-g controls">
<div class="pure-u-2-5 controls__save-revision">
<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>
<button id="prev-revision" class="pure-button icon-left-open pure-button-disabled"></button>
<button id="next-revision" class="pure-button icon-right-open"></button>
<div class="pure-u-2-5 controls__save">
<input type="submit" id="save" class="pure-button" name="save" value="save">
<a id="draft-remove" class="controls__remove-draft red-text is-hidden" href="#">remove draft</a>
</div>
</div><!-- .controls -->