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 all 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
9 changes: 9 additions & 0 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,6 +468,15 @@ class WebSearchNavigator {
this.register(getOpt('toggleSort'), () =>
this.searchEngine.changeTools(null),
);
this.register(getOpt('showImagesLarge'), () =>
this.searchEngine.changeImageSize('l'),
);
this.register(getOpt('showImagesMedium'), () =>
this.searchEngine.changeImageSize('e'),
);
this.register(getOpt('showImagesIcon'), () =>
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'],
showImagesLarge: ['z l'],
showImagesMedium: ['z e'],
showImagesIcon: ['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="show-images-large" class="option-desc">Filter image results by large size</label>
<input id="show-images-large" class="input-keybinding" type="text" value="z l">
</div>
<div class="option">
<label for="show-images-medium" class="option-desc">Filter image results by medium size</label>
<input id="show-images-medium" class="input-keybinding" type="text" value="z e">
</div>
<div class="option">
<label for="show-images-icon" class="option-desc">Filter image results by icon size</label>
<input id="show-images-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',
showImagesLarge: 'show-images-large',
showImagesMedium: 'show-images-medium',
showImagesIcon: 'show-images-icon',
};

/**
Expand Down
71 changes: 71 additions & 0 deletions src/search_engines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,77 @@ 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 sizeOptions = {
LARGE: {value: 0, name: 'Large', code: 'l'},
MEDIUM: {value: 1, name: 'Medium', code: 'e'},
ICON: {value: 2, name: 'Icon', code: 'i'},
};
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(
'[aria-label="Size"]');
if (openSizeDropDown != null) {
openSizeDropDown.click();
}
const dropDownWithSize = document.querySelector(
'[class="xFo9P r9PaP Fmo8N"][jsname="wLFV5d"]');
const getButton = (selector) => {
let button;
if (document.querySelector(selector) != null) {
button = document.querySelector(selector);
} else {
button = null;
}
return button;
};
const setImageSize = (dropDownWithSize, buttonSelector) => {
let button = getButton(buttonSelector);
if (dropDownWithSize == null && button != null) {
button.click();
} else if (dropDownWithSize != null && button == null) {
dropDownWithSize.click();
button = getButton(buttonSelector);
button.click();
} else if (dropDownWithSize != null && button != null) {
button.click();
}
};
switch (size) {
case sizeOptions.LARGE.code:
if (dropDownWithSize != null &&
dropDownWithSize.getAttribute('aria-label') ==
sizeOptions.LARGE.name) {
} else {
setImageSize(dropDownWithSize,
'[class="MfLWbb"][aria-label="Large"]');
}
break;
case sizeOptions.MEDIUM.code:
if (dropDownWithSize != null &&
dropDownWithSize.getAttribute('aria-label') ==
sizeOptions.MEDIUM.name) {
} else {
setImageSize(dropDownWithSize,
'[class="MfLWbb"][aria-label="Medium"]');
}
break;
case sizeOptions.ICON.code:
if (dropDownWithSize != null &&
dropDownWithSize.getAttribute('aria-label') ==
sizeOptions.ICON.name) {
} else {
setImageSize(dropDownWithSize, '[class="MfLWbb"][aria-label="Icon"]');
}
break;
default:
break;
}
}
}

class StartPage {
Expand Down