hermitage 0.0.2.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/CHANGELOG.md +10 -0
- data/README.md +41 -24
- data/app/assets/javascripts/hermitage.js.coffee +332 -182
- data/hermitage.gemspec +2 -2
- data/lib/generators/hermitage/templates/hermitage.rb +2 -2
- data/lib/hermitage/defaults.rb +6 -3
- data/lib/hermitage/version.rb +1 -1
- data/lib/hermitage/view_helpers.rb +5 -4
- data/spec/dummy/app/models/dummy.rb +5 -0
- data/spec/features/bottom_panel_spec.rb +28 -0
- data/spec/features/navigation_spec.rb +48 -20
- data/spec/features/resize_spec.rb +51 -0
- data/spec/features/scale_spec.rb +11 -11
- data/spec/features/viewer_customization_spec.rb +44 -78
- data/spec/features/viewer_spec.rb +1 -1
- data/spec/features_helper.rb +1 -1
- data/spec/lib/hermitage/defaults_spec.rb +3 -2
- data/spec/lib/hermitage/view_helpers_spec.rb +8 -2
- metadata +9 -5
@@ -6,33 +6,120 @@ root = exports ? this
|
|
6
6
|
|
7
7
|
# Hermitage options
|
8
8
|
root.hermitage =
|
9
|
+
looped: true
|
10
|
+
|
9
11
|
# Image viewer z-index property
|
10
|
-
|
12
|
+
default:
|
13
|
+
styles:
|
14
|
+
zIndex: 10
|
15
|
+
position: 'fixed'
|
16
|
+
top: 0
|
17
|
+
left: 0
|
18
|
+
width: '100%'
|
19
|
+
height: '100%'
|
11
20
|
|
12
21
|
# Darkening properties
|
13
22
|
darkening:
|
14
|
-
|
15
|
-
|
23
|
+
default:
|
24
|
+
attributes:
|
25
|
+
id: 'overlay'
|
26
|
+
styles:
|
27
|
+
position: 'absolute'
|
28
|
+
top: 0
|
29
|
+
left: 0
|
30
|
+
width: '100%'
|
31
|
+
height: '100%'
|
32
|
+
backgroundColor: '#000'
|
33
|
+
|
34
|
+
opacity: 0.85 # 0 if you don't want darkening
|
35
|
+
styles: {}
|
16
36
|
|
17
37
|
# Navigation buttons' properties
|
18
|
-
|
38
|
+
navigationButtons:
|
39
|
+
default:
|
40
|
+
styles:
|
41
|
+
position: 'absolute'
|
42
|
+
width: '50px'
|
43
|
+
height: '100%'
|
44
|
+
top: 0
|
45
|
+
cursor: 'pointer'
|
46
|
+
color: '#FAFAFA'
|
47
|
+
fontSize: '30px'
|
48
|
+
fontFamily: 'Tahoma,Arial,Helvetica,sans-serif'
|
49
|
+
textAlign: 'center'
|
50
|
+
verticalAlign: 'middle'
|
51
|
+
|
19
52
|
enabled: true
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
53
|
+
styles: {}
|
54
|
+
|
55
|
+
next:
|
56
|
+
default:
|
57
|
+
attributes:
|
58
|
+
id: 'navigation-right'
|
59
|
+
styles:
|
60
|
+
right: 0
|
61
|
+
styles: {}
|
62
|
+
text: '▶'
|
63
|
+
|
64
|
+
previous:
|
65
|
+
default:
|
66
|
+
attributes:
|
67
|
+
id: 'navigation-left'
|
68
|
+
styles:
|
69
|
+
left: 0
|
70
|
+
styles: {}
|
71
|
+
text: '◀'
|
24
72
|
|
25
73
|
# Close button properties
|
26
74
|
closeButton:
|
75
|
+
default:
|
76
|
+
attributes:
|
77
|
+
id: 'close-button'
|
78
|
+
styles:
|
79
|
+
position: 'absolute'
|
80
|
+
top: 0
|
81
|
+
right: 0
|
82
|
+
color: '#FFF'
|
83
|
+
fontSize: '30px'
|
84
|
+
fontFamily: 'Tahoma,Arial,Helvetica,sans-serif'
|
85
|
+
whiteSpace: 'nowrap'
|
86
|
+
cursor: 'pointer'
|
87
|
+
|
27
88
|
enabled: true
|
28
89
|
text: '×'
|
29
|
-
|
30
|
-
|
90
|
+
styles: {}
|
91
|
+
|
92
|
+
# Current image properties
|
93
|
+
image:
|
94
|
+
default:
|
95
|
+
attributes:
|
96
|
+
class: 'current'
|
97
|
+
styles:
|
98
|
+
cursor: 'pointer'
|
99
|
+
maxWidth: 'none' # Fix the conflict with Twitter Bootstrap
|
100
|
+
styles: {}
|
31
101
|
|
32
|
-
#
|
33
|
-
|
34
|
-
|
35
|
-
|
102
|
+
# Bottom panel (for text or anything else)
|
103
|
+
bottomPanel:
|
104
|
+
default:
|
105
|
+
attributes:
|
106
|
+
class: 'bottom-panel'
|
107
|
+
styles:
|
108
|
+
position: 'absolute'
|
109
|
+
bottom: 0
|
110
|
+
height: '70px'
|
111
|
+
styles: {}
|
112
|
+
|
113
|
+
text:
|
114
|
+
default:
|
115
|
+
attributes:
|
116
|
+
class: 'text'
|
117
|
+
styles:
|
118
|
+
width: '100%'
|
119
|
+
height: '100%'
|
120
|
+
textAlign: 'center'
|
121
|
+
color: '#FAFAFA'
|
122
|
+
styles: {}
|
36
123
|
|
37
124
|
# Minimum size of scaled image, px
|
38
125
|
minimumSize:
|
@@ -45,21 +132,33 @@ root.hermitage =
|
|
45
132
|
# Array of images of current gallery
|
46
133
|
images: []
|
47
134
|
|
135
|
+
# Array of texts for current gallery
|
136
|
+
texts: []
|
137
|
+
|
138
|
+
# Timeout before adjustig elements after window resize
|
139
|
+
resizeTimeout: 100
|
140
|
+
|
141
|
+
# Timer for resizing
|
142
|
+
resizeTimer: undefined
|
143
|
+
|
48
144
|
# Initializes the gallery on this page
|
49
145
|
init: ->
|
50
146
|
# Create Hermitage layer if it doesn't exist
|
51
147
|
if $('#hermitage').length is 0
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
148
|
+
$('<div>')
|
149
|
+
.attr('id', 'hermitage')
|
150
|
+
.css(hermitage.default.styles)
|
151
|
+
.hide()
|
152
|
+
.appendTo($('body'))
|
56
153
|
|
57
|
-
# Clear old images array
|
154
|
+
# Clear old images and texts array
|
58
155
|
hermitage.images.length = 0
|
156
|
+
hermitage.texts.length = 0
|
59
157
|
|
60
|
-
# Create new images array
|
158
|
+
# Create new images and texts array
|
61
159
|
$.each $('a[rel="hermitage"]'), ->
|
62
160
|
hermitage.images.push($(this).attr('href'))
|
161
|
+
hermitage.texts.push($(this).attr('title'))
|
63
162
|
|
64
163
|
# Set on click handlers to all elements that
|
65
164
|
# have 'hermitage' rel attribute
|
@@ -67,145 +166,142 @@ root.hermitage =
|
|
67
166
|
openGallery(this)
|
68
167
|
event.preventDefault()
|
69
168
|
|
169
|
+
# Set event on window resize
|
170
|
+
$(window).resize ->
|
171
|
+
clearTimeout(hermitage.resizeTimer) if hermitage.resizeTimer
|
172
|
+
hermitage.resizeTimer = setTimeout \
|
173
|
+
-> adjustImage(true),
|
174
|
+
hermitage.resizeTimeout
|
175
|
+
|
70
176
|
#
|
71
177
|
# Helpers
|
72
178
|
#
|
73
179
|
|
74
180
|
# Place element at the center of screen
|
75
|
-
center = (
|
76
|
-
|
77
|
-
element.css('top', "#{Math.max(0, ($(window).height() - $(element).outerHeight()) / 2)}px")
|
78
|
-
element.css('left', "#{Math.max(0, ($(window).width() - $(element).outerWidth()) / 2)}px")
|
79
|
-
element
|
80
|
-
|
81
|
-
#
|
82
|
-
# Hermitage logic
|
83
|
-
#
|
84
|
-
|
85
|
-
# Creates overlay layer, shows it and sets its click handler
|
86
|
-
createOverlay = ->
|
87
|
-
overlay = $('<div>', {id: 'overlay'})
|
88
|
-
$('#hermitage').append(overlay)
|
181
|
+
$.fn.center = (withAnimation = false, width = 0, height = 0, offsetX = 0, offsetY = 0) ->
|
182
|
+
this.css('position', 'absolute')
|
89
183
|
|
90
|
-
|
91
|
-
|
92
|
-
overlay.css('left', '0')
|
93
|
-
overlay.css('background', hermitage.darkening.color)
|
94
|
-
overlay.css('display', 'block')
|
95
|
-
overlay.css('opacity', hermitage.darkening.opacity)
|
96
|
-
overlay.css('filter', "alpha(opacity='#{hermitage.darkening.opacity * 100}')")
|
97
|
-
overlay.css('width', '100%')
|
98
|
-
overlay.css('height', '100%')
|
184
|
+
width = $(this).outerWidth() if width is 0
|
185
|
+
height = $(this).outerWidth() if height is 0
|
99
186
|
|
100
|
-
|
101
|
-
|
187
|
+
param =
|
188
|
+
top: "#{Math.max(0, ($(window).height() - height) / 2 + offsetY)}px"
|
189
|
+
left: "#{Math.max(0, ($(window).width() - width) / 2 + offsetX)}px"
|
102
190
|
|
103
|
-
|
191
|
+
if withAnimation
|
192
|
+
this.animate(param, { duration: hermitage.animationDuration, queue: false })
|
193
|
+
else
|
194
|
+
this.css(param)
|
104
195
|
|
105
|
-
|
196
|
+
$.fn.setSize = (width, height, withAnimation = false) ->
|
197
|
+
params = { width: width, height: height}
|
106
198
|
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
button.css('position', 'fixed')
|
113
|
-
button.css('width', "#{hermitage.navigationButton.width}px")
|
114
|
-
button.css('display', 'block')
|
115
|
-
button.css('cursor', 'pointer')
|
199
|
+
if withAnimation
|
200
|
+
this.animate(params, { duration: hermitage.animationDuration, queue: false })
|
201
|
+
else
|
202
|
+
this.css(params)
|
116
203
|
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
204
|
+
$.fn.maximizeLineHeight = (withAnimation = false) ->
|
205
|
+
param = { lineHeight: "#{this.outerHeight()}px" }
|
206
|
+
|
207
|
+
if withAnimation
|
208
|
+
this.animate(param, { duration: hermitage.animationDuration, queue: false })
|
209
|
+
else
|
210
|
+
this.css(param)
|
124
211
|
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
button.css('font', '30px Tahoma,Arial,Helvetica,sans-serif')
|
212
|
+
#
|
213
|
+
# Hermitage logic
|
214
|
+
#
|
129
215
|
|
130
|
-
|
216
|
+
# Creates darkening overlay, shows it and sets its click handler
|
217
|
+
createDarkening = ->
|
218
|
+
$('<div>')
|
219
|
+
.attr(hermitage.darkening.default.attributes)
|
220
|
+
.css(hermitage.darkening.default.styles)
|
221
|
+
.css('opacity', hermitage.darkening.opacity)
|
222
|
+
.css('filter', "alpha(opacity='#{hermitage.darkening.opacity * 100}')")
|
223
|
+
.css(hermitage.darkening.styles)
|
224
|
+
.appendTo($('#hermitage'))
|
225
|
+
.hide()
|
226
|
+
.fadeIn()
|
227
|
+
.click(closeGallery)
|
131
228
|
|
132
|
-
|
229
|
+
# Creates base navigation button and returns it
|
230
|
+
createNavigationButton = ->
|
231
|
+
$('<div>')
|
232
|
+
.appendTo($('#hermitage'))
|
233
|
+
.hide()
|
234
|
+
.css(hermitage.navigationButtons.default.styles)
|
235
|
+
.maximizeLineHeight()
|
236
|
+
.css(hermitage.navigationButtons.styles)
|
133
237
|
|
134
238
|
# Creates right navigation button and returns it
|
135
239
|
createRightNavigationButton = ->
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
button.css('-webkit-border-bottom-left-radius', '0')
|
143
|
-
button.css('-moz-border-bottom-left-radius', '0')
|
144
|
-
button.append('>')
|
145
|
-
|
146
|
-
button.click(showNextImage)
|
147
|
-
|
148
|
-
button
|
240
|
+
createNavigationButton()
|
241
|
+
.attr(hermitage.navigationButtons.next.default.attributes)
|
242
|
+
.css(hermitage.navigationButtons.next.default.styles)
|
243
|
+
.css(hermitage.navigationButtons.next.styles)
|
244
|
+
.text(hermitage.navigationButtons.next.text)
|
245
|
+
.click(showNextImage)
|
149
246
|
|
150
247
|
# Create left navigation button and returns it
|
151
248
|
createLeftNavigationButton = ->
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
button.css('-webkit-border-bottom-right-radius', '0')
|
159
|
-
button.css('-moz-border-bottom-right-radius', '0')
|
160
|
-
button.append('<')
|
161
|
-
|
162
|
-
button.click(showPreviousImage)
|
163
|
-
|
164
|
-
button
|
249
|
+
createNavigationButton()
|
250
|
+
.attr(hermitage.navigationButtons.previous.default.attributes)
|
251
|
+
.css(hermitage.navigationButtons.previous.default.styles)
|
252
|
+
.css(hermitage.navigationButtons.previous.styles)
|
253
|
+
.text(hermitage.navigationButtons.previous.text)
|
254
|
+
.click(showPreviousImage)
|
165
255
|
|
166
256
|
# Creates close button
|
167
257
|
createCloseButton = ->
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
258
|
+
$('<div>')
|
259
|
+
.appendTo($('#hermitage'))
|
260
|
+
.hide()
|
261
|
+
.attr(hermitage.closeButton.default.attributes)
|
262
|
+
.css(hermitage.closeButton.default.styles)
|
263
|
+
.text(hermitage.closeButton.text)
|
264
|
+
.css(hermitage.closeButton.styles)
|
265
|
+
.click(closeGallery)
|
266
|
+
|
267
|
+
createBotomPanel = ->
|
268
|
+
bottomPanel = $('<div>')
|
269
|
+
.appendTo($('#hermitage'))
|
270
|
+
.hide()
|
271
|
+
.attr(hermitage.bottomPanel.default.attributes)
|
272
|
+
.css(hermitage.bottomPanel.default.styles)
|
273
|
+
.css(hermitage.bottomPanel.styles)
|
274
|
+
|
275
|
+
text = $('<div>')
|
276
|
+
.appendTo(bottomPanel)
|
277
|
+
.attr(hermitage.bottomPanel.text.default.attributes)
|
278
|
+
.css(hermitage.bottomPanel.text.default.styles)
|
279
|
+
.css(hermitage.bottomPanel.text.styles)
|
280
|
+
|
281
|
+
# Shows original image of the chosen one
|
185
282
|
openGallery = (image) ->
|
186
|
-
$('#hermitage')
|
187
|
-
|
188
|
-
|
283
|
+
$('#hermitage')
|
284
|
+
.css('z-index', hermitage.zIndex)
|
285
|
+
.empty()
|
286
|
+
.show()
|
189
287
|
|
190
|
-
|
288
|
+
createDarkening()
|
191
289
|
createRightNavigationButton()
|
192
290
|
createLeftNavigationButton()
|
193
291
|
createCloseButton()
|
292
|
+
createBotomPanel()
|
194
293
|
|
195
|
-
showImage(
|
294
|
+
showImage(indexOfImage(image))
|
196
295
|
|
197
|
-
|
198
296
|
# Shows image with specified index from images array
|
199
297
|
showImage = (index) ->
|
200
|
-
# Create full size image at the center of screen
|
201
298
|
img = $('<img />')
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
$('#hermitage').append(img)
|
299
|
+
.attr(hermitage.image.default.attributes)
|
300
|
+
.css(hermitage.image.default.styles)
|
301
|
+
.attr('src', hermitage.images[index])
|
302
|
+
.css(hermitage.image.styles)
|
303
|
+
.hide()
|
304
|
+
.appendTo($('#hermitage'))
|
209
305
|
|
210
306
|
img.click (event) ->
|
211
307
|
if event.pageX >= $(window).width() / 2
|
@@ -213,38 +309,14 @@ showImage = (index) ->
|
|
213
309
|
else
|
214
310
|
showPreviousImage()
|
215
311
|
|
216
|
-
|
217
|
-
# center element and show it
|
218
|
-
$('<img />').attr('src', hermitage.images[index]).load ->
|
219
|
-
maxWidth = $(window).width() - (hermitage.windowPadding.x + $('#navigation-left').outerWidth() + hermitage.navigationButton.margin) * 2
|
220
|
-
maxHeight = $(window).height() - hermitage.windowPadding.y * 2
|
221
|
-
|
222
|
-
scale = 1.0
|
223
|
-
|
224
|
-
if maxWidth <= hermitage.minimumSize.width or maxHeight <= hermitage.minimumSize.height
|
225
|
-
if maxWidth < maxHeight
|
226
|
-
maxWidth = hermitage.minimumSize.width
|
227
|
-
maxHeight = maxWidth * (this.height / this.width)
|
228
|
-
else
|
229
|
-
maxHeight = hermitage.minimumSize.height
|
230
|
-
maxWidth = maxHeight * (this.width / this.height)
|
231
|
-
|
232
|
-
if this.width > maxWidth or this.height > maxHeight
|
233
|
-
scale = Math.min(maxWidth / this.width, maxHeight / this.height)
|
234
|
-
|
235
|
-
img.width(this.width * scale)
|
236
|
-
img.height(this.height * scale)
|
237
|
-
|
238
|
-
center(img)
|
239
|
-
img.fadeIn(hermitage.animationDuration)
|
240
|
-
adjustNavigationButtons(img)
|
241
|
-
adjustCloseButton(img)
|
312
|
+
adjustImage(false, img)
|
242
313
|
|
243
314
|
# Shows next image
|
244
315
|
showNextImage = ->
|
245
316
|
current = $('img.current')
|
246
317
|
if current.length is 1
|
247
|
-
index =
|
318
|
+
index = indexOfImage(current)
|
319
|
+
return unless canShowNextAfter(index)
|
248
320
|
hideCurrentImage()
|
249
321
|
if index < hermitage.images.length - 1
|
250
322
|
showImage(index + 1)
|
@@ -255,7 +327,8 @@ showNextImage = ->
|
|
255
327
|
showPreviousImage = ->
|
256
328
|
current = $('img.current')
|
257
329
|
if current.length is 1
|
258
|
-
index =
|
330
|
+
index = indexOfImage(current)
|
331
|
+
return unless canShowPreviousBefore(index)
|
259
332
|
hideCurrentImage()
|
260
333
|
if index > 0
|
261
334
|
showImage(index - 1)
|
@@ -274,49 +347,126 @@ closeGallery = ->
|
|
274
347
|
$('#hermitage :not(#overlay)').fadeOut()
|
275
348
|
$('#overlay').fadeOut hermitage.animationDuration, ->
|
276
349
|
$('#hermitage').hide()
|
277
|
-
|
350
|
+
.empty()
|
351
|
+
|
352
|
+
|
353
|
+
# Moves image to correct position and sets correct size.
|
354
|
+
# Then it calls adjusting methods for navigation and close buttons.
|
355
|
+
# Attributes:
|
356
|
+
# * `withAnimation` - boolean value determines if adjusting should be animated
|
357
|
+
# * `image` - currently opened image. It is optional argument and can be evaluated by the method itself.
|
358
|
+
adjustImage = (withAnimation = false, image = undefined) ->
|
359
|
+
|
360
|
+
if image is undefined
|
361
|
+
image = $('#hermitage img.current')
|
362
|
+
return unless image.length is 1
|
363
|
+
|
364
|
+
index = indexOfImage(image)
|
278
365
|
|
366
|
+
# Wait until source image is loaded
|
367
|
+
$('<img />').attr('src', hermitage.images[index]).load ->
|
368
|
+
|
369
|
+
# Offset for image position
|
370
|
+
offsetY = 0
|
371
|
+
|
372
|
+
maxWidth = $(window).width() - $('#navigation-left').outerWidth() - $('#navigation-right').outerWidth()
|
373
|
+
maxHeight = $(window).height()
|
374
|
+
|
375
|
+
text = hermitage.texts[index]
|
376
|
+
|
377
|
+
if text
|
378
|
+
offsetY = - $('#hermitage .bottom-panel').outerHeight() / 2
|
379
|
+
maxHeight -= $('#hermitage .bottom-panel').outerHeight()
|
380
|
+
|
381
|
+
$('#hermitage .bottom-panel .text').text(text or '')
|
382
|
+
|
383
|
+
if maxWidth <= hermitage.minimumSize.width or maxHeight <= hermitage.minimumSize.height
|
384
|
+
if maxWidth < maxHeight
|
385
|
+
maxWidth = hermitage.minimumSize.width
|
386
|
+
maxHeight = maxWidth * (this.height / this.width)
|
387
|
+
else
|
388
|
+
maxHeight = hermitage.minimumSize.height
|
389
|
+
maxWidth = maxHeight * (this.width / this.height)
|
390
|
+
|
391
|
+
scale = 1.0
|
392
|
+
|
393
|
+
if this.width > maxWidth or this.height > maxHeight
|
394
|
+
scale = Math.min(maxWidth / this.width, maxHeight / this.height)
|
395
|
+
|
396
|
+
image
|
397
|
+
.setSize(this.width * scale, this.height * scale, withAnimation)
|
398
|
+
.center(withAnimation, this.width * scale, this.height * scale, 0, offsetY)
|
399
|
+
.fadeIn(hermitage.animationDuration)
|
400
|
+
|
401
|
+
adjustNavigationButtons(withAnimation, image)
|
402
|
+
adjustCloseButton(withAnimation, image)
|
403
|
+
adjustBottomPanel(withAnimation)
|
279
404
|
|
280
405
|
# Moves navigation buttons to proper positions
|
281
|
-
adjustNavigationButtons = (current) ->
|
282
|
-
return unless hermitage.
|
406
|
+
adjustNavigationButtons = (withAnimation, current) ->
|
407
|
+
return unless hermitage.navigationButtons.enabled
|
283
408
|
|
284
|
-
previous = $('#navigation-left')
|
285
|
-
next = $('#navigation-right')
|
409
|
+
previous = $('#hermitage #navigation-left')
|
410
|
+
next = $('#hermitage #navigation-right')
|
286
411
|
|
287
|
-
|
288
|
-
|
289
|
-
|
290
|
-
height: current.outerHeight()
|
412
|
+
# Set correct styles
|
413
|
+
previous.maximizeLineHeight(withAnimation)
|
414
|
+
next.maximizeLineHeight(withAnimation)
|
291
415
|
|
292
|
-
|
293
|
-
top: current.position().top
|
294
|
-
left: current.position().left + current.outerWidth() + hermitage.navigationButton.margin
|
295
|
-
height: current.outerHeight()
|
416
|
+
# Show or hide buttons
|
296
417
|
|
297
|
-
|
298
|
-
|
299
|
-
|
418
|
+
currentIndex = indexOfImage(current)
|
419
|
+
|
420
|
+
duration = hermitage.animationDuration
|
421
|
+
|
422
|
+
if canShowPreviousBefore(currentIndex)
|
423
|
+
previous.fadeIn(duration)
|
424
|
+
else
|
425
|
+
previous.fadeOut(duration)
|
300
426
|
|
301
|
-
|
302
|
-
|
427
|
+
if canShowNextAfter(currentIndex)
|
428
|
+
next.fadeIn(duration)
|
429
|
+
else
|
430
|
+
next.fadeOut(duration)
|
303
431
|
|
304
432
|
# Moves close button to proper position
|
305
|
-
adjustCloseButton = (current) ->
|
433
|
+
adjustCloseButton = (withAnimation, current) ->
|
306
434
|
return unless hermitage.closeButton.enabled
|
435
|
+
button = $('#hermitage #close-button')
|
436
|
+
if button.css('display') is 'none'
|
437
|
+
button.fadeIn(hermitage.animationDuration)
|
307
438
|
|
308
|
-
|
439
|
+
adjustBottomPanel = (withAnimation) ->
|
440
|
+
panel = $('#hermitage .bottom-panel')
|
441
|
+
if panel.text() is ''
|
442
|
+
panel.fadeOut(hermitage.animationDuration)
|
443
|
+
else
|
444
|
+
params =
|
445
|
+
width: "#{$(window).width() - $('#navigation-left').outerWidth() - $('#navigation-right').outerWidth()}px"
|
446
|
+
left: "#{$('#navigation-left').position().left + $('#navigation-left').outerWidth()}px"
|
447
|
+
|
448
|
+
if withAnimation
|
449
|
+
panel.animate(params, { duration: hermitage.animationDuration, queue: false })
|
450
|
+
else
|
451
|
+
panel.css(params)
|
309
452
|
|
310
|
-
|
311
|
-
left = current.position().left + current.outerWidth() - button.outerWidth()
|
453
|
+
panel.fadeIn(hermitage.animationDuration)
|
312
454
|
|
313
|
-
|
314
|
-
|
315
|
-
|
316
|
-
button.fadeIn(hermitage.animationDuration)
|
455
|
+
indexOfImage = (image) ->
|
456
|
+
href = if $(image).prop('tagName') is 'IMG' then $(image).attr('src') else $(image).attr('href')
|
457
|
+
hermitage.images.indexOf(href)
|
317
458
|
|
318
|
-
|
319
|
-
|
459
|
+
canShowNextAfter = (index) ->
|
460
|
+
if index < hermitage.images.length - 1
|
461
|
+
true
|
462
|
+
else
|
463
|
+
hermitage.looped
|
464
|
+
|
465
|
+
canShowPreviousBefore = (index) ->
|
466
|
+
if index > 0
|
467
|
+
true
|
468
|
+
else
|
469
|
+
hermitage.looped
|
320
470
|
|
321
471
|
# Initialize gallery on page load
|
322
472
|
$(document).ready(hermitage.init)
|
data/hermitage.gemspec
CHANGED
@@ -8,8 +8,8 @@ Gem::Specification.new do |spec|
|
|
8
8
|
spec.version = Hermitage::VERSION
|
9
9
|
spec.authors = ['Alexander Borovykh']
|
10
10
|
spec.email = ['immaculate.pine@gmail.com']
|
11
|
-
spec.description = %q{Ruby library for
|
12
|
-
spec.summary = %q{Ruby library for
|
11
|
+
spec.description = %q{Ruby library for image galleries generation.}
|
12
|
+
spec.summary = %q{Ruby library for image galleries generation (thumbnails and original images viewer).}
|
13
13
|
spec.homepage = 'https://github.com/ImmaculatePine/hermitage'
|
14
14
|
spec.license = 'MIT'
|
15
15
|
|
@@ -4,8 +4,8 @@
|
|
4
4
|
# You can configure any of its options and they will be applied for every rendering.
|
5
5
|
#
|
6
6
|
# Hermitage.configs[:default].merge!({
|
7
|
-
#
|
8
|
-
#
|
7
|
+
# original: 'file.url',
|
8
|
+
# thumbnail: 'file.url(:thumbnail)',
|
9
9
|
# list_tag: :ul,
|
10
10
|
# item_tag: :li,
|
11
11
|
# list_class: 'thumbnails',
|
data/lib/hermitage/defaults.rb
CHANGED
@@ -1,10 +1,13 @@
|
|
1
1
|
module Hermitage
|
2
2
|
module Defaults
|
3
|
-
# Model's attribute (or method) that returns the path to the
|
4
|
-
|
3
|
+
# Model's attribute (or method) that returns the path to the original image
|
4
|
+
ORIGINAL = 'file.url'
|
5
5
|
|
6
6
|
# Model's attribute (or method) that returns the path to the image's thumbnail
|
7
|
-
|
7
|
+
THUMBNAIL = 'file.url(:thumbnail)'
|
8
|
+
|
9
|
+
# Model's attribute (or method) that returns title or description of image
|
10
|
+
TITLE = nil
|
8
11
|
|
9
12
|
# Wrapper for the whole gallery
|
10
13
|
LIST_TAG = :ul
|
data/lib/hermitage/version.rb
CHANGED