zurb-foundation 3.0.9 → 3.1.0.rc1
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/lib/foundation/version.rb +1 -1
- data/scss/foundation/_settings.scss +40 -1
- data/scss/foundation/common/_forms.scss +15 -15
- data/scss/foundation/common/_globals.scss +6 -2
- data/scss/foundation/common/_typography.scss +7 -5
- data/scss/foundation/components/_grid.scss +20 -20
- data/scss/foundation/components/modules/_all.scss +1 -0
- data/scss/foundation/components/modules/_buttons.scss +33 -33
- data/scss/foundation/components/modules/_navbar.scss +26 -23
- data/scss/foundation/components/modules/_orbit.scss +24 -24
- data/scss/foundation/components/modules/_reveal.scss +10 -10
- data/scss/foundation/components/modules/_tabs.scss +16 -13
- data/scss/foundation/components/modules/_topbar.scss +246 -0
- data/scss/foundation/components/modules/_ui.scss +57 -29
- data/scss/foundation/mixins/_css-triangle.scss +1 -1
- data/templates/project/scss/_settings.scss +32 -2
- data/templates/project/scss/app.scss +1 -0
- data/test/buttons.html +18 -8
- data/test/elements.html +62 -18
- data/test/forms.html +25 -49
- data/test/index.html +1 -0
- data/test/navigation.html +1 -1
- data/test/reveal.html +24 -7
- data/test/scss/_settings.scss +142 -74
- data/test/tabs.html +1 -1
- data/test/topbar.html +188 -0
- data/vendor/assets/javascripts/foundation/app.js +33 -21
- data/vendor/assets/javascripts/foundation/jquery.foundation.accordion.js +6 -4
- data/vendor/assets/javascripts/foundation/jquery.foundation.alerts.js +6 -5
- data/vendor/assets/javascripts/foundation/jquery.foundation.buttons.js +13 -7
- data/vendor/assets/javascripts/foundation/jquery.foundation.forms.js +5 -4
- data/vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js +8 -6
- data/vendor/assets/javascripts/foundation/jquery.foundation.navigation.js +3 -2
- data/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js +208 -6
- data/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js +5 -6
- data/vendor/assets/javascripts/foundation/jquery.foundation.tabs.js +3 -2
- data/vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js +13 -7
- data/vendor/assets/javascripts/foundation/jquery.foundation.topbar.js +139 -0
- data/vendor/assets/javascripts/foundation/jquery.js +3416 -3519
- data/vendor/assets/javascripts/foundation/jquery.offcanvas.js +2 -2
- metadata +10 -9
data/test/tabs.html
CHANGED
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
</div>
|
|
133
133
|
<br>
|
|
134
134
|
<div class="eight columns">
|
|
135
|
-
<dl class="tabs pill">
|
|
135
|
+
<dl class="tabs pill three-up">
|
|
136
136
|
<dd class="active"><a href="#pillTab1">Pill Tab 1</a></dd>
|
|
137
137
|
<dd><a href="#pillTab2">Pill Tab 2</a></dd>
|
|
138
138
|
<dd class="hide-for-small"><a href="#pillTab3">Pill Tab 3</a></dd>
|
data/test/topbar.html
ADDED
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
|
3
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
6
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8" />
|
|
9
|
+
|
|
10
|
+
<!-- Set the viewport width to device width for mobile -->
|
|
11
|
+
<meta name="viewport" content="width=device-width" />
|
|
12
|
+
|
|
13
|
+
<title>Foundation Top Bar Testing</title>
|
|
14
|
+
|
|
15
|
+
<!-- Included CSS Files -->
|
|
16
|
+
<link rel="stylesheet" href="stylesheets/styles.css">
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
|
|
20
|
+
|
|
21
|
+
<!-- IE Fix for HTML5 Tags -->
|
|
22
|
+
<!--[if lt IE 9]>
|
|
23
|
+
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
24
|
+
<![endif]-->
|
|
25
|
+
</head>
|
|
26
|
+
<body>
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
<!-- <div class="row">
|
|
30
|
+
<div class="six columns"> -->
|
|
31
|
+
<nav class="top-bar"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
|
|
32
|
+
<ul>
|
|
33
|
+
<!-- Title Area -->
|
|
34
|
+
<li class="name">
|
|
35
|
+
<h1>
|
|
36
|
+
<a href="#">
|
|
37
|
+
<!-- <img src="http://placehold.it/25x25"> -->
|
|
38
|
+
Top Bar Title
|
|
39
|
+
</a>
|
|
40
|
+
</h1>
|
|
41
|
+
</li>
|
|
42
|
+
<li class="toggle-topbar"><a href="#"></a></li>
|
|
43
|
+
</ul>
|
|
44
|
+
|
|
45
|
+
<section>
|
|
46
|
+
<!-- Left Nav Section -->
|
|
47
|
+
<ul class="left">
|
|
48
|
+
<li class="divider"></li>
|
|
49
|
+
<li class="active has-dropdown">
|
|
50
|
+
<a href="#">Main Item 1</a>
|
|
51
|
+
<ul class="dropdown">
|
|
52
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
53
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
54
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
55
|
+
<li class="divider"></li>
|
|
56
|
+
<li><a href="#">See all →</a></li>
|
|
57
|
+
</ul>
|
|
58
|
+
</li>
|
|
59
|
+
<li class="divider"></li>
|
|
60
|
+
<li><a href="#">Main Item 2</a></li>
|
|
61
|
+
<li class="divider"></li>
|
|
62
|
+
<li class="has-dropdown">
|
|
63
|
+
<a href="#">Main Item 3</a>
|
|
64
|
+
<ul class="dropdown">
|
|
65
|
+
<li><label>Section Name</label></li>
|
|
66
|
+
<li class="has-dropdown">
|
|
67
|
+
<a href="#" class="">Dropdown Level 1</a>
|
|
68
|
+
<ul class="dropdown">
|
|
69
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
70
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
71
|
+
<li class="has-dropdown"><a href="#">Dropdown Level 3</a>
|
|
72
|
+
<ul class="dropdown">
|
|
73
|
+
<li><label>Section Name</label></li>
|
|
74
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
75
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
76
|
+
<li class="divider"></li>
|
|
77
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
78
|
+
</ul>
|
|
79
|
+
</li>
|
|
80
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
81
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
82
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
83
|
+
</ul>
|
|
84
|
+
</li>
|
|
85
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
86
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
87
|
+
<li class="divider"></li>
|
|
88
|
+
<li><label>Section Name</label></li>
|
|
89
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
90
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
91
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
92
|
+
<li class="divider"></li>
|
|
93
|
+
<li><a href="#">See all →</a></li>
|
|
94
|
+
</ul>
|
|
95
|
+
</li>
|
|
96
|
+
<li class="divider"></li>
|
|
97
|
+
</ul>
|
|
98
|
+
|
|
99
|
+
<!-- Right Nav Section -->
|
|
100
|
+
<ul class="right">
|
|
101
|
+
<li class="show-for-large divider"></li>
|
|
102
|
+
<li class="has-dropdown">
|
|
103
|
+
<a href="#">Main Item 4</a>
|
|
104
|
+
<ul class="dropdown">
|
|
105
|
+
<li><label>Section Name</label></li>
|
|
106
|
+
<li class="has-dropdown">
|
|
107
|
+
<a href="#" class="">Has Dropdown, Level 1</a>
|
|
108
|
+
<ul class="dropdown">
|
|
109
|
+
<li><a href="#">Dropdown Options</a></li>
|
|
110
|
+
<li><a href="#">Dropdown Options</a></li>
|
|
111
|
+
<li class="has-dropdown">
|
|
112
|
+
<a href="#">Has Dropdown, Level 2</a>
|
|
113
|
+
<ul class="dropdown test">
|
|
114
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
115
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
116
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
117
|
+
</ul>
|
|
118
|
+
</li>
|
|
119
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
120
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
121
|
+
<li><a href="#">Subdropdown Option</a></li>
|
|
122
|
+
</ul>
|
|
123
|
+
</li>
|
|
124
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
125
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
126
|
+
<li class="divider"></li>
|
|
127
|
+
<li><label>Section Name</label></li>
|
|
128
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
129
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
130
|
+
<li><a href="#">Dropdown Option</a></li>
|
|
131
|
+
<li class="divider"></li>
|
|
132
|
+
<li><a href="#">See all →</a></li>
|
|
133
|
+
</ul>
|
|
134
|
+
</li>
|
|
135
|
+
<li class="divider"></li>
|
|
136
|
+
<li class="search">
|
|
137
|
+
<!-- <form class="collapse">
|
|
138
|
+
<input type="text">
|
|
139
|
+
<button type="submit" class="secondary radius button">Search</button>
|
|
140
|
+
</form> -->
|
|
141
|
+
<form>
|
|
142
|
+
<input type="search">
|
|
143
|
+
</form>
|
|
144
|
+
</li>
|
|
145
|
+
<li class="divider show-for-small"></li>
|
|
146
|
+
<li class="has-button"><a class="small button" href="#">Button!</a></li>
|
|
147
|
+
</ul>
|
|
148
|
+
</section>
|
|
149
|
+
</nav>
|
|
150
|
+
<!--</div>
|
|
151
|
+
</div> -->
|
|
152
|
+
|
|
153
|
+
<div class="row">
|
|
154
|
+
<div class="twelve columns">
|
|
155
|
+
<p><a href="index.html">« Back</a></p>
|
|
156
|
+
<h2>Foundation Top Bar Testing</h2>
|
|
157
|
+
<hr>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<div class="row">
|
|
162
|
+
<div class="twelve columns">
|
|
163
|
+
<h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
<!-- Included JS Files -->
|
|
170
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
|
|
171
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
|
|
172
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
|
|
173
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
|
|
174
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
|
|
175
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
|
|
176
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
|
|
177
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
|
|
178
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
|
|
179
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
|
|
180
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.topbar.js"></script>
|
|
181
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
|
|
182
|
+
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
|
|
183
|
+
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
|
|
184
|
+
<script type="text/javascript">
|
|
185
|
+
// Page-Specific JavaScript Goes Here
|
|
186
|
+
</script>
|
|
187
|
+
</body>
|
|
188
|
+
</html>
|
|
@@ -1,22 +1,34 @@
|
|
|
1
|
-
(function (
|
|
1
|
+
;(function ($, window, undefined) {
|
|
2
|
+
'use strict';
|
|
2
3
|
|
|
3
|
-
$(
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
|
|
4
|
+
var $doc = $(document),
|
|
5
|
+
Modernizr = window.Modernizr;
|
|
6
|
+
|
|
7
|
+
$.fn.foundationAlerts ? $doc.foundationAlerts() : null;
|
|
8
|
+
$.fn.foundationButtons ? $doc.foundationButtons() : null;
|
|
9
|
+
$.fn.foundationAccordion ? $doc.foundationAccordion() : null;
|
|
10
|
+
$.fn.foundationNavigation ? $doc.foundationNavigation() : null;
|
|
11
|
+
$.fn.foundationTopBar ? $doc.foundationTopBar({breakPoint: 900}) : null;
|
|
12
|
+
$.fn.foundationCustomForms ? $doc.foundationCustomForms() : null;
|
|
13
|
+
$.fn.foundationMediaQueryViewer ? $doc.foundationMediaQueryViewer() : null;
|
|
14
|
+
$.fn.foundationTabs ? $doc.foundationTabs({callback : $.foundation.customForms.appendCustomMarkup}) : null;
|
|
15
|
+
$.fn.foundationTooltips ? $doc.foundationTooltips() : null;
|
|
16
|
+
|
|
17
|
+
$('input, textarea').placeholder();
|
|
18
|
+
|
|
19
|
+
// UNCOMMENT THE LINE YOU WANT BELOW IF YOU WANT IE8 SUPPORT AND ARE USING .block-grids
|
|
20
|
+
// $('.block-grid.two-up>li:nth-child(2n+1)').css({clear: 'both'});
|
|
21
|
+
// $('.block-grid.three-up>li:nth-child(3n+1)').css({clear: 'both'});
|
|
22
|
+
// $('.block-grid.four-up>li:nth-child(4n+1)').css({clear: 'both'});
|
|
23
|
+
// $('.block-grid.five-up>li:nth-child(5n+1)').css({clear: 'both'});
|
|
24
|
+
|
|
25
|
+
// Hide address bar on mobile devices
|
|
26
|
+
if (Modernizr.touch) {
|
|
27
|
+
$(window).load(function () {
|
|
28
|
+
setTimeout(function () {
|
|
29
|
+
window.scrollTo(0, 1);
|
|
30
|
+
}, 0);
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
})(jQuery, this);
|
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
(function (
|
|
1
|
+
;(function ($, window, undefined){
|
|
2
|
+
'use strict';
|
|
2
3
|
|
|
3
4
|
$.fn.foundationAccordion = function (options) {
|
|
4
5
|
|
|
5
|
-
$(
|
|
6
|
+
$('.accordion li', this).on('click.fndtn', function () {
|
|
7
|
+
var p = $(this).parent(); //changed this
|
|
6
8
|
var flyout = $(this).children('.content').first();
|
|
7
|
-
$('.
|
|
9
|
+
$('.content', p).not(flyout).hide().parent('li').removeClass('active'); //changed this
|
|
8
10
|
flyout.show(0, function () {
|
|
9
11
|
flyout.parent('li').addClass('active');
|
|
10
12
|
});
|
|
@@ -12,4 +14,4 @@
|
|
|
12
14
|
|
|
13
15
|
};
|
|
14
16
|
|
|
15
|
-
})( jQuery );
|
|
17
|
+
})( jQuery, this );
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
(function (
|
|
1
|
+
;(function ($, window, undefined) {
|
|
2
|
+
'use strict';
|
|
2
3
|
|
|
3
4
|
$.fn.foundationAlerts = function (options) {
|
|
4
5
|
var settings = $.extend({
|
|
5
6
|
callback: $.noop
|
|
6
7
|
}, options);
|
|
7
8
|
|
|
8
|
-
$(document).on("click", ".alert-box a.close", function (
|
|
9
|
-
|
|
10
|
-
$(this).closest(".alert-box").fadeOut(function (
|
|
9
|
+
$(document).on("click", ".alert-box a.close", function (e) {
|
|
10
|
+
e.preventDefault();
|
|
11
|
+
$(this).closest(".alert-box").fadeOut(function () {
|
|
11
12
|
$(this).remove();
|
|
12
13
|
// Do something else after the alert closes
|
|
13
14
|
settings.callback();
|
|
@@ -16,4 +17,4 @@
|
|
|
16
17
|
|
|
17
18
|
};
|
|
18
19
|
|
|
19
|
-
})(jQuery);
|
|
20
|
+
})(jQuery, this);
|
|
@@ -1,30 +1,36 @@
|
|
|
1
|
-
(function (
|
|
1
|
+
;(function ($, window, undefined) {
|
|
2
|
+
'use strict';
|
|
2
3
|
|
|
3
4
|
$.fn.foundationButtons = function(options) {
|
|
5
|
+
var $doc = $(document);
|
|
4
6
|
// Prevent event propagation on disabled buttons
|
|
5
|
-
$
|
|
7
|
+
$doc.on('click.fndtn', '.button.disabled', function (e) {
|
|
6
8
|
e.preventDefault();
|
|
7
9
|
});
|
|
8
10
|
|
|
9
11
|
$('.button.dropdown > ul', this).addClass('no-hover');
|
|
10
12
|
|
|
11
|
-
$
|
|
13
|
+
$doc.on('click.fndtn', '.button.dropdown, .button.dropdown.split span', function (e) {
|
|
12
14
|
// Stops further propagation of the event up the DOM tree when clicked on the button.
|
|
13
15
|
// Events fired by its descendants are not being blocked.
|
|
16
|
+
$('.button.dropdown').children('ul').removeClass('show-dropdown');
|
|
14
17
|
if (e.target === this) {
|
|
15
18
|
e.stopPropagation();
|
|
16
19
|
}
|
|
17
20
|
});
|
|
18
|
-
|
|
21
|
+
|
|
22
|
+
$doc.on('click.fndtn', '.button.dropdown.split span', function (e) {
|
|
19
23
|
e.preventDefault();
|
|
20
24
|
$('.button.dropdown', this).not($(this).parent()).children('ul').removeClass('show-dropdown');
|
|
21
25
|
$(this).siblings('ul').toggleClass('show-dropdown');
|
|
22
26
|
});
|
|
23
|
-
|
|
27
|
+
|
|
28
|
+
$doc.on('click.fndtn', '.button.dropdown:not(.split)', function (e) {
|
|
24
29
|
$('.button.dropdown', this).not(this).children('ul').removeClass('show-dropdown');
|
|
25
30
|
$(this).children('ul').toggleClass('show-dropdown');
|
|
26
31
|
});
|
|
27
|
-
|
|
32
|
+
|
|
33
|
+
$doc.on('click.fndtn', 'body, html', function () {
|
|
28
34
|
$('.button.dropdown ul').removeClass('show-dropdown');
|
|
29
35
|
});
|
|
30
36
|
|
|
@@ -46,4 +52,4 @@
|
|
|
46
52
|
|
|
47
53
|
};
|
|
48
54
|
|
|
49
|
-
})( jQuery );
|
|
55
|
+
})( jQuery, this );
|
|
@@ -369,6 +369,8 @@
|
|
|
369
369
|
if (false === $input.is(':disabled')) {
|
|
370
370
|
input.checked = ((input.checked) ? false : true);
|
|
371
371
|
$element.toggleClass('checked');
|
|
372
|
+
|
|
373
|
+
$input.trigger('change');
|
|
372
374
|
}
|
|
373
375
|
};
|
|
374
376
|
|
|
@@ -377,11 +379,10 @@
|
|
|
377
379
|
input = $input[0];
|
|
378
380
|
|
|
379
381
|
if (false === $input.is(':disabled')) {
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
});
|
|
383
|
-
input.checked = ((input.checked) ? false : true);
|
|
382
|
+
|
|
383
|
+
$('input:radio[name="' + $input.attr('name') + '"]').next().not($element).removeClass('checked');
|
|
384
384
|
$element.toggleClass('checked');
|
|
385
|
+
input.checked = $element.hasClass('checked');
|
|
385
386
|
|
|
386
387
|
$input.trigger('change');
|
|
387
388
|
}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
(function (
|
|
1
|
+
;(function ($, window, undefined) {
|
|
2
|
+
'use strict';
|
|
2
3
|
|
|
3
4
|
$.fn.foundationMediaQueryViewer = function (options) {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
var settings = $.extend(options,{toggleKey:77}), // Press 'M'
|
|
6
|
+
$doc = $(document);
|
|
7
|
+
|
|
8
|
+
$doc.on("keyup.mediaQueryViewer", ":input", function (e){
|
|
7
9
|
if (e.which === settings.toggleKey) {
|
|
8
10
|
e.stopPropagation();
|
|
9
11
|
}
|
|
10
12
|
});
|
|
11
|
-
$
|
|
13
|
+
$doc.on("keyup.mediaQueryViewer", function (e) {
|
|
12
14
|
var $mqViewer = $('#fqv');
|
|
13
15
|
|
|
14
16
|
if (e.which === settings.toggleKey) {
|
|
@@ -22,4 +24,4 @@
|
|
|
22
24
|
|
|
23
25
|
};
|
|
24
26
|
|
|
25
|
-
})(jQuery);
|
|
27
|
+
})(jQuery, this);
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
(function ($) {
|
|
11
11
|
'use strict';
|
|
12
|
+
|
|
12
13
|
$.fn.findFirstImage = function () {
|
|
13
14
|
return this.first()
|
|
14
15
|
.find('img')
|
|
@@ -77,7 +78,7 @@
|
|
|
77
78
|
this.$element = $(element);
|
|
78
79
|
this.$wrapper = this.$element.wrap(this.wrapperHTML).parent();
|
|
79
80
|
this.$slides = this.$element.children('img, a, div');
|
|
80
|
-
|
|
81
|
+
|
|
81
82
|
this.$element.bind('orbit.next', function () {
|
|
82
83
|
self.shift('next');
|
|
83
84
|
});
|
|
@@ -116,7 +117,7 @@
|
|
|
116
117
|
this.$element
|
|
117
118
|
.addClass('orbit')
|
|
118
119
|
.css({width: '1px', height: '1px'});
|
|
119
|
-
|
|
120
|
+
|
|
120
121
|
this.$slides.addClass('orbit-slide');
|
|
121
122
|
|
|
122
123
|
this.setDimentionsFromLargestSlide();
|
|
@@ -142,6 +143,7 @@
|
|
|
142
143
|
}
|
|
143
144
|
|
|
144
145
|
this.options.afterLoadComplete.call(this);
|
|
146
|
+
Holder.run();
|
|
145
147
|
},
|
|
146
148
|
|
|
147
149
|
currentSlide: function () {
|
|
@@ -152,7 +154,7 @@
|
|
|
152
154
|
//Collect all slides and set slider size of largest image
|
|
153
155
|
var self = this,
|
|
154
156
|
$fluidPlaceholder;
|
|
155
|
-
|
|
157
|
+
|
|
156
158
|
self.$element.add(self.$wrapper).width(this.$slides.first().outerWidth());
|
|
157
159
|
self.$element.add(self.$wrapper).height(this.$slides.first().height());
|
|
158
160
|
self.orbitWidth = this.$slides.first().outerWidth();
|
|
@@ -179,9 +181,16 @@
|
|
|
179
181
|
|
|
180
182
|
if (this.options.fluid) {
|
|
181
183
|
if (typeof this.options.fluid === "string") {
|
|
182
|
-
$fluidPlaceholder = $(
|
|
184
|
+
// $fluidPlaceholder = $("<img>").attr("src", "http://placehold.it/" + this.options.fluid);
|
|
185
|
+
$fluidPlaceholder = $("<img>").attr("data-src", "holder.js/" + this.options.fluid);
|
|
186
|
+
//var inner = $("<div/>").css({"display":"inline-block", "width":"2px", "height":"2px"});
|
|
187
|
+
//$fluidPlaceholder = $("<div/>").css({"float":"left"});
|
|
188
|
+
//$fluidPlaceholder.wrapInner(inner);
|
|
189
|
+
|
|
190
|
+
//$fluidPlaceholder = $("<div/>").css({"height":"1px", "width":"2px"});
|
|
191
|
+
//$fluidPlaceholder = $("<div style='display:inline-block;width:2px;height:1px;'></div>");
|
|
183
192
|
}
|
|
184
|
-
|
|
193
|
+
|
|
185
194
|
self.$element.prepend($fluidPlaceholder);
|
|
186
195
|
$fluidPlaceholder.addClass('fluid-placeholder');
|
|
187
196
|
self.$element.add(self.$wrapper).css({width: 'inherit'});
|
|
@@ -631,4 +640,197 @@
|
|
|
631
640
|
});
|
|
632
641
|
}
|
|
633
642
|
|
|
634
|
-
}(jQuery));
|
|
643
|
+
}(jQuery));
|
|
644
|
+
|
|
645
|
+
/*
|
|
646
|
+
|
|
647
|
+
Holder - 1.3 - client side image placeholders
|
|
648
|
+
(c) 2012 Ivan Malopinsky / http://imsky.co
|
|
649
|
+
|
|
650
|
+
Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0
|
|
651
|
+
Commercial use requires attribution.
|
|
652
|
+
|
|
653
|
+
*/
|
|
654
|
+
|
|
655
|
+
var Holder = Holder || {};
|
|
656
|
+
(function (app, win) {
|
|
657
|
+
|
|
658
|
+
var preempted = false,
|
|
659
|
+
fallback = false,
|
|
660
|
+
canvas = document.createElement('canvas');
|
|
661
|
+
|
|
662
|
+
//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
|
|
663
|
+
function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}};
|
|
664
|
+
|
|
665
|
+
//https://gist.github.com/991057 by Jed Schmidt with modifications
|
|
666
|
+
function selector(a){
|
|
667
|
+
a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
|
|
668
|
+
var ret=[]; b!=null&&(b.length?ret=b:b.length==0?ret=b:ret=[b]); return ret;
|
|
669
|
+
}
|
|
670
|
+
|
|
671
|
+
//shallow object property extend
|
|
672
|
+
function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c}
|
|
673
|
+
|
|
674
|
+
function draw(ctx, dimensions, template) {
|
|
675
|
+
var dimension_arr = [dimensions.height, dimensions.width].sort();
|
|
676
|
+
var maxFactor = Math.round(dimension_arr[1] / 16),
|
|
677
|
+
minFactor = Math.round(dimension_arr[0] / 16);
|
|
678
|
+
var text_height = Math.max(template.size, maxFactor);
|
|
679
|
+
canvas.width = dimensions.width;
|
|
680
|
+
canvas.height = dimensions.height;
|
|
681
|
+
ctx.textAlign = "center";
|
|
682
|
+
ctx.textBaseline = "middle";
|
|
683
|
+
ctx.fillStyle = template.background;
|
|
684
|
+
ctx.fillRect(0, 0, dimensions.width, dimensions.height);
|
|
685
|
+
ctx.fillStyle = template.foreground;
|
|
686
|
+
ctx.font = "bold " + text_height + "px sans-serif";
|
|
687
|
+
var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height);
|
|
688
|
+
if (Math.round(ctx.measureText(text).width) / dimensions.width > 1) {
|
|
689
|
+
text_height = Math.max(minFactor, template.size);
|
|
690
|
+
}
|
|
691
|
+
ctx.font = "bold " + text_height + "px sans-serif";
|
|
692
|
+
ctx.fillText(text, (dimensions.width / 2), (dimensions.height / 2), dimensions.width);
|
|
693
|
+
return canvas.toDataURL("image/png");
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
if (!canvas.getContext) {
|
|
697
|
+
fallback = true;
|
|
698
|
+
} else {
|
|
699
|
+
if (canvas.toDataURL("image/png").indexOf("data:image/png") < 0) {
|
|
700
|
+
//Android doesn't support data URI
|
|
701
|
+
fallback = true;
|
|
702
|
+
} else {
|
|
703
|
+
var ctx = canvas.getContext("2d");
|
|
704
|
+
}
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
var settings = {
|
|
708
|
+
domain: "holder.js",
|
|
709
|
+
images: "img",
|
|
710
|
+
themes: {
|
|
711
|
+
"gray": {
|
|
712
|
+
background: "#eee",
|
|
713
|
+
foreground: "#aaa",
|
|
714
|
+
size: 12
|
|
715
|
+
},
|
|
716
|
+
"social": {
|
|
717
|
+
background: "#3a5a97",
|
|
718
|
+
foreground: "#fff",
|
|
719
|
+
size: 12
|
|
720
|
+
},
|
|
721
|
+
"industrial": {
|
|
722
|
+
background: "#434A52",
|
|
723
|
+
foreground: "#C2F200",
|
|
724
|
+
size: 12
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
};
|
|
728
|
+
|
|
729
|
+
|
|
730
|
+
|
|
731
|
+
app.flags = {
|
|
732
|
+
dimensions: {
|
|
733
|
+
regex: /([0-9]+)x([0-9]+)/,
|
|
734
|
+
output: function(val){
|
|
735
|
+
var exec = this.regex.exec(val);
|
|
736
|
+
return {
|
|
737
|
+
width: +exec[1],
|
|
738
|
+
height: +exec[2]
|
|
739
|
+
}
|
|
740
|
+
}
|
|
741
|
+
},
|
|
742
|
+
colors: {
|
|
743
|
+
regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,
|
|
744
|
+
output: function(val){
|
|
745
|
+
var exec = this.regex.exec(val);
|
|
746
|
+
return {
|
|
747
|
+
size: settings.themes.gray.size,
|
|
748
|
+
foreground: "#" + exec[2],
|
|
749
|
+
background: "#" + exec[1]
|
|
750
|
+
}
|
|
751
|
+
}
|
|
752
|
+
},
|
|
753
|
+
text: {
|
|
754
|
+
regex: /text\:(.*)/,
|
|
755
|
+
output: function(val){
|
|
756
|
+
return this.regex.exec(val)[1];
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
}
|
|
760
|
+
|
|
761
|
+
for(var flag in app.flags){
|
|
762
|
+
app.flags[flag].match = function (val){
|
|
763
|
+
return val.match(this.regex)
|
|
764
|
+
}
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
app.add_theme = function (name, theme) {
|
|
768
|
+
name != null && theme != null && (settings.themes[name] = theme);
|
|
769
|
+
return app;
|
|
770
|
+
};
|
|
771
|
+
|
|
772
|
+
app.add_image = function (src, el) {
|
|
773
|
+
var node = selector(el);
|
|
774
|
+
if (node.length) {
|
|
775
|
+
for (var i = 0, l = node.length; i < l; i++) {
|
|
776
|
+
var img = document.createElement("img")
|
|
777
|
+
img.setAttribute("data-src", src);
|
|
778
|
+
node[i].appendChild(img);
|
|
779
|
+
}
|
|
780
|
+
}
|
|
781
|
+
return app;
|
|
782
|
+
};
|
|
783
|
+
|
|
784
|
+
app.run = function (o) {
|
|
785
|
+
var options = extend(settings, o),
|
|
786
|
+
images = selector(options.images),
|
|
787
|
+
preempted = true;
|
|
788
|
+
|
|
789
|
+
for (var l = images.length, i = 0; i < l; i++) {
|
|
790
|
+
var theme = settings.themes.gray;
|
|
791
|
+
var src = images[i].getAttribute("data-src") || images[i].getAttribute("src");
|
|
792
|
+
if ( !! ~src.indexOf(options.domain)) {
|
|
793
|
+
var render = false,
|
|
794
|
+
dimensions = null,
|
|
795
|
+
text = null;
|
|
796
|
+
var flags = src.substr(src.indexOf(options.domain) + options.domain.length + 1).split("/");
|
|
797
|
+
for (sl = flags.length, j = 0; j < sl; j++) {
|
|
798
|
+
if (app.flags.dimensions.match(flags[j])) {
|
|
799
|
+
render = true;
|
|
800
|
+
dimensions = app.flags.dimensions.output(flags[j]);
|
|
801
|
+
} else if (app.flags.colors.match(flags[j])) {
|
|
802
|
+
theme = app.flags.colors.output(flags[j]);
|
|
803
|
+
} else if (options.themes[flags[j]]) {
|
|
804
|
+
//If a theme is specified, it will override custom colors
|
|
805
|
+
theme = options.themes[flags[j]];
|
|
806
|
+
} else if (app.flags.text.match(flags[j])) {
|
|
807
|
+
text = app.flags.text.output(flags[j]);
|
|
808
|
+
}
|
|
809
|
+
}
|
|
810
|
+
if (render) {
|
|
811
|
+
images[i].setAttribute("data-src", src);
|
|
812
|
+
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
|
813
|
+
images[i].setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
|
814
|
+
|
|
815
|
+
// Fallback
|
|
816
|
+
// images[i].style.width = dimensions.width + "px";
|
|
817
|
+
// images[i].style.height = dimensions.height + "px";
|
|
818
|
+
images[i].style.backgroundColor = theme.background;
|
|
819
|
+
|
|
820
|
+
var theme = (text ? extend(theme, {
|
|
821
|
+
text: text
|
|
822
|
+
}) : theme);
|
|
823
|
+
|
|
824
|
+
if (!fallback) {
|
|
825
|
+
images[i].setAttribute("src", draw(ctx, dimensions, theme));
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
}
|
|
830
|
+
return app;
|
|
831
|
+
};
|
|
832
|
+
contentLoaded(win, function () {
|
|
833
|
+
preempted || app.run()
|
|
834
|
+
})
|
|
835
|
+
|
|
836
|
+
})(Holder, window);
|