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

Gallery breaks with AngularJS urls (or any url with # in it) #161

Closed
klamping opened this Issue Jul 14, 2014 · 4 comments

Comments

Projects
None yet
2 participants
@klamping
Copy link

klamping commented Jul 14, 2014

In the default Angular mode, the images in the gallery don't show correctly. The reason is that Angular will use a hashtag for the url (e.g. http://rackerlabs.github.io/encore-ui/#/component/hotkeys) and the folder path for the images is built off of that URL. Wraith then references the url with that hashtag in it, which the browser treats as a fragment identifier, not as a full url:

Original URL:
http://rackerlabs.github.io/encore-ui/#/component/hotkeys
Filename:
/shots/__#__component__hotkeys/1024_phantomjs_diff.png
Img src:

<img class="short-screenshot img-thumbnail" src="thumbnails/__#__component__hotkeys/1024_phantomjs_diff.png">

To fix this, I think a simple substitution of # with the encoded entity (%23) will work (it does when I manually change the generated HTML).

@dblooman

This comment has been minimized.

Copy link
Contributor

dblooman commented Jul 14, 2014

Could I see your config file, I want to be able to reproduce the bug

@dblooman dblooman added the bug label Jul 14, 2014

@klamping

This comment has been minimized.

Copy link

klamping commented Jul 14, 2014

Sure thing. I test against a local environment, so it won't work locally w/o setting it up.

#Headless browser option
browser:
  webkit: "phantomjs"
  # gecko: "slimerjs"

#If you want to have multiple snapping files, set the file name here
snap_file: "javascript/snap.js"

# Type the name of the directory that shots will be stored in
directory:
  - 'shots'

# Add only 2 domains, key will act as a label
domains:
  local: "http://localhost:9001"
  live: "http://rackerlabs.github.io/encore-ui"

#Type screen widths below, here are a couple of examples
screen_widths:
  - 1024

# If you don't want to name the paths explicitly you can use a yaml
# collection as follows, and names will be derived by replacing / with _

paths:
 - '/#/overview'
 - '/#/component/configs'
 - '/#/component/hotkeys'

#Amount of fuzz ImageMagick will use
fuzz: '20%'

#Set the number of days to keep the site spider file
spider_days:
  - 10
@klamping

This comment has been minimized.

Copy link

klamping commented Jul 14, 2014

It's an ugly hack, but this code in gallery_template.erb works:

<a href="<%=file[:filename].sub! '#', '%23'%>">
    <img class="short-screenshot img-thumbnail" src="<%=path%><%=file[:thumb].sub! '#', '%23'%>">
</a>

Have to do the same thing for the thumbnails as well. Unfortunately I don't know enough Ruby to have a better solution just yet (trying to figure out where in the gallery.rb file this would fit).

@klamping

This comment has been minimized.

Copy link

klamping commented Jul 16, 2014

Okay, just realized there is a much simpler solution/workaround to this issue, and that is to name the urls to be validated:

paths:
  home: '/#/overview'
  configs: '/#/component/configs'
  hotkeys: '/#/component/hotkeys'

Doing that solves the problem. Feel free to close this issue if you'd like.

@dblooman dblooman closed this Jul 23, 2014

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