Skip to content
This repository
  • 3 commits
  • 2 files changed
  • 0 comments
  • 1 contributor

Showing 2 changed files with 103 additions and 109 deletions. Show diff stats Hide diff stats

  1. +1 1  src/index.html
  2. +102 108 src/js/flickr-coverflow.coffee
2  src/index.html
@@ -18,7 +18,7 @@
18 18 <script src="../lib/zepto.min.js"></script>
19 19 <script src="../lib/zepto.clone.fix.js"></script>
20 20 <!--<script src="js/log.coffee" type="text/coffeescript"></script>-->
21   - <script src="../lib/flickr-coverflow.min.js"></script>
  21 + <script src="js/flickr-coverflow.coffee" type="text/coffeescript"></script>
22 22 <script src="js/application.coffee" type="text/coffeescript"></script>
23 23 <script src="../lib/coffee-script.js"></script>
24 24 </head>
210 src/js/flickr-coverflow.coffee
@@ -3,6 +3,7 @@ if Logger? then log = new Logger level:LogLevel.INFO
3 3
4 4 # Classes
5 5
  6 +
6 7 class FlickrCoverFlowStyle
7 8
8 9 layouts =
@@ -24,48 +25,47 @@ class FlickrCoverFlowStyle
24 25 width:"960px"
25 26 imgMaxWidth:"215px"
26 27 urlZoom: "url_m"
  28 +
  29 + prefixes = [
  30 + "-webkit-"
  31 + "-moz-"
  32 + "-o-"
  33 + "-ms-"
  34 + ""
  35 + ]
27 36
28   - transform = (transformations) ->
29   - """
30   - transform: #{transformations};
31   - -moz-transform: #{transformations}; /* Firefox */
32   - -webkit-transform: #{transformations}; /* Safari, Chrome */
33   - -o-transform: #{transformations}; /* Opera */
34   - -ms-transform: #{transformations}; /* ie 10 */
35   - """
36   -
37   - positionsFlat = []
38   -
39   - positions3D = []
40   -
  37 + transform = (transformations) -> ("#{prefix}transform: #{transformations};" for prefix in prefixes).join "\n"
  38 +
  39 + positions = []
  40 +
41 41 style3d:-> """
42 42 <style>
43 43 .flickrCoverflow-image[data-position='0'] {
44   - #{transform "scale(.2) translateX(#{@position 0, '3D'}) translateZ(0) perspective(0) rotateY(0)"};
  44 + #{transform "perspective(700px) scale(.2) translateZ(0) rotateY(0)"}
45 45 }
46 46
47 47 .flickrCoverflow-image[data-position='1'] {
48   - #{transform "scale(.6) translateX(0) translateZ(#{@position 1, '3D'}) perspective(700) rotateY(45deg)"};
  48 + #{transform "perspective(700px) scale(.65) translateZ(0) rotateY(45deg)"}
49 49 }
50 50
51 51 .flickrCoverflow-image[data-position='2'] {
52   - #{transform "scale(.8) translateX(#{@position 2, '3D'}) translateZ(100px) perspective(500) rotateY(45deg)"};
  52 + #{transform "perspective(500px) scale(.65) translateZ(100px) rotateY(45deg)"}
53 53 }
54 54
55 55 .flickrCoverflow-image[data-position='3'] {
56   - #{transform "scale(1) translateX(#{@position 3, '3D'}) translateZ(200px) perspective(0) rotateY(0deg)"};
  56 + #{transform "perspective(0) scale(1) translateZ(200px) rotateY(0deg)"}
57 57 }
58 58
59 59 .flickrCoverflow-image[data-position='4'] {
60   - #{transform "scale(.8) translateX(#{@position 4, '3D'}) translateZ(100px) perspective(500) rotateY(-45deg)"};
  60 + #{transform "perspective(500px) scale(.65) translateZ(100px) rotateY(-45deg)"}
61 61 }
62 62
63 63 .flickrCoverflow-image[data-position='5'] {
64   - #{transform "scale(.6) translateX(#{@position 5, '3D'}) translateZ(0) perspective(700) rotateY(-45deg)"};
  64 + #{transform "perspective(700px) scale(.65) translateZ(0) rotateY(-45deg)"}
65 65 }
66 66
67 67 .flickrCoverflow-image[data-position='6'] {
68   - #{transform "scale(.2) translateX(#{@position 6, '3D'}) translateZ(0) perspective(0) rotateY(0)"};
  68 + #{transform "perspective(700px) scale(.2) translateZ(0) rotateY(0)"}
69 69 }
70 70
71 71 .flickrCoverflow-previous,
@@ -144,41 +144,41 @@ class FlickrCoverFlowStyle
144 144 .flickrCoverflow-image[data-position='0'] {
145 145 z-index: 0;
146 146 opacity: 0;
147   - #{transform "translateX(#{@position 0})"}
  147 + margin-left: #{@position 0};
148 148 }
149 149
150 150 .flickrCoverflow-image[data-position='1'] {
151 151 z-index: 1;
152   - #{transform "translateX(#{@position 1})"}
  152 + margin-left: #{@position 1};
153 153 }
154 154
155 155 .flickrCoverflow-image[data-position='2'] {
156 156 z-index: 2;
157 157 box-shadow: 0 0 10px #000;
158   - #{transform "translateX(#{@position 2})"}
  158 + margin-left: #{@position 2};
159 159 }
160 160
161 161 .flickrCoverflow-image[data-position='3'] {
162 162 z-index: 4;
163 163 box-shadow: 0 0 20px #000;
164   - #{transform "translateX(#{@position 3})"}
  164 + margin-left: #{@position 3};
165 165 }
166 166
167 167 .flickrCoverflow-image[data-position='4'] {
168 168 z-index: 2;
169 169 box-shadow: 0 0 10px #000;
170   - #{transform "translateX(#{@position 4})"}
  170 + margin-left: #{@position 4};
171 171 }
172 172
173 173 .flickrCoverflow-image[data-position='5'] {
174 174 z-index: 1;
175   - #{transform "translateX(#{@position 5})"}
  175 + margin-left: #{@position 5};
176 176 }
177 177
178 178 .flickrCoverflow-image[data-position='6'] {
179 179 z-index: 0;
180 180 opacity: 0;
181   - #{transform "translateX(#{@position 6})"}
  181 + margin-left: #{@position 6};
182 182 }
183 183
184 184 /***/
@@ -189,12 +189,11 @@ class FlickrCoverFlowStyle
189 189 }
190 190 </style>
191 191 """
192   -
193   - position: (position, depth = "Flat") ->
  192 +
  193 + position: (position) ->
