tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Popup buttons are being added programmatically (video tab only)

Browse Source
This commit is contained in:
Tamius Han 2018-11-18 03:29:16 +01:00
parent 0004b4287a
commit 32e5ed365b
14 changed files with 199 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
js/conf/Debug.js
View File

@ -8,7 +8,8 @@ Debug = {
keyboard: true,
debugResizer: true,
debugArDetect: true,
debugStorage: false,
// debugStorage: false,
debugStorage: true,
// comms: false,
comms: true,
// showArDetectCanvas: true,

25
js/conf/ExtensionConf.js
View File

@ -134,7 +134,7 @@ var ExtensionConf = {
// List of all possible actions, for use in settings
// TODO: move to separate file as this shouldn't be user-settable
actionsList: [{
action: 'crop',
action: 'set-ar',
args: [{
name: 'Automatic',
arg: 'auto',
@ -190,7 +190,7 @@ var ExtensionConf = {
// Polje 'shortcut' je tabela, če se slučajno lotimo kdaj delati choordov.
actions: [{
cmd: [{
action: 'crop',
action: 'set-ar',
arg: 'auto'
}],
shortcut: [{
@ -209,7 +209,7 @@ var ExtensionConf = {
label: 'Automatic'
},{
cmd: [{
action: 'crop',
action: 'set-ar',
arg: 'reset',
}],
shortcut: [{
@ -226,7 +226,7 @@ var ExtensionConf = {
label: 'Reset',
},{
cmd: [{
action: 'crop',
action: 'set-ar',
arg: 'fitw',
}],
shortcut: [{
@ -243,7 +243,7 @@ var ExtensionConf = {
label: 'Fit width',
},{
cmd: [{
action: 'crop',
action: 'set-ar',
arg: 'fith',
}],
shortcut: [{
@ -260,7 +260,7 @@ var ExtensionConf = {
label: 'Fit height',
},{
cmd: [{
action: 'crop',
action: 'set-ar',
arg: 1.78,
}],
shortcut: [{
@ -277,7 +277,7 @@ var ExtensionConf = {
label: '16:9',
},{
cmd: [{
action: 'crop',
action: 'set-ar',
arg: 2.39,
}],
shortcut: [{
@ -294,7 +294,7 @@ var ExtensionConf = {
label: '21:9'
},{
cmd: [{
action: 'crop',
action: 'set-ar',
arg: 2.35,
}],
shortcut: [{
@ -311,7 +311,7 @@ var ExtensionConf = {
label: '2.35',
},{
cmd: [{
action: 'crop',
action: 'set-ar',
arg: 2.0,
}],
shortcut: [{
@ -403,7 +403,6 @@ var ExtensionConf = {
action: 'stretch',
arg: 0,
}],
shortcut: [],
popup: true,
popup_site: true,
popup_global: true,
@ -414,7 +413,6 @@ var ExtensionConf = {
action: 'stretch',
arg: 1,
}],
shortcut: [],
popup: true,
popup_site: true,
popup_global: true,
@ -425,7 +423,6 @@ var ExtensionConf = {
action: 'stretch',
arg: 2,
}],
shortcut: [],
popup: true,
popup_site: true,
popup_global: true,
@ -436,7 +433,6 @@ var ExtensionConf = {
action: 'stretch',
arg: 3,
}],
shortcut: [],
popup: true,
popup_site: true,
popup_global: true,
@ -451,7 +447,6 @@ var ExtensionConf = {
action: 'align',
arg: 'left'
}],
shortcut: [],
popup: true,
popup_site: true,
popup_global: true,
@ -462,7 +457,6 @@ var ExtensionConf = {
action: 'align',
arg: 'center'
}],
shortcut: [],
popup: true,
popup_site: true,
popup_global: true,
@ -473,7 +467,6 @@ var ExtensionConf = {
action: 'align',
arg: 'right'
}],
shortcut: [],
popup: true,
popup_site: true,
popup_global: true,

4
js/lib/Comms.js
View File

@ -66,7 +66,7 @@ class CommsClient {
}
if (message.cmd === "set-ar") {
this.pageInfo.setAr(message.ratio);
this.pageInfo.setAr(message.arg);
} else if (message.cmd === 'set-alignment') {
this.pageInfo.setVideoFloat(message.mode);
this.pageInfo.restoreAr();
@ -290,7 +290,7 @@ class CommsServer {
} else if (message.cmd === 'set-ar') {
this.sendToActive(message);
} else if (message.cmd === 'set-custom-ar') {
this.settings.active.keyboard.shortcuts.q.arg = message.ratio;
this.settings.active.keyboard.shortcuts.q.arg = message.arg;
this.settings.save();
} else if (message.cmd === 'set-alignment') {
this.sendToActive(message);

17
js/lib/Settings.js
View File

@ -57,6 +57,13 @@ class Settings {
if(Debug.debug) {
console.log("[Settings::init] Configuration fetched from storage:", settings);
if (Debug.flushStoredSettings) {
console.log("%c[Settings::init] Debug.flushStoredSettings is true. Using default settings", "background: #d00; color: #ffd");
Debug.flushStoredSettings = false; // don't do it again this session
this.active = this.getDefaultSettings();
return this.active;
}
}
// if there's no settings saved, return default settings.
@ -191,6 +198,16 @@ class Settings {
return this.active.sites[site];
}
getActionsForSite(site) {
if (!site) {
return this.active.actions;
}
if (this.active.sites[site] && this.active.sites[site].actions && this.active.sites[site].actions.length > 0) {
return this.active.sites[site].actions;
}
return this.active.actions;
}
getExtensionMode(site) {
if (!site) {
site = window.location.hostname;

56
js/lib/libghettoui/BaseElement.js Normal file
View File

@ -0,0 +1,56 @@
class BaseElement {
constructor(id, label, onClick, additionalClasses, existingElement) {
console.log("additional classes", additionalClasses)
if (existingElement) {
this.element = existingElement;
} else {
this.element = document.createElement('div');
this.element.setAttribute('id', id);
}
if (additionalClasses) {
this.element.classList.add(...additionalClasses);
}
if (onClick) {
this.element.addEventListener('click', onClick);
}
if (label && !existingElement) {
this.element.innerHTML = label;
}
}
static fromExisting(element, onClick){
return new BaseElement(undefined, undefined, onClick, undefined, element);
}
disable() {
this.element.classList.add('disabled');
}
enable() {
this.element.classList.remove('disabled');
}
hide() {
this.element.classList.add('hidden');
}
show() {
this.element.classList.remove('hidden');
}
select() {
this.element.classList.add('selected');
}
unselect() {
this.element.classList.remove('selected');
}
appendTo(element) {
if (element.element) {
element.element.appendChild(this.element);
} else {
element.appendChild(this.element);
}
}
removeChildren() {
while (this.element.lastChild) {
this.element.removeChild(this.element.lastChild);
}
}
}

35
js/lib/libghettoui/BaseUi.js
View File

@ -1,35 +0,0 @@
class BaseUi {
constructor(id, label, onClick, additionalClasses) {
this.element = document.createElement('div');
this.element.setAttribute('id', id);
if (additionalClasses) {
this.element.classList.add(...additionalClasses);
}
if (onClick) {
this.element.addEventListener('click', onClick);
}
this.element.innerHTML = label;
}
disable() {
this.element.classList.add('disabled');
}
enable() {
this.element.classList.remove('disabled');
}
hide() {
this.element.classList.add('hidden');
}
show() {
this.element.classList.remove('hidden');
}
select() {
this.element.classList.add('selected');
}
unselect() {
this.element.classList.remove('selected');
}
appendTo(element) {
element.appendChild(this.element);
}
}

4
js/lib/libghettoui/buttons/Button.js
View File

@ -1,5 +1,7 @@
class ShortcutButton extends BaseUi {
class Button extends BaseElement {
constructor(id, label, onClick, additionalClasses) {
console.log("additional classes", additionalClasses)
super(
id,
label,

1
js/lib/libghettoui/buttons/ShortcutButton.js
View File

@ -1,5 +1,6 @@
class ShortcutButton extends Button {
constructor(id, label, shortcutLabel, onClick, additionalClasses) {
console.log("additional classes -- sb", additionalClasses)
super(
id,
`${label}<br/><span class="smallcaps small darker">(${shortcutLabel})`,

2
js/lib/libghettoui/popup/MenuItem.js
View File

@ -1,4 +1,4 @@
class MenuItem extends BaseUi {
class MenuItem extends BaseElement {
constructor(id, label, sublabel, onClick, additionalClasses) {
super(
id,

2
js/lib/libghettoui/popup/TabItem.js
View File

@ -1,4 +1,4 @@
class TabItem extends BaseUi {
class TabItem extends BaseElement {
constructor (id, name, label, isIframe, onClick, additionalClasses) {
super(id, label, onClick, additionalClasses);

2
manifest.json
View File

@ -1,7 +1,7 @@
{
"manifest_version": 2,
"name": "Ultrawidify",
"version": "3.3.0-a2",
"version": "3.3.0-a3",
"applications": {
"gecko": {
"id": "{cf02b1a7-a01a-4e37-a609-516a283f1ed3}"

141
res/popup/js/popup.js
View File

@ -95,9 +95,8 @@ async function processReceivedMessage(message, port){
port.postMessage({cmd: 'get-current-zoom'});
}
site = message.site;
if(message.site.host)
loadConfig(message.site.host);
loadFrames(message.site);
loadConfig(site.host);
loadFrames(site);
} else if (message.cmd === 'set-current-zoom') {
setCurrentZoom(message.zoom);
}
@ -147,6 +146,7 @@ function stringToKeyCombo(key_in){
}
function configurePopupTabs(site) {
return;
// todo: this can potentially be removed
// Determine which tabs can we touch.
@ -169,6 +169,18 @@ function configurePopupTabs(site) {
}
}
function basicCommandHandler(cmdArray) {
for (cmd of cmdArray) {
port.postMessage({
cmd: cmd.action,
arg: cmd.arg
});
}
}
function configureGlobalTab() {
return; // todo: revisit
if (Debug.debug) {
@ -249,61 +261,72 @@ function configureSitesTab(site) {
}
}
function configureVideoTab() {
// process keyboard shortcuts for crop settings
if(settings.active.keyboard.shortcuts){
for(var key in settings.active.keyboard.shortcuts){
var shortcut = settings.active.keyboard.shortcuts[key];
var keypress = stringToKeyCombo(key);
function configureVideoTab(site) {
const popupButtons = settings.getActionsForSite(site).filter(action => action.popup === true);
try{
if(shortcut.action == "crop"){
if (key == 'q') {
_changeAr_button_shortcuts["custom"] = keypress;
}
else if(shortcut.arg == 2.0){
_changeAr_button_shortcuts["189"] = keypress;
}
else if(shortcut.arg == 2.39){
_changeAr_button_shortcuts["219"] = keypress;
}
else if(shortcut.arg == 1.78){
_changeAr_button_shortcuts["169"] = keypress;
}
else if(shortcut.arg == "fitw") {
_changeAr_button_shortcuts["fitw"] = keypress;
}
else if(shortcut.arg == "fith") {
_changeAr_button_shortcuts["fith"] = keypress;
}
else if(shortcut.arg == "reset") {
_changeAr_button_shortcuts["reset"] = keypress;
}
}
else if(shortcut.action == "auto-ar") {
_changeAr_button_shortcuts["auto-ar"] = keypress;
}
}
catch(Ex){
//do nothing if key doesn't exist
}
}
const cropButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'set-ar');
const stretchButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'stretch');
const alignButtons = popupButtons.filter(action => action.cmd.length === 1 && action.cmd[0].action === 'align');
// fill in custom aspect ratio
if (settings.active.keyboard.shortcuts.q) {
document.getElementById("_input_custom_ar").value = settings.active.keyboard.shortcuts.q.arg;
}
if (cropButtons.length === 0) {
VideoPanel.elements.cropSettings.container.hide();
} else {
VideoPanel.elements.cropSettings.buttonContainer.removeChildren();
VideoPanel.elements.cropSettings.container.show();
VideoPanel.elements.cropSettings.buttonContainer.show();
for(var key in _changeAr_button_shortcuts){
try{
document.getElementById(`_b_changeAr_${key}_key`).textContent = `(${_changeAr_button_shortcuts[key]})`;
}
catch(ex){
}
for (button in cropButtons) {
const nb = new ShortcutButton(
'',
button.label,
(button.shortcut && button.shortcut[0].key ? button.shortcut[0].key.toUpperCase() : ''),
() => basicCommandHandler(button.cmd),
['w24']
)
console.log("BUTON CONTAINER", VideoPanel.elements.cropSettings.buttonContainer)
nb.appendTo(VideoPanel.elements.cropSettings.buttonContainer);
}
}
if (stretchButtons.length === 0) {
VideoPanel.elements.stretchSettings.container.hide();
} else {
VideoPanel.elements.stretchSettings.buttonContainer.removeChildren();
VideoPanel.elements.stretchSettings.container.show();
VideoPanel.elements.stretchSettings.buttonContainer.show();
for (button in stretchButtons) {
const nb = new ShortcutButton(
'',
button.label,
button.shortcut && button.shortcut[0].key ? button.shortcut[0].key.toUpperCase() : '',
() => basicCommandHandler(button.cmd),
['w24']
)
nb.appendTo(VideoPanel.elements.stretchSettings.buttonContainer);
}
}
if (alignButtons.length === 0) {
VideoPanel.elements.stretchSettings.container.hide();
} else {
VideoPanel.elements.alignmentSettings.buttonContainer.removeChildren();
VideoPanel.elements.alignmentSettings.container.show();
VideoPanel.elements.alignmentSettings.buttonContainer.show();
for (button in alignButtons) {
const nb = new ShortcutButton(
'',
button.label,
button.shortcut && button.shortcut[0].key ? button.shortcut[0].key.toUpperCase() : '',
() => basicCommandHandler(),
['w24']
)
nb.appendTo(VideoPanel.elements.alignmentSettings.buttonContainer);
}
}
// todo: get min, max from settings
VideoPanel.inputs.zoomSlider.min = Math.log2(0.5);
VideoPanel.inputs.zoomSlider.max = Math.log2(8);
@ -330,8 +353,6 @@ function configureVideoTab() {
async function loadConfig(site){
console.log("NEW CONFIG!")
if (Debug.debug) {
console.log("\n\n-------------------------------------\n[popup.js::loadConfig] loading config. conf object:", settings.active);
}
@ -339,7 +360,7 @@ async function loadConfig(site){
configurePopupTabs(site);
configureGlobalTab();
configureSitesTab(site);
configureVideoTab();
configureVideoTab(site);
if (Debug.debug) {
console.log("[popup.js::loadConfig] config loaded\n-----------------------\n\n");
@ -798,16 +819,6 @@ async function popup_init() {
}
const customArInputField = document.getElementById("_input_custom_ar");
const autoarFrequencyInputField = document.getElementById("_input_autoAr_timer");
customArInputField.addEventListener("blur", (event) => {
validateCustomAr();
});
customArInputField.addEventListener("mouseleave", (event) => {
validateCustomAr();
});
// autoarFrequencyInputField.addEventListener("blur", (event) => {
// validateAutoArTimeout();
// });

30
res/popup/js/popupvars.js
View File

@ -61,21 +61,19 @@ SitePanel.stretch['3'] = document.getElementById("_stretch_site_conditio
//#region VideoPanel
var VideoPanel = {};
VideoPanel.alignment = {};
VideoPanel.alignment.left = document.getElementById("_align_video_left");
VideoPanel.alignment.center = document.getElementById("_align_video_center");
VideoPanel.alignment.right = document.getElementById("_align_video_right");
// labels on buttons
VideoPanel.buttonLabels = {};
VideoPanel.buttonLabels.crop = {};
VideoPanel.buttonLabels.crop['auto-ar'] = document.getElementById("_b_changeAr_auto-ar_key");
VideoPanel.buttonLabels.crop.reset = document.getElementById("_b_changeAr_reset_key");
VideoPanel.buttonLabels.crop['219'] = document.getElementById("_b_changeAr_219_key");
VideoPanel.buttonLabels.crop['189'] = document.getElementById("_b_changeAr_189_key");
VideoPanel.buttonLabels.crop['169'] = document.getElementById("_b_changeAr_169_key");
VideoPanel.buttonLabels.crop.custom = document.getElementById("_b_changeAr_custom_key");
VideoPanel.buttonLabels.zoom = {};
VideoPanel.elements = {};
VideoPanel.elements.cropSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_crop_buttons'))
}
VideoPanel.elements.stretchSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_stretch')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_stretch_buttons'))
}
VideoPanel.elements.alignmentSettings = {
container: BaseElement.fromExisting(document.getElementById('_menu_settings_video_alignment')),
buttonContainer: BaseElement.fromExisting(document.getElementById('_menu_settings_video_alignment_buttons'))
}
// buttons: for toggle, select
VideoPanel.buttons = {};
@ -88,7 +86,6 @@ VideoPanel.buttons.changeAr.hideCustomAr = document.getElementById("_changeAr_b_
// inputs (getting values)
VideoPanel.inputs = {};
VideoPanel.inputs.customCrop = document.getElementById("_input_custom_ar");
VideoPanel.inputs.zoomSlider = document.getElementById("_input_zoom_slider");
VideoPanel.inputs.allowPan = document.getElementById("_input_zoom_site_allow_pan");
@ -99,5 +96,4 @@ VideoPanel.labels.zoomLevel = document.getElementById("_label_zoom_level"
// misc stuff
VideoPanel.misc = {};
VideoPanel.misc.zoomShortcuts = document.getElementById("_zoom_shortcuts");
VideoPanel.misc.customArChanger = document.getElementById("_changeAr_customAr");
//#endregion

50
res/popup/popup.html
View File

@ -132,35 +132,20 @@
<div id="_menu_settings_video" class="suboption">
<!-- CROP STUFF -->
<div class="row">
<div id="_menu_settings_video_crop" class="row">
<span class="label">Cropping mode</span>
<div class="button-row">
<a class="button _changeAr _ar_auto w24">Auto-detect<br/><span id="_b_changeAr_auto-ar_key" class="smallcaps small darker"></span>&nbsp;</a>
<a class="button _changeAr _ar_reset w24">Reset<br/><span id="_b_changeAr_reset_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_219 w24">21:9<br/><span id="_b_changeAr_219_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_189 w24">2:1 (18:9)<br/><span id="_b_changeAr_189_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_169 w24">16:9<br/><span id="_b_changeAr_169_key" class="smallcaps small darker">&nbsp;</span></a>
<a class="button _changeAr _ar_custom w24">Custom<br/><span id="_b_changeAr_custom_key" class="smallcaps small darker">&nbsp;</span></a>
<div id="_menu_settings_video_crop_buttons" class="button-row">
</div>
<div style="overflow: auto">
<!-- todo: redirect 'custom aspect ratio' to settings -->
<!-- <div style="overflow: auto">
<div class="float-right medium-small">
<a id="_changeAr_b_show_customAr" class="_changeAr_show_customAr x-pad-1em">Set custom aspect ratio</a>
<a id="_changeAr_b_hide_customAr" class="_changeAr_hide_customAr hidden x-pad-1em">Hide custom aspect ratio settings</a>
</div>
</div>
</div>
<div id="_changeAr_customAr" class="row hidden">
<span class="label">Custom aspect ratio</span>
<div>
<input id="_input_custom_ar" class="_changeAr _custom" onblur="validateCustomAr()"> &nbsp; &nbsp; <span id="_b_changeAr_save_custom_ar" class="button _ar_save_custom_ar _changeAr">Save</span>
<br/><small>Aspect ratio can be entered in any of these forms (without quotes):
<ul style="display: block; padding-top: 0px; margin-top: 0px">
<li>fraction (<i>width/height</i>, e.g. <i>16/10</i>, <i>2560/1080</i>, etc.)</li>
<li>ratio (e.g. <i>1:2.35</i> or simply <i>2.35</i> — <i>1:</i> bit can be left out)</li>
</ul></small>
</div>
</div> -->
</div>
<!-- ZOOM STUFF -->
<span class="label experimental">Manual zooming and panning</span>
<div class="row">
@ -199,21 +184,16 @@
</div>
<!-- STRETCH STUFF -->
<span class="label experimental">Stretching mode</span>
<div class="button-row">
<a class="button _stretch _ar_stretch_none w24">Normal<br/><span id="_b_stretch_none_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_basic w24">Basic<br/><span id="_b_stretch_basic_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_hybrid w24">Hybrid<br/><span id="_b_stretch_hybrid_key" class="smallcaps small darker"></span></a>
<a class="button _stretch _ar_stretch_conditional w24">Thin borders<br/><span id="_b_stretch_conditional_key" class="smallcaps small darker"></span></a>
<div id="_menu_settings_video_stretch" class="row">
<span class="label experimental">Stretching mode</span>
<div id="_menu_settings_video_stretch_buttons" class="button-row">
</div>
</div>
<!-- VIDEO ALIGNMENT -->
<div class="row">
<div id="_menu_settings_video_alignment" class="row">
<span class="label">Video alignment:</span>
<div class="button-row">
<a id="_align_video_left" class="button _align _align_video_left">Left</a>
<a id="_align_video_center" class="button _align _align_video_center">Center</a>
<a id="_align_video_right" class="button _align _align_video_right">Right</a>
<div id="_menu_settings_video_alignment_buttons" class="button-row">
</div>
</div>
</div>
@ -244,9 +224,11 @@
<script src="../../js/lib/Settings.js"></script>
<!-- ui libs -->
<script src="../../js/lib/libghettoui/BaseUi.js"></script>
<script src="../../js/lib/libghettoui/BaseElement.js"></script>
<script src="../../js/lib/libghettoui/popup/MenuItem.js"></script>
<script src="../../js/lib/libghettoui/popup/TabItem.js"></script>
<script src="../../js/lib/libghettoui/buttons/Button.js"></script>
<script src="../../js/lib/libghettoui/buttons/ShortcutButton.js"></script>