Page Menu
Home
DevCentral
Search
Configure Global Search
Log In
Files
F56289035
foundation.clearing.js
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Flag For Later
Award Token
Size
12 KB
Referenced Files
None
Subscribers
None
foundation.clearing.js
View Options
;(
function
(
$
,
window
,
document
,
undefined
)
{
'use strict'
;
Foundation
.
libs
.
clearing
=
{
name
:
'clearing'
,
version
:
'5.0.0'
,
settings
:
{
templates
:
{
viewing
:
'<a href="#" class="clearing-close">×</a>'
+
'<div class="visible-img" style="display: none"><img src="//:0">'
+
'<p class="clearing-caption"></p><a href="#" class="clearing-main-prev"><span></span></a>'
+
'<a href="#" class="clearing-main-next"><span></span></a></div>'
},
// comma delimited list of selectors that, on click, will close clearing,
// add 'div.clearing-blackout, div.visible-img' to close on background click
close_selectors
:
'.clearing-close'
,
// event initializers and locks
init
:
false
,
locked
:
false
},
init
:
function
(
scope
,
method
,
options
)
{
var
self
=
this
;
Foundation
.
inherit
(
this
,
'throttle loaded'
);
this
.
bindings
(
method
,
options
);
if
(
$
(
this
.
scope
).
is
(
'[data-clearing]'
))
{
this
.
assemble
(
$
(
'li'
,
this
.
scope
));
}
else
{
$
(
'[data-clearing]'
,
this
.
scope
).
each
(
function
()
{
self
.
assemble
(
$
(
'li'
,
this
));
});
}
},
events
:
function
(
scope
)
{
var
self
=
this
;
$
(
this
.
scope
)
.
off
(
'.clearing'
)
.
on
(
'click.fndtn.clearing'
,
'ul[data-clearing] li'
,
function
(
e
,
current
,
target
)
{
var
current
=
current
||
$
(
this
),
target
=
target
||
current
,
next
=
current
.
next
(
'li'
),
settings
=
current
.
closest
(
'[data-clearing]'
).
data
(
'clearing-init'
),
image
=
$
(
e
.
target
);
e
.
preventDefault
();
if
(
!
settings
)
{
self
.
init
();
settings
=
current
.
closest
(
'[data-clearing]'
).
data
(
'clearing-init'
);
}
// if clearing is open and the current image is
// clicked, go to the next image in sequence
if
(
target
.
hasClass
(
'visible'
)
&&
current
[
0
]
===
target
[
0
]
&&
next
.
length
>
0
&&
self
.
is_open
(
current
))
{
target
=
next
;
image
=
$
(
'img'
,
target
);
}
// set current and target to the clicked li if not otherwise defined.
self
.
open
(
image
,
current
,
target
);
self
.
update_paddles
(
target
);
})
.
on
(
'click.fndtn.clearing'
,
'.clearing-main-next'
,
function
(
e
)
{
self
.
nav
(
e
,
'next'
)
})
.
on
(
'click.fndtn.clearing'
,
'.clearing-main-prev'
,
function
(
e
)
{
self
.
nav
(
e
,
'prev'
)
})
.
on
(
'click.fndtn.clearing'
,
this
.
settings
.
close_selectors
,
function
(
e
)
{
Foundation
.
libs
.
clearing
.
close
(
e
,
this
)
})
.
on
(
'keydown.fndtn.clearing'
,
function
(
e
)
{
self
.
keydown
(
e
)
});
$
(
window
).
off
(
'.clearing'
).
on
(
'resize.fndtn.clearing'
,
function
()
{
self
.
resize
()
});
this
.
swipe_events
(
scope
);
},
swipe_events
:
function
(
scope
)
{
var
self
=
this
;
$
(
this
.
scope
)
.
on
(
'touchstart.fndtn.clearing'
,
'.visible-img'
,
function
(
e
)
{
if
(
!
e
.
touches
)
{
e
=
e
.
originalEvent
;
}
var
data
=
{
start_page_x
:
e
.
touches
[
0
].
pageX
,
start_page_y
:
e
.
touches
[
0
].
pageY
,
start_time
:
(
new
Date
()).
getTime
(),
delta_x
:
0
,
is_scrolling
:
undefined
};
$
(
this
).
data
(
'swipe-transition'
,
data
);
e
.
stopPropagation
();
})
.
on
(
'touchmove.fndtn.clearing'
,
'.visible-img'
,
function
(
e
)
{
if
(
!
e
.
touches
)
{
e
=
e
.
originalEvent
;
}
// Ignore pinch/zoom events
if
(
e
.
touches
.
length
>
1
||
e
.
scale
&&
e
.
scale
!==
1
)
return
;
var
data
=
$
(
this
).
data
(
'swipe-transition'
);
if
(
typeof
data
===
'undefined'
)
{
data
=
{};
}
data
.
delta_x
=
e
.
touches
[
0
].
pageX
-
data
.
start_page_x
;
if
(
typeof
data
.
is_scrolling
===
'undefined'
)
{
data
.
is_scrolling
=
!!
(
data
.
is_scrolling
||
Math
.
abs
(
data
.
delta_x
)
<
Math
.
abs
(
e
.
touches
[
0
].
pageY
-
data
.
start_page_y
)
);
}
if
(
!
data
.
is_scrolling
&&
!
data
.
active
)
{
e
.
preventDefault
();
var
direction
=
(
data
.
delta_x
<
0
)
?
'next'
:
'prev'
;
data
.
active
=
true
;
self
.
nav
(
e
,
direction
);
}
})
.
on
(
'touchend.fndtn.clearing'
,
'.visible-img'
,
function
(
e
)
{
$
(
this
).
data
(
'swipe-transition'
,
{});
e
.
stopPropagation
();
});
},
assemble
:
function
(
$li
)
{
var
$el
=
$li
.
parent
();
if
(
$el
.
parent
().
hasClass
(
'carousel'
))
return
;
$el
.
after
(
'<div id="foundationClearingHolder"></div>'
);
var
holder
=
$
(
'#foundationClearingHolder'
),
settings
=
$el
.
data
(
'clearing-init'
),
grid
=
$el
.
detach
(),
data
=
{
grid
:
'<div class="carousel">'
+
grid
[
0
].
outerHTML
+
'</div>'
,
viewing
:
settings
.
templates
.
viewing
},
wrapper
=
'<div class="clearing-assembled"><div>'
+
data
.
viewing
+
data
.
grid
+
'</div></div>'
;
return
holder
.
after
(
wrapper
).
remove
();
},
open
:
function
(
$image
,
current
,
target
)
{
var
root
=
target
.
closest
(
'.clearing-assembled'
),
container
=
$
(
'div'
,
root
).
first
(),
visible_image
=
$
(
'.visible-img'
,
container
),
image
=
$
(
'img'
,
visible_image
).
not
(
$image
);
if
(
!
this
.
locked
())
{
// set the image to the selected thumbnail
image
.
attr
(
'src'
,
this
.
load
(
$image
))
.
css
(
'visibility'
,
'hidden'
);
this
.
loaded
(
image
,
function
()
{
image
.
css
(
'visibility'
,
'visible'
);
// toggle the gallery
root
.
addClass
(
'clearing-blackout'
);
container
.
addClass
(
'clearing-container'
);
visible_image
.
show
();
this
.
fix_height
(
target
)
.
caption
(
$
(
'.clearing-caption'
,
visible_image
),
$image
)
.
center
(
image
)
.
shift
(
current
,
target
,
function
()
{
target
.
siblings
().
removeClass
(
'visible'
);
target
.
addClass
(
'visible'
);
});
}.
bind
(
this
));
}
},
close
:
function
(
e
,
el
)
{
e
.
preventDefault
();
var
root
=
(
function
(
target
)
{
if
(
/blackout/
.
test
(
target
.
selector
))
{
return
target
;
}
else
{
return
target
.
closest
(
'.clearing-blackout'
);
}
}(
$
(
el
))),
container
,
visible_image
;
if
(
el
===
e
.
target
&&
root
)
{
container
=
$
(
'div'
,
root
).
first
();
visible_image
=
$
(
'.visible-img'
,
container
);
this
.
settings
.
prev_index
=
0
;
$
(
'ul[data-clearing]'
,
root
)
.
attr
(
'style'
,
''
).
closest
(
'.clearing-blackout'
)
.
removeClass
(
'clearing-blackout'
);
container
.
removeClass
(
'clearing-container'
);
visible_image
.
hide
();
}
return
false
;
},
is_open
:
function
(
current
)
{
return
current
.
parent
().
prop
(
'style'
).
length
>
0
;
},
keydown
:
function
(
e
)
{
var
clearing
=
$
(
'ul[data-clearing]'
,
'.clearing-blackout'
);
if
(
e
.
which
===
39
)
this
.
go
(
clearing
,
'next'
);
if
(
e
.
which
===
37
)
this
.
go
(
clearing
,
'prev'
);
if
(
e
.
which
===
27
)
$
(
'a.clearing-close'
).
trigger
(
'click'
);
},
nav
:
function
(
e
,
direction
)
{
var
clearing
=
$
(
'ul[data-clearing]'
,
'.clearing-blackout'
);
e
.
preventDefault
();
this
.
go
(
clearing
,
direction
);
},
resize
:
function
()
{
var
image
=
$
(
'img'
,
'.clearing-blackout .visible-img'
);
if
(
image
.
length
)
{
this
.
center
(
image
);
}
},
// visual adjustments
fix_height
:
function
(
target
)
{
var
lis
=
target
.
parent
().
children
(),
self
=
this
;
lis
.
each
(
function
()
{
var
li
=
$
(
this
),
image
=
li
.
find
(
'img'
);
if
(
li
.
height
()
>
image
.
outerHeight
())
{
li
.
addClass
(
'fix-height'
);
}
})
.
closest
(
'ul'
)
.
width
(
lis
.
length
*
100
+
'%'
);
return
this
;
},
update_paddles
:
function
(
target
)
{
var
visible_image
=
target
.
closest
(
'.carousel'
)
.
siblings
(
'.visible-img'
);
if
(
target
.
next
().
length
>
0
)
{
$
(
'.clearing-main-next'
,
visible_image
)
.
removeClass
(
'disabled'
);
}
else
{
$
(
'.clearing-main-next'
,
visible_image
)
.
addClass
(
'disabled'
);
}
if
(
target
.
prev
().
length
>
0
)
{
$
(
'.clearing-main-prev'
,
visible_image
)
.
removeClass
(
'disabled'
);
}
else
{
$
(
'.clearing-main-prev'
,
visible_image
)
.
addClass
(
'disabled'
);
}
},
center
:
function
(
target
)
{
if
(
!
this
.
rtl
)
{
target
.
css
({
marginLeft
:
-
(
target
.
outerWidth
()
/
2
),
marginTop
:
-
(
target
.
outerHeight
()
/
2
)
});
}
else
{
target
.
css
({
marginRight
:
-
(
target
.
outerWidth
()
/
2
),
marginTop
:
-
(
target
.
outerHeight
()
/
2
)
});
}
return
this
;
},
// image loading and preloading
load
:
function
(
$image
)
{
if
(
$image
[
0
].
nodeName
===
"A"
)
{
var
href
=
$image
.
attr
(
'href'
);
}
else
{
var
href
=
$image
.
parent
().
attr
(
'href'
);
}
this
.
preload
(
$image
);
if
(
href
)
return
href
;
return
$image
.
attr
(
'src'
);
},
preload
:
function
(
$image
)
{
this
.
img
(
$image
.
closest
(
'li'
).
next
())
.
img
(
$image
.
closest
(
'li'
).
prev
());
},
img
:
function
(
img
)
{
if
(
img
.
length
)
{
var
new_img
=
new
Image
(),
new_a
=
$
(
'a'
,
img
);
if
(
new_a
.
length
)
{
new_img
.
src
=
new_a
.
attr
(
'href'
);
}
else
{
new_img
.
src
=
$
(
'img'
,
img
).
attr
(
'src'
);
}
}
return
this
;
},
// image caption
caption
:
function
(
container
,
$image
)
{
var
caption
=
$image
.
data
(
'caption'
);
if
(
caption
)
{
container
.
html
(
caption
)
.
show
();
}
else
{
container
.
text
(
''
)
.
hide
();
}
return
this
;
},
// directional methods
go
:
function
(
$ul
,
direction
)
{
var
current
=
$
(
'.visible'
,
$ul
),
target
=
current
[
direction
]();
if
(
target
.
length
)
{
$
(
'img'
,
target
)
.
trigger
(
'click'
,
[
current
,
target
]);
}
},
shift
:
function
(
current
,
target
,
callback
)
{
var
clearing
=
target
.
parent
(),
old_index
=
this
.
settings
.
prev_index
||
target
.
index
(),
direction
=
this
.
direction
(
clearing
,
current
,
target
),
left
=
parseInt
(
clearing
.
css
(
'left'
),
10
),
width
=
target
.
outerWidth
(),
skip_shift
;
// we use jQuery animate instead of CSS transitions because we
// need a callback to unlock the next animation
if
(
target
.
index
()
!==
old_index
&&
!
/skip/
.
test
(
direction
)){
if
(
/left/
.
test
(
direction
))
{
this
.
lock
();
clearing
.
animate
({
left
:
left
+
width
},
300
,
this
.
unlock
());
}
else
if
(
/right/
.
test
(
direction
))
{
this
.
lock
();
clearing
.
animate
({
left
:
left
-
width
},
300
,
this
.
unlock
());
}
}
else
if
(
/skip/
.
test
(
direction
))
{
// the target image is not adjacent to the current image, so
// do we scroll right or not
skip_shift
=
target
.
index
()
-
this
.
settings
.
up_count
;
this
.
lock
();
if
(
skip_shift
>
0
)
{
clearing
.
animate
({
left
:
-
(
skip_shift
*
width
)},
300
,
this
.
unlock
());
}
else
{
clearing
.
animate
({
left
:
0
},
300
,
this
.
unlock
());
}
}
callback
();
},
direction
:
function
(
$el
,
current
,
target
)
{
var
lis
=
$
(
'li'
,
$el
),
li_width
=
lis
.
outerWidth
()
+
(
lis
.
outerWidth
()
/
4
),
up_count
=
Math
.
floor
(
$
(
'.clearing-container'
).
outerWidth
()
/
li_width
)
-
1
,
target_index
=
lis
.
index
(
target
),
response
;
this
.
settings
.
up_count
=
up_count
;
if
(
this
.
adjacent
(
this
.
settings
.
prev_index
,
target_index
))
{
if
((
target_index
>
up_count
)
&&
target_index
>
this
.
settings
.
prev_index
)
{
response
=
'right'
;
}
else
if
((
target_index
>
up_count
-
1
)
&&
target_index
<=
this
.
settings
.
prev_index
)
{
response
=
'left'
;
}
else
{
response
=
false
;
}
}
else
{
response
=
'skip'
;
}
this
.
settings
.
prev_index
=
target_index
;
return
response
;
},
adjacent
:
function
(
current_index
,
target_index
)
{
for
(
var
i
=
target_index
+
1
;
i
>=
target_index
-
1
;
i
--
)
{
if
(
i
===
current_index
)
return
true
;
}
return
false
;
},
// lock management
lock
:
function
()
{
this
.
settings
.
locked
=
true
;
},
unlock
:
function
()
{
this
.
settings
.
locked
=
false
;
},
locked
:
function
()
{
return
this
.
settings
.
locked
;
},
off
:
function
()
{
$
(
this
.
scope
).
off
(
'.fndtn.clearing'
);
$
(
window
).
off
(
'.fndtn.clearing'
);
},
reflow
:
function
()
{
this
.
init
();
}
};
}(
jQuery
,
this
,
this
.
document
));
File Metadata
Details
Attached
Mime Type
text/html
Expires
Fri, Nov 6, 16:24 (3 d, 23 h ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
4250613
Default Alt Text
foundation.clearing.js (12 KB)
Attached To
Mode
rWWW www.nasqueron.org
Attached
Detach File
Event Timeline
Log In to Comment