194 194 throw new Error "position must be a not null Number" if position?.constructor isnt Number
195   - positions = if depth is "3D" then positions3D else positionsFlat
196 195 log?.debug "positions: #{positions}"
197   - log?.debug "calculating position(#{position}, #{depth}) = #{positions[position]}"
  196 + log?.debug "calculating position(#{position}) = #{positions[position]}"
198 197 positions[position]
199 198
200 199 width: -> layouts[@size].width
@@ -202,56 +201,45 @@ class FlickrCoverFlowStyle
202 201 url: -> layouts[@size].url
203 202 urlZoom: -> layouts[@size].urlZoom
204 203 maxWidth: -> layouts[@size].imgMaxWidth
205   -
  204 +
206 205 constructor: (@size, @containerSelector, @renderIn3D = false) ->
207 206 throw new Error "#{@size} is not a valid flickr-coverflow size" if !layouts[@size]
208 207 throw new Error "#{@containerSelector} is not a valid css selector" if !@containerSelector or !$(@containerSelector)
209 208 log?.info "Render in 3D: #{@renderIn3D}"
210   -
  209 +
211 210 Number.prototype.percentOf = (width) ->
212   - throw new Error "width cannot be null or empty" if !width
  211 + throw new Error "width cannot be null or empty" if not width
213 212 units = width.replace /\d*/, ""
214 213 value = parseInt(width)
215   - "#{Math.round((@/100)*value)}#{units}"
216   -
217   - positions3D = [
218   - 0
219   - 0
220   - 20.percentOf @width() #"96px"
221   - 35.percentOf @width() #"168px"
222   - 65.percentOf @width() #"312px"
223   - 115.percentOf @width() #"552px"
224   - 115.percentOf @width() #"552px"
225   - ]
  214 + "#{Math.round((@ / 100)*value)}#{units}"
226 215
227   - positionsFlat = [
  216 + positions = [
228 217 0
229 218 0
230   - 20.percentOf @width() #"96px"
231   - 35.percentOf @width() #"168px"
232   - 50.percentOf @width() #"241px"
233   - 70.percentOf @width() #"337px"
234   - 70.percentOf @width() #"337px"
  219 + 15.percentOf @width()
  220 + 35.percentOf @width()
  221 + 55.percentOf @width()
  222 + 70.percentOf @width()
  223 + 70.percentOf @width()
235 224 ]
236 225
237 226 delete Number.prototype.percentOf
238 227
239   - log?.debug "positions3D: #{positions3D}"
240   - log?.debug "positionsFlat: #{positionsFlat}"
241   -
  228 + log?.debug "positions: #{positions}"
  229 +
242 230 apply: ->
243 231 log?.debug "about to apply required style"
244 232 head = $("head")
245 233 head.prepend @style3d() if @renderIn3D
246 234 head.prepend(
247   - """
248   - <style>
249   - .flickrCoverflow-img {
250   - max-width: #{@maxWidth()};
251   - }
252   - </style>
253   - """
254   - )
  235 + """
  236 + <style>
  237 + .flickrCoverflow-img {
  238 + max-width: #{@maxWidth()};
  239 + }
  240 + </style>
  241 + """
  242 + )
