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 {
} }
.controls__save-revision input { .controls__save input {
font-size: 18px; font-size: 18px;
} }
.controls__save-revision em { .controls__remove-draft {
margin-left: 10px; 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'), includeMask: $('#screen-mask'),
sourceEditor: $('#ace-editor'), sourceEditor: $('#ace-editor'),
saveBtn: $('#save'), saveBtn: $('#save'),
revisionCounterText: $('#revision-counter'), draftRemoveLink: $('#draft-remove')
revisionDeleteLink: $('#delete-revision'),
revisionPrevBtn: $('#prev-revision'),
revisionNextBtn: $('#next-revision')
}, },
title: { title: {
host: { host: {
@ -25,17 +22,12 @@
goTo: "Jump to the selected host" goTo: "Jump to the selected host"
}, },
share: "Share Your script with other people", share: "Share Your script with other people",
save: "Save and apply this revision", save: "Save and apply this script",
revision: {
remove: "Delete revision %s permanently",
prev: "Switch to previous revision",
next: "Switch to next revision",
create: "Switch to next revision"
},
include: { include: {
textarea: 'Uncomment address of script below or type your own (one per line)', textarea: 'Uncomment address of script below or type your own (one per line)',
mask: 'Click to close textarea popup' mask: 'Click to close textarea popup'
} },
draft: "This is a draft, click to remove it"
}, },
include: { include: {
predefined: [ predefined: [
@ -62,6 +54,11 @@
editor.getSession().setMode("ace/mode/javascript"); editor.getSession().setMode("ace/mode/javascript");
editor.setHighlightActiveLine(false); editor.setHighlightActiveLine(false);
editor.getSession().on('change', this.onChange); editor.getSession().on('change', this.onChange);
},
apply: function(source) {
var editor = this.instance;
editor.setValue(source);
editor.gotoLine(1);
} }
}, },
storage: { storage: {
@ -96,7 +93,7 @@
chrome.tabs.sendRequest(tab.id, {method: "getCustomJS", reload: false}, handlers.onGetScript); chrome.tabs.sendRequest(tab.id, {method: "getCustomJS", reload: false}, handlers.onGetScript);
}, },
onGetHost: function(response) { onGetHost: function(response) {
if( typeof response.host !== 'string' ) { if( !response || typeof response.host !== 'string' ) {
popup.error(); popup.error();
return; return;
} }
@ -112,109 +109,103 @@
}); });
}, },
onGetScript: function(response) { onGetScript: function(response) {
var _config = response.customjs.config || {}, var data = response.customjs || {},
live = { conf = response.customjs.config || {};
config: {
enable: _config.enable || false, // Backward compatibility (version 1)
include: _config.include || '', if( data.src ) {
extra: (_config.extra || '').replace(';', "\n") data.source = decodeURI(data.src);
}, }
source: decodeURI(response.customjs.src || '')
}; if( data.source ) {
// source is encoded as base64
// source is encoded as base64 if( data.source.indexOf('data:text/javascript;base64,') === 0 ) {
if( live.source.indexOf('data:text/javascript;base64,') === 0 ) { data.source.replace('data:text/javascript;base64,', '');
live.source.replace('data:text/javascript;base64,'); data.source = atob(data.source);
live.source = atob(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: { data: {
active: -1, config: {
load: function(live) { enable: false,
this.data = popup.storage.get('revisions') || []; include: '',
extra: ''
// 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() { source: ''
popup.storage.set('revisions', this.data); },
}, applyData: function(draft) {
apply: function() { var data = draft || this.data;
var revision = this.data[this.active];
popup.el.enableCheck.prop('checked', revision.config.enable);
if( !revision.config.extra ) { if( draft ) {
revision.config.extra = '# ' + popup.title.include.textarea + "\n"; this.el.draftRemoveLink.removeClass('is-hidden');
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);
} }
// 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() { error: function() {
alert('err'); alert('err');
@ -264,18 +255,25 @@
* Auto save draft * Auto save draft
*/ */
// setInterval(function() { setInterval(function() {
// var draft = popup.revisions.getCurrentState(); var draft = popup.getCurrentData(),
// if( draft.source !== popup.editor.defaultValue ) { source = draft.source.replace(popup.editor.defaultValue, '');
// popup.storage.set('draft', draft); console.log(popup.data.source);
// } if( (source || !popup.data.source) && source !== popup.data.source ) {
// }, 2500); 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); })(jQuery);

15
popup.html
View file

@ -39,9 +39,9 @@
<div class="include__body"> <div class="include__body">
You can inject You can inject
<a href="#" id="open-popbox">your own external scripts</a> or <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"> <select id="include" name="include">
<option value=""> ---- nothing ---- </option> <option value=""> ---- nothing ---- </option>
</select> </select>
</div> </div>
<div class="include__popbox is-hidden" id="include-popbox"> <div class="include__popbox is-hidden" id="include-popbox">
@ -61,14 +61,9 @@
</div><!-- .source --> </div><!-- .source -->
<div class="pure-g controls"> <div class="pure-g controls">
<div class="pure-u-2-5 controls__save-revision"> <div class="pure-u-2-5 controls__save">
<input type="submit" id="save" class="pure-button pure-button-primary" name="save" value="save"> <input type="submit" id="save" class="pure-button" name="save" value="save">
<em>revision <span id="revision-counter">1 of 1</span></em> <a id="draft-remove" class="controls__remove-draft red-text is-hidden" href="#">remove draft</a>
</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> </div>
</div><!-- .controls --> </div><!-- .controls -->