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

Download images plugin Issue#480 #491

Closed
wants to merge 2 commits into from
Closed

Download images plugin Issue#480 #491

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e36b96d
Issue #480
aashu0148 Dec 24, 2020
0154ccd
Css url names modified
aashu0148 Dec 30, 2020
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
12 changes: 7 additions & 5 deletions app/demo/card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
.card {
background: #fff;
max-width: 400px;
box-shadow: 0 0.2em 0.3em hsla(0,0%,0%,20%);
box-shadow: 0 0.2em 0.3em hsla(0, 0%, 0%, 20%);
padding: 1rem;
border-radius: 0.2em;
border: 1px solid hsl(0,0%,90%);
border: 1px solid hsl(0, 0%, 90%) zz;

& > .card-header {
& h2, & small {
& h2,
& small {
margin: 0;
}

Expand Down Expand Up @@ -49,12 +50,13 @@
}
}

& date, & time {
& date,
& time {
font-size: 0.8rem;
color: #808080;
}
}

.mdc-card {
max-width: 400px;
}
}
38 changes: 24 additions & 14 deletions app/demo/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ main {
gap: 1rem 2rem;
padding: 1rem 2rem;

@media (min-width:480px) {
@media (min-width: 480px) {
--card-size: 35vw;
}

@media (min-width:768px) {
@media (min-width: 768px) {
--card-size: 20vw;

& > article {
Expand Down Expand Up @@ -39,18 +39,18 @@ main {
}
}

@media (min-width:1024px) {
@media (min-width: 1024px) {
--card-size: 16vw;
}

@media (min-width:1600px) {
@media (min-width: 1600px) {
--card-size: 15vw;
}
}

[image-grid] {
display: grid;
gap: .5rem;
gap: 0.5rem;
height: 100%;
align-items: space-between;
justify-content: space-between;
Expand All @@ -73,9 +73,9 @@ main {
margin-top: 1rem;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
gap: .5rem;
gap: 0.5rem;

& :matches(h1,h2,h3,h4,h5,h6) {
& :matches(h1, h2, h3, h4, h5, h6) {
margin: 0;
}
}
Expand All @@ -84,7 +84,7 @@ main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: .5rem;
gap: 0.5rem;

& > div {
border-radius: 1rem;
Expand Down Expand Up @@ -116,11 +116,21 @@ main {
grid-template-columns: repeat(5, 5rem);
justify-content: space-around;

& > .filled-circle:nth-child(1) { background: hsl(200, 50%, 50%); }
& > .filled-circle:nth-child(2) { background: hsl(225, 50%, 50%); }
& > .filled-circle:nth-child(3) { background: hsl(250, 50%, 50%); }
& > .filled-circle:nth-child(4) { background: hsl(275, 50%, 50%); }
& > .filled-circle:nth-child(5) { background: hsl(300, 50%, 50%); }
& > .filled-circle:nth-child(1) {
background: hsl(200, 50%, 50%);
}
& > .filled-circle:nth-child(2) {
background: hsl(225, 50%, 50%);
}
& > .filled-circle:nth-child(3) {
background: hsl(250, 50%, 50%);
}
& > .filled-circle:nth-child(4) {
background: hsl(275, 50%, 50%);
}
& > .filled-circle:nth-child(5) {
background: hsl(300, 50%, 50%);
}
}

nav {
Expand All @@ -136,6 +146,6 @@ nav {
text-align: center;
margin: 5px;
border: 1px solid var(--darkest-grey);
border-radius: .25rem;
border-radius: 0.25rem;
}
}
41 changes: 31 additions & 10 deletions app/demo/shapes.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
border: 1px solid var(--light-grey);
width: 10rem;
height: 10rem;
background: url(https://images.unsplash.com/photo-1608636982148-b22a5ba0e39d?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1OHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60);
}

.filled-square {
background: var(--light-grey);
width: 4rem;
height: 4rem;
background: url(https://images.unsplash.com/photo-1608636982148-b22a5ba0e39d?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1OHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60);
}

.filled-circle {
Expand All @@ -20,18 +22,37 @@
justify-content: center;
color: white;

&.small { width: 2.5rem; height: 2.5rem; }
&.small {
width: 2.5rem;
height: 2.5rem;
}
}


.red { background-color: red; }
.green { background-color: green; }
.yellow { background-color: yellow; }
.google-blue { background-color: #4285F4; }
.google-yellow { background-color: #F4B400; }
.google-red { background-color: #DB4437; }
.google-green { background-color: #0F9D58; }
.shadow-circle { background-color: white; box-shadow: 0 10px 30px 2px hsla(0,0%,0%,20%); }
.red {
background-color: red;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.google-blue {
background-color: #4285f4;
}
.google-yellow {
background-color: #f4b400;
}
.google-red {
background-color: #db4437;
}
.google-green {
background-color: #0f9d58;
}
.shadow-circle {
background-color: white;
box-shadow: 0 10px 30px 2px hsla(0, 0%, 0%, 20%);
}

[round-icon] {
box-sizing: border-box;
Expand Down
50 changes: 42 additions & 8 deletions app/plugins/download-images.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,56 @@ export const commands = [
'download-all-images',
]

export default async function() {
export default async function () {
if (window.showDirectoryPicker === undefined) {
console.log('no directory support :(')
return;
}
const dirHandle = await window.showDirectoryPicker()
const imgs = document.querySelectorAll("img")
let i = 0

imgs.forEach(async (img) => {
const url = img.src
const name = `img-${i}.png`
i++

const name = url.substr(url.lastIndexOf('/') + 1);
try {
console.log(`Fetching ${url}`)
const response = await fetch(url)
Copy link
Member

Choose a reason for hiding this comment

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

I think we need to do some modifying of image urls too, like we are with css urls. I ran the plugin on css-tricks.com and the script did not properly download everything. It missed over half. Still exciting to see it at work though. Things like ads, that are secure and serve once, I'm totally cool with not downloading. But avatars and other stuff, I def expect those to be in my folder, and they're currently missing for ~40% of css-tricks.com right now.

I didnt dig into it too deep, but it was urls like this one https://secure.gravatar.com/avatar/8081b26e05bb4354f7d65ffc34cbbd67?s=80&d=retro&r=pg that didnt download.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

okay @argyleink le me check for it and i'll update you with that tomorrow... now i have some important work to finish off.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

hey @argyleink I have used the same url and it downloaded the image.
check the screenshots i have attached.
Screenshot (45)
Screenshot (46)

Copy link
Member

Choose a reason for hiding this comment

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

i'll look into this further and see what's going on different on css-tricks.com than the visbug test page.

const file = await dirHandle.getFileHandle(name, { create: true })
const writable = await file.createWritable()
await response.body.pipeTo(writable)
} catch (err) {
console.error(err)
}
})
// CSS urls
let css_urls = [...document.styleSheets]
.filter(sheet => {
try { return sheet.cssRules }
catch { }
})
.flatMap(sheet => Array.from(sheet.cssRules))
.filter(rule => rule.style)
.filter(rule => rule.style.backgroundImage !== '')
.filter(rule => rule.style.backgroundImage !== 'initial')
.filter(rule => rule.style.backgroundImage.includes("url"))
.reduce((urls, { style }) => {
urls.push(style.backgroundImage);
return urls;
}, []);

console.log(`Saving to ${name}`)

css_urls.forEach(async (item, i) => {
let cots = false;
let start = item.indexOf('(');
if (item.charAt(start + 1) == '"') cots = true;
let end = item.lastIndexOf(')');
if (cots) {
start += 2;
end -= 6;
}
const url = item.substr(start, end);
const truncated = url.substr(0, url.indexOf("?"));
const name = truncated.slice(truncated.lastIndexOf("/") + 1, truncated.lastIndexOf("/") + 39) + ".jpg"
try {
const response = await fetch(url)
const file = await dirHandle.getFileHandle(name, { create: true })
const writable = await file.createWritable()
await response.body.pipeTo(writable)
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

13 changes: 10 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "VisBug",
"name": "visbug",
"version": "0.3.8",
"description": "",
"description": "<p align=\"center\">\r <img src=\"./assets/visbug.png\" width=\"300\" height=\"300\" alt=\"visbug\">\r <br>\r <a href=\"https://www.npmjs.org/package/visbug\"><img src=\"https://img.shields.io/npm/v/visbug.svg?style=flat\" alt=\"npm latest version number\"></a>\r <a href=\"https://travis-ci.org/GoogleChromeLabs/ProjectVisBug\"><img src=\"https://travis-ci.org/GoogleChromeLabs/ProjectVisBug.svg?branch=master\" alt=\"travis build status\"></a>\r <a href=\"https://www.npmjs.com/package/visbug\"><img src=\"https://img.shields.io/npm/dt/visbug.svg\" alt=\"npm downloads\" ></a>\r </p>",
"author": "Adam Argyle",
"license": "Apache-2.0",
"main": "app/components/vis-bug/vis-bug.element.js",
"repository": {
"type": "git",
"url": "https://github.com/GoogleChromeLabs/ProjectVisBug.git"
"url": "git+https://github.com/GoogleChromeLabs/ProjectVisBug.git"
},
"scripts": {
"start": "npm run concurrent",
Expand Down Expand Up @@ -66,5 +66,12 @@
"require": [
"esm"
]
},
"bugs": {
"url": "https://github.com/GoogleChromeLabs/ProjectVisBug/issues"
},
"homepage": "https://github.com/GoogleChromeLabs/ProjectVisBug#readme",
"directories": {
"test": "tests"
}
}