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

Download images plugin Issue#480 #491

Closed
wants to merge 2 commits into from
+115 −41
Closed

Download images plugin Issue#480 #491

Changes from 1 commit
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
Next Next commit
Issue #480
@aashu0148
aashu0148 committed Dec 24, 2020

Verified

This commit was signed with the committer’s verified signature. The key has expired.
xatier xatier
GPG key ID: EE2C5C1F7D756A33
Expired
Verified
Learn about vigilant mode
commit e36b96dad1881d67c3332202855415d54eb3af76
12 changes: 7 additions & 5 deletions app/demo/card.css
View file
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;
}

@@ -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
Original file line number Diff line number Diff line change
@@ -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 {
@@ -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;
@@ -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;
}
}
@@ -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;
@@ -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 {
@@ -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
Original file line number Diff line number Diff line change
@@ -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 {
@@ -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;
49 changes: 41 additions & 8 deletions app/plugins/download-images.js
View file
Original file line number Diff line number Diff line change
@@ -3,22 +3,55 @@ 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 name = `css-${i + 1}.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)
2 changes: 1 addition & 1 deletion package-lock.json
View file

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
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",
@@ -66,5 +66,12 @@
"require": [
"esm"
]
},
"bugs": {
"url": "https://github.com/GoogleChromeLabs/ProjectVisBug/issues"
},
"homepage": "https://github.com/GoogleChromeLabs/ProjectVisBug#readme",
"directories": {
"test": "tests"
}
}