Skip to content

Commit 94e54f7

Browse files
MottieMottie
committed
added preinit & navFormatter update
1 parent 01206df commit 94e54f7

4 files changed

+54
-95
lines changed

‎README.markdown

+14-67
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,20 @@
1010

1111
(Only the most recent changes are shown below, see the [wiki page](https://github.com/chriscoyier/MovingBoxes/wiki/Change-Log) for a complete listing)
1212

13+
### Version 2.2.9 (2/27/2012)
14+
15+
* Added `preinit` callback/event
16+
* This event is triggered after the basic MovingBoxes structure has been established
17+
* It occurs before the `initialized` event.
18+
* Using this event allow for modifying the struction without any initialization delay.
19+
* See [issue #68](https://github.com/chriscoyier/MovingBoxes/issues/68) on how use this event to add inline navigation arrows.
20+
* Modified the navigationFormatter option:
21+
* Navigation links are now wrapped by a span with a class of "mb-links".
22+
* The contents within the wrapper are removed and updated every time MovingBoxes gets updated.
23+
* The wrapper was added to allow prepending and appending navigation arrows, see [issue #68](https://github.com/chriscoyier/MovingBoxes/issues/68).
24+
* You can now apply attributes directly to the navigation link as well as modifying the contents; this allows for adding tooltip titles or other data attributes.
25+
* Please refer to the [documentation](https://github.com/chriscoyier/MovingBoxes/wiki/Usage) for more details.
26+
1327
### Version 2.2.8 (2/22/2012)
1428

1529
* Clicking on side panels should not follow the link. A better fix for [issue #67](https://github.com/chriscoyier/MovingBoxes/issues/67).
@@ -26,70 +40,3 @@
2640

2741
* Fixed a problem with multiple initializations.
2842
* Remove the name attribute from inputs in cloned panels.
29-
30-
### Version 2.2.4 (1/10/2012)
31-
32-
* Fixed a bug introduced in the last update where the last panel would be misaligned when scrolling in the previous direction.
33-
34-
### Version 2.2.3 (1/10/2012)
35-
36-
* Added `initAnimation` option:
37-
* When `true` (default), MovingBoxes will show the initial animation starting from the first panel and sliding into the current panel (as determined by the hash or `startPanel` option).
38-
* If `false`, no animation will be seen and MovingBoxes will start on the appropriate panel.
39-
* The update method now has a flag to prevent callbacks from firing and also has it's own callback:
40-
* Set the flag to `false` to prevent the built-in callbacks (initChange, beforeAnimation & completed) from firing during the update. This flag is useful if you plan to call the update method a lot, like when the window resizes.
41-
* The callback for the update is used as follows:
42-
43-
```javascript
44-
// update(flag, callback);
45-
$('#slider').data('movingBoxes').update(false, function(slider){
46-
alert('update complete');
47-
});
48-
```
49-
50-
* Fixed clicking on links in the current panel would go to the next panel. Fix for [issue #60](https://github.com/chriscoyier/MovingBoxes/issues/60).
51-
* Updated method of plugin initialization to hopefully ensure that the `completed` callback will not fire until after initialization. Update for [issue #57](https://github.com/chriscoyier/MovingBoxes/issues/57).
52-
* Fixed a problem where the navigation was clearing the current panel after using the update method.
53-
* Hopefully fixed the problems brought up in [issue #49](https://github.com/chriscoyier/MovingBoxes/issues/49). So using this bit of code will allow you to set the MovingBoxes width as a **percentage value**.
54-
55-
```javascript
56-
$(function(){
57-
$(window).resize(function(){
58-
// get MovingBoxes plugin object
59-
var slider = $('.slider').data('movingBoxes');
60-
// set overall width to 50% of the browser width
61-
slider.options.width = $(window).width() * 0.5;
62-
// set panel Width to be 50% of MovingBoxes width (which ends up being 25% of browser width; 50% x 50%)
63-
// OR you can set the panelWidth to a px amount, say 300 instead of a fraction: "slider.options.panelWidth = 300"
64-
slider.options.panelWidth = 0.5;
65-
// update the slider; include false flag to prevent built-in callbacks from firing (optional)
66-
slider.update(false);
67-
}).resize(); // trigger window resize to do the initial resizing.
68-
});
69-
```
70-
71-
### Version 2.2.2 (1/3/2012)
72-
73-
* Removed the `width` and `panelWidth` options.
74-
* The width and panel width are now set using css
75-
* The plugin is still backwards compatible, so setting the `width` and `panelWidth` in the option will still override the css settings.
76-
* Updated the `movingboxes.css` with the following css:
77-
78-
```css
79-
/* Default MovingBoxes wrapper size */
80-
#movingboxes {
81-
width: 900px;
82-
min-height: 200px;
83-
}
84-
85-
/* Default MovingBoxes panel size */
86-
#movingboxes > li {
87-
width: 350px;
88-
}
89-
```
90-
91-
* So, the width still **should not** be set to a percentage, e.g. `width: 100%`, because it will not update when the window resizes.
92-
* Here is [a demo](http://jsfiddle.net/Mottie/jMXx3/1/) of how to resize the slider on the fly.
93-
* Please note that the overall width can now be much much wider than the panel, so please **DON'T use the `wrap` option** in this case because it just doesn't look good.
94-
* Fixed for [issue #49](https://github.com/chriscoyier/MovingBoxes/issues/49).
95-
* The `completed` callback will no longer run immediately after initialization. Fix for [issue #57](https://github.com/chriscoyier/MovingBoxes/issues/57).

‎js/jquery.movingboxes.js

+37-25
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
/*
2-
* Moving Boxes v2.2.8
1+
/*
2+
* Moving Boxes v2.2.9
33
* by Chris Coyier
44
* http://css-tricks.com/moving-boxes/
55
*/
@@ -69,7 +69,9 @@
6969

7070
// Activate moving box on click or when an internal link obtains focus
7171
base.$wrap.click(function(){
72-
base.active();
72+
if (!base.$wrap.hasClass('mb-active-slider')) {
73+
base.active();
74+
}
7375
});
7476
base.$panels.delegate('a', 'focus' ,function(e){
7577
e.preventDefault();
@@ -99,7 +101,7 @@
99101
});
100102

101103
// Bind Events
102-
$.each('initialized initChange beforeAnimation completed'.split(' '), function(i,evt){
104+
$.each('preinit initialized initChange beforeAnimation completed'.split(' '), function(i,evt){
103105
if ($.isFunction(o[evt])){
104106
base.$el.bind(evt + '.movingBoxes', o[evt]);
105107
}
@@ -108,6 +110,8 @@
108110
// Set up "Current" panel
109111
base.curPanel = (o.hashTags) ? base.getHash() || o.startPanel : o.startPanel;
110112

113+
base.$el.trigger( 'preinit.movingBoxes', [ base, base.curPanel ] );
114+
111115
// animate to chosen start panel - starting from the first panel makes it look better
112116
setTimeout(function(){
113117
base.change(base.curPanel, function(){
@@ -189,30 +193,37 @@
189193

190194
// Creates the numbered navigation links
191195
base.buildNav = function() {
192-
if (base.$nav) { base.$nav.remove(); }
196+
if (base.$nav) {
197+
base.$nav.find('.mb-links').empty();
198+
} else {
199+
base.$nav = $('<div class="mb-controls"><span class="mb-links"></span></div>').appendTo(base.$wrap);
200+
}
193201
if (o.buildNav && base.totalPanels > 1) {
194-
base.$nav = $('<div class="mb-controls"><a class="mb-testing"></a></div>').appendTo(base.$wrap);
195-
var j, a = '',
196-
navFormat = $.isFunction(o.navFormatter),
197-
// need link in place to get CSS properties
198-
hiddenText = parseInt( base.$nav.find('.mb-testing').css('text-indent'), 10) < 0;
199-
base.$panels.filter(':not(.cloned)').each(function(i) {
202+
var t, j, a = '', $a,
203+
navFormat = $.isFunction(o.navFormatter);
204+
base.$panels.filter(':not(.cloned)').each(function(i){
200205
j = i + 1;
201-
a += '<a href="#" class="mb-panel' + j;
206+
a = '<a class="mb-link mb-panel' + j + '" href="#"></a>';
207+
$a = $(a);
202208
// If a formatter function is present, use it
203-
if (navFormat) {
204-
var tmp = o.navFormatter(j, $(this));
205-
// Add formatting to title attribute if text is hidden
206-
a += (hiddenText) ? ' ' + o.tooltipClass +'" title="' + tmp : '';
207-
a += '">' + tmp + '</a> ';
209+
if ($.isFunction(o.navigationFormatter)) {
210+
t = o.navigationFormatter(i, $(this));
211+
if (typeof(t) === "string") {
212+
$a.html(t);
213+
} else {
214+
$a = $('<a/>', t);
215+
}
208216
} else {
209-
a += '">' + j + '</a> ';
217+
$a.html(j);
210218
}
219+
$a
220+
.appendTo(base.$nav.find('.mb-links'))
221+
.addClass('mb-link mb-panel' + j)
222+
.data('index', j);
211223
});
212224
base.$nav
213-
.html(a)
214-
.find('a').bind('click', function() {
215-
base.change( $(this).index() + 1 );
225+
.find('a.mb-link').bind('click', function() {
226+
base.change( $(this).data('index') );
216227
return false;
217228
});
218229
}
@@ -279,7 +290,7 @@
279290

280291
if (base.initialized && flag) {
281292
// make this moving box active
282-
base.active();
293+
if (!base.$wrap.hasClass('mb-active-slider')) { base.active(); }
283294
// initChange event - has extra parameter with targeted panel (not cleaned)
284295
base.$el.trigger( 'initChange.movingBoxes', [ base, curPanel ] );
285296
}
@@ -346,7 +357,7 @@
346357

347358
// Update navigation links
348359
if (o.buildNav && base.$nav.length) {
349-
base.$nav.find('a')
360+
base.$nav.find('a.mb-link')
350361
.removeClass(o.currentPanel)
351362
.eq(curPanel - 1).addClass(o.currentPanel);
352363
}
@@ -415,8 +426,9 @@
415426
disabled : 'disabled',// class added to arrows that are disabled (left arrow when on first panel, right arrow on last panel)
416427

417428
// Callbacks
418-
initialized : null, // callback when MovingBoxes has completed initialization
419-
initChange : null, // callback upon change panel initialization
429+
preinit : null, // callback after the basic MovingBoxes structure has been built; before "initialized"
430+
initialized : null, // callback when MovingBoxes has completed initialization; all images loaded
431+
initChange : null, // callback upon change panel change initialization
420432
beforeAnimation : null, // callback before any animation occurs
421433
completed : null // callback after animation completes
422434
};

0 commit comments

Comments
 (0)