Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: add option for image size #221

Merged
merged 11 commits into from
Jan 20, 2021
Merged

fix: add option for image size #221

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
90f717f
image size short cut (to be adjusted)
yuanLeeMidori Oct 17, 2020
6a33202
fix: add options for image sizes
yuanLeeMidori Oct 18, 2020
a688d51
Merge remote-tracking branch 'upstream/master'
yuanLeeMidori Oct 23, 2020
8321fd0
fix: modify typos and names
yuanLeeMidori Oct 23, 2020
94842ca
fix: remove a new line
yuanLeeMidori Oct 23, 2020
d84874e
Merge branch 'master' of https://github.com/infokiller/web-search-nav…
yuanLeeMidori Dec 22, 2020
444e34c
Fix: refactor functions and fix some issues as request
yuanLeeMidori Dec 30, 2020
72b8187
fix: add image options - make requested changes
yuanLeeMidori Jan 7, 2021
e41686e
fix: add image options - remove unused code and run linter
yuanLeeMidori Jan 8, 2021
b22babe
Update options_page.js
infokiller Jan 19, 2021
63ba5c7
Update search_engines.js
infokiller Jan 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions assets/chrome_webstore_description.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,5 +148,8 @@ wanted to add new keyboard shortcuts and the existing ones to be more vim like
* `z y`: Filter results by past year
* `z z`: Turn off filter (show all results)
* `z t`: Toggle sort by date/relevance (only when filtering)
* `z l`: Filter results by large size
* `z e`: Filter results by medium size
* `z i`: Filter results by icon size
yuanLeeMidori marked this conversation as resolved.
Show resolved Hide resolved

©2020 Google LLC All rights reserved. Google™ search is a trademark of Google LLC.
12 changes: 12 additions & 0 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,6 +476,18 @@ class WebSearchNavigator {
this.register(getOpt('toggleSort'), () =>
this.searchEngine.changeTools(null),
);
// this.register(getOpt('navigatesShowAllSizes'), () =>
// this.searchEngine.changeTools('a'),
// );
yuanLeeMidori marked this conversation as resolved.
Show resolved Hide resolved
this.register(getOpt('navigateShowLarge'), () =>
this.searchEngine.changeImageSize('l'),
);
this.register(getOpt('navigateShowMedium'), () =>
this.searchEngine.changeImageSize('e'),
);
this.register(getOpt('navigateShowIcon'), () =>
this.searchEngine.changeImageSize('i'),
);
yuanLeeMidori marked this conversation as resolved.
Show resolved Hide resolved
}

