Mosaiqy
The method runs the animation and check some private variables to allow cycle and animation execution. Every time the animation has completed successfully, the JSON index and node collection are updated.
Animation interval is not executed on mouse enter (_animationPaused) or when animation is still running.
- The direction of movement (css property)
- The selection of nodes to move (i.e in a 3x4 grid, point 4 and 5 have to move images 2,6,10)
- The position in which we want to inject-before the new element (except for the last element which needs to be injected after)
- The position (top and left properties) of entry tile
[0,8,1,9,2,10,3,11, 0,4,4,8,8,12*] * = append after
0 2 4 6
8 |_0_|_1_|_2_|_3_| 9
10 |_4_|_5_|_6_|_7_| 11
12 |_8_|_9_|_10|_11| 13
1 3 5 7
In earlier versions of this algorithm, the order of nodes was counterclockwise (tlbr) and then alternating (tblr). Now this enumeration pattern (alternating tb and lr) performs a couple of improvements on code logic and on readability:
- Given an even-indexed node, the next adjacent index has the same selector:
e.g. points[8] = li:nth-child(n+1):nth-child(-n+4) [0123]
points[9] = li:nth-child(n+1):nth-child(-n+4) [0123]
(it's easier to retrieve this information) - If a random point is even (i & 1 === 0) then the 'direction' property of node selection is going to be increased during slide animation. Otherwise is going to be decreased and then we remove first or last element (if random number is 9, then the collection has to be [3210] and not [0123], since we always remove the disappeared node when the animation has completed.)
Another Example (4x2) [0,6,1,7, 0,2,2,4,4,6,6,8*] * = append after 0 2 4 |_0_|_1_| 5 6 |_2_|_3_| 7 8 |_4_|_5_| 9 10 |_6_|_7_| 11 1 3
The main purpose is to correctly increment the indexData for the JSON data retrieval. If user choosed "avoidDuplicate" option, then the method checks if a requested image is already on stage. If so, a loop starts looking for the first image not in stage, increasing the dataIndex.
This method manages the zoom main events by some scoped internal functions.
closeZoom
is called when user clicks on "Close" button over a zoom
image or when another thumbanail is choosed and another zoom is currently opened.
The function stops all running transitions (if any) and it closes the zoom container
while changing opacity of some elements (close button, image caption). At the end of
animation it removes some internal classes and the «li» node that contained the zoom.
The function closeZoom
returns a deferred promise object, so it can be
called in a synchronous code queue inside other functions, ensuring all operation have
been successfully completed.
viewZoom
is called when the previous function createZoom
successfully created the zoom container into the DOM. The function creates the zoom image
and the closing button binding the click event. If image is not in cache the zoom is opened
with a slideDown effect with a waiting loader.
createZoom
calls the closeZoom
function (if any zoom images
are currently opened) then creates the zoom container into the DOM and then scroll the page
until the upper bound of the thumbnail choosed has reached (unless scrollzoom option is set to
false). When scrolling effect has completed then viewZoom
function is called.