Comments (15)
So I have this feature 95% complete, but having one problem. In the following block:
sprite.elements.forEach(function (element) {
var className = makeClassName(element.className, sizeLabel);
spriteSelectors.push(className);
svgSelectors.push(className);
css += substitute(cssElementRule, {
selector: className,
width: scaleValue(element.width, size, refSize),
height: scaleValue(element.height, size, refSize),
x: scaleValue(element.x, size, refSize)
});
element
gives me reference to the x
property for horizontal offset within the spritemap. Is there a stored property that contains the generated spritemap's full width? Once I have that, I can post my code for PR.
from dr-svg-sprites.
Nevermind, got it: sprite.sizes[size].width
from dr-svg-sprites.
Great idea!
Just one question: are you on an old pre-v0.9.0 fork? (The snippet you posted above looks a lot like it).
What did you come up with regards to options
?
Off the top of my head I'm thinking the user needs to be able to define a number of breakpoints with related sizes (min-width
and a number) for each item in options.sizes
.
If we can rely on breakpoints being the same across sizes of a sprite something like this might be sufficient:
var options = {
breakpoints: [321, 701], // min-width values for breakpoints. 0 is implied.
sizes: {
"small": [16, 24, 32], // would get matched to 0, 321 and 701 respectively.
"large": [32, 48, 64]
}
};
from dr-svg-sprites.
I'll post my code momentarily, just need to port from a previous version - can you update grunt-dr-svg-sprites
dependency once the code is in for me?
My config accepts an object like this:
shapes : {
options: {
spriteElementPath: 'styleguide/img/svg',
spritePath: 'styleguide/img',
cssPath: 'styleguide/css',
sizes: {
main: 75,
},
breakpoints: {
small: {
query: '@media screen and ( min-width: 25em )',
scale: 0.4
},
medium: {
query: '@media screen and ( min-width: 48em )',
scale: 0.8
},
full: {
query: '@media screen and ( min-width: 61.25em )',
scale: 1.5
},
},
refSize: 26,
unit: 13
}
},
from dr-svg-sprites.
Here's a gist of my code (I'm working to convert it to v.0.9.0 format with handlebars templates you are using):
https://gist.github.com/brianfeister/6ddc8f2be5f3385c5882
from dr-svg-sprites.
Ugh, these handlebars templates are already pretty logic-dense, which I'm a bit suspicious of and then adding the option I'm proposing means more logic in handlebars. The pre-handlebars version of the plugin was definitely better. I'll pick this up again later, right now. Can you let me know when the grunt-dr-svg-sprites plugin is in sync with this module and I'll try again.
from dr-svg-sprites.
FYI my gist above is working with no known issues in the pre v.0.9.0 environment of grunt-dr-svg-sprites
from dr-svg-sprites.
Hmmm, it should be in sync already; grunt-dr-svg-sprites v0.9.1 depends on dr-svg-sprites v0.9.1.
from dr-svg-sprites.
Cool, got it. Yeah I was on an older version. Ugh. Wish I had updated before I started working on it!
from dr-svg-sprites.
Yeah - I'm sorry. v0.9.0 was a major rewrite. Smooth merges would be a miracle.
As I'm reading your options suggestion small
, medium
and full
basically don't do anything?
Introducing scale
when there's already something called sizes
is bit problematic I think. I see why you did it - but can we be sure all users will want their sprites to scale identically across their defined options.sizes
at all times?
query
gives the user full control of their media-queries (my suggestion above didn't) - so that's probably better. Unless there are lazy users out there who just want to put in some min-width
s and be done with it :D
from dr-svg-sprites.
Yup small
/ full
etc. have no meaning, just keys. I agree about sizes
and scale
, but my use case wouldn't be accomplished with your simplified example. I have a spritemap that has both multiple sizes and also non-matching media-queries. Do you think my example is too complex? I think it's fairly straightforward and I know I would be pissed if I couldn't manipulate the media query manually. :D
from dr-svg-sprites.
I'm trying to figure out if this is even possible with the new v.0.9.0+ format. Do I have access to the meta related to the png Spritemap's final width inside Sprite.js
? I need that and I'm having trouble finding it.
from dr-svg-sprites.
Sprite.width
and Sprite.height
should become available when Sprite.prepare
has executed (the layout module calculates them).
from dr-svg-sprites.
awesome, thanks!
from dr-svg-sprites.
Finally got this merged into master.
from dr-svg-sprites.
Related Issues (20)
- template blank lines HOT 5
- Sample SVG files HOT 3
- Mobile Safari iOS canvas size limitation / icons not showing HOT 2
- css unit precision HOT 2
- Add em unit in cssUnit HOT 3
- Add support for svgo options HOT 3
- Unable to use svgo plugins HOT 5
- Installation issue HOT 4
- Why an hour for other suddenly fails? HOT 8
- How to handle states like :hover or :active? HOT 7
- Not sure why layout isn't working HOT 1
- Fatal error: Cannot read property '1' of undefined
- SASS/SCSS Placeholders
- [feature] Support data-uri for preprocessors like sass and less HOT 4
- Error from svg2png HOT 4
- ID clobbering problem HOT 1
- Issue with ordering of icons in sprite HOT 8
- Svg url ramdom param HOT 2
- Gulp version HOT 1
- Custom path HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dr-svg-sprites.