2015-02-14 02:55:57 +03:00
|
|
|
/* global App, $ */
|
2015-02-11 01:02:41 +03:00
|
|
|
(function() {
|
|
|
|
|
|
|
|
// ----------
|
|
|
|
var component = App.Page = function(config) {
|
|
|
|
this.label = config.label;
|
|
|
|
this.alternates = config.alternates;
|
|
|
|
this.pageIndex = config.pageIndex;
|
2015-02-14 02:55:57 +03:00
|
|
|
this.details = config.details;
|
2015-02-16 21:18:59 +03:00
|
|
|
|
|
|
|
if (config.masterWidth && config.masterHeight) {
|
|
|
|
this.bounds = new OpenSeadragon.Rect(0, 0, config.masterWidth, config.masterHeight);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.starter = {
|
|
|
|
x: config.x,
|
|
|
|
y: config.y,
|
|
|
|
width: config.width,
|
|
|
|
tileSource: config.tileSource
|
|
|
|
};
|
|
|
|
|
|
|
|
this.main = {};
|
|
|
|
|
2015-02-11 01:02:41 +03:00
|
|
|
this.alternateIndex = -1;
|
|
|
|
};
|
|
|
|
|
|
|
|
// ----------
|
|
|
|
component.prototype = {
|
2015-02-16 21:18:59 +03:00
|
|
|
// ----------
|
|
|
|
setTiledImage: function(tiledImage) {
|
|
|
|
this.setDetail(this.main, this.starter, tiledImage);
|
|
|
|
|
|
|
|
if (!this.bounds) {
|
|
|
|
this.bounds = this.main.tiledImage.getBounds();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// ----------
|
|
|
|
setDetail: function(detail, info, tiledImage) {
|
|
|
|
detail.tiledImage = tiledImage;
|
|
|
|
detail.x = info.x || 0;
|
|
|
|
detail.y = info.y || 0;
|
|
|
|
detail.width = info.width || 1;
|
|
|
|
},
|
|
|
|
|
2015-02-11 01:02:41 +03:00
|
|
|
// ----------
|
|
|
|
selectAlternate: function(index) {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
if (index === this.alternateIndex) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2015-02-16 21:18:59 +03:00
|
|
|
var itemInfo = (index === -1 ? this.starter : this.alternates[index]);
|
2015-02-11 01:02:41 +03:00
|
|
|
|
2015-02-16 21:18:59 +03:00
|
|
|
App.viewer.world.removeItem(this.main.tiledImage);
|
2015-02-11 01:02:41 +03:00
|
|
|
App.viewer.addTiledImage({
|
2015-02-16 21:18:59 +03:00
|
|
|
tileSource: itemInfo.tileSource,
|
2015-02-11 01:02:41 +03:00
|
|
|
index: this.pageIndex,
|
|
|
|
success: function(event) {
|
2015-02-16 21:18:59 +03:00
|
|
|
self.setDetail(self.main, itemInfo, event.item);
|
|
|
|
self.placeDetail(self.main, true);
|
2015-02-11 01:02:41 +03:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
this.alternateIndex = index;
|
2015-02-14 02:55:57 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
// ----------
|
|
|
|
addDetails: function() {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
if (!this.details) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$.each(this.details, function(i, v) {
|
2015-03-10 01:32:38 +03:00
|
|
|
if (v.tiledImage) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2015-02-14 02:55:57 +03:00
|
|
|
App.viewer.addTiledImage({
|
|
|
|
tileSource: v.tileSource,
|
|
|
|
success: function(event) {
|
|
|
|
v.tiledImage = event.item;
|
2015-02-16 21:18:59 +03:00
|
|
|
self.placeDetail(v, true);
|
2015-02-14 02:55:57 +03:00
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-03-10 01:32:38 +03:00
|
|
|
// ----------
|
|
|
|
removeDetails: function() {
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
if (!this.details) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$.each(this.details, function(i, v) {
|
|
|
|
if (v.tiledImage) {
|
|
|
|
App.viewer.world.removeItem(v.tiledImage);
|
|
|
|
delete v.tiledImage;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-03-12 01:41:36 +03:00
|
|
|
// ----------
|
|
|
|
hitTest: function(pos) {
|
|
|
|
if (!this.details) {
|
|
|
|
return this.main.tiledImage;
|
|
|
|
}
|
|
|
|
|
|
|
|
var count = this.details.length;
|
|
|
|
var detail, box;
|
|
|
|
|
|
|
|
for (var i = 0; i < count; i++) {
|
|
|
|
detail = this.details[i];
|
|
|
|
if (!detail.tiledImage) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
|
|
|
box = detail.tiledImage.getBounds();
|
|
|
|
if (pos.x > box.x && pos.y > box.y && pos.x < box.x + box.width &&
|
|
|
|
pos.y < box.y + box.height) {
|
|
|
|
return detail.tiledImage;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return this.main.tiledImage;
|
|
|
|
},
|
|
|
|
|
2015-02-14 02:55:57 +03:00
|
|
|
// ----------
|
2015-02-16 21:18:59 +03:00
|
|
|
getBounds: function() {
|
|
|
|
return this.bounds.clone();
|
|
|
|
},
|
|
|
|
|
|
|
|
// ----------
|
|
|
|
place: function(bounds, immediately) {
|
2015-02-14 02:55:57 +03:00
|
|
|
var self = this;
|
|
|
|
|
2015-02-16 21:18:59 +03:00
|
|
|
this.bounds = bounds.clone();
|
|
|
|
|
|
|
|
this.placeDetail(this.main, immediately);
|
2015-02-14 02:55:57 +03:00
|
|
|
|
|
|
|
if (this.details) {
|
|
|
|
$.each(this.details, function(i, v) {
|
|
|
|
if (v.tiledImage) {
|
2015-02-16 21:18:59 +03:00
|
|
|
self.placeDetail(v, immediately);
|
2015-02-14 02:55:57 +03:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
// ----------
|
2015-02-16 21:18:59 +03:00
|
|
|
placeDetail: function(detail, immediately) {
|
2015-02-14 02:55:57 +03:00
|
|
|
var position = new OpenSeadragon.Point(
|
2015-02-16 21:18:59 +03:00
|
|
|
this.bounds.x + (this.bounds.width * detail.x),
|
|
|
|
this.bounds.y + (this.bounds.width * detail.y));
|
2015-02-14 02:55:57 +03:00
|
|
|
|
|
|
|
detail.tiledImage.setPosition(position, immediately);
|
2015-02-16 21:18:59 +03:00
|
|
|
detail.tiledImage.setWidth(this.bounds.width * detail.width, immediately);
|
2015-02-11 01:02:41 +03:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
})();
|