gorhill
9 years ago
13 changed files with 746 additions and 46 deletions
-
177platform/chromium/vapi-background.js
-
119platform/firefox/vapi-background.js
-
30src/_locales/en/messages.json
-
92src/css/cloud-ui.css
-
1src/css/user-rules.css
-
BINsrc/img/cloud.png
-
1src/js/background.js
-
201src/js/cloud-ui.js
-
58src/js/i18n.js
-
62src/js/messaging.js
-
30src/js/user-rules.js
-
3src/settings.html
-
4src/user-rules.html
@ -0,0 +1,92 @@ |
|||||
|
#cloudWidget { |
||||
|
background: url("../img/cloud.png") hsl(216, 100%, 93%); |
||||
|
border-radius: 3px; |
||||
|
margin: 0.5em 0; |
||||
|
padding: 1em; |
||||
|
position: relative; |
||||
|
} |
||||
|
#cloudWidget.hide { |
||||
|
display: none; |
||||
|
} |
||||
|
#cloudWidget > button { |
||||
|
font-size: 160%; |
||||
|
padding: 0.1em 0.2em; |
||||
|
} |
||||
|
#cloudPull[disabled] { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
#cloudPush:after , |
||||
|
#cloudPull:before { |
||||
|
font-family: FontAwesome; |
||||
|
font-style: normal; |
||||
|
font-weight: normal; |
||||
|
line-height: 1; |
||||
|
vertical-align: baseline; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
body[dir="ltr"] #cloudPush:after { |
||||
|
content: '\f0ee'; |
||||
|
} |
||||
|
body[dir="rtl"] #cloudPush:after { |
||||
|
content: '\f0ee'; |
||||
|
} |
||||
|
body[dir="ltr"] #cloudPull:before { |
||||
|
content: '\f0ed'; |
||||
|
} |
||||
|
body[dir="rtl"] #cloudPull:before { |
||||
|
content: '\f0ed'; |
||||
|
} |
||||
|
#cloudWidget > span { |
||||
|
color: gray; |
||||
|
display: inline-block; |
||||
|
font-size: 90%; |
||||
|
margin: 0 1em; |
||||
|
padding: 0; |
||||
|
vertical-align: bottom; |
||||
|
white-space: pre; |
||||
|
} |
||||
|
#cloudWidget > .nodata { |
||||
|
} |
||||
|
#cloudWidget > #cloudCog { |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
font-size: 110%; |
||||
|
margin: 0; |
||||
|
opacity: 0.5; |
||||
|
padding: 4px; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
} |
||||
|
body[dir="ltr"] #cloudWidget > #cloudCog { |
||||
|
right: 0; |
||||
|
} |
||||
|
body[dir="rtl"] #cloudWidget > #cloudCog { |
||||
|
left: 0; |
||||
|
} |
||||
|
#cloudWidget > #cloudCog:hover { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
#cloudWidget > #cloudOptions { |
||||
|
align-items: center; |
||||
|
-webkit-align-items: center; |
||||
|
background-color: rgba(0, 0, 0, 0.75); |
||||
|
bottom: 0; |
||||
|
display: none; |
||||
|
justify-content: center; |
||||
|
-webkit-justify-content: center; |
||||
|
left: 0; |
||||
|
position: fixed; |
||||
|
right: 0; |
||||
|
top: 0; |
||||
|
z-index: 2000; |
||||
|
} |
||||
|
#cloudWidget > #cloudOptions.show { |
||||
|
display: flex; |
||||
|
display: -webkit-flex; |
||||
|
} |
||||
|
#cloudWidget > #cloudOptions > div { |
||||
|
background-color: white; |
||||
|
border-radius: 3px; |
||||
|
padding: 1em; |
||||
|
text-align: center; |
||||
|
} |
After Width: 256 | Height: 64 | Size: 4.9 KiB |
@ -0,0 +1,201 @@ |
|||||
|
/******************************************************************************* |
||||
|
|
||||
|
uBlock Origin - a browser extension to block requests. |
||||
|
Copyright (C) 2015 Raymond Hill |
||||
|
|
||||
|
This program is free software: you can redistribute it and/or modify |
||||
|
it under the terms of the GNU General Public License as published by |
||||
|
the Free Software Foundation, either version 3 of the License, or |
||||
|
(at your option) any later version. |
||||
|
|
||||
|
This program is distributed in the hope that it will be useful, |
||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
|
GNU General Public License for more details. |
||||
|
|
||||
|
You should have received a copy of the GNU General Public License |
||||
|
along with this program. If not, see {http://www.gnu.org/licenses/}.
|
||||
|
|
||||
|
Home: https://github.com/gorhill/uBlock
|
||||
|
*/ |
||||
|
|
||||
|
/* global uDom */ |
||||
|
'use strict'; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
(function() { |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
self.cloud = { |
||||
|
options: {}, |
||||
|
datakey: '', |
||||
|
data: undefined, |
||||
|
onPush: null, |
||||
|
onPull: null |
||||
|
}; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var widget = uDom.nodeFromId('cloudWidget'); |
||||
|
if ( widget === null ) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
self.cloud.datakey = widget.getAttribute('data-cloud-entry') || ''; |
||||
|
if ( self.cloud.datakey === '' ) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var messager = vAPI.messaging.channel('cloud-ui.js'); |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var onCloudDataReceived = function(entry) { |
||||
|
if ( typeof entry !== 'object' || entry === null ) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
self.cloud.data = entry.data; |
||||
|
|
||||
|
uDom.nodeFromId('cloudPull').removeAttribute('disabled'); |
||||
|
|
||||
|
var timeOptions = { |
||||
|
weekday: 'short', |
||||
|
year: 'numeric', |
||||
|
month: 'short', |
||||
|
day: 'numeric', |
||||
|
hour: 'numeric', |
||||
|
minute: 'numeric', |
||||
|
second: 'numeric', |
||||
|
timeZoneName: 'short' |
||||
|
}; |
||||
|
|
||||
|
var time = new Date(entry.tstamp); |
||||
|
widget.querySelector('span').textContent = |
||||
|
entry.source + '\n' + |
||||
|
time.toLocaleString('fullwide', timeOptions); |
||||
|
}; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var fetchCloudData = function() { |
||||
|
messager.send( |
||||
|
{ |
||||
|
what: 'cloudPull', |
||||
|
datakey: self.cloud.datakey |
||||
|
}, |
||||
|
onCloudDataReceived |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var pushData = function() { |
||||
|
if ( typeof self.cloud.onPush !== 'function' ) { |
||||
|
return; |
||||
|
} |
||||
|
messager.send( |
||||
|
{ |
||||
|
what: 'cloudPush', |
||||
|
datakey: self.cloud.datakey, |
||||
|
data: self.cloud.onPush() |
||||
|
}, |
||||
|
fetchCloudData |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var pullData = function(ev) { |
||||
|
if ( typeof self.cloud.onPull === 'function' ) { |
||||
|
self.cloud.onPull(self.cloud.data, ev.shiftKey); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var openOptions = function() { |
||||
|
var input = uDom.nodeFromId('cloudDeviceName'); |
||||
|
input.value = self.cloud.options.deviceName; |
||||
|
input.setAttribute('placeholder', self.cloud.options.defaultDeviceName); |
||||
|
uDom.nodeFromId('cloudOptions').classList.add('show'); |
||||
|
}; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var closeOptions = function(ev) { |
||||
|
var root = uDom.nodeFromId('cloudOptions'); |
||||
|
if ( ev.target !== root ) { |
||||
|
return; |
||||
|
} |
||||
|
root.classList.remove('show'); |
||||
|
}; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var submitOptions = function() { |
||||
|
var onOptions = function(options) { |
||||
|
if ( typeof options !== 'object' || options === null ) { |
||||
|
return; |
||||
|
} |
||||
|
self.cloud.options = options; |
||||
|
}; |
||||
|
|
||||
|
messager.send({ |
||||
|
what: 'cloudSetOptions', |
||||
|
options: { |
||||
|
deviceName: uDom.nodeFromId('cloudDeviceName').value |
||||
|
} |
||||
|
}, onOptions); |
||||
|
uDom.nodeFromId('cloudOptions').classList.remove('show'); |
||||
|
}; |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
var onInitialize = function(options) { |
||||
|
if ( typeof options !== 'object' || options === null ) { |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
if ( !options.enabled ) { |
||||
|
return; |
||||
|
} |
||||
|
self.cloud.options = options; |
||||
|
|
||||
|
fetchCloudData(); |
||||
|
|
||||
|
var html = [ |
||||
|
'<button id="cloudPush" type="button" title="cloudPush"></button>', |
||||
|
'<span data-i18n="cloudNoData"></span>', |
||||
|
'<button id="cloudPull" type="button" title="cloudPull" disabled></button>', |
||||
|
'<span id="cloudCog" class="fa"></span>', |
||||
|
'<div id="cloudOptions">', |
||||
|
' <div>', |
||||
|
' <p><label data-i18n="cloudDeviceNamePrompt"></label> <input id="cloudDeviceName" type="text" value="">', |
||||
|
' <p><button id="cloudOptionsSubmit" type="button" data-i18n="genericSubmit"></button>', |
||||
|
' </div>', |
||||
|
'</div>', |
||||
|
].join(''); |
||||
|
|
||||
|
vAPI.insertHTML(widget, html); |
||||
|
vAPI.i18n.render(widget); |
||||
|
widget.classList.remove('hide'); |
||||
|
|
||||
|
uDom('#cloudPush').on('click', pushData); |
||||
|
uDom('#cloudPull').on('click', pullData); |
||||
|
uDom('#cloudCog').on('click', openOptions); |
||||
|
uDom('#cloudOptions').on('click', closeOptions); |
||||
|
uDom('#cloudOptionsSubmit').on('click', submitOptions); |
||||
|
}; |
||||
|
|
||||
|
messager.send({ what: 'cloudGetOptions' }, onInitialize); |
||||
|
|
||||
|
/******************************************************************************/ |
||||
|
|
||||
|
// https://www.youtube.com/watch?v=aQFp67VoiDA
|
||||
|
|
||||
|
})(); |
Write
Preview
Loading…
Cancel
Save
Reference in new issue