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.

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

Automatic selectors #12

Closed
BadMinus opened this Issue Feb 29, 2012 · 3 comments

Comments

Projects
None yet
2 participants
@BadMinus

BadMinus commented Feb 29, 2012

Wouldn't be great if was an option when you can write selectors in filenames. Often I know how I will use image so why don't write selectors in filename?

`````` body__div#main_shit__ul__li__a.class.double-dragon--hover.pngor even with whitespacebody div#main_shit ul li a.class.double-dragon--hover.png````
We can pass an options like repeat-x ````.class(rx).png => .class{background-image:url(sprites.png) repeat-x}````

I don't know how to write this beautifully so it just idea yet. Below just sample code, but it works

   def self.css(selector, name, attributes)
      if selector == 'filename'
        name = name.gsub(/--/,":")
        name = name.gsub(/__/," ")
        "#{name} { #{css_style(attributes)}; }"
      else
        "#{selector}#{name} { #{css_style(attributes)}; }"
      end
    end
@jakesgordon

This comment has been minimized.

Show comment
Hide comment
@jakesgordon

jakesgordon May 10, 2012

Owner

Its an interesting idea... but I'm not sure I'd build it into the core gem. I think different people might have different needs on how to do the filename => selector mapping

I'd more likely suggest using the 'customizing the entire css output' (see readme) approach to customizing your output:

SpriteFactory.run!('my_image_folder') do |images|
  rules = []
  images.each do |name, image|
    selector = name.gsub(/__/, " ")
    rules << "#{selector} { #{image[:style]}; }"
  end
  rules.join('\n')
end

(or something like that)

You could also extend the library by adding a custom style generator (3 methods) to the SpriteFactory::Style module and then specify that as the :style. E.g. to add a filename_selector style, The 3 methods you would add would be something like:

require `sprite-factory`

module SpriteFactory
  module Style

    def self.filename_selector(selector, name, attributes)
      css("", name.gsub(/__/, " "), attributes)     # same as css but selector based on modified-name instead
    end

    def self.filename_selector_style(attributes)
      css_style(attributes)
    end

    def self.filename_selector_comment(comment)
      css_comment(comment)
    end

  end
end

SpriteFactory.run!('images', :style => 'filename_selector',  ... my other options here ... )
Owner

jakesgordon commented May 10, 2012

Its an interesting idea... but I'm not sure I'd build it into the core gem. I think different people might have different needs on how to do the filename => selector mapping

I'd more likely suggest using the 'customizing the entire css output' (see readme) approach to customizing your output:

SpriteFactory.run!('my_image_folder') do |images|
  rules = []
  images.each do |name, image|
    selector = name.gsub(/__/, " ")
    rules << "#{selector} { #{image[:style]}; }"
  end
  rules.join('\n')
end

(or something like that)

You could also extend the library by adding a custom style generator (3 methods) to the SpriteFactory::Style module and then specify that as the :style. E.g. to add a filename_selector style, The 3 methods you would add would be something like:

require `sprite-factory`

module SpriteFactory
  module Style

    def self.filename_selector(selector, name, attributes)
      css("", name.gsub(/__/, " "), attributes)     # same as css but selector based on modified-name instead
    end

    def self.filename_selector_style(attributes)
      css_style(attributes)
    end

    def self.filename_selector_comment(comment)
      css_comment(comment)
    end

  end
end

SpriteFactory.run!('images', :style => 'filename_selector',  ... my other options here ... )

@jakesgordon jakesgordon reopened this May 10, 2012

@jakesgordon

This comment has been minimized.

Show comment
Hide comment
@jakesgordon

jakesgordon May 10, 2012

Owner

You know, the minute I clicked OK on that comment I started to think a bit more about this... particularly the support it would allow for 'foo--hover.png' becoming 'foo:hover' selector...

... I might reconsider this, if we stick to a simple sensible convention it might be reasonable to just always support it..

  • -- becomes ':'
  • __ becomes ' '

Covers 80% of what might be needed.

I'm reopening for reconsideration.

Owner

jakesgordon commented May 10, 2012

You know, the minute I clicked OK on that comment I started to think a bit more about this... particularly the support it would allow for 'foo--hover.png' becoming 'foo:hover' selector...

... I might reconsider this, if we stick to a simple sensible convention it might be reasonable to just always support it..

  • -- becomes ':'
  • __ becomes ' '

Covers 80% of what might be needed.

I'm reopening for reconsideration.

jakesgordon added a commit that referenced this issue May 10, 2012

@jakesgordon

This comment has been minimized.

Show comment
Hide comment
@jakesgordon

jakesgordon May 11, 2012

Owner

This is included in master branch and new release of the sprite-factory gem (v1.5.0). You can read about it on codeincomplete.com

Owner

jakesgordon commented May 11, 2012

This is included in master branch and new release of the sprite-factory gem (v1.5.0). You can read about it on codeincomplete.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment