Skip to content

Commit

Permalink
The annotations wrapper node was ultimately causing a inactive overla…
Browse files Browse the repository at this point in the history 
…y over image and mouse events couldn't pass through in IE8. To solve it, the annotations node was removed completely and annotations are now direct childs of the instance wrapper (= siblings of the image). #36

This lead to several changes:
- annotations themselves alwas have `reel-annotation` class name added
- the node receiving the `frame-X` class is the instance wrapper `.reel-overlay`
  • Loading branch information
@pisi
pisi committed Dec 2, 2011
1 parent fcef988 commit f776b53
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 42 deletions.
21 changes: 8 additions & 13 deletions jquery.reel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,11 +169,12 @@ jQuery.reel || (function($, window, document, undefined){
stitched= opt.stitched,
loops= opt.loops,
size= { x: number(t.css(_width_) || opt.attr.width), y: number(t.css(_height_) || opt.attr.height) },
frame= set(_frame_, opt.frame),
frames= set(_frames_, opt.orbital && opt.footage || opt.rows <= 1 && images.length || opt.frames),
rows= stitched ? 1 : ceil(frames / opt.footage),
stage_id= hash(id+opt.suffix),
classes= t.attr('class') || '',
$overlay= $(_div_tag_, { id: stage_id.substr(1), 'class': classes+___+overlay_klass }),
$overlay= $(_div_tag_, { id: stage_id.substr(1), 'class': classes+___+overlay_klass+___+frame_klass+frame }),
$instance= t.wrap($overlay.addClass(opt.klass)).attr({ 'class': klass }),
instances_count= instances.push(add_instance($instance)[0]),
$overlay= $instance.parent().bind(on.instance)
Expand Down Expand Up @@ -574,30 +575,25 @@ jQuery.reel || (function($, window, document, undefined){
space= get(_dimensions_),
$overlay= t.parent(),
film_css= { position: _absolute_, width: space.x, height: space.y, left: 0, top: 0 }
rule(true, ___+dot(annotations_klass), film_css);
opt.crop && rule(true, ___+dot(annotations_klass), { clip: 'rect(0 '+px(space.x)+' '+px(space.y)+' 0)' });
$overlay.append($annotations= $(_div_tag_, { 'class': annotations_klass+___+frame_klass+opt.frame }))
|| ($annotations= $());
$.each(opt.annotations, function(ida, note){
var
$note= $(_div_tag_, note.node).attr({ id: ida }),
$note= $(_div_tag_, note.node).attr({ id: ida }).addClass(annotation_klass),
$image= note.image ? $(tag(_img_), note.image) : $(),
$link= note.link ? $(tag(_a_), note.link) : $()
rule(false, hash(ida), { display: 'none', position: _absolute_ });
note.image || note.link && $note.append($link);
note.link || note.image && $note.append($image);
note.link && note.image && $note.append($link.append($image));
$note.appendTo($annotations);
$note.appendTo($overlay);
});
},
'frameChange.annotations': function(e, frame){
var
frame= frame || get(_frame_),
node= $annotations[0]
node.className= node.className.replace(/frame-\d+/, frame_klass + frame);
$.each(opt.annotations, function(ida, note){
frame= frame || get(_frame_)
this.className= this.className.replace(/frame-\d+/, frame_klass + frame);
var
$note= $(hash(ida), $annotations),
$note= $(hash(ida)),
start= note.start,
end= note.end,
offset= frame - (start || 1),
Expand Down Expand Up @@ -680,7 +676,6 @@ jQuery.reel || (function($, window, document, undefined){
delay, // openingDone's delayed play pointer

$monitor,
$annotations,
$preloader,
indicator= function(axis){
rule(true, ___+dot(indicator_klass)+dot(axis), {
Expand Down Expand Up @@ -856,7 +851,7 @@ jQuery.reel || (function($, window, document, undefined){
preloader_klass= klass + '-preloader',
cached_klass= klass + '-cached',
monitor_klass= klass + '-monitor',
annotations_klass= klass + '-annotations',
annotation_klass= klass + '-annotation',
panning_klass= klass + '-panning',
frame_klass= 'frame-',

Expand Down
34 changes: 5 additions & 29 deletions test/unit/annotations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,6 @@

module('Annotations', reel_test_module_routine);

test( 'No (or undefined) `annotations` option doesn\'t result in any sebsequent DOM changes', function(){
expect(1);
var
selector= '#image',
$reel= $(selector).reel({ annotations: undefined }) // `undefined` is also the default value

ok( !$reel.next('.reel-annotations').length, 'The `.reel-annotations` child not present anywhere in the instance');
});


test( 'Defining an annotations object results in rendering of respective DOM node container', function(){
expect(1);
var
selector= '#image',
$reel= $(selector).reel({
annotations: {}
})

ok( !!$reel.next('.reel-annotations').length, 'The `.reel-annotations` node present');
});


test( 'One annotation DOM container (node) is rendered per each `annotations` object key/value pair', function(){
expect(2);
var
Expand All @@ -36,9 +14,9 @@
"my_annotation_name": {}
}
}),
$annotations= $reel.next('.reel-annotations')
$instance= $reel.parent()

equal( !!$('div[id]', $annotations).length, 1, 'One annotation node with `id` attribute');
equal( !!$reel.siblings('.reel-annotation[id]').length, 1, 'One annotation node with `id` attribute');
ok( !!$('#my_annotation_name').length, 'Reachable by an `id` selector equal to annotation key');
});

Expand All @@ -60,7 +38,7 @@
"still_node": {}
}
}),
$annotations= $reel.next('.reel-annotations')
$instance= $reel.parent()

// Positioning of annotations happens at `frameChange`
$reel.one('frameChange.test', function(){
Expand Down Expand Up @@ -92,7 +70,7 @@
}
}
}),
$annotations= $reel.next('.reel-annotations')
$instance= $reel.parent()

// Positioning of annotations happens at `frameChange`
$reel.one('frameChange.test', function(){
Expand Down Expand Up @@ -126,8 +104,7 @@
}
}
}
}),
$annotations= $reel.next('.reel-annotations')
})

// Positioning of annotations happens at `frameChange`
$reel.one('frameChange.test', function(){
Expand Down Expand Up @@ -167,7 +144,6 @@
opening: 1
}),
checked= [],
$annotations= $reel.next('.reel-annotations'),
$annotation= $('#my_annotation')

// Positioning of annotations happens at `frameChange`
Expand Down

0 comments on commit f776b53

Please sign in to comment.