bootybox 0.0.91
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/defaults/default_image.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/defaults/default_textbox.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/grid/four_columns_25_25_25_25.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/grid/one_column_100.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/grid/three_columns_33_33_33.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/grid/two_columns_25_75.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/grid/two_columns_50_50.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/grid/two_columns_75_25.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/layout/element_container.png +0 -0
- data/app/assets/images/alchemy/element_thumbnails/bootybox/layout/seperator.png +0 -0
- data/app/assets/javascripts/bootybox/defaults.js +6 -0
- data/app/assets/javascripts/bootybox/modal.js.coffee +14 -0
- data/app/assets/javascripts/bootybox/portfolio.js.coffee +96 -0
- data/app/assets/javascripts/bootybox/slideshow.js.coffee +12 -0
- data/app/assets/javascripts/bootybox/templates/modal/buttons/cancel.hbs +1 -0
- data/app/assets/javascripts/bootybox/templates/modal/default.hbs +18 -0
- data/app/assets/javascripts/bootybox/templates/modal/modal_target.hbs +1 -0
- data/app/assets/javascripts/bootybox/templates/portfolio/portfolio_item.hbs +4 -0
- data/app/assets/javascripts/bootybox/vendor/flip.js +298 -0
- data/app/assets/stylesheets/bootybox/_elements.scss +54 -0
- data/app/assets/stylesheets/bootybox/_fixes.scss +22 -0
- data/app/assets/stylesheets/bootybox/_navi.scss +4 -0
- data/app/assets/stylesheets/bootybox/_portfolio.scss +37 -0
- data/app/assets/stylesheets/bootybox/_slides.scss +41 -0
- data/app/assets/stylesheets/bootybox/defaults.scss +7 -0
- data/app/assets/templates/framework.scss +50 -0
- data/app/helpers/bootybox_content_helper.rb +44 -0
- data/app/helpers/bootybox_form_helper.rb +39 -0
- data/app/helpers/bootybox_grid_helper.rb +112 -0
- data/app/services/bootybox/elements_config_service.rb +21 -0
- data/app/services/bootybox/navigational_context_pages_service.rb +15 -0
- data/app/services/bootybox/page_layout_config_service.rb +4 -0
- data/app/views/alchemy/elements/_contactform_editor.html.erb +6 -0
- data/app/views/alchemy/elements/_contactform_view.html.erb +48 -0
- data/app/views/alchemy/elements/bootybox/defaults/_button_editor.html.erb +8 -0
- data/app/views/alchemy/elements/bootybox/defaults/_button_view.html.erb +5 -0
- data/app/views/alchemy/elements/bootybox/defaults/_default_image_editor.html.erb +5 -0
- data/app/views/alchemy/elements/bootybox/defaults/_default_image_view.html.erb +8 -0
- data/app/views/alchemy/elements/bootybox/defaults/_default_textbox_editor.html.erb +5 -0
- data/app/views/alchemy/elements/bootybox/defaults/_default_textbox_view.html.erb +7 -0
- data/app/views/alchemy/elements/bootybox/defaults/_subheader_editor.html.erb +8 -0
- data/app/views/alchemy/elements/bootybox/defaults/_subheader_view.html.erb +10 -0
- data/app/views/alchemy/elements/bootybox/fancy/_flip_content_box_editor.html.erb +17 -0
- data/app/views/alchemy/elements/bootybox/fancy/_flip_content_box_view.html.erb +19 -0
- data/app/views/alchemy/elements/bootybox/grid/_four_columns_25_25_25_25_editor.html.haml +2 -0
- data/app/views/alchemy/elements/bootybox/grid/_four_columns_25_25_25_25_view.html.haml +10 -0
- data/app/views/alchemy/elements/bootybox/grid/_one_column_100_editor.html.haml +2 -0
- data/app/views/alchemy/elements/bootybox/grid/_one_column_100_view.html.haml +5 -0
- data/app/views/alchemy/elements/bootybox/grid/_three_columns_33_33_33_editor.html.haml +2 -0
- data/app/views/alchemy/elements/bootybox/grid/_three_columns_33_33_33_view.html.haml +8 -0
- data/app/views/alchemy/elements/bootybox/grid/_two_columns_25_75_editor.html.haml +2 -0
- data/app/views/alchemy/elements/bootybox/grid/_two_columns_25_75_view.html.haml +6 -0
- data/app/views/alchemy/elements/bootybox/grid/_two_columns_50_50_editor.html.haml +2 -0
- data/app/views/alchemy/elements/bootybox/grid/_two_columns_50_50_view.html.haml +6 -0
- data/app/views/alchemy/elements/bootybox/grid/_two_columns_66_33_editor.html.haml +3 -0
- data/app/views/alchemy/elements/bootybox/grid/_two_columns_66_33_view.html.haml +6 -0
- data/app/views/alchemy/elements/bootybox/grid/_two_columns_75_25_editor.html.haml +3 -0
- data/app/views/alchemy/elements/bootybox/grid/_two_columns_75_25_view.html.haml +6 -0
- data/app/views/alchemy/elements/bootybox/layout/_element_container_editor.html.erb +4 -0
- data/app/views/alchemy/elements/bootybox/layout/_element_container_view.html.erb +8 -0
- data/app/views/alchemy/elements/bootybox/layout/_page_header_editor.html.erb +3 -0
- data/app/views/alchemy/elements/bootybox/layout/_page_header_view.html.erb +6 -0
- data/app/views/alchemy/elements/bootybox/layout/_seperator_editor.html.erb +4 -0
- data/app/views/alchemy/elements/bootybox/layout/_seperator_view.html.erb +4 -0
- data/app/views/alchemy/elements/bootybox/navi/_sub_navi_container_editor.html.erb +3 -0
- data/app/views/alchemy/elements/bootybox/navi/_sub_navi_container_view.html.erb +5 -0
- data/app/views/alchemy/elements/bootybox/navi/_sub_navi_item_editor.html.erb +4 -0
- data/app/views/alchemy/elements/bootybox/navi/_sub_navi_item_view.html.erb +3 -0
- data/app/views/alchemy/elements/bootybox/portfolio/_portfolio_container_editor.html.erb +8 -0
- data/app/views/alchemy/elements/bootybox/portfolio/_portfolio_container_view.html.erb +12 -0
- data/app/views/alchemy/elements/bootybox/portfolio/_portfolio_item_editor.html.erb +7 -0
- data/app/views/alchemy/elements/bootybox/portfolio/_portfolio_item_view.html.erb +13 -0
- data/app/views/alchemy/elements/bootybox/slideshow/_image_slideshow_editor.html.erb +3 -0
- data/app/views/alchemy/elements/bootybox/slideshow/_image_slideshow_slide_editor.html.erb +4 -0
- data/app/views/alchemy/elements/bootybox/slideshow/_image_slideshow_slide_view.html.erb +4 -0
- data/app/views/alchemy/elements/bootybox/slideshow/_image_slideshow_view.html.erb +37 -0
- data/app/views/alchemy/elements/bootybox/slideshow_top/_slideshow_slide_container_editor.html.erb +4 -0
- data/app/views/alchemy/elements/bootybox/slideshow_top/_slideshow_slide_container_view.html.erb +10 -0
- data/app/views/alchemy/elements/bootybox/slideshow_top/_slideshow_slide_top_editor.html.erb +10 -0
- data/app/views/alchemy/elements/bootybox/slideshow_top/_slideshow_slide_top_view.html.erb +26 -0
- data/app/views/alchemy/elements/bootybox/slideshow_top/_slideshow_teaser_top_editor.html.erb +4 -0
- data/app/views/alchemy/elements/bootybox/slideshow_top/_slideshow_teaser_top_view.html.erb +28 -0
- data/app/views/alchemy/page_layouts/_default.html.erb +4 -0
- data/app/views/bootybox/forms/_form_group_container.html.erb +12 -0
- data/app/views/bootybox/forms/_form_group_input.html.erb +14 -0
- data/app/views/bootybox/forms/_form_group_select.html.erb +2 -0
- data/app/views/layouts/_footer.html.erb +5 -0
- data/app/views/layouts/_navigation.html.erb +32 -0
- data/app/views/layouts/_navigational_footer.html.erb +19 -0
- data/app/views/layouts/application.html.erb +42 -0
- data/config/elements.yml +274 -0
- data/config/locales/bootybox.de.yml +54 -0
- data/lib/bootybox.rb +19 -0
- data/lib/bootybox/engine.rb +41 -0
- data/lib/generators/bootybox/views/application_layout_generator.rb +20 -0
- data/lib/tasks/bootybox.rake +88 -0
- metadata +224 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 486fcc3625f3f27b54ec5b0675a58976478149bb
|
4
|
+
data.tar.gz: c16487cf2b1e3c6428144c48b326f379524324ef
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 86ac5104b0f46c673dfffc733cca814cc39893134f710e6b40e7e07d76c95a5e82e052bd3b0d01539d3c61b54cf137099c4ab618e709b704244b9a35e57e772c
|
7
|
+
data.tar.gz: 5b201ef81e595a7f3a2ddc3e6c96f00dd348341a35be95dba2a09ba5d64351b0d0ea8ed2561632e2272d5a9c58998f83290e1f8d62405a36addcc90357851e1b
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,14 @@
|
|
1
|
+
window.Bootybox = {} if typeof(window.Bootybox) is 'undefined'
|
2
|
+
|
3
|
+
window.Bootybox.showModal = (title, content, options = {}) ->
|
4
|
+
# Check if the modal target exists
|
5
|
+
divId = "bootybox-modal-container"
|
6
|
+
if $("#"+divId).length == 0
|
7
|
+
$("body").append HandlebarsTemplates["modal/modal_target"](id: divId)
|
8
|
+
|
9
|
+
modalHtml = HandlebarsTemplates["modal/default"](title: title, content: content)
|
10
|
+
|
11
|
+
$("#"+divId).html(modalHtml)
|
12
|
+
$("#currentModal").modal()
|
13
|
+
|
14
|
+
|
@@ -0,0 +1,96 @@
|
|
1
|
+
jQuery.fn.extend
|
2
|
+
portfolio: () ->
|
3
|
+
this.each ->
|
4
|
+
items = $(this).find(".portfolio-item")
|
5
|
+
|
6
|
+
# Resetting styles
|
7
|
+
$(this).css
|
8
|
+
height: "auto"
|
9
|
+
width: "100%"
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
i = 0
|
14
|
+
|
15
|
+
maxDimensions = {top: 0, height: 0, left: 0, width: 0}
|
16
|
+
@itemPadding = parseInt($(this).data("image-padding"))
|
17
|
+
|
18
|
+
if $(this).attr('class').match('vert')
|
19
|
+
items.css
|
20
|
+
opacity: 0
|
21
|
+
|
22
|
+
numOfItemsInRow = Math.floor(($(this).width() / parseInt($(this).data("image-size"))))
|
23
|
+
requiredRows = Math.ceil(items.length / numOfItemsInRow)
|
24
|
+
alignTop = true
|
25
|
+
for nR in [0..numOfItemsInRow-1]
|
26
|
+
alignTop = true
|
27
|
+
for nC in [1..requiredRows]
|
28
|
+
if items[i] != undefined
|
29
|
+
currentItem = $(items[i])
|
30
|
+
|
31
|
+
if i > 0
|
32
|
+
prevItem = $(items[i-1])
|
33
|
+
|
34
|
+
newStyle = {top: 0, left: 0}
|
35
|
+
|
36
|
+
if alignTop
|
37
|
+
newStyle.top = 0
|
38
|
+
else
|
39
|
+
newStyle.top = (prevItem.position().top + prevItem.outerHeight() + @itemPadding)
|
40
|
+
|
41
|
+
if nR == 0
|
42
|
+
newStyle.left = prevItem.position().left
|
43
|
+
else
|
44
|
+
newStyle.left = (nR*(prevItem.outerWidth() + @itemPadding))
|
45
|
+
|
46
|
+
if newStyle.top > maxDimensions.top
|
47
|
+
maxDimensions.top = newStyle.top
|
48
|
+
maxDimensions.height = newStyle.top+currentItem.outerHeight()
|
49
|
+
|
50
|
+
if newStyle.left > maxDimensions.left
|
51
|
+
maxDimensions.left = newStyle.left
|
52
|
+
maxDimensions.width = newStyle.left+currentItem.outerWidth()
|
53
|
+
|
54
|
+
newStyle.top = newStyle.top+"px"
|
55
|
+
newStyle.left = newStyle.left+"px"
|
56
|
+
currentItem.css(newStyle)
|
57
|
+
|
58
|
+
i++
|
59
|
+
alignTop = false
|
60
|
+
|
61
|
+
$(this).css
|
62
|
+
height: maxDimensions.height+"px"
|
63
|
+
width: maxDimensions.width+"px"
|
64
|
+
items.animate({opacity: 1}, 1000)
|
65
|
+
|
66
|
+
items.portofolioTooltip()
|
67
|
+
items.bind "click", (e) ->
|
68
|
+
e.stopPropagation()
|
69
|
+
contentVars =
|
70
|
+
image_url: $(this).find(".image").data("big-url")
|
71
|
+
name: $(this).find(".name").html()
|
72
|
+
text: $(this).find(".text").html()
|
73
|
+
|
74
|
+
content = HandlebarsTemplates['portfolio/portfolio_item'](contentVars)
|
75
|
+
|
76
|
+
Bootybox.showModal(contentVars.name, content)
|
77
|
+
|
78
|
+
portofolioTooltip: () ->
|
79
|
+
items = $(this)
|
80
|
+
items.each ->
|
81
|
+
if $(this).hasClass("portfolio-item")
|
82
|
+
tooltip = $(this).find(".name")
|
83
|
+
$(this).bind "mouseenter", ->
|
84
|
+
tooltip.show()
|
85
|
+
$(this).bind "mouseleave", ->
|
86
|
+
tooltip.hide()
|
87
|
+
$(this).bind "mousemove", (e) ->
|
88
|
+
parentOffset = $(this).offset()
|
89
|
+
tooltip.css
|
90
|
+
left: (e.pageX - parentOffset.left)+5+"px"
|
91
|
+
top: (e.pageY - parentOffset.top)+5+"px"
|
92
|
+
|
93
|
+
|
94
|
+
$(window).bind "load resize", ->
|
95
|
+
$(".bootybox-portfolio").portfolio()
|
96
|
+
|
@@ -0,0 +1,12 @@
|
|
1
|
+
window.Bootybox.slideShow = (id) ->
|
2
|
+
slideshow = $('#'+id)
|
3
|
+
previewPics = $("ul[data-slideshow-target='" + id + "'] li[data-slideshow-index]")
|
4
|
+
|
5
|
+
$(slideshow).carousel
|
6
|
+
interval: 5000
|
7
|
+
|
8
|
+
console.log(previewPics)
|
9
|
+
|
10
|
+
previewPics.bind 'click', ->
|
11
|
+
pic = $(this)
|
12
|
+
slideshow.carousel(parseInt(pic.attr('data-slideshow-index')));
|
@@ -0,0 +1 @@
|
|
1
|
+
<button type="submit" class="btn btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> {{label}}</button>
|
@@ -0,0 +1,18 @@
|
|
1
|
+
<!-- Modal -->
|
2
|
+
<div class="modal fade" id="currentModal" role="dialog">
|
3
|
+
<div class="modal-dialog">
|
4
|
+
<!-- Modal content-->
|
5
|
+
<div class="modal-content">
|
6
|
+
<div class="modal-header">
|
7
|
+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
8
|
+
<h4 class="modal-title">{{title}}</h4>
|
9
|
+
</div>
|
10
|
+
<div class="modal-body">
|
11
|
+
{{{content}}}
|
12
|
+
</div>
|
13
|
+
<div class="modal-footer">
|
14
|
+
|
15
|
+
</div>
|
16
|
+
</div>
|
17
|
+
</div>
|
18
|
+
</div>
|
@@ -0,0 +1 @@
|
|
1
|
+
<div id="{{id}}"> </div>
|
@@ -0,0 +1,298 @@
|
|
1
|
+
// **A lightweight jQuery plugin to create 3d flip animation.**
|
2
|
+
// See the [project page](http://nnattawat.github.io/flip/)
|
3
|
+
// Released under the MIT license (16.08.2015)
|
4
|
+
|
5
|
+
|
6
|
+
(function( $ ) {
|
7
|
+
var flip = function($dom, callback) {
|
8
|
+
$dom.data("flipped", true);
|
9
|
+
|
10
|
+
var rotateAxis = "rotate" + $dom.data("axis");
|
11
|
+
$dom.find($dom.data("front")).css({
|
12
|
+
transform: rotateAxis + ($dom.data("reverse") ? "(-180deg)" : "(180deg)"),
|
13
|
+
"z-index": "0"
|
14
|
+
});
|
15
|
+
|
16
|
+
$dom.find($dom.data("back")).css({
|
17
|
+
transform: rotateAxis + "(0deg)",
|
18
|
+
"z-index": "1"
|
19
|
+
});
|
20
|
+
|
21
|
+
//Providing a nicely wrapped up callback because transform is essentially async
|
22
|
+
$dom.one(whichTransitionEvent(), function(){
|
23
|
+
$(this).trigger('flip:done');
|
24
|
+
if (callback !== undefined){
|
25
|
+
callback.call(this);
|
26
|
+
}
|
27
|
+
});
|
28
|
+
};
|
29
|
+
|
30
|
+
var unflip = function($dom, callback) {
|
31
|
+
$dom.data("flipped", false);
|
32
|
+
|
33
|
+
var rotateAxis = "rotate" + $dom.data("axis");
|
34
|
+
$dom.find($dom.data("front")).css({
|
35
|
+
transform: rotateAxis + "(0deg)",
|
36
|
+
"z-index": "1"
|
37
|
+
});
|
38
|
+
|
39
|
+
$dom.find($dom.data("back")).css({
|
40
|
+
transform: rotateAxis + ($dom.data("reverse") ? "(180deg)" : "(-180deg)"),
|
41
|
+
"z-index": "0"
|
42
|
+
});
|
43
|
+
|
44
|
+
//Providing a nicely wrapped up callback because transform is essentially async
|
45
|
+
$dom.one(whichTransitionEvent(), function(){
|
46
|
+
$(this).trigger('flip:done');
|
47
|
+
if (callback !== undefined){
|
48
|
+
callback.call(this);
|
49
|
+
}
|
50
|
+
});
|
51
|
+
};
|
52
|
+
// Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
|
53
|
+
var whichTransitionEvent = function(){
|
54
|
+
var t,
|
55
|
+
el = document.createElement("fakeelement"),
|
56
|
+
transitions = {
|
57
|
+
"transition" : "transitionend",
|
58
|
+
"OTransition" : "oTransitionEnd",
|
59
|
+
"MozTransition" : "transitionend",
|
60
|
+
"WebkitTransition": "webkitTransitionEnd"
|
61
|
+
};
|
62
|
+
|
63
|
+
for (t in transitions){
|
64
|
+
if (el.style[t] !== undefined){
|
65
|
+
return transitions[t];
|
66
|
+
}
|
67
|
+
}
|
68
|
+
};
|
69
|
+
$.fn.flip = function(options, callback) {
|
70
|
+
if (typeof options == 'function'){
|
71
|
+
//This allows flip to be called for setup with only a callback (default settings)
|
72
|
+
callback = options;
|
73
|
+
}
|
74
|
+
this.each(function(){
|
75
|
+
var $dom = $(this);
|
76
|
+
|
77
|
+
if (options !== undefined && (typeof(options) == "boolean" || typeof(options) == "string")) { // Force flip the DOM
|
78
|
+
if (options == "toggle"){
|
79
|
+
options = !$dom.data("flipped");
|
80
|
+
}
|
81
|
+
if (options) {
|
82
|
+
flip($dom,callback);
|
83
|
+
} else {
|
84
|
+
unflip($dom,callback);
|
85
|
+
}
|
86
|
+
// //Providing a nicely wrapped up callback because transform is essentially async
|
87
|
+
// $(this).one(whichTransitionEvent(), function(){
|
88
|
+
// $(this).trigger('flip:done');
|
89
|
+
// if (callback !== undefined){
|
90
|
+
// callback.call(this);
|
91
|
+
// }
|
92
|
+
// });
|
93
|
+
} else if (!$dom.data("initiated")){ //Init flipable DOM
|
94
|
+
$dom.data("initiated", true);
|
95
|
+
|
96
|
+
var settings = $.extend({
|
97
|
+
axis: "y",
|
98
|
+
reverse: false,
|
99
|
+
trigger: "click",
|
100
|
+
speed: 500,
|
101
|
+
forceHeight: false,
|
102
|
+
forceWidth: false,
|
103
|
+
autoSize: true,
|
104
|
+
front: 'auto',
|
105
|
+
back: 'auto'
|
106
|
+
}, options );
|
107
|
+
|
108
|
+
//By defualt we first check for the old front and back selectors for backward compatibility
|
109
|
+
//if they arent there we fall back to auto selecting the first and second div
|
110
|
+
if (settings.front == "auto"){
|
111
|
+
settings.front = ($dom.find('.front').length > 0)? '.front' : 'div:first-child';
|
112
|
+
}else if (settings.front == "autostrict"){
|
113
|
+
settings.front = 'div:first-child';
|
114
|
+
}
|
115
|
+
if (settings.back == "auto"){
|
116
|
+
//Note, we must use the old 'div:first-child + div' for IE compatibility
|
117
|
+
settings.back = ($dom.find('.back').length > 0)? '.back' : 'div:first-child + div';
|
118
|
+
}else if (settings.back == "autostrict"){
|
119
|
+
settings.back = 'div:first-child + div';
|
120
|
+
}
|
121
|
+
// save reverse and axis css to DOM for performing flip
|
122
|
+
$dom.data("reverse", settings.reverse);
|
123
|
+
$dom.data("axis", settings.axis);
|
124
|
+
$dom.data("front", settings.front);
|
125
|
+
$dom.data("back", settings.back);
|
126
|
+
|
127
|
+
var rotateAxis = "rotate" + (settings.axis.toLowerCase() == "x" ? "x" : "y"),
|
128
|
+
perspective = $dom["outer" + (rotateAxis == "rotatex" ? "Height" : "Width")]() * 2;
|
129
|
+
|
130
|
+
$dom.find($dom.data("back")).css({
|
131
|
+
transform: rotateAxis + "(" + (settings.reverse? "180deg" : "-180deg") + ")"
|
132
|
+
});
|
133
|
+
|
134
|
+
$dom.css({
|
135
|
+
perspective: perspective,
|
136
|
+
position: "relative"
|
137
|
+
});
|
138
|
+
|
139
|
+
var speedInSec = settings.speed / 1000 || 0.5;
|
140
|
+
var faces = $dom.find(settings.front).add(settings.back, $dom);
|
141
|
+
if (settings.forceHeight) {faces.outerHeight($dom.height());} else if (settings.autoSize) {faces.css({'height': '100%'});}
|
142
|
+
if (settings.forceWidth) {faces.outerWidth($dom.width());} else if (settings.autoSize) {faces.css({'width': '100%'});}
|
143
|
+
faces.css({
|
144
|
+
"backface-visibility": "hidden",
|
145
|
+
"transform-style": "preserve-3d",
|
146
|
+
position: "absolute",
|
147
|
+
"z-index": "1"
|
148
|
+
});
|
149
|
+
faces.find('*').css({
|
150
|
+
"backface-visibility": "hidden"
|
151
|
+
});
|
152
|
+
$dom.find($dom.data("back")).css({
|
153
|
+
transform: rotateAxis + "(" + (settings.reverse? "180deg" : "-180deg") + ")",
|
154
|
+
"z-index": "0"
|
155
|
+
});
|
156
|
+
|
157
|
+
// Back face always visible on Chrome #39
|
158
|
+
if ((window.chrome || (window.Intl && Intl.v8BreakIterator)) && 'CSS' in window){
|
159
|
+
//Blink Engine, add preserve-3d to $dom
|
160
|
+
$dom.css({"-webkit-transform-style": "preserve-3d"});
|
161
|
+
}
|
162
|
+
// /#39
|
163
|
+
|
164
|
+
// not forcing width/height may cause an initial flip to show up on
|
165
|
+
// page load when we apply the style to reverse the backface...
|
166
|
+
// To prevent this we first apply the basic styles and then give the
|
167
|
+
// browser a moment to apply them. Only afterwards do we add the transition.
|
168
|
+
setTimeout(function(){
|
169
|
+
// By now the browser should have applied the styles, so the transition
|
170
|
+
// will only affect subsequent flips.
|
171
|
+
faces.css({
|
172
|
+
transition: "all " + speedInSec + "s ease-out"
|
173
|
+
});
|
174
|
+
if (callback !== undefined){
|
175
|
+
callback.call(this);
|
176
|
+
}
|
177
|
+
//While this used to work with a setTimeout of zero, at some point that became
|
178
|
+
//unstable and the initial flip returned. The reason for this is unknown but we
|
179
|
+
//will temporarily use a short delay of 20 to mitigate this issue.
|
180
|
+
}, 20);
|
181
|
+
|
182
|
+
if (settings.trigger.toLowerCase() == "click") {
|
183
|
+
$dom.on($.fn.tap ? "tap" : "click", function(event) {
|
184
|
+
if (!event) {event = window.event;}
|
185
|
+
if ($dom.find($(event.target).closest('button, a, input[type="submit"]')).length) {
|
186
|
+
return;
|
187
|
+
}
|
188
|
+
|
189
|
+
if ($dom.data("flipped")) {
|
190
|
+
unflip($dom);
|
191
|
+
} else {
|
192
|
+
flip($dom);
|
193
|
+
}
|
194
|
+
});
|
195
|
+
}
|
196
|
+
else if (settings.trigger.toLowerCase() == "hover") {
|
197
|
+
var performFlip = function() {
|
198
|
+
$dom.unbind('mouseleave', performUnflip);
|
199
|
+
|
200
|
+
flip($dom);
|
201
|
+
|
202
|
+
setTimeout(function() {
|
203
|
+
$dom.bind('mouseleave', performUnflip);
|
204
|
+
if (!$dom.is(":hover")) {
|
205
|
+
unflip($dom);
|
206
|
+
}
|
207
|
+
}, (settings.speed + 150));
|
208
|
+
};
|
209
|
+
|
210
|
+
var performUnflip = function() {
|
211
|
+
unflip($dom);
|
212
|
+
};
|
213
|
+
|
214
|
+
$dom.mouseenter(performFlip);
|
215
|
+
$dom.mouseleave(performUnflip);
|
216
|
+
}
|
217
|
+
}else{
|
218
|
+
//The element has been initiated, all we have to do is change applicable settings
|
219
|
+
if (options && (options.axis !== undefined || options.reverse !== undefined)){
|
220
|
+
changeSettings.call(this,options,function(){
|
221
|
+
$dom.trigger('flip:change');
|
222
|
+
if (callback !== undefined){
|
223
|
+
callback.call(this);
|
224
|
+
}
|
225
|
+
});
|
226
|
+
}
|
227
|
+
}
|
228
|
+
});
|
229
|
+
|
230
|
+
return this;
|
231
|
+
};
|
232
|
+
var changeSettings = function(options,callback){
|
233
|
+
var changeNeeded = false;
|
234
|
+
if (options.axis !== undefined && $(this).data("axis") != options.axis.toLowerCase()){
|
235
|
+
$(this).data("axis", options.axis.toLowerCase());
|
236
|
+
changeNeeded = true;
|
237
|
+
}
|
238
|
+
if (options.reverse !== undefined && $(this).data("reverse") != options.reverse){
|
239
|
+
$(this).data("reverse", options.reverse);
|
240
|
+
changeNeeded = true;
|
241
|
+
}
|
242
|
+
if (changeNeeded){
|
243
|
+
var faces = $(this).find($(this).data("front")).add($(this).data("back"), $(this));
|
244
|
+
var savedTrans = faces.css("transition");
|
245
|
+
faces.css({
|
246
|
+
transition: "none"
|
247
|
+
});
|
248
|
+
//Only setting the axis if it needs to be
|
249
|
+
|
250
|
+
//options.axis = options.axis.toLowerCase();
|
251
|
+
//$(this).data("axis", options.axis);
|
252
|
+
|
253
|
+
//This sets up the first flip in the new direction automatically
|
254
|
+
var rotateAxis = "rotate" + $(this).data("axis");
|
255
|
+
if ($(this).data("flipped")){
|
256
|
+
$(this).find($(this).data("front")).css({
|
257
|
+
transform: rotateAxis + ($(this).data("reverse") ? "(-180deg)" : "(180deg)"),
|
258
|
+
"z-index": "0"
|
259
|
+
});
|
260
|
+
}else{
|
261
|
+
$(this).find($(this).data("back")).css({
|
262
|
+
transform: rotateAxis + "(" + ($(this).data("reverse")? "180deg" : "-180deg") + ")",
|
263
|
+
"z-index": "0"
|
264
|
+
});
|
265
|
+
}
|
266
|
+
//Providing a nicely wrapped up callback because transform is essentially async
|
267
|
+
setTimeout(function(){
|
268
|
+
faces.css({
|
269
|
+
transition: savedTrans
|
270
|
+
});
|
271
|
+
callback.call(this);
|
272
|
+
}.bind(this),0);
|
273
|
+
}else{
|
274
|
+
//If we didnt have to set the axis we can just call back.
|
275
|
+
setTimeout(callback.bind(this), 0);
|
276
|
+
}
|
277
|
+
};
|
278
|
+
}( jQuery ));
|
279
|
+
|
280
|
+
|
281
|
+
// This is the default initializer
|
282
|
+
initFlip = function(){
|
283
|
+
$(".flippable").flip(
|
284
|
+
{
|
285
|
+
axis: "y",
|
286
|
+
trigger: "hover",
|
287
|
+
front: ".front",
|
288
|
+
back: ".back",
|
289
|
+
}
|
290
|
+
)
|
291
|
+
}
|
292
|
+
|
293
|
+
$(document).ready(function(){
|
294
|
+
initFlip()
|
295
|
+
});
|
296
|
+
$(document).on('page:load', function(){
|
297
|
+
initFlip()
|
298
|
+
}) ;
|