piwik template
This commit is contained in:
parent
39e1767a53
commit
6b75d26169
5 changed files with 104 additions and 34 deletions
|
@ -1,10 +1,18 @@
|
|||
{
|
||||
"extention_name": {
|
||||
"message": "Piwik Injector",
|
||||
"description": "name of the extention"
|
||||
},
|
||||
"extention_description": {
|
||||
"message": "Run custom JavaScript on any website.",
|
||||
"description": "a short description shown in the extention list"
|
||||
},
|
||||
"host_label": {
|
||||
"message": "hosts",
|
||||
"description": "label of host selection dropdown"
|
||||
},
|
||||
"host_title": {
|
||||
"message": "List of websites modified by Your custom js",
|
||||
"message": "List of websites modified by your custom js",
|
||||
"description": "title-text of host selection dropdown"
|
||||
},
|
||||
"save": {
|
||||
|
@ -58,5 +66,21 @@
|
|||
"enable_description": {
|
||||
"message": "enable injection for this host",
|
||||
"description": "label for checkbox"
|
||||
},
|
||||
"piwik_url_title": {
|
||||
"message": "",
|
||||
"description": "title text of piwik URL input"
|
||||
},
|
||||
"piwik_url_placeholder": {
|
||||
"message": "piwik URL",
|
||||
"description": "placeholder text of piwik URL input"
|
||||
},
|
||||
"site_id_title": {
|
||||
"message": "",
|
||||
"description": "title text of site ID input"
|
||||
},
|
||||
"site_id_placeholder": {
|
||||
"message": "site ID",
|
||||
"description": "placeholder text of site ID input"
|
||||
}
|
||||
}
|
|
@ -18,10 +18,14 @@
|
|||
height: 75px;
|
||||
}
|
||||
|
||||
.customjs.customjs--error form {
|
||||
.customjs.customjs--error div, .customjs.customjs--error form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customjs.customjs--error #error {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
.blue-text,
|
||||
|
|
54
js/popup.js
54
js/popup.js
|
@ -4,7 +4,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
key: 'popup',
|
||||
el: {
|
||||
popup: document.getElementById("customjs"),
|
||||
popupForm: document.getElementById("popup-form"),
|
||||
hostSelect: document.getElementById("host"),
|
||||
hostGoToLink: document.getElementById("goto-host"),
|
||||
enableCheck: document.getElementById("enable"),
|
||||
|
@ -12,25 +11,25 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
saveBtn: document.getElementById("save"),
|
||||
resetBtn: document.getElementById("reset"),
|
||||
draftRemoveLink: document.getElementById("draft-remove"),
|
||||
error: document.getElementById("error")
|
||||
},
|
||||
title: {
|
||||
include: {
|
||||
textarea: 'Uncomment address of script below or type your own (one per line)',
|
||||
mask: 'Click to close textarea popup'
|
||||
}
|
||||
error: document.getElementById("error"),
|
||||
piwikForm: document.getElementById("piwik-form"),
|
||||
piwikURL: document.getElementById("piwik-url"),
|
||||
siteID: document.getElementById("site-id")
|
||||
},
|
||||
applyi18n: function() {
|
||||
var translatableIDs = ["error-message", "error-tip", "save", "reset", "goto-host", "enable-description"];
|
||||
var translatableIDs = ["error-message", "error-tip", "save", "reset", "goto-host", "enable-description", "host-label"];
|
||||
translatableIDs.forEach(function(id) {
|
||||
var translateKey = id.replace("-", "_");
|
||||
document.getElementById(id).innerText = chrome.i18n.getMessage(translateKey);
|
||||
});
|
||||
var translatableTitles = ["host", "goto_host", "save", "reset", "draft_remove"];
|
||||
var translatableTitles = ["host", "goto_host", "save", "reset", "draft_remove", "piwik_url", "site_id"];
|
||||
translatableIDs.forEach(function(id) {
|
||||
var translateKey = id.replace("-", "_") + "_title";
|
||||
document.getElementById(id).setAttribute('title', chrome.i18n.getMessage(translateKey));
|
||||
});
|
||||
popup.el.piwikURL.setAttribute("placeholder", chrome.i18n.getMessage("piwik_url_placeholder"));
|
||||
popup.el.siteID.setAttribute("placeholder", chrome.i18n.getMessage("site_id_placeholder"));
|
||||
document.title = chrome.i18n.getMessage("extention_name")
|
||||
},
|
||||
host: undefined,
|
||||
emptyDataPattern: {
|
||||
|
@ -52,6 +51,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
// editor.setHighlightActiveLine(false);
|
||||
editor.getSession().on('change', this.onChange);
|
||||
editor.$blockScrolling = Infinity;
|
||||
// editor.setReadOnly(true)
|
||||
},
|
||||
apply: function(source) {
|
||||
var editor = this.editorInstance;
|
||||
|
@ -242,6 +242,32 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
popup.applyData(popup.storage.get('draft'));
|
||||
}
|
||||
},
|
||||
|
||||
piwik: {
|
||||
defaultTrackingCode: "var _paq = _paq || [];\n" +
|
||||
"/* tracker methods like \"setCustomDimension\" should be called before \"trackPageView\" */\n" +
|
||||
"_paq.push(['trackPageView']);\n" +
|
||||
"_paq.push(['enableLinkTracking']);\n" +
|
||||
"(function() {\n" +
|
||||
" var u=\"{{PIWIKURL}}\";\n" +
|
||||
" _paq.push(['setTrackerUrl', u+'piwik.php']);\n" +
|
||||
" _paq.push(['setSiteId', '{{SITEID}}']);\n" +
|
||||
" var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];\n" +
|
||||
" g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);\n" +
|
||||
"})();",
|
||||
handleTrackingCode: function() {
|
||||
var piwikURL = encodeURI(popup.el.piwikURL.value);
|
||||
var siteID = parseInt(popup.el.siteID.value, 10);
|
||||
if (!siteID || !piwikURL) {
|
||||
return false;
|
||||
}
|
||||
console.warn(piwikURL, siteID);
|
||||
var js = popup.piwik.defaultTrackingCode;
|
||||
js = js.replace("{{PIWIKURL}}", piwikURL);
|
||||
js = js.replace("{{SITEID}}", String(siteID));
|
||||
popup.editor.apply(js)
|
||||
}
|
||||
},
|
||||
generateScriptDataUrl: function(script) {
|
||||
var b64 = 'data:text/javascript';
|
||||
// base64 may be smaller, but does not handle unicode characters
|
||||
|
@ -394,6 +420,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
}, popup.apiclb.onSelectedTab);
|
||||
|
||||
|
||||
popup.el.piwikForm.querySelectorAll("input").forEach(function(input) {
|
||||
input.addEventListener("change", popup.piwik.handleTrackingCode)
|
||||
});
|
||||
|
||||
/**
|
||||
* Auto save draft
|
||||
*/
|
||||
|
@ -402,6 +432,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
var draft = popup.getCurrentData(),
|
||||
source = draft.source;
|
||||
|
||||
if (!popup.data) {
|
||||
popup.error();
|
||||
return false;
|
||||
}
|
||||
if ((source || !popup.data.source) && source !== popup.data.source) {
|
||||
|
||||
popup.storage.setMode(popup.storage.MODE.private);
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"manifest_version": 2,
|
||||
"name": "Piwik Injector",
|
||||
"name": "__MSG_extention_name__",
|
||||
"short_name": "piwik-injector",
|
||||
"version": "3.0.0",
|
||||
"author": "Lukas Winkler, xcv58, hromadadan",
|
||||
|
|
50
popup.html
50
popup.html
|
@ -1,7 +1,7 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Custom JavaScript</title>
|
||||
<title></title>
|
||||
|
||||
<link href="libs/purecss/base-min.css" rel="stylesheet">
|
||||
<link href="libs/purecss/grids-responsive-min.css" rel="stylesheet">
|
||||
|
@ -9,15 +9,14 @@
|
|||
<link href="libs/purecss/buttons-min.css" rel="stylesheet">
|
||||
|
||||
<link href="css/style.css" rel="stylesheet">
|
||||
|
||||
<script type="text/javascript" src="libs/ace/ace.js" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="customjs" id="customjs">
|
||||
<form action="" method="post" accept-charset="utf-8" id="popup-form" class="pure-form">
|
||||
<form action="" method="post" accept-charset="utf-8" id="popup-form" class="pure-form pure-form-stacked">
|
||||
|
||||
<div class="pure-g host">
|
||||
<div class="pure-u-3-5 host__name">
|
||||
<label for="host" id="host-label">Label</label>
|
||||
<select id="host" name="host"></select>
|
||||
<a class="is-hidden" id="goto-host" href="#"></a>
|
||||
</div>
|
||||
|
@ -28,30 +27,39 @@
|
|||
</label>
|
||||
</div>
|
||||
</div><!-- .top -->
|
||||
|
||||
<div class="pure-g source">
|
||||
<div class="pure-u-1 source__editor">
|
||||
<pre id="ace-editor"></pre>
|
||||
<input type="hidden" name="script" value="">
|
||||
</div>
|
||||
</div><!-- .source -->
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-3-5 controls">
|
||||
<button id="save" class="controls__save pure-button pure-button-primary"
|
||||
name="save"></button>
|
||||
<button id="reset" class="controls__reset pure-button" name="reset"></button>
|
||||
<a id="draft-remove" class="controls__remove-draft red-text is-hidden" href="#"></a>
|
||||
</div>
|
||||
</div><!-- .controls -->
|
||||
|
||||
</form>
|
||||
<form class="pure-form" id="piwik-form">
|
||||
<input id="piwik-url" title="">
|
||||
<input type="number" id="site-id" min="0" title="">
|
||||
</form>
|
||||
<form class="pure-form" id="piwik-form">
|
||||
<label for="expert-mode">gffdgkfdglj</label>
|
||||
<input type="checkbox" id="expert-mode">
|
||||
</form>
|
||||
<div class="pure-g source">
|
||||
<div class="pure-u-1 source__editor">
|
||||
<pre id="ace-editor"></pre>
|
||||
<input type="hidden" name="script" value="">
|
||||
</div>
|
||||
</div><!-- .source -->
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-3-5 controls">
|
||||
<button id="save" class="controls__save pure-button pure-button-primary"
|
||||
name="save"></button>
|
||||
<button id="reset" class="controls__reset pure-button" name="reset"></button>
|
||||
<a id="draft-remove" class="controls__remove-draft red-text is-hidden" href="#"></a>
|
||||
</div>
|
||||
</div><!-- .controls -->
|
||||
|
||||
<!--</form>-->
|
||||
<div id="error" class="error is-hidden">
|
||||
<p class="red-text" id="error-message"></p>
|
||||
<span id="error-tip"></span>
|
||||
</div><!-- .error -->
|
||||
|
||||
</div>
|
||||
<script type="text/javascript" src="libs/ace/ace.js" charset="utf-8"></script>
|
||||
<script src="js/popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Reference in a new issue