register(shortcuts, callback, element = document, global = false) {
Expand Down
3 changes: 3 additions & 0 deletions src/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,9 @@ const DEFAULT_KEYBINDINGS = {
navigateShowYear: ['z y'],
toggleSort: ['z s'],
toggleVerbatimSearch: ['z v'],
navigateShowLarge: ['z l'],
navigateShowMedium: ['z e'],
navigateShowIcon: ['z i'],
};

const DEFAULT_OPTIONS = {
Expand Down
12 changes: 12 additions & 0 deletions src/options_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,18 @@ <h2>Keybindings</h2>
<label for="toggle-verbatim-search" class="option-desc">Toggle verbatim search</label>
<input id="toggle-verbatim-search" class="input-keybinding" type="text" value="z v, ctrl-shift-v">
</div>
<div class="option">
<label for="navigate-show-large" class="option-desc">Filter image results by large size</label>
<input id="navigate-show-large" class="input-keybinding" type="text" value="z l">
</div>
<div class="option">
<label for="navigate-show-medium" class="option-desc">Filter image results by large size</label>
<input id="navigate-show-medium" class="input-keybinding" type="text" value="z e">
yuanLeeMidori marked this conversation as resolved.
Show resolved Hide resolved
</div>
<div class="option">
<label for="navigate-show-icon" class="option-desc">Filter image results by large size</label>
<input id="navigate-show-icon" class="input-keybinding" type="text" value="z i">
</div>
</details>
<details>
<summary><h3>Google and Startpage</h3></summary>
Expand Down
3 changes: 3 additions & 0 deletions src/options_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,9 @@ const KEYBINDING_TO_DIV = {
navigateShowYear: 'navigate-show-year',
toggleSort: 'toggle-sort',
toggleVerbatimSearch: 'toggle-verbatim-search',
navigateShowLarge: 'navigate-show-large',
navigateShowMedium: 'navigate-show-medium',
navigateShowIcon: 'navigate-show-icon'
};

/**
Expand Down
73 changes: 73 additions & 0 deletions src/search_engines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,79 @@ class GoogleSearch {
}
return false;
}

changeImageSize(size) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's better to use as input to the function something more descriptive than 'i', 'l', 'e'. Javascript doesn't have enums but you can simulate them: https://stackoverflow.com/q/287903/1014208

const openTool = document.querySelector(
'[class="PNyWAd ZXJQ7c"][jsname="I4bIT"]');
infokiller marked this conversation as resolved.
Show resolved Hide resolved
if (openTool != null) {
openTool.click();
}
const openSizeDropDown = document.querySelector(
'[class="xFo9P r9PaP"][jsname="wLFV5d"][aria-label="Size"]');
if (openSizeDropDown != null) {
openSizeDropDown.click();
}
const large = document.querySelector(
'[class="MfLWbb"][aria-label="Large"]');
const medium = document.querySelector(
'[class="MfLWbb"][aria-label="Medium"]');
const icon = document.querySelector(
'[class="MfLWbb"][aria-label="Icon"]');
const dropDownWithSize = document.querySelector(
'[class="xFo9P r9PaP Fmo8N"][jsname="wLFV5d"]');
if (large != null && medium != null && icon != null) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems possible to simplify the two switch statements. Not sure about the best way to do it, but maybe something like:

switch(size) {
  case LARGE:
    if (dropDownWithSize != null) {
      if (dropDownWithSize.innerHTML == 'Large') {
        return;
      }
      if (large == null) {
        dropDownWithSize.click();
        // large = ...
      }
    }
    if (large != null) {
      large.click();
    }
  // ...
}

Now basically some of the code in the case can be extracted out to a function, say something like:

const setImageSize = (dropDownWithSize, getButton) => {
  let button = getButton();
  if (dropDownWithSize != null && button == null) {
    dropDownWithSize.click();
    button = getButton();
  }
  if (button != null) {
    button.click();
  }
};

// ...


switch(size) {
  case LARGE:
    if (dropDownWithSize != null && dropDownWithSize.innerHTML == 'Large') {
      return;
    }
    setImageSize(dropDownWithSize, () => { 
      // return document...;
    });
    break;
  // ...
}

switch (size) {
case 'l':
large.click();
break;
case 'e':
medium.click();
break;
case 'i':
icon.click();
break;
default:
break;
}
} else {
// While sized is selected, the dropdown element changes.
// Expend dropdown and select the size again.
switch (size) {
case 'l':
if (dropDownWithSize.innerHTML == 'Large') {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will checking 'Large' works in other languages?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here and below you are calling dropDownWithSize.innerHTML but dropDownWithSize may be undefined?

break;
} else {
dropDownWithSize.click();
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here and below you are calling dropDownWithSize.click() but dropDownWithSize may be undefined?

const reopenLarge = document.querySelector(
'[class="MfLWbb"][aria-label="Large"]');
reopenLarge.click();
break;
}
case 'e':
if (dropDownWithSize.innerHTML == 'Medium') {
break;
} else {
dropDownWithSize.click();
const reopenMedium = document.querySelector(
'[class="MfLWbb"][aria-label="Medium"]');
reopenMedium.click();
break;
}
case 'i':
if (dropDownWithSize.innerHTML == 'Icon') {
break;
} else {
dropDownWithSize.click();
const reopenIcon = document.querySelector(
'[class="MfLWbb"][aria-label="Icon"]');
reopenIcon.click();
break;
}
default:
break;
}
}
}
}

class StartPage {
Expand Down