255 243 head.prepend @style()
256 244
257 245
@@ -272,7 +260,7 @@ class FlickrCoverFlow
272 260 nextButton: ".flickrCoverflow-next"
273 261 pageSize: 7
274 262 source: "http://www.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&format=json&nojsoncallback=1&extras=url_t,url_s,url_m"
275   -
  263 +
276 264 constructor: (@apiKey, @user, @htmlNode, @options = size:"tiny") ->
277 265 log?.info "Coverflow html node: <#{@htmlNode.prop? 'tagName'}:#{@htmlNode.selector}/>"
278 266 throw new Error "page size must be odd, actual = #{@pageSize}" if @pageSize % 2 == 0
@@ -281,29 +269,29 @@ class FlickrCoverFlow
281 269 @createImageTemplate()
282 270 @style = new FlickrCoverFlowStyle @options.size, @htmlNode.selector, @options.renderIn3D
283 271 @style.apply()
284   -
  272 +
285 273 @offset = @startX = 0
286 274 @photos = []
287 275 @page = 1
288   - @median = (@pageSize - 1)/2
  276 + @median = (@pageSize - 1) / 2
289 277 @medianImage = ".flickrCoverflow-image[data-position='#{@median}']"
290 278 @source += "&api_key=#{@apiKey}&user_id=#{@user}&per_page=#{@pageSize*2}"
291 279 @attachEvents()
292   - log?.trace "#{property}: #{value}" for property, value of @ if logLevelIsTrace?()
293   - log?.trace "@htmlNode properties: \n#{property}: #{value}" for property, value of @htmlNode if logLevelIsTrace?()
294   -
  280 + log?.trace("#{property}: #{value}") for property, value of @ if logLevelIsTrace?()
  281 + log?.trace("@htmlNode properties: \n#{property}: #{value}") for property, value of @htmlNode if logLevelIsTrace?()
  282 +
