alongslide 0.9.5 → 0.9.6
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
NjU4NGUyNzU1ODFlNDYxZWY1YWI4MWMzYzAzODY5Yzc2ZDkxNjJhNQ==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
ZmUyNjc5YzMyZGNiNjBiZDM2YzhkODZmNmQwMjY1OThjNDBhZGMzZg==
|
7
7
|
SHA512:
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
NTU1YWZmMzUwNDBkMjVmMGI2OWIzYTk4NTIyNzE4OWE0NjlhYThjN2IxZWI1
|
10
|
+
YzdhZDQ3ZWFkZTMxMTFiM2EwY2MxOWYyZTc2YzExNmExYzJhNGFhNjJjNjFj
|
11
|
+
YTY3ZGFiZmZkYTk0YmY2ZDNmYTQ0OTBmYmQ2N2NkNjQzMmViZDc=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
ZDljNmZiNzRiNWVjYjgzYzE2ZWQzNDg2YzljZTEyNjQyNDI2MWEwZjY0NmQ3
|
14
|
+
OGRmNGViNGMwMGZmYjg3YzY3NmZhZDhkOGQ5NzMzNjU1MWE0ZDYwM2I5OTRm
|
15
|
+
YjhkODFlNjU3YzllOWFlODIyNWRkNDlhNzNiMmU1ODdmNDk0MTc=
|
data/README.md
CHANGED
@@ -32,48 +32,11 @@ The gem includes both the Ruby and frontend components.
|
|
32
32
|
|
33
33
|
## Usage
|
34
34
|
|
35
|
-
|
36
|
-
|
37
|
-
```erb
|
38
|
-
<article id="frames">
|
39
|
-
<div class="backgrounds"></div>
|
40
|
-
<div class="flow"></div>
|
41
|
-
<div class="panels"></div>
|
42
|
-
</article>
|
43
|
-
<div id="content" style="display: none">
|
44
|
-
<%= Alongslide::render(your_markdown_string) %>
|
45
|
-
</div>
|
46
|
-
```
|
47
|
-
|
48
|
-
Where `your_markdown_string` is a string of Alongslide-flavored Markdown.
|
49
|
-
|
50
|
-
Note that the Alongslide HTML is rendered into a hidden DOM element. The empty
|
51
|
-
elements above are there for Alongslide's JS to write into.
|
52
|
-
|
53
|
-
Then, once the page is loaded and ready, you can kick off the Alongslide render:
|
54
|
-
|
55
|
-
```javascript
|
56
|
-
MIN_WINDOW_WIDTH = 980
|
57
|
-
window.alongslide = new Alongslide({
|
58
|
-
source: '#content',
|
59
|
-
to: '#frames'
|
60
|
-
})
|
61
|
-
frameAspect = FixedAspect.prototype.fitFrame(MIN_WINDOW_WIDTH)
|
62
|
-
window.alongslide.render(frameAspect, function({
|
63
|
-
FixedAspect.prototype.fitPanels(frameAspect)
|
64
|
-
}))
|
65
|
-
```
|
35
|
+
The best introduction to using Alongslide is by checking out the demo Rails app:
|
66
36
|
|
67
|
-
|
68
|
-
_all_ styles and webfonts be loaded in browser memory before the Alongslide
|
69
|
-
render begins. For that reason, it is recommend that you use the included
|
70
|
-
`Styles.prototype.doLoad()` utility to force CSS to load (by loading it via
|
71
|
-
Ajax and writing it to the DOM) and/or a tool such as
|
72
|
-
[webfontloader](https://github.com/typekit/webfontloader).
|
37
|
+
https://github.com/triplecanopy/alongslide-demo
|
73
38
|
|
74
|
-
|
75
|
-
to update just the scroll positioning (after a window resize for example) without
|
76
|
-
incurring the full cost of doing the layout over again.
|
39
|
+
This app demonstrates the minimum views, JS, and CSS needed to build an Alongslide site.
|
77
40
|
|
78
41
|
### Creating custom templates
|
79
42
|
|
data/alongslide.gemspec
CHANGED
@@ -46,7 +46,8 @@ class Alongslide
|
|
46
46
|
# @param frameAspect - bounding box computed by FixedAspect
|
47
47
|
# @param postRenderCallback - to be called when layout returns
|
48
48
|
#
|
49
|
-
render: (
|
49
|
+
render: (postRenderCallback) ->
|
50
|
+
frameAspect = FixedAspect.prototype.fitFrame(@layout.FRAME_WIDTH)
|
50
51
|
@layout.render (lastFramePosition) =>
|
51
52
|
|
52
53
|
@lastFramePosition = lastFramePosition
|
@@ -59,12 +60,15 @@ class Alongslide
|
|
59
60
|
$(document).triggerHandler 'alongslide.ready', @frames
|
60
61
|
|
61
62
|
@hashToPosition()
|
63
|
+
FixedAspect.prototype.fitPanels(frameAspect)
|
62
64
|
postRenderCallback()
|
63
65
|
|
64
66
|
# Refresh Skrollr only on resize events, as it's fast.
|
65
67
|
#
|
66
|
-
refresh:
|
68
|
+
refresh: ->
|
69
|
+
frameAspect = FixedAspect.prototype.fitFrame(@layout.FRAME_WIDTH)
|
67
70
|
@scrolling.render(frameAspect, @lastFramePosition)
|
71
|
+
FixedAspect.prototype.fitPanels(frameAspect)
|
68
72
|
|
69
73
|
hashToPosition: ->
|
70
74
|
hash = window.location.hash
|
@@ -21,6 +21,9 @@ class Alongslide::Layout
|
|
21
21
|
IN_POINT_KEY: 'als-in-position'
|
22
22
|
OUT_POINT_KEY: 'als-out-position'
|
23
23
|
|
24
|
+
# Corresponds to $fixed-frame-width in alongslide.sass
|
25
|
+
FRAME_WIDTH: 980
|
26
|
+
|
24
27
|
# Pixel width of each frame == screen width.
|
25
28
|
#
|
26
29
|
frameWidth: $(window).width()
|
@@ -205,7 +205,7 @@ class Alongslide::Scrolling
|
|
205
205
|
|
206
206
|
# x translate
|
207
207
|
translateBy = (offset - direction) * scale
|
208
|
-
translateByPx = Math.round(translateBy * Math.max($(window).width(),
|
208
|
+
translateByPx = Math.round(translateBy * Math.max($(window).width(), alongslide.layout.FRAME_WIDTH))
|
209
209
|
styles["#{prefix.css}transform"] =
|
210
210
|
"translate(#{translateByPx}px, 0) translateZ(0)"
|
211
211
|
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: alongslide
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.9.
|
4
|
+
version: 0.9.6
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Adam Florin
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2014-06-
|
12
|
+
date: 2014-06-29 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: redcarpet
|