From 32e5ed365b0f1760e2980838f048e56835c52fa1 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sun, 18 Nov 2018 03:29:16 +0100 Subject: [PATCH] Popup buttons are being added programmatically (video tab only) --- js/conf/Debug.js | 3 +- js/conf/ExtensionConf.js | 25 ++-- js/lib/Comms.js | 4 +- js/lib/Settings.js | 17 +++ js/lib/libghettoui/BaseElement.js | 56 ++++++++ js/lib/libghettoui/BaseUi.js | 35 ----- js/lib/libghettoui/buttons/Button.js | 4 +- js/lib/libghettoui/buttons/ShortcutButton.js | 1 + js/lib/libghettoui/popup/MenuItem.js | 2 +- js/lib/libghettoui/popup/TabItem.js | 2 +- manifest.json | 2 +- res/popup/js/popup.js | 143 ++++++++++--------- res/popup/js/popupvars.js | 30 ++-- res/popup/popup.html | 50 +++---- 14 files changed, 199 insertions(+), 175 deletions(-) create mode 100644 js/lib/libghettoui/BaseElement.js delete mode 100644 js/lib/libghettoui/BaseUi.js diff --git a/js/conf/Debug.js b/js/conf/Debug.js index f979179..c6e69b2 100644 --- a/js/conf/Debug.js +++ b/js/conf/Debug.js @@ -8,7 +8,8 @@ Debug = { keyboard: true, debugResizer: true, debugArDetect: true, - debugStorage: false, + // debugStorage: false, + debugStorage: true, // comms: false, comms: true, // showArDetectCanvas: true, diff --git a/js/conf/ExtensionConf.js b/js/conf/ExtensionConf.js index ef9144f..d2e74d3 100644 --- a/js/conf/ExtensionConf.js +++ b/js/conf/ExtensionConf.js @@ -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, diff --git a/js/lib/Comms.js b/js/lib/Comms.js index 6cce3a3..1538998 100644 --- a/js/lib/Comms.js +++ b/js/lib/Comms.js @@ -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); diff --git a/js/lib/Settings.js b/js/lib/Settings.js index 9918bc1..c92c6fd 100644 --- a/js/lib/Settings.js +++ b/js/lib/Settings.js @@ -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; diff --git a/js/lib/libghettoui/BaseElement.js b/js/lib/libghettoui/BaseElement.js new file mode 100644 index 0000000..5ab6124 --- /dev/null +++ b/js/lib/libghettoui/BaseElement.js @@ -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); + } + } +} \ No newline at end of file diff --git a/js/lib/libghettoui/BaseUi.js b/js/lib/libghettoui/BaseUi.js deleted file mode 100644 index ef9cc05..0000000 --- a/js/lib/libghettoui/BaseUi.js +++ /dev/null @@ -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); - } -} \ No newline at end of file diff --git a/js/lib/libghettoui/buttons/Button.js b/js/lib/libghettoui/buttons/Button.js index ab5f213..ef0e8dc 100644 --- a/js/lib/libghettoui/buttons/Button.js +++ b/js/lib/libghettoui/buttons/Button.js @@ -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, diff --git a/js/lib/libghettoui/buttons/ShortcutButton.js b/js/lib/libghettoui/buttons/ShortcutButton.js index d238f16..2753802 100644 --- a/js/lib/libghettoui/buttons/ShortcutButton.js +++ b/js/lib/libghettoui/buttons/ShortcutButton.js @@ -1,5 +1,6 @@ class ShortcutButton extends Button { constructor(id, label, shortcutLabel, onClick, additionalClasses) { + console.log("additional classes -- sb", additionalClasses) super( id, `${label}
(${shortcutLabel})`, diff --git a/js/lib/libghettoui/popup/MenuItem.js b/js/lib/libghettoui/popup/MenuItem.js index 0595355..fcae087 100644 --- a/js/lib/libghettoui/popup/MenuItem.js +++ b/js/lib/libghettoui/popup/MenuItem.js @@ -1,4 +1,4 @@ -class MenuItem extends BaseUi { +class MenuItem extends BaseElement { constructor(id, label, sublabel, onClick, additionalClasses) { super( id, diff --git a/js/lib/libghettoui/popup/TabItem.js b/js/lib/libghettoui/popup/TabItem.js index 8406217..99d0272 100644 --- a/js/lib/libghettoui/popup/TabItem.js +++ b/js/lib/libghettoui/popup/TabItem.js @@ -1,4 +1,4 @@ -class TabItem extends BaseUi { +class TabItem extends BaseElement { constructor (id, name, label, isIframe, onClick, additionalClasses) { super(id, label, onClick, additionalClasses); diff --git a/manifest.json b/manifest.json index c80a7c0..98a79a2 100644 --- a/manifest.json +++ b/manifest.json @@ -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}" diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js index 17f8b94..0fc077b 100644 --- a/res/popup/js/popup.js +++ b/res/popup/js/popup.js @@ -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); - - 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 - } - } +function configureVideoTab(site) { + const popupButtons = settings.getActionsForSite(site).filter(action => action.popup === true); - // fill in custom aspect ratio - if (settings.active.keyboard.shortcuts.q) { - document.getElementById("_input_custom_ar").value = settings.active.keyboard.shortcuts.q.arg; - } + 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'); - for(var key in _changeAr_button_shortcuts){ - try{ - document.getElementById(`_b_changeAr_${key}_key`).textContent = `(${_changeAr_button_shortcuts[key]})`; - } - catch(ex){ - - } + 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 (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(); // }); diff --git a/res/popup/js/popupvars.js b/res/popup/js/popupvars.js index bc7e8ff..31ae789 100644 --- a/res/popup/js/popupvars.js +++ b/res/popup/js/popupvars.js @@ -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 \ No newline at end of file diff --git a/res/popup/popup.html b/res/popup/popup.html index 37d65d4..a4b95a7 100644 --- a/res/popup/popup.html +++ b/res/popup/popup.html @@ -132,35 +132,20 @@
-
+
Cropping mode -
- Auto-detect
  - Reset
  - 21:9
  - 2:1 (18:9)
  - 16:9
  - Custom
  +
+
-
+ +
+ Manual zooming and panning
@@ -199,21 +184,16 @@
- Stretching mode -
- Normal
 - Basic
 - Hybrid
 - Thin borders
 +
+ Stretching mode +
+
-
+
Video alignment: -
- Left - Center - Right +
@@ -244,9 +224,11 @@ - + + +