295 283 version: -> version
296 284
297 285 createImageTemplate: ->
298 286 @htmlNode.html """
299   - <div class="flickrCoverflow-previous"></div>
300   - <div class="flickrCoverflow-next"></div>
301   - <div class="flickrCoverflow-image" data-template="yes">
302   - <img class="flickrCoverflow-img" src="#{pendingImageSrc}"/>
303   - <div class="flickrCoverflow-title">No title</div>
304   - </div>
305   - """
306   -
  287 + <div class="flickrCoverflow-previous"></div>
  288 + <div class="flickrCoverflow-next"></div>
  289 + <div class="flickrCoverflow-image" data-template="yes">
  290 + <img class="flickrCoverflow-img" src="#{pendingImageSrc}"/>
  291 + <div class="flickrCoverflow-title">No title</div>
  292 + </div>
  293 + """
  294 +
307 295 load: ->
308 296 pageSource = "#{@source}&page=#{@page}"
309 297 log?.info "load > Page source: #{pageSource}"
@@ -323,7 +311,7 @@ class FlickrCoverFlow
323 311
324 312 @photos.push photo for photo in data.photos.photo
325 313 log?.debug "#{@photos.length} loaded"
326   - log?.debug "#{data.photos.total} photos to handle"
  314 + log?.debug "#{data.photos.total} photos to handle"
327 315 visibleImages = @photos[@offset...@pageSize]
328 316 @appendPhoto(photo) for photo in visibleImages
329 317 @setImagesPosition()
@@ -368,22 +356,25 @@ class FlickrCoverFlow
368 356 @attachNextEvent()
369 357 @attachPreviousEvent()
370 358
371   - attachNextEvent: -> $(@nextButton, @htmlNode).on("mousedown", =>@next()).css("cursor", "pointer")
  359 + attachNextEvent: -> $(@nextButton, @htmlNode).bind("mousedown", =>@next()).css("cursor", "pointer")
372 360
373   - attachPreviousEvent: -> $(@previousButton, @htmlNode).on("mousedown", =>@previous()).css("cursor", "pointer")
  361 + attachPreviousEvent: -> $(@previousButton, @htmlNode).bind("mousedown", =>@previous()).css("cursor", "pointer")
374 362
375 363 addZoomEvent: ->
376 364 triggeringEvent = if isMobile() then "tap" else "click"
377 365 log?.debug "median image selector: '#{@medianImage}'"
378 366 trigerringElement = $(@medianImage, @htmlNode).css "cursor":"pointer"
379   - trigerringElement.on triggeringEvent, =>
380   - log?.debug "about to trigger 'zoom' event"
381   - @htmlNode.trigger (
382   - $.Event(
383   - "zoom"
384   - { zoomUrl: trigerringElement.attr "data-zoom-url" }
385   - )
386   - )
  367 + trigerringElement.bind(
  368 + triggeringEvent
  369 + =>
  370 + log?.debug "about to trigger 'zoom' event"
  371 + @htmlNode.trigger (
  372 + $.Event(
  373 + "zoom"
  374 + { zoomUrl: trigerringElement.attr "data-zoom-url" }
  375 + )
  376 + )
  377 + )
387 378
388 379 hasNext: -> @photos[@offset+@pageSize]
389 380
@@ -433,10 +424,10 @@ class FlickrCoverFlow
433 424
434 425 appendNextPhotoIfAny: ->
435 426 if nextPhoto = @hasNext()
436   - log?.debug "photo '#{nextPhoto.title}' exists at index #{@offset+@pageSize}"
437   - @offset++
438   - @appendPhoto nextPhoto
439   - @loadNewPageIfPageChanged()
  427 + log?.debug "photo '#{nextPhoto.title}' exists at index #{@offset+@pageSize}"
  428 + @offset++
  429 + @appendPhoto nextPhoto
  430 + @loadNewPageIfPageChanged()
440 431
441 432 setImagesPosition: ->
442 433 for image, position in $(".flickrCoverflow-image[data-show='yes']")
@@ -460,52 +451,55 @@ class FlickrCoverFlow
460 451 endX = event.targetTouches[0].pageX
461 452 @deltaX = endX - @startX
462 453 log?.trace "@deltaX: #{@deltaX}"
463   -
  454 +
464 455 if @deltaX > touchMoveStep
465 456 log?.debug "@deltaX before previous(): #{@deltaX}"
466 457 @startX = endX
467 458 @deltaX = 0
468 459 @previous()
469 460 log?.debug "@deltaX after previous(): #{@deltaX}"
470   -
  461 +
471 462 if @deltaX < -touchMoveStep
472 463 log?.debug "@deltaX before next(): #{@deltaX}"
473 464 @startX = endX
474 465 @deltaX = 0
475 466 @next()
476 467 log?.debug "@deltaX after next(): #{@deltaX}"
477   -
  468 +
  469 +
478 470 attachTouchEvents: ->
479 471 log?.debug "attaching touch events"
480 472 log?.debug "@htmlNode.id: #{@htmlNode.attr 'id'}"
481 473
482   - @htmlNode.on "touchstart", (event) =>
483   - @startX = event.targetTouches[0].pageX
484   - log?.debug "@startX: #{@startX}"
485   -
486   - @htmlNode.on "touchmove", (event) =>@touchMoveHandler()
487   - @htmlNode.on "touchend", => @deltaX = 0
  474 + @htmlNode.bind "touchstart", (event) =>
  475 + @startX = event.targetTouches[0].pageX
  476 + log?.debug "@startX: #{@startX}"
  477 +
  478 + @htmlNode.bind "touchmove", (event) =>@touchMoveHandler()
  479 + @htmlNode.bind "touchend", => @deltaX = 0
  480 +
488 481
489 482
490 483 # The jQuery plugin
491 484
  485 +
492 486 do ($) ->
493 487 $.fn.flickrCoverflow = (apiKey, user, options = size:"tiny") ->
494 488 log?.info "Using flickrCoverflow jQuery plugin"
495 489
496   - if this.css("display") != "none"
  490 + if @.css("display") != "none"
497 491 coverflow = new FlickrCoverFlow(
498   - apiKey
499   - user
500   - this
501   - options
502   - )
  492 + apiKey
  493 + user
  494 + @
  495 + options
  496 + )
503 497
504 498 coverflow.load()
505 499
506 500 log?.info "flickrCoverflow selector: #{coverflow.htmlNode.selector}"
507 501 else
508   - log?.info "#{this.attr 'id'} is not visible, no need to create coverflow"
  502 + log?.info "#{@.attr 'id'} is not visible, no need to create coverflow"
509 503
510   - this
  504 + @
511 505

No commit comments for this range

Something went wrong with that request. Please try again.